@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab');

#sequence h2{
font-family: 'Roboto Slab', serif;
font-size: 2em;
line-height: 32px;
  color:#fff !important
}
#sequence h3{ 
font-size: 1.5em;
line-height: 24px; 
}
.text-left{
  text-align: left !important;
}
.text-right{
  text-align: right !important;
}
.text-center{
  text-align: center !important;
}
.social-slide img{
  height: 35px;
  width: auto;
}
.social-slide span{
  display:inline-block
}
.social-ul{
  margin: 0;
  margin-left:21px;
  padding: 0;
  margin-bottom:10px;
}
.social-ul li{
  padding-left: 2px;
  list-style-type: disc;

  line-height: 24px;
}

#sequence h3{
font-family: 'Roboto Condensed', sans-serif;
}

#sequence p, #sequence div{
    font-family: 'Roboto', sans-serif;
}

.seq {
    
    max-height: 60vh; 
}
#sequence .seq-content {
    width:100% !important; 
    max-width: 1100px; 
}

#sequence .program-code{
  position: absolute;
  top:0;
  right: -10px;
  width: 10%;
  height: 100%;
  z-index: 999999;
  text-align: justify;
  color:#fff;
   opacity: 0.2;
}

#sequence{
  position: relative;
}

.seq .seq-pagination > * {
    width: 15px;
    height: 15px;
}

#step1{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0ca08f+0,003649+100 */
background: #0ca08f; /* Old browsers */
background: -moz-linear-gradient(top, #0ca08f 0%, #003649 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #0ca08f 0%,#003649 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #0ca08f 0%,#003649 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ca08f', endColorstr='#003649',GradientType=0 ); /* IE6-9 */
 
}

#step3, #step4{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0ca45b+0,00c465+100 */
background: #0ca45b; /* Old browsers */
background: -moz-linear-gradient(top, #0ca45b 0%, #00c465 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #0ca45b 0%,#00c465 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #0ca45b 0%,#00c465 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ca45b', endColorstr='#00c465',GradientType=0 ); /* IE6-9 */

}

#step2{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d7ba3+0,10afcc+100 */
background: #0d7ba3; /* Old browsers */
background: -moz-linear-gradient(top, #0d7ba3 0%, #10afcc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #0d7ba3 0%,#10afcc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #0d7ba3 0%,#10afcc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d7ba3', endColorstr='#10afcc',GradientType=0 ); /* IE6 */
}

#sequence .seq-button:hover{
color:#0ca08f !important;
}

.social-ul {
  visibility: hidden; 
} 

.laptop1{
  position: absolute;
  top: 28%;
  right: 8%;
  width: 100%;
  max-width: 310px;
  height: auto;
}
.scared{
  visibility: hidden;
}
.scared{
  position: absolute;
  bottom: -100px;
  left: 2%;
  width: 100%;
  max-width: 400px;
  height: auto;
}


.seq-in .scared{ 
  bottom: -1.3%; 
   
}
.bigtext{
  font-size: 3em !important;
  line-height: 1em !important;
}
 
.logo1{
  margin-bottom:15px;
   visibility: hidden;
  margin:auto !important;
  max-width: 650px; 
} 
.dark-text, #sequence h2.dark-text{
  color:#000 !important;
}
 .list-p{
  margin-top: 15px; 
  visibility: hidden;
 }

 .list-p i{
  float: left;
  font-size: 24px;
  color: #bfd72f
 }
 .list-p span{
  width:80%;
  display: inline-block;
  margin-left:25px;
 }
 .title3{
  margin-bottom:15px;
 }
 .ddos1, .ddos2{
     visibility: hidden;
 }
 .ddos1{
  position: absolute;
  top: 16%;
  left: 3.5%;
  width: 100%;
  max-width: 430px;
  height: auto;
  z-index: 99999;
 }
  .ddos2{
  position: absolute;
  top: 28%;
  left: 4.5%;
  width: 100%;
  max-width: 430px;
  height: auto;
 }

.seq-preloader {
    background: #0ca45b !important;
  }




 /* SLIDE 1 */

 

 .pullUp1.seq-in {
  animation-name: pullUp;
  -webkit-animation-name: pullUp; 

  animation-duration: 1.1s; 
  -webkit-animation-duration: 1.1s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease-out;  

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;     
}

    .seq-in .slideLeft1{
      animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
    }


 

    .seq-in .slideRight1{ 
  animation-name: slideRight;
  -webkit-animation-name: slideRight; 

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
 
    }

.seq-in .expandOpen1{
 animation-name: expandOpen;
  -webkit-animation-name: expandOpen; 

  animation-duration: 4s; 
  -webkit-animation-duration: 4s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease-out;  

  visibility: visible !important; 
}


.seq-in .slideUp1{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;  

  animation-duration: 6s; 
  -webkit-animation-duration: 6s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;

  visibility: visible !important;     
}
 
.seq-in .slideDownList1{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;  

  animation-duration: 4s; 
  -webkit-animation-duration: 4s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  
 
  visibility: visible !important;           
}
 .seq-in  .fadeInsoc{
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn; 

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
}

 .seq-in .slideLeftSocial{
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 5s; 
  -webkit-animation-duration: 5s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
}

.seq-in .slideUpLaptop{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;  

  animation-duration: 5s; 
  -webkit-animation-duration: 5s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;

  visibility: visible !important;     
}

.seq-in .slideUpMan1{
  animation-name: slideUpMan;
  -webkit-animation-name: slideUpMan;  

  animation-duration: 3s; 
  -webkit-animation-duration: 3s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;

  visibility: visible !important;     
}





 /* SLIDE 1 */






 /* SLIDE 2 */

 .seq-in .slideDownLogo{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  

  visibility: visible !important;           
}

    .seq-in .slideLeftp1{
      animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
    }

.seq-in .slideLeftp2{
      animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 2s; 
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
    }

    .seq-in .slideLeftp3{
      animation-name: slideLeft;
  -webkit-animation-name: slideLeft;  

  animation-duration: 3s; 
  -webkit-animation-duration: 3s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
    }


 .seq-in .slideRight2{ 
  animation-name: slideRight;
  -webkit-animation-name: slideRight; 

  animation-duration: 2s; 
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;   

  visibility: visible !important; 
 
    }

.seq-in .slideUp2{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;  

  animation-duration: 6s; 
  -webkit-animation-duration: 6s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;

  visibility: visible !important;     
}

 .seq-in .hatch2{
  animation-name: hatch;
  -webkit-animation-name: hatch;  

  animation-duration: 2s; 
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%; 

  visibility: visible !important;   
}
 /* SLIDE 2 */



/* Slide 3 */
.seq-in .slideDownDdos1{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;  

  animation-duration: 4s; 
  -webkit-animation-duration: 4s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  

  visibility: visible !important;           
}

.seq-in .slideDownDdos2{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  

  visibility: visible !important;           
}
/*  SLide 3 */





 /* PROGRAM CODE */


.slideDown-code{
  animation-name: slideDownNew;
  -webkit-animation-name: slideDownNew;  

  animation-duration: 5s; 
  -webkit-animation-duration: 5s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  visibility: visible !important;           
}



@keyframes slideUpMan {
  0% {
    transform: translateY(100%);
  }
    
  100% {
    transform: translateY(0%);
  } 
}

@-webkit-keyframes slideUpMan {
  0% {
    -webkit-transform: translateY(100%);
  }
   
  100% {
    -webkit-transform: translateY(0%);
  } 
}




@keyframes slideDownNew{
  0% {
    transform: translateY(-100%);
  }
   
      
  70% {
    transform: translateY(0%);
  }   
}

@-webkit-keyframes slideDownNew {
  0% {
    -webkit-transform: translateY(-100%);
  }
   
      
  70%  {
    -webkit-transform: translateY(0%);
  } 
}


/* PReloader */

@keyframes seq-preloader {
    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .seq-preloader {
    background: white;
    visibility: visible;
    opacity: 1;
    position: absolute;
    z-index: 9999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .seq-preloader.seq-preloaded {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s .5s, opacity .5s;
  }

  .seq-preload-indicator {
    overflow: visible;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .seq-preload-circle {
    display: inline-block;
    height: 12px;
    width: 12px;
    fill: #F96D38;
    opacity: 0;
    animation: seq-preloader 1.25s infinite;
  }

  .seq-preload-circle-2 {
    animation-delay: .15s;
  }

  .seq-preload-circle-3 {
    animation-delay: .3s;
  }

  .seq-preload-indicator-fallback {
    width: 42px;
    margin-left: -21px;
    overflow: visible;
  }

  .seq-preload-indicator-fallback .seq-preload-circle {
    width: 8px;
    height:8px;
    background-color: #F96D38;
    border-radius: 100%;
    opacity: 1;
    display: inline-block;
    vertical-align: middle;
  }

  .seq-preload-indicator-fallback .seq-preload-circle-2 {
    margin-left: 3px;
    margin-right: 3px;
    width: 12px;
    height: 12px;
  }

  .seq-preload-indicator-fallback .seq-preload-circle-3 {
    width: 16px;
    height: 16px;
  }





@media (min-width: 768px) and (max-width: 991px) {
  #sequence .seq-content { 
    max-width: 620px; 
}
#sequence h2, #sequence h3{
  text-align: center !important;
}
.scared, .ddos1, .ddos2{
  display: none;
}
.laptop1{
  top: 52%; 
  max-width: 250px;
}
.logo1{
  max-width: 100%;
}
.bigtext{
  font-size: 2em !important; 
}

}

@media (max-width:1024px) {

}

@media (max-width: 767px) {
  #sequence .seq-content { 
    max-width: 420px; 
}
 #sequence h2{
  font-size: 1.5em !important
 }
  #sequence h3{
  font-size: 1em !important
 }
#sequence h2, #sequence h3{
  text-align: center !important;
}
.scared, .ddos1, .ddos2{
  display: none;
}
.laptop1{
  top: 52%; 
  max-width: 150px;
}
.logo1{
  max-width: 100%;
}
.bigtext{
  font-size: 1.5em !important; 
}





}

@media (max-width: 480px) {
  #sequence .seq-content { 
    max-width: 260px; 
}
 #sequence h2{
  font-size: 1em !important;
  line-height: 20px;
 }
  #sequence h3{
  font-size: 0.9em !important
 }
.seq {
    max-height: 90vh;
}
.scared, .ddos1, .ddos2, .laptop1, .social-slide{
  display: none;
}
.social-ul {
  margin-top: 15px;
}
.social-ul li, 
.list-p span {
  font-size: 0.8em;
}
.text-right p{
  text-align: center !important
}
}