@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {margin:0;}
.cc {color:#444; font-size:9px;}
.topnav {
  overflow: hidden;
  background-color:transparent;
}

.topnav a {
  float: left;
  display: block;
  color: #444;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border: 2px inset transparent;
}

.topnav a:hover {
	text-align: center;
	border-bottom: 2px inset black;
	color: #444;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

/*2-GRID SYSTEM */
/*  SECTIONS  */
.sections {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.co {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.co:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.spans_2_of_2 {
	width: 100%;
}
.spans_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.co { margin: 1% 0 1% 0%;}
}

@media only screen and (max-width: 480px) {
	.spans_2_of_2, .spans_1_of_2 { width: 100%; }
}