body {

font-family: 'Lato',sans-serif !important;
color: var(--unnamed-color-ffffff);
background-color: #000;

}
video {
 height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
}
#navbar{
  position: absolute;
  z-index:99;
  width: 100%;
}
.nav-bar{
	background-color: transparent;
  opacity: 1;
  box-shadow: none;

}
.fa-lg {
  font-size: 1.8em !important;
}
.sidenav-trigger{
	float: right;
  margin-right: 4%;
	color: #707070;
}

.sidenav-trigger:hover{
	color: #c4c4c4;
}

.sidenav-overlay {
  position: initial;
}

.sidenav li>a {
	color: #c4c4c4 !important;
	margin-top: -3%;
  font-family: 'Lato',sans-serif;
  letter-spacing: 1.6px;
  font-size: 13px !important;
}

.sidenav li>a>i {
	color: #707070;
	font-size: 14px;
}

.sidenav li>a:hover {
  text-decoration: none;
  color: #707070;
}

.sidenav.right-aligned{
	background-color: #171717;
	opacity: 0.94;
}

.sidenav div{
    position: fixed;
    bottom: 7%;
    left:18%;
}

.sidenav div>i{
  padding: 10px;
  color: #c4c4c4;
}

.sidenav div>p{
  margin-top: 1%;
  color: #c4c4c4;
  font-size: 10px;
  font-family: 'Lato', sans-serif;
}

.logo-metal-shine{
	margin-top: -2%;
  margin-left: 4%;
  width:5%;
}

.logo-tipo{
	margin-top: 30%;
}

.img-flud{
  width: 100%;
}

.imgflud{
  width: 100%;
  max-height: 100vh;
}

.img-flude{
  width: 100%;
  height: auto;
  margin-top: -0.5px;
}
a{text-decoration: none;}
a:hover{text-decoration: none;}
.dropdown-content {
 	background-color: #171717;
  margin: 0;
  transition:0.25s;
  display: none;
  box-shadow: none;
  min-width: 100px;
  overflow-y: auto;
  opacity: 0;
  position: inherit;
  left: 0;
  top: 0;
  z-index: 9999;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.dropdown-content li>a {
  font-size: 10px !important;
}
.animate-sidebar:target{
	transition:0.4s;
}

.dropdown-content.open {
  display: block;
  opacity: 1;
}

.dropdown-content:target {
 	background-color: #171717;
  margin: 0;
  display: block;
  min-width: 100px;
  overflow-y: auto;
  opacity: 0;
  position: inherit;
  left: 0;
  top: 0;
  z-index: 9999;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.dropdown-content li{
	display: inline;
}

.dropdown-content li>a{
	font-size: 12px;
	color: #c4c4c4;
}

.dropdown-content li:hover{
 text-decoration: none;
 background-color: transparent;
 color: #707070;
}

.img-bg{    position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  min-width: 100%;
}

.heading1{
  position: absolute;
  z-index: 33;
  margin-top:5%;
}

.head-text{
  color: #c4c4c4;
  font-size: 26px;
  letter-spacing: 2px;
  font-family: 'Lato',sans-serif;
}

.head-text2{
  color: #c4c4c4;
  font-size: 20px;
  letter-spacing: 3.6px;
}

.sub-heading{
  position: absolute;
  color: #c4c4c4;
  z-index: 33;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 3.6px;
}

.sub-heading1{
  color: #c4c4c4;
  z-index: 33;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 1.6px;
  font-family: 'Lato',sans-serif;
}

.heading{
  font-size: 36px;
  letter-spacing: 3.6px;
}

.heading2{
  font-size: 36px;
  letter-spacing: 3.6px;
  margin-top: 15%;
}

.detail1{
  position: absolute;
  color: #c4c4c4;
  z-index: 33;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1.42px;
  line-height: 1.75;
  font-family: 'Lato',sans-serif;
}

.detail-head{
  color: #c4c4c4;
  z-index: 33;
  font-size: 1rem;
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: 'Lato',sans-serif;
}

.detail{
  color: #c4c4c4;
  z-index: 33;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1.6px;
  font-family: 'Lato',sans-serif;
}
.read-more-bottom{
  left: 43%;
  bottom: 0%;
  position: fixed;
  border-radius: 20px;
  opacity: 1 !important;
  font-size: 12px;
  padding-top: 0.5%;
}

.read-more{
  border-radius: 20px;
  opacity: 1 !important;
}

.read-more:active{
  background-color: #000;
}

.read-more:hover{
  background-color: #000 !important;
  border-color: #c4c4c4;
  color: #c4c4c4;
  opacity: 1 !important;
}

.collapsible {
  border:none;
  box-shadow: none;
}

.collapsible-body {
  border:none;
  background-color: #171717;
  opacity: 0.87;
  padding: 2%;
  height:auto;
  text-align: left;
}

.collapsible-body.form {
  background-color: transparent;
  opacity: 0.87;
  padding: 2%;
  height:auto;
  text-align: left;
  color: #c4c4c4;
}

.collapsible-body.form input {
  height: 2rem;
  border: 1px solid ;
  border-color: #c4c4c4;
  border-radius: 20px;
}

.form-row {
  margin-bottom: 0px;
}

.form-textarea{
  background-color: transparent;
  border-radius: 15px;
}

.form-radio{
  background-color: #c4c4c4;
}

[type="radio"]:checked {
  color: #c4c4c4;
}

[type="radio"]:checked+span:after {
  border-color: #c4c4c4;
  background-color: #fff;
}

[type="radio"]:checked+span:before{
  border-color: #c4c4c4;
  background: transparent;
}

.form-label{
  color: #c4c4c4;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
  background-color: transparent;
}

.modal{
  width: 100%;
  max-height: 100% ;
  opacity: 0.95 !important;
  padding-top: 0%;
}
#modal1 ,#modal2, #modal3{
  top:0 !important;
}
.modal-spec{
  width: 50%;
  max-height: 60% ;
  opacity: 1 !important;
  background-color: #fff;
  padding-top: 0%;
}

.modal-text{
  color: #171717;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
}

.modal-text-bottom{
  color: #c4c4c4;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1px;
}

.modal-heading-text{
  color: #171717;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
}

.modal-heading{
  color: #171717;
  z-index: 33;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 5.6px;
  opacity: 1;
}

.slidershow{
  width: 50%;
  height: 60%;
  top:1%;
}

.middle{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.navigation{
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.bar{
  width: 50px;
  height: 10px;
  border: 2px solid #171717;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}

.bar:hover{
  background: #171717;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 500%;
  height: 100%;
  display: flex;
}

.slide{
  width: 20%;
  transition: 0.6s;
  margin-right: 10px;
}

.slide img{
  width: 100%;
  height: 100%;
  margin: 10px;

}

#r1:checked ~ .s1{
  margin-left: 0;
}

#r2:checked ~ .s1{
  margin-left: -20%;
}

.modal-img1{
  width: 100%;
}

.modal-img2{
  width: 100%;
}

.tabs .tab a {
  line-height: 40px !important;
  height: 40px !important;
  padding: 0px;
  color: #000;
  font-size: 10px;
  letter-spacing: 1px;
  background-color: #c4c4c4 !important;
  border: none;
}

.tabs .tab a.active {
  color: #fff !important;
  background-color: #000 !important;
}

.tabs .tab a:hover {
  color: #fff !important;
  background-color: #000 !important;
  text-decoration: none;
}

.tabs .tab a:visited {
  color: #000;
  background-color: #c4c4c4;
  text-decoration: none;
}

.tabs .indicator {
  background-color: transparent;
}

.scrollable{
  left: 48%;
  bottom: 2%;
  position: fixed;
  width: 4%;
}

.btn-outline-light {
  border-color: #c4c4c4;
  color: #c4c4c4;
}

.circle{
  position: relative;
  color: #c4c4c4;
  border-radius: 50%;
  border-color: #c4c4c4;
  border: 1px solid;
  width: 16%;
  padding-top: 7%;
  padding-bottom: 7%;
}

.circle1{
  margin-top: 7%;
  margin-left: 42%;
}

.circle2{
  margin-top: 4%;
  margin-left: 28%;
}

.circle3{
  margin-top: -16%;
  margin-left: 56%;
}

.sticky {
  position: fixed;
  top: 0px;
  width: 100%;
}

#navbar {
  overflow: hidden;
  background-color: transparent;
}

.sticky + .content  {
  padding-top: 160px;
}

.img-flud a:hover{
  text-decoration: none;
}

.corner{
  position: fixed;
  bottom: 0;
  left: 0.5%;
  width: 31%;
  height: 25%;
  margin-bottom: 0px;
  background: transparent;
}

.quarter{
  margin-top: 10%;
  border-top-right-radius: 500%;
  border-color: #c4c4c4 !important;
  border: 1px dotted;
  width: 20%;
}


.anchors{
 margin-top: 5%;
}

.anchors li{
list-style: none;
}

.anchors li>a{
  color: #fff !important;
}

.anchor_1{
  margin-left: -45%;
  display: block;
}

.anchor_2{
  margin-left: -25%;
  display: block;

}

.anchor_3{
  margin-left: -10%;
  display: block;

}

.anchor_4{
  margin-left: 2%;
  display: block;

}

.hr1{
    border-color: #fff !important;
    border-top: 1px dotted;
    transform: rotate(124deg);
    width: 155%;
    padding: 0px;
    margin-top: 60%;
    float: left;
    margin-left: -67%;
    height: 1px;
}

.hr2{
  border-color: #fff !important;
    border-top: 1px dotted;
    transform: rotate(143deg);
    width: 124%;
    padding: 0px;
    margin: 0px;
    margin-top: 60%;
    float: left;
    margin-left: -30%;
}

.hr3{
  border-color: #fff !important;
  border-top: 1px dotted;
  transform: rotate(165deg);
  width: 155%;
  padding: 0px;
  margin: 0px;
  margin-top: 70%;
  float: left;
  margin-left: -47%;
}

.hr4{
    border-color: #fff !important;
    border-top: 1px dotted;
    transform: rotate(170deg);
    width: 180%;
    padding: 0px;
    margin: 0px;
    margin-top: 95%;
    float: left;
    margin-left: -55%;
}

.anchor_color{
  color: #fff !important;
}

.m-top{
  margin-top: 15%;
}

.modal-overlay{
  background-color: #c4c4c4 !important;
  opacity: 0.9 !important;
}
.on-scroll{
        height: 600px;
        overflow-x: hidden;
        overflow-y: auto;

}
.on-scroll-contact{
        height: 500px !important;
        overflow-x: hidden;
        overflow-y: auto;

}
::-webkit-scrollbar {
    width: 0px;
    background: transparent;}


.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #171717;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  border: 4px solid #c4c4c4;

  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #c4c4c4;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}



@media(min-width: 320px) and (max-width: 355px){
  .circle {
    width: 31%;
    padding-top: 13%;
    padding-bottom: 13%;
    font-size: 9px;
  }
  .circle1 {
    margin-top: 30%;
    margin-left: 35%;
  }
  .circle2 {
    margin-top: 25%;
    margin-left: 1%;
  }
  .circle3 {
    margin-top: -30%;
    margin-left: 68%;
  }
}

@media(min-width: 356px) and (max-width: 479px){
  .circle {
    width: 31%;
    padding-top: 13%;
    padding-bottom: 13%;
    font-size: 9px;
  }
  .circle1 {
    margin-top: 27vh;
    margin-left: 35%;
  }
  .circle2 {
    margin-top: 25%;
    margin-left: 1%;
    background: rgba(0,0,0,0.8);
  }
  .circle3 {
    margin-top: -30%;
    margin-left: 68%;
    background: rgba(0,0,0,0.8);
  }
}

@media(max-width: 319px){
  .on-scroll-contact {
    height: 40dvh !important;
  }
}

@media(min-width: 320px) and (max-width: 350px){
  .on-scroll-contact {
    height: 40dvh !important;
  }
  .quarter {
    margin-top: 45%;
    width: 30%;
    margin-left: 0px;
    padding-top: 14%;
  }
  .anchors {
      margin-top: -40%;
      margin-left: 30%;
      font-size: 8px !important;
  }
  .anchor_1{
    margin-left: -45%;
    display: block;
  }

  .anchor_2{
    margin-left: -25%;
    display: block;

  }

  .anchor_3{
    margin-left: -10%;
    display: block;

  }

  .anchor_4{
    margin-left: 2%;
    display: block;

  }
  .hr1{
    transform: rotate(107deg);
    width: 267%;
    margin-top: 41%;
    margin-left: -133%;

}

.hr2 {
    transform: rotate(130deg);
    width: 283%;
    margin-top: 60%;
    margin-left: -160%;
}

.hr3 {
    transform: rotate(150deg);
    width: 275%;
    margin-top: 60%;
    margin-left: -137%;
}

.hr4{
    transform: rotate(170deg);
    width: 180%;
    padding: 0px;
    margin: 0px;
    margin-top: 65%;
    float: left;
    margin-left: -55%;
}
.read-more-bottom {
  left: 18%;
  font-size: 12px;
  padding-top: 2.5%;
}
}
@media(min-width: 351px) and (max-width: 400px){
  .on-scroll-contact {
    height: 60dvh !important;
  }
  .quarter {
    margin-top: 35%;
    width: 30%;
    margin-left: 0px;
    padding-top: 14%;
  }
  .anchors {
      margin-top: -35%;
      margin-left: 35%;
      font-size: 8px !important;
  }
  .anchor_1{
    margin-left: -45%;
    display: block;
    /* margin-top: -5%; */
  }

  .anchor_2{
    margin-left: -25%;
    display: block;

  }

  .anchor_3{
    margin-left: -10%;
    display: block;

  }

  .anchor_4{
    margin-left: 2%;
    display: block;

  }
  .hr1{
    transform: rotate(120deg);
    width: 267%;
    margin-top: 60%;
    margin-left: -133%;

}

.hr2 {
    transform: rotate(140deg);
    width: 283%;
    margin-top: 60%;
    margin-left: -160%;
}

.hr3 {
    transform: rotate(155deg);
    width: 275%;
    margin-top: 60%;
    margin-left: -137%;
}

.hr4{
    transform: rotate(170deg);
    width: 180%;
    padding: 0px;
    margin: 0px;
    margin-top: 35%;
    float: left;
    margin-left: -55%;
}
.read-more-bottom {
  left: 21%;
  font-size: 12px;
  padding-top: 2.5%;
}
}
@media(min-width: 401px) and (max-width: 479px){
  .on-scroll-contact {
    height: 60dvh !important;
  }
  .quarter {
    margin-top: 35% !important;
    width: 30%;
    margin-left: 0px;
    padding-top: 14%;
  }
  .anchors {
      margin-top: -35%;
      margin-left: 31%;
      font-size: 8px !important;
  }
  .anchor_1{
    margin-left: -45%;
    display: block;
    margin-top: -5%;
  }

  .anchor_2{
    margin-left: -25%;
    display: block;

  }

  .anchor_3{
    margin-left: -10%;
    display: block;

  }

  .anchor_4{
    margin-left: 2%;
    display: block;

  }
  .hr1{
    transform: rotate(107deg);
    width: 267%;
    margin-top: 41%;
    margin-left: -133%;

}

.hr2 {
    transform: rotate(130deg);
    width: 283%;
    margin-top: 60%;
    margin-left: -160%;
}

.hr3 {
    transform: rotate(150deg);
    width: 275%;
    margin-top: 60%;
    margin-left: -137%;
}

.hr4{
    transform: rotate(160deg);
    width: 180%;
    padding: 0px;
    margin: 0px;
    margin-top: 65%;
    float: left;
    margin-left: -55%;
}
.read-more-bottom {
  left: 23%;
  font-size: 12px;
  padding-top: 2.5%;
}
}
@media(min-width: 320px) and (max-width: 479px){

  .sidenav-trigger {
    margin-top: -8%;
  }
  .logo-metal-shine {
    margin-top: -16%;
    width: 12%;
  }
  /* .circle {
    width: 31%;
    padding-top: 13%;
    padding-bottom: 13%;
    font-size: 9px;
  }
  .circle1 {
    margin-top: 46%;
    margin-left: 35%;
  }
  .circle2 {
    margin-top: 25%;
    margin-left: 1%;
  }
  .circle3 {
    margin-top: -30%;
    margin-left: 68%;
  } */

  .heading1 {
    margin-top: 17%;
  }
  .detail1 {
    margin-top: -1% !important;
    padding-right: 45px;
    font-size: 9px;
    letter-spacing: 1.6px;
  }
  .head-text {
    font-size: 20px;
  }
  .sub-heading1 {
    font-size: 14px;
  }
  .scrollable{
  left: 44%;
  width: 12%;
  }
  /* .read-more-bottom {
    left: 18%;
    font-size: 12px;
    padding-top: 2.5%;
  } */
  .marg-top{
    margin-top: 0rem !important;
  }
  .detail-head{
    line-height: 2.5;
  }
  .detail {
    font-size: 10px;
    letter-spacing: .5px;
    margin-top: -15px !important;

  }
  .on-scroll {
    height: 300px;
  }
  .scrollin_dropdown{
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .slidershow {
    height: 30%;
  }
  .modal-img1{
    height: 100vh;
    width: auto;
  }
  .modal-img2{
    height: 100vh;
    width: auto;
  }
  .modal-spec {
    width: 100%;
    max-height: 75%;
  }
  .tabs .tab a {
    font-size: 6px;
    letter-spacing: .5px;
    text-overflow: none;
  }
  .corner {
    width: 82%;
    height: 35%;
    margin-bottom: 0px;
  }

  /* .quarter {
    margin-top: 45%;
    width: 30%;
    margin-left: 0px;
    padding-top: 14%;
  }
  .anchors {
      margin-top: -40%;
      margin-left: 30%;
      font-size: 8px !important;
  } */
  /* .hr1{
    transform: rotate(107deg);
    width: 267%;
    margin-top: 31%;
    margin-left: -133%;

}

.hr2 {
    transform: rotate(130deg);
    width: 283%;
    margin-top: 60%;
    margin-left: -160%;
}

.hr3 {
    transform: rotate(150deg);
    width: 275%;
    margin-top: 60%;
    margin-left: -137%;
}

.hr4{
    transform: rotate(170deg);
    width: 180%;
    padding: 0px;
    margin: 0px;
    margin-top: 95%;
    float: left;
    margin-left: -55%;
} */
}

@media only screen and (min-width: 480px) and (max-width: 767px){
  .on-scroll-contact {
    height: 50dvh !important;
  }
  .sidenav {
    width: 230px;
  }
  .sidenav-trigger {
    margin-right: 4%;
    font-size: 12px;
    margin-top: -7% !important;
  }
  .sidenav li>a {
    letter-spacing: 1px;
    height: 40px;
    font-size: 10px !important;
  }
  .sidenav div {
    display: contents;
  }
  .logo-metal-shine {
    margin-top: -14%;
    width: 6%;
  }
  .heading1 {
    margin-top: 6%;
  }
  .detail1 {
    margin-top: -1% !important;
    padding-right: 45px;
    font-size: 9px;
    letter-spacing: 1.6px;
  }
  .head-text {
    font-size: 20px;
  }
  .scrollable{
    left: 47%;
    width: 6%;
  }
  .circle {
    width: 20%;
    padding-top: 8%;
    padding-bottom: 8%;
    font-size: 9px;
  }
  .circle1 {
    margin-top: 8%;
    margin-left: 40%;
  }
  .circle2 {
    margin-top: 2%;
    margin-left: 26%;
  }
  .circle3 {
    margin-top: -19%;
    margin-left: 54%;
  }
  .m-top {
    margin-top: 10%;
  }
  .scrollin_down2{
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .sub-heading1 {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .detail {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .pad_top{
    margin-top: -4%;
  }
  .detail-head {
    font-size: 0.8rem;
    line-height: 1;
}
  .top-adjust{
    margin-top: -5px;
  }
  .head-text{
    font-size: 14px;
  }
  .head-text2{
    font-size: 14px;
  }
  .modal-text{
    font-size: 10px;
  }
  .middle {
    top: 75%;
  }
  .slidershow {
    width: 35%;
  }
  .navigation {
    bottom: 40px;
  }
  .read-more-bottom{
    left: 33%;
    padding-top: 1.3%;
  }
  .modal-spec {
    width: 90%;
    max-height: 80%;
    top:0% !important;
  }
  .modal-heading{
    font-size: 20px;
  }
 }

@media only screen and (min-width: 768px) and (max-width: 800px){
  .on-scroll-contact {
    height: 50dvh !important;
    padding-bottom: 20px;
  }
 }
@media only screen and (min-width: 801px) and (max-width: 991px){
  .on-scroll-contact {
    height: 50dvh !important;
    padding-bottom: 20px;
  }
 }

/* @media only screen and (min-width: 992px){ ... } */

@media only screen and (min-width: 992px){
  .on-scroll-contact {
    height: 80dvh !important;
  }
 }