@import url(//fonts.googleapis.com/css?family=Lato);

@media (min-width: 1800px) {
  .ppl-info h2 {
    margin-top: 22% !important;
  }
}

@media (min-width: 1300px) {
  .big-push {margin-top: 300px;}
  .minor-big-push {margin-top: 100px;}
  .ppl-big-push {margin-top: 21% !important;}
  .ppl-info h2 {
    margin-bottom: 20px;
    margin-top: 14% !important;
  }

  .contact {height: 470px;}

  .clip_static {
    width: 33.2%;
    position: absolute;
    left: 9.2%;
    top: 8%;
  }

  .stamps_static {
    width: 32.5%;
    position: absolute;
    right: 11.2%;
    top: 8.3%;
  }

  .stamps {
    width: 32.6%;
    position: absolute;
    right: 11%;
    top: 8.5%;
  }

  .clipper {
    width: 32.4%;
    position: absolute;
    left: 9.4%;
    top: 8.7%;
  }

  .search_static {
    width: 32.3%;
    position: absolute;
    left: 9.5%;
    top: 8%;
  }
}

@media (min-width: 1280px) {
  .big-push {margin-top: 150px;}
  .ppl-big-push {margin-top: 140px;}
  .ppl-info h2 {
    margin-bottom: 20px;
    margin-top: 12%;
  }
  .aa-margin {
    margin-top: 16% !important;
  }
}


@media (max-width: 1279px) {
  .ppl-big-push {margin-top: 0px;}
  .ppl-info h2 {
    margin-bottom: 20px;
    margin-top: 12%;
  }
}

@media (max-width: 1100px) {
  .ppl-info h2 {
    margin-bottom: 10px;
    margin-top: 7%;
  }

  .footer-small {
    height: auto;
  }
}


@media (min-width: 768px) and (max-width: 980px) {
  .col-4 .item {
    width: 47%;
    margin-right: 2%;
    margin-bottom: 2%;
  }

  .header-img {
    width: 50%;}

  /*.aa-margin {margin-top: 190px;}*/
  .contact h1 {
    margin-top: 15%;
    margin-bottom: 30px;
  }
  /*.container-mobile-btn-contact a {color: #0177C6 !important;}*/

  .header-content a {color: #fff;}

  /*.clip_static, .stamps_static {top: 36.5%;}*/
  .mobile-logo {
    position: absolute;
    top: 5px;
    left: 1.5%;
    width: 5%;
    cursor: pointer;
    z-index: 9999;
  }

  .feature-box p {
    padding: 0 0 30px !important;
  }
}

@media (max-width: 990px) {
  .nav {display: none;}
  .mobile-nav {display:block;}
  .mobile-logo {display: inline;}
  .mobile-show {display: block;}
  .mobile-hidden {display: none;}
  .input-group {margin-bottom: 30px;}

  .mobile-login-form a {color: #34A9EA;}

  .mobile-login-form a:hover {color: #0177C6;}

  #mobile-back {margin: 20px;}

  #mobile-back a {
    cursor: pointer;
    color: #D4D4D4;
    font-size: 8px;
  }

  .feature-box-heading {
      padding-top: 20px;
  }
  .feature-box p {
    padding: 0 0 30px;
  }

  .feature-box-heading {
    padding-top: 20px;
  }

  .footer-small {
    height: 60px;
  }
  .copyright {float:left;}
  .terms {float:left;}
  .mountains {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
  }

  .feature-box p {
    padding: 0 0 30px !important;
  }

  .swiper-container {
    padding-bottom: 20px !important;
  }

  #mobile-back a:hover {color: #0177C6;}

  .lmhl {
    width: 30%;
  }
  .header-content {min-height: 640px;}
  .header-content a {color: #fff;}
  .btn-primary {
    background-color: #34A9EA;
    width: 50%;
    color: #fff;
    margin: 0 auto;
  }
  .btn-primary:hover {background-color: #90D5FC;}


  .vid h3 {text-align: center;}
  .vid {margin-bottom: 30px;}
  .slide-img {
    top: 7%;
    width: 30%;
    position: absolute;
    left: 35%;
    }

  .tour-mobile-img {
    width: 60% !important;
  }

  .video-tour {
    position: relative;
    padding-bottom: 40%;
    padding-top: 30px;
    height: 0;

  }

  .video-tour iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }

}

@media (max-width: 680px) {
  .footer-small {height: 100%;}
  .footer-small > .container {
    margin: 0 auto !important;
  }

  .cd-error-message {
    color: red;
    font-size: 60%;
    position: absolute;
    width: 100%;
    left: 40px;
    text-align: left;
    top: 40px;
  }

  .copyright {float:none; text-align: center;}
  .terms {float:none; text-align: center;}
  .mountains {float:none; text-align: center;}
  .mountains p {margin: 10px;}
  .terms a {color: #797979;}
  .terms a:hover {color: #9B9A9A;}

  .header-content a {color: #fff;}

  .input-group {margin-bottom: 30px;}

  .mobile-login-form a {color: #34A9EA;}

  .mobile-login-form a:hover {color: #0177C6;}

  #mobile-back {margin: 20px;}

  #mobile-back a {
    cursor: pointer;
    color: #D4D4D4;
    font-size: 8px;
  }

  #mobile-back a:hover {color: #0177C6;}

  .lmhl {
    width: 30%;
  }

  .faq_img_mobile {
    width: 60% !important;
  }

  .btn-primary {
    background-color: #34A9EA;
    width: 50%;
    float: left;
    margin-bottom: 30px;
  }
  .btn-primary:hover {background-color: #90D5FC;}
  .clip_static, .stamps_static {top: 4.5%;}
  .clip_static{
    left: 11.2%;
    width: 31.3%;
  }

  .mobile-logo {
    position: absolute;
    top: 0.5%;
    left: 1.5%;
    width: 5%;
    cursor: pointer;
    z-index: 9999;
  }

  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}


@media (max-width: 768px) {
  h1 {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .mobile-logo {
    position: absolute;
    top: 6px;
    left: 1.5%;
    width: 7%;
    cursor: pointer;
    z-index: 9999;
  }

  .aa-margin {
    margin-top: 29%;
    margin-bottom: 30px;
  }

  .header-img {width: 50%;}
  .the_mess {width: 70%;}
  .dcp-mobile {
    width: 50% !important;
    margin-bottom: 20px !important;
  }
  .container-mobile-btn-contact {margin-top: 50px;margin-bottom: 90px;z-index:999;}
  .contact h1 {margin-top: 90px;}
  /*.container-mobile-btn-contact a {color: #0177C6 !important;}*/
  /*.clip_static, .stamps_static {top: 37%;}*/

  .mobile-btn {color: #fff;}

  .tour-mobile-img {width: 60%;}
  .vid {margin-bottom: 30px;}
}

@media (max-width: 600px) {
  .f-h-img {width: 20%;}
  .dcp-mobile {width: 40%;}
  .bg-ninja {display: none;}
  .aa-computer {
    width: 70%;
    margin: 30px 0 50px;

  }
  .bill {
    width: 25%;
    margin-top: 50px;
  }
  .contact {
    text-align: center;
    height: 350px;
    width: 100%;
    background: #0177C6 url(../img/contact_pattern.svg) repeat 48% 0;
    text-align: center;
  }
  .contact h1 {color: #fff;}
  .ninja-bg {
    display: none;
  }

  .row {
    margin: 0;
  }

  .quote {
    width: 85%;
    left: 0;
    margin: 0 7.5%;
  }

  .mobile-btn {color: #fff;}

  .mobile-logo {
    position: absolute;
    top: 5px;
    left: 1.5%;
    width: 8%;
    cursor: pointer;
    z-index: 9999;
  }

  .clipper {width: 60%;}

  ul.social {
    margin-top: 40px;
    padding-left: 30px;
  }
  .social li {
    color: #fff;
    list-style: none;
    display: inline-block;
    margin-right: 30px;
    padding-top: 8px;
  }
  .social-fb, .social-in, .social-tw {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 3px solid #fff;
    text-shadow: 0px 2px rgba(4,101,155,1);
    -webkit-box-shadow: 0px 2px 0px 0px rgba(4,101,155,1);
    -moz-box-shadow: 0px 2px 0px 0px rgba(4,101,155,1);
    box-shadow: 0px 2px 0px 0px rgba(4,101,155,1);
  }

  .container-mobile-btn-contact {
    margin-top: 50px;
    padding-bottom: 20px;
  }

  .input-group {margin-bottom: 30px;}

  .mobile-login-form a {color: #34A9EA;}

  .mobile-login-form a:hover {color: #0177C6;}

  #mobile-back {margin: 20px;}

  #mobile-back a {
    cursor: pointer;
    color: #D4D4D4;
    font-size: 8px;
  }

  #mobile-back a:hover {color: #0177C6;}

  .lmhl {
    width: 30%;
  }

  .btn-primary {background-color: #34A9EA; border: none;}
  .btn-primary:hover {background-color: #90D5FC}
  .clip_static, .stamps_static {top: 36.5%;}

  .video-tour {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;

  }

  .video-tour iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 100px;
  }

  .vid {margin-bottom: 30px;}

  .footer-small {
    background: #2B2B2A;
    color: #848484;
    height: 100%;
    padding-top: 15px;
  }

  .slider {
    margin-bottom: 100px;
  }


}

@media (max-width: 599px) {

  .button_container {top: 11px !important;}
  .container-mobile-btn-contact {
    margin-top: 50px;
    margin-bottom: 20px !important;
  }
  .contact h1 {margin-top: 50px;}

    h1 {-webkit-font-smoothing: antialiased;}

    .slide-img {
        top: 0%;
    }

  .swiper-container {
    width: 90%;
    height: 100%;
    padding-bottom: 20px;
  }

  .swiper-slide {
    width: 100% !important;
  }
  .slide-img {
    width: 40%;
    position: absolute;
    left: 31%;
  }
}



  .description {
    margin-top: 37%;
    padding-bottom: 0;
  }
  .description-text {
    padding:10px;
    top: 0;
    z-index: 4;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: #fff;
  }

  .description-text p {
    color: #797979;
    font-style: italic;
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .description-text b {
    line-height: 50px;
    color: #797979;
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .text-section {
    text-align: left;
    margin-top: 20px;
  }

}


@media (max-width: 480px) {
  .the_tour {font-size: 44px; margin-bottom:0;}
  .mountains {padding: 0;}

  .tour-mobile-visible h3 {margin-bottom: 20px;}


  .clipper {width: 90%;margin-bottom: 50px;}

  .form-control {
    border: 1px solid #e2e2e4;
    box-shadow: none;
    color: #c2c2c2;
    -webkit-appearance: none;
  }

}

@media (max-width:320px) {


}


@media (max-width: 450px) {
  .cd-error-message {
    color: red;
    font-size: 60%;
    position: absolute;
    width: 100%;
    left: 40px;
    text-align: left;
    top: 40px;
  }
  h1 {font-size: 28px;}
  .header-img {width: 90%; margin-top: 20px;}
  .arrow {
    width: 20%;
    margin-top: -20px;
  }
  .f-h-img {
    width: 30%;
  }
  .logo {
    border-bottom: none !important;
    width: 100% !important;
  }
  .button_container {
    top: 1.5%;
  }
  .aa-margin {
    margin-top: 28%;
    margin-bottom: 10px;
  }
  .footer-small {
    background: #2B2B2A;
    color: #848484;
    height: 100%;
    padding-top: 15px;
  }

  .accept-terms {margin: 0 auto;}

  .input-group {margin-bottom: 30px;}

  .mobile-login-form a {color: #34A9EA;}

  .mobile-login-form a:hover {color: #0177C6;}

  #mobile-back {margin: 20px;}

  #mobile-back a {
    cursor: pointer;
    color: #D4D4D4;
    font-size: 8px;
  }

  #mobile-back a:hover {color: #0177C6;}

  .checkbox input[type="checkbox"] {
    float: none;
    margin: 4px 14px 0;
  }



  .text-section-mobile-tour {
    float: none;
    margin-left: 0;
  }

  .lmhl {
    width: 30%;
  }

  .description {
    margin-top: 42%;
    padding-bottom: 0;
  }

  .faq_img_mobile {
    width: 100% !important;
    margin: 20px auto !important;
  }

  .faq_icn {
    width: 5%;
  }
  .faq_icn_settings {
      width: 20%;
  }
  .faq_img_mobileg {
      width: 70%;
  }

  .faq_img:hover {
      cursor: auto;
    -webkit-transform:scale(1); /* Safari and Chrome */
    -moz-transform:scale(1); /* Firefox */
    -ms-transform:scale(1); /* IE 9 */
    -o-transform:scale(1); /* Opera */
    transform:scale(1);
  }

  .btn-primary {color: #fff;width: 100%;}
  .btn-primary:hover {background-color: #34A9EA}

  .mobile-logo {
    position: absolute;
    top: 6px;
    left: 1.5%;
    width: 10%;
    cursor: pointer;
    z-index: 9999;
  }
}

/*Mobile Button*/
.container-mobile-btn {
  margin-top: 60px;
  padding-bottom: 60px;
  cursor: pointer;
  z-index: 999;
}
.mobile-btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  background: #0177C6;
  padding: 10px 20px 14px 20px;
  text-decoration: none;
}

.mobile-btn:hover {
  color: #fff;
  text-decoration: none;
}

.mobile-btn:active, .mobile-btn-contact:active {
  position:relative;
  top:2px;
}

.mobile-btn-contact {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  background: #0664A9;
  padding: 20px 40px;
  text-decoration: none;
}

.mobile-btn-contact:hover {
  background: #035B95;
  color: #fff;
  text-decoration: none;
}

.dcp-mobile {
  margin-bottom: 50px;
  margin-top: 20px;
  width: 30%;
}

/*Anytime, anywhere*/

/*Mobile menu*/
.mobile-nav {
  position: absolute;
  text-transform: uppercase;
  width: 100%;
  height: 0;
  text-align: center;
  top: 100%;
  left: 0;
  margin: 0 auto;
  z-index: 9999;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mobile-nav a {
  display: inline-block;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  top: 5px;
}
.mobile-nav a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  -webkit-transition: .35s ease;
  transition: .35s ease;
}
.mobile-nav a:hover:after, .mobile-nav a:focus:after, .mobile-nav a:active:after {
  width: 100%;
}

h1 {
  position: relative;
  text-align: center;
}

.contact {
  margin-top: 50px;
}

.button_container {
  position: fixed;
  top: 13px;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity 2.25s ease;
  transition: opacity 2.25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -ms-transform: translateY(11px) translateX(0) rotate(45deg);
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #90D5FC;
  border: none;
  border-radius: 5px;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay-login {
  margin-top: -30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #fff;
}
.overlay-login ul.overlay-login-choice {
  width: 100%;
  margin-top: 25px;
}
.overlay-login li.li-sign-up {
  display: inline !important;
  float: left;
  margin-left: 15px;
}
.overlay-login li.li-log-in {
  display: inline !important;
  float: right;
  margin-right: 15px;
}


.overlay-login li a{
  font-size: 16px;
}

.overlay-login img {width: 12%;}


.overlay {
  position: fixed;
  background: #0177C6;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .75;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
  animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 50px;
  font-weight: 400;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}