html,body{height:100%;}
body{background: #eee;}

/*-----------------------------
general
-----------------------------*/

.animate{
	-webkit-transition: all 0.3s ease-out;
					transition: all 0.3s ease-out;
}

.button{display: inline-block; background: #fff; color:#000;padding: 15px 30px; border-radius:3px; text-decoration: none;}
p{line-height: 22px}
a {
  color: #6F5E46; /* pietra calda / sabbia scura */
  text-decoration: none;
  font-weight: 500; /* semi-bold */
}

a:hover {
  color: #4E4030;
  text-decoration: underline;
}

.card__copy a {
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.card__copy a:hover {
  color: #4F4433;
}

/*-----------------------------
header
-----------------------------*/

.header{
	border-bottom-style: solid;
	border-bottom-color: #1f1a17; /*colore bordo sopra immagine header*/
	border-bottom-width: 2px; /*bordo sopra immagine header*/
	background-color: #FFF;
}
.header__logo{color:#fff; float:left;display: block;padding:10px;text-decoration: none;}
.header__menu{float:right;margin:0; padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#1f1a17;display: block;padding:20px;text-decoration: none}
.header__menu__item a:hover{background-color: #eee;}
.header__icon-bar{display: block;float: right;padding:20px;display: none;}
.header__icon-bar span{display: block;height:3px; width: 30px;background: #1f1a17; margin-bottom: 5px;}
#logo1{display: block;}
#logo2{display: none;}


/*-----------------------------
Cover
-----------------------------*/
.cover{
	height:70%; /*altezza immagine header - originale 70%*/
	background-image: url(http://www.stonemarmi.it/web/img/header/img_header.jpg);
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
	position:relative;
	border-top-width: 1px; /*bordo bianco header*/
	border-top-style: solid; /*bordo bianco header*/
	border-top-color: #FFF; /*bordo bianco header*/
	background-repeat: no-repeat;	
}
.cover__filter{ background: #000; width:100%; height:100%; position: absolute; z-index: 0; opacity: 0.5; }
.cover__caption{ display: table; height: 100%; width:100%; position: relative; z-index:1; padding: 0 20px}
.cover__caption__copy{ display: table-cell; vertical-align: middle; text-align: center; color:#fff; }

.cover--single{height: 50%}
.cover--single h1{font-size: 42px;}

/*-----------------------------
Cards
-----------------------------*/

.cards{
	display: -webkit-flex; /*div con altezze proporzionali*/
    flex-flow: row nowrap; /*row, gli elementi si dispongono su una riga - nowrap, impediamo agli elementi di disporsi su pił righe*/
    -webkit-flex-flow: row nowrap; /*row, gli elementi si dispongono su una riga - nowrap, impediamo agli elementi di disporsi su pił righe*/
    align-items: stretch;
    -webkit-align-items: stretch;
    justify-content: space-between; /*orizzontalmente creando una spaziatura proporzionale tra di loro*/
    -webkit-justify-content: space-between; /*orizzontalmente creando una spaziatura proporzionale tra di loro*/
	
	max-width: 100%; 
	margin: 40px auto;
	}





.card{width: 100%; margin:0 1.5%; background: #fff; float:left;}
.card2{width: 100%;	margin:0 1.5%; float:left;} /* Immagine vuota e trasparente */


.card__image{width:100%; height: auto; border:0;}
.card__image:hover{
	border:0;
	/*opacity: 0.7;*/
	transform: scale( 0.99 );
	filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(0.7); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(0.7); /* Microsoft Edge and Firefox 35+ */
}


.card__copy{padding:5px 20px;}
.card__copy h3{margin-bottom:0;}
.card__copy:hover img {
	opacity: 0.5;
	transform: scale( 1.2 );
}

.box_link{fill: none;}


/*-----------------------------
Banner
-----------------------------*/
.banner{background: #fff; height:50%; margin-top:40px}
.banner__image{
	width:30%;
	float:left;
	height:100%;
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #1f1a17;
}
.banner__info_1{background-image: url(http://www.stonemarmi.it/web/img/banner/img_banner/banner_1.jpg);}
.banner__info_2{background-image: url(http://www.stonemarmi.it/web/img/banner/img_banner/banner_2.jpg);}
.banner__info_3{background-image: url(http://www.stonemarmi.it/web/img/banner/img_banner/banner_3.jpg);}


.banner__copy{width:70%; float:left;height:100%;display: table;}
.banner__copy__text{display: table-cell; vertical-align: middle; padding:30px; font-family: Verdana;}

.banner__copy__text h3{font-size: 36px;margin-bottom:0;}
.banner__copy__text h4{font-size: 22px;margin: 5px 0;}

.info_small{padding: 0px 0px 15px 0px;}
.info_small_c{width:150px; height:auto;	border:0; margin-bottom:20px;}

/*-----------------------------
Footer
-----------------------------*/

.footer{
	background: #1f1a17;
	padding:30px;
	color:#fff;
	margin-top: 40px;
	text-align: center;
}

#footer1{display: block;}
#footer2{display: none;}



/*-----------------------------
Single
-----------------------------*/
.panel{text-align: justify; font-family: Verdana;}
.panel__copy{max-width: 800px; margin: 0px auto; margin-top: -60px; background: #fff; padding:20px 40px;position: relative; z-index: 1;}
.panel__copy_2{
	max-width: 800px;
	margin: 0px auto;
	margin-top: -60px;
	padding:20px 40px;
	position: relative;
	z-index: 1;
	font-size: large;
	color: #FFF;
	font-weight: bold;
	background-color: #F6C;
	text-align: center;
}
#panel__copy_nota_1{display: block;}
#panel__copy_nota_2{display: none;}

.panel__copy__meta{font-weight: bold;font-size: 16px;}
.panel__copy__title{font-size: 32px;}

.panel__copy__txt1{
	color: #FFF;
	font-weight: bold;
	padding: 10px;
}


/*-----------------------------
Tablet
-----------------------------*/
@media only screen and (max-width: 1200px){
     /* header */
	.header{position:fixed; z-index: 100;width:100%}
	.header__icon-bar{display: block;}

	.header__menu{width:100%;height:0px; overflow: hidden;}
	.header__menu__item{display: block;}
	.is-open{height:100%; overflow: auto;}
		
	 #logo1{display: none;}
     #logo2{display: block;}
	 
	/* Cards */
	.cards{display: block; } /*disattiva altezze proporzionali e righe bloccata*/
	.card{width: 90%; margin:5%; }
	
	/* banner */
	.banner__image,
	.banner__copy{width:100%;height:40%}
	.banner__copy__text h5{display:none;}
	.info_small_c{width:75px; height:auto; border:0;}/*controllare codice*/
	
	/* footer */
	.footer{font-size: 12px;}
	
	#footer1{display: none;}
    #footer2{display: block;}
	
	/* Single */
	#panel__copy_nota_1{display: block;}
    #panel__copy_nota_2{display: none;}
	
}


/*-----------------------------
Smartphone
-----------------------------*/
@media only screen and (max-width: 767px){
     /* header */
	.header{position:fixed; z-index: 100; width:100%}
	.header__icon-bar{display: block;}

	.header__menu{width:100%;height:0px; overflow: hidden;}
	.header__menu__item{display: block;}
	.is-open{height:100%; overflow: auto;}
		
	 #logo1{display: none;}
     #logo2{display: block;}

	/* Cover */
	.cover{height:100%;}
	 
	/* Cards */
	.cards{display: block; } /*disattiva altezze proporzionali e righe bloccata*/
	.card{width: 90%; margin:5%; }

	/* Banner */
	.banner{height: 600px;}
	.banner__image,
	.banner__copy{width:100%;height:40%}
	.banner__copy__text h5{display:none;}
	
	/* footer */
	.footer{font-size: 12px;}
	
	#footer1{display: none;}
    #footer2{display: block;}
	
	/* Single */
	#panel__copy_nota_1{display: none;}
    #panel__copy_nota_2{display: block;}

}


/* clearfix */

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

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


/* ============================== CONFIGURAZIONI AGGIUNTIVI ===================== */


.product_txt {
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 2px dashed #f69c55;
}


.service-title {
  padding: 12px 16px;
  margin-top: 30px;
  font-weight: bold;
}

/* Progettazione */
.bg-progettazione {
  background: #E5E5E5;
  color: #333333;
}

/* Lavorazione */
.bg-lavorazione {
  background: #D6E4EE;
  color: #1F3A4D;
}

/* Montaggio */
.bg-montaggio {
  background: #F1D6D6;
  color: #6A1E1E;
}

/* Tabelle servizi: look pił pulito */
.service-list td { vertical-align: middle; }

.icon-dot {
  width: 50px;
  position: relative;
}

.icon-dot:before {
  content: "";
  width: 10px;
  height: 10px;
  background: #C8BFB2;
  border-radius: 50%;
  display: block;
  margin: 18px auto;
}

/* Riga servizi gratuiti / garanzie */
.service-list .row {
  background: #F6F2EB;   /* sabbia chiaro */
  color: #2B2B2B;
  font-weight: bold;
  padding: 12px 14px;
  border-radius: 4px;
}

/* Variante pił soft per "Cosa garantiamo" */
.service-list .row-soft {
  background: #FBF8F3;
}

/* Separatore elegante tra blocchi */
.service-sep {
  height: 18px;
}

.panel__copy ul { margin: 10px 0 20px 20px; }
.panel__copy li { margin: 8px 0; }

/* CTA links responsive */
.cta-links {
  text-align: left;
}

.cta-sep {
  margin: 0 6px;
}

/* Mobile: uno sotto l'altro */
@media only screen and (max-width: 767px){
  .cta-links a {
    display: block;
    margin: 8px 0;
  }

  .cta-sep {
    display: none;
  }
}