/*
Theme Name: Raiders 2020
Theme URI: https://www.inklab.com.au/
Description: Custom website theme
Version: 1.0
Author: Inklab
Author URI: https://www.inklab.com.au/
*/

@font-face{ font-family: 'Raiders';  src: url('fonts/Raiders-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } 
@font-face{ font-family: 'Gotham';  src: url('fonts/Gotham-Book.otf') format('opentype'); font-weight: normal; font-style: normal; } 
@font-face{ font-family: 'Gotham';  src: url('fonts/Gotham-Bold.otf') format('opentype'); font-weight: bold; font-style: normal; } 
html, body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	/*font-size: calc( 15px + (18 - 15) * (100vw - 680px) / (1920 - 680) );*/
	font-size: calc( 15px + 3 * (100vw - 768px) / 1600 );
	font-family: 'Gotham', sans-serif;
	line-height: 1.3;
	font-weight: normal;
	color: #273550;
	background-color: #94C949;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%; height: 100%; overflow: hidden;
	min-width: 320px;
}

h1, h2, .h2, h3, h4, h5{
	font-family: 'Raiders';
	text-transform: uppercase;
	font-weight: normal;
	margin: 0;
	line-height: 1;
	margin: 1.4rem 0;
}
	h1{ font-size: 8.2rem; }
	h2, .h2, h3.h2{ font-size: 5.8rem; color: #94C949; margin: 1.4rem 0 3rem 0;  }
	h3, h4, h5{ font-size: 3rem; }

.bg-envy{ background-color: #94C949; color: #ffffff; }
.bg-envy-navy{ background-color: #94C949; color: #273550; }
.bg-fever{ background-color: #ffffff; color: #94C949; }
.bg-white{ background-color: #ffffff; color: #273550; }
.bg-navy{ background-color: #273550; color: #ffffff; }
.bg-navy-envy{ background-color: #273550; color: #94C949; }
.bg-steel{ background-color: #99b4c2; color: #ffffff; }
.bg-tan{ background-color: #f1e4cc; color: #ffffff; }
.bg-transparent{ background-color: none; background: none!important; }

/*.bg-envy > .content h1, .bg-envy-navy > .content h1,*/
.bg-envy > .content h2, .bg-envy-navy > .content h2,
.bg-envy > .content .h2, .bg-envy-navy > .content .h2,
.bg-envy > .content h3.h2, .bg-envy-navy > .content h3.h2{ color: #273550; }


.fill-navy{ fill: #273650; }
.fill-white{ fill: #ffffff; }
.fill-steel{ fill: #98b2c0; }
.fill-tan{ fill: #f0e2cb; }
.fill-envy{ fill: #94c949; }  
.fill-none{ fill: transparent; fill: none; }

/*--------------------------------------------------------- */
.group{ zoom: 1; position: relative; }
.group::before, .group::after{ content: ''; display: table; clear: both; } 

.unselectable{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

*:focus{ outline: none; }

*::selection{ background-color: rgba(39, 53, 80, 0.99); color: #94C949; opacity: 1; }
*::-moz-selection{ background-color: rgba(39, 53, 80, 0.99); color: #94C949; opacity: 1; }

.bg-navy-envy *::selection{ background-color: rgba(148, 201, 73, 0.99); color: #263450; opacity: 1; }
.bg-navy-envy *::-moz-selection{ background-color: rgba(148, 201, 73, 0.99); color: #263450; opacity: 1; }


div, nav, aside, section, header, footer, .block{ box-sizing: border-box; }
img{ max-width: 100%; height: auto; box-shadow: #000 0em 0em 0em; border: 0; }
iframe{ width: 100%; max-width: 100%;/* min-height: 320px;*/ }
video{ display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; object-position: center; }

a{ color: inherit; text-decoration: none; transition: all 0.4s ease 0s; }
a:hover{ transition: all 0.4s ease 0s; cursor: pointer; }
a.btn{
	display: inline-block; vertical-align: middle; text-decoration: none; position: relative;
	padding: 0.5rem 1.4rem; border: 2px solid #94C949; color: #94C949; background-color: transparent;
	margin: 2rem 0 0 0;
}

a.readmore{
	display: inline-block; vertical-align: middle; text-decoration: none; position: relative;
	font-weight: bold; border-bottom: 2px solid transparent; color: #94C949;
}
a.readmore:hover{
	text-decoration: none; color: inherit;
	border-bottom: 2px solid #94C949; color: #94C949;
}

@media (hover: hover) {
	.hoverlinks a:not(.btn):not(.readmore):hover{ text-decoration: underline; }
	a.btn:hover{ color: #263450; background-color: #94C949; text-decoration: none; }	
}

ul, ol{ margin: 1em 0; }
li{ margin-bottom: 0.2em; }

.text-right{ text-align: right; }
.text-left{ text-align: left; }
.text-center{ text-align: center; }

/*--------------------------------------------------------- Flex grid */
.flex-container{
	width: 100%; max-width: 100%; height: 100%; min-height: inherit; position: relative; padding: 0; margin: 0; box-sizing: border-box;
	display: flex; flex-wrap: nowrap; flex-direction: row; 
	align-items: flex-start;  align-content: flex-start;  justify-content: flex-start;
}
	.flex-container.flex-nowrap{ flex-wrap: nowrap!important; }
	.flex-container.flex-wrap{ flex-wrap: wrap; }
	.flex-container.flex-row{ flex-direction: row; }	
	.flex-container.flex-row-reverse{ flex-direction: row-reverse; }	
	.flex-container.flex-center{ align-items: center; align-content: center; justify-content: flex-start; }
	.flex-container.flex-end{ align-items: flex-end; align-content: flex-end; justify-content: flex-start; }
	.flex-container.flex-stretch{ align-items: stretch; align-content: stretch; justify-content: stretch; }
	.flex-container.flex-stretch-start{ align-items: stretch; align-content: flex-start; justify-content: stretch; }
	.flex-container.flex-stretch-end{ align-items: stretch; align-content: flex-end; justify-content: stretch; }
	.flex-container.flex-edges{ align-items: flex-start; align-content: space-between; justify-content: space-between; }
	.flex-container.flex-edges-center{ align-items: center; align-content: space-between; justify-content: space-between; }
	.flex-container.flex-edges-stretch{ align-items: stretch; align-content: space-between; justify-content: space-between; }
		/* note IE can't handle left/right padding on flex-item - ignores border-box */
		.flex-container .flex-item{ 
			display: block; flex-basis: auto; flex-grow: 0; flex-shrink: 0; position: relative; max-width: 100%;
			box-sizing: border-box; box-shadow: none; text-decoration: none; border: 0px none; margin: 0 0; padding: 0 0; 
		}
		.flex-container .flex-item.flex-grow{ flex-grow: 1; }
		.flex-container .flex-item.flex-parts-100{ flex-basis: 100%; width: 100%; max-width: 100%; }
		.flex-container .flex-item.flex-parts-50{ flex-basis: 50%; width: 50%; max-width: 50%; }
		.flex-container .flex-item.flex-parts-20{ flex-basis: 20%; width: 20%; max-width: 20%; }

		.flex-container .flex-item.flex-height-auto{ height: auto; max-height: none; }
		.flex-container .flex-item.flex-height-50{ height: 50%; max-height: 50%; }
		.flex-container .flex-item.flex-height-100{ height: 100%; max-height: 100%;  }

/*--------------------------------------------------------- */
/* FULLPAGE */
#site-main{ width: 100%; height: 100%; }
#site-main .flex-container .flex-item .content{ /*padding: 7vw 7vw;*/ padding: 5.6rem; width: 100%; height: 100%; max-height: 100%; box-sizing: border-box; }
#site-main .flex-container.flex-center .flex-item .content{ /*height: auto;*/ }

.pile-slide.pile-half-video .flex-parts-50{ transition: all 0.3s ease; overflow: hidden; }
.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-text{ 
	flex-basis: 0%; width: 0%; max-width: 0%; transition: all 0.3s ease; 
}
.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video{ 
	flex-basis: 100%; width: 100%; max-width: 100%; transition: all 0.3s ease; 
}
.pile-slide .pile-part-video{
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(50vw - (5.6rem)*2) auto;
}
.pile-slide .pile-part-video.bg-video-frame,
.bg-wrap.bg-video-frame, .bg-video-frame{
	background-size: calc(100vw - (5.6rem)*2) auto;
}

.pile-slide.pile-half-video .flex-parts-50.pile-part-text .content{
	min-width: 50vw;
}

#pile-nav{ 
	position: fixed; top: 50%; right: 40px; 
	z-index: 100;
}



.pile-slide.pile-half-video:not(.view-video) .flex-parts-50.pile-part-video#frame_cmyk_shift{
	background: #fff!important; transition: all 0.3s ease, background 0s ease;
}

.pile-slide.pile-half-video:not(.view-video) .flex-parts-50.pile-part-video#frame_cmyk_shift,
.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video#frame_cmyk_shift{
	transition: all 0.3s ease, background 0s ease;
}

	#s4.pile-slide.pile-half-video.view-video .bg-wrap.bg-variations{
		background-image: none!important;
	}
	#s4.pile-slide.pile-half-video.view-video .bg-wrap.bg-variations .vimeo-wrap,
	#s4.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video .bg-shift{
		opacity: 1; transition: all 0.3s ease, background 0s ease, opacity 0s ease;
	}


svg#svg_cmyk_logo_loop{
	/*height: 100vh; width: auto; left: calc( -25vw - 2.8rem); position: relative;*/
}
svg#svg_cmyk_logo_loop g.cmyk_logo_loop_step{ overflow: hidden; }
svg#svg_cmyk_logo_loop g.cmyk_logo_loop_step.current{ z-index: 0; }
svg#svg_cmyk_logo_loop g.cmyk_logo_loop_step.current{ z-index: 1; }


.pile-slide.pile-half-video .flex-parts-50.pile-part-video .vimeo-wrap,
.pile-slide.pile-half-video .flex-parts-50.pile-part-video .bg-shift{ 
	opacity: 0; transition: opacity 0.3s ease; 
}
.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video .vimeo-wrap,
.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video .bg-shift{ 
	opacity: 1; transition: opacity 0.3s ease; transition-delay: 0.6s;
}
/*.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video .bg-wrap{
	background-image: none!important; transition: background 0.3s ease; transition-delay: 0.6s;
}*/


/* BACKGROUND */

.bg-shift{
	width: 100%; height: 100%;	
}
.bg-wrap{
	width: 100%; height: 100%;
	background-position: center;
	background-size: calc(50vw - (5.6rem)*2) auto;
	background-repeat: no-repeat;
}
.pile-slide.pile-half-video:not(.view-video) .bg-wrap.bg-typography{
	/*background-position: top center;*/
    /*background-repeat: repeat-y;*/
    width: calc(100% + 5.6rem*2);
    left: -5.6rem; position: relative;
}
.pile-slide.pile-half-video .bg-wrap.bg-typeface{
	/*background-size: 90% auto;*/
	background-size: contain;
}
.pile-slide.pile-half-video .bg-wrap.bg-typeface iframe{
	background: #fff; padding: 1px;
}


div.vimeo-wrap{
	display: block; position: relative; width: 100%; height: 100%;
}
div.vimeo-wrap iframe{
	/*position: absolute; top: 0; left: 0;*/ width: 100%; height: 100%;
}
div.vimeo-wrap svg{
	display: block; width: 100%; height: auto;
	/*width: 46vw; width: calc(50vw - (5.6rem)*2);
	height: auto; max-width: 100%; max-height: 100%; margin: 0 auto;*/
}

div.show-only-mobile{ display: none!important; }
div.show-only-desktop{ display: block!important; }
@media only screen and (max-width : 980px) {
	div.show-only-mobile{ display: block!important; }
	div.show-only-desktop{ display: none!important; }
}



div.vimeo-wrap::after{
	content: '';
  	position: absolute; top: 0; left: 0;
  	z-index: 1;
	display: block; width: 100%; height: 100%;
}
#pile-first div.vimeo-wrap::after{ display: none; }
#vimeo-wrap_controls a#intro_play-pause{ display: none; }
#vimeo-wrap_controls a#intro_sound-mute{}



/*--------------------------------------------------------- */
/* INTRO SLIDE */
#pile-first .flex-item-intro{ 
	overflow: hidden; height: 100%; position: absolute; 
	left: 0;
	transition: all 0.5s ease; 
}
#pile-first .flex-item-intro.hide{ 
	left: 110%;
	/*width: 0;*/ flex-basis: 0; 
	transition: all 0.5s ease; 
}
#pile-first .flex-item-intro .content{ height: 100%; width: 100%; }


#pile-first #pile-intro.flex-item-intro{ z-index: 3; }
#pile-first #pile-intro.flex-item-intro.hide{ left: -110%; }

#pile-first #pile-main-bg{}
#pile-first #pile-main-bg #svg-h1{ display: block; position: fixed; height: 100%; width: auto; top: 0; left: 0; transition: all 0.4s ease; }
#pile-first #pile-main-bg #svg-h1 #svg-h1-fill{ fill: none; stroke: #94C949; stroke-width: 1px; transition: all 0.4s ease; }

#pile-first #pile-main-content{}

#pile-first .flex-item-intro#pile-intro{ transition-delay: 700ms; }
#pile-first .flex-item-intro#pile-main-content{ transition-delay: 900ms; }


#pile-first #pile-intro h1#site-h1{ display: block; line-height: 1em; }

h1, h2, h3.h2{ 
	white-space: pre-line; 
	line-height: 0; overflow: hidden;
}

h1 span.word, h2 span.word, h3 span.word{ 
	display: inline-block; vertical-align: middle; overflow: hidden; position: relative; 
	height: 0.88em;
}
h1 span.word .reveal, h2 span.word .reveal, h3 span.word .reveal{ 
	position: relative; 
	line-height: 0.88em;
}

section.fp-section h1 span.word .reveal, 
section.fp-section h2 span.word .reveal, 
section.fp-section h3 span.word .reveal{ top: 1.4em; transition: top 0.3s ease; }

section.fp-section.ready h1 span.word .reveal,
section.fp-section.active h2 span.word .reveal,
section.fp-section.active h3 span.word .reveal{ top: -0.22em; transition: top 0.3s ease; }
section.fp-section.ready h1 span.word:nth-child(1) .reveal,
section.fp-section.active h2 span.word:nth-child(1) .reveal,
section.fp-section.active h3 span.word:nth-child(1) .reveal{ transition-delay: 0.3s; }
section.fp-section.ready h1 span.word:nth-child(2) .reveal,
section.fp-section.active h2 span.word:nth-child(2) .reveal,
section.fp-section.active h3 span.word:nth-child(2) .reveal{ transition-delay: 0.35s; }
section.fp-section.ready h1 span.word:nth-child(3) .reveal,
section.fp-section.active h2 span.word:nth-child(3) .reveal,
section.fp-section.active h3 span.word:nth-child(3) .reveal{ transition-delay: 0.4s; }
section.fp-section.ready h1 span.word:nth-child(n+4) .reveal,
section.fp-section.active h2 span.word:nth-child(n+4) .reveal,
section.fp-section.active h3 span.word:nth-child(n+4) .reveal{ transition-delay: 0.45s; }


section.fp-section .content .text{ position:relative; top: 100px; opacity: 0; transition: all 0.3s ease; font-size: 1.3rem; }
section.fp-section .content .text.text-small{ font-size: 1rem; }
section.fp-section.active .content .text{ top: 0; opacity: 1; transition: all 0.3s ease; transition-delay: 0.5s; }


/*--------------------------------------------------------- */

/* SLIDES */
.pile-part-colorshift{
	transition: background 0.4s ease;
}
ul.clearlist, ul.inlinelist, ul.inlinemenu{
	list-style-type: none;
	margin: 1em 0 1.4em 0; padding: 0 0;
}
ul.clearlist li{ margin: 0.3rem 0; padding: 0; } 

ul.inlinelist li{ display: inline-block; vertical-align: baseline; margin-bottom: 10px; }
ul.inlinelist li:not(:last-of-type){ margin-right: 24px; }

ul.inlinemenu li{ display: inline-block; vertical-align: baseline; margin-bottom: 10px;}
ul.inlinemenu li:not(:last-of-type){ margin-right: 4px; padding-right: 8px; border-right: 1px solid; }


a.social{ display: block; height: 2rem; width: auto; fill: #94C949; }
a.social svg{ display: block; height: 100%; width: auto; }
@media (hover: hover) {
	a.social:hover{ fill: #fff; }
}
	
ul#colorshift{ display: block; list-style-type: none; /*margin: 2rem 0 0 0;*/ margin: 0 0; padding: 0; }
ul#colorshift li{ opacity: 0.2; display: block; margin-bottom: 0; }

ul#colorshift li a{ display: block; padding: 1rem 0; transition: color 0.4s ease; }
ul#colorshift li a:hover{ transition: color 0.4s ease; }
ul#colorshift li.current{ opacity: 1; }

ul#colorshift li a, ul#colorshift li a:hover, ul#colorshift li h3{ color: inherit; }
ul#colorshift li h3{ margin: 0 0; padding: 0; }

div#colorshift-mobi-container{ display: none;  }
div#colorshift-mobi h3{ 
    white-space: nowrap; font-size: 1.8rem; line-height: 0;
    display: block; width: 100%; margin-top: 2rem;
}

/* NAV */
#site-slide-nav{ 
	z-index: 120; color: #fff; /*transition: color 0.4s ease;*/
	position: fixed; right: 1.4rem; top: 50%;  transform: translate(0, -50%); overflow: visible; white-space: nowrap; 
	font-size: 3rem; font-family: 'Raiders'; text-transform: uppercase; font-weight: normal;
	fill: #fff; stroke: #fff;
}
#site-slide-nav.dark{
	color: #273550; /*transition: color 0.4s ease;*/
	fill: #273550; stroke: #273550;
}

#site-slide-nav .slide-nav-container{ text-align: center; }
#site-slide-nav .slide-nav-container .slide-nav{ position: relative; }
#site-slide-nav .slide-nav-container .slide-nav#slide-nav-up{}
#site-slide-nav .slide-nav-container .slide-nav#slide-nav-count{
	margin-bottom: 0.4em;
}
#site-slide-nav .slide-nav-container .slide-nav#slide-nav-count span.div{ 
	display: block; width: 2.8rem;margin: 1rem auto 0 auto; transition: background 0.4s ease;
	height: 0.3rem; background: #fff; border: 1px solid #fff;
}
#site-slide-nav.dark .slide-nav-container .slide-nav#slide-nav-count span.div{ background: #273550; border: 1px solid #273550; transition: background 0.4s ease; }

#site-slide-nav .slide-nav-container .slide-nav#slide-nav-down{}

#site-slide-nav .slide-nav-container a{ display: block; }
#site-slide-nav .slide-nav-container svg{
	display: inline-block; vertical-align: middle; width: 2.8rem; height: auto;
}
@media (hover: hover) {
	#site-slide-nav .slide-nav-container a:hover{ fill: transparent; }	
	#site-slide-nav .slide-nav-container a#slide-nav-count:hover span.div,
	#site-slide-nav.dark .slide-nav-container a#slide-nav-count:hover span.div{ background: transparent; }	
}


#vimeo-wrap_controls{
	z-index: 10; position: absolute; text-align: center;
	left: auto; right: 1.4rem; /*bottom: 5.6rem; */ bottom: 1.4rem;
}
#vimeo-wrap_controls a{ display: block; margin: 0 auto; }
#vimeo-wrap_controls a:not(:last-of-type){ margin-bottom: 1.2rem; }
#vimeo-wrap_controls svg{ display: block; height: auto; width: 1.6rem; padding: 0.5rem; }

#vimeo-wrap_controls a .fill-white,
#vimeo-wrap_controls a:hover .fill-white{ transition: all 0.3s ease; }


@media (hover: hover) {
	#vimeo-wrap_controls a:hover .fill-white{ fill: transparent; stroke: #fff; stroke-width: 3px; }
}

#vimeo-wrap_controls a#intro_play-pause.play g#controls_play{ display: none; }
#vimeo-wrap_controls a#intro_play-pause.play g#controls_pause{ display: block; }
#vimeo-wrap_controls a#intro_play-pause g#controls_play{ display: block; }
#vimeo-wrap_controls a#intro_play-pause g#controls_pause{ display: none; }

#vimeo-wrap_controls a#intro_sound-mute.sound g#controls_sound{ display: none; }
#vimeo-wrap_controls a#intro_sound-mute.sound g#controls_mute{ display: block; }
#vimeo-wrap_controls a#intro_sound-mute g#controls_sound{ display: block; }
#vimeo-wrap_controls a#intro_sound-mute g#controls_mute{ display: none; }




/* MENU */
#site-slide-menu{
	z-index: 115; font-size: 1.5rem; font-family: 'Raiders'; text-transform: uppercase; font-weight: normal; overflow: hidden;
	position: fixed; /*height: 100%;*/ height: auto; width: auto; max-width: 100%; top: 50%; transform: translate(0, -50%);
	right: -110%; transition: right 0.4s ease;
	padding: 1.5rem; padding-right: calc( 3rem + 50px );
}
#site-slide-menu.open{
	right: 0;transition: right 0.4s ease;
}

#site-slide-menu .slide-menu-container{}
#site-slide-menu .slide-menu-container ol#slide-menu-list{ margin: 0 0; }
#site-slide-menu .slide-menu-container ol#slide-menu-list li{ margin: 0 0; }
#site-slide-menu .slide-menu-container ol#slide-menu-list li a{ display: block; padding: 0.4rem 0; }


/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
@media only screen and (min-width : 1280px){
	ul#colorshift li h3{ font-size: 4rem; }
}
@media only screen and (max-width : 1280px){
	h2, .h2, h3.h2{ font-size: 5.2rem; }
}
@media only screen and (max-width : 1130px){
	h1{ font-size: 7.6rem;  }
	h2, .h2, h3.h2{ font-size: 4.6rem; }
}
@media only screen and (max-width : 1024px) {
	#site-slide-nav{ right: 10px; font-size: 2rem; }
	#site-slide-nav .slide-nav-container .slide-nav#slide-nav-count span.div{ width: 1.8rem; height: 0.2rem; }
	#site-slide-nav .slide-nav-container svg{ width: 2rem; }
	#vimeo-wrap_controls{ right: 10px; bottom: 10px; }

	#site-main .flex-container .flex-item .content{ padding: 4rem; }
	h1{ font-size: 6.4rem;  }
	h2, .h2, h3.h2{ font-size: 4rem; }
	h3, h4, h5{ font-size: 2rem }

	#s_pal .pile-part-colorshift{ background-color: #fff; }
	/*ul#colorshift{ margin: 0.4rem 0 0 0; }*/
	ul#colorshift{ display: none!important; }
	div#colorshift-mobi-container{ display: block; }


	section#s2:not(.view-video) .bg-wrap.bg-newlogo{
		background-image: url(images/frame_victor_cut.svg)!important;
		background-size: contain;
	}

	section#s3:not(.view-video) .bg-wrap.bg-family{
		background-image: url(images/frame_fulllogovariation_cut.svg)!important;
		background-size: contain;
	}

	section#s4:not(.view-video) .bg-wrap.bg-variations{
		background-image: url(images/frame_cmyk_cut.svg)!important;
		background-size: contain;
	}

	section#s5:not(.view-video) .bg-wrap.bg-velda{
		background-image: url(images/frame_velda_cut.svg)!important;
		background-size: contain;
	}

	section#s2.view-video .bg-wrap.bg-newlogo,
	section#s3.view-video .bg-wrap.bg-family,
	section#s4.view-video .bg-wrap.bg-variations,
	section#s5.view-video .bg-wrap.bg-velda{ background-image: none!important; }
}

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

	section.fp-section .content .text{ font-size: 1.1rem; }
	#vimeo-wrap_controls a#intro_play-pause{ display: none; }
	#vimeo-wrap_controls a#intro_sound-mute{}

	#site-slide-nav{ color: #273550; fill: #273550; stroke: #273550; }
	#site-slide-nav .slide-nav-container .slide-nav#slide-nav-count span.div{ background: #273550; border: 1px solid #273550; }
	#site-slide-nav.dark{ color: #94c949; fill: #94c949; stroke: #94c949; }
	#site-slide-nav.dark .slide-nav-container .slide-nav#slide-nav-count span.div{ background: #94c949; border: 1px solid #94c949; }

	#site-slide-nav.light{ color: #fff; fill: #fff; stroke: #fff; }
	#site-slide-nav.light .slide-nav-container .slide-nav#slide-nav-count span.div{ background: #fff; border: 1px solid #fff; }

	#site-main .flex-container .flex-item .content{ padding: 2.8rem; }

	/* 202/360 = 0.56 */
	#pile-first div.vimeo-wrap{ 
		height: calc( 0.57 * (100vw - 5.6rem) ); 
		top: calc( var(--vh, 1vh)*50 - (0.57 * (100vw - 5.6rem)) );
		/*top: calc( var(--vh, 1vh)*50 );*/
	}
	#pile-first div.vimeo-wrap iframe{ 
		position: relative; 
		transform: translate(0, 25%);
	}

	.pile-slide.pile-half-video .flex-container .flex-item .content{ width: 100vw; }
	.pile-slide.pile-half-video .flex-container{ flex-wrap: wrap; }
	.pile-slide.pile-half-video .flex-parts-50{ flex-basis: 100%; width: 100%; max-width: 100%; }
	.pile-slide.pile-half-video .flex-parts-50.pile-part-text{ height: 50%; max-height: 50%; }
	.pile-slide.pile-half-video .flex-parts-50.pile-part-video{ height: 50%; max-height: 50%; }

	.pile-slide.pile-half-video.view-video .flex-parts-50{ flex-basis: 100%; width: 100%; max-width: 100%; }
	.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-text{ flex-basis: 100%; width: 100%; max-width: 100%; width: 100%; height: 0px; max-height: 0px; }
	.pile-slide.pile-half-video.view-video .flex-parts-50.pile-part-video{ flex-basis: 100%; width: 100%; max-width: 100%; width: 100%; height: 100%; max-height: 100%;  }

	.pile-slide.pile-half-plain .flex-container .flex-item .content{ width: 100vw; }
	.pile-slide.pile-half-plain .flex-container{ flex-wrap: wrap; }
	.pile-slide.pile-half-plain .flex-parts-50{ flex-basis: 100%; width: 100%; max-width: 100%; }
	.pile-slide.pile-half-plain .flex-parts-50.pile-half-text{ height: 50%; max-height: 50%; }
	.pile-slide.pile-half-plain .flex-parts-50.pile-half-feature{ height: 50%; max-height: 50%; }

	#s_pal .flex-container{ flex-wrap: wrap; }
	#s_pal .flex-container .flex-item.flex-parts-50{ flex-basis: 100%; width: 100%; max-width: 100%; }
	#s_pal .flex-container .flex-item.flex-parts-50.s_item_text{ height: 50%; }
	#s_pal .flex-container .flex-item.flex-parts-50.s_item_palette{ height: 50%; background-color: #fff; }

	div#colorshift-mobi h3{ font-size: 2.2rem; margin: 1em 0 0; }

	#s_pal .flex-container .flex-item.flex-parts-50.s_item_palette .content{ padding: 0 0; }

	#s_cta .flex-container.s_cont_lv1{ flex-wrap: wrap; }
	#s_cta .flex-container.s_cont_lv1 .flex-item.flex-parts-50{ flex-basis: 100%; width: 100%; max-width: 100%; }
	#s_cta .flex-container.s_cont_lv1 .flex-item.flex-parts-50.s_item_join{ height: 50%; }
	#s_cta .flex-container.s_cont_lv1 .flex-item.flex-parts-50.s_item_social{ height: 50%; }
	#s_cta .flex-container.s_cont_lv2{}	
	#s_cta .flex-container.s_cont_lv2 .flex-item.flex-parts-100{ flex-basis: 50%; width: 50%; max-width: 50%; }
	#s_cta .flex-container.s_cont_lv2 .flex-item.flex-height-50{ max-height: 100%; height: 100%; }
	#s_cta .flex-container.s_cont_lv2 .flex-item.s_item_share{}
	#s_cta .flex-container.s_cont_lv2 .flex-item.s_item_media{}


	/*section:not(#pile-first) div.vimeo-wrap{ width: 200%; transform: translate(-25%, 0) }*/
	a.social{ height: 1.8rem; }

	section.fp-section .content .text.text-small{ font-size: 0.84rem; }
	ul.inlinemenu li:not(:last-of-type){ margin-right: 0; padding-right: 0; border-right: 0; }
	ul.inlinemenu li{ display:block; margin-bottom: 4px; }
	ul.inlinelist li:not(:last-of-type){ margin-right: 12px; }
	ul.clearlist{ white-space: nowrap; }
	ul.clearlist li{ margin: 0 0 4px 0; }
}

@media only screen and (max-width : 680px) {
	h1{ font-size: 4.8rem; }
	h2, .h2, h3.h2 { font-size: 2.8rem; white-space: normal; margin: 1rem 0 1.8rem 0; }
	section.fp-section .content .text{ font-size: 1rem; }

	#site-slide-nav{ font-size: 1.4rem; right: 0px; }
	#site-slide-nav .slide-nav-container a{ padding: 0 4px; }
	#site-slide-nav .slide-nav-container .slide-nav#slide-nav-count span.div{ width: 1.4rem; height: 2px; margin-top: 8px; }

	a.social{ height: 1.4rem; }
	div#colorshift-mobi h3{ font-size: 1.6rem; }
	#vimeo-wrap_controls{ right: 4px; bottom: 1.2rem; }

	#pile-first .flex-item-intro{ height: 100vh; height: calc(var(--vh, 1vh) * 100); }
	#site-main .flex-container .flex-item .content{ 
		height: 100vh; height: calc(var(--vh, 1vh) * 100); 
		padding: 2.8rem;
	}

}

@media only screen and (max-width : 440px) {
	html, body{ font-size: 14px; }
	section.fp-section .content .text.text-small{ font-size: 0.8rem; }

	#site-main .flex-container .flex-item .content,
	#site-main #s_cta.pile-slide.pile-half-plain .flex-parts-50.pile-half-feature .content{ padding: 20px 2.8rem 20px 20px; }

	#site-main #pile-first .flex-container .flex-item .content,
	#site-main .pile-slide.pile-half-video .flex-parts-50.pile-part-video .content,
	#site-main #s2.pile-slide.pile-half-plain .flex-parts-50.pile-half-feature .content{ padding: 2.8rem; }

	#site-main .pile-slide.pile-half-video.view-video:not(#s6) .flex-parts-50.pile-part-video .content{
		padding: 0;
	}	

	ul.clearlist, ul.inlinelist, ul.inlinemenu{ margin: 1em 0; }
}

@media only screen and (max-width : 380px) {
	h1{ font-size: 4.4rem; }
	h2, .h2, h3.h2 { font-size: 2.2rem; margin-top: 0; }	
	div#colorshift-mobi h3{ font-size: 1.4rem; }
}

@media only screen and (max-width : 320px) {
	html, body{ font-size: 12px; }
}