div#preload { display: none; }

@font-face {
    font-family: 'futura-pt-light'; /*a name to be used later*/
    src: url("fonts/FuturaStd-Light.otf") format("opentype"); /*URL to font*/
}

@font-face {
    font-family: 'futura-pt-medium'; /*a name to be used later*/
    src: url("fonts/FuturaStd-Medium.otf") format("opentype"); /*URL to font*/
}

@font-face {
    font-family: 'futura-pt-heavy'; /*a name to be used later*/
    src: url("fonts/FuturaStd-Heavy.otf") format("opentype"); /*URL to font*/
}

body{
	background:#0a0a0a;
	min-width: 546px;
	max-width: 1500px;
	padding:16px 32px;
	margin: 0 auto;
	}

header{
	position:center;
	height:128px;
}

a {
    color: #ff1952
}

.intro_text a {
    color:#ddd;
}

.intro_credits a {
    color:#ff1952;
}

.footer-flex-container {
    display: -webkit-flex;
    display: flex;
    height: 32px;
    width: auto;
    float: left;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;

}

.footer-flex-item-sprite {
    width: auto;
    margin: 0px 0px;
}

.footer-flex-item-social img {

    height: 24px;
    width: 24px;
    margin-left: 13px;
    opacity: 0.3;

}

.footer-flex-item-text {
    width: 100px;
    margin: 0px 16px;
}

.footer-flex-item-text p {

    margin-top: 16px;
    margin-bottom: 16px;
    font-family: "futura-pt-light";
    font-size: 9px;
    line-height: 1.6em;
    text-decoration: none;
    text-align: left;
    color:#ddd;
    opacity: .5;
    letter-spacing: 0.5px;
}

.footer-flex-item img {
    float: left;
}

.footer-flex-item-text a {
    color:#ddd;
}


.footer-flex-container-right {
    display: -webkit-flex;
    display: flex;
    height: 32px;
    width: auto;
    float: right;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;

}

.footer-flex-item-copyright {
    width: 326px;
    margin: 0px 0px;
    float: right;
}

.footer-flex-item-copyright p {

    margin-top: 16px;
    margin-bottom: 16px;
    font-family: "futura-pt-light";
    font-size: 9px;
    line-height: 1.6em;
    text-decoration: none;
    text-align: right;
    color:#ddd;
    opacity: .5;
    letter-spacing: 0.5px;
}

.footer-flex-item-copyright a {
    color:#ddd;
}

.button:focus {
    outline: none; /* overrides chrome default focus outline */
}

.logo {
	float: left;
	display: block;
	width: 128px;
	height: 128px;
}

.flex-container {
	display: -webkit-flex;
	display: flex;
	height: 100%;
	width: auto;
	float: right;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
  	align-items: center;

}

.flex-item {
	width: auto;
	margin: 16px;
}

.flex-item a {
	display: inline-block;
	line-height: 100%;
/*	padding: 49px;*/	
	color:#ddd;
	font-family: "futura-pt-medium";
	font-size: 13px;
    line-height: 1.6em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 400;
    font-style: normal;
}

.flex-item a:hover {
	color:#ff1852;

}

.page-divider {
	border-bottom: 1px solid #ddd;
    margin-bottom: 2px;
}

#vimeo_showreel {
	width: 100%;
	height: auto;
	margin-top: 16px;
	position: center;
	overflow: hidden;
}

#vimeo_showreel img {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.content{
	margin:0 auto;
	padding:0;
	position:center;
	padding:0px;
}

/*Hero Slides*/

#hero_slides{

	margin-top: 16px;
	margin-bottom: 16px;
    background: url(../images/scty_loader.gif);
    background-size: 100% auto;
}

#hero_slides img{
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* Required to hold the caption, or any closest parent selector to  .slide__caption */
.slide {
  position: relative;
}

.slide__caption {
	display:block;
	padding:0 30px;
	box-sizing:border-box;
	position:absolute;
	left:0;
	width:100%;
	text-align:center;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.5vw;
	font-weight: 400;
	font-style: normal;
	font-size: 4vw;
	line-height: 1.6em;
	font-weight:bold;
	font-family: 'futura-pt-heavy';
	font-weight:normal!important;
	top:45%;
	color:#ff1952;
	opacity:0.0;
    transition:all 0.15s;
    transform:translateY(-15px)
	}

.slide__category {
	display:block;
	padding:0 30px;
	box-sizing:border-box;
	position:absolute;
	left:0;
	width:100%;
	text-align:center;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.25vw;
	font-weight: 400;
	font-style: normal;
	font-size:1vw;
	line-height: 1.6em;
	font-weight:bold;
	font-family: 'futura-pt-medium';
	font-weight:normal!important;
	top:59%;
	color:white;
	opacity:0.0;
    transition:all 0.15s;
    transform:translateY(15px)
	}

#hero_slides:hover {
    background: transparent;
}

#hero_slides:hover .slide__caption {
    opacity:1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
    transform:translateY(0px)

}

#hero_slides:hover .slide__category {
    opacity:1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
    transform:translateY(0px)
}

#hero_slides:hover .slick-slide img {
    opacity:.2;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
}

/*thumbnail gallery*/

.thumbnail_gallery {
    margin-top: 16px;
}

#rig {
    max-width:1500px;
    margin:0 auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
    background-color:#0a0a0a;
    margin-bottom: 16px;

}
#rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    width:33.33%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
        
/* The wrapper for each item */
.rig-cell {
    /*margin:13px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
}
        
/* If have the image layer */
.rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;
    transition:all 0.15s;
    opacity:1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
}

#rig li:hover .rig-img {
    opacity:.1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
}
        
/* If have the overlay layer */
.rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #ff1952 url('') no-repeat center 20%;
    background-size:50px 50px;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.15s;
}
#rig li:hover .rig-overlay {
    opacity:0.0;
}

/* If have captions */
.rig-text {
    display:block;
    padding:0 30px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 400;
    font-style: normal;
    font-size:13px;
    line-height: 1.6em;
    font-weight:bold;
    font-family: 'futura-pt-medium';
    font-weight:normal!important;
    top:50%;
    color:#ddd;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-16px);
    transition:all .15s;
}

#rig li:hover .rig-text {
    transform:translateY(0px);
    opacity:0.9;
}

@media (max-width: 9000px) {
    #rig li {
        width:33.33%;
    }
}

@media (max-width: 1080px) {
    #rig li {
        width:50%;
    }
}

@media (max-width: 745px) {
    #rig li {
        width:50%;
    }
}

/*playground gallery*/


#playground-rig {
    max-width:1500px;
    margin:0 auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
    background-color:#0a0a0a;
    margin-bottom: 16px;

}
#playground-rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    width:33.33%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
        
/* The wrapper for each item */
.playground-rig-cell {
    /*margin:13px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
}
        
/* If have the image layer */
.playground-rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;
    transition:all 0.15s;
    opacity:1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
}

#playground-rig li:hover .playground-rig-img {
    opacity:.1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0);
}
        
/* If have the overlay layer */
.playground-rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #ff1952 url('') no-repeat center 20%;
    background-size:50px 50px;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.15s;
}
#playground-rig li:hover .playground-rig-overlay {
    opacity:0.0;
}

/* If have captions */
.playground-rig-text {
    display:block;
    padding:0 30px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 400;
    font-style: normal;
    font-size:13px;
    line-height: 1.6em;
    font-weight:bold;
    font-family: 'futura-pt-medium';
    font-weight:normal!important;
    top:50%;
    color:#ddd;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-16px);
    transition:all .15s;
}

#playground-rig li:hover .playground-rig-text {
    transform:translateY(0px);
    opacity:0.9;
}

@media (max-width: 9000px) {
    #playground-rig li {
        width:12.5%;
    }
}

@media (max-width: 1080px) {
    #playground-rig li {
        width:25%;
    }
}

@media (max-width: 745px) {
    #playground-rig li {
        width:25%;
    }
}

/*Project Layout*/

.project_header {
    float: left;
    width: 85%;
    text-align:left;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 400;
    font-style: normal;
    font-size:32px;
    line-height: 1.6em;
    font-weight:bold;
    font-family: 'futura-pt-heavy';
    font-weight:normal!important;
    top:59%;
    color:#ff1952;
}

.project_icons {
    width: 15%;
    float: right;
}

.project_icons img {
    float: right;
    height: 32px;
    width: 32px;
    margin-left: 6px;
}

.intro_container {

    margin-top:16px;

}

.intro_text {

    display:inline-block;
    width:66%;
    height: 100%;
    margin-right:auto; 
    margin-left:0;
    margin-bottom:16px;

    letter-spacing: 1px;
    font-weight: 400;
    font-style: normal;
    font-size:13px;
    line-height: 1.6em;
    font-weight:lighter;
    font-family: 'futura-pt-light';
    font-weight:normal!important;
    color:#ddd;
    opacity:0.5;

    column-count: 1;

    column-gap: 40px;
    overflow: hidden;

}

.intro_credits {

    display:inline-block;
    width: 30%;
    height: auto;
    float: right;

    margin-right:0; 

    letter-spacing: 1px;
    font-weight: 400;
    font-style: normal;
    font-size:13px;
    text-align: right;
    line-height: 1.6em;
    font-weight:lighter;
    font-family: 'futura-pt-light';
    font-weight:normal!important;
    color:#ff1952;

}

@media (max-width: 9000px) {
    .intro_text {
        column-count: 1;

        column-gap: 40px;
    }
}

@media (max-width: 1080px) {
    .intro_text {
        column-count: 1;
    }

    .intro_text {
        width:100%;
    }

    .intro_credits {
        display:none;
    }

    .project_icons {
        display:none;
    }

    .footer-flex-item-social{
        display: none;
    }
}

@media (max-width: 745px) {
    .intro_text {
        column-count: 1;
    }

    .intro_text {
        width:100%;
    }

    .intro_credits {
        display: none;
    }

    .project_icons {
        display: none;
    }

    .footer-flex-item-social{
        display: none;
    }
}
.project_image_loader img {
    
}

.project_image {
    width: 100%;
    height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    position: center;
    overflow: hidden;
}

.project_image img {
    width: 100%;
    height: auto;
    overflow: hidden;
    opacity: 0.25;
    transition: opacity .3s ease-in;
}

.project_image_caption {

    padding-top: 8px;
    margin-bottom:13px;

    letter-spacing: 1px;
    font-weight: 400;
    font-style: normal;
    font-size:13px;
    line-height: 1.6em;
    font-weight:lighter;
    font-family: 'futura-pt-light';
    font-weight:normal!important;
    text-align: center;
    color:#ddd;
    opacity:0.5;

}

#project_slides{

    margin-top: 16px;
    margin-bottom: 16px;

}

#project_slides img{
    width: 100%;
    height: auto;
    overflow: hidden;
}

.embed-container { 
    margin-top: 16px;
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    max-height:643px; 
    height: auto; 
    margin-bottom: 16px;
}

.embed-container-thin { 
    margin-top: 16px;
    position: relative; 
    padding-bottom: 34.4%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    max-height:643px; 
    height: auto; 
    margin-bottom: 16px;
} 

.embed-container-235aspect { 
    margin-top: 16px;
    position: relative; 
    padding-bottom: 42.533%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    max-height:643px; 
    height: auto; 
    margin-bottom: 13px;
} 

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