@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700');

html, body{
	background:#4ecdc4 url(img/bg.gif) center center repeat;
	width:100%;
	margin:0;
	height:100%;
	position:relative;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:22px;
	color:#888;
	background-attachment:fixed;
}

body.web{
	background:#4ecdc4 url(img/web-hero.jpg) top center no-repeat;
	background-attachment:fixed;
}

body.print{
	background:#4ecdc4 url(img/print-hero.jpg) top center no-repeat;
	background-attachment:fixed;
}

body.extras{
	background:#4ecdc4 url(img/extras-hero.jpg) top center no-repeat;
	background-attachment:fixed;
}


#stickyHeader{
	position:fixed;
	top:-57px;
	left:0;
	width:100%;
	text-align:center;
	z-index:99999;
	height:57px;
	background:rgba(211,89,89,.6);
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
    -ms-transition: all .3s ease;
	transition: all .3s ease;
}

#stickySubpageHeader{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	z-index:99999;
	height:57px;
}

#stickyHeader a.logo, #stickySubpageHeader a.logo{
	width:150px;
	display:inline-block;
	padding: 5px 10px;
}

#stickyHeader a.logo img, #stickySubpageHeader a.logo img{
	width:100%;
	height:auto;
	display:block;
}

 #stickySubpageHeader a.logo img{
	 -webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
    -ms-transition: all .2s ease;
	transition: all .2s ease;
	 opacity:.5;
 }

 #stickySubpageHeader a.logo:hover img{
 	opacity:1;
 }

#stickyHeader.visible{
	top:0;
}

h1, h2{
	text-align:center;
	font-size:92px;
	color:#fff;
}

@-moz-keyframes bounce {
  0%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}
@-webkit-keyframes bounce {
  0%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}
@keyframes bounce {
  0%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}
.mouse {
    position: fixed;
    bottom: 30px;
    z-index: 1;
    left: 50%;
    margin-left: -10px;
    width: 21px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid white;
    background: rgba(255,255,255,.1);
}

.mousewheel{
	position:absolute;
	top:7px;
	left:10px;
	width:1px;
	height:7px;
	background:white;
}

.bounce {
  -moz-animation: bounce 1.5s infinite;
  -webkit-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}

.mobileSwipeContainer{display:none}

#heroImageContainer{
	height:500px;
	width:100%;
	float:left;
	position:relative;
	display:block;
	z-index:1;
}

#heroImageContainer>div{
	display:table;
	width:100%;
	height:100%;
}

#heroImageContainer>div>div{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

#heroImageContainer img{
	width:90%;
	max-width:725px;
	height:auto;
}



.contentContainer h2{
	margin: 0 0 40px;
}


#bodyContainer{
	width:100%;
	float:left;
	background:white;
	box-shadow:0 0 50px #13776D;
	position:relative;
	z-index:5;
}

.contentContainer{
	width:90%;
	float:left;
	position:relative;
	display:block;
	padding: 80px 0;
	margin:0 5%;
	z-index:1;
}

#skillsContainer{
	text-align:center;
	border-bottom:2px dashed #4ecdc4;
	margin-bottom:10px;
}

#skillsContainer h2 img{
	width:250px;
	height:auto;
	display:inline-block;
}

.item{
	width:220px;
	display:inline-block;
	vertical-align:top;
}

.skill{
	 margin: 0 100px;
}

.passion{
	 margin: 0 50px;
}
.itemImage{
	display:block;
	border-radius:300px;
}

.itemImage img{
	display:block;
	width:100%;
	padding: 0;
	height:auto;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
    -ms-transition: all .1s ease;
	transition: all .1s ease;
}

.item h3{
	font-size:28px;
	text-transform:lowercase;
	font-weight:300;
	color:#fff;
	margin-bottom:0;
}

.item p{
	font-size:14px;
	letter-spacing:1px;
	line-height:22px;
	font-weight:400;
	text-transform:uppercase;
}

.skillImage{

}

.skill h3{
	color:#4ecdc4;
}

.skill p{
	color:#ff6b6b;
}

#passionsContainer{
	min-height:300px;
	text-align:center;
	border-top:2px dashed #ff6b6b;
	border-bottom:2px dashed #ff6b6b;
	margin-bottom:10px;
}

#passionsContainer h2 img{
	width:400px;
	height:auto;
	display:inline-block;
}

.passion h3{
	color:#ff6b6b;
}
.passion p{
	color:#4ecdc4;
}

#workContainer{
	min-height:300px;
	border-top:2px dashed #ffdf5a;
	text-align:center;
}

#workContainer h2 img{
	width:400px;
	height:auto;
	display:inline-block;
}

.workItem{
	width:450px;
	height:auto;
	padding:10px;
	background:white;
	display:inline-block;
	margin: 20px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
}

.workItemContainer{
	width:100%;
	height:auto;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
}

.workItem.red{
	border:2px dashed #FF6B6B;
}

.workItem.blue{
	border:2px dashed #4ECDC4;
}

.workItem.yellow{
	border:2px dashed #f3ce34;
}

.workItem.red .workItemContainer{
	border:2px solid #FF6B6B;
}

.workItem.blue .workItemContainer{
	border:2px solid #4ECDC4;
}

.workItem.yellow .workItemContainer{
	border:2px solid #f3ce34;
}

.workItemInfo{
	position:absolute;
	bottom:0%;
	left:0;
	width:100%;
	height:100%;
	z-index:4;
	background:white;
}

.workItemInfo>div{
	width:100%;
	height:100%;
	display:table;
}

.workItemInfo>div>div{
	display:table-cell;
	vertical-align:middle;
}

.workItem h3{
	color:white;
	text-transform:lowercase;
	font-weight:300;
	font-size:20px;
	display:block;
	margin:0;
	padding: 0 5px;
}

.workItem.red h3{
	color:#FF6B6B;
}

.workItem.blue h3{
	color:#4ECDC4;
}

.workItem.yellow h3{
	color:#f3ce34;
}

.workItem h4{
	color:white;
	margin:0;
	text-transform:uppercase;
	font-weight:300;
	font-size:14px;
	display:block;
	padding: 0 5px;
}

.workItem h4 img{
	width:20%;
	margin: 10px 2%;
	display:inline-block;
}

.workItem .imageOverlay{
	position:absolute;
	z-index:3;
	background:rgba(255,255,255,1);
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.workItem img{
	position:relative;
	width:100%;
	height:auto;
	display:block;
	z-index:1;
}

.workItem img.hoverImage{
	position:absolute;
	top:-100%;
	left:0;
	height:100%;
	width:100%;
	z-index:5;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;

}

.workItem:hover img.hoverImage{
	top:0;
}

#projectContainer{
	padding:100px 0;
	width:90%;
	margin:0 5%;
	text-align:center;
	border-bottom:2px dashed #4ecdc4;
}

#projectContainer h1{
	font-weight:100;
	font-size:100px;
	color:#FF6B6B;
	margin:0;
}

#projectContainer h2{
	margin:30px 0 0;
}

#projectContainer h2 img{
	width:100px;
	margin: 0 10px;
	display:inline-block;
}

#projectContainer p{
	width:90%;
	max-width:600px;
	text-align:center;
	margin:20px auto 40px;
	font-size:18px;
	line-height:30px;
}

.bottomProjectLink{
	text-align:center;
	padding: 0 0 70px;
}

#projectContainer a, .bottomProjectLink a{
	display:inline-block;
	padding: 10px 20px;
	color:white;
	background:#4ECDC4;
	margin:5px;
	font-size:14px;
	font-weight:400;
	text-decoration:none;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
    -ms-transition: all .2s ease;
	transition: all .2s ease;
}

#projectContainer a:hover, .bottomProjectLink a:hover{
	background:#299d95;
}

#projectImageContainer{
	width:100%;
	float:left;
	text-align:center;
	position:relative;
	padding: 100px 0;
	min-height:350px;
}

#projectImageContainer>div{
	display:table;
	width:100%;
	height:100%;
}

#projectImageContainer>div>div{
	display:table-cell;
	vertical-align:middle;
}

#projectImageContainer img{
	width:90%;
	display:inline-block;
	max-width:1100px;
}

.redesignHistory{
	width:90%;
	max-width:624px;
	margin:0 auto;
	padding:100px 0 0;
	display:block;
}

.redesignHistory h3{
	font-weight:100;
	text-transform:lowercase;
	font-size:56px;
	line-height:62px;
	text-align:center;
	color:#f3ce34;
	margin:0;
	display:block;
}

.redesignHistory img{
	width:100%;
	display:block;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:2px solid #FF6B6B;
	height:auto;
}

.redesignHistory .imageContainer{
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:2px dashed #FF6B6B;
	margin: 10px 0 70px;
	display:block;
	padding:10px;
}

.redesignHistory img{
	border:2px solid #aaa;

}

.redesignHistory .noBorder img{
	border:none;

}


.redesignHistory p{
	font-size:18px;
	text-align:center;
	width:100%;
	margin:10px auto 50px;
	max-width:600px;
	display:block;
	line-height:30px;
}

.redesignHistory label{
	font-size:16px;
	font-weight:400;
	color:#aaa;
	text-align:center;
	display:block;
	font-style:italic;
	line-height:22px;
}


#footerContainer{
	text-align:center;
	text-transform:lowercase;
	color:#ff6b6b;
	font-size:14px;
	width:90%;
	padding: 10px 5%;
	float:left;
	background:#fff;
}

@media(max-width:1700px){
	.workItem{
		width:400px;
	}

	body.web, body.print, body.extras{
		background-size:1700px;
	}

}

@media(max-width:1500px){
	.contentContainer {
	    width: 94%;
	    margin: 0 3%;
	}

	.workItem{
		width:350px;
	}

	.workItem h3{
		font-size:18px;
	}

	.workItem h4{
		font-size:10px;
		letter-spacing:1px;
	}

	.skill{
		margin: 0 75px;
	}
	.passion{
		margin:0 30px;
	}

	body.web, body.print, body.extras{
		background-size:1550px;
	}

}

@media(max-width:1250px){
	#projectContainer h1 {
	    font-size: 72px;
	}

	.skill {
	    width: 190px;
		margin: 0 50px;
	}

	.passion {
	    width: 170px;
	}

	.item h3 {
	    font-size: 24px;
	}

	.item p {
	    font-size: 12px;
	    line-height: 18px;
	}

	h1, h2 {
	    font-size: 72px;
	}
}

@media(max-width:1024px){
	#projectContainer h1 {
	    font-size: 60px;
	}

	.projectComparison h3, .redesignHistory h3 {
	    font-size: 42px;
		font-weight:300;
	}


	.skill, .passion {
	    width: 170px;
	}

	.passion {
		margin: 0 80px;
	}

	.skill{
		margin: 0 30px;
	}

	.workItem:hover img.hoverImage{
		top:-100%;
	}

	.mouse{display:none;}

	.mobileSwipeContainer{
		display:block;
		position: fixed;
		bottom: 40px;
		left: 50%;
		margin-left: -8px;
		width: 16px;
		height: 16px;
		z-index: 2;
	}

	.mobileSwipe{
		position:absolute;
		bottom:0;
		left:0;
		width:16px;
		height:16px;
		border-radius: 20px;
		background: rgba(255,255,255,.25);
		font-size:18px;
		-webkit-transition: all 2.5s ease;
		-moz-transition: all 2.5s ease;
		-o-transition: all 2.5s ease;
		-ms-transition: all 2.5s ease;
		-moz-animation: enlarge 2.5s infinite;
		-webkit-animation: enlarge 2.5s infinite;
		animation: enlarge 2.5s infinite;
	}

	.handSwipe{
		position:absolute;
		width:12px;
		height:12px;
		top:5px;
		left:50%;
		margin-left:-6px;
		color:rgba(255,255,255,.7);
	}

	@-moz-keyframes enlarge {
	  0%, 100% {
		height:16px;
	  }
	  50% {
		height:36px;
	  }
	}
	@-webkit-keyframes enlarge {
	  0%, 100% {
		height:16px;
	  }
	  50% {
		height:36px;
	  }
	}
	@keyframes enlarge {
	  0%, 100% {
		height:16px;
	  }
	  50% {
		height:36px;
	  }
	}

	#projectImageContainer{
		min-height:250px;
	}

	body.web, body.print, body.extras{
		background-size:1300px;
	}


}


@media(max-width:800px){
	.skill{
		margin: 0 20px;
		width:150px;
	}
}

@media(max-width:768px){
	html, body{
		background-size:50%;
	}

	.skill, .passion{
		width:100%;
		margin:0;
		padding:20px 0;
		position:relative;
	}

	.item h3 {
	    font-size: 28px;
	}

	.item p {
	    font-size: 14px;
	    line-height: 22px;
	}

	.item.left .itemImage{
		width:40%;
		padding-left:10%;
		float:left;
	}

	.item.right .itemImage{
		width:40%;
		float:right;
		padding-right:10%;
	}

	.itemText{
		position:absolute;
		top:0;
		width:35%;
		height:100%;
	}

	.right .itemText{
		left:10%;
		text-align:right;
	}

	.left .itemText{
		right:10%;
		text-align:left;
	}

	.itemText>div{
		display:table;
		width:100%;
		height:100%;
	}

	.itemText>div>div{
		display:table-cell;
		vertical-align:middle;
	}

	.skill.border{
		border-bottom: 2px dashed #4ecdc4;
	}

	.passion.border{
		border-bottom: 2px dashed #ff6b6b;
	}

	.contentContainer h2 {
	    margin: 20px 0 0;
	}

	#skillsContainer, #passionsContainer {
	    margin-bottom: 60px;
	}

	.contentContainer {
	    padding:  20px 0;
	}

	#projectImageContainer{
		min-height:150px;
	}

	body.web, body.print, body.extras{
		background-size:1000px;
	}

}

@media(max-width:600px){
	#passionsContainer h2 img, #workContainer h2 img{
		width:300px;
	}

	#skillsContainer h2 img{
		width:180px;
	}

	.item h3 {
	    font-size: 24px;
	}

	.item p {
	    font-size: 12px;
	    line-height: 18px;
	}

	.item.left .itemImage{
		width:50%;
		padding-left:0%;
	}

	.item.right .itemImage{
		width:50%;
		padding-right:0%;
	}

	.itemText{
		width:45%;
	}

	.right .itemText{
		left:0%;
	}

	.left .itemText{
		right:0%;
	}

	#projectContainer h1 {
	    font-size: 40px;
	}

	.projectComparison h3, .redesignHistory h3 {
	    font-size: 32px;
	}

	#projectContainer {
	    padding: 50px 0;
	}


}

@media(max-width:480px){
	.workItem {
	    width:90%;
		margin:10px auto;
	}

	.workItem h4 img{
		width:29%;
		margin: 5px 2%;
	}

	.redesignHistory {
	    padding: 50px 0;
	}

	#projectImageContainer {
	    padding: 50px 0;
	}

	#projectContainer h2 img {
	    width: 70px;
	}

	#projectContainer h2 {
	    margin: 10px 0 0;
	}

	#projectContainer p {
	    margin: 10px auto 20px;
	}

	#projectImageContainer{
		min-height:100px;
	}

	body.web, body.print, body.extras{
		background-size:600px;
	}


}