.clooned-container.live-load{height:400px!important;max-width: 500px !important;}

body {
 }

.w3-theme-l5 {color:#000 !important; background-color:#f0f0f0 !important}
.w3-theme-l4 {color:#000 !important; background-color:#cccccc !important}
.w3-theme-l3 {color:#fff !important; background-color:#999999 !important}
.w3-theme-l2 {color:#fff !important; background-color:#666666 !important}
.w3-theme-l1 {color:#fff !important; background-color:#333333 !important}
.w3-theme-d1 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d2 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d3 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d4 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d5 {color:#fff !important; background-color:#000000 !important}

.w3-theme-light {color:#000 !important; background-color:#f0f0f0 !important}

.w3-theme-action {color:#fff !important; background-color:#000000 !important}

.w3-theme , .w3-theme-dark {color:#fff !important; background: #000;}
.w3-text-theme {color:#000000 !important}
.w3-border-theme {border-color:#000000 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#000000 !important}
.w3-hover-text-theme:hover {color:#000000 !important}
.w3-hover-border-theme:hover {border-color:#000000 !important}

header{
    display: flex;
    align-items: center;
}

footer{
    border-top: 10px solid #fff204;
}

footer p {
    text-align:center;
    font-size:14px;
}

.footer-CTA{
    margin-top:0!important;
    border-top: 10px solid #fff204;
}

.footer-wiper-row{
    display:flex;
    justify-content: space-between;
    border-top: 10px solid #fff204;
    background: #fff204;
}

.footer-wiper-row a{
    width: 16.5%;
    padding: 2%;
    transition: 100ms;
}

.footer-wiper-row a:hover{
    padding:2% 0.5% 0.5% 0.5%;
}

.footer-wiper-row a img{
    width: auto;
    max-width:100%;
}

.video-container{ 
    width: 100%;
    padding:0;
    line-height: 0;
    border-top: 5px solid #fff204;
}

#background-video{
object-fit: cover;
height: 100%;
width: 100%;
}
.inner{
    max-width: 1080px;
    width: 100%;
    margin: auto;
    position: relative;
}

header .inner{
    display: flex;
    align-items: center;
}

header .inner h3{
display:none;
}

.feature-border.nav{
    border-top: 0;
    min-height: 70px;
    height: auto;
    text-align: left;
    z-index:10;
}
.feature-border.nav ul{
    list-style-type: none;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    max-width: 750px;
    flex-direction: column;
    padding-left:30px;
}
.feature-border.nav ul li a{
  text-decoration: none;
}

.feature-border.nav ul li ul{
    list-style-type: none;
    font-size: 16px;
    justify-content: space-between;
    flex-direction: column;
    display:none !important;
    position: absolute;
    margin-left: 0;
    background: #fff204;
    padding:0;
    border:1px solid black;
}
.feature-border.nav ul li.active ul{
    display: flex!important;
}

.feature-border.nav ul li.active ul li{
    padding: 0 20px;
    border-bottom:1px solid black;
    display: flex;
}

.feature-border.nav ul li.active ul li a{
    width:100%;
}

.contact-form {
    line-height: 0;
}

.contact-form iframe{
    width:100%; 
    min-height:900px;
}



#burger-icon, #cross-icon{
    background: none !important;
    color: black !important;
    text-align: left;
    line-height: 52px;
}
#cross-icon{
    font-size: 30px;
    padding-left: 20px;
    padding-top: 1px;
}

.feature-blade-container{
    width: 100%;
    padding:0;
    line-height: 0;
    position: relative;

    /* background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(30,215,249,1) 0%, rgba(255,255,255,1) 53%); */

    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-position: top -135px center;
    background-size:cover; 
    background-color:white;
    padding-bottom: 30px;
    padding-top: 0px;
}

.feature-blade-container.sand{
    background-image: url('../img/sand.png');
}

.feature-blade-container.product{
    padding-top:40px;
}

#homepage-banner-container{
    background-image: none;
}

.feature-blade-container .blurb.ceramic, .ceramic{
    background:rgb(158, 121, 45);
    background: linear-gradient(90deg, rgb(167 131 52) 0%, rgb(218 195 123) 32%, rgb(167 131 51) 49%, rgb(218 196 127) 70%, rgb(170 134 56) 100%);
    background:url('../img/texture/ceramic.jpg');
    background-size: cover;
    background-position: center;
}

.feature-blade-container .blurb.fortis, .fortis{
    background:url('../img/texture/fortis.jpg');
    background-size: cover;
    background-position: center;
}

.feature-blade-container .blurb.arctic, .arctic{
    background:url('../img/texture/arctic.jpg');
    background-size: cover;
    background-position: center;
}

.feature-blade-container .blurb.rain , .rain{
    background:url('../img/texture/rain.jpg');
    background-size: cover;
    background-position: center;
}

.feature-blade-container .blurb.truck, .truck{
    background:url('../img/texture/truck.jpg');
    background-size: cover;
    background-position: center;
}

.feature-blade-container .blurb.ceramic span,
.feature-blade-container .blurb.fortis span,
.feature-blade-container .blurb.arctic span
{ color:black;}


.feature-blade-container-white{
    background:white;
}

.feature-blade-container-black{
    background: rgb(0,0,0);
    background: linear-gradient(320deg, rgba(0,0,0,1) 0%, rgba(209,206,201,1) 24%, rgba(255,255,255,1) 49%, rgba(0,0,0,1) 100%);

}
.feature-blade-container-black .blurb.blurb-30.blurb-img{
    background:white!important;
}


.feature-blade-container h2{    
    width: 100%;
    line-height: 1;
    font-weight: 900;
    font-size: 43px;
    color: #000;
    padding-left: 10px;
}


.blurb{
    opacity:0;
    transition:opacity 1500ms ease-in-out;
}

.blurb.scrolled{
    opacity:1;
} 


.feature-blade-container .blurb{ 
    background: #06aecc;
    color:black;
    padding: 10px;
    margin-bottom: 5px;
    line-height: 1.5;
    border-radius: 50px 0 50px 0;
}

.feature-blade-container .blurb span{
    color:white;
    font-family: "Gotham Black";
    font-weight:bold;
} 

.feature-blade-container .blurb span.brand-name{
    color:inherit;
    font-family: inherit;
    font-weight:inherit;
}

.feature-blade-container .blurb.blurb-img{
    margin:0;
    padding:0;
    padding-top:0!important;
    background:none !important;
    border: 5px solid black;
    border-radius: 50px 0 50px 0;
}

.feature-blade-container .blurb.blurb-img img{
    margin:0;
    border-radius:45px 0 45px 0;
}

.three-d-container{
    border-radius:50px 0 50px 0;
    background:#00000078 !important;
}

.feature-blade-container h2 sup{ 
    font-size: 17px;
    top: -1.1em;
}

 .feature-border{
    background: #fff204;
    width: 100%;
    height: 70px;
    border-top: 10px solid black;
    transform: rotate(0deg);
    margin-top: 0;
    margin-left: 0;
    TEXT-ALIGN: center;
    LINE-HEIGHT: 60PX;
    FONT-SIZE: 14PX;
    FONT-WEIGHT: 700;
    position: relative;
    z-index: 9;
}

.feature-blade-container img{ width:100%;} 

.feature-blade-row{
    padding:0 10px;
    margin-top: 30px;
}




.annotation {
    position: relative;
}

.annotation a.btn{
    height: 50px;
    line-height: 39px;
    padding: 0 40px;
    border: 5px solid black;
    font-weight: bold;
    margin-top: 5px;
}

.dot{
    background: #48adb8;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    line-height: 30px;
    box-shadow: black 5px 5px 11px;
    top: -15px;
    color: white;
}

.dot-1{

right: 50%;
top: 62%;
}   
.dot-1.rain{
    right: 58%;
    top: 52%;
}

.dot-2{
top: 24%;
right: 21%;
}
.dot-2.rain{
    top: 44%;
    right: 30%;
}



.dot-3{
    top: 32%;
    right: 10%;
}

.dot-3.arctic{
    top: 29%;
    right: 10%;
}

.dot-3.fortis{
    top: 37%;
    right: 36%;
}

.blade-feature {
    background:red;
}


.blade-feature.feature-1{
    top: 65%;
    left: 54%;
}
.blade-feature.feature-2{
    top: 16%;
    right: 4%;
}

.blade-feature.feature-3{
    top: 35%;
    right: 21%;
}



.logo{
    max-width: 100px;
    margin: 10px 20px;
}

.banner{
    display:flex;
    margin-top:10px;
    padding-bottom:70px;
}

.blade-finder-banner{
    margin-top:0;
    padding-bottom:0;
}

.storyboard-cards{ 
    margin-top: 40px;
    padding-top: 30px;
    background: rgb(0, 0, 0);
}

.storyboard-cards .w3-third{ 

    padding:0 5px;

}

.feature-blade-container img.four-times{ 
    width:100px;
    margin-left:20px;
 }

.country-selector{
    margin-left: auto;
}

.country-selector a{    
    height: 32px;
    display: inline-block;
    border: 1px solid white;
}
 a.btn{ 
BACKGROUND: #fff204;
    TEXT-DECORATION: NONE;
    COLOR: BLACK;
    PADDING: 5PX 10PX;
    HEIGHT: AUTO;
    BORDER: 0;
}

.country-selector img{
    width:30px;
    height:30px;
}

.banner .s7{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: -10px;
}

.USP-banner{ 
    background: #4b116f;
    color: #fff204;
    text-align: center;
    padding: 30px 10px;
    text-transform: uppercase;
}

.loading-icon{
    position: absolute;
    background: #808080db;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    color: white;
    padding-top:100px;
}

.w3-card{
    margin-bottom: 20px;
    background: white;
}

footer .w3-xlarge {
    font-size: 42px!important;
}

header .w3-center img{

    max-width:200px;

}

#lookup form{
    max-width: 420px;
    width: 100%;
    margin: auto;
}

.submit-form{
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
    background: black !important;
}

#lookup{
    padding-bottom: 30px;
}

.results{
    color:white;
    background: rgb(0,0,0);
    padding:0;
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(50,190,213,1) 94%, rgba(50,190,213,1) 100%);
display: flex;
    flex-wrap: wrap;

}

.results #heading{
    width:100%;
 }

.results .wiper .w3-card{
    background:white;
    color:black;
    padding-bottom: 10px;
}



.results .wiper img{
    max-width:100%;
    margin: 15px 0;
}

.results .wiper .button-footer{
padding: 10px;
}

.results .wiper .button-footer .w3-button{
    background: #fff204 !important;
    width: 100%;
    margin-top: 10px;
    border: 2px solid black;
    font-weight: 600;
    color: black !important;
}

.results .wiper .button-footer .w3-button.instructions{
    background: white!important;
    color:#1c5674!important;
}

.fa-chevron-circle-up{ color:#fff204 !important; }

/* @font-face {
    font-family: 'UkNumberPlate';
    src: url('UkNumberPlate.ttf') format('truetype');} 


.reg-num input{
    background:#ffd708;
    color: black;
    font-size: 46px;
    text-transform: capitalize;
    font-family: 'UkNumberPlate', sans-serif;
    text-align: center;
    border: 3px solid black;
    padding: 0;
    border-radius: 8px;
    margin-top: 10px;
}

*/
.cta{
background: black;
color: white;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}

.cta iframe{
    width: 100%;
    HEIGHT: 650PX;
}

@font-face {
    font-family: "Gotham Black";
    src: url("fonts/gotham-black-webfont.woff") format('woff');
  }

  .feature-blade-container h2,   .cta h2, h1, h2, h3, h4, h5, h6{
    font-family:"Gotham Black";

    LETTER-SPACING: 0;
    FONT-WEIGHT: bolder;
  }


@media (max-width:650px){

    h1.w3-xxxlarge{
        font-size:31px!important;
    }

   .results #heading{
    padding: 0 20px;
   }

   .feature-blade-container .blurb {
    padding: 20px 15px;
   }

   .dot{
    display:none !Important;
    margin-bottom: 20px;
   }

   .feature-blade-container{ 
    padding-top:5px;
    padding-bottom:5px;
   }

   .product-title {
    display: flex;
   }

   .feature-border{
    height: auto;
    padding: 0 30px;
    line-height: 40px;
   }

   .feature-blade-container .blurb.blurb-img{
    margin-bottom:20px;
   }


   .footer-wiper-row{
    flex-wrap: wrap;
   }

   .footer-wiper-row a{
    width:31%;
   }
   .feature-blade-container .blurb{
    margin-bottom:20px !important;
   }

}

@media (max-width:651px){

    .banner{
        flex-direction: column;
        padding:0;
    }

    .banner .s7{
        height:150px;
        width: 100%;
        margin-bottom: 0; 
        margin-left:0;
    }

    .w3-col.s5 {
        width:100%;
    }

    .mob-50{
        width: 48%;
        float: left;
        margin: 0 1%!important;
    }

}

@media(max-width:899px){
    .feature-blade-container .blurb{
        margin-bottom:20px !important;
       }
}


@media(min-width:900px){

#main-menu{
    display:block;
}   

.menu-icon{
    display: none!important;
}

header .inner{
    min-height: 78px;
}

header .inner h3{
    display:block;
    margin-left:230px;
    font-size:16px;
}

.feature-border.nav ul{
    display: flex!important;
    margin-left: 230px;
    flex-direction: row;
    padding-left:0;
    margin-top: 0;
    font-size:18px;
    max-height: 67px;
}

.feature-border.nav ul ul{
    max-height:1000px;
}

.feature-border.nav ul li{
line-height:70px;
}

.feature-border.nav ul li.active ul{
    margin-left:-20px;
    border:none;
}

.feature-border.nav ul li.active ul li:hover{
   background:black;
   color:white;
}


.logo{
    position: absolute;
    max-width: 185px;
    top: 5px;
    left: -5px;
    z-index: 999;
}

    .results h3{
        margin:40px 0;
    }

    .feature-blade-container .product-title{ 
        position:absolute;
        display: flex;
        top:10px;
    }

    .feature-blade-container.product .product-title{ 
        top:-30px;
    }

    .feature-border{
        width:100%;
        FONT-SIZE: 24PX;
        /* transform: rotate(-2deg);
        margin-top: -35px;
        margin-left: -10%;
        margin-bottom:-30px; */
    }



    .feature-blade-container .blurb {
        background: #06aecc;
        padding: 20px;
        margin-bottom: 5px;
        line-height: 1.5;
        position:relative;
    }

    .feature-blade-container .blurb.blurb-100 {
        width:100%;
    }


    .feature-blade-container .blurb.gold span{
        color:black;
    }

    .feature-blade-container .blurb h4 {
        color:black;
    }

    .feature-blade-container .blurb.blurb-50{
        width:48%;
        padding-top:20px;
    }

    .feature-blade-container .blurb.blurb-auto{
        width:auto;
        padding-top:20px;
    }

    .feature-blade-container .blurb.blurb-30{
        width:32%;
    }

    .three-d-container{
        width:auto;
        margin-left:20px;
    }

    .blurb-50 img{
        margin-left:-20px;
    }

    .feature-blade-row{
        display: flex;
        justify-content: space-between;
    }

    .contact-form {
    
        background-image: url(../img/car.jpg);
        background-size: 50% 100%;
        background-repeat: no-repeat;
        background-position: right;
        position: relative;
       }

       .contact-form iframe{
        width:50%;
       }

}