/* for 980px or less */
@media screen and (max-width: 980px) {

.content{padding:10px;}

.container{	width:98%;}

/* Columns */
[class*='col-'] {  margin:5px;}

.col-1-1{ width: 98.5%; }

.col-1-2{ width: 48.5%; }

.col-1-3{ width: 25%; }

.col-2-3{  width: 72%; }

.col-1-4{ width: 23.6%;  }

.equal3{width:31.9%}

.navigation{width:100%; margin:0px;}

}











/* for 700px or less */
@media screen and (max-width: 750px) {

.content{padding:5px;}

.container{	width:98%;}

/* Columns */

[class*='col-'] {  margin:5px;}

.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .equal2, .equal3, .group{ width: 97.5%; margin:5px;  }


.navigation {width:100%; margin:auto; }

}





/* for 700px or less */
@media screen and (max-width: 620px) {


}


/* for 700px or less */
@media screen and (max-width: 550px) {

}



/* for 480px or less */
@media screen and (max-width: 450px) {

.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .equal2, .equal3, .group{ width: 97%; margin:5px;  }

}



/* for 350px or less */
@media screen and (max-width: 350px) {

}



/* for 310px or less */
@media screen and (max-width: 280px) {

.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .equal2, .equal3, .group{ width: 96.5%;}

.navigation {width:100%; margin:auto; }
.navigation li a {padding:5px 5px 5px 10px;}

}