/*  ------------------------------------------------------------  */
/*  Large intro with background image
/*  ------------------------------------------------------------  */

html, body {
    height: 100%; 
}
.intro {
    position:relative;
    background: #10101e url('../img/sea-pattern.jpg') repeat;
    text-align: center;
    border-bottom: 3px solid #11101e;
    overflow: hidden;
}

.intro .intro-inner-wrap {
    background: rgba(34,34,62,0.4);  
    text-align: center;
    overflow:hidden;
    padding: 0 0 380px 0;  
}

.intro-copy {
    background: #10101e url('../img/sea-pattern.jpg') repeat;
    border-bottom: 1px solid #161523;
}
.intro-copy .intro-copy-outer-wrap {                               
    background: transparent url('../img/ropes.png') bottom center no-repeat;     
}
.intro-copy .intro-copy-inner-wrap {    
    background: transparent url('../img/waves.png') bottom center repeat-x;
    padding: 170px 20px 90px 20px;    
}
.intro-copy h1 {
    color: #f4f4f4;
    margin: 0;
}
.intro h1 {
    font-size: 50px;
}
.intro h1 small {
    margin-top: 25px;
}
.intro .buttons {
    margin-top: 30px;
}
.intro .button {
    font-size: 16px;
}
.intro .button + .button {
    margin-left: 20px;
}

.feature-animation-box {
    position: absolute;
    bottom:0;
    width:1000px;
    height:380px;
    left:50%;
    margin-left:-500px;
    overflow:hidden;
}

/* ----------------------------------------------------- */
/* Baits
/* ----------------------------------------------------- */

.stop-animation #feature-bait1,
.stop-animation #feature-bait2,
.stop-animation #feature-bait3,
.stop-animation #feature-bait4 {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -o-animation-play-state: paused;
   animation-play-state: paused;
}

#feature-bait1,
#feature-bait2,
#feature-bait3,
#feature-bait4 {
    position:absolute;
    top:-460px;   
}

/* Animation: Waves moving */

@-webkit-keyframes waves-moving {
  0%  { background-position: 0 bottom; }
  100%  { background-position: 244px bottom; }
}
@-moz-keyframes waves-moving {
  0%  { background-position: 0 bottom; }
  100%  { background-position: 244px bottom; }
}
@-o-keyframes waves-moving {
  0%  { background-position: 0 bottom; }
  100%  { background-position: 244px bottom; }
}
@keyframes waves-moving {
  0%  { background-position: 0 bottom; }
  100%  { background-position: 244px bottom; }
}

.intro-copy-inner-wrap {
  -webkit-animation:  waves-moving 10s linear 0s infinite normal;
  -moz-animation:     waves-moving 10s linear 0s infinite normal;
  -o-animation:       waves-moving 10s linear 0s infinite normal;
  animation:          waves-moving 10s linear 0s infinite normal;
}

/* Animation: Balt 1 */

@-webkit-keyframes bait1-way {
  0%, 100% {
    top: -460px;
  }
  50% {
    top: -400px;
  }
}
@-moz-keyframes bait1-way  {
  0%, 100% {
    top: -460px;
  }
  50% {
    top: -400px;
  }
}
@-o-keyframes bait1-way  {
  0%, 100% {
    top: -460px;
  }
  50% {
    top: -400px;
  }
}
@keyframes bait1-way  {
  0%, 100% {
    top: -460px;
  }
  50% {
    top: -400px;
  }
}

#feature-bait1 {
    left:189px;
    width:86px;
    height:556px;
    background: url('../img/fishes.png') -567px 0px no-repeat;

    -webkit-animation:  bait1-way 6s infinite;
    -moz-animation: bait1-way 6s infinite;
    -o-animation: bait1-way 6s infinite;
    animation: bait1-way 6s infinite;
}

/* Animation: Balt 2 */

@-webkit-keyframes bait2-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -400px;
    }
}
@-moz-keyframes bait2-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -400px;
    }
}
@-o-keyframes bait2-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -400px;
    }
}
@keyframes bait2-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -400px;
    }
}

#feature-bait2 {
    left:389px;
    width:60px;
    height:576px;
    background: url('../img/fishes.png') -653px 0px no-repeat;
   
    -webkit-animation: bait2-way 6s infinite;
    -moz-animation: bait2-way 6s infinite;
    -o-animation: bait2-way 6s infinite;
    animation: bait2-way 6s infinite;
}

/* Animation: Balt 3 */

@-webkit-keyframes bait3-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -380px;
    }
}
@-moz-keyframes bait3-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -380px;
    }
}
@-o-keyframes bait3-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -380px;
    }
}
@keyframes bait3-way {
    0%, 100% {
      top: -460px;
    }
    50% {
      top: -380px;
    }
}

#feature-bait3 {
   left:574px; 
   width:83px;
   height:567px;
   background: url('../img/fishes.png') -713px 0px no-repeat;
   
   -webkit-animation: bait3-way 4s infinite;
  -moz-animation: bait3-way 4s infinite;
  -o-animation: bait3-way 4s infinite;
  animation: bait3-way 4s infinite;
}

/* Animation: Balt 4 */

@-webkit-keyframes bait4-way {
    0%, 100% {
      top: -460px;
    }
    20% {
      top: -470px;
    }
    50% {
      top: -400px;
    }
}
@-moz-keyframes bait4-way {
    0%, 100% {
      top: -460px;
    }
    20% {
      top: -470px;
    }
    50% {
      top: -400px;
    }
}
@-o-keyframes bait4-way {
    0%, 100% {
      top: -460px;
    }
    20% {
      top: -470px;
    }
    50% {
      top: -400px;
    }
}
@keyframes bait4-way {
    0%, 100% {
      top: -460px;
    }
    20% {
      top: -470px;
    }
    50% {
      top: -400px;
    }
}

#feature-bait4 {
   left:757px;
   width:78px;
   height:589px;
   background: url('../img/fishes.png') -796px 0px no-repeat;
   
   -webkit-animation: bait4-way 7s infinite;
  -moz-animation: bait4-way 7s infinite;
  -o-animation: bait4-way 7s infinite;
  animation: bait4-way 7s infinite;
}

/* ----------------------------------------------------- */
/* Fishes
/* ----------------------------------------------------- */

#feature-bait1.animation-stop,
#feature-bait2.animation-stop,
#feature-bait3.animation-stop,
#feature-bait4.animation-stop {
  -webkit-animation:none;
  -moz-animation:none;
  -o-animation:none; 
  animation:none;
}

.stop-animation #feature-fish1,
.stop-animation #feature-fish2,
.stop-animation #feature-fish3,
.stop-animation #feature-fish4 {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -o-animation-play-state: paused;
   animation-play-state: paused;
}

#feature-fish1,
#feature-fish2,
#feature-fish3,
#feature-fish4 {
   position:absolute;   
}

/* Animation: Fish 1 */

@-webkit-keyframes fish-shaking1 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }  
}
@-moz-keyframes fish-shaking1 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }    
}
@-o-keyframes fish-shaking1 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }   
}
@keyframes fish-shaking1 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }    
}

#feature-fish1 {
    bottom:40px;   
    left:80px;
    width:159px;
    height:143px;
    background: url('../img/fishes.png') 0 0px no-repeat;
   
    -webkit-animation: fish-shaking1 7s infinite;
    -moz-animation: fish-shaking1 7s infinite;
    -o-animation: fish-shaking1 7s infinite;
    animation: fish-shaking1 7s infinite;
}

/* Animation: Fish 2 */

@-webkit-keyframes fish-shaking2 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }  
}
@-moz-keyframes fish-shaking2 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }  
}
@-o-keyframes fish-shaking2 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }  
}
@keyframes fish-shaking2 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }  
}

#feature-fish2 {
   bottom:40px; 
   left:340px;
   width:134px;
   height:142px;
   background: url('../img/fishes.png') -159px 0px no-repeat;
   
    -webkit-animation: fish-shaking2 7s infinite;
    -moz-animation: fish-shaking2 7s infinite;
    -o-animation: fish-shaking2 7s infinite;
    animation: fish-shaking2 7s infinite;
}

/* Animation: Fish 3 */

@-webkit-keyframes fish-shaking3 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }  
}
@-moz-keyframes fish-shaking3 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }  
}
@-o-keyframes fish-shaking3 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }  
}
@keyframes fish-shaking3 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:50px;
    }  
}

#feature-fish3 {
    bottom:40px;    
    left:600px; 
    width:148px;
    height:149px;
    background: url('../img/fishes.png') -293px 0px no-repeat;
   
    -webkit-animation: fish-shaking3 5s infinite;
    -moz-animation: fish-shaking3 5s infinite;
    -o-animation: fish-shaking3 5s infinite;
    animation: fish-shaking3 5s infinite;
}

/* Animation: Fish 4 */

@-webkit-keyframes fish-shaking4 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }  
}
@-moz-keyframes fish-shaking4 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }   
}
@-o-keyframes fish-shaking4 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }   
}
@keyframes fish-shaking4 {
    0%, 100% {
      bottom:40px;
    } 
    50% {
      bottom:30px;
    }   
}

#feature-fish4 {
   bottom:40px; 
   left:800px;
   width:148px;
   height:149px;
   background: url('../img/fishes.png') -441px 0px no-repeat;
   
   -webkit-animation: fish-shaking4 5s infinite;      
   -moz-animation: fish-shaking4 5s infinite;     
   -o-animation: fish-shaking4 5s infinite;     
   animation: fish-shaking4 5s infinite;    
}

/*  ------------------------------------------------------------  */
/*  Explanation Section
/*  ------------------------------------------------------------  */

#explanation-section {
    text-align: justify;
}

#explanation-section li + li {
    margin-top: 10px;
}

/*  ------------------------------------------------------------  */
/*  Steps Section
/*  ------------------------------------------------------------  */

#steps-section .step-circle {
    text-align: center;
    border: 10px solid #e9e9e9;
    background-color: #f1f1f1;
    width: 150px;
    height: 150px;
    line-height: 130px;
    text-align: center;
    margin: 0 auto 20px auto;
    border-radius: 75px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    font-size: 80px;
    font-family: gotham_promedium,Arial,Helvetica,sans-serif;
}
#steps-section .steps {
  
}
#steps-section .steps h2 {
    font-size: 34px;
}
#steps-section .inner-wrap {
    border-radius: 5px;
}


/*  ------------------------------------------------------------  */
/*  How does it work?
/*  ------------------------------------------------------------  */

#how-section .slider {
    padding: 0 5px;
    position: relative; }

#how-section .slider,
#how-section .slide {
    background-color: #fff; }

#how-section .slide {
    max-width: 965px;
    margin: auto; }

#how-section .slider-nav {
    text-align: center;
    position: relative;
    text-align: center; }

    #how-section .slider-nav .separator {
        border-bottom: 1px solid rgba(51, 51, 63, 0.1);
        max-width: 700px;
        margin: auto; }

#how-section .screen-box-holder {
    overflow:hidden;
    padding: 21px 0 0 0; }

#how-section .screen-box {
    position:relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border:solid #f1f1f1;
    border-width:60px 1px 8px;
    padding:10px;
    min-height:373px; }

    #how-section .screen-box:before {
        content:'';
        position:absolute;
        top:-50px;
        left:9px;
        background:url(../img/screen-sprite.png) no-repeat 0 0;
        width:45px;
        height:39px;
        z-index:5; }
    #how-section .screen-box .address-box {
        position:absolute;
        top:-31px;
        left:64px;
        right:8px;
        background:#fff;
        border-radius:2px;
        -webkit-border-radius:2px;
        height:20px;
        line-height:20px;
        padding:0 5px;
        font-size:13px;
        text-align:left; }

#how-section .screen-content {
    padding: 40px 0px 40px 20px;
    max-width: 680px;
    margin: auto; }

    #how-section .screen-content .onp-sociallocker {
        max-width: 700px; }
    #how-section .screen-content .onp-sociallocker-flat .onp-sociallocker-button {
        background: #f1f1f1; }
    #how-section .screen-content .description {
        margin-bottom: 40px; }
    #how-section .screen-content .notice {
        background-color: #fafafa;
        padding: 15px;
        border-left: 5px solid #f1f1f1;
        margin-top: 40px;
        font-size: 14px; }
    #how-section .screen-content .locked-content {
        text-align: center;
        padding: 20px; }

/*  ------------------------------------------------------------  */
/*  Features
/*  ------------------------------------------------------------  */

#features-section {
   background-color: #f6f6f6;
}
#features-section p {
    color: #8c989e;
}

.feature-image {
    padding: 15px;
    background-color: #fff;
    border-bottom: 3px solid #f1f1f1;
    max-width: 380px;
}
.feature-image img {
    max-width: 350px;
    width: 100%;
}


/*  ------------------------------------------------------------  */
/*  Feedback section
/*  ------------------------------------------------------------  */

#testimonial-section blockquote,
#testimonial-section blockquote p {
    font-size: 16px;
    color: #717f86;
}
#testimonial-section blockquote {
    margin: 0px;
    padding: 15px;
    background-color: #f6f6f6;
    border-left: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 0 #f1f1f1;
    -moz-box-shadow: 0 3px 0 #f1f1f1;
    box-shadow: 0 3px 0 #f1f1f1;
}
#testimonial-section blockquote p {
    margin: 0px;
}
#testimonial-section .arrow {
    border: 10px solid transparent;
    border-top: 10px solid #f1f1f1;
    position: relative;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    z-index: 1; }

#testimonial-section .userpic {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin: 5px auto 0;
    background: #f7f7f7 url("../img/social-locker-customers.png") 0 0 no-repeat;
    border: 5px solid #f7f7f7;
}
#testimonial-section .userpic-vivinunez {
    background-position: -250px 0;
}
#testimonial-section .userpic-brandgaille {
    background-position: 0 0;
}
#testimonial-section .userpic-jimwang {
    background-position: -50px 0;
}
#testimonial-section .userpic-matthewbarby {
    background-position: -100px 0;
}
#testimonial-section .userpic-raehoffman {
    background-position: -150px 0;
}
#testimonial-section .userpic-tomewer {
    background-position: -200px 0;
}
#testimonial-section .userpic img {
    width: 100%;
    border-radius: 40px;
}
#testimonial-section .feedback + .feedback {
    margin-top: 30px;
}
#testimonial-section .feedback .name { 
    font-size: 14px;
    margin-top: 5px;
}

/*  ------------------------------------------------------------  */
/*  Download
/*  ------------------------------------------------------------  */

#download-section {
    padding-top: 130px;
    padding-bottom: 140px;
    text-align: center;
}
#download-section h2 {
    margin-bottom: 15px;
}
#download-section .little-link {
    color: #3dc264;
}

/*  ------------------------------------------------------------  */
/*  People Icons
/*  ------------------------------------------------------------  */

.people-icon {
    background: url("../img/people.png");
    width: 140px;
    height: 140px;
    background-repeat: no-repeat;
}

.people-icon.people-1 {
    background-position: 0 0; 
}
.people-icon.people-2 {
    background-position: -140px 0; 
}
.people-icon.people-3 {
    background-position: -280px 0; 
}
.people-icon.people-4 {
    background-position: -420px 0; 
}
.people-icon.people-5 {
    background-position: -140px -140px; 
}
.people-icon.people-6 {
    background-position: -280px -140px;  
}
.people-icon.people-7 {
    background-position: -420px -140px;  
}
.people-icon.people-8 {
    background-position: -420px -140px; 
}
.people-icon.people-9 {
    background-position: -140px -280px; 
}
.people-icon.people-10 {
    background-position: -280px -280px;  
}
.people-icon.people-11 {
    background-position: -420px -280px;  
}
.people-icon.people-12 {
    background-position: -420px -280px; 
}
.people-icon.people-13 {
    background-position: -140px -420px; 
}
.people-icon.people-14 {
    background-position: -280px -420px;  
}
.people-icon.people-15 {
    background-position: -420px -420px;  
}
.people-icon.people-16 {
    background-position: -420px -420px; 
}


/*  ------------------------------------------------------------  */
/*  Features Icons
/*  ------------------------------------------------------------  */

.feature-icon {
    width: 72px;
    height: 72px;
    background: url("../img/features-icons.png");
    background-repeat: no-repeat;
    margin: auto;
    margin-bottom: 10px;
}

.feature-icon.feature-icon-seo-friendly {
    background-position: 0 0;
}
.feature-icon.feature-icon-optimized-for-mobile {
    background-position: -80px 0; 
}
.feature-icon.feature-icon-smart-targeting {
    background-position: -160px 0; 
}
.feature-icon.feature-icon-ways-of-locking {
    background-position: 0 -80px;
}

.feature-icon.feature-icon-attention-grabbing-themes {
    background-position: -240px 0; 
}
.feature-icon.feature-icon-ajax-loading {
    background-position: -80px -80px; 
}
.feature-icon.feature-icon-well-optimized {
    background-position: -160px -80px; 
}
.feature-icon.feature-icon-out-of-the-box {
    background-position: -240px -80px; 
}

/*  ------------------------------------------------------------  */
/*  Benifits section
/*  ------------------------------------------------------------  */

#drive-traffic-section {
    
}

@media (max-width: 1038px) {
    .min-1000px {
        display: none !important;
    }
}
@media (max-width: 850px) {
    .min-850px {
        display: none !important;
    }
}
@media (max-width: 637px) {
    .min-650px {
        display: none !important;
    }
}
@media (max-width: 950px) {
    h1, h2, h3, h4 {
        text-align: center !important;
    }
}

/*  ------------------------------------------------------------  */
/*  Achievements
/*  ------------------------------------------------------------  */

#achievements {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
#achievements li {
    display: inline-block;
    vertical-align: top;
    margin: 5px;

    color: #fff;
    font-size: 14px;
    font-family: Arial, serif;
    text-align: left;
    border-radius: 5px;
    position: relative;
    width: 180px;
    height: 61px;
    background-color: #2fc98d;
}
#achievements li .default-state {
    padding: 10px 10px 10px 55px;
    line-height: 130%;
}
#achievements li .hover-state {
    padding: 10px;
}
#achievements li .number {
    font-size: 30px;
    font-weight: bold;
    font-size: 22px;
    display: block;
    margin-bottom: 5px;
}
#achievements li .fa {
    position: absolute;
    left: 12px;
    top: 12px;
    font-size: 32px;
}
#achievements li .fa-bar-chart-o,
#achievements li .fa-institution {
    font-size: 24px;
    top: 10px;
}

.scroll-on-hover {
    overflow: hidden;
}
.scroll-on-hover .default-state,
.scroll-on-hover .hover-state {
    position: relative;
    display: block;
    
    -webkit-transition: top 0.4s;
    transition: top 0.4s;
    
    top: 0px;
}

#achievements .scroll-on-hover:hover .default-state,
#achievements .scroll-on-hover:hover .hover-state {
    top: -62px;
}