/*************************************************
				SITE-WIDE STYLES
*************************************************/

html, body {
	/* Clear margins & padding */
	margin:0;
	padding:0;
	
	/* Allow elements to size to 100% height of browser */
	height:100%;
	
	font-family:'Source Sans Pro', Tahoma, Arial, sans-serif;
	color:#333;
	font-size:23px;
	font-weight:300;
	
}

body {
	/* overflow:hidden; */
	background-image:url('../images/bg.png');
	background-position: center top; 	
	background-repeat:no-repeat;
	background-color:#fef7f7;
	background-size: 1800px;
}

header, hgroup, nav, menu, section, article, aside, footer {
	display: block;
}


h1, h2 {
	color:#999;
	text-transform:uppercase;
	line-height:100%;
	margin:0;
	padding:0;
	text-align:center;
}


h1 {
	font-size:37px;
	font-weight:600;
	color:#f05757; /* pink */
	line-height:100%;
	letter-spacing:3px;
}

h2 {
	color:#fff;
	font-weight:normal;
	/* font-weight:700; */
}

strong {
	font-weight:600;
}


img {
	width:100%;
}

.left {
	float:left;
}

.right {
	float:right;
}

.clear {
	clear:both;
}


.sideImage {
	float:left;
	width:43%;
	margin-top:-35px;
}

.rightText {
	margin-left:45%;
	margin-top:-30px;
}

.center {
	text-align:center;
}

img.widescreen_only {
	display:block;
}

img.mobile_only {
	display:none;
}


.absTop {
	position:absolute;
	top:0;
}


.link {
	text-transform:uppercase;
	font-family:'Raleway-Medium', Tahoma, Arial, sans-serif;
	font-weight:normal;
	display:inline-block;
	border:1px solid #bbb;
	margin:0 auto;
	padding:15px 20px;
	text-align:center;
}



.contents span {
	display:block;
	margin:1em 0;
}

a, a:active, a:visited {
	text-decoration:underline;
	color:#f06465;
	font-weight:bold;
	-webkit-transition:color 0.3s;
	-moz-transition:color 0.3s;
	transition:color 0.3s;
}

a:hover {
	color:#d3424a;
}


section {
	position:relative;
	box-sizing:border-box;
}



.contents {
	margin:0 auto;
	width:55%;
	padding:1px;
}

.whiteCover {
	background-color:#f00;
	opacity:1;
	width:100%;
	position:absolute;
	top:0;
	height:100%;
}



/*************************************************
				INTRO-SPECIFIC STYLES
*************************************************/

#intro {
	width:100%;
	height:770px;
	top:0;
	left:0;
}

#introContents {
	margin-top:520px;
	min-width:300px; 
	margin-left:-150px;
	left:50%;
	position:absolute;
	opacity:1;
}

#introContents img.title {
	width:50%;
	position:relative;
	left:25%
}


#introContents h2.title {
	font-weight:400;
	font-size:18px;
	color:#a0a0a0; /* lightgray */
	letter-spacing:3px;
	margin-top:7px;
}





/*************************************************
			THUMBS-SPECIFIC STYLES
*************************************************/



.workThumbs {
	padding-top:70px;
}

.workThumbs h1 {
	margin-bottom:40px;
}

.works {
	width:100%;
	padding: 0 2% 50px 2%;
	box-sizing:border-box;
}

.works .col {
 	width:32.6%;
	float:left;
	margin-left:1%;
	box-sizing:border-box;
}

.works .col:first-child {
	margin-left:0%;
}

/* Sweep To Top */
.thumbnail-hover  .caption {
	display: inline-block;
	vertical-align: middle;
	
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	
	-webkit-transition-property: color;
	transition-property: color;
	
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}






.works a {
	color: #555;
	font-weight:400;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	display:block;
	font-size:24px;
	text-transform:uppercase;
	text-align:left;
	text-decoration:none;
	letter-spacing:1px;
	overflow:hidden;
}
.works .caption {
	padding:10px 0;
	width:100%;
	display:block;
}


.caption h3, .caption h4 {
	margin:0;
	padding:0;
	
	-webkit-transition: transform 0.3s;
	transition: transform 0.3s;
	
	-webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
}

.caption h3 {
	font-size: 19px;
	font-weight:600;
}

.caption h4 {
	font-size:16px;
	font-weight:400;

}

/* Featured Element */

.feature {
	position:relative;
}

.feature .caption { /* Featured Caption */
	position:absolute;
	padding-left:3%;
	top:50%;
	-ms-transform:translate(0px, -50%);
	transform:translate(0px, -50%);
	color:#fff;
	width:40%;
	-webkit-transition: transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	box-sizing:border-box;
}

.feature .caption img { /* Featured logo */
	width:400px;
	position:relative;
	left:-10px;
}


.feature .caption p {
	text-transform:none;
	font-weight:300;
}



.thumbnail-hover img {
	opacity:1;
	transition:transform 0.3s, opacity 0.3s;
	
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

.thumbnail-hover:hover img {
	opacity:0.7;
}

.col.thumbnail-hover:hover img {
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

.col.thumbnail-hover:hover .caption h3, .col.thumbnail-hover:hover .caption h4 {
	-webkit-transform: translate(0px, 6px);
	transform: translate(0px, 6px);
	color:#333;
}



.feature.thumbnail-hover:hover .caption {
	-webkit-transform: translate(6px, -50%);
	transform: translate(6px, -50%);
}





/*************************************************
				ABOUT-SPECIFIC STYLES
*************************************************/

#about {
	text-align:center;
	
}

#about .about1, #about .about2 {
	width:50%;
	float:left;
	height:340px;
	overflow:hidden;
	position:relative;
}

#about .about1 {	
	margin-left:0;
	background-color:#43a5aa;		
}

#about .about2 {
	background-color:#f06465;
}

#about .about3 {
	width:100%;
	height:340px;
	background-color:#405574;
	position:relative;
}

#about p {
	text-transform:uppercase;
	font-size:18px;
	color:#fff;
	letter-spacing:3px;
	font-weight:300;
}


#about .iconText img {
	height:60px;
	width:auto;
}


#about .about1 > p{
	position:absolute;
	right:80px;
	top:70px;
}

#about .about1 .iconText {
	position:absolute;
	right:110px;
	top:140px;
}

#about .about2 > p {
	position:absolute;
	left:90px;
	top:70px;
}

#about .about2 .iconText {
	position:absolute;
	left:80px;
	top:140px;
}

#about .about3 > p {
	position:absolute;
	top:60px;
	left:50%;
	margin-left:-115px;
}

#about .about3 .coli {
	position:absolute;
	top:130px;
	left:50%;
	margin-left:-332px;
}

#about .about3 .coli .iconText {
	width:190px;
}



.coli .iconText, .coli .plus {
	float:left;
	overflow:hidden;
}


#about .plus {
	margin:5px 5px 0 20px;
	font-size:40px;
	font-weight:100;
}




/*************************************************
				GALLERY-SPECIFIC STYLES
*************************************************/
.slider {
	 overflow:hidden; /* Delete me to show thumbs */ 
	background-image:url('../img/ipadFrameLong.png');
	background-repeat:no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size:contain;
	-o-background-size: contain;
	/* Makes IE size correctly */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ipadFrameLong.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ipadFrameLong.png', sizingMethod='scale')";
	max-width:1500px;
	padding-left:8%;
	padding-top:4%;
	margin-top:30px;
}

.slider ul {
	-webkit-padding-start: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-before: 0px;
}

.shortDevice {
	background-image:url('../img/ipadFrame.png');
	/* Makes IE size correctly */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ipadFrame.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ipadFrame.png', sizingMethod='scale')";
}

.slider .img {
	width:100%;
}

.flexslider {
	border:none;
	overflow:hidden; 
	width:91.5%; 
	background:none;
	height:100%;
	-webkit-box-shadow:none;
	box-shadow:none;
}

.flex-viewport {
	border:3px solid #222;
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}


.flex-control-nav  {
	position:relative;
	bottom:-0.2em;
}

.flexslider a  {
	color:rgba(0, 0, 0, 0.8);
}

.flexslider a:hover {
	color:rgba(0, 0, 0, 0.9);
}


.flex-control-paging li a {
	background-color:#bbb;
}

.flex-control-paging li a.flex-active {
	background-color:#666;
}

.flex-control-paging li a:hover {
	background-color:#fff;
}

.texBG .contents {
	width:65%;
}

@media only screen and (max-width: 600px) {
	.flex-control-nav  {
		bottom:0em;
	}
}

/*************************************************
			STORY GALLERY-SPECIFIC STYLES
*************************************************/

#about .flexslider {
	overflow:visible;
	box-shadow: none;
}

#about .flex-viewport {
	border: none;
}

#about .slider {
	overflow:visible; /* Delete me to show thumbs */ 
	background-image:none;
	filter: none;
	-ms-filter: none;
	margin-bottom:150px;
}
#about .flex-direction-nav li .flex-next {
	right: -75px;
}

#about .flex-direction-nav li .flex-prev {
	left: -75px;
}

#about .flex-direction-nav a  {
	opacity: 1;
	color:#ddd;
}

#about .flex-control-paging li a {
	background-color:#ddd;
}

#about .flex-control-paging li a.flex-active {
	background-color:#66f;
}

#about .flex-control-nav {
	margin-bottom:-20px;
}
@media only screen and (max-width: 740px) {
	.flex-direction-nav a:before {
		font-size:30px;
	}
	#about .flex-direction-nav li .flex-next {
		right: -30px;
	}

	#about .flex-direction-nav li .flex-prev {
		left: -30px;
	}
}


/*************************************************
				COPYRIGHT + BACK
*************************************************/

.copyright {
	background-color:#405574;
	color:#fff;
	margin-top:100px;
}

.copyright h1 {
	color:#fff;
}

.copyright a {
	color:#fff;
}

.copyright h2 {
	color:#999;
	margin:30px 0;
}

.copyright p {
	width:750px;
	margin:0 auto;
}

section.copyright  {
	padding:0;
	padding-top:70px;
	padding-bottom:20px;
}

.copyright .center {
	margin-top:30px;
}

.links {
	max-width:280px;
	min-width:100px;
	margin:0 auto;
	margin-top:20px;
}

.links a {
	display:block;
	float:left;
}

.links a img,
.links a:visited img, 
.links a:active img {
	opacity:1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	
	
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	width:60px;
	margin-right:10px;
	margin-top:20px;
	
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}
.links .last a img {
	margin-right:0;
}

.links a:hover img {
	opacity:1;
	-webkit-transform: translate3d(0,-10%,0);
	transform: translate3d(0,-10%,0);
	
	-webkit-backface-visibility: visible;
	backface-visibility: visible;

}





/*************************************************
				NAV
*************************************************/

nav {
	text-transform:uppercase;
	box-sizing:border-box;
	position:fixed;
	z-index:20;

	left:0;
	padding-top:10px;
	

	background-color:#43a5aa;
	opacity:0.9;

	width:100%;
	min-height:50px;

}


nav div a, nav div a:active, nav div a:visited {	
	text-decoration:none;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,-0,0);
}

nav div a:hover {	
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,10%,0);
	transform: translate3d(0,10%,0);
}

nav .right a , nav .right a:active, nav .right a:visited {
	position:relative;
	overflow:hidden;
	display:block;
	padding-bottom:6px;
	font-weight:600;
	letter-spacing:3px;
	font-size:18px;
	color:#fff;
}



nav .left {
	margin:0 30px;

}
nav .left a {
	position:absolute;
	width:80px;
	height:80px;
	background-image:url('../images/logo.png');
	background-size:100% 100%;
	background-repeat:no-repeat;
	display:none;
}


nav .right .left {
	margin-right:50px;
}

nav #menuDrawer {
	display:none;
}


@media only screen and (max-width: 990px) {
	
	nav #menuDrawer {
		display:block;
		width:36px;
		height:30px;
		background-image:url('../images/icon_burger.png');
		background-repeat:no-repeat;
		background-size:100% 100%;
		margin:0 30px;
		float:right;
	}
	
	nav .right {
		display:none;
		clear:both;
		float:none;
		text-align:center;
		padding-top:30px;
		padding-bottom:30px;
		box-sizing:border-box;
		opacity:1;
		background-color:#43a5aa;
	}
	
	nav .right .left {
		float:none;
		text-align:center;
		margin-bottom:10px;
		width:auto;
	}
}


/**
	Down button
**/

img.down {
	position:absolute;
	display:block;
	z-index:2;
	left:50%;
	margin-top:5vh;
	margin-left:-95px;
	margin-left:-15vh;
	width:30vh;	
	-webkit-animation: pulseDown 1.5s;
	animation: pulseDown 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

a.downLink {
	position:fixed;
	bottom:10vh;
	z-index:2;
	left:50%;
	margin-left:-95px;
	margin-left:-15vh;
	width:30vh;	
	height:20vh;
	display:block;
} 


/* Chrome, Safari, Opera */
@-webkit-keyframes pulseDown {
    0% {margin-top:1vh;opacity:0;}
    50% {margin-top: 6vh;opacity:1;}
    100% {margin-top:7vh;opacity:0;}
}

/* Standard syntax */
@keyframes pulseDown {
    0% {margin-top:1vh;opacity:0;}
    50% {margin-top: 6vh;opacity:1;}
    100% {margin-top:7vh;opacity:0;}
}




/*************************************************
				RESPONSIVE TABLET
*************************************************/

@media only screen and (max-width: 1300px) {
	
	.sideImage {
		float:none;
		width:60%;
		margin:0 20%;
	}
	
	.texBG .contents, .contents  {
		width:90%;
	}
	.rightText, #about h1 {
		margin-left:0;
	}

	.feature .caption img {
		width:250px;
	}

	.feature .caption {
		width:55%;
	}

	.feature p {
		font-size:18px;
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
	}
}

/*************************************************
				RESPONSIVE MOBILE
*************************************************/

@media only screen and (max-width: 800px) {
	
	img.widescreen_only {
		display:none;
	}

	img.mobile_only {
		display:block;
	}

	/* About */
	
	#about .about1, #about .about2 {
		float:none;
		width:100%;
	}
	
	/* About 1 */
	
	#about .about1 > p {
		right: 50%;
		margin-right:-125px;
	}
	#about .about1 .iconText {
		right:50%;
		margin-right:-96px;
	}
	
	/* About 2 */
	
	#about .about2 > p {
		left:50%;
		margin-left:-110px;		
	}
	
	#about .about2 .iconText {
		left:50%;
		margin-left:-115px;
	}
	
	/* About 3 */
	
	#about .about3 {
		height:760px;
	}
	
	#about .about3 .coli {
		margin-left:-133px;
		margin-top:-10px;
	}
	
	#about .about3 > p {
		top:70px;
	}
	
	#about .about3 .coli .iconText {	
		float:none;
		width:auto;
		margin-top:30px;
	}
	
	#about .about3 .plus {
		float:none;
		margin:0;
	}
	
	.works {
		padding-bottom:0;
	}
	
	/* Works thumbnails */
	.works .col {
		width:95%;
		margin:0 auto;
		margin-bottom:20px;
		float:none;

	}
	
	.works .col, .works .col:first-child {
		margin: 0 auto;
		margin-bottom:20px;
	}

	.feature {
		width:95%;
		margin:0 auto;
		margin-bottom:20px;
	}
	
	.feature .caption {
		position:relative;
		-ms-transform:translate(0px, 0%);
		transform:translate(0px, 0%);
		background-color:#242838;
		width:100%;
		display:block;	
		padding:40px;
	}

	.feature.thumbnail-hover img {
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1);
	}

	.feature.thumbnail-hover:hover img {
		-webkit-transform: scale3d(1.05,1.05,1);
		transform: scale3d(1.05,1.05,1);
	}

	.feature.thumbnail-hover:hover .caption {
		-webkit-transform: translate(0px, 0%);
		transform: translate(0px, 0%);
		background-color:#393d4b;

	}

	.copyright {
		margin-top:70px;
	}
	
	.copyright p {
		width:95%;
		font-size:20px;
	}

}

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

	body {
		font-size:20px;
		background-position:center -110px;
	}	
	#intro {
		height:500px;
	}
	
	#introContents {
		margin-top:390px;
	}
	
	h1 {
		font-size:30px;
	}
	#introContents h2.title {
		font-size:14.5px;
	}
	
	nav .left {
		margin: 0 10px;
	}
	
	.works .caption {
		font-size:20px;
	}
	
	.copyright p {
		font-size:20px;
	}
}