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: blink;}
p{line-height: 22px}
a{color:#16dd94}
a:hover{color: #1af3a4;}

/* 
effetto animation marco
*/
 
h1,h4 {
 animation-duration: 6s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-iteration-count: 1;
  /*animation-iteration-count: 1;*/
  /*animation-delay: 6s;*/
  /*animation-fill-mode: forwards;*/
  color:#00CC00;
   
  }
 h2 {
   animation-duration: 6s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-iteration-count: 1;
  
   
   color: #009900;
   
  }
 p {
  animation-duration: 6s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-iteration-count: 1;
  
  color: #000099;
   
  }
  /* 
effetto margin-left: 100%; 
*/
@keyframes slidein {
  from {
    margin-left: 80%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

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

.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0; padding:0; color:#FFFFFF}
.header__menu__item{display: inline-block; font-size:22px}
.header__menu__item a{color: #FFFFFF;display: block;padding:20px;text-decoration: none}
.header__menu__item a:hover{background: #000099}
.header__icon-bar{display: block;float: right;padding:20px;display: none;}
.header__icon-bar span{display: block;height:3px; width: 30px;background: #fff; margin-bottom: 5px;}

/*-----------------------------
zoom  marco 
-----------------------------*/
.BoxBiancoTestoBlu img{-webkit-transition:all 0.2s ease-in-out 0s;-moz-transition:all 0.2s ease-in-out 0s;-ms-transition:all 0.2s ease-in-out 0s;-o-transition:all 0.2s ease-in-out 0s;transition:all 0.2s ease-in-out 0s;}.BoxBiancoTestoBlu img:hover{transform:scale(2.1);-webkit-transform:scale(2.1);-moz-transform:scale(2.1);-o-transform:scale(2.1);}
/*-----------------------------
Cover
-----------------------------*/
.cover{height:10%;
	background-image: url("https://source.unsplash.com/category/people/400x260");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
	position:relative;
}
.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{max-width: 1200px; margin: 40px auto}
.card{width: 30%; margin:1 1.5%; background: #fff;float:left;}
.card__image{width:100%; height: auto;}
.card__copy{padding:5px 20px; text-align:justify;}
.card__copy h3{margin-bottom:0}

.cardssmall{max-width: 1200px; margin: 40px auto}
.card2{width: 20%; margin:0 1.5%; background: #fff;float:left;}
.card__image2{width:30%; height: auto;}
.card__image2a{width:30%; height: auto;}
.card__copy2{padding:5px 5px; text-align:justify;}
.card__copy2 h3{margin-bottom:0}
.card_copy h1{font-size: 10px}

 
.card_image_Guad{width:100%; height: auto;}
/*-----------------------------
Banner
-----------------------------*/
.banner{background: #fff; height:30%;margin-top:40px}
.banner__image{width:30%; float:left;height:100%;
	background-image: url("http://www.cnreurope.eu/guadamello/schema.png");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
}
.banner__image2{width:30%; float:left;height:100%;
	background-image: url("https://source.unsplash.com/category/food/400x260");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
}
.banner__image3{width:30%; float:left;height:80%;
	background-image: url("http://www.cnreurope.eu/guadamello/Image4.jpg");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
}
.banner__image4{width:30%; float:left;height:80%;
	background-image: url("http://www.cnreurope.eu/guadamello/Image4.jpg");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
}
.banner__image5{width:30%; float:left;height:80%;
	background-image: url("http://www.cnreurope.eu/guadamello/Image4.jpg");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
}
.banner__image6{width:30%; float:left;height:80%;
	background-image: url("http://www.cnreurope.eu/guadamello/Image4.jpg");
	background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
}

.banner__copy{width:70%; float:left;height:100%;display: table;}
.banner__copy__text{display: table-cell; vertical-align: middle;padding:5px; text-align:justify;}

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


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

.footer{background: #333; padding:30px;color:#fff; margin-top: 4s0px}


/*-----------------------------
Single
-----------------------------*/
.panel{}
.panel__copy{max-width: 800px; margin: 0px auto; margin-top: -60px; background: #fff; padding:20px 40px;position: relative; z-index: 1}
.panel__copy__meta{font-weight: bold;font-size: 16px;	}
.panel__copy__title{font-size: 32px;}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

/*-----------------------------
Tablet
-----------------------------*/
@media (max-width: 998px){
	/* banner */
	.banner__image,
	.banner__copy{width:50%;height:100%}

}


/*-----------------------------
Smartphone
-----------------------------*/
@media (max-width: 767px){

	.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:300px; overflow: auto;}

	/* Cover */
	.cover{height:100%;}

	/* Cards */
	.card{width: 90%; margin:5%; }

	/* Banner */
	.banner{height: 600px;}
	.banner__image,
	.banner__copy{width:100%;height:50%}

}


/* 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;
}