@font-face{font-family: Bank;src:url(https://hololite.co.id/font/BankGothic-Md-BT.ttf);}
@font-face{font-family: TopSecret;src:url(https://hololite.co.id/font/TopSecret.ttf);}
body{padding:0;margin:0;font-family: 'Nunito', sans-serif;}
section, header, footer{float: left;}
section, header, footer, img {width: 100%;position: relative;}
header{background: transparent;  position: absolute;top: 0;z-index: 9;}
body, header, div, section, footer, h1, h2, h3, h4, ul, li, a{box-sizing: border-box;}
h1, h2, h3, h4{margin-bottom:1.5%}
a{text-decoration: none;transition: all .5s;}
h1{font-size: 250%;}
h2{font-size: 210%;}
h3{font-size: 160%}
h4{}
p{margin:.5% 0;padding: 0;text-align: justify;font-size: 115%;}
li{list-style: none;}
ul{padding:0;margin: 0}
footer{background: #1a1a1a;border-top: 3px solid #ffc600;padding-top:1.5%}
header.hl-hdr-page{background: #1a1a1a;position: relative;}
.hl-title-page{text-align: center;color:#ffc600;line-height: 30px;margin-top: 0;font-weight: normal;font-family: Bank;}
.hl-page{height: 100vh}
.hl-col-5-1{width: 20%;float: left;}
.hl-col-5-2{width: 40%;float: left;}
.hl-col-5-3{width: 60%;float: left;}
.hl-col-5-4{width: 80%;float: left;}
.hl-col-2-0{width: 50%;float: left;}
.hl-col-5-5{width: 50%;margin:0 auto;}
.hl-col-7-7{width: 70%;margin:0 auto;}
.hl-col-7-1{width: 70%;float: left;}
.hl-col-7-2{width: 30%;float: left;}
.hl-col-3-0{width: 33.333%;float: left;}
.hl-col-space{margin-left:10%}
.hl-align-left{text-align: left;}
.hl-align-right{text-align: right;}
.hl-align-right p{text-align: right;}
.hl-col-5-style{padding: 0 1%;  box-sizing: border-box;}
.hl-row{width: 100%; float:left}
.hl-container{width: 90%;margin:0 auto}
.hl-logo{width: 23%;float: left;}
.hl-nav{width: 77%;float: right;}
ul.hl-web-navigator{width: 70%;float: right;padding: 0;margin:0}
ul.hl-web-navigator li{cursor:pointer;color:white;transition:all .5s;list-style: none;float: left;padding:5%;font-size: 110%;position:relative;text-transform: uppercase;font-weight: 600}
/*ul.hl-web-navigator li a{color: white;text-decoration: none;}*/
ul.hl-web-navigator ul.hl-web-sb-navigator{position: absolute;width: 100%;padding:5% 0;background: white;top: 100%;
  right: 0;opacity: 0;transform: translateY(-2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.5s;box-shadow: 3px 3px 5px #1a1a1a;}
ul.hl-web-navigator li:hover {color:#ffc600;}
ul.hl-web-navigator li:hover ul.hl-web-sb-navigator{transform: translateY(0);opacity: 1}
ul.hl-web-sb-navigator li{color:black;font-size: 11pt;padding: 6% 5%;}
.hl-wall{background: url(https://hololite.co.id/img/background.jpg);background-size: cover;height:100vh;box-sizing: border-box;padding: 0 5%;}
.hl-title{padding-top:13%;padding-bottom: 2%;}
.hl-image{padding:0;text-align: center;padding-bottom: 13%;position: relative;}
.hl-tkdn{font-family: TopSecret;color: #ED1C24;font-size: 60pt;display: inline-block;border: 5px solid;line-height: 70px;letter-spacing: 3px;text-align: center;padding: 1.5%;transform: rotate(-5deg);position: absolute;left: 10%;}
.hl-title h1{font-family: Bank;margin:0;font-size: 400%;text-align: center;line-height: 65%;font-weight: normal;background: #B4821A;
background: -webkit-linear-gradient(to top left, #B4821A 0%, #D6AF28 30%, #fbef76 50%, #B4821A 100%);
background: -moz-linear-gradient(to top left, #B4821A 0%, #D6AF28 30%, #fbef76 50%, #B4821A 100%);
background: linear-gradient(to top left, #B4821A 0%, #D6AF28 30%, #fbef76 50%, #B4821A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.hl-prd-img{width:100%;height: 40vh;position:relative;margin:0 auto;background: url(https://hololite.co.id/img/Atap-UPVC-Hololite.png);background-size: contain;background-position: center;background-repeat: no-repeat;}
.hl-wrty{position: absolute;width: 13%;height: 25vh;top: -25%;right: 10%;background:url(https://hololite.co.id/img/warranty.png);background-size: contain;background-position: center;background-repeat: no-repeat;}
.hl-abt{padding:4% 0}
.hl-contect-text-abt{text-align: justify;line-height: 215%;}
.hl-img-info{background:url(https://hololite.co.id/img/hololite-upvc-roof.jpg);height:50vh;background-size: cover;background-repeat: no-repeat;}
.hl-video-tmp{width:80%;margin:4% auto;box-sizing: border-box;}
.hl-video-tmp video{width: 100%;height: 100%}
.hl-adv-info{padding: 3% 5%;background:url(https://hololite.co.id/img/adv-background.jpg);background-size: cover;}
.hl-adv-info ul.hl-wall-icon-top{width: 85%;margin: 0 auto;}
.hl-adv-info ul.hl-wall-icon-bottom{width: 75%;margin: 0 auto;}
.hl-adv-info ul.hl-wall-icon-top li{width: 25%;float:left;padding:1% 5%}
.hl-adv-info ul.hl-wall-icon-bottom li{width: 33.33%;float:left;padding:1% 5%}
.hl-wall-icon-title{text-align: center;text-transform: uppercase;color: #ffc600;font-weight: bold;}
.hl-expl-hldc{padding-bottom: 7%}
.hl-content-adv{}
.hl-footer-logo img{width: 20%}
.hl-addr{margin-bottom: 1.5%}
.hl-footer-addr{color: white}
.hl-footer-addr p a{color:white;padding-right: .5%}
.hl-footer-addr p a:hover{color:#ffc600}
.hl-bottom-footer{padding:.8% 0;text-align:center;font-size:80%;color:white;border-top: 1px solid #333;}
.hl-footer-addr ul.hl-schoop-icon{width: 60%;margin:1.5% auto}
.hl-footer-addr ul.hl-schoop-icon li{width: 25%;float: left;text-align: center}
.hl-footer-addr ul.hl-schoop-icon li i{color:white;font-size: 250%;cursor: pointer;}

.hl-ctc{background: #e8e8e8}
.hl-ctc h1{text-align: center;font-size: 300%;font-weight: bold;margin: 0;padding-top: 3%}
p.hl-title-desc{text-align: center;margin-top:0;}
.hl-info{box-sizing: border-box;;padding:3% 0;}
.hl-info h3{text-align: center}
.hl-row-form{width:60%;margin:0 auto;box-sizing: border-box;}
.hl-ds-spcg{box-sizing: border-box;margin: 1% 0;padding:0 1.5%;text-align: center;}
.hl-ds-spcg input[type=text], .hl-ds-spcg input[type=email], .hl-ds-spcg textarea{width:100%;box-sizing: border-box;padding:2.5% 1%;border-radius: 5px;border:1px solid #ccc;}
.hl-ds-spcg textarea{font-family: 'Nunito', sans-serif;}
.hl-ds-spcg input[type=submit]{padding:2% 10%;text-align: center;border-radius: 5px;border:none;background:#271e14;cursor:pointer;font-size:105%;color:white;transition: all .5s}
.hl-ds-spcg input[type=submit]:hover{background:#e8e8e8;color:#271e14;border:1.5px solid #271e14;}
.hl-spc-pd-1{padding-right: 1%}
.hl-spc-pd-2{padding-left:1%}

.hl-bgr-page{background:url(https://hololite.co.id/img/background.jpg);background-size: cover;padding:7% 0;display: block;}
/*.hl-intl h1*/
.hl-cntn-wrapp{padding-top:4%}
.hl-col-expln-instl{padding: 2%;}
.hl-content-instl{border:1px solid white;float: left;width: 100%;padding: 0% 5%;min-height: 50vh;}
.hl-content-instll-title{text-align: center;font-weight: bold;text-transform: uppercase;color: #ffc600;margin: 1% 0 1% 0;}
.hl-content-instll-expln{padding-bottom: 1%}
.hl-content-instll-expln p{color: white;text-align: justify;}
.hl-content-img-grnty{border: none;}
.hl-content-instll-expln h4{text-align: center;text-transform: uppercase;color: #ffc600;font-weight: bold;}

.hl-content-brchr{padding-top: 5%;padding-bottom: 13%;}
.hl-brchr-title{margin-bottom: 5%;}
.hl-brchr-holo, .hl-brchr-ctlg{text-align: center;}
.hl-brchr-img img{width: 40%}
.hl-brchr-btn{margin-top:2%}
.hl-brchr-btn a{color: white;text-decoration: none;font-size: 120%;font-weight: bold;}
.hl-brchr-btn a:hover{color: #ffc600}

.hl-height{height:100vh}
.hl-spec-detail{background: linear-gradient(rgba(255, 110, 0, 0.5),rgba(255, 110, 0, 0.5));margin-top: 3%;padding: 2% 0;}
.hl-spec-detail p{color: white;font-weight: bold;line-height: 30px;text-align: left;}
.hl-trans{margin-top:5%}
.hl-trans-info{color: white;}
.hl-trans div.hl-col-5-3, .hl-trans div.hl-col-5-2{padding:0 1%}
.hl-trans-info h2{margin-top:0}
.hl-trans-info p{line-height: 175%;}
.hl-viar{color:white;}
.hl-viar div.hl-col-5-2, .hl-viar div.hl-col-5-3{padding:0 1%}
.hl-acc-left-1 {width: 55%;position: relative;float: left;box-sizing: border-box;border-top: 40vh solid #e75700;border-right: 100px solid transparent;}
.hl-acc-left-text {position: absolute;z-index: 9;  color: white;  top: -35vh;  left: 15vh;  width: 75%;}
.hl-acc-left-text h4, .hl-acc-right-text h4 {color: black;font-size: 150%;font-weight: bold;}
.hl-col-hlf p {color: white;margin: 0;}
.hl-acc-right-1 {width: 45%;float: left;position: relative;padding-top: 5%;}
.hl-acc-right-1 img {width: 110%;position: absolute;right: 20%;}
.hl-acc-left-2 {width: 45%;float: left;position: relative;}
.hl-acc-left-2 img {width: 90%;position: absolute;z-index: 9;left: 20%;}
.hl-acc-right-2 {width: 55%;position: relative;float: right;box-sizing: border-box;border-bottom: 40vh solid #e75700;border-left: 100px solid transparent;}
.hl-acc-right-text {position: absolute;  z-index: 9;color: white;top: 5vh;right: 15vh;width: 75%;}
.hl-nok{color:white;}
.hl-nok div.hl-col-5-2, .hl-nok div.hl-col-5-3{padding:0 1%}
.hl-unvrsl{background: white;border-top: 5px solid #ffc600;padding-bottom: 7%}
.hl-unvrsl div.hl-title-page h2{color:black;}
.hl-unvrsl div.hl-col-2-0{padding:1%;position: relative;}
.hl-unvrsl div.hl-col-2-0 img{border:1px solid #e6e6e6}
.hl-unvrsl-subtitle{position: absolute;z-index: 9;top: 8%;left: 5%;font-size: 120%;font-weight: bold;width: 15%;}
.hl-unvrsl-dimention{position: absolute;z-index: 9;right: 30%;top: 8%;font-size: 120%;font-weight: bold;}
.hl-unvrsl-subtitle font{}
.hl-nav i{color:white;display: none;cursor: pointer;}