* {margin:0;padding:0; box-sizing: border-box;}

 /* For mobile phones: max-width: 420px */
[class*="col-"], .colm-4 {
    width: 100%;
	margin:0 auto;
	padding:25px 0;
    	float: left;
}
.colm-4 {padding:0;}

img {
    	max-width: 260px;
    	height: auto;
	margin:10px 0 0 0;	
}

.space {margin-bottom:25px;} /* for the long organs picture in phone view */

#banner {max-width:260px;margin:10px auto;}

img.pic0 {margin:10px 0 0 0;}
img.pic00 {margin:0;}

body { 
	font-family: 'Lato', sans-serif;
	text-align: center; 
} 

/* set the basic page links formatting */
a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #A8AAAC;
}

a:hover {
	text-decoration: none;
	font-weight: normal;
}


/*  navigation  */

ul.nav {
  float: right;
  max-width:500px;
  list-style-type: none;
  margin: -20px auto 10px auto;
  padding: 0;
  overflow: hidden;
  font-size:100%;
  color:#A8AAAC;
}

.dropdown {visibility:hidden;}

li {float: right;}

li a, .dropbtn {
  display: inline-block;
  color:#A8AAAC;
  text-align: center;
  padding: 0.5em;
  text-decoration: none;
position:relative;
}

.dropbtn {padding:0}

div.burg {
  width: 30px;
  height: 4px;
  background-color: #424244;
  margin: 5px 0;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 205px;
  left: 12%;
  background-color: #DC5237;
opacity: 0.9;
  width: 76%;
  z-index: 1;
}

.dropdown-content a {
margin:28px 0;
  text-decoration: none;
  display: block;
  text-align: center;
color: white;
font-weight: 700;
font-size:120%;
}

.dropdown-content a:hover {background-color: #FDD2B2;}

li a:hover {background-color: #f1f1f1;}

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

a.current  {color:#424244;} 

a.dropbtn:hover, a.dropbtn:active {background-color:#fff;}

.show {
  display: block;
}


/* set the page main area */
#container { 
	margin-left: auto; 
	margin-right: auto; 
	max-width: 1170px; 
	text-align: left; 
	color:#424244;
	line-height: 150%;
	font-size: 100%;
	font-weight: 400;
	letter-spacing: normal;
	padding:0 30px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.top {border-bottom: #424244 solid 1px;}


ul.rog {list-style-type: none;font-size:100%;float: none;}
ul.rog li {margin:0.5em 0;float: none;}

hr.grey {
	height: 2px;
	border: none;
	color:#424244;
	background-color:#424244; 
	margin:1em auto;}

hr.pink {
	height: 3px;
	border: none;
	color: #FDD2B2;
	background-color: #FDD2B2; 
	margin:1em auto;}

p {padding:0.5em 0;}
p:first-child {padding-top:0;}

.red {color:#DC5237;}
.strong {font-weight: 700;}
.c {text-align:center;}
h2 {font-weight:700;margin:0 0 .5em 0;}
h2.a {font-weight:700;margin:1em 0 0.5em 0;}
h3 {font-weight:700;}
p.emdash:after {content: ' \2014' ' \2014';}
p.emdash {font-weight:bold;padding:0;}

#footer {text-align: center;border-top:#424244 solid 1px;padding:1em 0;font-size: 82%;color:#A8AAAC;}
#footer span {white-space: nowrap; color:#424244; padding:10px;}


#copy {
	text-align: center;
	font-size: 75%;
	padding: 30px 5px 0 5px;
}

#copy:after {content:"\00A9  All Content Copyright Roger Allen 2019-2023";}


@media only screen and (max-width: 420px) {
ul.nav {max-width:30px; float:none;  margin: 10px auto;}
.dropdown, .dropdown-content {visibility:visible;}
	.dropdown a {padding:0;}
	.lose {display:none;}
	li {margin: 0 auto;}
	.wide {display:none;}
	#page * {text-align:center;}
}

@media only screen and (min-width: 421px) and (max-width: 600px) {
	.colm-4 {width: 100%;}
	.wide {display:none;}
}


@media only screen and (min-width: 601px) and (max-width: 767px) {
    	.col-1, .col-1a {width: 32.88288%;}
   	.col-2, .col-2a {width: 67.11712%;}
    	.col-3 {width: 100%;}
    	.colm-4 {width: 100%;padding:0;}
	.phone {display:none;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    	.col-1, .col-1a {width: 32.88288%;}
    	.col-2, .col-2a {width: 67.11712%;}
    	.col-3 {width: 100%;}
    	.colm-4 {width: 50%;}
    	.colm-4:first-child {padding-left:0;}
    	.colm-4:last-child {padding-right:0;}
.colm-4 {padding:0 15px;}

	.phone {display:none;}
ul.nav {margin: -58px auto 10px auto;}
}

@media only screen and (min-width: 601px) {
[class*="col-"] {
	padding:25px 15px; 0 15px;
}
}

@media only screen and (min-width: 421px) {
#banner {max-width:350px;margin:10px 0;}
img {
    	max-width: 100%;
    	height: auto;
	box-sizing: content-box;
	margin:10px 0;	
}
[class*="col-"]:first-child {padding-left:0;}
[class*="col-"]:last-child {padding-right:0;}
    	.col-2a {padding-right:0;}
.badge {margin: 10px 0 0 -6px;}
}


.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625)*/
  padding-top: 79.72%;
  position: relative;
  filter:grayscale(100%);
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}


/*    body {background-color: #c0c0c0;} */