@font-face{
  font-family: mdbt;
  src: url("mdbt.ttf");
  font-weight: 500;
}
@font-face{
  font-family: ltbt;
  src: url("ltbt.ttf");
  font-weight: 100;
}
body{
  background-color: #070708;
  font-family: mdbt;
}
.lower{
  right: 0;
  opacity:1;
}
input{
  display:none;
}
.overlay{
  z-index: 1000;
  font-family: ltbt;
  font-weight: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 2rem;
  top: 0;
  margin-left: 4.4rem;
  background: rgba(0,0,0,10);
  overflow-x: hidden;
  overflow-y: hidden;
}
.overlaylogo {
  text-decoration: none;
  font-family: mdbt;
  font-weight: 500;
  font-size: 1.5rem;
}
.overlay nav {
  position: relative;
  height: 50%;
  font-size: 34px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 0.75rem;
  height: 100%;
}
.overlay ul li {
  height: 5.5rem;
  text-align: left;
}
.overlay ul li a {
  font-size: 4.5rem;
  color: #ffffff;
  text-decoration:none;
}
.overlay ul li a:hover,
.overlay ul li a:focus{
  color: #a3a3a3;
}
.row {
  width: 85%;
  margin-top: 11rem;
}
.column {
  float: left;
}
.left {
  width: 50%;
}
.right {
  width: 50%;
}
.overlay h3 {
  text-align: left;
  margin-left: 45%;
  font-size: 140%;
}
.grey {
  color: #acacac;
  margin-top: 1.5rem;
  margin-bottom: 5%;
}
.white {
  color: #ffffff;
  line-height: 2rem;
}
.iiii {
  margin-top: 3.6rem;
  font-size: 16px;
  margin-right: 8vw;
}
.overlaylogo {
  float:left;
  width:25%;
  margin-top: 3.6rem;
  color: #ffffff;
}
.social a{
  color: #ffffff;
  font-family: ltbt;
  font-weight: 100;
  font-size: 1.5rem;
  text-align: left;
  margin-left: 8.3vw;
  line-height: 1rem;
}
.social a:hover,
.social a:focus{
  color: #a3a3a3;
}
.matter-one{
  width: 45vw;
}
.matter-one h6{
  font-size: 1vw !important;
  color: #acacac;
  font-family: mdbt;
  font-weight: 500;
  margin-left: 4.9vw;
  margin-top: 22vh;
}
.matter-one h1{
  margin-top: 6vh;
  margin-left: 4.4vw;
  font-size: 4.4vw;
  color: #ffffff;
  font-family: ltbt;
  font-weight: 100;
}
.matter-one h2{
  margin-left: 4.4vw;
  font-size: 4.4vw;
  color: #acacac;
  font-family: ltbt;
  font-weight: 100;
}
.matter-one h5{
  font-size: 1vw !important;
  color: #ffffff;
  font-family: mdbt;
  font-weight: 500;
  margin-left: 4.9vw;
  margin-top: 13vh;
}
.shape{
  margin-left: 4.9vw;
  margin-top: 2.5vh;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid #FFC480;
}
#circle {
  z-index: -1;
  width: 34.5vw;
  height: 120vh;
  opacity: 1;
  position: absolute;
  right: 0;
  margin-top: -24vh;
  background: #A6978A;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
  border-top-right-radius: 0 0;
  border-bottom-right-radius: 0 0;
}
.imageee{
  margin-left: -4vw;
  margin-top: 3.5rem;
  width: 48vw;
  height: 67vh;
}
.matter-two p{
  color: #ffffff;
  margin-top: 15rem;
  margin-left: 22vw;
  text-align: center;
  font-size: 2.6vw;
  max-width: 55vw;
  text-align: center;
  font-family: ltbt;
  font-weight: 100;
}
.matter-two i{
  border: solid #ACACAC;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 63vw;
  margin-top: 4rem;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.matter-two h6{
  margin-top: -2.6vh;
  margin-left: 64vw;
  font-size: 1vw;
  font-family: mdbt;
  font-weight: 500;
  color: #ffffff;

}
.clickable {
  color: #ffffff;
  font-size: 1vw;
  text-decoration:none !important;
}
.clickable:hover,
.clickable:focus{
  color: #a3a3a3;
}
.vl {
  border-left: 2px solid #212121;
  opacity: 1;
  height: 400px;
  position: absolute;
  left: 50%;
  margin-top: -4.5rem;
  margin-left: -3px;
}
.matter-two h5{
  max-width: 20rem;
  margin-top: 17rem;
  margin-left: 51vw;
  color: #ffffff;
  font-size: 2.6vw;
  font-family: ltbt;
  margin-bottom: 4.4rem;
}
.image_container{
  margin: 4.4rem;
  margin-top: 8.8rem;
  width: 90% !important;
  overflow: hidden;
}
.image_container h6{
  color: #FFFFFF;
  font-family: mdbt;
  font-size: 1.974vw;
  margin-top: 2.5vh;
}
.image_container h5{
  color: #acacac;
  font-family: ltbt;
  font-size: 1vw;
}
.roww i{
  border: solid #ACACAC;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.ff2 {
  width: 24vw !important;
  margin-left: 0 !important;
}
.col-lg-3{
  max-width: 6vw !important;
}
.roww .col-lg-3 {
  max-width: 11vw !important;
}
.roww .col-lg-4{
  max-width: 22vw !important;
}
.ff2 a:hover,
.ff2 a:focus{
  color: #a3a3a3 !important;
  text-decoration: none !important;
}
.roww{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.roww .col-lg-3, .order-2{
  padding-top: 0 ;
}
.ff1{
  font-size: 1.2vw;
}
@media (max-width: 1520px){
  .matter-one h1{
    font-size: 4.4vw !important;
  }
  .matter-one h2{
    font-size: 4.4vw !important;
  }
  .matter-one h5{
    font-size: 0.95vw !important;
  }
  .matter-one h6{
    font-size: 0.95vw !important;
  }
  #circle{
    width: 33.5vw !important;
    height: 119vh !important;
  }
}
@media (max-width: 1466px){
  #circle{
    width: 32.5vw !important;
    height: 118vh !important
  }
}
@media (max-width: 1430px){
  #circle{
    width: 31.5vw !important;
    height: 117vh !important
  }
}
@media (max-width: 1386px){
  #circle{
    width: 30.5vw !important;
    height: 116vh !important
  }
}
@media (max-width: 1340px){
  #circle{
    width: 29vw !important;
    height: 115vh !important
  }
}
@media (max-width: 1300px){
  #circle{
    width: 27.5vw !important;
    height: 114vh !important
  }
}
@media (max-width: 1266px){
  #circle{
    width: 26vw !important;
    height: 113vh !important
  }
}
@media (max-width: 1220px){
  #circle{
    width: 24.5vw !important;
    height: 114vh !important
  }

}






@media screen and (min-width: 0) and (max-width:767px){
  body{
    margin: 1rem 0;
    padding: 0 2rem;
    height: 1350px !important;
  }
  .left{
    height: 20rem !important;
  }
  .container{
  	margin: 0;
  	margin-bottom: 3rem;
  	padding: 0;
  	height: 0;
  }
  .navbar{
    margin: 0;
    padding: 0;
  }
  .navbar a{
    margin: 0;
    padding: 0;
    width: 1vw;
    font-size: 5vw;
  }
  .btn{
    margin-right: 2.8vw !important;
  }
  .overlay{
    margin: 0;
    font-family: ltbt;
    font-weight: 100;
    position: fixed;
    width: 100%;
    height: 100%;
    margin-bottom: 0 !important;
    top: 0;
    background: rgba(0,0,0,10);
    overflow: scroll;
  }
  .grey{
    margin-top: 4rem !important;
  }
  #overlay-nav {
    margin: 0;
  }
  .overlaylogo{
    font-size: 5vw;
    margin-top: 1.7rem;
    width: 2rem !important;
  }
  .iiii {
    margin-top: 1.2rem;
    font-size: 16px;
    margin-right: 3.5rem !important;
  }
  .row {
    margin-top: 3rem;
    width: 100% !important;
    font-family: ltbt;
  }
  .i {
    font-size: 2rem !important;
    line-height: 0.5rem !important;
    margin-left: 1rem;
  }
  .overlay nav {
    position: relative;
    height: 100%;
  }
  .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 50%;
  }
  .overlay ul li {
    height: 3.2rem;
    text-align: left;
    width: 7rem;
  }
  .overlay ul li a {
    font-size: 4.5rem;
    color: #ffffff;
    height: 3rem;
    padding: 0;
    line-height: 1.5rem !important;
    width: 10rem !important;
    text-decoration:none;
  }
  .nav-link{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .overlay h3{
    margin-left: 0;
  }
  .matter-one{
  	width: 100%
  }
  .col-12{
    padding: 0 !important;
  }
  .matter-one h6{
    font-size: 0.9rem !important;
    color: #acacac;
    font-family: mdbt;
    font-weight: 500;
    margin-left: 0 !important;
    margin-top: 6rem !important;
  }
  .matter-one h1{
    margin-top: 2.4rem !important;
    margin-left: 0 !important;
    font-size: 1.9rem !important;
    color: #ffffff;
    font-family: ltbt;
    font-weight: 100;
  }
  .matter-one h2{
    margin-left: 0 !important;
    font-size: 1.9rem !important;
    color: #acacac;
    font-family: ltbt;
    font-weight: 100;
  }
  .matter-one h5{
    font-size: 0.9rem !important;
    color: #ffffff;
    font-family: mdbt;
    font-weight: 500;
    margin-left: 0 !important;
    margin-top: 2.8rem !important;
  }
  .shape{
    margin-left: 0;
    margin-top: 0.9rem;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid #FFC480;
  }
  #circle {
    z-index: -1;
    width: 83vw !important;
    height: 78vh !important;
    opacity: 1;
    position: absolute;
    right: -8.9vw;
    margin-top: 0;
    background: #A6978A;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
    border-top-right-radius: 0 0;
    border-bottom-right-radius: 0 0;
  }
  .imageee{
    margin-left: 0.2vw !important;
    margin-top: 3.5rem;
    width: 91vw;
    height: 66vh;
    object-fit: cover;
  }
  .matter-two p{
    margin-top: 20vh;
    margin-left: 1vw;
    font-size: 1.1rem;
    max-width: 100%;
  }
  .matter-two i{
    border: solid #ACACAC;
    border-width: 0 0.5px 0.5px 0;
    display: inline-block;
    padding: 2px;
    margin-left: 53vw;
    margin-top: 4rem;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
   }
  .matter-two h6{
    margin-top: -2.4vh;
    margin-left: 57vw;
    font-size: 0.8rem;
    font-family: mdbt;
    font-weight: 500;
    color: #ffffff;
   }
  .vl {
    border-left: 0.5px solid #212121;
    opacity: 1;
    height: 150px;
    position: absolute;
    left: 50%;
    color: #ffffff;
    margin-top: 3.5rem;
    margin-left: -1px;
  }

  .matter-two h5{
    max-width: 80vw;
    margin-top: 14rem;
    margin-left: 10vw;
    color: #ffffff;
    font-size: 9vw;
    font-family: ltbt;
    margin-bottom: 4.4rem;
  }
  .image_container{
    margin: 0 !important;
    margin-top: 2.8rem;
    width: 121.5% !important;
    margin-left: -1.99rem !important;
  }
  .image_container div:nth-of-type(1){
    margin-left: 0 !important;
  }
  .image_container div:nth-of-type(1) img{
    width: 49vw !important;
    height: 25.8vh !important;
    margin: 0 !important;
  }
  .image_container div:nth-of-type(2){
    margin-top: 2vh !important;
  }
  .image_container div:nth-of-type(2) img{
  	width: 47vw !important;
  	height: 34.84vh !important;
  	margin: 0 !important;
  }
  .image_container div:nth-of-type(3){
    margin-left:  0 !important;
    margin-top: 2vh !important;
  }
  .image_container div:nth-of-type(3) img{
    width: 49vw !important;
    height: 19.57vh !important;
    margin: 0 !important;
  }
  .image_container div:nth-of-type(4){
    margin-top: 2vh !important;
  }
  .image_container div:nth-of-type(4) img{
    width: 49vw !important;
    height: 25.98vh !important;
    margin: 0 !important;
  }
  .image_container div:nth-of-type(5){
    margin-left:  0 !important;
    margin-top: 2vh !important;
  }
  .image_container div:nth-of-type(5) img{
    width: 49vw !important;
    height: 27.25vh !important;
    margin: 0 !important;
   }
  .image_container div:nth-of-type(6){
    margin-top: 2vh !important;
   }
  .image_container div:nth-of-type(6) img{
    width: 49vw !important;
    height: 31.4vh !important;
    margin: 0 !important;
   }
  .image_container h6{
    color: #FFFFFF;
    font-family: mdbt;
    font-size: 0.8rem;
    margin-top: 2.2vh;
   }
  .downline1 {
    height:2px;
    border-width:0;
    margin-top: 28vh !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 14.8vh !important;
   }
  .bigimg{
    width: 82vw !important;
    margin: 0.5rem 0 !important;
   }
  .downline2 {
    height:2px;
    border-width:0;
    margin-top: 14.8vh !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10.8vh !important;
  }
  .grid-container{
    margin: 0.8rem !important;
    line-height: 1.5rem !important;
  }
  .g{
    padding: 0.5vw !important;
    width: 120vw !important;
  }
  .j{
    padding: 0.5vw !important;
  }
  .dd{
    font-size: 9vw !important;
  }
  .ee{
    font-size: 9vw !important;
   }
  .wwe{
    margin-top: 3vh;
    margin-left: -1.5vw !important;
    padding: 3px !important;
    border-bottom-width: 1px !important;
    border-right-width: 1px !important;
  }
  .mlml{
    margin-top: 3vh;
    font-size: 1rem !important;
    margin-left: 4vw !important;
    margin-bottom: 0 !important;
  }
  .grid-container1{
    margin-top: 12.5vh !important;
  }
  .roww .col-6{
    font-size: 0.9rem !important;
    line-height: 2rem !important;
    font-family: ltbt !important;
}
.roww .col-5{
  font-size: 0.9rem !important;
  line-height: 2rem !important;
  font-family: ltbt !important;
}
.fline{
  margin-top: 7vh !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.roww i{
  border: solid #ACACAC;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.ff2 {
        margin-left: 1vw !important;
        width: 54vw !important;
        font-size: 0.9rem !important;
        margin-top: 10vh !important;
        line-height: 3.6rem !important;
       }
.col-lg-3{
  max-width: 150vw !important;
}
.ff2 .col-4{
  max-width: auto !important;
}
.ff2 a:hover,
.ff2 a:focus{
  color: #a3a3a3 !important;
  text-decoration: none !important;
}
.roww .col-10{
  margin-left: 0 !important;
  padding-left: 16vw !important;
}

.ff4{
  margin-left: 15vw !important;
}
.ff5 {
  margin-left: -2.5vw !important;
  width: 25vw !important;
}
.ff5 a{
  padding-left: 0 !important;
}
.ff6{
  margin-left: 15vw !important;
}
.roww .col-lg-3{
  max-width: auto !important;
}
.order-2{
  padding-top: 20vh !important;
  text-align: center;
}
.ff1{
  font-size: 6vw !important;
}
.clickable {
  color: #ffffff;
  font-size: 0.9rem !important;
  text-decoration:none !important;
}
.clickable:hover,
.clickable:focus{
  color: #a3a3a3;
}
}