/* UNIVERSAL */
@font-face {
    font-family: 'Aribian';
    src: url(fonts/BebasNeue-Regular.ttf);
}
@font-face {
    font-family: 'fun';
    src: url(fonts/aAntaraDistance.ttf);
}
body { background-color: #E1DAD5FF;}
body>header { 
    padding: 0px var(--gap); 
    background: linear-gradient(#E1DAD5ff, #E1DAD566, #E1DAD511); background-color: var(--primary);   
    background: url('../../media/cover/cover2.jpg') no-repeat fixed; background-size: cover;
    >nav {align-items: center; }
} 
#mastercontrol { display: none;}
/* body>header img { position: absolute;} */
.menu1>header ul>li a {color: var(--white); font-weight: bold; }
body>header.style3  nav>ul:nth-of-type(3) li a { padding: 0px 5px;}
section>header      { font-size: var(--font4); font-weight: bold; line-height: 40px; padding:20px 0px; font-family: 'Aribian'; color: var(--secondary); }
body>header>nav figure img { max-width: 120px;}
section.color2>header {color: var(--white);}
.color2 footer a { background: var(--secondary); color: #fff;}
article>header      { font-size: 20px; font-weight: bold; line-height: 30px; }
section>footer      { margin: 20px 0px;}
section footer>a , footer>button   { text-decoration: none; line-height: var(--line3); padding: 0px var(--space4); background-color: var(--secondary); color: var(--white); font-weight: 700; border-radius: 4px; text-transform: uppercase; }
body>footer         {display: none;}
body>main>section   {position: relative;}
.lefty.align2 main { justify-content: center;}
/* SECTIONS */
.section1 { 
    min-height: 50vh; align-content: center; z-index: 10; 
    background: url('../../media/cover/cover2.jpg') no-repeat fixed; background-size: cover;
    figure img  { height: 110%; bottom: -80px; position: absolute; right: 4vw;} 
    header      {  font-size: 60px; line-height: 80px; color: var(--primary); }
    header i    { font-family: 'fun'; rotate: -2deg; color: var(--primary); font-weight: normal; font-style: normal; font-size: 50px; margin-bottom: -116px; display: block; }
    main        {  text-align: center; }
    footer      {  text-align: center; justify-content: center; }
    footer span a img { height: 50px;}
     footer a { background: var(--primary); color: #000;}
}
.section2            { z-index: 8; }
.section3  figure i { font-size: 60px;  font-weight: 100; }
.section4 img        { max-height: 350px; margin:auto; }
.section5 {  
    align-items: center; align-content: center;
    >header { padding-top: 60px;}
    /* article:nth-of-type(2) { width: var(--wh05);} */
    article:nth-of-type(2) figure { max-height:240px; }
    footer a:nth-of-type(2) { background-color: var(--primary);}
}



.section5.cards1>section>main { display: grid; gap: var(--gap); grid-template-columns: 1fr;  padding: 0px var(--space4); text-align: left;}

.section81 {
    gap: var(--gap);
    grid-template-areas:
        "SF SF SF SF SF SF"
        "SHx SH SM SM SM SMx"
        "SIx SIy SI SI SIb SIa"
        "SN SN SN SN SN SN"
        "SS SS SS SS SS SS"
        "SB SB SB SB SB SB";
    >main { text-align: left; padding-left: 40px;}
    >section footer>a { background: var(--primary); color: var(--secondary);}
    >section>main article header { text-align: left;  font-size: 14px; line-height: 20px; padding: 10px 0px;}
    >section>main article footer {justify-content: flex-start; }
}
.section82 { grid-template-areas:
    "SF SF SF SF SF SF"
    "SH SH SH SH SH SHa"
    "SM SM SM SM SM SM"
    "SIx SIy SI SI SIb SIa"
    "SN SN SN SN SN SN"
    "SS SS SS SS SS SS"
    "SB SB SB SB SB SB";
    >figure img { width: 100%;}
    >header { line-height: var(--line4); text-align: left; width: var(--wh12);}
}
.section82.align2>main { text-align: left; justify-content: flex-start; display: block;}

/* FINISHES */

.section3>.finish1 { position: absolute; left: -20px; top: -60px; background: url('../../media/brand/icon01.png') no-repeat; background-size: contain; width: 200px; height: 200px;   }
.section6>.finish1 { position: absolute; right: -20px; bottom: -30px; background: url('../../media/cover/cover5.png') no-repeat; background-size: contain; width: 400px; height: 200px; z-index: 2; }

.section8>.finish1 { position: absolute; left: -80px; bottom: -70px; background: url('../../media/cover/cover4.png') no-repeat; background-size: contain; width: 350px; height: 300px; z-index: 50;  } 
.section2>header>.finish1, .section3>header>.finish1, .section5>header>.finish1 , .section7>header>.finish1  { width: 50px; height:10px; background-color: var(--secondary); margin: 20px auto 5px; display: block; }
.section3>header>.finish1 {background-color: var(--primary);}
.align3.section5>header>.finish1  { margin-left: auto; margin-right: 0px; }
.section5.lefty { grid-template-areas:
    "SAx SAx SAx SF SF SF"
    "SA SA SA SF SF SF"
    "SH SH SH SS SS SS"
    "SM SM SM SS SS SS"
    "SB SB SB SS SS SS"
    "SI SI SI SSx SSx SSx";
   
}

@media screen and (max-width: 768px) {  
    .finish1, .finish2, .finish3 { position: absolute;}
    .toggle-menu { color: #fff;}
    section>figure, section>figure>img, .section4 img { position: relative; top: 0px;}
    body>header>nav>figure { position: absolute;}
    
    .section3 section main { padding-left: 10px; padding-right: 10px;}
    .section3>.finish1, .section5>.finish1, .section6>.finish1, .section8>.finish1 { width: 120px; height:120px;}
    .section6>.finish1 {bottom:-20px;}
    .section8>.finish1 { left: -20px;}
    .section82>header { width: 100%;}
    #marquee img { max-width: 80px;  }
    section>header { line-height: 52px;}
    .section5.lefty {
        text-align: left;
        grid-template-areas:
        "SAx SAx SAx SF SF SF"
        "SA SA SA SF SF SF"
        "SH SH SH SH SH SH"
        "SM SM SM SM SM SM"
        "SS SS SS SS SS SS"
        "SB SB SB SB SB SB"
        "SI SI SI SI SI SI";
        >section>main { padding: var(--gap) 0px;}
        >header>.finish1 { margin-right:auto; margin-left: 0px;}
    }
    .section81 {
        gap: var(--gap);
        grid-template-areas:
            "SF SF SF SF SF SF"
            "SH SH SH SH SH SH"
            "SM SM SM SM SM SM"
            "SIx SIy SI SI SIb SIa"
            "SN SN SN SN SN SN"
            "SS SS SS SS SS SS"
            "SB SB SB SB SB SB";
    }
    .section3>header>.finish1 { margin:3px auto 0px; left:0px; right:0px;}
    .section5>header>.finish1 { margin-top:3px;}
}
.testimonial header>span    { font-size: 80px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; line-height: 10px; color: var(--secondary); }

form>main>section:nth-of-type(2) {     grid-template-areas:
    "IS1 IS1 IS1 IS1 IS1 IS1"
    "IS2 IS2 IS2 IS2 IS2 IS2"
    "IS3 IS3 IS3 IS3 IS3 IS3"
    "IS4 IS4 IS4 IS4 IS4 IS4"
    "IS5 IS5 IS5 IS5 IS5 IS5"
    "IS6 IS6 IS6 IS6 IS6 IS6"
    "IS7 IS7 IS7 IS7 IS7 IS7"
    "FH FH FH FH FH FH"
    "IN1 IN1 IN1 IN1 IN1 IN1"
    "IN3 IN3 IN3 IN4 IN4 IN4"
    "IN5 IN5 IN5 IN6 IN6 IN6"
    "IN7 IN7 IN7 IN8 IN8 IN8"
    "IN9 IN9 IN9 IN10 IN10 IN10"
    "IN11 IN11 IN11 IN12 IN12 IN12"
    "FF FF FF FF FF FF";
}