/*@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');*/

@font-face {
    font-family: 'LatoWebBlack';
    src:url('../fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
        url('../fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
        url('../fonts/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}
@font-face {
    font-family: 'LatoWebBlack';
    src:url('../fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
        url('../fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
        url('../fonts/Lato-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

:root {
    --backgroundColor:#eeede7;
       
    --footerBGColor: #283943;
    --footerColor: #cbbd95;
    --green1: #2e4a4b;
    --green2: #283943;
    --red: #744b53;
    --lightGreen: #b3b9a9;
    --light0: #faf6ea;
    --light1: #cbbd95;
    --light2: #8e7542;
    --lightblue1: #89bfcb;
    --lightblue2: #7eafbf;
    --lightblue3: #6d9faf;
}

body{
    font-family: "Lato", sans-serif;
}

header{
    box-shadow: 0 -4px 20px #00000055;
}

/* Slider */
.swiper-slide.ausmalbilder{
    background-image: url("./images/slider/Slider_ausmal_Piraten.webp");
}

.swiper-slide.osterhasen{
    background-image: url("./images/slider/Slider_Ostercraft.webp");
}

.swiper-slide.animatics div.slideshow{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}


@keyframes loopImage99-3_2 {
    03%  {opacity: 0;}
    33%  {opacity: 1;}
    66%  {opacity: 1;}
    67%  {opacity: 0;}
}
@keyframes loopImage99-3_3 {    
    36%  {opacity: 0;}
    66%  {opacity: 1;}
    69%  {opacity: 1;}
    99%  {opacity: 0;}
}
@keyframes loopImage98-3_2 {
    03%  {opacity: 0;}
    33%  {opacity: 1;}
    66%  {opacity: 1;}
    67%  {opacity: 0;}
}
@keyframes loopImage98-3_3 {    
    36%  {opacity: 0;}
    66%  {opacity: 1;}
    69%  {opacity: 1;}
    99%  {opacity: 0;}
}

.swiper-slide.DreiDanimation{
    background-image: url("./images/slider/3D_Slider.webp");
}
.swiper-slide.produktillustration{    
    background-image: url("./images/slider/Produktillustration.webp");
}
.impressum{
    background-color: var(--headerBGColor);
}

/*-----MINI CAROUSSEL-----*/

.minicaroussel .swiper-slide{
    height: 19vw;
    max-height: 190px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
@media (max-width: 600px){
    .minicaroussel .swiper-slide{
        height: 24vw;
    }
}

.portfolioLinkButton{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    background-color: #2e4a4b;
    color: #FFF;
    font-size: 120%;
    text-decoration: none;
    height: 20px;
    justify-content: center;

}
.portfolioLinkButton h3{
    text-decoration: none;
    color: #cbbd95;
}

/* Mobile Code*/
/*-----ABOUT US-----*/
.aboutUs-container{
    background-color: #fff;
}
/*-----SERVICES-----*/
.services{
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--lightGreen);
}
.services div{
    display: inline-block;
    position: relative;
    width: auto;
    padding: 0.6em 0 0 0;
    margin: 0em -0.8em;
    font-size: 1rem;
    text-align: center;    
}
.services h2{
    color: var(--green2);
    letter-spacing: 0.04em;
    font-weight: bold;    
    text-align: center;
}
.services h3{
    display: inline-block;
    position: relative;
    color: var(--red);
    background-color: #FFF;
    border-radius: 0 8rem 8rem 0;
    border: solid 0.3rem var(--red);
    border-left: none;
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
    margin-bottom: 0.6rem;
    margin-left: auto;
    padding: 0.2em 1em;
    letter-spacing: 0.05em;
    z-index: 2;
}
.services h3::before{
    content: "";    
    position: absolute;
    left: -50vw;
    top: -0.3rem;
    width: 50vw;
    height: 100%;
    background-color: #FFF;
    border-top: solid 0.3rem var(--red);
    border-bottom: solid 0.3rem var(--red);
    z-index: 1;
}
.services ul{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 9em;
}
.services li{
    display: inline-block;
    position: relative;
    padding: 0.4em 1.0em 0.4em 1.0em;
    border-radius: 1em;
    margin: 0em auto 0.6rem 0.4em;
    background-color: var(--red);
    color: var(--light1);
    font-family: var(--font-highligt);
    font-size: 1.2em;
    font-weight: normal;
    text-decoration: none;
}
/*-----CONTACT-----*/
.contact{
    font-family: var(--font-highligt);
    font-size: 1.4em;
    line-height: 1.6em;
    background-color: var(--green1);
    color: #FFF;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.contact p{
    margin: 1.4em 0;
}

.contact a.mail, .contact a.telephon{
    font-family: var(--font-highligt);
    font-weight: var(--font-highligt-weight);
    text-decoration: none;
    color: var(--light1);
    display: block;
}

/*GALLERY*/
.gallery-container{
    background-color: var(--footerBGColor);
    display: grid;
    grid-gap: 1em;
    height: 100px;
}
.gallery-item{
    background-size: contain;
    width: 100%;
    background-color: #FFF;
}

/*Desktop Code Start*/
@media (min-width: 600px){

    /*-----SERVICES-----*/
    .services{
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: calc(50% - 1rem) calc(50% - 1rem);
        grid-gap: 0.8rem 2rem;
        background-color: var(--lightGreen);
    }
    .services>h2{
        grid-column: span 2;
    }
    .services div:nth-of-type(even) h3{
        border-radius: 8rem 0 0 8rem;
        border-left: solid 0.3rem var(--red);
        border-right: none;
    }
    .services div:nth-of-type(even) h3::before {
        right: -50vw;
        left: auto;
        top: -0.3rem;
    }
    .services div:nth-of-type(odd) li{
        margin: 0em auto 0.6rem 1rem ;
    }
    .services div:nth-of-type(even) li{
        margin: 0em 1em 0.6rem auto;
    }
    /*-----CONTACT-----*/
    .contact{
        font-family: var(--font-highligt);
        font-size: 1.4em;
        line-height: 1.6em;
        background-color: var(--green1);
        color: #FFF;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .contact p{
        margin: 1.4em 0;
    }
    
    .contact a{
        font-family: var(--font-highligt);
        font-weight: var(--font-highligt-weight);
        text-decoration: none;
        font-weight: bold;
        color: var(--light1);
    }
    .contact a.mail, .contact a.telephon{
        display: block;
    }

    /*GALLERY*/
    
    .gallery-item{
        background-size: contain;
        width: 100%;
        background-color: #FFF;
    }
    
    .gallery-container{
        background-color: var(--footerBGColor);
        display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	    grid-auto-flow: row dense;
	    grid-gap: 1em;
        height: 100px;
    }
    

}
/*Desktop Code Ende*/

/* - - - Porfolio - - - */

.portfolioThema{
    background-image: url("images/portfolioheader/PortfolioHeader_room.webp");
    background-position: center;
    background-size: auto 100%;
}
.portfolioThema.storyboard{
    background-image: url("images/portfolioheader/PortfolioHeader_Storyboard.webp");
}
.portfolioThema.werbe{
    background-image: url("images/portfolioheader/PortfolioHeader_boygirl.webp");
}
.portfolioThema.produkt{
    background-image: url("images/portfolioheader/PortfolioHeader_produkt.webp");
}


a.iconSocial.insta::before {  
    background-image: url("./images/social/Social_Icon_Instagram_darkred.webp");
}
a.iconSocial.facebook::before {  
    background-image: url("./images/social/Social_Icon_Facebook_darkred.webp");
}
a.iconSocial.youtube::before {  
    background-image: url("./images/social/Social_Icon_YouTube_darkred.webp");
}

/* - - - Projekt Overview 
    
.projektoverview{
    display: grid;
    grid-template-columns: 1fr ;
    grid-column-gap: var(--paddingX);
    grid-row-gap: 40px;
    padding-bottom: 80px;
}
.projektoverview>header{
    height: auto;
    background-color: transparent;
}

.projektoverview>a{
    display: block;
}
.projektoverview>a:hover>figure,
.projektoverview>a:hover>img{
    transform: scale(1.02);
    box-shadow: 0 2px 5px #00000055;
}
.projektoverview figure,
.projektoverview img{
    display: block;
    width: 100%;
    transition: transform 0.05s, box-shadow 0.05s;
    margin: 0;
}
.projektoverview h3{
    margin: 0;
    margin-top: 8px;
}
.projektoverview p{
    font-weight: normal;
    margin: 0.2em 0;
    text-decoration: none;
    color: #888;
}
.projektoverview>a:hover p{
    text-decoration: none;
}
- - - */

.projekteshop >header {
    grid-column: span 3;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    padding: 0px;
}