.header-container {z-index: 0;}
.fp-banner { background-size:cover; width:100%; margin:0; background-position: 50% 30%; background-color:#a4b4be; position:relative; top:0;}
.fp-banner:after {content: ""; position: absolute; top: 0; left: 0; width:100%; height:calc(100vh); background: rgba(255,255,255,0); pointer-events: none;}


#intro { padding:270px 0 40px 0; position:relative; max-width: 100%;display:block; }
#intro p {background-color: rgba(255,255,255,0.9); max-width:920px; width:100%;padding:10px; white-space:normal; position:relative; left:-10px;}
#intro h1 {margin-top:0px;  }
#page-title {padding-bottom:100px;}
#page-title .black {text-shadow:0 0 5px #fafcfe;}
#page-title .white {text-shadow:0 0 5px #22282c;}
@media only screen and (max-width: 450px) {
  #page-title, .principal-above a h2 {font-size: calc(7vw - 4px);} p {font-size:14px;} }

@media only screen and (max-height:900px) and (min-width:981px) {#intro {padding-top: 200px;}}

@media only screen and (max-width:980px) {#intro {padding-top: 130px;}}
.fp-body-container {background-color: transparent;  display:block; width:100%; max-width:1440px; padding:0 60px; position:relative; top:0; margin:20px auto;}
.emphasize {font-size:28px; font-weight:300; line-height: 28px;}

.principal-above a .feature-bar-read-more {position:static; float:right;margin-top:-20px;  }
.principal-above a p {color:#22282c; }
.principal-above a h2 {padding-top:30px;}
#below > div > div.principal-above > article > a:nth-child(1) > h2 {padding-top:0;}
.footer-container {position:relative; }

.fp-imagecredit {color:#a4b4be; font-size: 0.8em; position:absolute; right:1em; top:50vh; line-height: 0em; transform: rotate(-90deg);transform-origin: right;}

.credit, .credit-inline {font-size:0.75em; color: #fafcfe; float:right; padding-right:5px; position:relative;  }
.banner .credit {position:absolute; right:1em; top:10px; line-height: 0em; transform: rotate(-90deg);transform-origin: right;}
.credit a, .credit-inline a {color: #a4b4be;}
.deep {margin-bottom:0;}
#sidebar a {margin:0px; font-style:normal; }
.article-bar img, .img-wrap img  {filter:saturate(75%);height: 100%; width:100%; object-fit: cover;margin-bottom:5px;}
.article-bar:hover img {filter:saturate(125%);}
.img-wrap {height:100px; width:100%; overflow: hidden;border: 1px solid #ACAEB0;margin-bottom:10px;}
.principal-above .img-wrap {height:200px;}
.more-articles {color:#22282c;margin:0 0 30px auto;  }
.article-bar {margin-bottom:20px; line-height: 1.2em;}
#legal-disclaimer {font-size: 1em; float:left; border: 2px solid #c05046; padding: 5px;  color: #fafcfe; background-color: #c05046;}
#previous-next {max-width: 400px; margin:auto; display:table; font-size: 1em;padding-top:30px;}
#previous-next a {color:#475a65;}
.previous {float:left;width:150px;}
.next {text-align:right; float:right; width:150px;}
#search-panel {height:auto; margin-bottom:10px;padding:0 0 10px 0; display:block;}
#search-panel a {display:block;}
input[type=search], select   {padding:5px 10px; border:1px solid #a4b4be; font-size: 1em; color:#475a65; margin:10px 0 0 0;}
.search-button {padding:5px 10px; border:1px solid #475a65; font-size: 1em; color:#fafcfe; background-color: #475a65; margin:10px 0 0 0;}

h4 {margin:0; }

#sidebar {float:right; width:420px; top:22px; position:relative; }

.principal-above-pre {min-width:920px; max-width:1440px; }
.principal-above-pre {padding:0 60px; margin-bottom:50px;}
.principal-above  {width:calc(100% - 480px);max-width:850px; min-width:480px;vertical-align: middle;float:left;padding-top:22px; }

.covering {width:100%; height:100%;}

#below {position:relative; top:-40px;}

#recent-articles {margin-top:30px; }
#recent-articles {color:#22282c;}
.article-meta {color:#22282c; margin-top:10px; font-size:0.9em;}
.article-bar .feature-bar-title {font-size: 1.2em; line-height: 1.2em;padding-bottom: 10px; color:#22282c;}
.feature-bar-categories a, .feature-bar-categories a:visited {font-size: 0.9em;}
 .feature-bar-read-more {color: #c05046;font-size:0.95em; position:relative; }
.feature-bar-deck {font-size:0.95em; display:block;line-height: 1.5em;margin-top:10px; color:#22282c;}
.feature-bar-read-more {float:right; bottom:15px;}
.article-listing {border-bottom: 1px solid #e3e9ec; margin-bottom:15px;padding-bottom:5px;}
.article-listing:last-of-type {border:none;}



.guide-section {margin-top:30px; padding-bottom: 20px; border-bottom: 1px solid #e3e9ec;}
.guide-section:first-of-type {margin-top:40px;}
.guide-section .feature-bar-title {color:#475a65; text-transform: uppercase;}

@media only screen and (min-width: 1441px) {
  .body-container {width:1220px; padding:0;margin-left:auto; margin-right:auto;}
  #sidebar {width:550px; }
  .principal-above {width:calc(100% - 610px);max-width:850px; min-width:480px; }
  .principal-above-pre {padding:0;}
}
@media only screen and (min-width:1100px) and (max-width:1440px) {
  .principal-above-pre {padding:0 30px;}
}
@media only screen and (min-width:1036px) and (max-width:1109px) {
  .principal-above-pre {padding:0;}
}
@media only screen and (max-width: 1035px){
  .principal-above, #sidebar {clear: both; width:100%;max-width:100%;min-width: 100%;}
  #sidebar {padding-top:0px;}
  #more-info-article {padding:10px 0 0 0;}
  .cta1 {margin-bottom:30px;}
  .body-container:after {content: " "; display: table; clear: both;}
  #below {top:0;}


  #intro { font-size: 16px;line-height:28px; }
  .principal-above-pre  {padding:0 30px; }
  .principal-above-pre {margin-bottom: 0;}
  .principal-above-pre, .principal-above  {min-width:260px; width:100%;}
  #tos-bar {padding:20px 30px;}

}
@media only screen and (max-width:900px){
  .principal-above-pre {padding:0;}
}

@media only screen and (max-width: 540px) {
  h1 {font-weight: normal;}
  input[type=search], select {font-size: 0.9em;}

  .body-container {padding-left:20px; padding-right:20px;}
}
@media only screen and (max-width: 415px) {
  h1 {font-size: 26px;margin-bottom:20px;}

}
@media only screen and (max-width: 400px) {

  input[type=search], select {font-size: 0.8em;}
}



.intro-slide { animation: slide-in 0.6s forwards; -webkit-animation: slide-in 0.6s forwards; animation-timing-function: ease;}
.intro-slide2 { animation: slide-in 0.9s forwards; -webkit-animation: slide-in 0.9s forwards; animation-timing-function: ease-out;}
.delay {animation-delay: 0.3s;}
.bigdelay {animation-delay: 4.6s;}
.delay1 {animation-delay: 0.5s;}
.delay2 {animation-delay: 1.5s;}
.delay3 {animation-delay: 2.8s;}

@keyframes slide-in {100% {transform:translate(0%, 0%);}}
@-webkit-keyframes slide-in {100% {-webkit-transform:translate(0%, 0%);}}



#navbox {transform: translateX(0%); -webkit-transform: translateX(0%);-ms-transform: translateX(0%);}
#fp-below-pre {transform: translateY(200vh); -webkit-transform: translateY(200vh);-ms-transform: translateY(200vh);}


@media only screen and (max-width: 980px) {
  #tos-bar {padding:20px 30px ;}
}

.invisible {transition: opacity 0.5s ease; opacity: 0.0;}
.visible {transition: opacity 0.5s ease; opacity: 1.0;}
.fromRightIn {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0;}
.fromRightOut {transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(10px, 0); opacity: 0.0;}

@media only screen and (max-height: 900px) and (min-width: 1150px) {

}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.arrow {
  position: absolute;
  color: rgba(255,255,255, 0.5);
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
/*   background-image: url(); */
/*   background-size: contain; */
}

.bounce {
  -moz-animation: bounce 2s 2;
  -webkit-animation: bounce 2s 2;
  animation: bounce 2s 2;
  animation-delay: 2s;
}