html,body {
	height: 100%;
	width: 100%;
}

body
{

	margin: 0;
    min-height: 100%;

	font-family: "helvetica", "arial", sans-serif;

	background: url(body-gradient-sml3.png) no-repeat center center; /* was no-repeat center center fixed */
	background-size: cover;
}

* {
  box-sizing: border-box;
}

h1
{
    font-size: 35px;
	font-family: "helvetica", "arial", sans-serif;
	text-align: center;
	font-weight: bold;
}

/* This was h1.align-right on about, services, and transactions */
.align-right {
    font-size: 35px;
	font-family: "helvetica", "arial", sans-serif;
	text-align: right;
	font-weight: bold;
}

/* This corrects alignment when text moves under image for <800 viewports */
@media screen and (max-width: 800px) {
    .align-right {
    text-align: left;
	margin-top: -50px;
  }
}

h2
{
	font-size: 28px;
	font-family: "helvetica", "arial", sans-serif;
}

p
{
	font-size: 20px;
	font-family: "helvetica", "ariel", sans-serif;
	font-weight: bold;
}

.white-font
{
	color: white;
}

/* vertical separators for horizontal menu under the header when >800 */
.separator {
	color: white;
}

.small-font
{
	font-size: 15px;
}

/* Increased line height for header text >800 */
.line-height
{
	line-height: 210%;
}

a
{
	font-family: "helvetica", "arial", sans-serif;
	font-size: 20px;
	color: black;
}

a:link
{
    text-decoration: none;
	color: black;
}

a:visited
{
    text-decoration: none;
	color: black;
}

a:active
{
    text-decoration: none;
	color: black;
}

/* Current page menu link is white text on black bkgrnd for >800 */
.current-page {
	background: black;
	color: white;
	padding: 4px;
	border-radius: 15px;
}

div#container-header
{
	height: 188px;
	margin-top: 5px;
	margin-left: 5px;
}

@media screen and (max-width: 800px) {
  div#container-header {
	display: none;
  }
}

#logo-img
{
	display: inline-block;
	height: 188px;
	width: 270px;
}

#header-text
{
	position: absolute;
	display: inline-block;
	height: 188px;
	width: 500px;
	left: 280px;
	margin-top: -10px;
}

/* spacer between right and left email. I had to add padding to make it have a width */
div.mail-spcr {
	display: inline;
	padding-left: 110px;
}

/* The white vertical separator between header and cities list. :after is not referenced in the html */
#header-text:after {
  content: "";
  background-color: white;
  position: absolute;
  width: 2px;
  height: 160px;
  top: 25px;
  left: 480px;
  display: block;
}

@media screen and (max-width: 800px) {
  #header-text:after {
    display: none;
  }
}

ul#cities-list {
	list-style-type: none;
	position: absolute;
	height: 188px;
	width: 220px;
	top: 0px;
	left: 750px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	line-height: 110%;
}

@media screen and (max-width: 800px) {
  ul#cities-list {
    display: none;
  }
}

#phone {
	color: black;
	font-size: 20px;
	font-weight: bold;
	line-height: 110%;
}


#fax {
	color: black;
	font-size: 18px;
	font-weight: bold;
	line-height: 110%;
}

#clip-img-1 {
	clip-path: polygon(4.08% 86.03%, 4.02% 37.8%, 38.29% 18.45%, 38.11% 11.66%, 47.47% 4.77%, 47.57% 2.42%, 97.56% 2.37%, 97.39% 78.53%, 62.7% 97.93%);
}

.listings-address {
	background: yellow;
	font: 30px "arial black", sans-serif;
	text-align: center;
	margin: auto;
	width: 80%;
}

@media screen and (max-width: 800px) {
  .listings-address {
    font-size: 5vw;
  }
}

.listings-text-title {
	font-size: 25px;
}

/* This is the header images for <800px width */
#size320 {
    width: 99%;
    height: auto;
	display: none;
	margin: 5px;
	padding-right: 10px;
}

@media screen and (max-width: 800px) {
  #size320 {
    display: block;
  }
}

/* image strips under mobile headers */
.strip320 {
	width: 100%;
	height: auto;
	display: none;
}

@media screen and (max-width: 800px) {
  .strip320 {
    display: block;
  }
}

/* For flex boxes on listings page */
.flex-container {
	display: flex;
	width: 90%;
	height: auto;
	margin: auto;
	flex-direction: row;
}

/* For viewport <800, the text moves under the image */
@media screen and (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

/* Do not remember why this needed a class, because it is same as above */
.flex-container-rev {
	display: flex;
	width: 90%;
	height: auto;
	margin: auto;
	flex-direction: row;
}

@media screen and (max-width: 800px) {
  .flex-container-rev {
    flex-direction: column-reverse;
  }
}

.flex-container-img {
	align-self: center;
}

@media screen and (max-width: 800px) {
  .flex-container-img {
    width: 80%;
  }
}

.flex-text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
}

.flex-text-left-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	text-align: right;
}

@media screen and (max-width: 800px) {
  .flex-text-left-container {
	text-align: left;
  }
}

/* These are the smaller images under the listings images on listings page */
.thumbs-row {
	display: block;
	margin: auto;
}

@media screen and (max-width: 1005px) {
  .thumbs-row {
    display: none;
  }
}

/* This is the horizontal menu undr the header for >800  */
ul#menu
{
	list-style-type: none;
	margin-top: 5px;
	margin-left: -20px;
	font-family: "helvetica", "arial", sans-serif;
	font-size: 20px;
	color: black;
	font-weight: bold;
	z-index: 10;
}

@media screen and (max-width: 800px) {
  #menu {
    display: none;
  }
}

ul#menu li {
	display: inline;
	z-index: 20;
}

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

div#eames
{
	padding-left: 45px;
	margin-top: -50px;
}

#eames-img
{
	float: right;
	width: 80%;
	height: auto;
	shape-outside: polygon(5.42% 75.97%, 5.36% 52.46%, 9.88% 52.34%, 78.60% 6.20%, 82.47% 0.37%, 97.89% 0.77%, 98.45% 95.99%, 85.31% 98.96%, 68.21% 99%, 55.55% 95.5%);
	-webkit-shape-outside: polygon(5.42% 75.97%, 5.36% 52.46%, 9.88% 52.34%, 78.60% 6.20%, 82.47% 0.37%, 97.89% 0.77%, 98.45% 95.99%, 85.31% 98.96%, 68.21% 99%, 55.55% 95.5%);
}

@media screen and (max-width: 800px) {
  #eames-img {
    display: none;
  }
}

/* Clearfix hack to correctly display content after a float on timeline page */
#eames:after {
	content: "";
	display: table;
	clear: both;
}

div.glry-container {
		text-align: center;
	height: 400px;
	width: 100%;
	margin: 0 auto;
}

div.gallery-img {
	display: inline-block;
	vertical-align: top;
	width: 32%;
	height: auto;
	padding:20px;
}

div.img-captn {
	padding:10px;
	text-align: center;
	font-weight: bold;
}

@media screen and (max-width: 800px) {
  .glry-container {
    display: none;
  }
}

/* Image for About page >800 */
#about-img {
	float: right;
	width: 50%;
	height: auto;
	z-index: -10;
}

@media screen and (max-width: 800px) {
  #about-img {
    display: none;
  }
}

/* For about, sales, and services pages */
.text {
	overflow: auto;
}
/* below section contains gallery styling for transactions page */
.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 10px 50px;
}

/* Create four equal columns that sit next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 10px;
}

.column img {
	width: 100%;
    margin-top: 15px;
    vertical-align: middle;
}

.column-img {
	width: 100% !important;
}

/* txtR, txtL, and txtC aree for tansactions page */
div.image-txtR {
	text-align: right;
    width: auto;
    padding: 10px;
	font-size: 12px;
}

div.image-txtL {
	text-align: left;
    width: auto;
    padding: 10px;
	font-size: 12px;
}

div.image-txtC {
	text-align: center;
    width: auto;
    padding: 10px;
	font-size: 12px;
}

/* Large address on yellow background for transactions page page */
.image-txtR span, .image-txtL span, .image-txtC span {
	background-color: yellow;
    padding: 3px;
	font-weight: bold;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 750px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

/* CSS FOR THE TRIGGER. For Header  on <800 pages */
#menuTrigger,
nav {
    display: none;
}

#menuTrigger:checked + nav {
    display: inline-block;
	width: 100%;
}


/* BASIC CSS for mobile navigation menu clickable without JS */

header,
main,
nav {
    padding: 0px;
}

label {
    cursor: pointer;
	position: absolute;
	top: 0px;
    right: 0px;
}

nav {
	/* background-color: #F7B905; */
	background-color: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #555;
	height: 100%;
}

ul#mbl-nav {
		list-style-type: none;
		top: 0px;
		line-height: 250%;
}
#mbl-nav li {
	/* text-align: center; */
}

a.white {
	color: white;
	font-size: 20px;
	/* margin-left: 30%; */
}

/* This is the wrapper for mobile menu. Without it there is a gap at the top. It prevents page undeerneath from moving down */
div#mobile {
	display: block;
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
}

@media screen and (min-width: 800px) {
  div#mobile {
    display: none;
  }
}

/* This is the contact list for mobile screens */
.contact-container {
	display: block;
	margin-left: 40px;
	font-weight: bold;
}

@media screen and (min-width: 800px) {
  div.contact-container {
    display: none;
  }
}
/* The contacts list for landscape large mobiles */
#contact-bmbl {
	display: block;
	margin-top: 100px;
	margin-left: 40px;
	font-weight: bold;
}

@media screen and (max-width: 801px) {
  div#contact-bmbl {
    display: none;
  }
}

a.contact {
	display: block;
	width:260px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color:black;
	color:white;
	border-radius: 15px;
}