/*------------------------------------*\
    MAIN
\*------------------------------------*/


@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Cutive+Mono');
@import url('https://fonts.googleapis.com/css?family=Rock+Salt');
@import url("https://use.typekit.net/vru3dfi.css");

body {
	-webkit-font-smoothing: antialiased;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: rgba(0,0,0,1);
	font-weight: normal;
}

/*--------------------------------------------------------------
1 Typography
--------------------------------------------------------------*/

/* Palette */

.gargoyle-gas {
	background-color: #f9dc4c;
	background-color: rgba(249,220,67,1);
}

.turquoise {
	background-color: #59E2D1;
	background-color: rgba(89,226,209,1);
}

.arsenic {
	background-color: #3b2c4e;
	background-color: rgba(59,44,78,1);
}

.tart-orange {
	background-color: #fb4e4a;
	background-color: rgba(251,78,74,1);
}

.jungle-green {
	background-color: #0fab89;
	background-color: rgba(15,171,137,1);
}

h1 {
	font-family: 'cubano', sans-serif;
	font-size: 2.25em;
	color: rgba(59,44,78,1);
  font-weight: 400;
  margin: 25px 0px;
}

h2 {
	font-family: 'cubano', sans-serif;
	font-size: 1.75em;
	color: rgba(59,44,78,1);
  font-weight: 400;
}

h3 {
	font-size: 1.5em;
	font-family: 'cubano', sans-serif;
	font-weight: 400;
	color: rgba(59,44,78,1);
}

h4 {
	font-size: 1.35em;
	font-family: 'cubano', sans-serif;
	font-weight: 400;
	color: rgba(59,44,78,1);
}

h5 {
	font-size: 1em;
	font-family: 'Montserrat', serif;
  font-weight: 600;
	color: rgba(59,44,78,1);
}

h6 {
	font-size: 1em;
  font-family: 'cubano', sans-serif;
	font-weight: 400;
	color: rgba(59,44,78,1);
}

p {
	font-family: 'Montserrat', monospace;
	font-size: 1.35em;
	color: rgba(59,44,78,.85);
  margin: 15px 0px;
	line-height: 1.65em;
}

.large p, p.large {
	font-size: 1.35em;
}


/*--------------------------------------------------------------
2 Buttons & Links
--------------------------------------------------------------*/

a {
	color: rgba(251,78,74,1);
	opacity: 1;
	transition: all .2s linear;
}

a:hover {
	color: rgba(251,78,74,1);
	opacity: 1;
}

a.black {
	color: rgba(0,0,0,1);
	opacity: 1;
	position: relative;
	margin-left: 36px;
	transition: all .2s linear;
	/*border-bottom: 3px solid transparent;*/
}

a.black:hover {
	margin-left: 24px;
	color: rgba(0,0,0,1);
	opacity: 1;
	/*border-bottom: 3px solid tomato;*/
}

a.black:after {
	color: rgba(0,0,0,1);
	opacity: 0;
	font-family: 'Material Icons';
	font-size: 36px;
	width: 36px;
	height: 48px;
	line-height: 42px;
	background-color: transparent;
	color: #000;
	text-align: center;
	box-sizing: border-box;
	content: "\E315";
	display:inline-block;
	transition: all .2s linear;
	position: relative;
  top: 9px;
	left: -12px;
}

a.black:hover:after {
	color: rgba(0,0,0,1);
	opacity: 1;
	font-family: 'Material Icons';
	font-size: 36px;
	width: 48px;
	height: 48px;
	line-height: 42px;
	background-color: transparent;
	color: #000;
	text-align: center;
	box-sizing: border-box;
	content: "\E315";
	display:inline-block;
	position: relative;
  top: 9px;
	left: -6px;
}

button, .button, .wpcf7-submit {
	height: auto;
	width: auto;
	padding: 10px 15px;
	line-height: 1;
	background-color: rgba(249,220,67,1);
	color: rgba(59,44,78,1);
	border-radius: 2px;
  display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	border: none;
	transition: all .2s linear;
	cursor: pointer;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

button:hover, .button:hover. .wpcf7-submit:hover {
	background-color: rgba(15,171,137,1);
	opacity: 1;
	color: #fff;
}

a.button.share {
	background-color: rgba(251,78,74,1);
	color: #fff;
	max-width: 240px;
  margin: 0 auto;
}

.final-content a.button {
	background-color: rgba(251,78,74,1);
	color: #fff;
	max-width: 280px;
}

.final-content a.button:hover {
	background-color: rgba(15,171,137,1);
	color: #fff;
	width: auto;
}

a.button i.material-icons {
	margin: 0px 5px;
}

/*--------------------------------------------------------------
1 Base Layout
--------------------------------------------------------------*/

.wrapper {
  max-width: 100%;
  width: 100%;
}

.container {
  max-width: 1100px;
  width: calc(100% - 50px);
  margin: 0 auto;
  padding: 25px;
}

.creations-container {
  max-width: 1100px;
  width: calc(100% - 50px);
  margin: 0 auto;
  padding: 25px;
}

.container.first {
	margin-top: 0px;
}

.page > .container {
	max-width: 1000px;
}

.hero {
  width: 100%;
  height: auto;
  position: relative;
  margin: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hero {
  background-color: rgba(89, 219, 213,1);
}

.hero p {
  font-family: 'courier-prime', monospace;
  color: rgba(255,255,255,1);
  font-size: 1.75em;
}

.hero .content-item {
	max-width: 660px;
}



/*--------------------------------------------------------------
1 Header & Navigation
--------------------------------------------------------------*/


header.sticky {
  position: fixed;
  top: 0;
  width: 100%;
	background-color: rgba(249,220,67,1);
}

.page-id-6 header.header {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	background-color: transparent;
	border: none;
}

.page-id-6 header.header .logo {
	opacity: 0;
}

header.header {
  width: 100%;
  padding: 10px 25px 12px 25px;
  display: flex;
  flex-direction: row;
  border: none;
	position: relative;
	background-color: rgba(255,255,255,1);
	border-bottom: 1px solid #efefef;
	z-index: 1;
	top: 0;
}

header.header .logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-basis: 25%;
}

header.header .logo img {
  width: 100%;
  max-width: 62px;
  min-width: 58px;
  height: auto;
}

nav.main-navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-basis: 75%;
}

nav.main-navigation  ul {
  display: flex;
	justify-content: center;
  align-items: center;
  list-style: none;
  flex: 1;
}

nav.main-navigation ul > li {
  margin-left: 25px;
}

nav.main-navigation ul li a {
	color: rgba(59,44,78,1);
	border-bottom: 2px solid transparent;
	padding-bottom: 5px;
}

nav.main-navigation ul li a:hover {
	color: rgba(59,44,78,1);
	border-bottom: 2px solid rgba(59,44,78,1);
}

/*--------------------------------------------------------------
2 Pages
--------------------------------------------------------------*/
.page-wrapper:not(.front) {
background-color: #fff;
min-height: calc(100vh - 131px);
margin-top: 0;
}


/*--------------------------------------------------------------
Z utilities
--------------------------------------------------------------*/

.vh100 {
  min-height: 100vh !important;
}

.vh50 {
  min-height: 50vh !important;
}

.vh25 {
  min-height: 25vh !important;
}

/*--------------------------------------------------------------
3 Slider
--------------------------------------------------------------*/

.image-slider:not('.flexslider') {
	position: relative;
}

ul.image-slides { list-style: none; margin: 0px; padding: 0px; }



.image-slider.flexslider {
	position: absolute;
	padding: 0;
	margin: 0;
	border: none;
	height: 100%;
	width: 100%;
	opacity: 0;
	bottom: 0;
	pointer-events: none;
	transition: all .2s linear;
	background-color: rgba(249,220,67,1);
	z-index: 1;
}

.image-slider.flexslider:not(.fullscreen-view) > .flex-viewport {
}

.flex-control-nav{
	display: none;
}

.image-slider.flexslider > .flex-viewport > ul.image-slides {
	position: relative;
	height: calc(100vh - 131px);
	margin: 0;
	padding: 0px;
}

.image-slider.flexslider > .flex-viewport > ul.image-slides > li {
	width: 50%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.image-slider .image-caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Gradient */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.4+35,0.5+100 */
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 35%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 35%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
	text-align: center;
}

.image-slider .image-caption  p {
	color: #fff;
}

.image-slider.flexslider > .flex-viewport {
}

.flex-direction-nav a {
	width: 48px;
	height: 48px;
	z-index: 0;
}

.image-slider.flexslider .flex-direction-nav a:before,
.wisdom-slider.flexslider .flex-direction-nav a:before {
	font-family: 'Material Icons';
	font-size: 28px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	background-color: rgba(251,78,74,1);
	border-radius: 25px;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}

.image-slider.flexslider .flex-direction-nav a:hover:before,
.wisdom-slider.flexslider .flex-direction-nav a:hover:before {
	background-color: rgba(204,10,43,1);
}

.image-slider.flexslider .flex-direction-nav a.flex-prev:before,
.wisdom-slider.flexslider .flex-direction-nav a.flex-prev:before {
	content: '\E5C4';
  margin-left: 0px;
}

.image-slider.flexslider .flex-direction-nav a.flex-next:before,
.wisdom-slider.flexslider .flex-direction-nav a.flex-next:before {
	content: '\E5C8';
  margin-right: 0px;
}

.image-slider.flexslider .flex-direction-nav a, .flex-direction-nav a:before {
	text-shadow: none;
}

.image-slider.flexslider .options {
	position: absolute;
	top: 25px;
	right: 45px;
	z-index: 1;
  display: flex;
}

.image-slider.flexslider .gallery-button {
	margin-right: 25px;
}

.image-slider.flexslider.fullscreen-view .options {
	top: 25px;
	right: 25px;
	position: absolute;
  display: flex;
}

.image-slider.flexslider.fullscreen-view .options button {
	border-radius: 25px;
	background-color: rgba(251,78,74,1);
	color: #fff;
}

/* --- Full Screen View */

.image-slider.flexslider.fullscreen-view {
	opacity: 1;
	pointer-events: visible;
}

.image-slider.flexslider.fullscreen-view > .flex-viewport {
}

.image-slider.flexslider:not(.fullscreen-view) .fullscreen-button.enter {
	display: block;
}

.image-slider.flexslider.fullscreen-view .fullscreen-button.enter {
	display: none;
}

.image-slider.flexslider:not(.fullscreen-view) .fullscreen-button.exit {
	display: none;
}
.image-slider.flexslider.fullscreen-view .fullscreen-button.exit {
	display: block;
}

/*--------------------------------------------------------------
Mobile Navigation
--------------------------------------------------------------*/


/* Show mobile-nav always */

.mobile-navigation {
	display: block;
	right: 0;
	position: absolute;
	top: 0;
	transition: all .2s linear;
	z-index: 2;
}

.mobile-navigation {
	display: block;
	width: 50%;
	right: 0;
	position: absolute;
	top: 0;
	background-color: rgba(249,220,67,0);
	transition: all .2s linear;
	z-index: 2;
}

.mobile-navigation ul {
	list-style: none;
	padding-right: 25px;
	padding-top: 75px;
	padding-left: 0px;
	padding-bottom: 0px;
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: all .2s linear;
}

.mobile-navigation ul li a {
	display: block;
	color: rgba(59,44,78,1);
	text-align: right;
	margin: 0px;
	padding: 10px 0px;
	text-decoration: none;
	font-size: 1.35em;
}

.mobile-navigation ul li a:hover {
	color: rgba(251,78,74,1);
}

.mobile-navigation span.mobile-navigation-label {
	position: absolute;
	right: 50px;
	width: 131px;
	top: 14px;
	text-transform: uppercase;
	color: rgba(59,44,78,1);
}

/* Icon spinner */

.mobile-navigation .icon * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}

.mobile-navigation .icon {
	position: absolute;
	top: 35px;
	right: 25px;
	z-index: 1;
	width: 50px;
	height: 50px;
	background-color: transparent;
	border-radius: 50%;
	transition: all 0.3s;
	padding: 10px;
}

/* Icon spinner */

.mobile-navigation .icon * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}

.mobile-navigation .icon {
	position: absolute;
	top: 35px;
	right: 25px;
	z-index: 1;
	width: 50px;
	height: 50px;
	background-color: transparent;
	border-radius: 50%;
	transition: all 0.3s;
	padding: 10px;
}
/* icon bars */
.mobile-navigation .icon .bar {position:absolute;height:3px;width:100%;background-color:rgba(59,44,78,1);}
.mobile-navigation .icon:hover .bar {
	background-color: rgba(59,44,78,1);
}
.mobile-navigation .icon:hover span.mobile-navigation-label {
	color: rgba(59,44,78,1);
}
/* home header icon bars / closed */
.page-id-6 .mobile-navigation:not(.responsive) .icon .bar {background-color: rgba(249,220,67,1);}
.page-id-6 .mobile-navigation:not(.responsive) .icon:hover .bar {
	background-color: rgba(249,220,67,1);
}
.page-id-6 .mobile-navigation:not(.responsive) .icon span.mobile-navigation-label {
	color: rgba(249,220,67,1);
}
.page-id-6 .mobile-navigation:not(.responsive) .icon:hover span.mobile-navigation-label {
	color: rgba(249,220,67,1);
}

/* icon toggled off */
.mobile-navigation .icon .diagonal.part-1 {position:relative;float:left;margin-top:5px;}
.mobile-navigation .icon .horizontal {position:relative;float:left;margin-top:5px;}
.mobile-navigation .icon .diagonal.part-2 {position:relative;float:left;margin-top:5px;}
/* icon toggled on */
.mobile-navigation.responsive .icon > .diagonal.part-1 {transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:14px;}
.mobile-navigation.responsive .icon > .horizontal {opacity: 0;}
.mobile-navigation.responsive .icon > .diagonal.part-2 {transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-11px;}

/* nav off */
.mobile-navigation:not(.responsive) {
	width: 50%;
	background-color: rgba(249,220,67,0);
}

/* nav on */
.mobile-navigation.responsive {
	position: absolute;
	width: 100%;
	min-height: 100vh;
	background-color: rgba(249,220,67,1);
	transition: all .2s linear;
	z-index: 2;
}

.mobile-navigation.responsive ul {
	display: block;
	opacity: 1;
	pointer-events: visible;
}

nav.main-navigation {
	display: none;
}

.active {
	color: #000;
}


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

  /* Header updates */

  header.header .logo {
    flex-basis: 50%;
  }

	.creations-container {
	  max-width: 1100px;
	  width: calc(100%);
	}

}