body {
    color: #000;
    font: 16px/1.6 "ff-netto-web",sans-serif;
    font-weight: 300;

}

.wrapper {   
	margin: 0 auto;
    max-width: 1020px;
    padding-top: 10%;

}

.logo, .diagonal {
width: 100%;
height: auto;

}

.logo div {
width: 320px;
height: auto;
float:right;
}

img {
width: 100%;
height: auto;
}

.info {
clear: both;
margin-top: 10%;
margin-left:10%;
}

.info-imp {
clear: both;
margin-top: 20%;
}

.info-li {
width: 33%;
float: left;
}


.info-mi {
width: 25%;
float: left;
}


.info-re {
width: 35%;
float: right;
}


.diagonal {
clear: both;
margin-top:25%;
float: left;
}

.diagonal div {
width: 58px;
height: auto;

}

a {
color: #000;
text-decoration: none;
}

a:hover {
color: #999;
}

.imp {
clear: both;
padding: 4% 0 0 10%;
}


  
  
/* ===========================================
 * MOBIL
 * ======================================== */     
 
@media only screen and (max-width: 1024px)  {

.wrapper {   
    width: 93%;
    padding: 10% 5% 1% 2%;
}

.info-li, .info-mi {
width: 30%;
}

.info-re {
width: 37%;
float: right;
}

.info {
margin-left:8%;
}

.imp {
padding: 4% 0 0 8%;
}
}

@media only screen and (max-width: 768px)  {

.wrapper {   
    width: 93%;
    padding: 10% 5% 1% 2%;
}

.info-li, .info-mi, .info-re {
width: 100%;
float: none;
margin-top: 4%;

}



.info {
margin-left:12%;
}

.imp {
padding: 4% 0 0 12%;
}
}

@media only screen and (max-width: 480px)  {

.wrapper {   
    width: 95%;
    padding: 10% 5% 1% 3%;
}

}

@media only screen and (max-width: 400px)  {

.logo div {
width: 320px;
height: auto;
float:left;
} 

.diagonal {
display: none;
}

.info {
margin-top: 40%;
margin-left:0;
}

}



@media only screen and (max-width: 320px)  {

.logo div {
width: 280px;
}

.wrapper {   
    width: 95%;
    padding: 20% 0 1% 5%;
}

.imp {
padding: 4% 0 0 0;
}

}