/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: 'Lato', sans-serif; font-weight:300;  
  color: #fff;
  background-color: #000;
}

a {
  color: #fe0200;
  text-decoration: none;
}
img{ max-width:100%}
.citazione{ font-style:italic; text-align:center !important}
.citazione font{ font-weight:700;}


.btnVideo{ text-align:center !important; font-weight:700; z-index:2; display:block; position:relative; text-transform:uppercase; padding:100px 0 0 0; color:#fff;}

.btnVideo2{ text-align:center !important; font-weight:700; z-index:2; display:block; position:relative; text-transform:uppercase; padding:10px 0 20px 0; color:#fff;}

.btnVideo2 li{ display: inline-block; margin:10px}

.btnVideo i{ font-size:70px; padding:10px}
.btnVideo2 i{ font-size:50px; padding:10px}

.contVideo{ position:relative; width:100%; height:300px; background:url(../images/bgBambino.jpg) no-repeat center; background-size:cover;  margin:0 0 35px 0}

.lang{ position:absolute;bottom:110px; width:100%; text-align:center; z-index:10; }
.lang li{ display:inline; margin:10px }
.lang li a{ color:#FFF !important }


#gallery div { width: 100%; height: 100%; background-size:cover; background-attachment:fixed }
.loghiPartners, .loghiPartnersMobile { margin:0 0 20px 0; z-index:10}

.loghiPartners img, .loghiPartnersMobile img{ max-width:1280px; margin:0 auto; width:100%;}

.loghiPartnersMobile{ display:none}

.iframe{ position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0}
#d-perf-content, #dettagli-content{ position:relative;  min-height: 100vh;}

.blur{ position:absolute; left:400px; width:300px; height:300px; z-index:4;  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;
  background:rgba(193,27,30,1.00);

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);}

/* -------------------------------- 
NAVIGAZIONE
-------------------------------- */
.side-navigation {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  height: 100vh;
  width: 74px;
  overflow: hidden;
}
.side-navigation::before {
  /* background color of the side navigation */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: -webkit-calc(100% - 4px);
  width: calc(100% - 4px);
  background-color: #131519;
}
.side-navigation ul {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.side-navigation li {
  width: -webkit-calc(100% - 4px);
  width: calc(100% - 4px);
}

.side-navigation li a  img { max-width:44px; width:100%; height:auto}

.side-navigation a {
  display: block;
  position: relative;
  padding: 4em 0 1.5em;
  font-size: 1.2rem;
  text-align: center;
  color: #4a5261;
  -webkit-transition: background-color 0.2s, color 0.2s;
  -moz-transition: background-color 0.2s, color 0.2s;
  transition: background-color 0.2s, color 0.2s;

}
.side-navigation a svg, .side-navigation li a  img {
  /* this is the icon */
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 5px;
}
.side-navigation a svg * {
  -webkit-transition: stroke 0.2s;
  -moz-transition: stroke 0.2s;
  transition: stroke 0.2s;
}
.side-navigation a::after {
  /* 4px line to the right of the item - visible on hover */
  content: '';
  position: absolute;
  top: 0;
  right: -4px;
  height: 100%;
  width: 4px;
  background-color: #83b0b9;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  pointer-events: none;
}
.no-touch .side-navigation a:hover {
  background-color: #08090b;

}
.no-touch .side-navigation a:hover::after {
  opacity: 1;
  
}
.side-navigation a.selected, .no-touch .side-navigation a.selected:hover {
  background-color: #ffffff;
  color: #131519;
  
}
.side-navigation a.selected > svg *, .no-touch .side-navigation a.selected:hover > svg * {
  stroke: #83b0b9;
}
.side-navigation li:nth-of-type(2) .selected > svg *,
.side-navigation li:nth-of-type(2) .selected:hover > svg * {
  stroke: #d35657;
}
.side-navigation li:nth-of-type(3) .selected > svg *,
.side-navigation li:nth-of-type(3) .selected:hover > svg * {
  stroke: #343943;
}
.side-navigation li:nth-of-type(4) .selected > svg *,
.side-navigation li:nth-of-type(4) .selected:hover > svg * {
  stroke: #e4b162;
}
.side-navigation li:nth-of-type(2) a::after {
  background-color: #d35657;
}
.side-navigation li:nth-of-type(3) a::after {
  background-color: #e60000;
}
.side-navigation li:nth-of-type(4) a::after {
  background-color: #e4b162;
}
@media only screen and (min-width: 480px) {
  .side-navigation {
    width: 94px;
  }
  .side-navigation a {
    padding: 4em 0 1.5em;
    font-size: 1.3rem;
  }
  .side-navigation a svg, .side-navigation li a  img{
    top: 5px;
  }
}

/*
   slide
*/


.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { width: 100%; height:100% !important; margin: 0 auto; padding: 0; position: absolute; z-index:1; top:0;


 }

.cycle-slideshow img { 
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
.cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}





/* -------------------------------- 

contenuto

-------------------------------- */
.main {
  height: 100vh;
  overflow: hidden;
}

#retino {
	z-index:2;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	background:url(http://www.pastamancini.com/bin/img/pattern.png) repeat;
}

.logoHome{position:relative; margin-top:5%; z-index:10;}

.logoBurasca{position:absolute;bottom:150px; width:100%; text-align:center; z-index:10;}

video.video {
    position: absolute;
	left: 0;
	top: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	background-size: cover;

}

.section {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0s 0.5s;
  -moz-transition: -moz-transform 0s 0.5s;
  transition: transform 0s 0.5s;
}
.section.overflow-hidden {
  /* this class is used to hide the scrolling bar while a new section is entering the viewport */
  overflow: hidden;
}
.section header {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.section.burasca header {
  background-color: #d35657;
  background-image:url(../images/bgBurasca.jpg);
  background-size:cover;
  /*
  background-color: red;
  background-blend-mode: multiply;
  */
}

.section.projects header {
  background-color: #343943;
}
.section.dettagli header {
  background-color: #fff;
}
.section.contact header {
  background-color: #e4b162;
}
.section .scroll {
  /* this is the arrow at the bottom of the header */
  display: block;
  position: absolute;
  z-index:10;
  bottom: 60px;
  left: -webkit-calc(50vw - (12px - 4px)/2);
  left: calc(50vw - (12px - 4px)/2);
  width: 44px;
  height: 44px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  visibility: hidden;
  -webkit-transition: -webkit-transform 0s 0.5s, visibility 0s 0.5s;
  -moz-transition: -moz-transform 0s 0.5s, visibility 0s 0.5s;
  transition: transform 0s 0.5s, visibility 0s 0.5s;
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  background: url("../images/icon-arrow.svg") no-repeat center center;
}
 .scrollUp {
  position: relative;
  z-index:3;
  width: 44px;
  height: 44px;
  text-indent: 100%;
  margin:0 auto;
  text-align:center;
  display: block;

  background: url("../images/icon-arrowDown.svg") no-repeat center center;
}
.section.visible {
  /* this is the visible/selected section */
  position: relative;
  z-index: 2;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s 0s;
  -moz-transition: -moz-transform 0.5s 0s;
  transition: transform 0.5s 0s;
}
.section.visible .scroll {
  visibility: visible;
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  -webkit-transition: -webkit-transform 0.2s 0.5s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.2s 0.5s, visibility 0s 0s;
  transition: transform 0.2s 0.5s, visibility 0s 0s;
  -webkit-animation: scroll-down 1.2s 0.9s;
  -moz-animation: scroll-down 1.2s 0.9s;
  animation: scroll-down 1.2s 0.9s;
  -webkit-animation-iteration-count: 2;
  -moz-animation-iteration-count: 2;
  animation-iteration-count: 2;
}

/*  ========  INIZIO STILE CONTATTI ======== */

.mappa {
	width:100%;
	height:450px;
}
#wrapSocialIconsContact{ position:relative; margin:15px auto 70px auto; text-align:center}
#wrapSocialIconsContact img{ max-width:70px; height:auto; width:100%; margin:10px;}

/*  ========  FINE STILE CONTATTI ======== */
s
@media only screen and (min-width: 480px) {
  .section {
  }
  .section .scroll {
    left: -webkit-calc(50vw - (94px - 4px)/2);
    left: calc(50vw - (94px - 4px)/2);
  }
}

@-webkit-keyframes scroll-down {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
  }
}
@-moz-keyframes scroll-down {
  0% {
    -moz-transform: translateX(-50%) scale(1);
  }
  50% {
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -moz-transform: translateX(-50%) scale(1);
  }
}
@keyframes scroll-down {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
    -ms-transform: translateY(10px) translateX(-50%) scale(1);
    -o-transform: translateY(10px) translateX(-50%) scale(1);
    transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}
.title {
  position: absolute;
  z-index:2;
  top: 50%;
  left: 0;
  /* this prevents title from jumping when the section scroll bar is visible */
  width: calc(100vw - 90px);
  padding: 1em;
  color: #ffffff;
  text-align: center;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 0;
  -webkit-transform: translateY(-50%) translateX(-80px);
  -moz-transform: translateY(-50%) translateX(-80px);
  -ms-transform: translateY(-50%) translateX(-80px);
  -o-transform: translateY(-50%) translateX(-80px);
  transform: translateY(-50%) translateX(-80px);
  -webkit-transition: -webkit-transform 0s 0.5s, opacity 0s 0.5s;
  -moz-transition: -moz-transform 0s 0.5s, opacity 0s 0.5s;
  transition: transform 0s 0.5s, opacity 0s 0.5s;
}
.title h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.title span {
  opacity: 0.6;
}
.visible .title {
  opacity: 1;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.4s 0.2s, opacity 0.4s 0.2s;
  -moz-transition: -moz-transform 0.4s 0.2s, opacity 0.4s 0.2s;
  transition: transform 0.4s 0.2s, opacity 0.4s 0.2s;
}
@media only screen and (min-width: 768px) {
  .title h2 {
    font-size: 5rem;
  }
}

.content {
  padding: 2em 0;
  background-color: #000;
}
.content p {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 2em;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #fff;
  	text-align:justify

}
@media only screen and (min-width: 768px) {
  .content {
    padding: 4em 0;
  }
  .content p {
    font-size: 1.6rem;
	text-align:justify
  }
}

@media only screen and (max-width: 1024px) {
	  .mappa { padding-top:0}
	  }

/* -------------------------------- 

 Loading Bar

-------------------------------- */
#loading-bar {
  position: fixed;
  z-index: 2;
  left: 70px;
  width: 4px;
  visibility: hidden;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
#loading-bar.index {
  background-color: #83b0b9;
}
#loading-bar.services {
  background-color: #d35657;
}
#loading-bar.progetto {
  background-color: #343943;
}
#loading-bar.contatti {
  background-color: #e4b162;
}
#loading-bar.loading {
  visibility: visible;
}
@media only screen and (min-width: 480px) {
  #loading-bar {
    left: 90px;
  }
}

@media only screen and (max-width: 568px) {
	.loghiPartnersMobile{ display:block}
		.loghiPartners{ display:none}

	.logoHome img { max-width:40%}
    .logoBurasca img { max-width:70%}

#gallery div { background-size:contain !important; background-repeat:no-repeat; background-position:center }

	  
  .mappa {
	width:100%;
	height:150px;
}

	
}

/* iPhone 6 in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { .logoHome img { max-width:10%}
    .logoBurasca img { max-width:30%}}
	
/* iPhone 5 & 5S in landscape */
	@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { .logoHome img { max-width:10%}
    .logoBurasca img { max-width:30%}


/* 
		.block-menu {
			display: block;
			position:absolute; left:0; z-index:4; top:0;
		}

		.block-menu li {
			display: block;
			
		}

		.block-menu li a {
			color: #fff;
			display: block;
			text-decoration: none;
			-webkit-font-smoothing: antialiased;
			-moz-font-smoothing: antialiased;
			font-smoothing: antialiased;
			font-size: 14px;
			width:90px;
			height:90px;
			
		}

		.three-d {
			-webkit-perspective: 250px;
			-moz-perspective: 250px;
			perspective: 250px;
			-webkit-transition: all .07s linear;
			-moz-transition: all .07s linear;
			transition: all .07s linear;
			position: relative;
			
			}

			.three-d:not(.active):hover {
				cursor: pointer;
			}

			.three-d:not(.active):hover .three-d-box, 
			.three-d:not(.active):focus .three-d-box {
				-moz-transform: translateZ(-45px) rotateY(90deg);
				-webkit-transform: translateZ(-45px) rotateY(90deg);
				-o-transform: translateZ(-45px) rotateY(90deg);
				transform: translateZ(-45px) rotateY(90deg);
			}

		.three-d-box {
			-webkit-transition: all .2s ease-out;
			-moz-transition: all .2s ease-out;
			-ms-transition: all .2s ease-out;
			-o-transition: all .2s ease-out;
			transition: all .2s ease-out;
			-webkit-transform: translatez(-45px);
			-moz-transform: translatez(-45px);
			-o-transform: translatez(-45px);
			transform: translatez(-45px);
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
			pointer-events: none;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;

		}

		.front {
			-webkit-transform: rotateY(0deg) translatez(45px);
			-moz-transform: rotateY(0deg) translatez(45px);
			-o-transform: rotateY(0deg) translatez(45px);
			transform: rotateY(0deg) translatez(45px);
		}

		.back {
			-webkit-transform: rotateY(-90deg) translatez(45px);
			-moz-transform: rotateY(-90deg) translatez(45px);
			-o-transform: rotateY(-90deg) translatez(45px);
			transform: rotateY(-90deg) translatez(45px);
			color: #FFE7C4;
		}

		.front, .back {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #343943;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			overflow:hidden;
						border:1px solid #3C3C3C;

		}
		.back{ 
		background:yellow !important}
		 */