/* My take on responsive design */
/* Using 12 columns to give max factoring */

* {
	box-sizing:border-box;
}

.dropbtn {
	background-color:#fdfdfd;
	color:#a6a5a6;
	font-size:19px;
	/*padding:16px;*/
	padding-right:48px;
	border:none;
}
.dropdown {
	position: relative;
	display: inline-block;
	overflow-y: visible;
}
.dropdown-content {
	display:none;
	overflow-y:visible
	position:absolute;
	/* right: 0; */
	color: #a6a5a6;
	font-size: 18px;
	/*background-color:grey; */

}

.dropdown-content a {
	color: black;
	padding 12px 16px;
	text-decoration: none;
	display:block;
}

.dropdown-content a:hover {
	color:orange;
	font-weight:bold;
}

 .dropdown:hover .dropdown-content {
	display:block;
}

.dropdown:hover .dropbtn {
	/*background-color:red;*/
}

/* set up column widths */
/* For Phone */
[class*="col_"] {
	width: 100%;
}
/*set up different row of graphics */

.rowof4 {
	display:none;
}
.rowof2 {
	display:none;
}
.rowof1 {
	display:block;
}




#navtab {
	display:none;
}
.dropdown 
{
	display:inline;
}

@media only screen and (min-width: 680px)
{
  /* For Tablet */
  
  .col_m_1 {width: 8.33%;}
  .col_m_2 {width: 16.66%;}
  .col_m_3 {width: 25%;}
  .col_m_4 {width: 33.33%;}
  .col_m_5 {width: 41.66%;}
  .col_m_6 {width: 50%; color:red;}
  .col_m_7 {width: 58.33%;}
  .col_m_8 {width: 66.66%;}
  .col_m_9 {width: 75%;}
  .col_m_10 {width: 83.33%;}
  .col_m_11 {width: 91.66%;}
  .col_m_12 {width: 100%;}
  
 	#navtab {
  	display: inline;
  }
  .dropdown { 
  display: none;
	}
	
	/*set up different row of graphics */

.rowof4 {
	display:none;
}
.rowof2 {
	display:inline;
}
.rowof1 {
	display:none;
}

}
@media only screen and (min-width: 1024px)
{
  /* For Desktop */
  .col_1 {width: 8.33%;}
  .col_2 {width: 16.66%;}
  .col_3 {width: 25%; color: black;}
  .col_4 {width: 33.33%;}
  .col_5 {width: 41.66%;}
  .col_6 {width: 50%;}
  .col_7 {width: 58.33%;}
  .col_8 {width: 66.66%;}
  .col_9 {width: 75%;}
  .col_10 {width: 83.33%;}
  .col_11 {width: 91.66%;}
  .col_12 {width: 100%;}
  
 	#navtab {
  	display:inline;;
  }
  .dropdown { 
  display: none;
	}
	
	/*set up different row of graphics */

.rowof4 {
	display:block;
}
.rowof2 {
	display:none;
}
.rowof1 {
	display:none;
}

}
  
  
/* all column classes should float to left */
[class *="col_"]{
	float: left;
	padding:15px;
}
.row::after {
	content: "";
	clear: both;
	display: block;
}