body {
	/* font-family: 'Varela Round', sans-serif; */
	font-family: 'Verdana', sans-serif;
}

h1{
	font-size: 1.1em;
}
h2, h3, h4, h5 {
	color: #245698;
}

a {
	text-decoration: none;
}

table{
	border: 1px solid black;
	border-collapse: collapse;
}
th{
	background: #245698; 
	color: white; 
}
td{
	border: 1px solid grey;
}

.collapsingsection{
	border: 1px dotted #245698; 
	background-color: #f6f5f8; 
	margin: 20px; 
	margin-top: 0px; 
	padding: 20px; 
	border-radius: 10px; 
	display: none;
}

.link {
	color: #245698;
	font-weight: bold;
	text-decoration: none;
}

.link:hover {
	color: red;
	text-decoration: none;
}

.banner {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: white;	
	border-bottom: dotted 2px;
}

.badge {
	color: black;
	padding: 0.3em; 
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 1em;
	font-size: 0.6em;
	display: inline;
	white-space: nowrap;
	opacity: 0.4;
}
.bg-red {
	border: 1px solid rgba(236, 16, 21, 0.38);
	background-color: rgba(255, 51, 51, 0.34);
}
.bg-blue {
	border: 1px solid rgba(26, 47, 251, 0.4);
	background-color: rgba(0, 0, 255, 0.33);
}
.bg-green {
	border: 1px solid rgba(101, 167, 61, 0.56);
	background-color: rgba(0, 128, 0, 0.31);
}
.bg-orange {
	border: 1px solid rgba(255, 163, 5, 0.56);
	background-color: rgba(255, 165, 0, 0.51);
}	
.bg-yellow {
	color: black;
	border: 1px solid rgb(246, 232, 10);
	background-color: rgba(255, 255, 0, 0.53);
}
.bg-grey {
	border: 1px solid rgba(0, 0, 0, 0.28);
	background-color: rgba(128, 128, 128, 0.59);
}

.full-width{
	width: 100%;
	max-width: 100%;
}
.half-width{
	width: 50%;
	max-width: 50%;
	display: block;
	margin: 0 auto;
}

.container {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	/* fraction*/
}

.external-link{
	padding-left: 1em;
}
.related-article{
	background-color: #f6f5f8; 
	border: 1px solid #ddd; 
	padding: 10px; 
	border-radius: 5px;
	vertical-align: top;
}
.related-article:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: box-shadow 0.5s, color 0.5s;
}

.sidebar {
	margin-top: 1.2em;
	padding: 10px;
	background-color: #f6f5f8;
}

.pagetitle {
	color: #245698;
	font-weight: bold;
	font-size: 1.1em;
}

.vomtitle{
	font-size: 1.3em;
}

.title {
	color: #245698;
	text-transform: uppercase;
	font-weight: bold;
}

.sectiontitle {
	margin-block-end: 0.1em;
	color: black;
}

.colorblue {
	color: #245698;
}

.left-border-blue {
	border-left: solid 2px #0000ff;
}

.left-border-red {
	border-left: solid 2px red;
}

.left-border-orange {
	border-left: solid 2px #ffa500;
}

.left-border-yellow {
	border-left: solid 2px #ffff00;
}

.left-border-purple {
	border-left: solid 2px #800080;
}

.left-border-green {
	border-left: solid 2px green;
}

.red{
	color: red;
}

.green{
	color: green;
}

.orange{
	color: orange;
}

.menu {
	cursor: pointer;
	color: #245698;
	width: 130px;
	text-align: right;
	line-height: 35px;
}
.menu:hover div  {
	visibility: visible;
	opacity: 1;
}
.submenu{
	width:110px;  
	border:1px solid #b6b6b6; 
	background-color: #f6f5f8;
	/* border-radius: 0 0 0 300px; */
	line-height: 1.7;
	padding: 10px;
	text-align: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
  	position: absolute;
  	visibility: hidden;
  	opacity: 0;
  	transition: visibility 0s, opacity 0.1s linear;
}		

.datetitle {
	margin-top: 20px;
	display: block;
}		

.bottom-border {
	border-bottom: solid 3px #245698;
}

.center {
	text-align: center;
}

.bold{
    font-weight: bold;
}

.float-right {
	float: right;
}

.twitter-share-button[style] { vertical-align: text-bottom !important; }

.bs-callout {
	padding: 10px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px;
	color: black;
	background-color: #f6f5f8;
	transition:  box-shadow 0.5s;
}

.bs-callout:hover {
	background-color: #edf0f9;
	box-shadow: 5px 5px 30px rgba(33,33,33,0.21);
}

.bs-callout-info {
	border-left: solid 3px #245698;
}

.photo-frame {
	float: right;
	border-radius: 8px;
	border: 1px solid #ddd;
	margin-left: 20px;
	margin-bottom: 20px;
	box-shadow: 3px 3px 9px #f2f2f2;
	max-width: 100%;
}

.quote{
	background-color: #f6f5f8; 
	width: 300px; 
	max-width: 300px; 
	padding: 20px; 
	margin: 10px;
	border-radius: 1em;
}
.quote-start{
	color: #245698;
}
.quote-end{
	color: #245698;
	float: right;
}

.footer {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	border-top: dotted 2px;
	background-color: #f6f5f8;
	/*text-align: center;*/
}

.column-one-third{
	max-width: 33%; 
	width: 33%; 
	display: inline-block; 
	vertical-align: top;
}
.note{
	padding: 1.5em; 
	font-size: 1.2em; 
	font-family:monospace;
}


/* tab links */
.tablink {
  background-color: #555;
  color: white;
  /*float: left;*/
  border: 1px solid grey;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
  outline: none;
  cursor: pointer;
  padding: 5px;
	margin: 0;
  font-size: 1.1em;
	font-weight: bold;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}
.tabcontent{
	border-top: 1px #adadad solid;
}
.selectedtab{
	background-image: linear-gradient(grey, white);
	color: black;
}
.unselectedtab{
	background-color: white;
	color: black;
	opacity: 0.3;
}

.fb-like{
	position: relative;
	top: 8px;
}


/* iphone and ipad */
@media (max-device-width : 1024px) {
	.quote{
		margin: 0 auto;
        width: 90%; 
	    max-width: 90%; 
	}
	.menu{
		line-height: 25px;
	}
	.column-one-third{
		max-width: 100%; 
		width: 100%; 
	}	
	.hide-on-phone{
		display: none;
	}    

	.twitter-follow-button[style] { vertical-align: text-bottom !important; }
}

/* Desktop */
@media (min-device-width : 1024px) {
	.vomtitle {
		font-size: 1.4em;
	}

	.related-article{
		display: inline-block; 
		width: 45%; 
		max-width: 45%; 
	}
	.threeinrow{
		width: 30%; 
		max-width: 30%; 
	}    

	.quote{
		float: right;
		margin-top: 0px;
	}

	.container{
		display: grid;
		grid-template-columns: 9fr 3fr;
	}

	.sidebar {
		margin-left: 10px;
	}

	.pagetitle {
		font-size: 1.5em;
	}	

	.datetitle {
		float: right;
		margin-top: 0px;
	}
	
	.hide-on-desktop{
		display: none;
	}
}