@charset "UTF-8";
/* CSS Document */


/*Typography styles*/
/*
font-family: 'Libre Baskerville', serif;
font-family: 'Abril Fatface', cursive;
font-family: 'Alice', serif;
font-family: 'Berkshire Swash', cursive;

font-family: 'Martel', serif;
font-family: 'Poiret One', cursive;
font-family: 'Nixie One', cursive;
font-family: 'Lato', sans-serif;

*/
a:link, a:visited {
	color:darkorange;
	text-decoration:none;
}
a:hover {
    color:orange;
}
p  {
	color:white;
    font-family: 'Lato', sans-serif;
	line-height:1.5em;
	font-size:.9em;
}
h1 {
	width:95%;
    font-family: 'Alice', serif;
	color:white;
	line-height:2em;
	font-size:1.5em;
}
h2, blockquote {
	width:100%;
    font-family: 'Alice', serif;
	color:white;
	line-height:2em;
	font-size:1em;
}
blockquote:first-letter {
	font-size:4.5em;
    font-weight:bold;
	float:left;
	line-height:.85em!important;
	padding-right:.1em;
    font-family: 'Alice', serif;
	color:darkorange;
}
h1.title {
	color:white;
    font-family: 'Poiret One', serif;
	line-height:1.5em;
	font-weight:300;
	
	text-align:center;
	font-size:4em;
	position:absolute;
	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
	transform:translateX(-50%) translateY(-70%);
	-webkit-transform:translateX(-50%) translateY(-70%);
	-moz-transform:translateX(-50%) translateY(-70%);
}
h2.center, h1.center {
	position:absolute;
	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
	transform:translateX(-50%) translateY(-50%);
	-webkit-transform:translateX(-50%) translateY(-50%);
	-moz-transform:translateX(-50%) translateY(-50%);
	
	text-align:center;
}
h2.icon-header {
	text-align:center;
}


/*Layout styles*/
html, body, main {
	height:100%;
	font-smoothing:antialiased;
	-webkit-font-smoothing:antialiased;
}
.hero-page {
    height:100%;
}
.underlay {
	height:200px;
	width:200px;
	border-radius:50%;
	background-color:darkorange;
	opacity:.7;
	position:absolute;
	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.scroll-bkg {
	background-attachment:scroll;
	position:relative;/*need positioning if you're giving children (h1, p, divs) positioning as well*/
	height:100%;
	width:100%;
	/*background-color:seagreen;*/
	box-shadow:0px 0px 25px #111;
	z-index:2;
}
.fixed-bkg {
	background-attachment:fixed;
    position:relative;/*need positioning if you're giving children (h1, p, divs) positioning as well*/
	height:100%;
}
.extended-bkg {
    height:120%;
}
.whole-grid-long {
    width:100%;
	height:1500px;	
}
.whole-grid-short {
    width:100%;
	height:175%;	
}
.quarter-grid {
	width:100%;
	height:25.1%;
	float:left;
	position:relative;
}
.half-grid {
	height:50%; 
	width:100%;
	position:relative;
}
.content-whole-grid {
	position:absolute;
	width:90%;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
}
.content-half-grid {
	position:absolute;
	width:90%;
	max-width:480px;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
}
.content-quarter-grid {
	position:absolute;
	width:90%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
}
.push-down {top:80px;}
.col-3 {
    float:left;
	width:100%;
	padding:3% 2% 1% 2%;
	box-sizing:border-box;
}
img.icon {
	width:200px;
	margin:5px  auto 10px auto;
	display:block!important;
	box-shadow:2px 2px 6px #111;
	border-radius:50%;
}	
.quarter-grid img {
	width:80%;
	display:block;
	border-radius:.3em;
	padding:3px;
	border:solid white 1px;
	margin:0 auto;
}
/* BACKGROUNDS --------------BACKGROUNDS-----------------BACKGROUNDS-----------------BACKGROUNDS------------------*/
.bkg-1 {
	background-image:url(LiquidLab-images/mega-tile-v6-dkgr5.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-size:80px;
}
.bkg-2 {
	background-image:url(LiquidLab-images/rukenfigur-phone.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}
.bkg-3 {
	background-image:url(LiquidLab-images/southwest-pattern-11.jpg);
	background-repeat:repeat;
	background-size:300px;
}
.bkg-4 {
	background-image:url(LiquidLab-images/mega-tile-v3-07.jpg);
	background-repeat:repeat;
	background-size:128px;
}
.bkg-5 {
	background-image:url(LiquidLab-images/tile-4-medium-dkbr.jpg);
	background-repeat:repeat;

}
.bkg-6 {
	background-image:url(LiquidLab-images/tile-8-br-md.png);
	background-repeat:repeat;
}
.bkg-7 {
	background-image:url(LiquidLab-images/sonja-langford.jpg);
	background-repeat:no-repeat;
	background-size:cover;	
}
.bkg-8 {
	background-image:url(LiquidLab-images/southwest-pattern-10.jpg);
	background-repeat:repeat;
	background-size:256px;
	/*height:100%;
	width:100%;*/
}
.bkg-9 {
	background-image:url(LiquidLab-images/maja-petric-phone.jpg);
    background-repeat:no-repeat;
	background-size:cover;		
}
.bkg-10 {
    background-image:url(LiquidLab-images/tile-9-grpaper-v2-sm.png);
    background-repeat:repeat;
}
.bkg-11 {
	background-image:url(LiquidLab-images/todd-quackenbush-phone.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
.bkg-12 {
	background-image:url(LiquidLab-images/apples-phone.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:scroll;
}
.bkg-13 {
	background-image:url(LiquidLab-images/mega-tile-v3-04.jpg);
	background-attachment:scroll;
	background-size:320px;
	
}
.bkg-14 {
	background-image:url(LiquidLab-images/farmer-540658_1280-v2-phone.jpg);
	background-repeat:no-repeat;
	background-size:cover;	
}
.bkg-15 {
	background-image:url(LiquidLab-images/tile-9-br-v3-sm.png);
	background-repeat:repeat;
	background-size:40px;

}
.bkg-16 {
	display:none;
}
.bkg-17 {
	background-image:url(LiquidLab-images/southwest-pattern-10.jpg);
	background-repeat:repeat;
	background-size:400px;
	/*height:100%;
	width:100%;*/
}
.bkg-18 {
	background-image:url(LiquidLab-images/southwest-pattern-11.jpg);
	background-repeat:repeat;
	background-size:128px;
}
.bkg-19 {
    background-image:url(LiquidLab-images/inca-3.jpg);
	background-repeat:repeat;
	background-size:128px;
}
.bkg-20 {
	display:none;
}
/*END BACKGROUNDS ----------- END BACKGROUNDS-------------END BACKGROUNDS------------END BACKGROUNDS--------------*/
/*UI/UX Elements styles*/
/* New Collapsing Navigation appropriated from CodyHouse*/
 .nav-trigger {
  display: block;
  z-index: 4;
  position: fixed;
  top: 30px;/*orig bottom:30px*/
  right: 10px;/*orig right 5%*/
  height: 44px;
  width: 44px;
  border-radius: 0.25em;
  background: rgba(255, 255, 255, 0.9);
}
 .nav-trigger span {
  position: absolute;
  height: 4px;/*orig 4px*/
  width: 4px;
  background-color:darkorange /*#3e3947*/;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
 .nav-trigger span::before,  .nav-trigger span::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: inherit;
  border-radius: inherit;
}
 .nav-trigger span::before {
  top: -9px;
  left:0px;/*absurdly, necc for 3 dots/spans to show up in moz - not necc for webkit*/
}
 .nav-trigger span::after {
  bottom: -9px;
  left:0px;/*absurdly, necc for 3 dots/spans to show up in moz - not necc for webkit*/
}

 #collapsing-nav {
  position: fixed;
  z-index: 4;
  right: 10px;/*orig right:5%*/
  top: 30px;/*orig bottom:30px*/
  width: 90%;
  max-width: 400px;
  max-height: 70%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 0.3em;/*orig .25*/
  background-color: rgba(255, 255, 255, 0.96);
}
 #collapsing-nav a {
  display: block;
  padding: 1em;
  border-bottom: 1px solid rgba(62, 57, 71, 0.1);
  text-decoration:none;
  text-align:center;
  color:orange;
}
 #collapsing-nav a span:first-child {
  display: none;
}
 #collapsing-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
 #collapsing-nav.open + .nav-trigger {
  background-color: transparent;
}
 #collapsing-nav.open + .nav-trigger span {
  background-color: rgba(62, 57, 71, 0);
}
 #collapsing-nav.open + .nav-trigger span::before,  #collapsing-nav.open + .nav-trigger span::after {
  background-color: darkorange;
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px;
}
 #collapsing-nav.open + .nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px;
}
 #collapsing-nav.open + .nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0;
}
.img-replace {
  /* replace text with a background-image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
/*end collapsing nav styles*/
.more-link {
	background-image:url(LiquidLab-images/right-arrow.png);
    background-size:contain;
	background-repeat:no-repeat;
	width:65px;
	height:35px;
	float:right;
	-webkit-transition:all .1s ease-in-out;
	transition:all .1s ease-in-out;
	padding:5px;
	margin-right:5px;
}
.more-link:hover {
	background-image:url(LiquidLab-images/right-arrow-hover.png)
}
/*for lg-phones and mid-size phones --------------------------------------------------------------------------------*/
@media only screen and (min-width:401px){
/*Typography styles*/	
h2, blockquote {
	width:100%;
    font-family: 'Alice', serif;
	color:white;
	line-height:2em;
	font-size:1.2em;
}
blockquote:first-letter {
	font-size:4.7em;
    font-weight:bold;
	float:left;
	line-height:.85em!important;
	padding-right:.1em;
    font-family: 'Alice', serif;
	color:darkorange;
}
/*Layout styles*/
.scroll-bkg {
	height:600px;
}
.fixed-bkg {
    height:600px;
}
.whole-grid-short {
	height:1250px;
}
.whole-grid-long {
    width:100%;
	height:1800px;	
}
img.icon {
	width:200px;
	margin-top:20px;
}
img.smaller {
    width:250px;	
}
}
/*for tablets and largest phones -------------------------------------------------------------------------------------*/
@media only screen and (min-width: 568px) {
/*Typography styles*/	
h1 {
	font-size:1.8em;
}
/*Layout styles*/
img.icon {
	width:220px;
}
.quarter-grid img {
	width:400px;
}
.scroll-bkg {
	height:750px;
}
.fixed-bkg {
	/*height:100%;
	width:100%;*/
}
.half-grid {
	height:50%; 
	width:100%;
	position:relative;
}
.whole-grid-short {
	height:1800px;
}
.whole-grid-long {
	height:1850px;	
}
.bkg-2 {
	background-image:url(LiquidLab-images/rukenfigur.jpg);
}
}
/*for laptops and bigger ------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 961px) {
/*Typography styles*/
p  {
	font-size:1em;
}
h2 {
	font-size:1.5em;
}

p.link-desc {
	text-align:right;
}
.drop-cap {font-size:3.3em;
	line-height:.85em!important;
}
.blockquote-initials {
    text-align:right;	
}
/*Layout styles*/
.underlay {
	height:400px;
	width:400px;
}
img.icon {
	width:75%;
}
.quarter-grid img {
	width:80%;
	max-width:500px;/*I don't think I need this, since content-whole has a max width --- double check!!!!!!!!!!!!!!!!*/
}
img.smaller {
    width:45%;	
}

.fixed-bkg {
	height:100%;
	width:100%;
}
.scroll-bkg {
	height:100%;
}
.quarter-grid {
	width:50%;
	height:50%;
	float:left;
	position:relative;
}
.half-grid {
	height:100%; width:50%;float:right;position:relative;
}
.content-quarter-grid {
	position:absolute;
	width:85%;
	max-width:480px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	top:50%;
	bottom:auto;
	left:50%;
	right:auto;
}
.content-whole-grid {
	width:85%;
	max-width:980px;
}
.content-half-grid {
	width:85%;
}
.col-3 {
    float:left;
	width:33.3%;
	padding:3% 2% 1% 2%;
	box-sizing:border-box;
}
.row:after {
	display:block!important;
	clear:both;
	content:".";
}
.bkg-2 {
	background-image:url(LiquidLab-images/rukenfigur.jpg);
}
.bkg-9 {
	background-image:url(LiquidLab-images/maja-petric.jpg);	
}
.bkg-11 {
	background-image:url(LiquidLab-images/todd-quackenbush.jpg);
}
.bkg-12 {
	background-image:url(LiquidLab-images/apples.jpg);
}
.bkg-14 {
	background-image:url(LiquidLab-images/farmer-540658_1280-v2.jpg);
}
.bkg-16 {
	background-image:url(LiquidLab-images/rukenfigur-pattern-4.png);
	background-repeat:no-repeat;
	background-size:cover;	
	opacity:.2;
	display:block;
}
.bkg-20 {
	background-image:url(LiquidLab-images/mega-tile-v3-03.png);
	background-repeat:repeat;
	background-attachment:scroll;
	background-size:80px;
	opacity:.2;
	display:block;
}
/*UI/UX Elements styles*/
.pg-down {
	width:32px;
	height:45px;
	background-image:url(LiquidLab-images/page-arrow-down.svg);
	background-size:cover;
	position:fixed;
	top:50%;
	right:5px;
	z-index:5;
	margin:4px;
	transition:all .1s ease-in-out;
	-webkit-transition:all .1s ease-in-out;
	-moz-transition:all .1s ease-in-out;
}
.pg-down:hover {
	background-image:url(LiquidLab-images/page-arrow-down.svg);
	top:50.5%;
}
.pg-up {
	width:32px;
	height:45px;
	background-image:url(LiquidLab-images/page-arrow-down.svg);
	background-size:cover;position:fixed;
	bottom:50%;
	right:5px;
	z-index:5;
	margin:4px;
	transition:all .1s ease-in-out;
	-webkit-transition:all .1s ease-in-out;
	-moz-transition:all .1s ease-in-out;
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-mx-transform:rotate(180deg);
} 
.pg-up:hover {
	background-image:url(LiquidLab-images/page-arrow-down.svg);
	bottom:50.5%;
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-mx-transform:rotate(180deg);
}
.invisible-pMarker {
	width:50px;
	height:50px;
	background-color:transparent;
	position:absolute;
	top:-20px;
}
}
@media only screen and (min-width: 1281px) {
h1 {
	font-size:2em;
}
}