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

body{
	font-family: "Quicksand", serif;
	background: radial-gradient(ellipse at center, rgba(40,47,55,1) 0%,rgba(31,36,40,1) 100%);
	color: white;
	overflow-x: hidden;
}

a{
	color: white;
	text-decoration: none;
}

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

button:focus{
	outline: none;
}

/* Case Study */

	body.case{
		background: #E1E1E1;
	}

	.case_container{
		width: 60%;
		max-width: 1000px;
		min-width: 300px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px 0;
		font-size: 1.3em;
		font-family: "Roboto";
		color: #272727;
		position: relative;
	}

	.case_img{
		display: block;
		width: 75%;
	}

	.case_img.visual{
		margin: 20px 0;
	}

	figure{
		margin-left: 0;
		min-width: 290px;
	}

	figure > .case_img{
		width: 100%;
	}

	figcaption{
		text-align: center;
		font-weight: 300;
		font-style: italic;
	}

	.case_container > *{
		width: 100%;
	}

	.case_container > img{
		min-width: 290px;
	}

	.case_title{
		font-size: 2.4em;
		text-align: center;
		margin: 200px 0;
	}

	.case_subtitle{
		margin: 70px auto 40px auto;
		text-align: center;
		max-width: 500px;
		min-width: 290px;
	}

	@media screen and (max-width: 400px){
		.case_subtitle{
			text-align: left;
		}
	}

	.case_text{
		font-weight: 300;
		line-height: 150%;
		max-width: 650px;
		min-width: 290px;
		margin-left: auto;
		margin-right: auto;
	}

	.case_link{
		color: #272727;
		text-decoration: none;
		border-bottom: 1px solid #272727;
	}

	.case_link:hover{
		border-bottom: 1px solid transparent;
	}

	.case_highlight{
		font-size: 2em;
		text-align: center;
		font-style: italic;
		margin: 100px 0;
	}

	.case_cta{
		width: 25%;
		padding: 15px 7px;
		text-align: center;
		background-color: #272727;
		color: white;
	}

	.case_cta:hover{
		background-color: #333;
	}

	.case_cta_container{
		margin-top: 70px;
		display: flex;
		justify-content: space-between;
	}

	@media only screen and (max-width: 880px){
		.case_container{
			padding: 20px 10%;
		}

		.case_container > *{
			width: 80%;
		}
	}

	@media only screen and (max-width: 780px){
		.case_cta_container{
			flex-direction: column;
		}

		.case_cta{
			width: 100%;
			margin-bottom: 20px;
		}
	}

/* Mail */

	.mail_container{
		width: 50%;
		max-width: 800px;
		margin: 0 auto;
		font-size: 1.2em;
		margin-top: 70px;
		padding: 20px 3%;
		border-left: 3px solid white;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	.mail__title{
		margin-top: 0;
	}

	.mail__signature{
		font-style: italic;
	}

	.mail__cta{
		display: block;
		width: 50%;
		max-width: 300px;
		margin: 0 auto;
		text-align: center;
		color: #1F2428;
		background-color: rgba(255, 255, 255, 1);
		padding: 15px 1%;
		font-weight: 600;
	}

	.mail__cta:hover{
		background-color: rgba(255, 255, 255, .8);
	}

/* Header */

	header{
		background-color: rgba(204, 204, 204, .2);
		padding: 0 4.25%;
	}

	header, .header__actions, .actions__account{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.header__title{
		margin: 10px 0;
		text-transform: uppercase;
		font-weight: 400;
	}

	.actions__account{
		background-color: rgba(204, 204, 204, .2);
		height: 40px;
		padding: 0 15px 0 5px;
		margin-left: 10px;
		cursor: pointer;
	}

	.actions__add{
		width: 40px;
		height: 40px;
		background-color: rgba(204, 204, 204, .2);
		color: white;
		border: none;
		font-size: 2.7em;
		line-height: 40px;
	}

	.actions__account:hover, .actions__add:hover{
		background-color: rgba(204, 204, 204, .4);
	}

	.account__photo{
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}

	.account__name{
		font-weight: 400;
		font-size: 1.2em;
	}

/* Main */

	main{
		width: 91.5%;
		margin: 0 auto;
	}

/* Main-Header */

	.main__header{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin: 10px 0;
	}

	.change_week{
		background-color: rgba(204, 204, 204, .2);
		border: none;
		padding: 10px 15px;
		transition: all 100ms;
	}

	.change_week:hover{
		background-color: rgba(204, 204, 204, .4);
	}

	.calendar_name{
		display: flex;
		align-items: baseline;
	}

	.calendar_agency{
		margin: 0px;
		padding-right: 10px;
		border-right: 1px solid white;
		font-size: 1.5em;
		font-weight: 400;
	}

	.calendar_week{
		padding-left: 10px;
		margin: 0;
		font-size: 1em;
		font-weight: 300;
	}

	#yourTasks{
		background: transparent;
		border: none;
		border-bottom: 2px solid white;
	}

	#yourTasks:focus{
		outline: none;
	}

/* Week days */

	.week__days{
		display: flex;
		justify-content: space-between;
	}

	.week__days__name{
		width: 18%;
		text-align: center;
		font-size: 1.2em;
		font-weight: 300;
		padding: 10px 0;
		border: 2px solid transparent;
	}

	.week__days__name--today{
		border: 2px solid white;
		font-weight: 700;
	}

/* Week */

	.tasks{
		width: 100%;
		display: flex;
	}

	.weekContainer{
		position: relative;
	}

	.week{
		transition: all 300ms;
	}

	.secondaryWeek{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
	}

	.beforeWeek{
		transform: translateX(-120%);
	}

	.beforeWeek > .tasks > .task{
		opacity: .4;
	}

	.afterWeek > .tasks > .done{
		opacity: 1;
	}

	.afterWeek{
		transform: translateX(120%);
	}

	.active{
		transform: translateX(0);
	}

	.task{
		visibility: visible;
		background-color: rgba(250, 250, 250, .9);
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		margin-bottom: 20px;
		color: #1E1E1E;
		cursor: pointer;
		transition: all 200ms ease-out;
	}

	.task:hover{
		transform: scale(1.05);
	}

	.task__title{
		font-size: 1.3em;
		margin-left: 15px;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.task__name{
		font-size: .9em;
		text-align: right;
		margin-right: 15px;
	}

	.done{
		opacity: .4;
	}

	.oneDay{
		width: 18%;
		margin-right: 2.2%;
	}

	.twoDays{
		width: 38.2%;
		margin-right: 2.2%;
	}

	.threeDays{
		width: 58.4%;
		margin-right: 2.2%;
	}

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

	.pointed{
		position: relative;
		overflow: hidden;
	}

	.pointed:after{
		content: "";
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background-color: crimson;
		position: absolute;
		right: -10px;
		top: -10px;
	}

/* Specifics */

	.airbnb__tasks{
		justify-content: space-between;
	}

	.dwm__tasks{
		justify-content: space-between;
	}

	.airbnb:first-child{
		margin-left: 20.6%;
	}

	.wmgd__tasks{
		justify-content: flex-end;
	}

/* Colors */

	.google{
		border-left: 4px solid #ba4d4d;
	}

	.trello{
		border-left: 4px solid #65ace7;
	}

	.dwm{
		border-left: 4px solid #f8e436;
	}

	.airbnb{
		border-left: 4px solid #e659ff;
	}

	.wmgd{
		border-left: 4px solid #a2ed2a;
	}

	.trello.pointed:after{
		background-color: #65ace7;
	}

	.wmgd.pointed:after{
		background-color: #9def61;
	}

/* TaskInfos */

	.taskInfos{
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-45%);
		width: 46%;
		background-color: #1f2428;
		border-left: 4px solid #ba4d4d;
		padding-top: 5px;
		transition: all 200ms;
	}

	.veil{
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(20, 20, 20, .8);
		transition: all 300ms;
	}

	.taskInfos-container{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin: 0 5%;
	}

	.taskInfos__close{
		background-color: transparent;
		border: none;
		width: 30px;
		height: 30px;
		text-indent: -9999px;
		background-image: url("../images/close.svg");
	}

	.taskInfos__subtitle{
		font-size: 1.2em;
		font-weight: 400;
		margin-top: 0;
	}

	.taskInfos__timing{
		font-family: "Roboto";
		font-style: italic;
		font-size: .9em;
	}

	.taskInfos__taskList{
		list-style: disc;
		padding-left: 3%;
		margin: 40px 5%;
		position: relative;
	}

	.taskInfos__taskList:before{
		content: "";
		width: 10%;
		height: 3px;
		background-color: white;
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
	}

	.taskInfos__taskElement{
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.taskInfos__taskElement>p{
		margin: 0;
	} 

	.taskInfos__staffList{
		display: flex;
		justify-content: space-between;
		width: 70%;
		margin: 0 auto;
	}

	.staffList__photo{
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.taskInfos__staffElement:nth-child(1) .staffList__photo{
		background-image: url("../images/person1.jpg");
	}

	.taskInfos__staffElement:nth-child(2) .staffList__photo{
		background-image: url("../images/person2.jpg");
	}

	.taskInfos__staffElement:nth-child(3) .staffList__photo{
		background-image: url("../images/person3.jpg");
	}

	.taskInfos__staffElement:nth-child(4) .staffList__photo{
		background-image: url("../images/person4.jpg");
	}

	.staffList__name{
		font-size: .9em;
		text-align: center;
	}

	.taskInfos__showMore{
		background-color: rgba(204, 204, 204, .2);
		border: none;
		width: 100%;
		height: 40px;
		margin-top: 30px;
		text-align: center;
	}

/* ProjectInfos */

	.projectInfos{
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-45%);
		width: 46%;
		background-color: #1f2428;
		border-left: 4px solid #ba4d4d;
		transition: all 200ms;
		padding-top: 5px;
	}

	.projectInfos > *{
		margin-left: 5%;
	}

	.projectInfos__close{
		background-color: transparent;
		border: none;
		width: 30px;
		height: 30px;
		text-indent: -9999px;
		background-image: url("../images/close.svg");
		position: absolute;
		top: 10px;
		right: 20px;
	}

	.projectInfos__title{
		font-size: 2.2em;
	}

	.projectInfos__summary{
		width: 70%;
		line-height: 160%;
		font-size: 1.1em;
	}

	.projectInfos__staffList{
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;
		margin-top: 50px;
		margin-bottom: 35px;
	}

	.projectInfos__staffElement{
		display: flex;
		width: 50%;
		align-items: center;
		margin-bottom: 30px;
	}

	.staffElement__name{
		font-size: 1.2em;
		margin: 0;
	}

	.staffElement__job{
		font-size: .9em;
		margin: 0;
	}

	.staffElement__photo{
		width: 40px;
		height: 40px;
		background-image: url("../images/person5.jpg");
		background-size: contain;
		margin-right: 15px;
	}

	.projectInfos__staffElement:nth-child(2) .staffElement__photo{
		background-image: url("../images/person6.jpg");
	}

	.projectInfos__staffElement:nth-child(3) .staffElement__photo{
		background-image: url("../images/person7.jpg");
	}

	.projectInfos__staffElement:nth-child(4) .staffElement__photo{
		background-image: url("../images/person8.jpg");
	}

/* Animations / Interactions */

	.masked{
		visibility: hidden;
		opacity: 0;
		transition: all 200ms ease-out;
	}

	.veilAppear{
		visibility: visible;
		opacity: 1;
		transition: all 50ms;
	}

	.taskAppear{
		visibility: visible;
		opacity: 1;
		transition: all 300ms;
	}