@import url(normalize.css);
@import url(clearfix.css);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:300,400|Lato:400,300,700);

/* General - Reset */

	::-moz-selection{
	    color: #fff;
	    background: #FFB800;
	}

	::selection{
	    color: #fff;
	    background: #FFB800;
	}


	h1, h2, h3{
		font-family: 'Lato', sans-serif;
		margin: 0;
		margin-bottom: .78em;
	}

	p, li, a{
		font-family: 'Roboto Slab', serif;
	}

	p{
		line-height: 1.5625em;
		margin: 0;
		font-weight: 300;
	}

	a{
		text-decoration: none;
	}

	ul{
		list-style: none;
		margin-left: 0;
		padding-left: 0;
	}

	.container{
		width: 76.01%;
		margin: 0 auto;
		box-shadow: 3px 3px 25px 2px rgba(100, 100, 100, .4);
	}

	.flash{
		font-style: italic;
	}

	.smaller{
		font-size: .6em;
		font-weight: 300;
	}

/* Intro */

	.intro{
		height: 39.125em; /* 626 */
		color: white;
		background-color: royalblue;
		box-shadow: 3px 3px 25px 2px rgba(100, 100, 100, .4);
	}

	.intro_container{
		margin-left: 21.5%; /* 272 */
		padding-top: 10em; /* 200/20 */
		line-height: 1em; /* 20/20 */
		font-size: 1.25em; /* 20/16 */
	}

	.intro_title{
		font-weight: 700;
		margin-bottom: 1.45em; /* 58 */
	}

	.intro_baseline{
		font-weight: 300;
		margin-bottom: 0.625em; /* 25 */
		margin-top: 1em; /* 30 */
		line-height: 1em;
	}

	.smaller{
		line-height: .5em;
	}

/* About */

	.about{
		/*background: url("../_images/cover1.jpg");*/
		background-size: cover;
		padding-top: 3.125em; /* 50/16 */
		padding-bottom: 3.125em; /* 50/16 */
	}

	.about_web{
		background-color: royalblue;
		color: #fff;
		width: 74.5833333334%;
		padding-left: 12.7083333333%; /* 122 */
		padding-right: 12.7083333333%; /* 122 */
		padding-bottom: 2.68em; /* 42.88/16 */
		padding-top: 3.125em; /* 50/16 */
	}

	.about_web-title{
		margin-top: -0.23em; /* 7 */ 
	}

	.about_web-text{
		-webkit-column-width: 350px;
		column-width: 350px;
	}

	.about_multimedia{
		background-color: #fff;
		color: royalblue;
		padding-left: 12.7083333333%; /* 122 */
		padding-top: 2.6875em; /* 43/16 */
		padding-bottom: 2.6875em; /* 43/16 */
		width: 37.2916666667%; /* 358 */
		float: left;
	}

	.about_multimedia-text{
		width: 95%;
	}

	.about_design{
		background-color: #fff;
		color: royalblue;
		padding-right: 12.7083333333%; /* 122 */
		padding-top: 2.6875em; /* 43/16 */
		padding-bottom: 2.6875em; /* 43/16 */
		width: 37.2916666667%; /* 358 */
		float: right;
	}

	.about_design-title{
		margin-left: 2%;
	}

	.about_design-text{
		width: 95%;
		margin-left: 2%;
	}

/* Works */

	.works{
		/*background: url("../_images/cover2.jpg");*/
		background-size: cover;
		padding-top: 3.125em; /* 50/16 */
		padding-bottom: 3.125em; /* 50/16 */
		background-color: royalblue;
		box-shadow: 5px 5px 25px 2px rgba(100, 100, 100, .5);
	}

	.works_link{
		display: block;
	}

	.works_article{
		height: 28.6em; /* /16 */
	}

	.works_discolor{
		background-color: #fff;
		color: royalblue;
		width: 37.2916666667%; /* 358 */
		float: left;
		padding-left: 12.7083333333%; /* 122 */
		padding-top: 2.6875em; /* 43/16 */
		overflow: hidden;
		transition: 200ms all ease-out;
	}

	.works_discolor-title{
		margin-top: 2.23em;
		font-size: 4em;
		transition: 200ms all ease-out;
	}

	.works_discolor-text{
		width: 68.156424581%; /* 244 */
		opacity: 0;
		transition: 200ms all ease-out;
	}

	.works_discolor:hover > .works_discolor-title{
		margin-top: 0;
		font-size: 2em;
		transition: 200ms all ease-out;
	}

	.works_discolor:hover > .works_discolor-text{
		opacity: 1;
		transition: 200ms all ease-out;
	}

	.works_dataviz{
		background-color: #fff;
		color: royalblue;
		width: 37.2916666667%; /* 358 */
		float: right;
		padding-left: 12.7083333333%; /* 122 */
		padding-top: 2.6875em; /* 43/16 */
		overflow: hidden;
		transition: 200ms all ease-out;
	}

	.works_dataviz-title{
		margin-left: 2%;
		margin-top: 2.23em;
		font-size: 4em;
		transition: 200ms all ease-out;
	}

	.works_dataviz-text{
		width: 68.156424581%; /* 244 */
		margin-left: 2%;
		opacity: 0;
		transition: 200ms all ease-out;
	}

	.works_dataviz:hover > .works_dataviz-title{
		margin-top: 0;
		font-size: 2em;
		transition: 200ms all ease-out;
	}

	.works_dataviz:hover > .works_dataviz-text{
		opacity: 1;
		transition: 200ms all ease-out;
	}

	.works_link{
		color: royalblue;
		display: inline-block;
		margin-top: 1.53em;
		font-style: italic;
		border-bottom: 3px solid royalblue;
		font-weight: 300;
	}

	.works_link:hover{
		border-bottom: none;
	}

	.works_dataviz-link{
		margin-left: 2%;
	}

/* Contact */

	.contact{
		/*background: url("../_images/cover3.jpg");*/
		background-size: cover;
		padding-top: 3.125em; /* 50/16 */
		padding-bottom: 3.125em; /* 50/16 */
	}

	.contact_article{
		width: 49.1666666667%; /* 472 */
		background-color: royalblue;
		color: #fff;
		padding-top: 3.125em; /* 50/16 */
		padding-bottom: 2.68em; /* 42.88/16 */
		padding-left: 12.7083333333%; /* 122 */
		padding-right: 12.7083333333%; /* 122 */
		margin-left: 12.7083333333%; /* 122 */
		box-shadow: 3px 3px 25px 2px rgba(100, 100, 100, .4);
	}

	.contact_article-title{
		margin-top: -0.23em; /* 7 */ 
	}

	.contact_article-title2{
		margin-top: 1.1em;
	}

	.contact .container{
		box-shadow: none;
	}

	.contact a{
		color: white;
		font-style: italic;
		border-bottom: 2px solid white;
	}

	.contact a:hover{
		border-bottom: none;
	}

/* Footer */

	footer{
		background-color: royalblue;
		margin-top: 1.6em;
		height: 4.8em;
		margin-bottom: 0;
	}

	footer .container{
		box-shadow: none;
	}

	.footer_list{
		margin-left: 12.7083333333%;
		padding-top: 1.6em;
	}

	.footer_list-element{
		width: 12.8%;
		height: 1.5em;
		float: left;
		margin-right: 23.5%;
		background-color: #FFF;
		box-shadow: 3px 3px 25px 2px rgba(100, 100, 100, .4);
		transition: 200ms all ease-out;
	}

	.footer_list-element:hover{
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
		transition: 200ms all ease-out;
	}

	.footer_list-element-credits{
		margin-right: 0;
	}

	.list-element-link{
		color: royalblue;
		display: block;
		text-align: center;
	}


/* Media Queries */

	@media only screen and (max-width: 1135px){
		
		.works_article{
			height: 30.1em;
		}	

	}

	@media only screen and (max-width: 1050px){
		
		.works_article{
			height: 33.3em;
		}	

	}

	@media only screen and (max-width: 1024px){
		
		/* Works */

			.works_article{
				height: auto;
				float: none;
				padding-left: 12.7083333334%;
				width: 87.2916666666%;
				padding-bottom: 2.6875em;
			}

			.works_article-title{
				margin-top: 0;
				font-size: 2em;	
				margin-left: 0;
			}

			.works_article-text{
				margin-left: 0;
				opacity: 1;
				width: 86%;
			}

		/* Contact */

			.contact_article{
				margin-left: 0;
				width: 74.5833333332%;
			}

	}

	@media only screen and (max-width: 830px){
		
		.about_multimedia{
			width: 87.2916666666%;
		}

		.about_design{
			width: 87.2916666666%;
			padding-left: 12.7083333334%;
			padding-right: 0;
		}

		.about_design-title{
			margin-left: 0;
		}

		.about_design-text{
			margin-left: 0;
		}

		.about_article-text{
			width: 86%;
		}

		footer .container{
			width: 87.2916666666%;
		}

		.footer_list-element{
			background-color: royalblue;
			box-shadow: none;
		}

		.list-element-link{
			color: #fff;
		}

	}

	@media only screen and (max-width: 480px){
		
		.container{
			width: 100%;
		}	

		.intro_container{
			margin-left: 12.7083333334%; 
			padding-top: 10em;
			line-height: 1em;
			font-size: 1.25em; 
		}

		.intro_baseline{
			width: 75%;
		}

		.about_web{
			box-shadow: -3px 3px 25px 2px rgba(100, 100, 100, .4);
		}

		.about{
			box-shadow: 3px 3px 25px 2px rgba(100, 100, 100, .4) inset;
		}

		.works_discolor{
			margin-bottom: 1.7em;
		}

	}

/* 404 */
	
	.error{
		width: 76%;
		margin: 0 auto;
		box-shadow: 3px 3px 25px 2px rgba(100, 100, 100, .4);
		margin-top: 4.7em;
		margin-bottom: 5em;
	}

	.error_main{
		background-color: #fff;
		color: royalblue;
		padding-left: 12.7083333333%;
		padding-right: 12.7083333333%;
		text-align: center;
		font-size: 4em;
		padding-top: .7em;
		padding-bottom: .8em;
	}

	.error_title{
		margin-bottom: 0;
	}

	.error_expl{
		color: #fff;
		padding-left: 12.7083333333%;
		padding-right: 12.7083333333%;
		text-align: center;
		padding-top: 2em;
		padding-bottom: 2.7em;
		background-color: royalblue;
	}

	.error_link{
		color: #fff;
		outline: none;
		text-decoration: none;
		border-bottom: 3px solid #fff;
	}

	.error_link:hover{
		border-bottom: none;
	}

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

		.error{
			width: 100%;
		}
		
	}