/*******************************************************************************************************************************************  Responsive  */



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


}




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

	.video h1 {
		font-size: 2.5em;
		line-height: 2.5em;
	}

}



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

	.video h1 {
		font-size: 2.25em;
		line-height: 2.5em;
	}
	
}



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

	.video h1 {
		font-size: 2em;
		line-height: 2.5em;
	}
	
	.grid.projects > * a {
		background: transparent
	}
	
	.grid.projects > * .title {
		position: relative;
		color: #000;
		padding: 1.25em 0;
	}
	
		
}



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

	.video {
		height: 50vh;
		max-height: auto;
		max-width: auto;
	}
	
	.video h1 {
		font-size: 1.5em;
		line-height: 2.5em;
	}
	
	main .grid > *, .column {
		width: 47.5%
	}
	
	main .grid > *:nth-child(3n) {
		margin-right: 5%;
	}
	
	main .grid > *:nth-child(2n) {
		margin-right: 0;
	}
	
	.column.right,
	.huge-post .post-link {
		position: relative;
		display: block;
		width: 100%;
		float: none;
		padding-right: 0;
		text-align: right;
	}

}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.video {
		height: 40vh;
	}
}


@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
	
	.bgl {
		font-size: 1.25em
	}
	
	.bgl, .to-top {
		margin-top:2rem;
	}
	
	body > header {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	[role="navigation"] {
		margin-top: 0.3em;
	}
	
	[role="navigation"] .grid > * {
/*
		width: 33.33%;
		margin: 0 !important;
*/
		text-align: right;
	}
	
	[role="navigation"] .grid > * + * {
		text-align: center
	}
	[role="navigation"] .grid > * + * + * {
		text-align: left
	}
	
	.video {
		max-height: none;
		min-height: none;	
		position: relative;
		height: auto;
	}
	
	
	.video video,
	.video cancas {
		display: none;
	
	}
	.video h1 {
		position: relative;
		margin-top: 0 !important;
		opacity: 1;
		font-size: 1rem;
		line-height: 1.75em;
		font-weight: 600;
	}
	
	
	[role="contentinfo"].grid > * {
		width: 100%;
		text-align: center;
		float: none;
	}
	
	.year > .title,
	.year > .title.is_stuck,
	.year > .title.is_stuck.bottom {
		position: relative !important;
		top:0 !important;
		left:0 !important;
		width: 100% !important;
		
		font-size: 1.25em;
		margin-bottom: 1em;
	}

	.year > .title.is_stuck + div,
	.year > .title.is_stuck.bottom + div {
		display: none !important
	}
	
	
	.big.title {
		font-size: 1.5rem;
		line-height: 1.25em;
	}
	
	.article-content {
		font-size: 0.9rem;
		line-height: 1.5em;
	}
	
	article footer {
		display: none;
	}
	
}