body{
    overflow: hidden;
    font-family: 'Harabara', sans-serif;
    background:#fff
}


.container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url(img/auto-epoca.jpg);
    background-size: cover;
    background-position: center center;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=1 ); /* IE6-9 */
}

.header {
    width: 100%;
    height: 25%;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url(img/base-oro.jpg);
    background-size: cover;
    background-position: center center;
    clip-path: polygon(100% 0, 0 0, 100% 100%);


}


.text-right {
    text-align: right;
    padding-right: 5%;
    margin-top: 1%;
}

.logo img{
    position: absolute;
    left: 5%;
    top: 12%;
    height: auto;
    width: 20%;
}


.banner img{
    position: absolute;
    right: 0;
    bottom: 17%;
    height: auto;
    width: 50%;
    cursor: pointer;

}

.footer {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image:url(img/base-rossa.jpg);
    background-size: cover;
    background-position: center center;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.text-left{
    bottom: 0;
    position: absolute;
    left: 5%;

}

h1 {
   font-size: 3.5vw;
   color: white;
   letter-spacing: 7px;
}

h2 {
    font-size: 2.2vw;
    color: white;
}

a {
    color: white;
    cursor:pointer;
}

@media (max-width: 768px) {
    .container {height: 80%;} 
    h1 {font-size: 3.5vw;color: white;letter-spacing:0;}
    .footer {-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);}
    .header {-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);}
}

@media (max-width: 544px) {
    .container {height: 40%; overflow:hidden;}
    h1 {font-size: 3.5vw;color: white;letter-spacing:0;}
    .footer {-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);}
    .header {-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);}
    
}