@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
html, body {
    width: 100%;
}
body{font-family: 'Roboto', sans-serif;}
.wrapper{background:#0a0203; float:left; width:100%; }
.bannerSection{float:left; margin-bottom:120px; width:100%; position:relative;}
img{max-width:100%;}
.bottomSection{text-align:center; }
.headersection{
  z-index:9; 
  position:absolute; 
  left:0; 
  float:left; 
  width:100%; 
  text-align:center;
}
.headersectiontext{
  z-index:9;
  position:absolute;
  left: 100px;
  right: 100px;
  text-align:center;
}
.headertext{
 margin-bottom:70px;
 padding: 50px;
 /*background-color: hsla(40, 100%, 6%, 0.6);
  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);*/
}
.bottomSectionInner{background:url("../images/WIRE-FRAME.png") no-repeat right top / cover; float:left; width:100%; position:relative; margin-top:40px;}



.bottomSectionInner2{float:left; width:100%;
background: -moz-linear-gradient(top,  rgba(10,2,3,0.05) 0%, rgba(10,2,3,0.2) 38%, rgba(10,2,3,0.92) 80%, rgba(10,2,3,0.92) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(10,2,3,0.05) 0%,rgba(10,2,3,0.2) 38%,rgba(10,2,3,0.92) 80%,rgba(10,2,3,0.92) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(10,2,3,0.05) 0%,rgba(10,2,3,0.2) 38%,rgba(10,2,3,0.92) 80%,rgba(10,2,3,0.92) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0a0203', endColorstr='#eb0a0203',GradientType=0 ); /* IE6-9 */

}
.mainBanner02{position:relative; width:100%; float:left; overflow:hidden; height:850px; padding-top:0px; padding-bottom:0px; background-position:left top !important; background-size:cover !important;}
.mainBanner02:before{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .6); content:"";}
.topInfoContact{text-align:right;}
.topInfoContact ul li{text-align:left;}
.topInfoContact ul li:last-child{padding-right:0;}
.carousel-indicators{bottom:200px;}
.mainBanner02 .container{position:absolute; top:63%; left:0px; width:100%; padding:0 5%; text-align:center; z-index:1;}

.mainBanner02 .container h2{font-size:30px; color:#fff; font-weight:500;text-transform: initial; line-height:normal; letter-spacing:0; font-family: 'Helvetica', sans-serif; letter-spacing:1px;}
.mainBanner02 .container h2 span{color:#fff; position:relative; font-size:60px; margin-bottom:30px; display:block; padding-bottom:20px; text-transform:uppercase; font-family:'Helvetica', sans-serif;}
.mainBanner02 .container h2 span:before{width:80px; height:4px; background:transparent; content:""; position:absolute; left:50%; margin-left:-40px; bottom:0; display:block; font-weight:normal; border-radius:50px;}

.mainBanner02 p{color:#fff;font-size:17px; font-weight:300;}
.link{font-size: 17px; display:inline-block;  font-weight: 600;  color: #fff; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; width: 177px; height: 54px; background: rgba(218, 53, 58, 1) 0% 0% no-repeat padding-box;  border-radius: 3px; opacity: 1; max-width: 100%; text-align: center;  padding: 14px 5px; position:relative; border:1px solid #DA353A; margin-bottom:4px;}
.mainBanner02 .link{margin-top:50px; display:inline-block; text-align:left; width: auto; height: 62px; font-size:20px; font-weight:normal; letter-spacing: -0.4px; padding: 17px 59px 19px 47px;}
.mainBanner02  .link:before{background:url("../images/right-arrow.png") no-repeat left top; width:10px; height:20px; content:""; display:block; position:absolute; right:40px; opacity:.5; top:26px;}
.mainBanner02:before{content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%;
background: -moz-linear-gradient(top,  rgba(10,2,3,0.05) 0%, rgba(10,2,3,0.2) 38%, rgba(10,2,3,0.98) 91%, rgba(10,2,3,0.98) 97%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(10,2,3,0.05) 0%,rgba(10,2,3,0.2) 38%,rgba(10,2,3,0.98) 91%,rgba(10,2,3,0.98) 97%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(10,2,3,0.05) 0%,rgba(10,2,3,0.2) 38%,rgba(10,2,3,0.98) 91%,rgba(10,2,3,0.98) 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0a0203', endColorstr='#fa0a0203',GradientType=0 ); /* IE6-9 */

}

.pdSite{padding:0 80px; width:100%; max-width:100%;}
.height800{height:600px;width:100%;}
.bgButtons{width:100%; clear:both; clear:both; background:#140c0f; padding:20px 30px;}
.insiteInfo{margin:40px 0; text-align:center; float:left; width:100%;}
.mtop40{margin-top:40px; margin-bottom:40px; clear:both;width:100%;}
.height350{height:350px; float:left; width:100%; background:#0a0203;}
.insiteInfo h4{font-size:24px;font-weight:400; margin-top:30px; color:#fff; line-height:32px;}
.sidenav {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #e65a29f2;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align:center;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;

}

.sidenav a:hover{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.sidenav a {font-size: 22px; padding:15px 0; text-transform:uppercase; color:#fff;}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.closebtn{float:right; color:#fff; font-size:30px;cursor:pointer; position:absolute; top:20px; right:20px; }



/*IMPORTING THE FONTS*/
@font-face {
    font-family: 'Gotham-Light';
    src: url('../font/Gotham-Light.otf');
    font-weight: normal;
    font-style: normal;
}

/*IMPORTING THE FONTS*/

/*USING THE FONTS*/
.mainBanner02 .container h2 span { font-family: 'Gotham-Light';
  color: white;
  margin-left: 20px;
  position: relative;
  top: 10px;
  letter-spacing: 15px;
  font-weight: normal;
   font-style: normal;
  font-size: 70px;
}


html, body {
    background-color: #000;
}

.square {
    position: absolute;
    z-index: 2;
    width: 100%;
}

#videoBG {
  

  position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

@media (min-width: 320px) and (max-width: 500px) {

    .sqmargin {
        margin-left: 16px;
    }

    .wrapper {
    width: 120% !important;
}
  .mainBanner02 {
    height: 500px !important;
  }
  .slider {
    position: relative;
    width: 110%;
    margin-top: 35px !important;
  }
  .items {
    width: 100%;
    height: 500px !important;
}
  .items img{
    height: 64% !important;
  }
.headertext {
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    padding: 0px !important;
}
.headersectiontext {
    
     left: 20px !important; 
     right: 60px !important; 
    
}
.mainBanner02 .container {
    
    top: 82% !important;
    padding: 0px !important;
}
.mainBanner02 .container h2 span {
    
    margin-left: 0px !important;
}
.bannerSection {
    
    margin-bottom: 0px !important;
    
}
.pdSite {
    padding: 0 20px !important;
    width: 1920px;
    max-width: 100%;
}
.home img{
  margin-top: 50px;
}
}
@media (min-width: 500px) and (max-width: 768px) {

.mainBanner02 {
    
    height: 500px !important;
  }
  .slider {
    position: relative;
    width: 110%;
    margin-top: 35px !important;
  }
  .home img{
  margin-top: 50px;
}
  .items {
    width: 100%;
    height: 500px !important;
  }
  .items img{
    height: 64% !important;
  }
  .headertext {
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    padding: 0px !important;
  }
  .headersectiontext {
    
     left: 20px !important; 
     right: 112px !important; 
    
  }
  .mainBanner02 .container {
    
    top: 75% !important;
    padding: 0px !important;
  }
  .bannerSection {
    
    margin-bottom: 0px !important;
    }
}


@media (min-width: 1360px) and (max-width: 1440px) {
  .mainBanner02 .container {
   
    top: 50%;
  }
  .headertext{
    margin-bottom:0px;
    padding: 0px;
  }
  .bannerSection{
    margin-bottom:0px;
  }
}



.showcase {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  text-align: center;
}

.showcase img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:99
}

.showcase .overlay {
  width: 100%;
  height: 50%;
  /*background-color: rgba(0, 35, 82, 0.7);*/
  position: absolute;
  top: 50%;
  left: 0;
  z-index:999
}

.showcase h2 {
  margin-top: 170px;
  font-size: 3em;
}

.showcase p {
  margin-top: 8px;
  font-size: 1.2em;
}



.slider {
  position: relative;
  width: 100%;
  margin-top: -200px;
}

.items {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 50.25%;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.item.current {
  opacity: 1;
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}