@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}

/* Font */
h1, h2,h3, h4, h5 {font-family: 'Roboto', sans-serif;}
p, nav{font-family: "Open Sans", sans-serif;}

#main-content {width: 100%;}

#divone {width: 50%;}
#divtwo {width: 50%;}


.borderone {border : 10px solid blue;}
.bordertwo {border : 2px solid green;}

/*/ floats */
#test-floats {width: 150px; height: 400px;}
.fl{float: left;}
.fr{float: right;}

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

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

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

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

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

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

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

/*/ nav bar */

nav ul {list-style: none;}
nav li {display: inline-block; margin: 0 10px 0 10px; background-color: #879f7d; padding: 15px;}

/*/---------------------------- breakpoint --------------------------*/
/*/ tablets */
@media only screen and (max-width: 1200px) {
    /* css code goes here */
}

/*/ smaller tablets */
@media only screen and (max-width: 1080px) {
    /* css code goes here */
}

/*/ mobiles */
@media only screen and (max-width: 576px) {
    /* css code goes here */
    .half-width-col{width: 98%;}
    .third-width-col{width: 98%;}
    .fourth-width-col{width: 98%;}
}