@charset "utf-8";
/* CSS Document */

/* --------- FONTS --------- */

@font-face{
    font-family : "Metric-Regular";
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Regular.eot');    
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Regular.woff') format('woff'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Regular.svg#abcd') format('svg'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Regular.ttf') format('truetype');
}

@font-face{
    font-family : "Metric-Light";
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Light.eot');    
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Light.woff') format('woff'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Light.svg#abcd') format('svg'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Light.ttf') format('truetype');
}

@font-face{
    font-family : "Metric-Semibold";
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Semibold.eot');    
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Semibold.woff') format('woff'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Semibold.svg#abcd') format('svg'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Semibold.ttf') format('truetype');
}

@font-face{
    font-family : "Metric-Thin";
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Thin.eot');    
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Thin.woff') format('woff'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Thin.svg#abcd') format('svg'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Thin.ttf') format('truetype');
}


@font-face{
    font-family : "Metric-Medium";
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Medium.eot');    
    src : url('https://expandiweb.com/it/HPE/fonts/Metric-Medium.woff') format('woff'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Medium.svg#abcd') format('svg'),
          url('https://expandiweb.com/it/HPE/fonts/Metric-Medium.ttf') format('truetype');
}





body {
    margin: 0;
    font-family: 'Metric-Light', sans-serif;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 20px;
    color: #000000 !important;
}
.bg-header {
    background-image: url("images/header.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: right center;
    background-repeat: no-repeat
}
.header1 {
    background-image: url("images/header1.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: left center;
    background-repeat: no-repeat
}
.header2 {
    background-image: url("images/header2.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: right center;
    background-repeat: no-repeat
}

.min-100 {
    min-height: 100px;
}

.min-200 {
    min-height: 200px;
}

.min-300 {
    min-height: 300px;
}

.min-500 {
    min-height: 500px;
}

.min-600 {
    min-height: 600px;
}

.min-700 {
    min-height: 700px;
}

.min-800 {
    min-height: 800px;
}

.min-900 {
    min-height: 900px;
}




.bg-black {
    background-color: black;
    color: #fff !important;
}


.bg-blue {
    background-color: #0D5265;
}

.bg_hpe_01 {
    background-image: url("images/hpe_01.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: center;
	color: #fff !important;
    background-repeat: no-repeat;
}

.bg_hpe_02 {
    background-image: url("images/hpe_02.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: center;
	color: #fff !important;
    background-repeat: no-repeat;
}

.bg_hpe_03 {
    background-image: url("images/hpe_03.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: center top;
	color: #fff !important;
    background-repeat: no-repeat;
}

.bg_hpe_04 {
    background-image: url("images/hpe_04.jpg");
    padding: 0px;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;
    background-position: center;
	color: #fff !important;
    background-repeat: no-repeat;
}



.footer {
    background-color: #435563;
    color: #fff !important;
	border-top: 2px solid white;
}

.button {
    padding: 15px 20px;
    background-color: #01a982;
    border-color: #01a982;
    color: black;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
    transition: all 0.5s;
    cursor: pointer;
	margin: 50px 0px;
}

.button_rev {
    padding: 15px 20px;
    background-color: white;
    border-color: white;
    color: black;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
    transition: all 0.5s;
    cursor: pointer;
	margin: 50px 0px;
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.button:hover span {
    padding-right: 25px;
    color: #000000 !important;
}
.button:hover span:after {
    opacity: 1;
    right: 0;
}

.footer {
    font-size: 0.7em
}
.bianco {
    color: #ffffff !important
}
.nero {
    color: #000000 !important
}
.verde {
    color: #01a982 !important
}




h1 {
    font-family: 'Metric-Light', sans-serif;
    font-size: 2.75rem;
    line-height: 2.813rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #000000 !important;
}
h2 {
    font-family: 'Metric-Light', sans-serif;
    font-size: 2.1rem;
    line-height: 1.9rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: #000000 !important;
}
h3 {
     font-family: 'Metric-Light', sans-serif;
    font-size: 1.75rem;
    line-height: 1.813rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #000000 !important;
}
h4 {
    font-family: 'Metric-Light', sans-serif;
    font-size: 1.75rem;
    line-height: 1.813rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: #000000 !important;
}
h5 {
    font-family: 'Metric-Light', sans-serif;
    font-size: 1.5rem;
    line-height: 1.3rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: #000000 !important;
}
a {
    color: #000000;
    text-decoration: none
}
strong {
    font-weight: 600; font-size: 15px;
}

@media screen and (max-width: 980px) {
    body {
        margin: 0;
        font-size: 1.5em;
        font-family: 'Metric-Light', Arial, sans-serif;
        color: #000;
        text-align: left;
    }
    .bg-header {
        background-image: url("images/header.jpg");
        padding: 0px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        min-height: 600px;
        background-position: left bottom;
        background-repeat: no-repeat
    }
    .header1 {
        background-image: url("images/header1.jpg");
        padding: 0px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        min-height: 500px;
        background-position: right bottom;
        background-repeat: no-repeat
    }
    .header2 {
        background-image: url("images/header2.jpg");
        padding: 0px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        min-height: 500px;
        background-position: left bottom;
        background-repeat: no-repeat
    }
}