html,body{padding:0;margin:0;min-width:100%;min-height:100%;font-family:NexaSlab-Regular;overflow-x:hidden}
::selection {background: #F5A81C;color:#fff}
::-moz-selection {background: #F5A81C;color:#fff}
::-webkit-scrollbar {z-index:9999;width: 5px}
::-webkit-scrollbar-track {z-index:9999;background: #fff}
::-webkit-scrollbar-thumb {z-index:9999;background: #F5A81C}
h2,h3{margin:0;padding:0;font-family:NexaSlabRegularItalic;font-weight: 100;}
h2{font-size:4vw}
h3{font-size:2.1vw}
div .noGutter { padding:0; }
a{text-decoration: none !important;color: #F5A81C ;}
a:focus, a:hover {color: #969696;}
ul.mobileSelect a{color: inherit !important;}
.max800{max-width:800px;padding:20px;}

@media all and (min-width: 1200px) {h2{font-size:45px}h3{font-size:30px !important}h4{font-size:24px} }
@media all and (max-width: 1199px) {h2{font-size:3.6vw}h3{font-size:2.4vw !important}h4{font-size:2.1vw} }
@media all and (max-width: 768px) {h2{font-size:7vw}h3{font-size:5vw !important}h4{font-size:4vw} }

.container-fluid {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}

#hero,#down{
  display:block;
  margin:auto;

}
#down{
  width:10%;
  margin:auto;
  position: absolute;
  bottom:-50px;left:0;right:0;
  -webkit-animation-name: bounce;
  -moz-animation-name:    bounce;
  -o-animation-name:      bounce;
  animation-name:         bounce;
  -webkit-animation-duration: 4s;
  -moz-animation-duration:    4s;
  -o-animation-duration:      4s;
  animation-duration:         4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count:    infinite;
  -o-animation-iteration-count:      infinite;
  animation-iteration-count:         infinite;
}

@-webkit-keyframes bounce {
  0%       { bottom:-40px; }
  25%, 75% { bottom:-60px; }
  50%      { bottom:-40px; }
  100%     { bottom:-40px;}
}
@-moz-keyframes bounce {
  0%       { bottom:-40px; }
  25%, 75% { bottom:-60px; }
  50%      { bottom:-40px; }
  100%     { bottom:-40px;}
}
@-o-keyframes bounce {
  0%       { bottom:-40px; }
  25%, 75% { bottom:-60px; }
  50%      { bottom:-40px; }
  100%     { bottom:-40px;}
}
@keyframes bounce {
  0%       { bottom:-40px; }
  25%, 75% { bottom:-60px; }
  50%      { bottom:-40px; }
  100%     { bottom:-40px;}
}
#heroHolder{
  position: relative;
  min-width:250px;
  width:50%;
  max-width:400px;
  display:block;
  margin:0 auto;
}
#yBanner1{
  box-sizing: border-box;
  margin:0px auto;
  margin-top:400px;
  padding:50px 10px;
  background-color:#F5A81C;
  color:#fff;
  text-align:center;
  width:100%;
}
#gBanner1{
  box-sizing: border-box;
  margin:0px auto;
  /*margin-top:400px;*/
  padding:50px 10px;
  background-color:#505050;
  color:#F5A81C;
  text-align:center;
  width:100%;
}
.ninetyPercentWide{
  width:90% !important;
  max-width: 90% !important;
}
#hero span.aboutHero{
  position:relative;
  font-size:80px;
  color:#fff;
  text-align:center;
  width:90%;
  max-width:90%;
  line-height: 80px;
  padding:0;
  /*padding-left: 20px;*/
  /*border-bottom:1px solid #fff;*/
  /*text-decoration: underline;*/
  font-family: NexaSlabBookItalic;
}
#hero span.aboutHero:after{
  /* thanks! http://stackoverflow.com/a/34886536/3289734 */
  content:"  ";
  position:absolute;
  /*top: 75px;*/
  left:50%;
  bottom:0px;
  /*right:0;*/
  margin:auto;
  width:100%;
  background:#fff;
  height:1px;
  /*margin-left:-50%;*/


}

@media all and (min-width: 596px) {#hero span.aboutHero:after{margin-left:-50%;}}
@media all and (max-width: 595px) {#hero span.aboutHero:after{margin-left:-54%;} }


/*#hero .splitHeroSpanHeader{
  padding-bottom:10px;
}*/

@media all and (min-width: 798px) {#hero .splitHeroSpanHeader{padding-bottom:25px;}}
@media all and (max-width: 797px) {#hero .splitHeroSpanHeader{padding-bottom:10px;} }


#hero div.line{
  border-top:1px solid #fff;
}
#hero span{
  color:#fff;
  margin:0 auto;
  text-align:center;
  line-height:1.3em;
  font-family:NexaSlabRegularItalic;
  font-size:24px;
  padding:5px;
}
@media all and (min-width: 769px) {#hero span{font-size:24px;} #hero span.aboutHero{font-size:80px;}}
@media all and (max-width: 768px) {#hero span{font-size:20px;} #hero span.aboutHero{font-size:60px;} }

#wBanner2{
  box-sizing: border-box;
  margin:0 auto;
  padding:10px 20px 50px 20px;
  background-color:#fff;
  color:#555;
  text-align:center;
  width:100%;
}
.cBanner3{
  box-sizing: border-box;
  margin:0 auto;
  padding:25vh 20px 25vh 20px;
  color:#fff;
  text-align:center;
  width:100%;
}

#wBanner2 h2,.cBanner3 h2{
  color:#F5A81C;
  padding:35px 0px 15px 0px;
}
#wBanner2 h4{
  margin:0 auto;
  max-width:1190px;
  /*font-size:18px;*/
}
.cBanner3 h4{
  margin:0 auto;
  margin-bottom:100px;
  max-width:1190px;
  /*font-size:18px;*/
}
#wBanner2 #ourStrengths{
  margin:40px auto;
  display: block;
  max-width:1190px;
  text-align: left;
}
#wBanner2 #ourStrengths h3{
  text-indent: .5em;
  font-size:26px;
  color:#F5A81C;
  padding: 10px 0px;
}
#wBanner2 #ourStrengths h4{
  font-size:16px;
}
li{
  font-family:NexaSlab-Book;
  font-size:14px;
  line-height: 2em;
  list-style-image: url("../img/bullet.svg");
}
ul {
  list-style: none;
  padding:1em;
  margin:0;
}
.strengthCol1{
  box-sizing: border-box;
  display:inline-block;
  padding:10px;
  /*width:33%;*/
  min-width: 220px;
  vertical-align: top;
}
.strengthCol2{
  box-sizing: border-box;
  display:inline-block;
  padding:10px;
  /*width:49%;*/
  min-width: 220px;
  vertical-align: top;
}
.strengthSplit1,.strengthSplit2{vertical-align: top;display:inline-block;box-sizing: border-box;padding-left:2vw;}
.strengthSplit1{border-right: 1px solid rgba(0,0,0,0.5)}
@media all and (min-width: 769px) {.strengthSplit1{width:59%} .strengthSplit2{width:40%;}}
@media all and (max-width: 768px) {.strengthSplit1{width:100%} .strengthSplit2{width:100%;} }

.brightBtn{
  font-family:NexaSlabRegularItalic;
  font-size: 18px;
  font-weight: 100;
  color:#555;
  background-color:rgba(0, 0, 0, 0);;
  padding:15px;
  box-sizing: border-box;
  width:350px;
  max-width:80%;
  text-align: center;
  display:block;
  margin: 0 auto;
  border:1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor:pointer;
}
.brightBtn:hover{
  background-color:#F5A81C;
  border:1px solid #F5A81C;
  color:#fff;
}
.clearBtn{
  font-family:NexaSlabRegularItalic;
  font-size: 18px;
  font-weight: 100;
  color:#fff;
  background-color:rgba(0, 0, 0, 0);;
  padding:15px;
  box-sizing: border-box;
  width:350px;
  max-width:80%;
  text-align: center;
  display:block;
  margin: 0 auto;
  border:1px solid rgba(255,255,255,1);
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor:pointer;
}
.clearBtn:hover{
  background-color:#F5A81C;
  border:1px solid #F5A81C;
}
.darkBtn{
  font-family:NexaSlabRegularItalic;
  font-size: 18px;
  font-weight: 100;
  color:rgba(0,0,0,0.3);
  background-color:rgba(0, 0, 0, 0);;
  padding:15px;
  box-sizing: border-box;
  width:350px;
  max-width:80%;
  text-align: center;
  display:block;
  margin: 0 auto;
  border:1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor:pointer;
}
.darkBtn:hover{
  color:rgba(255,255,255,1);
  background-color:#F5A81C;
  border:1px solid #F5A81C;
}
#closer{
  padding:20vh 20px 20vh 20px;
  background-image: url(../img/closer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
#closer h4{
  /*font-size:22px;*/
  margin-bottom: 30px;
}
#footer{
  background-color:#555;
  color:#fff;
  width:100%;
  padding:20px;
  height:auto;
  text-align:center;
  margin:0 auto;
  font-family:NexaSlab-Regular;
}
#footer h4{
  /*font-size:20px;*/
  font-family:NexaSlabRegularItalic;
  color:#F5A71C;
  transition:color 0.2s ease-in-out;
}
#footer h4:hover{
  color:#FFF;
}
#footer h5{
  font-size:18px;
  padding:5px;
  font-family:NexaSlabRegularItalic;
}
h4{
  line-height: 1.3em;
}

.pringle{
  box-sizing: border-box;
  width:100%;
  padding:0;
  margin:0;
  overflow: hidden;
  background-color:#F5A71C;

}
.pringle .pringleContainer{
  position:relative;
  /*height:160px;
  width:160px;*/
}
.pringle .pringleImageContainer{
  margin:0;
  padding:0;
  background-color:#F5A71C;
  box-sizing: border-box;
  float:left;
  /*width:100px;
  height:100px;*/
  opacity:1;
  cursor:pointer;
}
.pringle .pringleCover{
  position:absolute;

}
.pringle .pringleImage{
  position:absolute;
  transition: opacity 0.1s ease-in-out;
}
.pringle .pringleImageContainer:hover .pringleImage{
  opacity:0.7;
}




/* hamburger mobile menu icon stuff http://codepen.io/kretzm/pen/guwEf */
.header__menu {
/*position: relative;
top: 40px;
right: 20%;*/
height: 38px;
width: 45px;
padding: 5px;
}

.hamburger {
display: block;
position: absolute;
width: 30px;
height: 40px;
z-index: 2;
}

.hamburger__inner {
display: block;
width: 35px;
height: 4px;
margin-top: 12px;
background: #F5A71C;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hamburger__inner::before, .hamburger__inner::after {
display: block;
position: absolute;
content: "";
z-index: -1;
width: 35px;
height: 4px;
background: #F5A71C;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hamburger__inner::before {
top: 0;
}
.hamburger__inner::after {
top: 24px;
}

.hamburger--open .hamburger__inner {
background: none;
}
.hamburger--open .hamburger__inner::before, .hamburger--open .hamburger__inner::after {
top: 12px;
}
.hamburger--open .hamburger__inner::before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger--open .hamburger__inner::after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nostyle{
  transition: color 0.2s ease-in-out;
}
.nostyle,.nostyle:link,.nostyle:visited,.nostyle:active{
text-decoration: none;
color:inherit;
}
.nostyle:hover{
  color:#F5A71C;
}
.nexaSlab-Book{font-family:NexaSlab-Book !important;}

.subPageMobileTitleBar{
width:100%;
background-color:#fff;
height:70px;
position:fixed;
border-bottom: 2px #F5A71C solid;
z-index:999999;
}
.subPageTitleText{
	font-size:20px;
	padding:21px;
	color: #f5a81c;
	text-align: center;
}
.subPageMobileTitleBar .spinLogo{
width: 60px;
position: absolute;
left: 10px;
top: 5px;
}

#about .parallax {
	height: 400px;
}
#about .parallax {
	background-repeat: no-repeat;
}
#about .parallax.cover {
	background-size: cover;
}
#about .description {
	background: #383838;
	color: white;
	text-align: center;
	padding: 50px;
}
#about .description img {
	width: 90px;
}
#about .description h3 {
	font-size: 20px;
	color: #f5a81c;
	margin: 25px 0;
}
#about .description p {
	text-align: left;
}
#storytellers {
	text-align: left !important;
	padding: 35px;
}
@media only screen and (min-width : 768px) {
	#about .parallax, #about .description {
		height: 400px;
	}
	#storytellers {
		text-align: center;
		padding: 0;
	}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#about .parallax, #about .description {
		height: 380px;
	}
}

@media all and (min-width: 769px) {.subPageMobileTitleBar{display:none;}}
@media all and (max-width: 768px) {.subPageMobileTitleBar{display:block;}}

.photoFullWidth{
width:100%;
}

/* ABOUT SECTION SPECIFIC STUFF*/
.aboutUnevenSplit{
  display: block;
  font-size: 0;
  position:relative;
  padding:0;
  margin:0;
  background-color:#fff;
  box-sizing: border-box;
  width:100%;
  height: 600px;
  overflow: hidden;
}
.leftSplit{
  width:40%;
  min-height:600px;
  display:inline-block;
  background-color:#fff;
  margin:0;
  padding:200px 100px;
}
.rightSplit{
  font-size:17px;
  width:60%;
  display:inline-block;
  color:#fff;
  margin:0;
  padding:0;
  min-height:600px;
  overflow:hidden;
  position:absolute;
  right:0;
  top:0;
  box-sizing: border-box;
  padding:0px 100px;
}
.partialLogo{
  padding:50px;
  float:right;
  width:200px;
  margin: 0 auto;
  display: block;
}
@media all and (min-width: 769px) {.rightSplit{width:60%;position:absolute;} .leftSplit{width:40%;} .aboutUnevenSplit{height:600px}}
@media all and (max-width: 768px) {.rightSplit,.leftSplit{width:100%;position:relative;min-height:auto;padding:20px 20px;} .partialLogo{float:none;padding:20px;} .aboutUnevenSplit{height:auto;}}
.rightSplit.frame{background-repeat: no-repeat;background-size:200%;background-position: top;background-image: url('../img/ABOUTframe.jpg');}
.rightSplit.coffee{background-repeat: no-repeat;background-size:200%;background-position: center;background-image: url('../img/ABOUTcoffee.jpg');}
.rightSplit.hands{background-repeat: no-repeat;background-size:200%;background-position: center;background-image: url('../img/ABOUThands.jpg');}
.lydiaMobileContainer{position:relative;background-repeat: no-repeat;background-size:cover;background-position: right bottom;background-image: url('../img/ABOUTbeach.jpg');}
.founderDesktop{position:relative;margin-top: 200px;background-repeat: no-repeat;background-size:cover;background-position: right bottom;background-image: url('../img/ABOUTbeach.jpg');}
.aboutFirstLast1{background-repeat: no-repeat;background-size:cover;background-position: center;background-image: url('../img/ABOUThands.jpg');}
.aboutFirstLast2{background-repeat: no-repeat;background-size:cover;background-position: center;background-image: url('../img/ABOUTcoffee.jpg');}
.aboutFirstLast3{background-repeat: no-repeat;background-size:cover;background-position: center;background-image: url('../img/ABOUTframe.jpg');}
.aboutPartner{
  position:relative;
  height:600px;
  width:100%;
}
.partnerPicHolder{
  height:600px;
  position:relative;
  width:35%;
  display:inline-block;
}
.partnerPicHolder .partnerPic{
  width:250px;
  position:absolute;
  right:0;
  top:175px;
}
.aboutPartner .partnerDescriptionHolder{
  display:inline-bock;
  width:60%;
  position:absolute;
  top:0;right:0;
  height:600px;
}
.partnerDescriptionHolder .partnerDescr{
  /*display: flex;
  align-self: center;*/
  padding-top:200px;
}

.partnerDescriptionHolder .partnerDescr h3{
  text-align:left;
  color:#F5A71C;
  padding: 0px 0px 30px 0px;
}
.partnerDescriptionHolder .partnerDescr p.partnerBio{
  color:#fff;
  font-size:14px;
  font-family:NexaBook;
  width:800px;
  max-width:90%;
  line-height:1.5em;
  padding:0px;
  margin:0;
  text-align: left;
}
.rightSplit p,.rightSplit h3{position:relative;z-index:1;}
.rightSplit h3{padding:0px 0px 30px 0px;}
.rightSplit p{
  line-height: 1.5em;
  font-size:14px;
  font-family:NexaSlab-Book;
  max-width:800px;
}
.rightSplitDarkener{
  background-color:#000;
  opacity:0.7;
  position:absolute;
  top:0;bottom:0;
  left:0;right:0;
  width:100%;
  margin:auto;
  z-index:0;
}
.rightSplit .aboutTitleText{
  color:#F5A71C;

}

.SolidYellowLineDivider{
  min-height:20px;
  background-color: #F5A71C;
  width:100%;
}
.SolidGreyLineDivider{
  min-height:20px;
  background-color: #969696;
  width:100%;
}
.whiteBackground{
  min-height:10px;
  background-color: #fff;
  width:100%;
}
.centerTitleText{
  text-align:center;
  color:#F5A71C;
  padding: 80px 0px 30px 0px;
}
.centerParaText{
  text-align:center;
  olor:#494949;
  width:90%;
  max-width:1200px;
  margin:0 auto;
  font-size:14px;
}
.aboutPageContents h3{
  /*font-size:36px !important;*/
}
.underLydiaPic{
  padding-top:200px;
}
h4.AboutSubHeadline{
  text-align:center;
  font-size:12px;
  margin:0 auto;
  color:#fff;
  margin-top:-20px;
}
.founderDesktop .centerParaText{
  color:#fff;
  font-size:14px;
  font-family:NexaSlab-Book;;
  width:90%;
  max-width:1000px;
  line-height:1.5em;
  padding:100px 0 500px 0;
  text-align: left;
}
.lydiaCenterCircle{
  position:absolute;
  width:250px;
  top:-125px;
  left:0;right:0;
  margin:0 auto;
}

.whiteBtn{
  font-family:NexaSlabRegularItalic;
  font-size: 18px;
  font-weight: 100;
  color:rgba(0,0,0,0.5);
  background-color:rgba(0, 0, 0, 0);;
  padding:15px;
  box-sizing: border-box;
  width:350px;
  max-width:80%;
  text-align: center;
  display:block;
  margin: 0 auto;
  border:1px solid rgba(0,0,0,0.5);
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor:pointer;
}
.whiteBtn:hover{
  background-color:#F5A81C;
  border:1px solid #F5A81C;
  color:rgba(255,255,255,1);
}

.inlineBtns{
  display:inline-block;
  margin:100px 50px;
  text-align: center
}
@media all and (min-width: 909px) {.inlineBtns{margin:100px 50px;}}
@media all and (max-width: 908px) {.inlineBtns{margin:20px 50px;}}
@media all and (max-width: 708px) {.inlineBtns{margin:20px auto;}}

.yellow{color:#F5A81C !important;}
.white{color:#FFF !important;}
.grey{color:#555 !important;}

.mobileAboutDetailsSection img{
  width:90%;
  max-width:120px;
  padding:50px 0px 10px 0px;
}
.mobileAboutDetailsSection h3{
  padding:10px;
}
.mobileAboutDetailsSection p{
  font-family:NexaBold;
  padding:10px;
}
.mobileStoryTellers{
  padding:50px 20px;
}
.mobileStoryTellers h3{
  font-size:36px !important;
  padding-bottom:20px;
}
.lydiaMobileContainer img{
  padding:50px;
  margin:0 auto;
  width:300px;
  max-width:90%;
}
.lydiaMobileContainer h3{
  color:#fff;
  font-size:30px !important;

}
.lydiaMobileContainer h4{
  color:#fff;
  font-size:12px !important;
}
.lydiaMobileContainer p{
  text-align:left;
  padding:20px;
  padding-bottom:300px;
  font-family:NexaBold;
  color:#fff;
  font-size:12px !important;
}

.portfolio-responsive h3 {
	margin: 50px 0 30px 0;
	text-align: center;
}
.portfolio-responsive img {
	margin: 0 auto;
}
.portfolio-logos img {
	margin: 30px 15px;
}
@media only screen and (min-width : 768px) {
.portfolio-logos img {
	margin: 0 15px;
}
.portfolio-logos-vertical-margin img {
	margin-top: 40px;
	margin-bottom: 40px;
}
.responsive-container {
    position: relative;
}
.responsive-container .dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}
.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.img-container img {
    vertical-align: middle;
    display: inline-block;
}
}