/* 
    ENEL Campagna Competitive
    October, 2021
*/


/* TYPOGRAPHY
-------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'RoobertENEL-Regular';
    src: url('../font/RoobertENEL-Regular.eot');
    src: url('../font/RoobertENEL-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/RoobertENEL-Regular.svg#RoobertENEL-Regular') format('svg'),
        url('../font/RoobertENEL-Regular.ttf') format('truetype'),
        url('../font/RoobertENEL-Regular.woff') format('woff'),
        url('../font/RoobertENEL-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RoobertENEL-Bold';
    src: url('../font/RoobertENEL-Bold.eot');
    src: url('../font/RoobertENEL-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/RoobertENEL-Bold.svg#RoobertENEL-Bold') format('svg'),
        url('../font/RoobertENEL-Bold.ttf') format('truetype'),
        url('../font/RoobertENEL-Bold.woff') format('woff'),
        url('../font/RoobertENEL-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* GENERALI
-------------------------------------------------------------------------------------- */
html, body {height: 100%;}
body {
    font-family: 'RoobertENEL-Regular';
    color: #333;
}


/* HEADER
-------------------------------------------------------------------------------------- */
header.container {
    max-width: 100%; height: 100%;
    position: relative; margin: 0 auto; padding: 0;
    background: #fff url("../img/visual.jpg") 50% 0 no-repeat;
    background-size: cover;    
}

@media (min-width: 1920px) {
    header.container {
        max-width: 1920px;
    }
}

header.container img {
    position: absolute;
    top: 40px; left: 20px;
    max-width: 150px;
}

h1 {
    position: absolute; bottom: 0; left: 0; right: 0;
    margin: 0; padding: 60px 20px 20px;
    font-family: 'RoobertENEL-Bold';
    color: #fff; font-size: 1.9rem;
    text-align: center; text-transform: uppercase;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#bf000000',GradientType=0 ); /* IE6-9 */
}
 
@media (min-width: 768px) {
    header.container img {max-width: 200px; top: 40px; left: 40px;}
    h1 {padding-bottom: 30px; font-size: 2.3rem;}
}
 
@media (min-width: 1000px) {
    header.container img {max-width: 250px; top: 60px; left: 50px;}
    h1 {padding: 45px; font-size: 3rem;}
}


/* MAIN
-------------------------------------------------------------------------------------- */
section.container {padding: 25px 40px 15px;}
section p {font-size: 1.15rem;}
 
@media (min-width: 768px) {
    section.container {padding: 35px 55px 25px;}
    section p {font-size: 1.25rem;}
}
 
@media (min-width: 1000px) {
    section.container {padding: 50px 80px 40px;}
    section p {font-size: 1.45rem;}
}


/* BLUE CTA
-------------------------------------------------------------------------------------- */
section.call2action {
    max-width: 100%; padding: 20px 40px;
    background: #14387f; color: #fff; text-transform: uppercase; text-align: center;
    font-family: 'RoobertENEL-Bold';
}
section.call2action p {font-size: 1.5rem; line-height: normal; margin: 0; padding: 0;}
section.call2action a {color: #fff;}
 
@media (min-width: 768px) {
    section.call2action {padding: 25px;}
    section.call2action p {font-size: 2.1rem;}
}
 
@media (min-width: 1000px) {
    section.call2action {padding: 30px;}
    section.call2action p {font-size: 2.4rem;}
}
 
@media (min-width: 1920px) {
	section.call2action {
		max-width: 1920px;
	}
}


/* FOOTER
-------------------------------------------------------------------------------------- */
footer.container {padding: 30px;}

footer h2 {
    font-family: 'RoobertENEL-Bold';
    font-size: .9rem; color: #C6C6C6; line-height: normal;
}

footer p {line-height: normal; color: #999; font-size: .9rem;}
footer strong {color: #3C3C3B;}
footer a, footer a:hover {color: #3C3C3B; font-weight: bolder;}

footer.container img {margin: 10px; max-width: 36px;}
footer.container .col img {max-width: 150px;}

@media (min-width: 768px) {
    footer.container {padding: 55px;}
    footer h2 {font-size: 1.7rem;}
    footer.container .col img {max-width: 200px;}
    footer p {line-height: normal; color: #999; font-size: 1rem;}
}
 
@media (min-width: 1000px) {
    footer h2 {font-size: 2rem;}
    footer.container .col img {max-width: 250px;}
}