@carset "utf-8";


/*-----------------------------------------------------------------
COLUMNATION
-----------------------------------------------------------------*/
.container12 {
    margin:0 auto;
    padding:0;
    width:100%;
	position:relative;
}
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
	width:100%;
    display:block;
    float:left;
    padding-left:35px;
    padding-right:35px;
	padding-top:0px;
	padding-bottom:0px;
	position:relative;
}
.container12 .alpha {padding-left:0px;}
.container12 .omega {padding-right:0px;}
.clearfix:after, .container12:after {clear:both;}
/* For IE7. Move this to separate file when you notice some problems */
.clearfix {zoom:1;}
img, object, embed {max-width:100%;}
img {height:auto;}
.clearfix:before, .clearfix:after,
.container12:before, .container12:after {
    content:'.';
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}


/*-----------------------------------------------------------------
GENERAL AND DEFAULTS
-----------------------------------------------------------------*/
html, body, .post, .page{
	background:#191919;
	line-height:0px;
	color:#FFF;
    margin:0px;
}
*{
    -moz-box-sizing:border-box !important;
    -webkit-box-sizing:border-box !important;
    box-sizing:border-box !important;
}
*:focus{
	outline:none !important;
}
*:focus-visible{
	outline:2px solid #000 !important;
}
.sr-only{
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.container12{
	font-family: 'Karla', sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
}
p{
	font-family:inherit;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	margin:0px;
}
p + p, p + ul, ul + p, ol + p, p + ol, p + ul, li ul{
	padding:20px 0px 0px 0px;
}
p + h2, p + h3, p + h4{
	padding-top:30px;
}
	
a.skip {
	display:inline-block;
	padding:10px;
	background:#000;
	color:#FFF !important;
	z-index:9999;
	position: absolute;
	top: -1000px;
	left: -1000px;
	text-align: left;
	overflow: hidden;
}
a.skip:active,  
a.skip:focus, 
a.skip:hover {
	font-size:15px;
	line-height:normal;
	color:#4298B5;
	left: 0; 
	top: 0;
	width: auto; 
	height: auto; 
	overflow: visible; 
}

h1{
	color:#ea823a;
	padding:0px;
	margin:0px 0px 15px 0px;
	font-weight:400;
	font-size:70px;
	line-height:70px;
	font-family: 'Passion One', sans-serif;
	text-transform:uppercase;
}
h1 span{
	display:block;
	color:#FFF;
	font-size:40px;
	line-height:40px;
}
h2{
	color:#ea823a;
	padding:0px;
	margin:0px 0px 15px 0px;
	font-weight:400;
	font-size:34px;
	line-height:36px;
	font-family: 'Passion One', sans-serif;
	text-transform:uppercase;
}

strong{
	font-family: 'Karla', sans-serif;
	font-weight:700;
}

a:link, a:visited{
	font-family: 'Karla', sans-serif;
	font-weight:700;
	color:#ea823a;
	text-decoration:none;
}
a:hover, a:active, a:focus{
	font-family: 'Karla', sans-serif;
	font-weight:700;
	color:#ea823a;
	text-decoration:underline;
}

.spacer{
	width:100%;
	height:100px;
}

ul{
	margin:0px;
	padding:0px;
}
ol{
	margin:0px;
	padding:0px;
}
ul li, ol li{
	margin-left:20px;
	padding-top:4px;
	padding-bottom:0px;
}
ul li:last-child, ol li:last-child{
	padding-bottom:0px;
}

hr{
	width:100%;
	margin:20px 0px 20px 0px;
	padding:0px;
	border:0px;
	background:#ea823a;
	height:1px;
}

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


/*-----------------------------------------------------------------
TOP STYLES AND CONTAINERS
-----------------------------------------------------------------*/
#TOP_COMPENSATION{
	height:70px;
}
#TOP{
	background:#191919;
	z-index:12;
	position:fixed;
	width:100%;
	left:0px;
	top:0px;
	height:70px;
	padding-left:30px;
	padding-right:30px;
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
#TOP.shadow:after{
	content:"";
	position:absolute;
	bottom:0px;
	left:0px;
	display:inline-block;
	width:100%;
	height:20px;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
}
#TOP.hidden{
	top:-100px;
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
#TOP.active{
	top:0px;
	position:fixed;
	left:0px;
}
.navigation_container{
	position:relative;
	width:100%;
	height:100%;
}
#TOP #logo{
	z-index:14;
	position:absolute;
	display:inline-block;
	top:18px;
	width:52px;
	height:auto;
}
#TOP #logo img{
	width:100%;
	height:auto;
}
#TOP a:focus-visible{
	outline:2px solid #FFF !important;
}

button.menu-toggle{
	z-index:16;
	border:0px;
	padding:0px;
	margin:0px;
	background:none;
	width:40px;
	height:70px;
	position:absolute;
	cursor:pointer;
	right:0px;
	top:0px;
	background:url(/images/menu-icon-large.png) center center no-repeat;
	background-size:contain;
	filter:brightness(0) invert(1);
}
button.menu-toggle-active{
	background:url(/images/close-icon-large.png) center center no-repeat;
	background-size:contain;
}
ul#primary-menu{
	z-index:11;
	display:none;
	width:100%;
	height:calc(100% - 70px);
	top:70px;
	left:0px;
	list-style:none;
	position:fixed;
	background:#191919;
	margin:0px;
	padding:25px 35px 0px 35px;
}
ul#primary-menu li{
	background:none;
	position:relative;
	display:inline-block;
	width:100%;
	list-style:none;
	padding:0px;
	margin:0px;
	text-align:right;
}
ul#primary-menu li a{
	text-decoration:none;
	display:inline-block;
	width:100%;
	font-size:36px;
	font-weight:700;
	font-family: 'Karla', sans-serif;
	line-height:normal;
	text-transform:uppercase;
	color:#FFF;
	position:relative;
	padding:30px 0px 30px 0px;
}
ul#primary-menu li a:before{
	content:"";
	top:0px;
	right:0px;
	position:absolute;
	display:inline-block;
	width:300px;
	height:1px;
	background:#FFF;
}
ul#primary-menu li a:hover, ul#primary-menu li a:focus{
	color:#ea823a;
}
ul#primary-menu li:first-child a:before{
	background:none;
}
	
	
/*-----------------------------------------------------------------
HOME + WORK
-----------------------------------------------------------------*/	
.home_logo_container{
	display:table;
	width:100%;
	height:100vh;
	position:relative;
}
.home_logo{
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.home_logo_container:after{
	content:"";
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	display:inline-block;
	height:5px;
	background:#ea823b;
}

#homepage_icon{
	display:inline-block;
	width:110px;
	height:90px;
	position:relative;
}
#homepage_icon img{
	width:100%;
	height:auto;
	opacity:0;
	position:absolute;
	top:0px;
	left:0px;
}
img#icon_right.animate{
	animation-name: icon_right;
	animation-duration: 0.6s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}
img#icon_left.animate{
	animation-name: icon_left;
	animation-duration: 0.6s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}
img#icon_dot_right.animate{
	animation-name: icon_dot_right;
	animation-duration: 1s;
	animation-delay: 0.65s;
	animation-fill-mode: forwards;
}
img#icon_dot_left.animate{
	animation-name: icon_dot_left;
	animation-duration: 1s;
	animation-delay: 0.85s;
	animation-fill-mode: forwards;
}
h1.animate{
	opacity:0;
	animation-name: h1_animate;
	animation-duration: 0.6s;
	animation-delay: 1.0s;
	animation-fill-mode: forwards;
}
h1.animate span{
	margin-top:-50px;
	opacity:0;
	animation-name: h1_animate_span;
	animation-duration: 0.6s;
	animation-delay: 1.2s;
	animation-fill-mode: forwards;
}
a#start{
	position:relative;
	display:inline-block;
	width:25px;
	height:25px;
	height:auto;
	opacity:0;
	animation-name: welcome_arrow;
	animation-duration: 0.4s;
	animation-delay: 1.75s;
	animation-fill-mode: forwards;
}
a#start img{
	animation-name: welcome_arrow_img;
	width:100%;
	position:absolute;
	left:0px;
	top:0px;
	animation-duration: 1.5s;
	animation-delay: 1.7s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
}

@keyframes icon_right{
	from{
		opacity:0;
		margin-left:-30%;
	}
	25%{
		opacity:1;
	}
	to{
		opacity:1;
		margin-left:0%;
	}
}
@keyframes icon_left{
	from{
		opacity:0;
		margin-left:30%;
	}
	25%{
		opacity:1;
	}
	to{
		opacity:1;
		margin-left:0%;
	}
}
@keyframes icon_dot_right{
	from{
		opacity:1;
	}
	to{
		opacity:1;
	}
}
@keyframes icon_dot_left{
	from{
		opacity:1;
	}
	to{
		opacity:1;
	}
}
@keyframes h1_animate{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	}
}
@keyframes h1_animate_span{
	from{
		margin-top:-50px;
		opacity:0;
	}
	to{
		margin-top:0px;
		opacity:1;
	}
}
@keyframes welcome_arrow{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	}
}
@keyframes welcome_arrow_img{
	from{
		top:0;
	}
	50%{
		top:20px;
	}
	to{
		top:0;
	}
}

.work_container{
	margin:0px;
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	row-gap:0px;
	column-gap:0px;
}
@media only screen and (min-width:600px) {
	.work_container{
		grid-template-columns:repeat(2, 1fr);
	}
}
@media only screen and (min-width:1280px) {
	.work_container{
		grid-template-columns:repeat(3, 1fr);
	}
}
@media only screen and (min-width:1600px) {
	.work_container{
		grid-template-columns:repeat(4, 1fr);
	}
}
.work_container .work{
	display:inline-block;
}
.work_container .work a{
	display:inline-block;
	width:100%;
	height:auto;
	padding-bottom:70%;
	position:relative;
	overflow:hidden;
}
.work_container .work a span.work_image{
	display:inline-block;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	position:absolute;
	z-index:1;
	opacity:0.05;
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
.work_container .work a:hover span.work_image, .work_container .work a:focus span.work_image{
	opacity:1;
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
.work_container .work a span.work_title{
	display:inline-block;
	width:100%;
	height:auto;
	bottom:-50px;
	left:0px;
	padding:20px;
	background:#191919;
	position:absolute;
	z-index:3;
	opacity:0;
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:700;
	font-size:20px;
	line-height:normal;
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
.work_container .work a:hover span.work_title, .work_container .work a:focus span.work_title{
	bottom:0px;
	opacity:1;
	color:#FFF;
	text-decoration:none;
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
.work_container .work a img.work_logo{
	display:inline-block;
	width:180px;
	height:180px;
	margin-left:50%;
	margin-top:35%;
	left:-80px;
	top:-80px;
	position:absolute;
	z-index:3;
	opacity:1;
	transform: scale(1);
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}
.work_container .work a:hover img.work_logo, .work_container .work a:focus img.work_logo{
	opacity:0;
	transform: scale(1.1);
	transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
}


/*-----------------------------------------------------------------
MEDIA QUERIES
-----------------------------------------------------------------*/	
@media only screen and (min-width:768px) {
	/*-----------------------------------------------------------------
	COLUMNATION
	-----------------------------------------------------------------*/
    .container12 {
		width:100%;
		max-width:1400px;
		padding-right:50px;
		padding-left:50px;
	}
    .container12 .column1 {width:8.333%;}
    .container12 .column2 {width:16.666%;}
    .container12 .column3 {width:25%;}
    .container12 .column4 {width:33.333%;}
    .container12 .column5 {width:41.666%;}
    .container12 .column6 {width:50%;}
    .container12 .column7 {width:58.333%;}
    .container12 .column8 {width:66.666%;}
    .container12 .column9 {width:75%;}
    .container12 .column10 {width:83.333%;}
    .container12 .column11 {width:91.666%;}
    .container12 .column12 {width:100%;}
    .container12 .prefix1 {margin-left:8.333%;}
    .container12 .prefix2 {margin-left:16.666%;}
    .container12 .prefix3 {margin-left:25%;}
    .container12 .prefix4 {margin-left:33.333%;}
    .container12 .prefix5 {margin-left:41.666%;}
    .container12 .prefix6 {margin-left:50%;}
    .container12 .prefix7 {margin-left:58.333%;}
    .container12 .prefix8 {margin-left:66.666%;}
    .container12 .prefix9 {margin-left:75%;}
    .container12 .prefix10 {margin-left:83.333%;}
    .container12 .prefix11 {margin-left:91.666%;}
	
	.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
		padding-left:20px;
		padding-right:20px;
		padding-top:0px;
		padding-bottom:0px;
	}

	.spacer{
		height:120px;
	}
	
	
	/*-----------------------------------------------------------------
	GENERAL AND DEFAULTS
	-----------------------------------------------------------------*/
	.container12{
		font-size:20px;
		line-height:30px;
	}
	h1{
		font-size:80px;
		line-height:80px;
	}
	h1 span{
		font-size:45px;
		line-height:45px;
	}
	h2{
		margin:0px 0px 15px 0px;
		font-size:48px;
		line-height:50px;
	}
	
	
	/*-----------------------------------------------------------------
	TOP STYLES AND CONTAINERS
	-----------------------------------------------------------------*/
	
	
	/*-----------------------------------------------------------------
	HOME + WORK
	-----------------------------------------------------------------*/
	#homepage_icon{
		width:125px;
		height:100px;
	}
	a#start{
		width:30px;
	}
}


@media only screen and (min-width:1024px){	
	/*-----------------------------------------------------------------
	GENERAL AND DEFAULTS
	-----------------------------------------------------------------*/
	.container12{
		font-size:22px;
		line-height:32px;
	}
	h1{
		font-size:90px;
		line-height:90px;
	}
	h1 span{
		font-size:50px;
		line-height:50px;
	}
	h2{
		margin:0px 0px 20px 0px;
		font-size:56px;
		line-height:60px;
	}

	.spacer{
		height:140px;
	}
	
	
	/*-----------------------------------------------------------------
	TOP STYLES AND CONTAINERS
	-----------------------------------------------------------------*/
	
	
	/*-----------------------------------------------------------------
	HOME + WORK
	-----------------------------------------------------------------*/
	#homepage_icon{
		width:125px;
		height:100px;
	}
	a#start{
		width:35px;
	}
}


@media only screen and (min-width:1280px){	
	/*-----------------------------------------------------------------
	GENERAL AND DEFAULTS
	-----------------------------------------------------------------*/
	h1{
		font-size:100px;
		line-height:100px;
	}
	h1 span{
		font-size:55px;
		line-height:55px;
	}

	.spacer{
		height:160px;
	}
	
	
	/*-----------------------------------------------------------------
	TOP STYLES AND CONTAINERS
	-----------------------------------------------------------------*/
	
	
	/*-----------------------------------------------------------------
	HOME + WORK
	-----------------------------------------------------------------*/
	#homepage_icon{
		width:145px;
		height:120px;
	}
	a#start{
		width:40px;
	}
}


@media only screen and (min-width:1280px){	
	/*-----------------------------------------------------------------
	GENERAL AND DEFAULTS
	-----------------------------------------------------------------*/
	.container12{
		font-size:22px;
		line-height:32px;
	}
	h2{
		margin:0px 0px 20px 0px;
		font-size:60px;
		line-height:64px;
	}
	
	.spacer{
		height:180px;
	}
}