@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/*cursor:none;*/
}

body {
	font-family: 'Work Sans', sans-serif;
	background:#111;
	background-size: 100%;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9rem;
	letter-spacing: 0.04rem;
	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 50px 50px 0;
}

a img{
	outline: none;
}

.ciro{
	width:100%;
	margin: 100px 0 0;
	padding: 0 50px;
	
}
.ciro h1{
	word-break: keep-all;
	display: block;
	clear: both;
	margin: 0 0 20px;
	font-weight: normal;	
}

.ciro h1, .ciro p{
  	font-size: 5rem;
    font-weight: 400;
    line-height: 6rem;
	margin: 0 0 100px;
	color: #fff;
}
.ciro h1 img{
	height: 60px;
	vertical-align: baseline;
	line-height: 100px;
}

.ciro a{
	text-decoration: none;
	border-bottom: 6px solid rgba(255,255,255, 0.2);
	color: #FFF
}
.ciro a:hover{
	border-bottom: 6px solid rgba(255,255,255, 1);
}

.intro{
	width:100%;
	padding: 50px;
	position: relative;
}
.intro img{
	width: 40px;
	margin: 0 0 10px
}
.intro h1{
	font-size: 1.2rem;
	line-height: 30px;
	font-weight: 400;
	color: #FFF;
}
.intro a{
	text-decoration: none;
	color: #FFF;
}
.intro a.contact{
	position: absolute;
	top: 50px;
	right: 50px;
	color: rgba(255, 255, 255, 0.7);
	display: block;
	clear: both;
	font-size: 0.667rem;
	text-transform: uppercase;
}

.projects{
	width:100%;
	overflow: hidden;
	padding: 100px 0 0;
}

.flex-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
}

.flex-container > li{
	
	width:25%;
}

.projects li a{
	display: block;
	text-decoration: none;
	color: #FFF;
	word-break: keep-all;
	padding: 50px;
	transition: 0.15s all ease;
}

.projects li a:hover{
	padding: 20px 50px 80px;
}


.projects li a span {
	color: rgba(255, 255, 255, 0.4);
	display: block;
	clear: both;
	font-size: 0.667rem;
	text-transform: uppercase;
	margin: 0 0 10px
}

.projects li a img{
	width:100%;
	display: block;
	clear: both;
	margin:0 0 20px;
}

.case{
	width:100%;
}

.cover{
	width: 100%; 
	position: relative; 
	overflow: hidden;
	margin: 100px 0 ;	
}
.title{
	width:75%;
	align-items: center;
	position: absolute; 
	height: 100%; 
	color: #FFF;
}
.title h1{
	font-size: 5rem;
	font-weight: 400;
	line-height: 5rem;
	color: #FFF;
	z-index:1;
	padding: 0 50px;
	mix-blend-mode: difference;
}
.title p{
	color: rgba(255, 255, 255, 0.4);
	display: block;
	clear: both;
	font-size: 0.667rem;
	text-transform: uppercase;
	padding: 20px 50px;

}

.title_w{
	display: flex; 
	align-items: center;
	height: 100%
}

.cover_image{
	width:75%;
	padding: 0 50px ;
	float: right;
	overflow: hidden; 
}

.cover_image img{
	width: 100%;
	align-self: center; 
	float: right; 
}

.cover_image video{
	width: 100%;
	align-self: center; 
	float: right;
	object-fit: cover;
}

.about{
	font-size: 1.2rem;
	line-height: 1.778rem;
	padding-top: 150px !important;
	padding-bottom: 150px !important
}
.about h2{
	color: rgba(255, 255, 255, 0.4);
	display: block;
	clear: both;
	font-size: 0.667rem;
	text-transform: uppercase;
	margin: 0 0 10px;
	font-weight: normal
}

.text{
	width: 50%;
	color: rgba(255,255,255, 0.7);
	padding:100px 50px;
	display: block;
	clear: both;
}
.text p{
	margin:0 0 20px;
}
.text a{
	text-decoration: none;
	border-bottom: 2px solid rgba(255,255,255, 0.2);
	color: rgba(255,255,255, 0.7)
}
.text a:hover{
	border-bottom: 2px solid rgba(255,255,255, 1);
}
.text ul {
	list-style: none;
	display: block;
	clear: both;
	overflow: hidden;
	text-align: left;
	padding: 0
}
.text ul li {
	padding: 20px 0;
	color: #999;
	vertical-align: top;
}
.text ul li span {
	color: rgba(255, 255, 255, 0.3);
	padding: 0;
	text-align: left;
	font-size: 0.667rem;
	text-transform: uppercase;
	display: block;
	clear: both;
}

.awards ul{
	overflow: hidden;
	display: block;
	clear: both;
	width: 100%;
	word-spacing: -0.444rem;
}
.awards ul li{
	width:20%;
	padding: 50px;
	list-style: none;
	font-size: 0.667rem;
	line-height: 1.111rem;
	color: rgba(255, 255, 255, 0.3);
	text-align: center;
	display: inline-block;
	vertical-align: top;
	word-spacing:0rem;
}
.awards ul li a{
	text-decoration: none;
	color: rgba(255, 255, 255, 0.3);
}
.awards ul li a:hover{
	text-decoration: none;
	color: #FFF;
}

.awards ul li img{
	clear: both;
	display: block;
	width: 70%;
	margin: 0 auto;
	opacity: 0.8
}

.about a.social {
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	overflow: hidden;
	text-indent: -1000px;
	background-size: 20px;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 10px 10px 10px 0;
	border: none;
}

.about a.social:hover {
	background-color: transparent;
}


.video{
	width: 100%;
	clear: both;
	/*float: right;*/
	padding:100px 50px;
	margin:0 auto;
}
.video iframe { 
	overflow:hidden;
}

figcaption{display: none;}

.image{
	width: 100%;
	
}

.image picture{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}
.image  img {
	width: 50%;
	padding:100px 50px;
	align-self: start;
}

.image .small img{
	width: 33.3333%;
	
}
.image img.big{
	width: 100%;
	
}
.backstage {
	width: 100%;
	float: left;
	display: block;
	clear: both;
	margin: 0 auto ;
	padding:100px 50px;
	overflow: hidden;
}

.backstage img {
	width: 33.3333%;
	float: left;
	display: inline
}
.next{
	display: block;
	clear: both;
	padding: 150px 50px 200px;
	text-align: center
}
.next a{
	text-decoration: none;
	text-align: center;
	font-size: 1.2rem;
	border-bottom: 2px solid rgba(255,255,255, 0.2);
	color: rgba(255,255,255, 0.7)
}

.next a:hover{
	border-bottom: 2px solid rgba(255,255,255, 1);
}
.footer{
	display: block; 
	clear: both;
	padding: 20px 50px;
	text-align: center;
}
.footer p{
	font-size: 0.611rem;
	color:rgba(255,255,255, 0.2)	
}

@media screen and (min-width: 1280px) and (max-width: 1440px) {
	.projects li{
		width:33.33333%;
	}
	.text {
		width: 66.66666%;
	}
	.video{
		width:100%
	}
	.cover_image {
		width: 66.66666%;
	}
	
}

@media screen and (min-width: 400px) and (max-width: 1279px) {
	body {
		font-size: 16px;
		padding:0
	}
	.intro{
		width:100%;
	}
	.projects li{
		width:50%;
	}
	.cover{
			margin: 0 0 50px;
		}
	
	.ciro h1, .ciro p{
		font-size: 3rem;
		line-height:3.5rem ;
		font-weight: 400;
		margin: 0 0 50px;
	}
	.ciro h1 img{
		height: 7vmin;
	}
	.title{
		width:100%;
		position: static;
	}
	.title h1{
		font-size: 3rem;
		line-height:3.5rem ;
		padding: 150px 50px 0;
	}

	.cover_image{
		float:none;
		width: 100%;
		display: block;
		clear: both;
		z-index:0;
		padding: 0 50px;
	}
	.cover_image div{
		width: 100%;
		padding: 0;
	}
	.text{
		width: 75%;
		color: rgba(255,255,255, 0.7);
		padding: 50px;
		display: block;
		clear: both;
	}
	.video{
		width: 100%;
	}
	.image img {
		width: 100%;
	}
	.image .small img{
		width: 50%
	}
	.backstage {
		width: 100%;
	}
	.awards ul li{
		width:33.333%;
	}
	.awards ul li img{
		width:50%;
	}
}


@media screen and (min-width: 460px) and (max-width: 768px) {
	.projects li{
		float: none;
		display: block;
		padding:0;
		width:100%;
	}
	.projects li a{
		padding:50px;
	}
	.image .small img{
		width: 100%
	}
	.text{
		width: 100%;
		padding: 50px;
		display: block;
		clear: both;
	}
	.awards ul li{
		width:50%;
	}
	.awards ul li img{
		width:50%;
	}
}

@media screen and (min-width: 0px) and (max-width: 600px) {
	body {
		font-size: 20px;
		padding: 0
	}
	.intro{
		width:100%;
		padding: 20px 20px 150px;
	}
	.intro a.contact{
		transform: rotate(-90deg);
		top: 30px;
		right: 0;
	}
	.projects{
		padding: 0;
	}
	.projects li{
		float: none;
		display: block;
		width:100%;
	}
	.projects li a, .projects li a:hover{
		padding:50px  20px;
	}
	
	.about{
		font-size: 1rem;
		line-height: 1.9rem;
	}
	.cover{
		width: 100%;
		min-height: auto;
		text-align: left;
		display: block;
		overflow: hidden;
		margin: 0 0 50px;
	}
	.ciro{
		padding: 0 20px;
		margin:20px 0 0;
	}
	.ciro h1, .ciro p{
		font-size: 2rem;
		line-height: 2.5rem;
		font-weight: 400;
		margin: 0 0 50px;
	}
	.ciro h1 img{
		height: 40px;
	}
	.title{
		width:100%;
		position: static;
	}
	.title h1{
		font-size: 2rem;
		line-height: 2.5rem;
		padding: 0 20px 20px;
	}
	.title p{
		padding: 0 20px 20px;
	}

	.cover_image{
		float:none;
		width: 100%;
		display: block;
		clear: both;
		z-index:0;
		padding: 0 50px;
	}
	.cover_image div{
		width: 100%;
		padding: 0;
	}
	.cover_image{
		position: static;
		width: 100vw;
		min-height: auto;
		height: auto;
		display: block;
		clear: both;
		z-index:0;
		padding: 0 20px;
	}
	.cover_image div{
		width: 100%;
		background: #F00;
		padding: 0;
	}
	.cover_image div img{
		width: 100%;
		padding: 0;
		height: auto;
		float:right
	}
	
	.awards ul li{
		width:49%;
		padding: 20px;
	}
	.awards ul li img{
		width:60%;
	}
	
	.text{
		width: 100%;
		padding: 50px 20px ;
		display: block;
		clear: both;
	}
	.video{
		width: 100%;
		padding: 50px 20px ;
	}
	.image img {
		width: 100%;
		padding: 50px 20px ;
	}
	.image .small img{
		width: 100%
	}
	.backstage {
		width: 100%;
		padding: 50px 20px ;
	}
	.backstage img {
		width: 50%;
	}
}