@charset "utf-8";
*{box-sizing: border-box;}
body{background-color: black;}

.divone{border:5px solid rgb(245, 155, 255); color: white;}

.fr{float: right; height: 480px; width: 400px; padding-right: 150px;}

.fl{float: left; height: 480px; width: 400px; padding-left: 150px;}

.fm{float: middle; height: 360px; width: 300px;}

.nav{list-style: none; border:5px solid rgb(245, 155, 255); color: white; background-color:green;}

.li{display:inline-block; margin: 0 10px 0 10px; background-color:chartreuse; padding: 15px; border: 2px solid rgb(1, 50, 32);}

.margin{border:5px solid rgb(245, 155, 255); margin: 5% 3% 5% 3%; color: white; padding: 3% 1% 3% 1%;}

h1, h2, h3{font-family: "Open Sans", sans-serif;}

.divuno{}
.divdos{}

.hwc{float:left; width: 48%; margin: 1%; padding: 2%; border:3px solid rgb(199, 255, 202);}
.thirds{float:left; width: 31.33%; margin: 1%; padding: 2%; border:3px solid rgb(0, 255, 64);}
.fourths{float:left; width: 23%; margin: 1%; padding: 2%; border:3px solid rgb(0, 129, 32);}

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


}

@media only screen and (max-width: 1080px) {
    .fourths{float:left; width: 48%; margin: 1%; padding: 2%; border:3px solid rgb(0, 129, 32);}

}

@media only screen and (max-width: 576px) {
    .hwc{float:left; width: 98%; margin: 1%; padding: 2%; border:3px solid rgb(199, 255, 202);}
    .thirds{float:left; width: 98%; margin: 1%; padding: 2%; border:3px solid rgb(0, 255, 64);}
    .fourths{float:left; width: 98%; margin: 1%; padding: 2%; border:3px solid rgb(0, 129, 32);}

}