@font-face {
  font-family: 'Medium';
  src: url('../fonts/Medium.eot');
  src: url('../fonts/Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Medium.woff2') format('woff2'),
    url('../fonts/Medium.woff') format('woff'),
    url('../fonts/Medium.ttf') format('truetype'),
    url('../fonts/Medium.svg#Editor-Medium') format('svg');
  font-weight: normal;
  font-style: normal}
:root{
  --gold: #917536;
  --cream: #f4e5df/*f7e5df*/;
  --teal: #124749}

body{font-family:questa-sans;font-weight:400}

.grid-container{max-width:100%;padding:0}
.grid-padding-x > .cell{padding-left:4.375rem;padding-right:4.375rem}
.col2{margin:0 auto;max-width:1200px}
@media screen and (min-width: 640px) {
  .col2{
    background-image:url(../images/divider.png);
    background-image:url(../images/divider.svg);
    background-repeat:repeat-y;
    background-size:1px 1px;
    background-position:center}
  .mobilenospace{padding-top:7px}
}

a{color: var(--gold)}
a:hover{color: (--teal)}
.cta a{color:var(--cream)}
.cta a:hover{color:var(--gold)}
#footer a{color:var(--cream)}
#footer a:hover{color:var(--teal)}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-family:questa-sans;letter-spacing:.2em}

h2{
  font-size: .875rem}
hr{
  max-width: 1018px;
  border:0;
  height:9px;
  background-image: url(../images/hr.png);
  background-image: url(../images/hr.svg);
  background-repeat: repeat-x;
  background-size: 1px 9px}

.col2 p{
  font-size:1.0625rem;
  letter-spacing:.07em;
  line-height:1.4}
.initial-letter{
  font-family:'Medium', serif;
  font-size:1.5rem}
p.author{
  font-family:'Medium', serif;
  padding-top:3.65rem}

#top{
  padding:4em 0 4em}

#logo{
  width:221px;height:90px;
  background-image: url(../images/journeys-elsewhere-logo.png);
  background-image: url(../images/journeys-elsewhere-logo.svg);
  background-repeat:no-repeat;
  background-size: 221px 90px;
  margin: 0 auto}

#welcome,#testimonial{
  background:var(--gold);
  color:#fff}
#welcome{padding:5em 0 8em}
#welcome h2,#testimonial h2{
  max-width: 1140px;
  margin: 0 auto 8em;
  padding-left:50px;
  text-align: left;
  color: var(--cream);
  line-height: 1;
  vertical-align: middle}
#welcome h2::before,#testimonial h2::before{
  content:'';
  width:40px;height:1px;margin-right:20px;
  vertical-align:middle;
  display:inline-block;
  position:relative;
  background:var(--cream)}
#welcome p{
  font-size:1.875rem;
  letter-spacing:.1em;
  line-height:1.3;
  font-variant-ligatures: common-ligatures;
  font-variant: common-ligatures;
  font-feature-settings: "liga"}
#welcome,.raindow,.profile,#testimonial,.cta{text-align:center}
#journey{
  background: url(../images/journey.jpg);
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  height:326px}
#main{
  background:var(--cream);
  background-image:url(../images/mapmobile.gif);
  background-repeat:no-repeat;
  background-position: center 18%;
  background-size:1200px;
  color:var(--gold);
  padding-bottom:8em}
@media screen and (min-width: 640px) {
  #main{background-image:url(../images/map.gif);
  background-position: center top;
  background-size: 2300px 1800px}}
@media screen and (min-width: 1024px) {
  #main{background-position:center 40%}}
#main::before{
  content:'';
  position:relative;
  display:block;
  width:100%;height:47px;
  background-image: url(../images/pattern-main.png);
  background-image: url(../images/pattern-main.svg);
  background-repeat: repeat-x;
  background-size: 160px 47px;
  background-position: center}
.rainbow{
  max-width:650px;
  margin:6.75em auto;
  text-align:center;
  font-size: 1.25rem;
  line-height: 1.5}
.rainbow::after{
  content:'';
  position: relative;
  display:block;
  margin:1.5em auto 0;
  width:59px;height:29px;
  background-image:url(../images/rainbow.png);
  background-image:url(../images/rainbow.svg);
  background-repeat:no-repeat;
  background-size: 59px 29px}
.profile{margin: 8em 0 4em}
.profile::after{
  content:'';
  position: relative;
  display:block;
  margin:7px auto 0;
  width:239px;height:17px;
  background-image:url(../images/pfplines.png);
  background-image:url(../images/pfplines.svg);
  background-repeat:repeat-x;
  background-size: 1px 17px}
#testimonial{padding:6em 0 8em}
.cta{
  background:var(--teal);
  color:var(--cream);
  padding:0 0 6.25em}
.cta::before{
  content:'';
  position:relative;
  display:block;
  width:100%;height:100px;
  background-image: url(../images/twins.png);
  background-repeat: repeat-x;
  background-size: 303px 100px;
  background-position: center}
.cta h2{
  margin-top: 4.25em;
  font-family:'Medium',serif;
  font-size:1.8125rem;
  line-height:1.25;
  letter-spacing:.15em}
.cta h2::before{
  content:'';
  position:relative;
  display:block;
  width:14px;height:14px;
  margin: 1em auto;
  background-image: url(../images/hollowcircle.png);
  background-image: url(../images/hollowcircle.svg);
  background-repeat: no-repeat;
  background-size: 14px 14px}
.cta p{
  letter-spacing:.1em}
.cta p::after{
  content:'';
  position:relative;
  display:block;
  width:14px;height:14px;
  margin: 1em auto;
  background-image: url(../images/dot.png);
  background-image: url(../images/dot.svg);
  background-repeat: no-repeat;
  background-size: 14px 14px}
#imgrid{
  display:-webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display:-moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
  display:-ms-flexbox;  /* TWEENER - IE 10 */
  display:-webkit-flex; /* NEW - Chrome */
  display:flex;
  flex-wrap: nowrap;
  flex-direction:row}
#imgrid img{
  border:solid #fff;
  flex:1 1 auto;
  border-width:2px 1px 2px 1px}
@media screen and (min-width: 1024px) {#imgrid img{border-width:4px 2px 4px 2px;}}
#imgrid > div:first-of-type img{border-left:0;}
#imgrid > div:last-of-type img{border-right:0}
#footer{
  background:var(--gold);
  color:var(--cream);
  padding: 12em 0 6em;
  letter-spacing: .1em}
#footer .grid-x{
  max-width: 1142px;
  margin: 0 auto}
#footer .cell{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-between}
#footer .cell > div{align-self:flex-end}
.social a{
  display: inline-block;
  height:28px;
  margin-right:14px}
.social .instagram{
  width: 28px;
  background-image:url(../images/instagram.png);
  background-image:url(../images/instagram.svg);
  background-repeat:no-repeat;
  background-size:28px}
.social .facebook{
  width: 14px;
  background-image:url(../images/facebook.png);
  background-image:url(../images/facebook.svg);
  background-repeat:no-repeat;
  background-size:14px 28px}
.social .mail{
  width: 40px;
  background-image:url(../images/mail.png);
  background-image:url(../images/mail.svg);
  background-repeat:no-repeat;
  background-size:40px 28px}
.copyright{text-align:right}
.jeslick{margin:0 calc(10% + 50px)}
@media screen and (min-width: 1024px) {.jeslick{margin:0 24.5%}}
.jeslick p{margin:0;font-size: 1.0625rem}
.slick-initialized .slick-slide {
  float: none;
  display: inline-block;
  vertical-align: middle}
.slick-prev, .slick-next {
  line-height:0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent}
.slick-prev::before{
  content:'';
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: block;
  background-image: url(../images/prev.png);
  background-image: url(../images/prev.svg);
  background-repeat:no-repeat;
  background-size: 11px 21px;
  width:11px;height:21px;
  left: -50px}
.slick-next::before{
  content:'';
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: block;
  background-image: url(../images/next.png);
  background-image: url(../images/next.svg);
  background-repeat:no-repeat;
  background-size: 11px 21px;
  width:11px;height:21px;
  right: -50px}

@media screen and (max-width: 967px) {
  #footer .cell{flex-direction:column;text-align:center}
  #footer .cell > div{margin:1em 0;align-self: center}
  .copyright{text-align:center}
  #footer{padding:8em 0 6em}
  .social a.mail{margin-right:0}
  
}
@media screen and (max-width: 876px) and (min-width:400px) {#welcome p br{display:none}}
@media screen and (max-width: 876px) {#welcome p{padding:0 50px}}
@media screen and (max-width: 666px) {
  #welcome h2{margin-bottom:6em}
  #welcome{padding-bottom:5em}
  #welcome p{font-size:1.25rem}
  .rainbow{margin:5em auto}
  .profile{margin-top:5em}
  #main{padding-bottom:5em}
  #testimonial{padding-bottom:5em}
  #testimonial h2{margin-bottom:4em}
  .grid-padding-x > .cell{padding:0 50px}
  #footer{padding: 6em 0 5em}
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  -webkit-clip-path: inset(50%) !important;
  	clip-path: inset(50%) !important;        /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;            /* 3 */}