/* general */
html{
    font-size: 14px; 
    letter-spacing: -1.5px;
    scroll-behavior: smooth;
}

.noLetterSpacing{
    letter-spacing: 0px;
}

/* general */


/* Tipografias */

/* @font-face {
    font-family: 'Runda';
    src: url('assets/font/RundaNormal.otf') format('opentype')
}
.rudaType{
    font-family: "Ruda";
} */

@font-face {
    font-family: 'RundaLight';
    src: url('assets/font/RundaLight.otf') format('opentype');
}
.RundaLight{
    font-family: "RundaLight";
}

@font-face {
    font-family: 'RundaBold';
    src: url('assets/font/RundaBold.otf') format('opentype');
}
.RundaBold{
    font-family: "RundaBold";
}

@font-face {
    font-family: 'RundaBlack';
    src: url('assets/font/RundaBlack.otf') format('opentype');
}
.RundaBlack{
    font-family: "RundaBlack";
}

/* ------------ */


@font-face {
    font-family: 'TheSeasonsRegular';
    src: url('assets/font/TheSeasonsRegular.otf') format('opentype')
}
.theSeasonsRegular{
    font-family: "TheSeasonsRegular";
}

@font-face {
    font-family: 'TheSeasonsLight';
    src: url('assets/font/TheSeasonsLight.otf') format('opentype');
}
.theSeasonsLight{
    font-family: "TheSeasonsLight";
}

/* ------------ */


/* @font-face {
    font-family: 'SFPro';
    src: url('assets/font/SFPro.ttf') format('opentype');
}
.SFPro{
    font-family: "SFPro";
} */

@font-face {
    font-family: 'SFproUltralightItalic';
    src: url('assets/font/SFproUltralightItalic.otf') format('opentype');
}
.SFproUltralightItalic{
    font-family: "SFproUltralightItalic";
}

@font-face {
    font-family: 'SFProDisplayThinItalic';
    src: url('assets/font/SFProDisplay-ThinItalic.otf') format('opentype');
}
.SFProDisplayThinItalic{
    font-family: "SFProDisplayThinItalic";
}

@font-face {
    font-family: 'SFproUltralight';
    src: url('assets/font/SFproUltralight.otf') format('opentype');
}
.SFproUltralight{
    font-family: "SFproUltralight";
}

/* 
@font-face {
    font-family: 'SFProDisplayBold';
    src: url('assets/font/SFProDisplay-Bold.otf') format('opentype');
} 
.SFProDisplayBold{
    font-family: "SFProDisplayBold";
} */

@font-face {
    font-family: 'SFProDisplayRegular';
    src: url('assets/font/SFPro-DisplayRegular.otf') format('opentype');
}
.SFProDisplayRegular{
    font-family: "SFProDisplayRegular";
}

@font-face {
    font-family: 'SFProRoundedLight';
    src: url('assets/font/SFProRoundedLight.otf') format('opentype');
}
.SFProRoundedLight{
    font-family: "SFProRoundedLight";
}

/* Tipografias */



/* start */

.start{
    overflow: hidden;
}

.navBar{
    /*padding-top: 6rem;*/
    padding-top: 12rem;
}
    .img-bkg{
        margin-top: -6em;
    }

.CraftingHouse{
    top: -10em;
    left: -15em;
    transform: rotate(15deg);
    z-index: -1;
}

.navBarSticky{
    position: fixed;
    margin: 0 auto;
    padding: 3px 0;
    background-color: #0f6cd9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2);
    color: #dddddb;
    width: 100%;
    z-index: 3000;
    transition:  background-color .2s;
    -webkit-transition:  background-color .2s;
    -moz-transition:  background-color .2s;
    -ms-transition:  background-color .2s;
    -o-transition:  background-color .2s;
}

.navBarSticky div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 4000;
}
.navBarSticky svg{
    fill:#dddddb;
    width: 150px
}


@media  (width < 1024px){
    .start button{
        background-color: #1a1915;
        padding: 2px 4px;
        border-radius: 5px;
    }
    .cssHambur{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: #0f6cd9;
        color:#dddddb;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transition:.5s all ;
        -webkit-transition:.5s all ;
        -moz-transition:.5s all ;
        -ms-transition:.5s all ;
        -o-transition:.5s all ;
    }
    .cssHambur li{
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }
    .cssHambur li:nth-child(1){
        transition-delay: .3s;
    }
    .cssHambur li:nth-child(2){
        transition-delay: .4s;
    }
    .cssHambur li:nth-child(3){
        transition-delay: .5s;
    }
    .cssHambur li:nth-child(4){
        transition-delay: .7s;
    }

    .cssHambur li:not(:last-child){
        border-bottom: 1px solid #dddddb;
    }

    .cssHambur li a{
        display: block;
        width: 100%;
        height: calc(100vh / 4);
        text-align: center;
        font-size: 2rem;
        font-family: "RundaBold";
        transition: all .5s ;
        transform: translateY(calc(50% - 1rem));
        -webkit-transform: translateY(calc(50% - 1rem));
        -moz-transform: translateY(calc(50% - 1rem));
        -ms-transform: translateY(calc(50% - 1rem));
        -o-transform: translateY(calc(50% - 1rem));
        -webkit-transition: all .5s ;
        -moz-transition: all .5s ;
        -ms-transition: all .5s ;
        -o-transition: all .5s ;
    }
    .offHambur{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
    .offHambur li{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}


/* start */

/* food&drinks */

.foodDrinks{
    background: url('assets/fooAndDrinksBack.svg') no-repeat;
    /*background-position: right center;
    background-size: 600px;*/
        background-position: 85% 33em;
        background-size: 25%;
}

.georgous-text{
    font-family: "TheSeasonsRegular";
}

@media (width < 1024px){
    .foodDrinks{
        background-size: 500px;
    }
}
@media (width < 768px){
    .foodDrinks{
        background-size: 400px;
        background-position: 140% center;
    }
}
/* food&drinks */

/* Creative */
.backGray{
    background: url('assets/estudioBack.png') center center no-repeat;
    background-size: 80%;
}

/* Creative */


/* theTeam */

.theTeam{
    background: url('assets/underBack-desk.png') no-repeat center center;
    background-size: 170%;
    background-position: center -20px;
}
@media (width < 768px){
    .theTeam{
        background: url('assets/underBack.png') no-repeat center center;
        background-position: center;  
    }
    

}
@media (width > 768px){
    .teamIntergates{
        background: url('assets/teamBackIntegrates.png') no-repeat center center;
        background-size: cover;
    }
}

/* theTeam */

/* Swiper */

.swiper-slide-active,  
.swiper-slide{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.contMark{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
 
    margin: 0 auto; 
}
.swiper img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(.8) ; -webkit-transform: scale(.8) ; -moz-transform: scale(.8) ; -ms-transform: scale(.8) ; -o-transform: scale(.8) ; }
    to { opacity: 1; }
}
  
.fadeIn {
    animation: fadeIn 1s ease-out;
}

@media (width > 768px){
    .our-clients{
        margin-top: -8em;
    }
}
/* Swiper */

/*meetTeam */

.meetTeam{
    background: url("assets/underBack.png") no-repeat center center;
    background-size: cover;
}

.teamTy{
    font-family: 'theSeasonsRegular';
}
@media (width > 640px){
    .teamTy{
        font-family: 'SFProDisplayRegular';
        font-style: italic;
    }
}
/*meetTeam */

/*footer */

footer{
    background: url('assets/backFooter.png') no-repeat center 2rem;
    background-size: cover;
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.line{
    border-top: 1px #bbbbbb solid;
    border-bottom: 1px #bbbbbb solid;
}

.rightLine{
    border-right:#bbbbbb solid 1px;
}

.lastFooter{
    display: grid;
    grid-template-columns: 110px 1fr 1fr 1fr;
}

/*footer */

.andy-team, .martin-team{
    max-width: 90%;
}
    .andy-team{
        margin-left: 10%;
    }

#video-01 iframe, #video-02 iframe, #video-03 iframe{
    width: 100%;
    height: calc(100vw/1.8);
    /*min-height: 95vh;*/
}

@media (width <= 768px){
    .navBarSticky{
        padding: 10px 0;
    }

    .navBar{
        padding-top: 6rem;
        padding-left: 1em;
    }
    .img-bkg{
        margin-top: -5em;
        margin-right: -20em;
    }
        .img-bkg img{
            height: 75vh;
            width: auto;
            max-width: inherit;
            min-width: inherit;
        }
    body > div.start > div.max-w-xl.sm\:max-w-2xl.md\:max-w-3xl.lg\:max-w-4xl.mx-auto.pt-24.pb-24.flex-col{
        padding-left: 2rem;
        padding-right: 1rem;
    }
        body > div.start > div.max-w-xl.sm\:max-w-2xl.md\:max-w-3xl.lg\:max-w-4xl.mx-auto.pt-24.pb-24.flex-col p{
            font-size: 1rem;
            line-height: 120%;
        }
    body > section.max-w-xl.sm\:max-w-2xl.md\:max-w-3xl.lg\:max-w-4xl.mx-auto.px-4.sm\:px-0.lg\:mb-8.centerLeft > h2{
        font-size: 3.25rem;
        line-height: 120%;
    }
    .CraftingHouse {
        top: -11em;
        left: -4em;
        transform: scale(0.7) rotate(0deg);
    }
    .CreativeStBack{
        transform: scale(0.7);
        margin-top: -2em;
        margin-right: 2em;
    }
    .foodDrinks{
        background-position: 275px bottom;
    }
    .foodDrinks p{
        padding-left: 4rem;
        padding-right: 4rem;
    }
    body > section.pt-32.theTeam > div > a{
        font-size: 1.75rem;
    }
    .theTeam{
        background-position: top center;
    }
    .swiper img{
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
    }
    #contact > p{
        font-size: 2.75rem;
        line-height: 110%;
    }
    .andy-team, .martin-team{
        max-width: 100%;
    }
        .andy-team{
            margin-left: 0;
            margin-top: 20px;
    }
    .teamIntergates .mt-72{
        margin-top: 20px;
    }
    .teamIntergates h4{
        margin-bottom: 10px;
    }
    #video-01 iframe, #video-02 iframe, #video-03 iframe{
        height: calc(100vw* 1.78);
    }
    #video-01, #video-02, #video-03{
        position: relative;
    }
        #video-01 span, #video-02 span, #video-03 span{
            position: absolute;
            width: 50%;
            height: 100%;
            top: 0;
            right: 0;
            z-index: 4;
        }
}