/* CSS Parts style sheet of Bertraichi */
/* header */
@import url(./css/header.css);
/* logos */
@import url(./css/logo.css);
@import url(./css/sublogo.css);
/* balls */
@import url(./css/balls.css);
/* intro */
@import url(./css/intro.css);
/* teaser */
@import url(./css/teaser.css);
/* menu */
@import url(./css/menu.css);
/* nav */
@import url(./css/nav.css);
/* shortcutmenu */
@import url(./css/shortcutmenu.css);
/* tab */
@import url(./css/tab.css);
/* contact form */
@import url(./css/contact.css);
/* tiles */
@import url(./css/tile.css);
/* cards */
@import url(./css/card.css);
/* box */
@import url(./css/box.css);
/* field*/
@import url(./css/field.css);
/* cutout */
@import url(./css/cutout.css);
/* case*/
@import url(./css/case.css);
/* poster */
@import url(./css/poster.css);
/* pocket */
@import url(./css/pocket.css);
/* drop */
@import url(./css/drop.css);
/* crate */
@import url(./css/crate.css);
/* chest */
@import url(./css/chest.css);
/* sphere */
@import url(./css/sphere.css);
/* photogallery */
@import url(./css/photogallery.css);
/* acrostic */
@import url(./css/acrostic.css);
/* pit */
@import url(./css/pit.css);
/* encase */
@import url(./css/encase.css);
/* map*/
@import url(./css/map.css);
/* pack*/
@import url(./css/pack.css);
/* carton*/
@import url(./css/carton.css);
/* package */
@import url(./css/package.css);
/* tunk */
@import url(./css/tunk.css);
/* kist */
@import url(./css/kist.css);
/* casket */
@import url(./css/casket.css);
/* footer */
@import url(./css/footer.css);
/* uparrow */
@import url(./css/uparrow.css);
/* socialmedia */
@import url(./css/socialmedia.css);
/* cookie */
@import url(./css/cookie.css);

/* Print Version style sheet of the Website*/
@import url("css/print.css");


/* fonts of website */
/* own created font with full commercial license */
@font-face {
    font-family: 'BerTraiChi';
    src: url(./assets/fonts/BerTraiChi/BerTraiChiBold.ttf);
}

@font-face {
    font-family: 'BerTraiChiBold';
    src: url(./assets/fonts/BerTraiChi/BerTraiChiBold.ttf) format("truetype");
}
@font-face {
    font-family: 'BerTraiChiHeavyBold';
    src: url(./assets/fonts/BerTraiChi/BerTraiChiHeavyBold.ttf) format("truetype");
}

/* full free commercial licensed font*/
@font-face {
    font-family: 'OpenSans';
    src: url(./assets/fonts/OpenSans/OpenSans-Regular.ttf) format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: 'OpenSansLight';
    src: url(./assets/fonts/OpenSans/OpenSans-Light.ttf) format("truetype");
}

@font-face {
    font-family: 'AoyagiKouzan';
    src: url(./assets/fonts/AoyagiKouzan/AoyagiKouzan.otf);
}

/* chinese font style */
@font-face {
    font-family: 'SongTi';
    src: url(./assets/fonts/SongTi/songti-sc-regular.ttf);
}

:root {
    /* coporate design colors */
    --cdctrans: #00000000;
    --cdclime: #B6BA33;
    --cdcolive: #517720;
    --cdcteal: #349E86;
    --cdcyale: #033C6B;
    --cdcrasberry: #BE293E;
    --cdcgold: #EFA91D;
    --cdcsaphire: #202F77;
    --cdcmagenta: #EF1D9B;
    --cdcpaleazure: #D0D0D8;
    --cdcanchor: #48484C;
    --cdcanchortrans: #48484c75;
    --cdcwhite: #FFFFFF;
    --cdcblack: #000000;
    --cdcblacktrans: #0000005b;
    --cdcblackdarktrans: #000000ee;
    /* coporate design colors gradients */
    --cdcglimeolive: linear-gradient(45deg, rgba(182, 186, 51) 0%, rgba(81, 119, 32) 70%);
    --cdcglimeolivetrans: -webkit-linear-gradient(330deg, rgb(128 131 42 / 49%) 0%, rgb(43 64 17 / 48%) 70%);
    --cdcgtealyale: linear-gradient(45deg, rgba(52, 158, 134) 0%, rgba(3, 60, 107) 70%);
    --cdcgtealyaletrans: -webkit-linear-gradient(330deg, rgb(36 101 86 / 55%) 0%, rgb(5 40 69 / 57%) 70%);
    --cdcgrasberrygold: linear-gradient(45deg, rgba(190, 41, 62) 50%, rgba(239, 169, 29) 50%);
    --cdcgrasberrygoldtrans: -webkit-linear-gradient(330deg,rgb(174 119 10 / 52%) 0%, rgb(136 0 18 / 56%) 70%);
    --cdcgsaphiremagenta: -webkit-linear-gradient(45deg, rgba(32, 47, 119) 0%, rgba(239, 29, 155) 90%);
    --cdcgsaphiremagentatrans: -webkit-linear-gradient(330deg, rgb(9 21 78 / 51%) 0%, rgb(138 5 85 / 44%) 95%);
    --cdcglimeolivetealyalerasberrygold: linear-gradient(90deg, rgba(182, 186, 51, 1) 0%, rgba(81, 119, 32, 1) 19%, rgba(52, 158, 134, 1) 39%, rgba(3, 60, 107, 1) 60%, rgba(190, 41, 62, 1) 81%, rgba(239, 169, 29, 1) 100%);
    --cdcglimeolivetealyalerasberrygoldtrans: linear-gradient(90deg, rgba(181, 186, 51, 0.52) 0%, rgba(81, 119, 32, 0.52) 19%, rgba(52, 158, 133, 0.537) 39%, rgba(3, 60, 107, 0.512) 60%, rgba(190, 41, 61, 0.52) 81%, rgba(239, 169, 29, 0.553) 100%);
    --cdcgpaleazureanchor: linear-gradient(45deg, rgba(72, 72, 76) 50%, rgba(208, 208, 216) 50%);
    /* coporate design fonts */
    --cdfbtc: "BerTraiChi";
    --cdfbtclight: "BerTraiChiLight";
    --cdfbtcbold: "BerTraiChiBold";
    --cdfbtcheavybold: "BerTraiChiHeavyBold";
    --cdfos: "OpenSans";
    --cdfoslight: "OpenSansLight";
    --cdfak: "AoyagiKouzan";
    --cdfst: "SongTi";
}

/*{
    font-family: var(--cdfst);  !important;
} */

*,
html,
body {
    box-sizing: border-box;
    scroll-behavior: smooth;
    margin: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition-duration: 1s;
}

body {
    font-family: var(--cdfos);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
    text-decoration: none;
    list-style-type: none;
    color: var(--cdcanchor);
    font-family: var(--cdfos);
}

h1 {
    font-size: 3em;
    font-family: var(--cdfst);
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

h2 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(0deg, rgba(182, 186, 51, 1) 0%, rgba(81, 119, 32, 1) 19%, rgba(52, 158, 134, 1) 39%, rgba(3, 60, 107, 1) 60%, rgba(190, 41, 62, 1) 81%, rgba(239, 169, 29, 1) 100%);
    font-size: 3em;
    padding: 0.2em;
    font-family: var(--cdfst);
}

img {
    width: 100%;
}


h3 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(0deg, rgba(182, 186, 51, 1) 0%, rgba(81, 119, 32, 1) 19%, rgba(52, 158, 134, 1) 39%, rgba(3, 60, 107, 1) 60%, rgba(190, 41, 62, 1) 81%, rgba(239, 169, 29, 1) 100%);
    font-size: 1.9em;
    padding: 1em 0em 1em 0em;
}

h4 {
    font-weight: bold;
}

h6 {
    font-size: 1.3em;
    font-weight: 700;
    padding: 0.5em 0em 0.5em 0em;
    color: var(--cdcanchor);
}

p {
    color: var(--cdcanchor);
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 2em 11% 3em;
}

video {
    width: 65%;
    padding: 1em;
}

iframe {
    width: 50em;
    height: 25em;
    padding: 1em;
}

ul {
    padding: 0em;
}

::-moz-selection {
    background: #111111d0;
    color: #fff;
}

::selection {
    background: #111111d0;
    color: #fff;
}

::-webkit-selection {
    background: #111111d0;
    color: #fff;
}

/* individuel pages styles elemnts ################################################################### */
/* ber area ####################################################### */
#ber {
    background: url(./assets/img/graphics/bc.png);
    background-repeat: none;
    background-size: cover;
    background-attachment: fixed;
}

#ber h2,
#ber h3 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(20deg, rgba(182, 186, 51, 1) 0%, rgba(81, 119, 32, 1) 50%);
}

#ber main {
    padding: 15em 11% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

/* trai area ####################################################### */
#trai {
    background: url(./assets/img/graphics/ta.png);
    background-repeat: none;
    background-size: cover;
    background-attachment: fixed;
}

#trai h2,
#trai h3 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(20deg, rgba(52, 158, 134, 1) 0%, rgba(3, 60, 107, 1) 50%);
}

#trai main {
    padding: 15em 11% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

/* chi area ####################################################### */
#chi {
    background: url(./assets/img/graphics/cb.png);
    background-repeat: none;
    background-size: cover;
    background-attachment: fixed;
}

#chi main {
    padding: 15em 11% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}


#chi h2,
#chi h3 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(20deg, rgba(190, 41, 62, 1) 0%, rgba(239, 169, 29, 1) 50%);
}

/* about us area ####################################################### */
#us h2,
#us h3 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(20deg, rgba(32, 47, 119) 0%, rgba(239, 29, 155) 50%);
}

#us main {
    padding: 15em 11% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

/* about us area ####################################################### */
#con main,
#imp main,
#pri main {
    padding: 15em 11% 0;
}

/* privacy area ####################################################### */
#pri main h3,
#pri main h5 {
    font-family: var(--cdfst);
}

/* imprint area ####################################################### */
#imp main h3,
#imp main h6 {
    font-family: var(--cdfst);
}

/* mediquery responsive design ################################################################### */
@media only screen and (max-width: 1300px) {
    main {
        padding: 2em 15% 3em;
    }
}

@media only screen and (max-width: 900px) {
    h2 {
        font-size: 2.7em;
    }

    main {
        padding: 2em 10% 3em;
    }
    video {
        width: 30em;
        padding: 2em 0em 0em 0em;
    }

}

@media only screen and (max-width: 500px) {
    h2 {
        font-size: 2.3em;
    }
    h3 {
        font-size: 1.2em;
    }
    h6 {
        font-size: 1.1em;
    }
    main {
        padding: 2em 3% 3em;
    }
    video {
        width: 19em;
    }
}

@media only screen and (max-width: 350px) {
    h2 {
        font-size: 2em;
    }

    main {
        padding: 2em 1% 3em;
    }
    video {
        width: 15em;
        padding: 1em 0em 0em 0em;
    }
}