@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-size: cover;
	background-repeat: no-repeat;
	padding: 58px 6.25% 32px 6.25%;
	color: white;
	text-align: center;
}

.hero_tiptime{
	background-image: url("../images/tiptime-bigger-mobile.jpg");
}

.hero_iolce{
	background-image: url("../images/iolce-bigger-mobile.jpg");
}

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

/* ----- */

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

.section__subtitle{
	font-size: 1.333em;
	line-height: 32px;
	margin-bottom: 34px;
}


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

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

section{
	padding-left: 6.25%;
	padding-right: 6.25%;
	margin-top: 100px;
	background-color: #fefefe;
}

.hero{
	margin-top: 0;
}

.section__img{
	display: block;
	width: 100%;
}

picture > img{
	width: 100%;
}

figure{
	margin-left: 0;
	margin-bottom: 12px;
}

.personas_img{
	margin-bottom: 4px;
}

figcaption{
	visibility: hidden;
}

.highlight{
	font-style: italic;
	font-size: 1.333em;
	text-align: center;
	line-height: 48px;
	margin: 73px auto 68px auto;
}

/* ----- */ 

.about{
	background-color: #373737;
	color: white;
	margin-top: 0px;
	margin-bottom: 16px;
	padding: 72px 6.25% 37px 6.25%;
}

.intro{
	margin-bottom: 44px;
}

.partners__list{
	margin: 0 auto;
	margin-top: 32px;
	text-align: center;
}

.partners__element{
	margin-top: 16px;
}

/* ----- */

.others{
	padding-top: 9px;
}

.see_project{
	display: block;
	border: 2px solid #373737;
	padding: 15px 5%;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 32px;
	width: 200px;
}

.others__element{
	display: block;
	margin: 0 auto;
	margin-bottom: 32px;
	text-align: center;
}

.others__link{
	border-bottom: 2px solid #373737;
}

/* ----- */

.contact, footer{
	background-color: #373737;
	color: white;
	padding: 48px 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_tiptime{
		background-image: url("../images/tiptime-bigger.jpg");
	}

	.hero_iolce{
		background-image: url("../images/iolce-bigger.jpg");
	}

	/* ----- */

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

	.section__title{
		font-size: 2.369em;
	}

	.section__subtitle{
		font-size: 1.777em;
		margin-top: 60px;
	}

	figure{
		margin-bottom: 22px;
	}

	figcaption{
		visibility: visible;
		display: inline-block;
		margin-top: 0;
		background-color: white;
		padding: 15px 2%;
		position: relative;
		top: -21px;
	   	left: -4.8%;
	   	box-shadow: -1px 2px 30px rgba(55, 55, 55, .2);
	}

	/* ----- */

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

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

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

	/* ----- */

	section{
		padding-left: 12.5%;
		padding-right: 12.5%;
	}

	/* ----- */

	.about{
		padding: 73px 12.5% 64px 12.5%;
		margin-bottom: 105px;
	}

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

	.partners__list{
		margin: 0 auto;
		width: 80%;
	}

	.partners__element{
		display: block;
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.partners__element:last-child{
		margin-right: 0;
	}

	/* ----- */

	.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;
	}

	.section__title{
		margin-bottom: 54px;
	}

	.smallertext{
		font-size: 1em;
		line-height: 32px;
	}

	.smallertext > a{
		border-bottom: 2px solid #373737;
	}

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

	.highlight{
		width: 78.4%;
	}

	figure{
		margin-bottom: 26px;
	}

	/* ----- */

	.hero{
		padding: 58px 7.5% 66px 7.5%;
		background-attachment: fixed;
	}

	.hero__title{
		margin-top: 216px;
	}

	/* ----- */

	.about{
		padding-top: 64px;
		padding-bottom: 32px;
	}

	/* ----- */
	
	.imgs__subtitle{
		margin-top: 36px;
	}

	/* ----- */

	.designsprint .container:nth-of-type(1) figure:nth-of-type(1){
		margin-bottom: 32px;
	}

	.designsprint .container:nth-of-type(2) figure:nth-of-type(1){
		margin-bottom: 30px;
	}

	.designsprint .container:nth-of-type(2) figure:nth-of-type(2){
		margin-bottom: 31px;
	}

	.designsprint .container:nth-of-type(2) figure:nth-of-type(4){
		margin-bottom: 33px;
	}

	.designsprint .container:nth-of-type(2) figure:nth-of-type(5){
		margin-bottom: 33px;
	}

	.designsprint .container:nth-of-type(2) figure:nth-of-type(6){
		margin-bottom: 35px;
	}

	/* ----- */

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

	.others__list{
		margin-top: 64px;
	}

	.others__element:first-child{
		float: left;
	}

	.others__element:last-child{
		float: right;
	}

	.others__element:last-child > a{
		text-align: right;
	}

	.others__element .others__link:hover, .back:hover{
		border-bottom: 2px solid #97dbf7;
		color: #97dbf7;
		transition: none;
	}

	/* ----- */

	.contact{
		padding-top: 90px;
	}

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

	/* ----- */

	.footer__social{
		width: 30%;
	}

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

	.social__element{
		transition: all 300ms;
	}

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

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

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

	.hero__subtitle{
		font-size: 1.777em;
	}

	/* ----- */

	.intro{
		text-align: center;
		margin: 0 auto;
	}

	.intro > *{
		width: 100%;
	}

	.section__title{
		text-align: center;
	}

	.text_left + .section__title{
		margin-top: 77px;
	}

	.section__subtitle{
		float: left;
		width: 36%;
	}

	.section__subtitle + .text_left{
		margin-top: 96px;
	}

	.text_left{
		margin-left: 38.4%;
		width: 61.6%;
	}

	.highlight{
		margin-bottom: 105px;
	}

	.personas_subtitle{
		margin-top: -6px;
	}

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

@media only screen and (min-width: 1440px){
	.hero{
		background-size: 100%;
		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_tiptime{
		background-image: url("../images/tiptime-bigger@2x.jpg");
	}

	.hero_iolce{
		background-image: url("../images/iolce-bigger@2x.jpg");
	}
}