/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {

.row {
  flex-direction: column;
	min-width: 100%;
  }

.leftside, .centrecol, .rightside {
	min-width: 100%;
	border: none;
}

.lefthand, .righthand {
	float: none;
	min-width: 100%;
	margin: 0px auto;
}

.maintext, .maintext1, .maintext2, .maintext3, .maintext4, .maintext5, .maintext6 {
	display: block;
	text-align:justify;
	font-weight:normal;
  overflow:visible;
	padding:10px;
	border: 0px none;
	margin:0px auto;
}
}

@media screen and (max-width: 800px) {
  .topnav a, .dropdown .btn {
/*  .topnav a:not(:first-child), .dropdown .btn { */
  display: none;
  }
 .topnav a.icon {
  float: left;
  display: block;
	border-radius: 100%;
	padding:5px 10px 5px 10px;
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {
	position: relative;
	top: -10px;
	left: -18px;
	max-width: 160px;
  overflow: visible;
}

.topnav.responsive a.icon {
  position:absolute;
  left: 40px;
  top: 10px;
	width: auto;
	padding:2px 10px;
  }

  .topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
	width: 100%;
 	padding: 0px 15px 3px 8px;
 }
  .topnav.responsive .dropdown {
  float: none;
	width: 100%;
	top:0px;
	}

  .topnav.responsive .panel {
  	position: relative;
	width: 100%;
	top: 0px;
	overflow: visible;
	}
  
  .topnav.responsive .panel a {
  	position: relative;
	width: 100%;
	padding-top: 2px;
	padding-bottom: 2px;
	}
  
  .topnav.responsive .dropdown .btn {
    display: block;
    width: 100%;
    text-align: left;
	overflow: visible;
  }
.topnav.responsive .totop {
	width: 50px;
	margin: 15px 0px 0px 10px;
	padding:8px 5px 5px 5px;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}