/*

Theme Name: Two Tales
Version: 1.0.0
Description: Custom made for client
Tags: Custom made for client
Theme URI: https://#

Author: WP and coding: Abrovink, Design: Björn Berglund Creative Studio
Author URI: www.abrovink.se

Text Domain: tt

*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	height: 100%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

body{
	height: 100%;
	background: url(gfx/bg.png) repeat #e6e6e6;
}
html, body, textarea, td{
	font-family: nobel, sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 14px;
	line-height: 1.37em;
	color: #9f9ea2;
	text-transform: uppercase;
	
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

caption,
th,
td {
	font-weight: 400;
	text-align: left;
}

fieldset {
	min-width: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 .41em 0;
	padding: 0;
}
h1, h2 {
	margin: 0 0 .33em 0;
	font-size: 1.35em;
	line-height: 1.21em;
	letter-spacing: .05em;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
}
h3 {
	font-size: 1.35em;
	line-height: 1.35em;
	letter-spacing: .05em;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
}
h4 {
	font-size: 1em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
h5 {
	font-size: .85em; 
}
h6 {
	font-size: .6em;
}
p {
	margin-bottom: 1.47em;
	letter-spacing: .05em;
}
strong, b{
	font-weight: 800;
}


a,
a::before,
a::after {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	-webkit-transition: opacity .25s;
	-o-transition: opacity .25s;
	transition: opacity .25s;
}
a:hover{
	opacity: .5;
}
a:hover,
a:active{
	outline: 0;
}
a:focus {
	outline: 0;
}


dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	max-width: 800px;
	min-height: 5em;
	margin-bottom: 1.41em;
	padding: 0 0 0 4.0em;
	background: url(gfx/blockquote-bg.png) no-repeat 0px 7px transparent;
	background-size: 3em auto;
	font-style: italic;
	font-weight: 300;
}


address {
	font-style: italic;
	font-weight: 600;
	margin: 0;
	line-height: 1.55em;
}

pre {
	background: #eee;
	font-family: Courier, monospace;
	font-size: .85em;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code{
	font-family: Courier, monospace;
	font-size: .8em;
}
abbr,
acronym {
	border-bottom: 1px dotted #888;
	cursor: help;
}
:focus {
	outline: none;
}
hr {
	display: block;
	width: 100%;
	float: none;
	clear: both;
	background-color: #c7ced5;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
p > embed,
p > iframe,
p > object{
	margin-bottom: 0;
}
ul,
ol {
	margin: 0 0 1.5em;
	padding: 0;
}
ul,
ol {
	margin: 0 0 1.75em 1.25em;
	padding: 0;
}
ul {
	list-style: square;
}
ol {
	list-style: decimal;
	margin-left: 1.5em;
}
li{
	margin-bottom: .17em;
}
li > ul,
li > ol {
	margin-bottom: 0;
}
dt {
	font-weight: 700;
}
dd {
	margin: 0 1.5em 1.5em;
}
sup {
	font-size: 65%;
	line-height: 1;
	font-weight: 100;
	/*white-space: break-after;*/
}
sub {
	font-size: 65%;
	line-height: 1;
	font-weight: 100;
	/*white-space: break-after;*/
}


table {
	border-collapse: collapse;
	margin: 1.5em 0 2.5em 0;
	width: 100%;
}
thead th {
	border-bottom: 0px solid #bbb;
	padding-bottom: 0.5em;
}
th {
	font-size: inherit;
	padding: 0;
	text-align: left;
	font-weight: 700;
}
tr {
	border-bottom: 0px solid #c7ced5;
}
td {
	display: block;
	padding: 0;
	font-size: inherit;
	font-weight: 700;
}
th:first-child,
td:first-child {
	padding-left: 0;
}
th:last-child,
td:last-child {
	padding-right: 0;
}




/* form styles */
form input[type="text"],
form input[type="email"],
form input[type="search"],
form input.input-search,
input.contacts-search{
	display: block;
	float: left;
	width: auto;
	height: auto;
	margin: 0;
	padding: .7225em .7225em;
	border: 0;
	border-radius: .25em;
	
	font-size: 15px;
	color: #363636;
}
form input[type="submit"]{
	display: block;
	float: left;
	margin: 0;
}

form label.visually-hidden{
	display: none;
}
form .form-error{
	display: none;
}





svg a{
	text-decoration: none;
}
a img {
	border: 0;
}


img{
	display: block;
	max-width: 100%; /* Adhere to container width. */
	height: auto !important; /* Make sure images are scaled correctly. */
}
img.alignleft {
	float: left;
	margin-right: 1.5em;
}
img.alignright {
	float: right;
	margin-left: 1.5em;
}
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}



video {
	display: inline-block;
	height: auto !important; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
canvas {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container canvas { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-caption,
.gallery-caption {
	color: #666;
	font-size: 0.85em;
	line-height: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption .wp-caption-text {
	margin: 1.5em 0;
}

/* Handle dynamic height of iframes etc */
.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: 100%;
} 



.clearfix::after,
.container::after,
.container ul::after{
	content: "";
	display: table;
	clear: both;
}

.visually-hidden{
	display: none;
}
.soft-hyphen::after,
.soft-break::after{
	display: block;
	float: none;
	clear: both;
	content: "";
}




/* loader */
#loader-wrapper{
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: url(gfx/loading-bg.png) repeat #bfcde1;
	-webkit-transition: all .75s cubic-bezier(0.37, 0, 0.63, 1);
		  -o-transition: all .75s cubic-bezier(0.37, 0, 0.63, 1);
		  transition: all .75s cubic-bezier(0.37, 0, 0.63, 1);
}
#loader-wrapper .logo-container{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
#loader-wrapper .loader-logo{
	width: 30vw;
	min-width: 250px;
	height: auto !important;
	margin: 0 8% 0 6%;
	-webkit-clip-path: inset(0 0 99.99% 0);
	        clip-path: inset(0 0 99.99% 0);
	-webkit-animation: fadeinlogo 2.5s 1;
			animation: fadeinlogo 2.5s 1;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-delay: .75s; 
	animation-delay: .75s;
}
@-webkit-keyframes fadeinlogo { 
	from { -webkit-clip-path: inset(0 0 99% 0); clip-path: inset(0 0 99% 0); } 
	to { -webkit-clip-path: inset(0px 0px 0px 0px); clip-path: inset(0px 0px 0px 0px); } 
}
@keyframes fadeinlogo { 
	from { -webkit-clip-path: inset(0 0 99% 0); clip-path: inset(0 0 99% 0); } 
	to { -webkit-clip-path: inset(0px 0px 0px 0px); clip-path: inset(0px 0px 0px 0px); } 
}

.loaded #loader-wrapper{
	opacity: 0;
	visibility: hidden;
}
.no-js #loader-wrapper {
    display: none;
}

/* /loader */








/* sticky footer - flexbox variant */
body{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
#header{
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}
#main{
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
}
#footer{
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}




.container{
	position: relative;
	margin: 0 auto;
}
.pad{
	padding: 0 4%;
}
.inner-padding{
	padding: 0 8%;
}


#header {
	position: absolute;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: auto;
	padding: 2% 0 1% 0;
	background: transparent;
	overflow: visible;
}
#logo {
	position: relative;
	z-index: 200;
	width: 8%;
	min-width: 62px;
	max-width: 110px;
	float: left;
	color: #fff;
	currentColor: #fff;
}
.toggle-wrap {
	position: absolute;
	top: -4px;
	right: -2px;
	z-index: 200;
}

#nav{
	position: absolute;
	left: 0;
	top: -100%;
	z-index: 99;
	display: block;
	width: 100%;
	height: 0;
	/*overflow-y: auto;*/
	margin: 0;
	padding: 0;
	opacity: 0;
	background: url(gfx/bg-nav.jpg) repeat #c0d3e4 center center;
	-webkit-transition: height .5s, opacity .5s;
	-o-transition: height .5s, opacity .5s;
	transition: height .5s, opacity .5s;
}
.nav-expanded #nav{
	top: 0;
	height: 100vh;
	opacity: 1;
}
#nav .menu{
	display: none;
	position: relative;
	top: 0;
	height: 0;

}

.nav-expanded #nav .menu{
	height: 100vh;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-line-pack: center;
	    align-content: center;
}
.ios.nav-expanded #nav .menu{
	height: 85vh;
}


#nav ul{	
	display: block;
	margin: 0;
	padding: 1.5em 0 0 0;
	list-style: none;
}
#nav li{
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
#nav li a{
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .65em 0;
	font-size: 1.65em;
	letter-spacing: .15em;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}
#nav .current-menu-item > a, 
#nav .current-menu-parent > a,
#nav .current-menu-ancestor > a,
#nav .current_page > a,
#nav .current_page_item > a,
#nav .current_page_parent > a,
#nav .current_page_ancestor > a,
#nav .current_post_ancestor > a{
	color: #959595;
}




/* keep this as generic as possible for max flexibility */
.boxes{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-ms-flex-line-pack: stretch;
	    align-content: stretch;
}
.boxes .item{
	position: relative;
	width: 100%;
	margin: 0;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.boxes .item a{
	width: 100%;
	color: inherit;
}
.boxes .item a:hover{
	opacity: 1;
}
.image-wrap,
.image-wrap img{
	overflow: hidden;
	-webkit-transition: all 1.25s ease-in-out;
	-o-transition: all 1.25s ease-in-out;
	transition: all 1.25s ease-in-out;
}
.boxes .item.fill,
.boxes .item.fill:hover{
	height: 0 !important;
	min-height: 0 !important;
	margin: auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	overflow: hidden !important;
}



/* applies to both boxes and slides */
.content-wrap{
	color: #fff;
}
.boxes .excerpt{
	max-width: 800px;
	font-size: .85em;
	text-align: center;
}
.excerpt span{
	display: block;
	margin: 0 auto;
}



#main{
	z-index: 900;
}

.about .page-content,
.archive .page-content{
	padding: 120px 0;
}




/* home */
.home{}

section.hero .slide{
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
section.hero .slide .image-container.full-size{
	display: none;
}
section.hero .slide .image-container{
	width: 100vw;
	height: 100vh;
	-webkit-transform: scale(1.01);
	-ms-transform: scale(1.01);
	    transform: scale(1.01);
	background-size: cover;
}
section.hero .slide.animated .image-container {
  -webkit-animation: slomo 8s 1 ease-in-out forwards;
  animation: slomo 8s 1 ease-in-out forwards;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
section.hero .slide.slick-active .image-container {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
section.hero .content-wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	z-index: 99;
	text-align: center;
}

.ios section.hero .content-wrap{
	top: 42.5%;
}



@-webkit-keyframes slomo {
    0% {
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }
    to {
        -webkit-transform: scale(1.25);
        transform: scale(1.25)
    }
}

@keyframes slomo {
    0% {
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }
    to {
        -webkit-transform: scale(1.25);
        transform: scale(1.25)
    }
}






/* about */
.about #main{
	background: url(gfx/bg-about.png) no-repeat right bottom transparent;
	background-size: 240px auto;
	background-attachment: scroll;
}



/* work */
.work .boxes .item{
	width: 100%;
	height: 56vw;	/* needs adjustments responsively */
	overflow: hidden;
	position: relative;
}
.work .boxes .item .image-wrap{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: no-repeat transparent;
	background-size: cover;
	background-position: center top;
}
.work .boxes .item .content-wrap{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	margin: 0;
	padding: 5%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;	
}
.work .boxes .item .content-wrap h3{
	width: 100%;
}


.hero .subtitle,
.work .production_house,
.work .director{
	display: block;
	font-size: .85em;
	font-weight: normal;
}





/* archive */
.archive #main{
	background: url(gfx/bg-archive.png) no-repeat right bottom transparent;
	background-size: 240px auto;
	background-attachment: scroll;
}
.archive table tr.headers{
	display: none;
}
.archive table tr td{
	font-weight: 400;
}

.archive table tr td:first-child{
	color: #97b7d7;
	font-weight: 700;
}
.archive table tr td:last-child{
	padding-bottom: 2em;
}
.archive table a{
	font-size: 1.25em;
	color: #97b7d7;
}







/* contact */
.contact .page-section{
	margin-top: 8%;
	padding: 80px 0 0 0;
}

.contact .page-section .pad{
	padding: 0;
}

.contact .address-block{
	min-height: 140px;
	margin: 0;
	padding: 25px 8%;
}

.contact .block-a{
	background: url(gfx/contact-bg-a.jpg) repeat #a6b4d1;
}
.contact .block-b{
	background: url(gfx/contact-bg-b.jpg) repeat #6996cd;
}
.contact .block-c{
	background: url(gfx/contact-bg-c.jpg) repeat #a6a5aa;
}
.contact .block-d{
	background: url(gfx/contact-bg-d.jpg) repeat #d1ccd2;
}

.contact address{
	color: #fff;
}
address h3{
	font-weight: 600;
	margin: 0;
}
address p{
	margin-bottom: 0;
}

.contact .map-container{
	position: relative;
	z-index: 888;
	line-height: 1px;
}
.contact .map-container iframe{
	margin-bottom: 0;
}
#map{
	width: 100%;
	height: 50vh;
	min-height: 500px;
}










#footer{
	padding: 2.5em 0 1.5em 0;
	font-size: .75em;
	color: #989b9c;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

a.icon{
	display: inline-block;
	width: 1.35em;
	height: 1.35em;
	margin: .25em .7em 0 0;
	padding: .5em;
	color: #989b9c;
	background: no-repeat center center transparent;
	background-size: contain;
}
a.icon-facebook{
	background-image: url(gfx/1520-facebook.svg);
}
a.icon-instagram{
	background-image: url(gfx/1522-instagram.svg);
}
a.icon-vimeo{
	background-image: url(gfx/1536-vimeo.svg);
}
a.icon-linkedin2{
	background-image: url(gfx/1578-linkedin2.svg);
}





/* Arrows */
.slick-prev,
.slick-next{
    position: absolute;
    top: 50%;
    display: block;
    width: 70px;
    height: 140px;
	z-index: 100000;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.ios .slick-prev,
.ios .slick-next{
	top: 42.5%;
}



.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{
    opacity: .25;
}
.slick-prev:before,
.slick-next:before{
	display: block;
    width: 70px;
    height: 140px;
	opacity: .75;
	content: '';
	background: url('') no-repeat center center transparent;
	background-size: 36px 36px;
	
	-webkit-transition: opacity .5st;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
.slick-prev{
    left: 0;
}
.slick-prev:before{
	background-image: url(gfx/1223-arrow-left4.svg);
}
.slick-next{
    right: 0;
}
.slick-next:before{
	background-image: url(gfx/1215-arrow-right4.svg);
}



body .lity{
	background: url(gfx/bg.png) repeat #eae1ef;
}
body .lity-container{
	padding: 0 2.5em;
}


body .lity-close,
body .lity-close:hover{
	position: relative;
	margin-left: calc( 100% - 28px );
	margin-bottom: 0;
	text-shadow: none;
	color: #989b9c;
}
body .lity-container h4{
	padding: 1.25em 1.25em 1.25em 0;
	color: #989b9c;
}
body .lity-content:after{
	-webkit-box-shadow: none;
	        box-shadow: none;
}


@media (min-height: 800px) {
	
	body .lity-container{
		max-width: 80vw !important;
	}

}




@media (max-width: 767px) {
	
	#nav li:last-child{
		margin-bottom: 2em;
	}
	#nav li{
		opacity: 0;
	}
	.nav-expanded li{
		-webkit-animation: fadeinmenu .5s 1;
				animation: fadeinmenu .5s 1;
		-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
	}
	.nav-expanded li:nth-child(1){-webkit-animation-delay: .50s; animation-delay: .50s;}
	.nav-expanded li:nth-child(2){-webkit-animation-delay: .55s; animation-delay: .55s;}
	.nav-expanded li:nth-child(3){-webkit-animation-delay: .60s; animation-delay: .60s;}
	.nav-expanded li:nth-child(4){-webkit-animation-delay: .65s; animation-delay: .65s;}
	.nav-expanded li:nth-child(5){-webkit-animation-delay: .70s; animation-delay: .70s;}
	.nav-expanded li:nth-child(6){-webkit-animation-delay: .75s; animation-delay: .75s;}
	.nav-expanded li:nth-child(7){-webkit-animation-delay: .80s; animation-delay: .80s;}
	.nav-expanded li:nth-child(8){-webkit-animation-delay: .85s; animation-delay: .85s;}
	@-webkit-keyframes fadeinmenu { from {opacity: 0; margin-left: -28px;} to {opacity: 1; margin-left: 0px;} }
	@keyframes fadeinmenu { from {opacity: 0; margin-left: -28px;} to {opacity: 1; margin-left: 0px;} }
	#nav li a{
		-webkit-transition: opacity .5s, margin .5s, border .25s;
		-o-transition: opacity .5s, margin .5s border .25s;
		-webkit-transition: opacity .5s, margin .5s border .25s;
		transition: opacity .5s, margin .5s border .25s;
	}
	#nav li a:hover{
		margin-left: 18px;
	}
	
	.hamburger {
		padding: 16px 16px;
		display: inline-block;
		cursor: pointer;
		-webkit-transition-property: opacity, -webkit-filter;
		transition-property: opacity, -webkit-filter;
		-o-transition-property: opacity, filter;
		transition-property: opacity, filter;
		transition-property: opacity, filter, -webkit-filter;
		-webkit-transition-duration: 0.15s;
			 -o-transition-duration: 0.15s;
				transition-duration: 0.15s;
		-webkit-transition-timing-function: linear;
			 -o-transition-timing-function: linear;
				transition-timing-function: linear;
		font: inherit;
		color: inherit;
		text-transform: none;
		background-color: transparent;
		border: 0;
		margin: 0;
		overflow: visible; 
	}
	.hamburger:hover {
		/*opacity: 0.6; */
	}
	.hamburger.is-active:hover {
		/*opacity: 0.6; */
	}
	.hamburger-box {
		width: 20px;
		height: 12px;
		display: inline-block;
		position: relative; 
	}
	.hamburger-inner {
		display: block;
		top: 50%;
		margin-top: -1px; 
	}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
		width: 28px;
		height: 3px;
		background-color: #fff;
		border-radius: 0px;
		position: absolute;
		-webkit-transition-property: -webkit-transform;
		transition-property: -webkit-transform;
		-o-transition-property: transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
		-webkit-transition-duration: 0.15s;
			 -o-transition-duration: 0.15s;
				transition-duration: 0.15s;
		-webkit-transition-timing-function: ease;
			 -o-transition-timing-function: ease;
				transition-timing-function: ease; 
	}
	.hamburger-inner::before, .hamburger-inner::after {
		content: "";
		display: block; 
	}
	.hamburger-inner::before {
		top: -8px; 
	}
	.hamburger-inner::after {
		bottom: -8px; 
	}
	.hamburger--squeeze .hamburger-inner {
		-webkit-transition-duration: 0.075s;
			 -o-transition-duration: 0.075s;
				transition-duration: 0.075s;
		-webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			 -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
				transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
	}
	.hamburger--squeeze .hamburger-inner::before {
		-webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease;
		-o-transition: top 0.075s 0.12s ease, opacity 0.075s ease;
		transition: top 0.075s 0.12s ease, opacity 0.075s ease; 
	}
	.hamburger--squeeze .hamburger-inner::after {
		-webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		-o-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
	}
	.hamburger--squeeze.is-active .hamburger-inner {
		-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
				transform: rotate(45deg);
		-webkit-transition-delay: 0.12s;
			 -o-transition-delay: 0.12s;
				transition-delay: 0.12s;
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			 -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
				transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
	}
	.hamburger--squeeze.is-active .hamburger-inner::before {
		top: 0;
		opacity: 0;
		-webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease;
		-o-transition: top 0.075s ease, opacity 0.075s 0.12s ease;
		transition: top 0.075s ease, opacity 0.075s 0.12s ease; 
	}
	.hamburger--squeeze.is-active .hamburger-inner::after {
		bottom: 0;
		-webkit-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
				transform: rotate(-90deg);
		-webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
		-o-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
	}
	
}





/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	
	body{
		font-size: 15px;
	}
	


	/* reset manual linebreaks used in headlines - there's plenty of room for headlines */
	.soft-hyphen,
	.soft-break::after{
		display: none;
	}
	
	#footer .legal{
		float: left;
	}
	#footer .follow{
		float: right;
	}

}





/* Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) {

	body{
		font-size: 16px;
	}



	.toggle-wrap{
		display: none;
	}
	#nav,
	.nav-expanded #nav{
		top: 0;
		height: auto;
		margin: 1.85% 0 0 0;
		padding: 0;
		opacity: 1;
		background: transparent;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
	#nav .menu{
		display: block;
		height: auto;
		margin: -35px 0 0 9.75%;
		padding: 3.75% 0 0 0;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	}
	#nav li{
		display: inline-block;
		opacity: 1;
	}
	#nav li a{
		margin: 0;
		padding: .15em 10px;
		font-size: .65em;
	}
	
	.inner-padding{
		padding: 5% 22.5% 5% calc( 9.75% + 10px );	/* left padding sync with first menu item */
	}

	/* about and archive background */
	.about #main,
	.archive #main{
		background-size: 40% auto;
		background-position: right bottom;
	}
	
	/* archive */
	.archive .inner-padding{
		padding: 5% calc( 9.75% + 10px ) 5% calc( 9.75% + 10px );  /* left padding sync with first menu item */
	}
	.archive table{
		width: 100%;
	}
	
	tr{
	-webkit-transition: opacity .25s;
	-o-transition: opacity .25s;
	transition: opacity .25s;
	}
	.archive table tr.linked:hover{
		/*background: rgba(255,255,255, .15);*/
		opacity: .5;
		cursor: pointer;
	
	}
	.archive table tr.headers{
		display: table-row;
	}
	.archive table th,
	.archive table td{
		display: table-cell;
		width: 33.33%;
		padding: .05em .5em .05em 0;
		background: transparent;
	}
	.archive table tr td:first-child{
		color: #9f9ea2;
		font-weight: 400;
	}
	.archive table tr td:last-child{
		padding-bottom: 0;
	}
	.archive table th{
		padding-bottom: .5em;
		color: #97b7d7;
		font-weight: 800;
	}
	.archive table span.label{
		display: none;
	}
	
	.content-wrap .title,
	.content-wrap .client,
	.content-wrap .director,
	.content-wrap .production-house{
		white-space: nowrap;
	}

	.slick-prev{
		left: 4%;
	}
	.slick-next{
		right: 4%;
	}
	
	
	
	/* contact */
	.contact .page-section{
		padding-top: 70px;
	}
	.contact-blocks{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-flow: row wrap;
		        flex-flow: row wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
		-ms-flex-line-pack: stretch;
		    align-content: stretch;
	}
	
	.address-block{
		width: 50%;
		height: 140px;
		padding: calc(50px + 2%) 3.5% 0 3.5%;
	}
	.address-block address{
		width: auto;
		margin: 0;
		font-size: .7em;
		line-height: 1.25em;
	}

}





/* Large devices (desktops, 992px and up)  */
@media (min-width: 992px) {
	
	body{
		font-size: 21px;
	}
	
	#nav,
	.nav-expanded #nav{
		top: 0;
		height: auto;
		margin: 1% 0 0 0;
	}
	
	.ios #nav .menu{
		height: 100vh;
	}
	.ios .slick-prev,
	.ios .slick-next{
		top: 50%;
	}
	.ios section.hero .content-wrap{
		height: 100vh;
	}

	/* dont think this is used... */
	/*
	.excerpt{
		padding: 0 5%;
		font-size: .85em;
		text-align: center;
	}
	*/
		
	section.hero .slide .image-container.full-size{
		display: block;
	}
	section.hero .slide .image-container.small-size{
		display: none;
	}
	
	.works .boxes .item{
		width: 50%;
		height: 28vw;	/* 16:9 */
		overflow: hidden;
		position: relative;
		background: url(gfx/bg-nav.jpg) repeat #c0d3e4 center center;
	}
	.works .item .image-wrap{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background: no-repeat transparent;
		background-size: cover;
		background-position: center top;
		opacity: 1;
		
		-webkit-transform: scale(1.01);
			-ms-transform: scale(1.01);
				transform: scale(1.01);	
		-webkit-transition: transform 2.5s ease-in-out, opacity .25s ease-in-out;
		-o-transition: transform 2.5s ease-in-out, opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out, -webkit-transform 2.5s ease-in-out;
		transition: opacity .25s ease-in-out, -webkit-transform 2.5s ease-in-out;
		transition: transform 2.5s ease-in-out, opacity .25s ease-in-out;
		transition: transform 2.5s ease-in-out, opacity .25s ease-in-out, -webkit-transform 2.5s ease-in-out;	
	}
	.works .item a:hover .image-wrap{
		-webkit-transform: scale(1.25);
			-ms-transform: scale(1.25);
				transform: scale(1.25);
		opacity: .2;
		-webkit-transition: transform 3.5s ease-out, opacity .25s ease-in-out;
		-o-transition: transform 3.5s ease-out, opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out, -webkit-transform 3.5s ease-out;
		transition: opacity .25s ease-in-out, -webkit-transform 3.5s ease-out;
		transition: transform 3.5s ease-out, opacity .25s ease-in-out;
		transition: transform 3.5s ease-out, opacity .25s ease-in-out, -webkit-transform 3.5s ease-out;
	}
	.works .item .content-wrap{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		margin: 0;
		padding: 2.5%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
		opacity: 0;
		-webkit-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;	
	}
	.works .item a:hover .content-wrap{
		opacity: 1;
	}
	


	/* contact */
	.contact .page-section{
		/*padding-top: 100px;*/
	}
	.contact-blocks{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-flow: row wrap;
		        flex-flow: row wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
		-ms-flex-line-pack: stretch;
		    align-content: stretch;
	}
	.contact .address-block{
		width: 25%;
		height: 180px;
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
	#map{
		height: 40vh;
		min-height: 350px;
	}

}


/* Extra large devices (large desktops, 1200px and up)  */
@media (min-width: 1200px) {
	body{
		font-size: 23px;
	}
	
	/* about */
	.about #main,
	.archive #main{
		background-size: 500px auto;
		background-position: 95% bottom;
	}
	
}



@media (min-width: 1600px) {
	body{
		font-size: 25px;
	}
	
	.contact-blocks-section .container{
		/*max-width: calc(1600px + 8%);*/
	}
	.contact-blocks-section .pad{
		background: #ff9f00;
	}
	.contact .address-block{
		width: 20%;
	}
	.address-block:first-child{
		padding-left: 13.75%; /* including .pad padding  */
		width: 35%;
	}
	.address-block:last-child{
		/*padding-right: 13.75%; */ /* including .pad padding  */
		width: 25%;
	}
	#map{
		height: 45vh;
		min-height: 450px;
	}
	
}