/*transition: transform .7s cubic-bezier(.825,0,.5,1);*/

/* BODY
-------------------------------------------------------------------------------*/
html {
	background-color: #FFF;
	font: 11px 'lato',sans-serif;
	text-rendering: optimizeLegibility;	
	font-weight: 400;
	color: #FFF;
	-moz-user-select: none;
	-webkit-user-select: none;	
}
html,body,#wrapper { 
	min-height: 100%; 
}
#wrapper{
	margin: 0 0 80px 0;
}
body,section,header,header>nav,footer,footer>nav,site>nav { 
	width: 100%; 
}
::-webkit-scrollbar { width: 0 !important }



/* HERO THUMB GALLERY
-------------------------------------------------------------------------------*/
section#heroThumbs{
	z-index: 99;
	color: black;
	font-size: 50px;
	display: none;
}
#heroThumbs>div{
	height: 100%;
	width: 100%;
	padding: 6%;	
}
#heroThumbs>div a{
	background-color: rgba(0,0,0,0.25);
	position: relative;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 25%;
	height: 33.3333333333%;
	outline: 10px solid #FFF;
	overflow: hidden;
	float: left;	
}

/* HeroThumbs Gallery Nav */
#menu-action-overlay{
	right: 10px;
	top: 10px;
	height: 30px;		
	position: absolute;
	display: inline-block;
	vertical-align: top;
}
#menu-action-overlay a{
  	width: 26px;
  	float: right;
	margin-left: 5px;  	
}

/* HEADER
-------------------------------------------------------------------------------*/
a		{ opacity: 0.75;}
a:hover { opacity: 1.0}
nav a,
nav a:hover { transition: all .3s ease }

header {
	height: 75px;
	z-index: 90;
	opacity: 1;
}
header>nav {
	height: 48px;
	background: rgba(255, 255, 255, 0);
	position: absolute;
}
header>nav ul {
	top: 10px;
	height: 30px;		
	position: absolute;
	display: inline-block;
	vertical-align: top;
}
header>nav a, #heroThumbs>nav a{
	height: 24px;
	text-transform: uppercase;
	display: inline-block;
	vertical-align: top;
	letter-spacing: 1px;
	padding: 8px 6px 24px 6px;
	color: #FFF;
}
header>nav a#logoTxt {
	background-image: url(/assets/icons/logo_thesurfsocial_nav_light.svg);
	background-position-y: 7px;
	background-size: 100%;
	margin-right: 5px;
	width: 110px;
	opacity: 1;
}
header>nav i, #heroThumbs>nav i, #menu-action-overlay i {
	display: inline-block; 
	height: 14px;
	width: 14px;
}
header>nav i:before{
	position: absolute;
	background: #FFF;
}
header>nav ul:nth-of-type(1) { 
	left: 50px; 
	min-width: 450px;
}
header>nav ul:nth-of-type(2) { 
	right: 10px; 
}

/* When Scrolling Past the first slide we display an inversed menuBar with white Overlay */
header>nav.butterBar{
	background: rgba(255, 255, 255, 0.9);
	/* box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.15); */	
}
header>nav.butterBar a{
	color: #000;
}
header>nav.butterBar ul a i#icon-siteMap:before{
	background: #000;
	box-shadow: 0 5.5px 0 0 #000, 0 11px 0 0 #000;	
}
header>nav.butterBar a#logoTxt {
	background-image: url(/assets/icons/logo_thesurfsocial_nav_dark.svg);
}
.butterBar{
/* 	transition: all 0.3s ease-out;	 */
}

/* FOOTER
-------------------------------------------------------------------------------*/
footer {
	height: 80px;
	position: fixed;
	bottom: 0;
	z-index: -1;
	box-shadow: inset 0px 34px 34px -28px rgba(0,0,0,0.1);
}
footer>nav {
	height: 100%;
	position: absolute;
	padding: 0 20px;	
}
footer>nav ul {
	top: 25px;
	height: 30px;	
	min-width: 200px;		
	position: relative;
	display: inline-block;
	vertical-align: top;
}
footer>nav a {
	color: #000;
	height: 24px;
	display: inline-block;
	vertical-align: top;
	letter-spacing: 1px;
	padding: 4px 4px 24px 4px;
	line-height: 20px;	
	opacity: 0.35;
	transition: all .3s ease;	
}
footer>nav i{
	height: 24px;
	width: 24px;
}
.social-bar{	font-size: 22px;}
.subscribe-bar{	font-size: 12px;}


/* SITEMAP TO CLEAN UP AND MAKE MODULAR.
-------------------------------------------------------------------------------*/
#siteMap {
	z-index: 99;
	color: #000;
	background: #FFF;
	display: none;
}
#nav-wrap {
  width: 900px;
  height: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
nav#pageDirectory {
	width: 100%;
	height: 400px;
}
nav#action-bar {
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #AAA;
}
nav#pageDirectory {
	width: 100%;
	height: 400px;
}
#pageDirectory ul {
	display: inline-block;
	float: left;
	padding-top: 40px;
}
nav#action-bar ul {
  top: 10px;
  height: 30px;
  min-width: 200px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
#pageDirectory ul:not(:first-child) {
	padding-left: 6.5%;
}
#pageDirectory ul a {
	display: block;
	line-height: 1.5em;
	letter-spacing: 0.08em;  
}
#partners{
	width: 100%;
	height: 50px;
	background: rgba(173, 173, 173, 0.1);
}
#pageDirectory ul a:nth-of-type(1){
  	text-transform: uppercase;
  	padding-bottom: 10px;
  	font-weight: bold; 
}
#action-bar a {
  color: #000;
  height: 24px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: 1px;
  padding: 4px 4px 24px 4px;
  line-height: 20px;
  opacity: 0.35;
  transition: all .3s ease;
}
#action-bar a:hover{
	opacity: 1;
}
#action-bar i {
  height: 24px;
  width: 24px;
}









#seekShelter {
  z-index: 99;
  color: #000;
  font-size: 50px;
  display: none;
}

/* UTILITY CLASSES 
-------------------------------------------------------------------------------*/

.fRight		{float: right}
.fLeft		{float: left}
.fixed {
	position: fixed;
	top: 0;
	left: 0;
}
.fill {
	width: 100%;
	height: 100%;
}
.center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.wrap {
	overflow: hidden;
	margin: 0;
}
.txtCenter {
	display: inline-block;
	position: relative;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	text-transform: uppercase;
}
/*
.middle {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}
*/

/* COLORS 
-------------------------------------------------------------------------------*/

.txtLight 	{ color: #FFF; }
.txtDark 	{ color: #000; }
.bgLight 	{ background-color: rgba(255,255,255,.85); }
.bgWhite	{ background-color: #FFF; }
.bgDark		{ background-color: #000; }


.greyA { background-color: #AAA; }
.greyB { background-color: #BBB; }
.greyC { background-color: #C3C3C3; }
.greyD { background-color: #DDD; }
.greyE { background-color: #EEE; }



















/* Placeholder Content - Cleanup
-------------------------------------------------------------------------------*/

/*
section#mission {
	margin-bottom: 80px;
}
*/
span.test {
	font-size: 50px !important;
}
#missionCopyBox {
	width: 67%;
	max-width: 676px;
	height: 175px;
	margin-top: -4%;
	-webkit-font-smoothing: antialiased;
}
.slideHeader {
	color: black;
	font-size: 18px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 40px;
	letter-spacing: 2px;
}
.slideBodyCopy {
	color: #989898;
	font-size: 14px;
	line-height: 20px;
	text-align: justify;
}
.placehold {
	height: 100vh;
}
#inspiration {
	background-color: #FFF;
}
#explore {
	background-color: #969696;
	height: 100vh;
}
#mission {
	background-color: #F9F9F9;
	position: relative;
	height: 100vh;
}
#logo {
	top: 10px;
	left: 10px;
	width: 32px;
	height: 52px;
	background-image: url(/assets/icons/logo_thesurfsocial.svg);
	background-size: contain;
	position: fixed;
	display: inline-block;
	opacity: 1;
	z-index: 999;
}







/* BUTTONS 
-------------------------------------------------------------------------------*/

.grey {
	background: #DFDFDF;
}

.viewMoreBttn {
	background: #DFDFDF;
	transition: all 0.3s ease-out;
}

.viewMoreBttn:hover {
	background: #000;
}
.viewMoreBttn {
	height: 40px;
	width: 100%;
	display: inline-block;
}

.viewMoreBttn span {
	text-align: center;
	font-size: 12px;
}


/* FULLSCREEN GALLERY
-------------------------------------------------------------------------------*/


.vignette {
	background-image: url(/images/vignette1.png);
	background-size: 100% 100%;
	position: absolute;	
	z-index: 9;
	opacity: 1;
	pointer-events: none;
}

.iconInfo {
	width: 20px;
	height: 20px;
	line-height: 23px;
	font-size: 15px;
	font-family: serif;
	color: black;
	background-color: rgba(255,255,255,0.7);
	border-radius: 100%;
	text-align: center;
	margin: 15px;
	cursor: hand !important;
	pointer-events: all;
	position: absolute;
	bottom: 0;
	z-index: 98;
}

.iconInfo:hover {
	background-color: #FFF;
}

.moreImages {
	display: none;
}

.fsBoxOverlay {
	position: absolute;
	width: 27%;
	min-width: 340px;
	max-width: 430px;
	left: 6%;
	height: 100%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.8);
	z-index: 99;
	display: none;
}

.fsInfoBox {
	position: absolute;
	width: 75%;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, -20px);
}

.fsInfoBox a {
	display: block;
	opacity: 1 !important;
}


/* THUMB GALLERY 
-------------------------------------------------------------------------------*/

.box {
	float: left;
	position: relative;
	width: 20%;
	padding-bottom: 20%;
	background-position: center center;
	background-size: cover;
	transition: all 0.3s ease-out;
}

.boxOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
/* 	overflow: hidden; */
	background: rgba(255,255,255, 0.9);
	transition: all 0.5s ease-out;
	opacity: 0;
}

.boxOverlay:hover {
	opacity: 1;
}

body.no-touch .boxOverlay:hover, body.touch .boxOverlay.touchFocus {
	background: rgba(255,255,255, 0.9);
}

.infoBox {
	display: table;
	width: 75%;
	height: 75%;
/* 		border: #f2f2f2 solid 1px; */
}

.infoBox a {
	display: block;
}

.infoBoxCopy {
  /*background: rgba(0,255,255, 0.2);*/
	display: table-cell;
	vertical-align: middle;
}

.boxCategory {
	font-size: 11px;
	color: #808080;
	position: relative;
	top: 0;
	text-transform: uppercase;
	height: 14px;
	padding-bottom: 5%;
}

.boxTitle {
	font-size: 17px;
	color: #333;
	text-transform: uppercase;
	line-height: 18px;
	padding-bottom: 1%;
}

.boxDescription {
	font-size: 11px;
	color: #666;
	width: 100%;
	line-height: 14px;
	padding-bottom: 10%;
}

.boxLocation {
	font-size: 12px;
	color: #000;
	text-transform: uppercase;
	padding-bottom: 5%;
}

.boxPhotoCredit {
	font-size: 11px;
	color: #000;
	text-transform: uppercase;
	padding-bottom: 0;
}

.boxPhotoCredit:before {
	content: "";
	background-image: url(/assets/icons/photo.png);
	padding-left: 25px;
}

.boxDetails {
	position: absolute;
	bottom: 0;
	height: 28px;
	width: 100%;
}

.boxStats {
	color: #808080;
	position: absolute;
	width: 170px;
}

.boxStat {
	border-radius: 50%;
	width: 28px;
	height: 28px;
	background: rgba(0,0,0,.35);
	display: inline-block !important;
	margin-right: 25px;
}

.boxStat span {
	font-size: 14px;
	margin: 5px 0 0 34px;
	position: absolute;
}

.boxPrice {
	font-size: 24px;
	color: #505354;
	font-weight: 300;
	text-align: right;
	vertical-align: top;
}

.boxPrice span {
	font-size: 15px;
	position: absolute;
	margin: 3px -10px;
}

.boxPricePer {
	font-size: 12px;
	text-align: right;
	margin-top: -5px;
	color: #a0a0a0;
}  

  
/* THUMB GALLERY | RESPONSIVENE
-------------------------------------------------------------------------------*/
     

@media only screen and (max-width : 640px) {
  /* Smartphone view: 1 tile */
	.box {
		width: 100%;
		padding-bottom: 100%;
	}
}

@media only screen and (max-width : 1100px) and (min-width :641px) {
  /* Tablet view: 2 tiles */
	.box {
		width: 50%;
		padding-bottom: 50%;
	}
}

@media only screen and (max-width : 1680px) and (min-width :1101px) {
  /* Small desktop / ipad view: 3 tiles */
	.box {
		width: 33.33%;
		padding-bottom: 33.33%;
	}
}

@media only screen and (max-width : 1918px) and (min-width : 1681px) {
 
  /* Medium desktop: 4 tiles */
	.box {
		width: 25%;
		padding-bottom: 25%;
	}
}

@media only screen and (max-width : 4000px) and (min-width : 1919px) {
  /* Medium desktop: 5 tiles */
	.box {
		width: 20%;
		padding-bottom: 20%;
	}
}

/* PAGINATION  	
-------------------------------------------------------------------------------*/
  

.pagination {
	position: fixed;
	right: 0;
	bottom: 0px;
	z-index: 98;
	list-style: none;
	margin: 0;
	padding: 30px 0 15px 0px;
	width: 100px;
}

.pagination li {
	padding: 0;
	text-align: center;
}

.pagination li a {
	padding: 8px;
	width: 4px;
	height: 2px;
	display: block;
	margin-left: 70px;
}

.pagination li a:before {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	background: #adadad;
	border-radius: 10px;
}

.pagination li a.active:before {
	width: 10px;
	height: 10px;
	background: none;
	border: 1px solid #adadad;
	margin-top: -4px;
	margin-left: -4px;
}

.pagination li a:hover:before {
	background: #FFF;
}

.pagination .hover-text {
	position: absolute;
	right: 50px;
	padding-right: 0;
	margin-top: -7px;
	width: 125px;
	font-size: 1em;
	color: #cbcbcb;
	text-align: right;
	transition: opacity 0.3s;
	opacity: 0;
}

.pagination a:hover .hover-text {
	opacity: 1;
}