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

.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;height:100%;background:rgba(255,255,255,1);position:absolute;left:0;top:0;z-index:9999;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.pace-inactive{background:rgba(255,255,255,0)}
.pace-inactive .pace-progress{display:none}
.pace .pace-progress{background:#7c8c89;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:5px}

*{ box-sizing:border-box;}
body{ width:100%; float:left; font-family: 'Alegreya Sans', sans-serif; font-family:camingodos_proextralight; margin:0px; padding:0px;}
body.dettaglio{ overflow:hidden;}
body.overflowhidden{ overflow:hidden;}
h1, h2, h3{ margin:0px; padding:0px; font-weight:normal;}
a{ text-decoration:none;}
ul{ margin:0px; padding:0px;}
li{ list-style:none;}

.intro{ width:100%; height:100vh; text-align:center;}
.intro .wrap{ height:inherit; padding:60px;}
.intro .wrap .menu{ position:absolute; top:60px; right:60px;}
.intro .wrap .menu li{ float:left; font-size:18px; line-height:20px; margin:0 0 0 15px; text-transform:uppercase;}
.intro .wrap .menu li a{ color:#7c8c89;}
.intro .wrap .menu li.link-linkedin a{ text-indent:9999px; overflow:hidden; width:20px; height:20px; float:left; text-align:center; background:url(../images/icon-linkedin.png); background-size:100% auto;}
.intro .wrap .menu li.link-instagram a{ text-indent:9999px; overflow:hidden; width:20px; height:20px; float:left; text-align:center; background:url(../images/icon-instagram.png); background-size:100% auto;}
.intro .wrap .menu li.link-video a{ text-indent:9999px; overflow:hidden; width:24px; height:24px; float:left; text-align:center; background:url(../images/icon-video.png); background-size:100% auto;}
.intro .wrap .logo{ clear:both; position:relative; top:50%; -ms-transform: translateY(-50%); transform: translateY(-50%); text-align:center;}
.intro .wrap .logo a{ display:inline-block;}
.intro .wrap .logo img{ max-width:220px; display:inline-block;}
.intro .wrap .down a{ width:24px; height:24px; position:absolute; left:50%; margin-left:-16px; bottom:40px;}
.intro .wrap .down a img{ width:100%; height:auto;}

.category{ width:100%; float:left; position:relative; z-index:2;}
.category .item{ width:33.33%; height:50vh; float:left; position:relative;}
.category .item a{ width:100%; height:100%; position:absolute; text-align:center; }
.category .item a span.normal{ width:100%; height:100%; position:absolute; left:0px; top:0px; opacity:1; background-position:center center; background-size:cover; text-align:center; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index:1; }
.category .item a span.hover{ width:100%; height:100%; position:absolute; left:0px; top:0px; opacity:0; background-position:center center; background-size:cover; text-align:center; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index:2; }
.category .item a span.text{ opacity:0; width:100%; position:absolute; z-index:3; left:0px; bottom:30px; font-size:18px; color:#fff; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index:3; }
.category .item.black a span.text{ color:#000;}
.category .item:hover a span.normal{ opacity:0;}
.category .item:hover a span.hover{ opacity:1;}
.category .item:hover a span.text{ opacity:1;}


.about{ width:100%; float:left; position:relative;}
.about .back{ width:auto; position:absolute; right:60px; bottom:60px;}
.about .back a{ color:#000;}
.about .back a span{ font-family:camingodos_prosemibold; font-size:18px; line-height:18px; text-transform:uppercase;}
.about .back a img{ width:18px;}
.about .row{ font-family:camingodos_proextralight; width:100%; height:50vh; text-align:center; float:left;}
.about .row .item{ position:relative; top:50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.about .row h3{ font-size:18px; line-height:18px; margin-bottom:20px;}
.about .row h2{ font-size:35px; line-height:35px; text-transform:uppercase; margin-bottom:40px;}
.about .row p{ font-size:16px; line-height:22px;}
.about .row a{ font-size:14px; font-family:camingodos_prosemibold;}
.about .row hr{ margin:0px; border-width:0px;}
.about .row.row1{ color:#7c8c89;}
.about .row.row1 a{ color:#7c8c89;}
.about .row.row2{ background:#c6d6d3; color:#fff;}
.about .row.row2 a{ color:#fff;}

.navigation{ width:100%; height:80px; padding:0 40px; position:fixed; z-index:3; background:#fff; left:0px; top:0px;}
.navigation .wrap{ width:100%; height:40px; padding:20px 0; position:relative;}
.navigation .wrap .logo{ width:auto; position:absolute; left:0px;}
.navigation .wrap .logo img{ height:25px; margin-top:5px;}
.navigation .wrap .menu{ width:100%; float:left; text-align:center;}
.navigation .wrap .menu li{ width:auto; display:inline-block; margin:0 15px;}
.navigation .wrap .menu li a{ line-height:40px; font-size:14px; text-transform:uppercase; color:#000; position:relative;}
.navigation .wrap .menu li a:hover, .navigation .wrap .menu li.active a{ font-weight:700;}
.navigation .wrap .menu li.back a{ padding-right:20px;}
.navigation .wrap .menu li.back a:after{ content:""; width:16px; height:16px; position:absolute; top:50%; margin-top:-9px; right:0px; background:url(../images/up.png); background-size:100% auto;}
.navigation .wrap .toggle{ display:none; margin-top:10px; width:20px; height:20px; position:absolute; right:90px;}
.navigation .wrap .toggle button{ width:20px; height:20px; padding:0px; float:left; background-color:transparent; border:0px; background-image:url(../images/icon-menu.png); background-size:100% auto; background-repeat:no-repeat; border:0px; outline: 0; -webkit-box-shadow: none; box-shadow: none;}
.navigation .wrap .toggle.active button{ background-image:url(../images/icon-close.png);}
.navigation .wrap .social{ width:auto; position:absolute; right:0px; margin-top:10px;}
.navigation .wrap .social ul{ float:right;}
.navigation .wrap .social li{ width:20px; height:20px; float:left; margin:0 0 0 15px; padding:0px;}
.navigation .wrap .social li a img{ width:100%; height:auto;}

.projects{ width:100%; float:left; position:relative; padding-top:80px; z-index:2;}
.projects .item{ width:33.33%; height:calc(50vh - 40px); float:left; position:relative;}
.projects .item a{ width:100%; height:100%; position:absolute; text-align:center; }
.projects .item a span.normal{ width:100%; height:100%; position:absolute; left:0px; top:0px; opacity:1; background-position:center center; background-size:cover; text-align:center; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index:1; }
.projects .item a span.hover{ width:100%; height:100%; position:absolute; left:0px; top:0px; opacity:0; background-position:center center; background-size:cover; text-align:center; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index:2; }
.projects .item a span.text{ opacity:0; width:100%; position:absolute; z-index:3; left:0px; bottom:30px; font-size:18px; color:#fff; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; z-index:3; }
.projects .item.black a span.text{ color:#000;}
.projects .item:hover a span.normal{ opacity:0;}
.projects .item:hover a span.hover{ opacity:1;}
.projects .item:hover a span.text{ opacity:1;}

.detail{ width:100%; height:calc(100vh - 80px); margin-top:80px; float:left; overflow:hidden;}
.detail .sidebar{ width:30%; height:100%; float:left; background:#ccc;}
.detail .sidebar .wrap{ position:relative; text-align:right; top:50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding:60px;}
.detail .sidebar .wrap .item{  text-align:right; display:inline-block;}
.detail .sidebar .wrap .item h1{ font-size:35px; line-height:35px; letter-spacing:10px; text-transform:uppercase; margin-bottom:40px;}
.detail .sidebar .wrap .item p{ max-width:300px; display:inline-block; font-size:16px; line-height:22px; margin:0 0 15px 0;}
.detail .sidebar .wrap .item h6{ width:100%; display:inline-block; font-size:14px; font-weight:300; line-height:22px; margin:0 0 10px 0;}
.detail .gallery{ width:70%; height:100%; float:left;}
.detail .gallery-mobile{ display:none; width:100%; height:auto; float:left;}
.detail .gallery-mobile .item{ width:100%; height:auto; float:left; margin-top:5px;}
.detail .gallery-mobile .item img{ width:100%; height:auto; float:left;}

.swiper-container { width: 100%;  height: 100%;}
.swiper-slide { text-align: center; font-size: 18px; background: #fff;width:auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.swiper-slide img{ height:100%;}
.swiper-scrollbar{ display:none;}

.company{ width:100%; height:100vh; float:left;}
.company .container{ width:100%; max-width:1170px; margin:0 auto;}
.company .row{ margin:0 -20px;}
.company .center{ width:100%; display:inline-block; position:relative; top:50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.company .image1, .company .image2, .company .text{ width:33.33%; float:left; padding:0 20px;}
.company .image1 img, .company .image2 img{ width:100%; height:auto;}
.company .text p{ font-size:16px; line-height:22px; margin:0 0 10px 0;}
.company .text p:last-child{ margin-bottom:0px;}

.footer{ width:100%; float:left; text-align:center;}
.footer .wrap{ width:100%; padding:30px 60px;}
.footer p{ font-size:12px; line-height:18px; margin:0px;}
.footer a{ color:#000;}
.footer a:hover{ text-decoration:underline;}

@media only screen and (max-width:1200px) {
	.company .container{ max-width:768px;}
	.company .image1, .company .image2{ width:50%;}
	.company .text{ width:100%; margin-top:30px;}
}

@media only screen and (min-width:769px) {
	
	.navigation .wrap .menu{ display:block;}	
	
}

@media only screen and (max-width:768px) {
	
	body.overflowhidden{ overflow:auto;}
	body.dettaglio{ overflow:auto;}
	
	.intro .wrap{ padding:40px;}
	.intro .wrap .menu{ top:40px; right:40px;}
	
	.category .item{ width:50%;}
	.category .item a span.text{ opacity:1 !important;}
	
	.about .row{ height:auto; padding:100px 40px;}
	.about .row .item{ top:none; transform:none;}
	.about .back{ right:40px; bottom:40px;}
	
	.navigation{ min-height:80px; height:auto; bottom:auto; top:0px;}
	.navigation .wrap .toggle{ display:block;}
	.navigation .wrap{ padding:20px 0;}
	.navigation .wrap .logo{ position:static; float:left;}
	.navigation .wrap .menu{ clear:both; display:none; margin:20px 0;}
	.navigation .wrap .menu li{ width:100%; margin:0; border-top:1px solid #f7f7f7;}
	.navigation .wrap .menu li a{ font-size:14px; line-height:35px;}
	.navigation .wrap .menu li.back a{ padding-right:18px;}
	.navigation .wrap .menu li.back a:after{ width:12px; height:12px; margin-top:-6px;}
	
	.projects{ padding-bottom:0px;}
	.projects .item{ width:50%;}
	.projects .item a span.text{ opacity:1 !important;}
	
	.detail{ height:auto;}
	.detail .sidebar{ width:100%; height:auto;}
	.detail .sidebar .wrap{ top:auto; transform:none; padding:40px;}
	.detail .sidebar .wrap .item{ width:100%; text-align:center;}
	.detail .sidebar .wrap .item p{ max-width:100%;}
	.detail .sidebar .wrap .item h6{ max-width:100%;}
	
	.detail .gallery{ display:none; width:100%; height:auto;}
	/*
	.detail .gallery .swiper-container{ float:left;}
	.detail .gallery .swiper-wrapper{ width:100%; float:left; display:inline-block; transform:none !important; transition-duration:unset !important;}
	.detail .gallery .swiper-slide{ width:100%; float:left; display:inline-block; flex-shrink:initial; margin-top:5px;}
	.detail .gallery .swiper-slide img{ width:100%; height:auto;}
	.detail .gallery .item-gallery{ width:100%; float:left; margin:5px 0 0 0 !important;}
	.detail .gallery .item-gallery img{ width:100%; height:auto; float:left;}
	*/
	.detail .gallery-mobile{ display:block;}
	
	
	.company .center{ top:0px; transform:none;}
	.company .container{ max-width:100%; padding:0 20px;}
	.company .image1, .company .image2{ width:100%;}
	.company .image1{ margin-bottom:30px;}
	.company .text{ margin-bottom:30px;}

}

@media only screen and (max-width:480px) {
	
	.navigation{ padding:0 20px;}
	.navigation .wrap .menu li{ margin:0 5px;}
	.navigation .wrap .menu li a{ font-size:14px;}
	.navigation .wrap .menu li.home{ display:none;}
	
	.category .item{ width:100%;}
	.category .item a span{ font-size:20px; opacity:1;}
	
	.projects .item{ width:100%;}
	.projects .item a span{ font-size:20px; opacity:1;}
	
}