/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  font-size: 100%;
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
    font-style: normal;
  color: #3d3536;
  background-color: white;
}

body, html {
  /* important */
  height: 100%;
}

a {
  color: #b4d7a8;
  text-decoration: none;
}

p { line-height: 1.4; margin-bottom: 25px; text-align: left; font-family: "adobe-garamond-pro", serif; font-weight: 400; font-size: 20px; }

blockquote p { font-size: 32px; text-align: center; margin-bottom: 20px;}
blockquote p:last-child { font-size: 14px;font-family: "brandon-grotesque",sans-serif; font-weight: 300; text-transform: uppercase; font-weight: 300; font-style: normal;}
blockquote { margin-bottom: 50px;}

.dropcap { float: left; font-size: 400%; padding-top: 4px; padding-right: 8px; padding-left: 3px; line-height: 1; }

img { max-width: 100%; height: auto; margin-top: 25px;}
.center-img { display: inline-block; margin: 0 auto;}
.copyright { font-size: 14px; text-align: center; margin-top: 30px;}

h1 span { font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: italic; text-transform: lowercase; letter-spacing: normal;}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
    text-align: center;
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */

header { position: fixed; top: 50%; margin-top: -104px; left: 30px; z-index: 99;}

nav li a { width: 20px; height: 20px; display: block; text-indent: -9999px; border-radius: 100%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.6s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 0.6s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    opacity: 0; position: relative; left: -20px;
}
nav li { margin-bottom: 7px; position: relative; }

.loaded nav li a { left: 0; opacity: 1;}

nav li a:after {position: absolute; left: 10px; top: -3px; text-indent: 0; opacity: 0;  -webkit-transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550); 0s; transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550); 0s; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);font-size: 14px;font-family: "brandon-grotesque",sans-serif; font-weight: 300; text-transform: uppercase;  font-style: normal; background-color: rgba(24,24,24,0.4); padding: 5px 15px 3px 15px; border-radius: 30px;
}
nav li:hover a:after {left: 30px; opacity: 1;}


nav li a[href$=intro] {background-color: transparent; -webkit-transition-delay: 0s; transition-delay: 1s;}
nav li a[href$=green] {background-color: #24bc79; -webkit-transition-delay: 0.2s; transition-delay: 1.2s;}
nav li a[href$=blue] {background-color: #50a6ed; -webkit-transition-delay: 0.4s; transition-delay: 1.4s;}
nav li a[href$=yellow] {background-color: #fbc501; -webkit-transition-delay: 0.6s; transition-delay: 1.6s;}
nav li a[href$=red] {background-color: #f8534f; -webkit-transition-delay: 0.8s; transition-delay: 1.8s;}
nav li a[href$=white] {background-color: #f5f5f5; -webkit-transition-delay: 1s; transition-delay: 2s;}
nav li a[href$=end] {background-color: transparent; -webkit-transition-delay: 1.4s; transition-delay: 2.2s;}

nav li a[href$=intro]:after {content: "Intro";}
nav li a[href$=green]:after {content: "Green";}
nav li a[href$=blue]:after {content: "Blue";}
nav li a[href$=yellow]:after {content: "Yellow";}
nav li a[href$=red]:after {content: "Red";}
nav li a[href$=white]:after {content: "White";}
nav li a[href$=end]:after {content: "Add colour to your journey";}


.images li { width: 50%; float: left; list-style: none; }
.images li:nth-child(2n+1) { padding-right: 2.5%;clear: left;}
.images li:nth-child(2n+2) { padding-left: 2.5%; }
.images li p { margin-bottom: 25px; font-size: 18px; line-height: 24px; text-align: center; font-family: "adobe-garamond-pro",serif;font-style: italic; font-weight: 400;}
.images li img { margin-top: 0px;}


.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 1;
}

.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  max-width: 1170px;
  text-align: center;
  font-size: 120px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase; letter-spacing: 0.1em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  color: white;
    
}
.cd-fixed-bg h1 { opacity: 0; margin-top: 30px; -webkit-transition: all 1s ease-in-out 1s;
    transition: all 1s ease-in-out 1s;}
.loaded .cd-fixed-bg h1 { opacity: 1; margin-top: 0;}

.cd-fixed-bg h3 { position: absolute; bottom: 20px; width: 100%; text-align: right; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 18px;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); padding: 0px 30px;

}

.cd-fixed-bg h2:after {content: ""; width: 50px; height: 3px; background-color: #fff; left: 50%; margin-left: -25px; position: absolute; top: 50px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cd-fixed-bg.cd-bg-7 h2:after {content: ""; width: 0px; height: 0px; 
}

.cd-fixed-bg.cd-bg-1 {
  background-image: url("https://www.greatrail.com/media/26374936/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("https://www.greatrail.com/media/26374937/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url(" https://www.greatrail.com/media/26374938/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("https://www.greatrail.com/media/26374939/cd-background-4.jpg");
}
.cd-fixed-bg.cd-bg-5 {
  background-image: url("https://www.greatrail.com/media/26374940/cd-background-5.jpg");
}
.cd-fixed-bg.cd-bg-6 {
  background-image: url("https://www.greatrail.com/media/26374941/cd-background-6.jpg");
}
.cd-fixed-bg.cd-bg-7 {
  background-image: url("https://www.greatrail.com/media/26374942/cd-background-8.jpg");
}


@media only screen and (min-width: 0px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 36px;
  }


}
@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
  }
.cd-fixed-bg h2:after { top: 70px;}

}


@media only screen and (max-width: 950px) {
header { display: none;}
.cd-fixed-bg h3 { font-size: 13px; text-align: center; line-height: 20px;}

    
    

}

.logo span { display: block;font-family: "brandon-grotesque",sans-serif; font-weight: 300; text-transform: uppercase; font-weight: 300; font-style: normal; font-size: 12px; opacity: 0; -webkit-transition: all 1s ease-in-out 3s; position: relative; transition: all 1s ease-in-out 3s; top: 10px;}
.loaded .logo span {opacity: 1; top: 0px;}
.logo img { margin-top: 5px;}
.logo { position: fixed; right: 0px; top: 20px; opacity: 0; z-index: 200; -webkit-transition: right 1s ease-in-out 2s, opacity 0.5s ease 2s; transition: right 1s ease-in-out 2s, opacity 0.5s ease 2s; color: #fff; text-align: center; }
.loaded .logo { opacity: 1; right: 20px;}

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

    .logo { display: none;}

.images li { width: 100%; text-align: center;}
.images li:nth-child(2n+1) { padding-right: 0%; clear: none;}
.images li:nth-child(2n+2) { padding-left: 0%; }
.images li p { max-width: 371px; display: block; margin: 0 auto; margin-bottom: 25px;}
}



.cd-scrolling-bg {
  position: relative;
  min-height: 100%;
  padding: 4em 0;
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
  background-color: #f5f5f5 ;
  color: #887f80;
}
.cd-scrolling-bg.cd-color-2 {
  background-color: #24bc79;
  color: #f5f5f5 ;
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #50a6ed;
  color: #f5f5f5 ;
}
.cd-scrolling-bg.cd-color-4 {
  background-color: #fbc501;
  color: #584c2b;
}
.cd-scrolling-bg.cd-color-5 {
  background-color: #f8534f;
  color: #f5f5f5 ;
}
.cd-scrolling-bg.cd-color-6 {
  background-color: #f5f5f5 ;
  color: #887f80;
}

.cd-scrolling-bg.cd-color-7 {
  background-color: #00a99d ;
  color: #fff;
}

.cd-bg-1 .overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 100;   background-color: #2a2a2a;
}

.loaded .cd-bg-1 .overlay { background-color: transparent; -webkit-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;}

.aside { margin-right: 20px; margin-bottom: 10px; margin-top: 5px; float: left; vertical-align: text-top;}
.cd-container p { clear: both;}

@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
  }
    

}

.share { text-align: center;}
.share a {width: 40px; height: 40px; border-radius: 20px; overflow: hidden; text-indent: -9999px; background-position: center; background-repeat: no-repeat; display: inline-block; vertical-align: middle; margin-left: 5px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.share a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.share-twitter { background-color: #00aced; background-image: url("https://www.greatrail.com/media/27963217/share-twitter-1-.png");}
.share-facebook { background-color: #3b5998; background-image: url("https://www.greatrail.com/media/27963216/share-facebook-1-.png");}
.svg .share-twitter {background-image: url("https://www.greatrail.com/media/27963247/share-twitter-1-.svg");}
.svg .share-facebook { background-image: url("https://www.greatrail.com/media/27963237/share-facebook-1-.svg");}