html,body{
  /* font-size: 1.1rem; */
  width: 100%;
  overflow-x: hidden;
  color: #fffceb;
  /* line-height: 1.6; */
  font-weight: 200;
}
h1, h2, h3{
  font-family: 'Montserrat', 'Montserrat';
  font-weight: 700!important;
  
}
a:hover{
  text-decoration: none;
  color: currentColor;
}

.fadein{
  position: static;
  width: 100%;
  z-index: -1;
  opacity: 0;
  animation-name: quickfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}

.header-title{
  font-family: 'Montserrat', 'Montserrat';
  font-weight: 700!important;
  font-size: 1.75rem;
}

.fadeout{
  opacity: 1;
  animation-name: quickout;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes quickout{
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.catordog{
  display: flex;
  justify-content: center;
  margin: 3% 0% 0% 0%;

}

.modebtn-selected{
  background-color: hsla(300, 55%, 33%, .6) !important;
}

button:focus {
  outline:none
}
.text-footer {
  color: #ffbdc7!important;}

.text-footer-2 {
    color: #f0f !important;}

.modebtn{
  background-color:transparent;
  border-color:none;
  border: #b9a7f8 1px solid;
  margin: 0% 2px;
  color: #fffee9;
  padding: 0rem 1rem;
  letter-spacing:2px;
font-weight: 200;} 

.h5{
  font-weight: 200!important;
}

/* .arjan-head{
  transition-timing-function: ease-in;
  }
  @keyframes fade {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
  }
} */


p{
  font-family: 'quicksand', sans-serif;
}
.bg-black{
  background-color: #000;
}
.bg-secondary-nav{
  background-color: hsla(0,0%, 50%, .15);
}
.text-white{
  color: #fffee9;
}
.localize-text{
  color: hsla(120, 100%, 50%, 1);
}
.optimize-text{
  color: hsla(180, 100%, 50%, 1);
}
.audit-text{
  color: hsla(60, 100%, 50%, 1);
}
.deploy-text{
  color: hsla(300, 100%, 50%, 1);
}

li {
  padding: 1% 0%;
}

/* NAV */
/* .load-link{padding:0px 24px; font-size: 24px; font-weight: 300;}
#load_l{
  color: hsla(120, 100%, 50%, .8);
  animation-name: colorl;
  animation-duration: 1.5s;
  margin-right: 0px;
}
@keyframes colorl {
  0%{color: hsl(120, 100%, 50%);}
  25%{color: hsl(180, 100%, 50%);}
  50%{color: hsl(60, 100%, 50%);}
  75%{color: hsl(300, 100%, 50%);}
  100%{color: hsl(120, 100%, 50%);}
}
#load_o{
  color: hsl(180, 100%, 50%, .8);
  animation-name: coloro;
  animation-duration: 1.5s;
}
@keyframes coloro {
  0%{color: hsl(180, 100%, 50%);}
  25%{color: hsl(60, 100%, 50%);}
  50%{color: hsl(300, 100%, 50%);}
  75%{color: hsl(120, 100%, 50%);}
  100%{color: hsl(180, 100%, 50%);}
}
#load_a{
  color: hsl(60, 100%, 50%, .8);
  animation-name: colora;
  animation-duration: 1.5s;
}
@keyframes colora {
  0%{color: hsl(60, 100%, 50%);}
  25%{color: hsl(300, 100%, 50%);}
  50%{color: hsl(120, 100%, 50%);}
  75%{color: hsl(180, 100%, 50%);}
  100%{color: hsl(60, 100%, 50%);}
}
#load_d{
  color: hsl(300, 100%, 50%, .9);
  animation-name: colord;
  animation-duration: 1.5s;

}
@keyframes colord {
  0%{color: hsl(300, 100%, 50%);}
  25%{color: hsl(120, 100%, 50%);}
  50%{color: hsl(180, 100%, 50%);}
  75%{color: hsl(60, 100%, 50%);}
  100%{color: hsl(300, 100%, 50%);}
} */

/* BG */
.audit-logo-bg{
  width: 100%;
  position: relative;
  z-index: -1;
  padding: 0% 8%;
}
.audit-logo {
    position: absolute;
    z-index: 1;
    width: 38%;
    right: 32%;
    top: 17%
}

.quickfade{
  opacity: 1;
  animation-name: quickfade;
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
}

@keyframes quickfade{
  0% {opacity:0}
  100% {opacity:1}
}

.header-text-padding{
  padding: 3% 0% 1% 0%;
}

.fade-in{
  animation-name: fade;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}
@keyframes fade {
  0% {opacity: 0%;}
  100% {opacity: 100%;}
}


.contop{
  padding-top: 4rem; 
}

.h1-padding{
  padding-top: 1rem;
}

.codebox{
  padding: 1% 0%;
  background-color: black;
  color: white;
  border: hsla(120, 100%, 50%, 0) 2px solid;
  white-space: nowrap;
  min-width: max-content;
  font-size: 15px;
  margin: 3px 0px;
}


.bg-aqua{
  padding: 3%;
  margin: 0% 1%;
  line-height:6.8;
}

.text-padding{
  padding-bottom: 1rem;
}

.checklist-padding{
  padding: 0% 32%;
}

.arjan-btn {
  padding: 8px 16px;
  font-size: 1.1rem;
  letter-spacing: 2px;
  border-radius: 0%;
}

.get-video{
  width: 100%;
  padding: 0rem;
  max-width: 800px;
}

.nav-logo{
  color:hsla(0, 0% , 100%, .9)
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.get-started {
  padding: 4% 0%;
  margin: 0% 0% 7% 0%;
}

.get-started-1 {
  padding: 0%;
}

.get-started-3{
  padding: 0%;
}

.social-icon{
  padding: 0px 20px;
}
.social-row{
  padding: 9% 0px;
}

@media(min-width:768px){
  .contop{
    padding-top: 6rem; 
  }
  .load-link{
    padding:0px 25px;
  }
  .bg-aqua {
    padding: 3%;
    margin: 0% 18%;
    line-height: 6.8;
  }
}
  .header-text-padding {
    padding: 3% 2% 1% 0%;
}
.audit-logo-bg {
  width: 100%;
  position: relative;
  z-index: -1;
  padding: 9% 0% 0% 0%;
}
.text-padding {
  padding-bottom: 2rem;
}

.audit-logo {
  position: absolute;
  z-index: 1;
  width: 47%;
  right: 30%;
  top: 22%;
}
.get-started {
  padding: 3% 1%;
  margin: 0% 0% 11% 0%;
}
.get-started-1 {
  margin: 0% 2%;
}

.checklist-padding{
  padding: 0% 25%;
  margin: 0%;

}
.get-started-3 {
  margin: 0%;
}
.catordog{
  display: flex;
  justify-content: center;
  margin: 3% 0% 0% 0%;
}


@media(min-width:992px){
  .social-row{
    padding: 0px 0px;
    position: fixed;
    right: 3%;
    bottom: 9%;
  }
  .social-icon{
    padding: 15% 0%;
  }
  .header-text-padding {
    padding: 3% 8% 1% 0%;
}
.bg-aqua {
  padding: 3%;
  margin: 0% 25%;
  line-height: 6.8;
}
.audit-logo-bg {
  width: 100%;
  position: relative;
  z-index: -1;
  padding: 0% 8%;
}
.audit-logo {
    position: absolute;
    z-index: 1;
    height: 75%;
    right: 32%;
    top: 18%;
}
.h1-padding{
  padding-top: 2rem;
}
.get-started {
  padding: 3% 1%;
}

.get-started-1 {
  margin: 0% 10%;

}
.get-started-3 {
  margin: 0% 20%;
  padding-bottom: 10%;
}
.checklist-padding{
  padding: 0% 25%;
  margin: 0%;
}
.catordog{
  display: flex;
  justify-content: flex-end;
}
}