/* Copyright (C) 2017 InitialSite */

* {
    box-sizing: border-box;
}
/* box-sizing causes Google Custom Search button to shrink. CSS below is to overcome this
The !important is to override any other CSS that may be impacting the format. In this case probably Google's */
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}
/* end of fix */

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .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%;}
    .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%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .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%;}
}

img {
    max-width: 100%;
    height: auto;
}

html {
	font-size: 100%;
}

body {
	font-family: verdana, arial, helvetica, sans-serif;
	background-color: #408080;
	margin: 0;
	border: 0;
	padding: 5px;
}

.header {
    background-color: White;
    padding: 15px;
	font-size: 100%;
}
.header h1 {
	color: #ccc;
}

.menu {
    background-color:#666;
	font-size: 85%;
}
.menu h2 {

}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    font-weight: bold;
    margin-bottom: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li a {
	text-decoration: none;
	color:  #ccc;
	background-color:#666;
	display: block;
	padding: 5px;
}
.menu a:hover {
	color: black;
	background-color: #f1f1f1;
}
/*
.menu li a.active {
    background-color: DarkRed;
    color: Turquoise;
}

.menu li a:hover:not(.active) {
    background-color: DarkRed;
    color: Turquoise;
}
*/
/*---------------------------------------
Dropdown menu */

.dropbtn {
    display: inline-block;
    color: white;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #f1f1f1;
}

.dropdown {
    display: inline-block;
	width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
	overflow: auto; /*enable scroll on small screens */
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: left;
}

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

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

.main {
	font-size: 100%;
	background-color: #757575;
}
.main h2 {
	color: black;
}
.main h3, h3 a {
	color: #fefbd8;
	margin-top: 30px;
	line-height: 80%;
}
.main h4 {
	color: #80ced6;
	line-height: 80%;
}
.main p {
	color:#DDDDDD;
}
.main a {
	text-decoration: none;
}
.main p a {
	text-decoration: none;
	color:  Black;
}
.main blockquote {
	border-left: solid 2px DarkRed;
	padding-left: 20px;
}
.thumbnail {
	float: right;
	clear: right;
}
.footer {
    background-color: DarkRed;
	font-size: 80%;
	text-decoration: none;
}
.footer a {
	text-decoration: none;
	font-weight: bold;
	color:  Black;
}
.advert {
	background-color: Black;
	margin: 40px 0 0 0;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}