@import url(normalize.css);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300italic,400italic,700,900|Merriweather+Sans:400,700,300);

/* 
	Perfect Fourth: 1.333 
	0.422 - 0.563 - 0.75
	1
	1.333 - 1.777 - 2.369 - 3.127 - 4.168
*/

body{
	font-size: 18.5px;
	font-family: "Merriweather", serif;
	line-height: 32px;
	color: #373737;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

section, section>*{
	transition: all 300ms;
}

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

a{
	text-decoration: none;
}

/* ----- */

.hero{
	background: url("../images/hero-mobile.jpg"); 
	background-size: cover;
	background-repeat: no-repeat;
	padding: 58px 6.25% 32px 6.25%;
	color: white;
	text-align: center;
}


.hero__title{
	font-family: "Merriweather Sans", sans-serif;
	font-size: 2.3697em;
	line-height: 48px;
	margin-bottom: 59px;
	margin-top: 62px;
}

.hero__subtitle{
	margin-top: 0;
	font-size: 1em;
	font-weight: 400;
}

.webdesigner{
	display: block;
	line-height: 16px;
	margin-top: 45px;
	font-style: italic;
	font-weight: 300;
	font-size: .75em;
}

.title_container{
	margin-top: 32px;
}

/* ----- */

.section__title{
	font-family: "Merriweather", sans-serif;
	line-height: 32px;
	font-size: 1.777em;
	margin-bottom: 40px;
	font-weight: 900;
}

.text{
	margin-top: 0;
	margin-bottom: 32px;
}

.inline-link{
	color: inherit;
	border-bottom: 2px solid white;
}

/* ----- */ 

.about{
	background-color: #373737;
	color: white;
	margin-bottom: 16px;
	padding: 92px 6.25% 69px 6.25%;
}

/* ----- */

.projects{
	padding: 22px 6.25% 21px 6.25%;	
	background-color: #fefefe;
}

.projects__element{
	border-top: 1px solid #E1E1E1;
	margin-top: 64px;
	position: relative;
	margin-bottom: 63px;
	background-color: white;
    box-shadow: 0px 5px 25px rgba(197, 197, 197, 0.4);
    display: none;
    opacity: 0;
}

.projects__element--shown{
	display: block;
	opacity: 1;
	transition: opacity 3000ms 5000ms;
}

.projects__element:first-child{
	border-top: none;
}

.project__img{
	display: block;
	width: 100%;
	height: 320px;
    background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/tiptime-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/tiptime-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/tiptime-mobile.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	color: white;
	line-height: 320px;
	text-align: center;
	font-size: 1.777em;
	margin-bottom: 9px;
}

.projects__element:nth-of-type(2) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/relic-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/relic-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/relic-mobile.jpg");
	background-size: cover;
}

.projects__element:nth-of-type(3) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/iolce-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/iolce-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/iolce-mobile.jpg");
	background-size: cover;
}

.projects__element:nth-of-type(4) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/aftereffects-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/aftereffects-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/aftereffects-mobile.jpg");
	background-size: cover;
}

.projects__element:nth-of-type(5) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/useronboarding-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/useronboarding-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/useronboarding-mobile.jpg");
	background-size: cover;
}

.projects__element:nth-of-type(6) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/dataplay-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/dataplay-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/dataplay-mobile.jpg");
	background-size: cover;
}

.projects__element:nth-of-type(7) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/clyde-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/clyde-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/clyde-mobile.jpg");
	background-size: cover;
}

.projects__element:nth-of-type(8) > .project__img{
	background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/rethinkingux-mobile.jpg");
	background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/rethinkingux-mobile.jpg");
	background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/rethinkingux-mobile.jpg");
	background-size: cover;
}

.project__name{
	font-size: 1.777em;
	margin-top: 0px;
	font-weight: 400;
	text-align: center;
	display: none;
}

.hiddenlinks{
	display: none;
}

.project__descr{
	font-family: "Merriweather Sans", sans-serif;
	font-weight: 300;
	font-size: 1em;
	text-align: left;
	margin: 0;
	margin-bottom: 7px;
	padding: 16px 5% 0 5%;
}

.project__descr:first-of-type{
	font-style: normal;
	font-weight: 600;
	margin-top: -8px;
	margin-bottom: 0;
}

.project__descr:nth-of-type(2){
	padding-top: 0;
}

.project__descr a{
	border-bottom: 1px solid #373737;
}

.project__links{
	width: 90%;
	margin: 30px auto 40px auto;
	padding: 0 5% 16px 5%;
}

.project__links > *{
	float: left;
	font-family: "Merriweather Sans", sans-serif;
	width: 44%;
	margin-right: 8.5%;
	text-align: center;
	padding: 7px 0;
}

.project__links > a:nth-child(2){
	margin-right: 0;
}

.project__see{
	border: 2px solid #ffa00a;
	color: #ffa00a;
}

.project__case{
	border: 2px solid #97dbf7;
	color: #97dbf7;
	margin-right: 0;
}

.projects__element:nth-of-type(2) > .project__links > .project__see,
.projects__element:nth-of-type(4) > .project__links > .project__see,
.projects__element:nth-of-type(5) > .project__links > .project__see,
.projects__element:nth-of-type(6) > .project__links > .project__see,
.projects__element:nth-of-type(7) > .project__links > .project__see,
.projects__element:nth-of-type(8) > .project__links > .project__see{
	width: 100%;
	margin: 0;
}

.projects__more{
	color: #373737;
	display: none;
	width: 180px;
	text-align: center;
	margin: 48px auto 30px auto;
	border-bottom: 2px solid #373737;
}

/* ----- */

.contact, footer{
	background-color: #373737;
	color: white;
	padding: 74px 6.25% 21px 6.25%;
}

.contact a, footer a{
	color: inherit;
}

.contact__title{
	margin-bottom: 28px;
}

.contact__dates{
	font-weight: 300;
	font-size: 1em;
	font-style: italic;
	line-height: 16px;
	margin-bottom: 40px;
}

.contact__mail{
	border-bottom: 2px solid white;
}

/* ----- */

footer{
	padding-top: 46px;
	margin-top: -3px;
}

.footer__social{
	margin: 0 auto;
	width: 50%;
	margin-bottom: 32px;
}

.social__element{
	float: left;
	width: 33%;
	background-repeat: no-repeat;
}

.social__link{
	width: 35px;
	height: 35px;
	display: block;
	text-indent: -9999px;
	margin: 0 auto;
	background-size: contain;
}

.social__link:hover{
	border: none;
}

.social__element:nth-child(1) .social__link{
	background-image: url("../images/sprite_social.png");
	background-position: left center;
	background-size: 300%;
}

.social__element:nth-child(2) .social__link{
	background-image: url("../images/sprite_social.png");
	background-position: 51% center;
	background-size: 300%;
}

.social__element:last-child .social__link{
	background-image: url("../images/sprite_social.png");
	background-position: right center;
	background-size: 300%;

}

.footer__link{
	display: block;
	text-align: center;
	width: 90px;
	margin: 0 auto;
	margin-top: 48px;
}

@media only screen and (min-width: 730px){

	.hero{
		background: url("../images/hero.jpg"); 
		background-size: cover;
	}

	.projects__element:nth-of-type(1) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/tiptime-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/tiptime-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/tiptime-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(2) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/relic-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/relic-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/relic-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(3) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/iolce-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/iolce-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/iolce-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(4) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/aftereffects-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/aftereffects-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/aftereffects-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(5) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/useronboarding-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/useronboarding-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/useronboarding-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(6) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/dataplay-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/dataplay-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/dataplay-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(7) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/clyde-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/clyde-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/clyde-desktop.jpg");
		background-size: cover;
	}

	.projects__element:nth-of-type(8) > .project__img{
		background: -moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%), url("../images/rethinkingux-desktop.jpg");
		background: -webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/rethinkingux-desktop.jpg");
		background: linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%), url("../images/rethinkingux-desktop.jpg");
		background-size: cover;
	}

	/* ----- */

	.container{
		margin: 0 auto;
		max-width: 1200px;
	}

	.section__title{
		font-size: 1.777em;
	}

	/* ----- */

	.hero{
		padding: 58px 7.5% 18px 7.5%;
	}

	.hero > .container{
		padding: 33px 6% 33px 6%;
		transition: none;
	}

	.hero__title{
		float: left;
		width: 50%;
		text-align: left;
		font-size: 3.127em;
		margin: 138px auto 0 -5px;
	}

	.webdesigner{
		float: right;
		width: 50%;
		text-align: right;
		font-size: 1.333em;
		line-height: 32px;
		margin-top: 174px;
	}

	/* ----- */

	.about{
		padding: 65px 12.5% 66px 12.5%;
	}

	.about__title{
		margin-bottom: 44px;
	}

	.about__text{
		font-size: 1.333em;
		line-height: 48px;
	}

	/* ----- */ 

	.projects{
		padding: 5px 12.5% 66px 12.5%;
	}

	.project__img{
		width: 100%;
		height: 320px;
		font-size: 2.369em;
	}

	/* ----- */

	.contact{
		padding: 63px 12.5% 66px 12.5%;
	}

	.contact__text{
		font-size: 1.333em;
		line-height: 48px;
		text-align: center;
	}

	.contact__mail{
		display: inline;
		width: 100%;
	}

	/* ----- */

	footer{
		padding-top: 0px;
	}

	.footer__social{
		width: 40%;
	}
}

@media only screen and (min-width: 900px){

	.text{
		font-size: 1.333em;
		line-height: 48px;
	}

	a:hover{
		border-bottom: 2px solid transparent;
	}

	/* ----- */

	.hero{
		padding: 74px 7.5% 44px 7.5%;
		background-attachment: fixed;
	}

	.hero__title{
		margin-top: 216px;
	}

	.webdesigner{
		margin-top: 252px;
	}

	/* ----- */

	.about{
		padding-top: 66px;
		padding-bottom: 40px;
	}

	/* ----- */

	.projects__element{
		width: 48.8%;
		float: left;
		margin-right: 2.4%;
		border: none;
		transition: all 300ms;
		box-shadow: -1px 2px 30px rgba(55, 55, 55, .1);
	}

	.projects__element:nth-child(2n+2){
		margin-right: 0;
	}

	.project__img{
		width: 100%;
		text-indent: -9999px;
		background-size: cover;
	}

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

	.projects__element:nth-of-type(1) > .project__img{
		background-image: url("../images/tiptime-desktop.jpg");
	}

	.projects__element:nth-of-type(2) > .project__img{
		background-image: url("../images/relic-desktop.jpg");
	}

	.projects__element:nth-of-type(3) > .project__img{
		background-image: url("../images/iolce-desktop.jpg");
	}

	.projects__element:nth-of-type(4) > .project__img{
		background-image: url("../images/aftereffects-desktop.jpg");
	}

	.projects__element:nth-of-type(5) > .project__img{
		background-image: url("../images/useronboarding-desktop.jpg");
	}

	.projects__element:nth-of-type(6) > .project__img{
		background-image: url("../images/dataplay-desktop.jpg");
	}

	.projects__element:nth-of-type(7) > .project__img{
		background-image: url("../images/clyde-desktop.jpg");
	}

	.projects__element:nth-of-type(8) > .project__img{
		background-image: url("../images/rethinkingux-desktop.jpg");
	}

	.project__name{
		display: inline-block;
		transition: all 300ms 50ms;
		text-align: left;
	    margin-top: 5px;
   		margin-bottom: 6px;
   		position: relative;
   		top: -21px;
   		left: -4.8%;
   		background-color: white;
   		padding: 15px 2%;
   		box-shadow: -1px 2px 30px rgba(55, 55, 55, .1);
	}

	.project__descr{
		display: block;
		transition: all 300ms;
		padding-top: 0;
	}

	.project__descr:nth-of-type(2){
		padding-bottom: 16px;
	}

	.hiddenlinks{
		position: absolute;
		display: block;
		transform: translateX(-20px);
		font-size: .6em;
		text-decoration: none;
		top: 19px;
		right: 5%;
		transition: all 300ms 100ms;
		opacity: 0;
	}

	.hiddenlinks__see{
		color: #ffa00a;
		margin-right: 10px;
		margin-left: 20px;
		margin-bottom: 0;
	}

	.hiddenlinks__see:hover{
		color: #896226;
	}

	.hiddenlinks__case{
		color: #97dbf7;
		margin-bottom: 0;
		padding-left: 10px;
		border-left: 1px solid #E1E1E1;
	}

	.hiddenlinks__case:hover{
		color: #579eba;
	}

	.projects__element:hover > .project__name{
		padding-right: 60%;
	}

	.projects__element:hover > .project__name > .hiddenlinks{
		animation: linksAppear 300ms ease-out 300ms forwards;
		opacity: 1;
		transition: opacity 900ms;
	}

	.project__links{
		display: none;
	}

	@keyframes linksAppear{
		0%{
			transform: translateX(-20px);
		}
		100%{
			transform: translateX(0);
		}
	}

	.projects__more{
		margin-top: 56px;
	}

	/* ----- */

	.contact{
		padding-top: 85px;
	}

	.contact__mail:hover{
		border-bottom: 2px solid transparent;
	}

	/* ----- */

	.footer__social{
		width: 30%;
	}

	.social__link{
		width: 45px;
		height: 45px;
	}

	.social__element:nth-child(2) > .social__link{
		margin-left: 27%;
	}

	.social__element{
		transition: all 300ms;
	}

	.social__element:hover{
		transform: translateY(-10px);
	}
}

@media only screen and (min-width: 1000px){
	.hero{
		padding-left: 7.5%;
		padding-top: 106px;
	}

	.hero__title{
		margin-top: 195px;
		font-size: 4.168em;
		line-height: 80px;
	}

	.hero__subtitle{
		font-size: 1.777em;
	}

	.webdesigner{
		margin-top: 285px;
	}

	.social__element:nth-child(2) > .social__link{
		margin-left: 34%;
	}
}

@media only screen and (min-width: 1440px){
	.hero{
		margin: 0 auto;
		background-size: 90%;
		background-position: 80% 50%;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-min--moz-device-pixel-ratio: 2), only screen and (--o-min-device-pixel-ratio: 2/1), only screen and (-min-device-pixel-ratio: 2), only screen and (-min-resolution: 192dpi), only screen and (-min-resolution: 2dppx){ 
    .hero{
		background: url("../images/hero@2x.jpg"); 
		background-size: cover;
	}

	.projects__element:nth-of-type(2) > .project__img{
		background-image: url("../images/tiptime-desktop@2x.jpg");
	}

	.projects__element:nth-of-type(2) > .project__img{
		background-image: url("../images/relic-desktop@2x.jpg");
	}

	.projects__element:nth-of-type(3) > .project__img{
		background-image: url("../images/iolce-desktop@2x.jpg");
	}

	.projects__element:nth-of-type(4) > .project__img{
		background-image: url("../images/aftereffects-desktop@2x.jpg");
	}
}


-moz-linear-gradient(top, rgba(40,40,40,.4) 0%, rgba(40,40,40,.4) 100%),
-webkit-linear-gradient(top, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%),
linear-gradient(to bottom, rgba(40,40,40,.4) 0%,rgba(40,40,40,.4) 100%),