/*html e body visualizzati sul 100% della pagina */
/*https://source.unsplash.com/*/
html,body{height: 100%;} 
body{background:yellowgreen;}

/*********************
GENERAL
*********************/

.animate{ /*animazione menu a tendina*/
  -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
}

.button{display: inline-block;background: white;color: #000;padding: 15px 30px;border-radius: 3px;text-decoration: none ;}
p{line-height: 22px;}
a{color:black;text-decoration: none;}
a:hover{color:chartreuse;}
/*********************
HEADER
*********************/

.header{background: rgb(23, 172, 73);}
.header a:hover{color:transparent;}
.header__logo{color:transparent;float: left;display: block;padding:20px; background-image: url("logo.png");}
.header__menu{float: right;margin: 0;padding: 0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:yellow;display: block;padding:20px;}
.header__menu__item a:hover{background: yellowgreen}
.header__icon-bar{display: block;float:right;padding: 20px ;display: none;}
.header__icon-bar span{display: block;height: 3px;width: 30px;margin-bottom: 5px;background:yellow}/*icona responsive che appare sui telefoni*/

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

.cover{height:70%;
      background-image: url("https://source.unsplash.com/1920x1080?padlock,chain");
      background-size: cover; /*compatibilita cover per browser*/
      -o-background-size:cover;
      -moz-background-size:cover;
      /*centro l immagine sia orizzontalmente che verticalmente*/
      background-position: center center; 
      position: relative;
}
.cover__filter{background: black;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: white;}

.cover--green{height: 50%;background-image: url("https://source.unsplash.com/1920x1080?nature,green");}
.cover--team{height: 50%;background-image: url("https://source.unsplash.com/1920x1080?work,office");}
.cover--tomorrow{height: 50%;background-image: url("https://source.unsplash.com/1920x1080?future");}

/*********************
CARD
*********************/
.cards{max-width: 1200px;margin: 40px auto}
.card{width: 30%;margin:0 1.5%;background:whitesmoke;float: left;  }
.card__image{width: 100%;height: auto;}
.card__copy{padding:5px 20px;}
.card__copy h3{margin-bottom:0 }



/*********************
BANNER
*********************/
.banner{background: white;height:50%;}
.banner__image{float:left;width:30%;height:100%;
  background-image: url("https://source.unsplash.com/400x260?business");
  background-size: cover; /*compatibilita cover per browser*/
  -o-background-size:cover;
  -moz-background-size:cover;
  /*centro l immagine sia orizzontalmente che verticalmente*/
  background-position: center center; 
}
.banner__copy{float:left;width:70%;height:100%;}
.banner__copy__text{vertical-align: middle;display: table-cell;padding:30px}
.banner__copy__text h3{font-size: 36px;margin-bottom: 0;}
.banner__copy__text h4{font-size: 28px;margin-top: 5px;}

/*********************
FOOTER
*********************/
.footer{background:white;padding:30px;margin-top:40px;}

/*********************
GREEN PAGE
*********************/

.green{}
.green__copy{background: white;max-width: 800px;margin:0px auto;margin-top:-60px;padding:20px 40px;position: relative;z-index: 1;}
.green__copy__meta{font-weight: bold;font-size: 18px;font-style: italic;}
.green__copy__title{font-size: 40px;}
/*********************
TABLET
*********************/

@media(max-width:998px){

}

/*********************
SMARTPHONE
*********************/

@media(max-width:767px){

.header__icon-bar{display: block;}
.header__menu__item{display: block;}
.header__menu{width: 100%;height:0px;overflow: hidden;}   /*height:0px;overflow: hidden;}*/
.is-open{height: 300px;overflow: auto;}

/*cover su mobile*/
.cover{height:100%;}

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

/*banner*/
.banner{height: 100%;}

.banner__image,.banner__copy{height:50%;width: 100%;}

.header{position: fixed;z-index:100;width: 100%;}
}

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