/* GENERAL */
body {
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

video {
    width: 100%;
}

/* HERO SECTION*/
.hero-wrapper {
    margin: 0 -500%; 
    padding: 0 500%; 
    background: url('/static/subscription-tour/images/Hero-bg.jpg');
    height: 100vh;
    position: relative;
    margin-top: -20px;
    background-size: 2120px;
}

.hero {
    position: relative;
    width: 100%;
    text-align: center;
    height: 100%;
}

.masthead {
    margin: 0 auto;
    width: 300px;
    padding-top: 20px;
}

.it-masthead {
    background: url(/assets/images/logo/masthead-small-white.svg);
    width: 300px;
    height: 27px;
    background-repeat: no-repeat;
    background-size: contain;
}

.text-swap {
    display: none;
}

.rotating-text, .text-swap {
    color: #fff;
    margin-top: calc(50vh - 180px);
    font-size: 2em;
    z-index: 999;
}

.rotating-text h1, .text-swap h1 {
    font-weight: 300 !important;
}

.rotating-text h1 em, .text-swap h1 em {
    display: block;
    color: #fff;
}

.txt-rotate, .text-swap-blue {
    color: #65e8f7;
}

/* EDITORS NOTE */
.editors-note {
    margin-top: 20px;
}

.editors-image-bg {
    background: url('/static/subscription-tour/images/PON.jpg');
    width: 100%;
    height: 640px;
    background-size: cover;
}
  
.editor-image  {
    width: 90%;
}
  
.editors-note-message {
    color: #626262;
    line-height: 27px;
    font-size: 18px;
    display: none;
}

.editors-note-message p {
    padding: 6px 0px;
}

.editors-note-title {
    font-size: 40px;
    line-height: 54px;
    font-weight: 300;
    margin-bottom: 30px;
    margin-top: 70px;
    color: #1d1d1d;
}   

.signature img {
    width: 65%;
}


/* SWIPER SECTION */
.swipe-section-wrap {
    margin: 0 -500%;
    padding: 0 500%;
    background-color: #fbfafb;
}
  
.swipe-dektop-wrapper {
    margin: 60px 0px 10px 0px;
}

.swipe-section-title {
    font-size: 2.2em;
    line-height: 37px;
    font-weight: 300;
    margin-bottom: 10px;
    margin-top: 70px;
    color: #1d1d1d;
    text-align: center;
}

.swipe-section-text {
    text-align: center;
    font-size: 1.2em;
    line-height: 150%;
    font-weight: 400;
    margin: 0 auto;
    width: 100%;
}

.swiper-container {
    margin-left: 19px !important;
}



.video-mobile {
    display: none;
}


.swipe-image-wrap {
    text-align: center;
}
  
.swipe-image-wrap img {
    width: 80%;
}


/* FEATURES SECTION */
.feature-wrap {
    margin: 0 -500%;
    padding: 0 500%;
    background-color: #1c1c22;
    color: #fff;
}

.features-title {
    font-size: 40px;
    font-weight: 300;
    line-height: 54px;
    padding: 70px 0px 30px 0px;
    text-align: center;
}

.features-flex {
    display: flex;
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    // justify-content: center;
    // box-sizing: border-box;
    // align-items: space-between;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    // align-content: center;    
      padding: 0px 0px 60px 0px;
}

.feature {
    border: 1px solid #2b2c31;
    // padding: 45px;
    flex-basis: 31%;
      -webkit-flex-basis: 31%;
      -ms-flex-basis: 31%;
      -mos-flex-basis: 31%;
    text-align: center;
    // padding: 13%;
    margin: 1%;
    max-width: 300px;
    min-height: 300px;
}

.feature-image {
    border-radius: 50%;
    /* height: 50px; */
    /* width: 50px; */
    margin-left: calc(50% - 140px);
    margin-top: 30px;
    margin-bottom: 30px;
    color: #8fb5f9;
    font-family: 'it-icons';
    font-size: 60px;
}

.feature-app-image {
  margin: 0px;
}

.feature-image img {
  width: 30%;
}

.feature-image.epaper-image::before {
    content: "\e91d"!important;
}

.feature-image.crossword-image::before {
    content: "\e918"!important;
}

.feature-image.newsapp-image::before {
    content: "\e916"!important;
}

.feature-image.archive-image::before {
    content: "\e921"!important;
}

.feature-image.subscriber-rewards-image::before {
    content: "\e91f"!important;
}

.feature-text {
    text-align: left;
    padding: 10px 20px;
    min-height: 145px;
}

.feature-android {
    width: 40%;
    display: inline-block;
    float: right;
    margin-right: 15px;
    margin-top: 10px;
}

.feature-ios {
    width: 40%;
    display: inline-block;
    float: left;
    margin-left: 15px;
    margin-top: 10px;
}

.feature-btn {
    border: 1px solid #fff;
    width: 200px;
    margin-left: calc(50% - 100px);
    border-radius: 30px;
    padding: 5px 0px;
    margin-top: 10px;
    margin-bottom: 25px;
}

.feature a {
    color: #fff;
}

/* SUBSCRIBE / CONTINUE SECTION */
.continue-wrapper {
    text-align: center;
    color: #fff;
    background: linear-gradient(-120deg, #8fd3f9, #8faaf9);
    margin: 0 -100%;
    padding: 0 100%;
}

.subscribe-title {
    font-size: 40px;
    font-weight: 300;
    line-height: 54px;
    font-size: 40px;
    font-weight: 300;
    line-height: 54px;
    padding: 30px 0px;
}

.subscribe-message {
    font-size: 18px;
    line-height: 27px;
}

.subscribe-message p {
    padding: 0 0 0.4em;
}

.subscribe-message a {
    color: #fff !important;
    text-decoration: underline;
}

.subscribe-btn {
    margin: 25px 0px 40px 0px;
}
  
.continue-btn {
    background-color: #fff;
    color: #8fb5f9;
    border: 1px solid #fff;
    border-radius: 4px;
    width: 200px;
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
    margin: 25px 0px 40px 0px;
}


/* ANIMATED ARROW */
.arrow.animated.bounce {
    width: 40px;
    margin: 0 auto;
}
.arrow svg {
    width: 40px;
}
.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}
.animated{
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-fill-mode:both;
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -ms-animation-duration:2s;
    -o-animation-duration:2s;
    animation-duration:2s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

.arrow.animated.bounce {
    position: absolute;
    margin-left: calc(50% - 40px);
    bottom: 40px;
    box-sizing: border-box;
    padding: 20px;
}


/* EPAPER SECTION */
.epaper-wrapper {
    margin: 0 -500%;
    padding: 0 500%;
    background-color: #ecebec;
}

.epaper-title {
    font-size: 2.2em;
    line-height: 37px;
    font-weight: 300;
    margin-bottom: 10px;
    /* margin-top: 70px; */
    color: #1d1d1d;
    text-align: center;
    padding: 70px 0px 10px 0px;
}

.small-print {
    font-size: 14px;
}

.epaper-section-link {
    height: 120px;
    text-align: center;
  }
  
 .epaper-section-link-title {
  color: #1d1d1d;
  font-size: 1.5em;
}
                          
.brigtcove-standalone {
    padding: 0px 0px 40px 0px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LOGGED IN / OUT */
.authenticated .tour-signed-in{display:initial;}
.authenticated .tour-signed-out{display:none;}

.anonymous .tour-signed-out{display:initial;}
.anonymous .tour-signed-in{display:none;}


/* MEDIA QUERIES */
@media only screen and (max-width: 979px) and (min-width: 768px) {  
  .container {
    width: 100% !important;
  }

  .hero-wrapper {
    background-size: initial;
  }

  .span6 {
    width: 46% !important;
  }

  .editor-image {
    width: 100%; 
    margin-top: 111px;
  }

  .swiper-button-prev {
    left: 20px !important;
  }

  .feature-image {
    margin-left: auto;
  }
  
    
  .features-flex {
    margin-left: 20px;
  }
    
  .feature {
    min-height: 226px;
  }

  .feature {
    border: 1px solid #2b2c31;
    flex-basis: 31%;
    -webkit-flex-basis: 47%;
    -ms-flex-basis: 31%;
    -mos-flex-basis: 31%;
    text-align: center;
    margin: 1%;
    max-width: 370px;
    min-height: 300px;
  }

  .subscribe-message {
    padding-left: 20px;
  }

  .arrow.animated.bounce {
    bottom: 60px;      
  }

  .epaper-text {
    box-sizing: border-box;
    padding: 0px 20px;
  }
}

@media screen and (max-width: 767px) {
  .hero-wrapper {
  	background: url('/static/subscription-tour/images/Hero-mobile.jpg');
    background-size: 960px;
  }
  .rotating-text, .text-swap {
    font-size: 1.1em;
  }
  
  .editors-image-bg {
    background: url('/static/subscription-tour/images/PON.jpg');
    height: 270px;
    background-size: cover;
    border-radius: 600px;
    margin-bottom: 20px;
  }

  .editor-image  {
    border-radius: 50%;
    width: 30%;
    border: 1px solid #f2f2f2;
    margin-left: calc(50% - 55px);
    margin-bottom: 20px;
  }

  .editors-note-title {
    font-size: 30px;
    margin-bottom: 15px;
    line-height: 40px;
    margin-top: 0px;
  }
  
  figure.signature {
    margin-bottom: 40px;
  }

  .swiper-container {
    margin-left: 0px !important;
  }

  .video-mobile {
     display: block;
    margin: 20px 0px 40px 62px;
    width: 60%;
  }
    
  .swipe-image-wrap img {
    display: none;
  }

  .video-mobile {
    margin: 20px 0px 40px 50px;
    width: 70%;
  }
  
.video-static {
    margin: 20px 0px 40px 62px;
    width: 60%; 

  }
        
  
  .video-desktop {
    display: none;
  }
    
  .swiper-button-next, .swiper-button-prev {
    display: none;
  }

  .swipe-section-text {
    width: 100%;
    font-size: 1em;
  }

  .feature {
    flex-basis: 100%;
    -webkit-flex-basis: 100%;
    -mos-flex-basis: 100%;
    -ms-flex-basis: 100%;
    min-height: initial;
    max-width; 100%;
    margin-bottom: 5%;
  }

  .subscribe-message {
    text-align: left;
  }
    
  .subscribe-title {
    text-align: left;
  } 

  .arrow.animated.bounce {
    bottom: 70px;      
  } 

  .brigtcove-standalone {
    display: block;
  }

}

@media screen and (max-width: 320px) {   
  .editors-note {
    padding: 0px 10px;
  }

  .swiper-container {
    margin-left: 0px !important;
  }

  .swipe-section-text {
    width: 90%;
  }
    
  .swipe-section-text.epaper-text {
    box-sizing: border-box !important;
    padding: 0px 20px !important;
  }
  
  .swiper-slide {
    margin-left: 0px;
  }

  .subscribe-message {
    padding: 0px 10px;
  }
    
  .subscribe-title {
    padding: 30px 10px;
  }
}