/*******************************************************************************
********************************************************************************
*****************CODING BY SAMUELE CALAMITA - WEB DEVELOPER BERLIN*************
********************************************************************************
*******************************************************************************/

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body {
	font-size:10px;
	margin: 0;
	padding: 0;
	background-color: #EBEBEB;
}
.no-js #loader{
	display: none;  
}
.js #loader { 
	display: block;
	position: absolute;
	left: 100px;
	top: 0;
}
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('image/301.gif') center no-repeat #EBEBEB;
	}

strong {
	background: black;
	color: white;
}

.site-header {
	background-image: url('image/001.png'); 
    background-size: cover;
	background-position: center;
	height: auto;
	padding-bottom: 277px;
}

/**********MENU**************/

nav {
	float:left;
	width:100%;	
}


#site-nav {
	list-style:none;
	padding:0;
	margin:0;
	text-align: center;
}

#site-nav li {
    display: inline-block;
}

#site-nav a {
	display: block;
    font-family: Georgia;
    font-size: 2.5em;
    color: white;
    padding: 25px;
    text-decoration: none;
    text-transform: uppercase;
}

#site-nav a:hover {
	color: #C81412;
}

/**************COVER*****************/

.logo{
	margin: auto;
    display: block;
	padding-top: 10.313em;
	padding-bottom: 1em;
}


h1{ 
	font-family: 'Alex Brush', cursive;
	font-size: 20em;
	color: white;
	text-align: center;
	margin-top: -30px;
	margin-bottom: 10px;
}

h2{
	background-color: black;
    text-align: center;
    font-family: georgia;
    font-size: 2.5em;
    color: white;
    padding: 22px;
    max-width: 872px;
    margin: auto;
}




/*************ABOUT********************/

.about {
	background-color: #E10020;
	font-family: georgia;
	font-size: 2.8em;
	text-align: center;
	color: white;
	padding-top: calc(92px - 1em);
    padding-bottom: calc(92px - 1em);
}

h3{
	font-family: georgia;
    font-size: 5em;
    color: #333333;
    text-transform: uppercase;
}

.lined-heading {
	text-align:center;
	}

.lined-heading {
  padding:0 25%;
  position:relative;
  z-index:1;
}

.lined-heading:before {
  content:"";
  width:100%;
  margin-top:-1px;
  border-top:1px solid #222;
  position:absolute;
  top:50%;
  left:0;
  z-index:-1;
}

.lined-heading > span {
  background-color: #EBEBEB; 
  display:block;
}

/*****************SERVICE*************************/

.service{
	background-color: #EBEBEB;
	color: #333333;
	padding-bottom: calc(92px - 1em);
}

.service img{
	padding: 1em;
}

.service span{
	background-color: #EBEBEB;
}

.servizi{
	font-family: georgia;
    font-size: 2.8em;
    text-align: center;
}

/***********TABLE PRICE***********/

.price-list{
	margin: auto;
    font-size: 2.8em;
	padding-bottom: calc(92px - 1em);
 }


.push{
	float: right;
}

small{
	font-size: .7em;
}

td{
	padding: .4em;
}

small.push{
    margin-top: 4px;
}

td:nth-child(2){
	padding-left: 1em;
}
.red{
	background-color: #E40012;
	color: white;
}
.black{
	background-color: black;
	color: white;
}
.white{
	background-color: #EBEBEB;
}

/************TEAM*************/

.team{
	background-image:url('image/003.png'); 
    background-size: cover;
	background-position: 60%;
	height: auto;
	padding-top: 43.250em;
	}

.team p{
	font-family: georgia;
	font-size: 2.8em;
	text-align: center;
	color: white;
}

.team p span{
	color: red;
}

/*********CONTACT**********/

.contact{
	background-color: #EBEBEB;
	color: #333333;
	padding-bottom: 2.5em;
}
.contact h3 span {
	background-color: #EBEBEB;
}
.contact p{
	font-family: georgia;
    font-size: 2.8em;
    text-align: center;
	line-height: 1.5em;
}
.contact a{
	font-family: georgia;
	font-size: 2em;
	color: red;
	text-decoration: none;
	margin: auto;	
	line-height: 1.5em;
	}

/************GOOGLE MAPS************/

 .google-maps {
		height: 40vh;
		width: auto;
    }
	
.google-maps iframe {
		height: 100%;
		width: 100%;
}
	
.site-footer {
	background: black;
	top: 0;
	color:white;
	font-size: 2em;
	padding-bottom:1em;
	text-align: center;
}
.site-footer a{
	color: white;
}

/**********RESPONSIVE LAYOUT*************/

.container {
	max-width:1100px;
	margin:0 auto;
	padding:1em;
}

.columns {
	float:left;
	}

.push {
	float:right;
}

.row {
	width:auto;
}

.row:before, 
.row:after {
	content:'';
	display:table;
}

.row:after {
	clear:both;
}

/* Small */

@media screen and (max-width:600px) {
	
	.small-1 {
		width:100%;	
	}
	
	.small-2 {
		width:33.333333%;	
	}
	
	body {
	font-size:5px;
	}
	
	nav{
		font-size: 8px;
	}
	.logo {
    width: 20%;
	}
	.site-header {
	padding-bottom: 100px;
	}
	h1{
	font-size: 14em;
	padding-top: .5em;
	}
	
	h2{
    font-size: 3em;
	}
	.about, .service, #pricelist, .contact {
    padding-top: calc(25px - 1em);
    padding-bottom: calc(25px - 1em);
}
	p{
		font-size: 2em;
	}
	
	adress{
		font-size: 2em;
	}
	.about {
    font-size: 2em;
    }
	.servizi{
		font-size: 4em;
	}
	
	.team p{
		font-size: 4em;
	}
	
	.contact p {
    font-size: 4em;
	}
	
	.contact a {
    font-size: 2em;
    }
	
	.site-footer a {
    font-size: 1.7em;
	}
}
/* Medium */

@media screen and (min-width:600px) and (max-width:1000px) {
	
	.medium-1 {
		width:16.66667%;	
	}
	
	.medium-2 {
		width:33.333333%;	
	}
	
	.medium-3 {
		width:50%;	
	}
	
	.medium-4 {
		width:66.66667%;	
	}
	
	.medium-5 {
		width:83.333333%;	
	}
	
	.medium-6 {
		width:100%;	
	}
	
	.medium-offset-1 {
		margin-left:16.66667%;	
	}
	
	.medium-offset-2 {
		margin-left:33.333333%;	
	}
	
	.medium-offset-3 {
		margin-left:50%;	
	}
	
	.medium-offset-4 {
		margin-left:66.66667%;	
	}
	
	.medium-offset-5 {
		margin-left:83.333333%;	
	}
	h1{
	font-size: 14em;
	}
	
}

/* Large */

@media screen and (min-width:1000px) {
	
	.large-1 {
		width:33.333333%;	
	}
	
	.large-2 {
		width:66.666666%;	
	}
	
	.large-3 {
		width:100%;	
	}
	
	.large-offset-1 {
		margin-left:33.333333%;	
	}
	
	.large-offset-2 {
		margin-left:66.666666%;	
	}
}

@media screen and (min-width:900px) {
	.menu-trigger {
    display:none;
  }
}

@media screen and (max-width:900px) {
  
  .menu-trigger {
    display:block;
	width: 100%;
	font-family: georgia;
    font-size: 3em;
	text-transform: uppercase;
    text-align: center;
	color: white;
	text-decoration: none;
	padding: 1em;
	background-color: black;
  }
  
  .menu-trigger{
      opacity: 0.6;
  }
  
  nav ul li {
    display:block;
	width: 100%;
  }
  
  nav ul {
    display:none;
  }
  }
  
   /* Fade effect */
 
  .come-in {
  transform: translateX(-300px);
  animation: come-in 2s cubic-bezier(0, -0.01, 0, 0.99) forwards;
}

.come-in:nth-child(odd) {
  animation-delay: .2s;
  animation-duration: 2s;
}

.leave {
  transform: translateX(300px);
  animation: leave 2s cubic-bezier(0, -0.01, 0, 0.99) forwards;
}

.leave:nth-child(odd) {
  animation-delay: 2s;
  animation-duration: 2s;
}

.already-visible {
  transform: translateY(0);
  animation: none;
  opacity: 1;
}

@keyframes come-in {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes leave {
  to {
    transform: translateX(-300);
    opacity: 0;
  }
}

/*policy privacy*/
    
    .pop-up {position:absolute; top:0; left:-999em;}
    .pop-up:target {position:static; left:0;}
    .popBox {
      background:#ffffff;
      position:absolute; left:15%; right:15%; top:20%; bottom:20%;
      z-index:10;
      box-shadow:2px 2px 4px #4a4a4a;
      opacity:0;
      -webkit-transition: opacity 0.6s ease-in-out;
      -ms-transition: opacity 0.6s ease-in-out;
      transition: opacity 0.6s ease-in-out;
    }
    :target .popBox {position:fixed; opacity:1;}
    .lightbox {display:none; text-indent:-999em; background:#000; opacity:0.6; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0; z-index:5;}
    :target .lightbox {display:block;}
    .lightbox:hover {background:#000;}
    .popScroll {position:absolute; top:9%; left:3%; right:3%; bottom:9%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}