@charset "utf-8";

*{box-sizing:border-box;}

h1, h2, h3, h4 {font-family: "Montserrat", sans-serif;}

p { font-family: "Open Sans", sans-serif;}

/*navigation*/

nav ul{list-style-type:none;}

nav li{display:inline-block;margin:0 10px 0 10px;background-color:#aaa;padding:15px;}

#main-content {width:100%;}

/*kachow*/
#test-image{height:auto;width:150px;}
#test-float{width:550;height:400px;}

/*floats*/
.fl{float:left;}
.fr{float:right;}

/*margins*/
#margin-test{margin:1%;padding:30px 100px;border:1px solid blue;}

#div-one{}
#div-two{}

.full-width-col{float:left;width: 98%;padding: 2%;margin:1%;border:1px solid red;}

.half-width-col {float:left;width: 48%;padding: 2%;margin:1%;border:1px solid red;}

.thirds-width-col {float:left;width: 31.33%;padding: 2%;margin:1%;border:1px solid red;}

.quarter-width-col{float:left;width: 23%;padding: 2%;margin:1%;border:1px solid red;}

section{float:left;width:100%;}


#a{}
#b{}
#c{}


/*---------------------| BREAKPOINTS |---------------------*/

/*x-large*/
@media only screen and (max-width:1200px) {}

/*large*/
@media only screen and (max-width:1080px) {
    .quarter-width-col{width: 48%;}
}

/*x-small*/
@media only screen and (max-width:576px) {
    .half-width-col{width: 98%;} 
    .thirds-width-col{width: 98%;}
    .quarter-width-col{width: 98%;}
}