/*
	General styles
*/

body, html,h1,h2,h3,h4,h5,h6,p,ul,ol,li {
	height: 100%;margin:0;padding:0;font-family: 'Roboto', sans-serif;

}



header {max-width:1560px;width:90%;margin:0 auto;}
header a.logo {height: 50px;}
header img {width:187px;margin-top:20px;}

.wall1 {position: relative;width:60%;text-align: center;top:0px;}
.wall1 img {width:60%;margin-top: 0px;}


.wall2 {position: relative;
    text-align: center;
    top: -457px;
   margin-left: -195px;}
.wall2 img {width: 471px;}
img {width:750px;}

img.clock {width:100px; }
img.thermo {width:115px; }

.col-wl-l {    position: relative;
    top: -1135px;
    left: 232px;}
.animate3{    margin-top: -4082px;
    position: relative;
    margin-left: 243px;}

.animate4{         margin-top: -2945px;
    position: relative;
    margin-left: 243px;}


.animate5{        margin-top: -2947px;
    position: relative;
    margin-left: 243px;}


.animate6 {      margin-top: -2950px;
    position: relative;
    margin-left: 236px;}

/*#pin4,#pin5,#pin6,#pin7,#pin8 {width: 100% !important}*/
#pin4,#pin5,#pin6,#pin7,#pin8 {width: 1200px !important}


.overlay {background: url(../img/bg-2.jpg) top center;
      background-size:100vw 300vh;background-attachment: fixed; }





.main {height:465vh;
    overflow: hidden;
    width: 1280px;
    margin: 0px auto;
    margin-top: 14vh;margin-left:62px;position:relative;display: block}

/*.main {height:465vh;
    overflow: hidden;
    width: 1280px;
    margin: 0px auto;
   position:relative;}*/

.content {width:1024px;margin:0 auto;margin-top:5vh;text-align: center;}


.wall-2 {padding:10px;color: #000;position:absolute;margin-left:500px;z-index:9999;width:150px;background: #fff;margin-top:300px;}
.wall-3 {padding:10px;color: #000;position:absolute;margin-left:250px;z-index:9999;width:150px;background: #fff;margin-top:400px;}
.primer-r {padding:10px;color: #000;position:absolute;margin-left:500px;z-index:9999;width:150px;background: #fff;margin-top:500px;}
.color-r {padding:10px;color: #000;position:absolute;margin-left:250px;z-index:9999;width:150px;background: #fff;margin-top:600px;}

.content h1{color:#fff;font-size:4rem;font-weight:100;padding:0px;margin:0px; }
.content p {font-size:1.2rem;color:#fff;font-weight: 400;}
.quad-coat {    width: 250px;
    padding: 5px 10px 15px;
    position: absolute;
    right: 85px;
    top: 50px;
    z-index: 9;
    color: #fff;
    text-align: center;
    border-radius: 5px;}
.quad-coat .top-txt,.quad-coat h3 {font-weight: 100;margin-bottom:15px;}
.quad-coat p {font-size:0.95rem;font-weight: 300;text-align: justify;color:#fff;}
.quad-coat h3 { background: linear-gradient(to right,  #ee2a7b 33%, #f7941d 66%, #ffc753 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;float:left;font-weight: 300;font-size:28px;}
.quad-coat .top-txt {text-align: left;}
.quad-coat a,.smart-paint a,.mr-protect a, .mr-finish  a,.quartz-shield  a,.hydrophobic a,.weatherprotect  a,.lifetime a,.smart-cool a,.smart-dry a,.teninone a,.lifetime a{color:#fff;text-decoration: none;float:left;}
.quad-coat  .line,.smart-dry .line {float:left;}
.line {width: 25px;border-bottom:1px solid #fff;display: block;margin:0 auto;}
span.number {font-size: 6.5rem;
    font-weight: 500;
    margin-left: -11rem;
    position: absolute;
    margin-top: -5rem;
    text-shadow: 3px 3px 65px #000;

}

.smart-paint a,.mr-protect a,.mr-finish a {float: none;}

.quartz-shield  a,.hydrophobic a,.teninone  a,.smart-cool a{float:right;}

.mr-protect {background: linear-gradient(to right, #020281  0%, #0018d0 100%) ;width:250px;padding:15px 25px 15px;position: absolute;    margin-left: 22px;top:300px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow:39px 11px 65px rgba(0, 0, 0, 0.64)}
.mr-protect .top-txt,.mr-protect h3 {font-weight: 300;margin-bottom:15px;}
.mr-protect p {font-size:0.95rem;font-weight: 300;text-align: center;}

.smart-paint {background:linear-gradient(to right, #aa0000 0%, #ff0000 100%) ;width:250px;padding:15px 40px 15px;position: absolute;margin-left:350px;top:500px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 65px rgba(0, 0, 0, 0.64);}
.smart-paint  .top-txt,.smart-paint  h3 {font-weight: 100;margin-bottom:15px;}
.smart-paint  p {font-size:0.95rem;font-weight: 300;text-align: center;}
.smart-paint .number{left:3rem;}
.smart-paint .number i {font-style: normal;position: relative;top:-6px;}
.smart-paint .number i:first-child {  font-size: 3.7rem;
    left: -0.5rem;}
.smart-paint .number i:last-child {       top: 49px;
    left: -1rem;}
.mr-finish {    background: #1f1e18;
    width: 250px;
    padding: 15px 40px 15px;
    position: absolute;
    margin-left: 692px;
    top: 790px;
    z-index: 9;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    box-shadow: 3px 3px 45px rgba(0, 0, 0, 0.64);
}
.mr-finish .top-txt,.mr-finish h3 {font-weight: 300;margin-bottom:15px;}
.mr-finish p {font-size:0.95rem;font-weight: 300;text-align: center;}
.mr-finish .number{left: 9rem;
    top: 4rem;}
.quartz-shield {width:250px;padding:5px 10px 15px;position: absolute;margin-left:50px;top: 1415px;;z-index:9;color:#fff;text-align: right;border-radius: 5px;}
.quartz-shield  .top-txt,.quartz-shield  h3 {font-weight: 100;margin-bottom:15px;}
.quartz-shield  p {font-size:0.95rem;font-weight: 300;text-align: right;}


.hydrophobic {width:250px;padding:5px 10px 15px;position: absolute;margin-left:50px;top:1790px;z-index:9;color:#fff;text-align: right;border-radius: 5px;}
.hydrophobic  .top-txt,.hydrophobic h3 {font-weight: 300;margin-bottom:15px;}
.hydrophobic  p {font-size:0.95rem;font-weight: 300;text-align: right;}
.hydrophobic .line,.quartz-shield  .line,.smart-cool .line{float:right;}

.smartbreath{  position: absolute;
    left: 300px;
    top: 1769px;
    z-index: 9;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    width: 178px;}
.smartbreath img {width:100%}
.weatherprotect {    
    width: 250px;
    padding: 5px 10px 15px;
    position: absolute;
    right: 70px;
    top: 1700px;
    z-index: 9;
    color: #fff;
    text-align: center;
}
.weatherprotect  .top-txt,.weatherprotect h3 {font-weight: 300;margin-bottom:15px;}
.weatherprotect  p {font-size:0.95rem;font-weight: 300;text-align: left;}


.smart-dry {
    width: 250px;
    padding: 5px 10px 15px;
    position: absolute;
    right: 100px;
    top: 1900px;
    z-index: 9;
    color: #fff;
    text-align: left;
}
.smart-dry  .top-txt,.smart-dry h3 {font-weight: 300;margin-bottom:15px;}
.smart-dry  p {font-size:0.95rem;font-weight: 300;text-align: left;}

.smart-cool {width:250px;padding:5px 10px 15px;position: absolute;left:50px;top:2090px;z-index:9;color:#fff;text-align: right;}
.smart-cool  .top-txt,.smart-cool h3 {font-weight: 300;margin-bottom:15px;}
.smart-cool  p {font-size:0.95rem;font-weight: 300;text-align: right;}


.lifetime{width:250px;padding:5px 10px 15px;position: absolute; right: 100px;top:2250px;z-index:9;color:#fff;text-align: left;}
.lifetime  .top-txt,.lifetime h3 {font-weight: 300;margin-bottom:15px;}
.lifetime  p {font-size:0.95rem;font-weight: 300;text-align: left;}
.lifetime .line {float:left;}

.teninone{width:250px;padding:5px 10px 15px;position: absolute;left:50px;top:2450px;z-index:9;color:#fff;text-align: right;}
.teninone  .top-txt,.teninone h3 {font-weight: 300;margin-bottom:15px;}
.teninone  p {font-size:0.95rem;font-weight: 300;text-align: right;}
.teninone .line {float:right;}


.rain {width: 214px;
    position: absolute;
	left:140px;
        top: 1200px;
    z-index: 9999;
    text-align: center;}
.rain img {width:500px;}
.sun {width: 214px;
    position: absolute;
	left: 68px;
    top: 850px;
    z-index: 9999;
    text-align: center;}
 .sun img {width:100px;}
.footer {position: relative;bottom:0px;width:100%;background: url(../img/footer-bg.png) no-repeat top center;background-size:cover;height:50vh;margin-top:-313px;text-align: center;}

.footer a {    text-decoration: none;
    /*background: linear-gradient(to right, rgba(255, 0, 0, 0.53),rgba(255, 252, 0, 0.5),rgba(1, 180, 57, 0.5),rgba(0, 234, 255, 0.5),rgba(0, 3, 144, 0.5),rgba(255, 0, 198, 0.5));
    padding: 5px;*/
    width: 200px;
    color: #fff;
    /* margin: 0 auto; */
    position: relative;
    top: 33vh;
   /* padding: 10px 35px;
    border-radius: 5px;
    font-weight: 300;*/}

.footer a img {width: 123px}

.arrow {
  text-align: center;
  margin: 1% 0;color:#fff;
}
.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  60% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
     -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  60% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}












.header {
  display: flex;
  

}




#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: block;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
}

#menu .sub-menu li span {float:right;}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu li {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
  color:#fff;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
position: absolute;
    right: 35px;
    top: 16px;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
font-size: 13px;
text-transform: uppercase;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
 text-decoration: none;
     color: rgba(255,255,255,0.7);
}

#menu a:hover {
  color: #fff;
    text-decoration: none;
}

#menu .sub-menu {
  display: none;
  text-transform: capitalize;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: #fff;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu .sub-menu.sm2 {margin-left:-480px;width:300px;}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}

@media (max-width:1280px) {
.main {margin-left:172px;}
.animate3,.animate4,.animate5,.animate6 {margin-top:-445px !important;}



.footer {margin-top:-270px;}

}

@media screen and (max-width:1024px) {
.main {margin-left:85px;    height: 432vh;}
.content {width:900px;}
.wall2 img {width: 376px;}
img {width:588px;}

.col-wl-l {left:114px !important;position: relative;top: -1109px;left: 80px;}
.col-wl-l img {width:598px;}
.animate3,.animate4,.animate5,.animate6 {margin-top:-486px !important; margin-left: 129px !important;}
.animate6{margin-left: 117px !important;margin-top: -491px !important;}
.animate6 img {width:609px !important;}

.quad-coat {background: rgba(255,0,222,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:500px;top:-400px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.quad-coat .top-txt,.quad-coat h3 {font-weight: 100;margin-bottom:15px;}
.quad-coat p {font-size:0.7rem;font-weight: 100;text-align: justify;}
.quad-coat .top-txt {text-align: center;}
.line {width: 25px;border-bottom:1px solid #fff;display: block;margin:0 auto;}

.mr-protect {background: rgba(0,30,255,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:0px;top:200px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.mr-protect .top-txt,.mr-protect h3 {font-weight: 100;margin-bottom:15px;}
.mr-protect p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.smart-paint {background: rgba(255,0,0,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:250px;top:300px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.smart-paint  .top-txt,.smart-paint  h3 {font-weight: 100;margin-bottom:15px;}
.smart-paint  p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.mr-finish {background: rgba(0,222,255,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:500px;top:400px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.mr-finish .top-txt,.mr-finish h3 {font-weight: 100;margin-bottom:15px;}
.mr-finish p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.quartz-shield {background: rgba(255,186,0,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:500px;top:1100px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.quartz-shield  .top-txt,.quartz-shield  h3 {font-weight: 100;margin-bottom:15px;}
.quartz-shield  p {font-size:0.7rem;font-weight: 100;text-align: justify;}


.hydrophobic {background: rgba(255,255,0,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:50px;top:1200px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.hydrophobic  .top-txt,.hydrophobic h3 {font-weight: 100;margin-bottom:15px;}
.hydrophobic  p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.weatherprotect {background: rgba(1, 180, 57, 0.5);width:200px;padding:5px 10px 15px;position: absolute;margin-left:500px;top:1400px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.weatherprotect  .top-txt,.weatherprotect h3 {font-weight: 100;margin-bottom:15px;}
.weatherprotect  p {font-size:0.7rem;font-weight: 100;text-align: justify;}


.smart-dry {background: rgba(0,130,166,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:500px;top:1800px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.smart-dry  .top-txt,.smart-dry h3 {font-weight: 100;margin-bottom:15px;}
.smart-dry  p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.smart-cool {background: rgba(135,129,189,0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:500px;top:200px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.smart-cool  .top-txt,.smart-cool h3 {font-weight: 100;margin-bottom:15px;}
.smart-cool  p {font-size:0.7rem;font-weight: 100;text-align: justify;}


.lifetime{background: rgba(220, 74, 74, 0.6);width:200px;padding:5px 10px 15px;position: absolute;margin-left:50px;top:1600px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.lifetime  .top-txt,.lifetime h3 {font-weight: 100;margin-bottom:15px;}
.lifetime  p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.teninone{background: rgba(43, 24, 208, 0.5);width:200px;padding:5px 10px 15px;position: absolute;margin-left:50px;top:1850px;z-index:9;color:#fff;text-align: center;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.64);}
.teninone  .top-txt,.teninone h3 {font-weight: 100;margin-bottom:15px;}
.teninone  p {font-size:0.7rem;font-weight: 100;text-align: justify;}

.rain {width: 214px;
    position: absolute;
    margin-left: 68px;
    top: 1400px;
    z-index: 9999;
    text-align: center;}
.rain img {width:75px;}
.sun {width: 214px;
    position: absolute;
    margin-left: 68px;
    top: 1500px;
    z-index: 9999;
    text-align: center;}
 .sun img {width:75px;}

.footer {    margin-top: -378px;    height: 61vh;}

}


@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }

  #menu .sub-menu li {
    width: auto;
  }
}

@media only screen and (min-width: 52em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 210px;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;

  }

 .sub-menu a{text-transform: capitalize !important;}

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}