body
{
   background-color: #ffffff; /* #f9f9f9; */
   font-family: 'Helvetica', 'Arial', sans-serif;
   font-size: calc(15px + 0.4vw); /* After https://matthewjamestaylor.com/responsive-font-size, who proposed 0.390625vw */
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   color: #333333;
   margin: 0;
/* Browsers on iOS phones increase change default font-size when you switch a website from portrait to landscape, or vice versa. Originally designed as a way to improve readability
   on websites not optimized for mobile, it causes odd behavior on modern responsive webstes. The settings below prevents the odd rendering.*/
   text-size-adjust: 100%; 
   -ms-text-size-adjust: 100%; 
   -moz-text-size-adjust: 100%; 
   -webkit-text-size-adjust: 100%;
/* The setting below is needed to support a sticky footer, non-collapsible footer */
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

h1
{
   font-size: 1.8em;
   margin-left: 3%;
   margin-right: 3%;
}

h2
{
   font-size: 1.5em;
   margin-left: 3%;
   margin-right: 3%;
}

.title
{
   font-size: 2em;
   font-weight: bold;
   color:#ae7d5b;
   margin-top: 3%;
   margin-left: 3%;
   margin-right: 3%;
}

.heading
{
   font-size: 1.2em;
   font-weight: bold;
   margin-top: 2%;
   margin-left: 3%;
   margin-right: 3%;
}

.content
{
   line-height: 1.5;
   margin-left: 3%;
   margin-right: 3%;
/* The setting below is needed to support a sticky footer, non-collapsible footer */  
   flex: 1 0 auto;
}

.author
{
   font-weight: bold;
}

.banner
{
   color: #666666;
   padding:0vw 0vw 0vw 0vw; /* top right bottom left */
}

.responsive
{
   max-width: 100%;
   height: auto;
}

@media (max-width: 600px)
{
   .float-right
   {
      ;
   }
}

/* Float to the right on screens that are equal to or greater than 601px wide */
@media (min-width: 601px)
{
   .float-right
   {
      float: right;
   }
}

.clearfloat::after
{
   display: block;
   clear: both;
   content: "";
}

a:link
{
   color: #0860A8;
   text-decoration: none;
}

a:visited
{
   color: #0860A8;
   text-decoration: none;
}

a:hover
{
   color: #0860A8;
   text-decoration: underline;
}

img
{
   max-width: 100%;
/* display: block; */
}

/***
 *** Style elements for mail form
 ***/

* 
{
   box-sizing: border-box;
}

input[type=text], select, textarea
{
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   font-family: inherit;
   font-size: 0.9em;
}

label
{
   padding: 12px 12px 12px 0;
   display: inline-block;
}

input[type=submit]
{
   background-color: #ae7d5b;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   float: right;
}

input[type=submit]:hover
{
   background-color: #a3704d;
}

.container
{
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
}

.col-25
{
   float: left;
   width: 25%;
   margin-top: 6px;
}

.col-75
{
   float: left;
   width: 75%;
   margin-top: 6px;
}

/* Clear floats after the columns */
.row:after
{
   content: "";
   display: table;
   clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
{
   .col-25, .col-75, input[type=submit]
   {
      width: 100%;
      margin-top: 0;
   }
}

/***
 *** Class (repeatable elements) section
 ***/

html>body .feature {height: auto;}

.main_img
{
   border: 0px solid Black;
}

.main_thumb
{
   border: 0px solid Black;
}

.thumb
{
   border: 0px solid Black;
}

/***
 *** ID (unique elements) section
 ***/

#google_results iframe
{ 
   width: 100%; 
}