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:#16dd94}
a:hover{color:#1af3a4;}
.p_breadcrumbs a{
	color: #000;
	display: inline-block;
	padding: 10px;
	font-size: small;
	font-family: Verdana, Geneva, sans-serif;
}
.p_breadcrumbs a:hover{background:#fff;}
.p_breadcrumbs span {font-size:small;}
/*------------------------
Header
------------------------*/
.header{background: #333}
.header__logo{color:#fff;float:left;display: block;padding: 20px;}
.header__menu{float:right;margin: 0;padding: 0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color: #fff;display: block;padding: 20px;}
.header__menu__item a:hover{background: #000}
.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;}

/*------------------------
Cover
------------------------*/
.cover{
	height: 70%;
    background-image: url(images/big_9.jpg)
/*
background-image: url("https://source.unsplash.com/collections/145103/computers-phones-and-tech");
*/
    background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-position: center center;
	position: relative;
	background-image: url(images/bg_9.jpg);
}

.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: 30px auto;}
.card{width: 30%;margin: 0 1.5%; background: #fff;float:left;}
.card__image{width: 100%; height: auto;}
.card__copy{padding:5px 20px;}
.card__copy h3{margin-bottom:0;}

/*------------------------
Cards COSA FACCIAMO
------------------------*/
.cards__cf {
    max-width: 1200px;
    margin: 40px auto;
}

.card__cf {
    width: 22%;
    margin: 0 1.5%;
    background: #fff;
    float: left;
}

.card__image__cf {
    width: 100%;
    height: auto;
}

.card__copy__cf {
    padding: 5px 20px;
}

    .card__copy__cf h3 {
        margin-bottom: 0;
    }
/*------------------------
Banner
------------------------*/
.banner{background: #fff;height: 50%;}
.banner__image {
    width: 25%;
    float: left;
    height: 100%;
    background-image: url("https://unsplash.com/photos/J6Atq83sBho");
    background-size: cover;
    background-position: center center;
}
.banner__copy{width: 60%; float: left;height: 100%;display: table;}
.banner__copy__text{display: table-cell;vertical-align: middle;padding: 30px;}
.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;text-align:center;margin-top: 40px;}

/*------------------------
Single
.single{border:1px solid red;}
------------------------*/
.single__copy{max-width:800px;margin:0px auto;margin-top: 120px;background: #fff;padding: 20px 40px;position: relative;z-index:1;}
.single__copy__meta{font-weight: bold;font-size: 16px;font-style: italic;}
.single__copy__title{font-size: 32px}


/*------------------------
Tablet
------------------------*/
@media(max-width:786px){

.banner{height:50%;}
}

/*------------------------
Smartphone
------------------------*/
@media(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: 300px;overflow: auto;}

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

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

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

.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;
}
/************************/
/*        HOME         */
.boxHome {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0 15px 15px;
}

    .boxHome label {
        width: 100%;
        text-align: left;
        margin-bottom: 0;
    }

        .boxHome label > span {
            font-weight: 600;
            display: block;
            color: #308cc3;
        }

.boxHomeT {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.boxHomeN {
    line-height: 34px;
    font-weight: 600;
    font-size: 34px;
    color: #308cc3;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
    margin-right: 15px;
    min-width: 5px;
}

.boxHomeA:hover {
    background-color: #f7f7f7;
    display: block;
    border-radius: 20px;
}
.tabs-pad {
    /* padding in modalità con HELP */
    margin-top:130px;
    padding: 30px 10px;
}
/* Stili della finestra modale */
.modal-header h2 {
    color: #555;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    margin: 0;
}
/* bottone della chiusura  */
.modal .btn-close {
    color: #aaa;
    cursor: pointer;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
}

    .modal .btn-close:hover {
        color: red;
    }
/* sfondo oscurante */
.modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
}

.modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
}
/* ativazione dello sfondo oscurante e della finestra modale */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
    display: block;
}

.modal-open:checked ~ .modal-wrap .modal-dialog {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* elementi della finestra */
.modal-dialog {
    background: #fefefe;
    border: none;
    border-radius: 5px;
    position: fixed;
    width: 80%;
    max-width: 500px;
    left: 50%;
    top: -100%;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    z-index: 103;
}

.modal-body {
    padding: 20px;
}

    .modal-body p {
        margin: 0;
    }

.modal-header,
.modal-footer {
    padding: 20px 20px;
}

.modal-header {
    border-bottom: #eaeaea solid 1px;
}

    .modal-header h2 {
        font-size: 20px;
        margin: 0;
    }

.modal-footer {
    border-top: #eaeaea solid 1px;
    text-align: right;
}
/* immagini adattive nella finestra  */
.modal-body img {
    max-width: 100%;
    height: auto;
}
/* bottoni*/
.btn {
    background: #fff;
    border: #555 solid 1px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
}

.btn:hover, .btn:focus {
        background: #f2f2f2;
    }

.btn-primary {
    background: #428bca;
    border-color: #357ebd;
    color: #fff;
}

.btn-primary:hover {
        background: #66A1D3;
    }