/* marioncoutts.com */

html{height: 100%;}

body
{ font: 62.5%/1.4 'Lato', sans-serif;
  background: #fff; margin:0;
  padding:0px;  font-size: 1em; }

p
{	font-size: .8em;
	padding: 6px 24px 0px 24px;
	margin: 0px;
	font-weight: normal; color: #888;}

h1{ font-size: 1.4em;
  padding: 124px 0px 0px 24px; margin: 0px;               
  font-weight: normal; color: #fff;}

h2{ font-size: 1.2em;
  padding: 12px 24px 0px 24px; margin: 0px;               
  font-weight: normal; color:#000;}

h3{ font-size: 1em;
  padding: 0px 12px 0px 24px; margin: 0px;               
  font-weight: normal; color: #fff;}
  
  #right h3 {color: #222;}

h4{ font-size: 0.85em; 
 padding: 0px 50px 0px 40px;    margin: 0 0 0 18px;         
  font-weight: normal; color: #555; border-left: 6px solid #ddd;}
  
    @media all and (max-width : 768px) {	
		h1{ 
		font-size: 1.4em;
        padding: 40px 0px 0px 24px;
        margin: 0px;               
}	
	}
  
  
  .pad {padding: 0 0px 0 60px;}
  .pad2 {padding: 0 0px 0 91px;}
  
  
  #cf1 {  position:relative;  height:auto;  width:100%;
  margin:0 auto 88% 23px; }
  
#cf1 img {  position:absolute;  left:0;  
-webkit-transition: opacity 1.8s ease-in-out;  -moz-transition: opacity 1.8s ease-in-out;  -o-transition: opacity 1.8s ease-in-out;  transition: opacity 1.8s ease-in-out;}

#cf1 img.top:hover {  opacity:0;}

/*===============================================*/

a:link {	border-bottom: 0px;	text-decoration: none;	color: #999; padding: 6px 2px 6px 0px;}

a:visited {	text-decoration: none;	border-bottom: 0;	color: #777; padding: 6px 2px 6px 0px;}

a:hover {color: #fff; padding: 6px 2px 6px 0px; border-bottom: 0; background: #112;}
	
a:active {	text-decoration: none;	color: #fff; padding: 6px 2px 6px 0px;}
	

img{ border: 0px; margin: 0px; padding: 0px; }

@media all and (max-width : 768px) {
img {width: 100%; height: auto;}	
}


a{outline: none;}


/* unordered list */
ul
{ margin: 0px; padding: 0px;}

ul li
{ list-style-type: circle;
  margin: 0px; padding: 0px;}

li {
  padding: 0px 12px 0px 24px; margin: 0px;               
  font-weight: normal; list-style-type: none;} 

#left ul.current a:link {border: 0px; color: #fff;}  
#left ul.current a:visited {border: 0px; color: #fff;}

/*===============================================*/

/* main container */
#main
{width: auto; height: auto;background: transparent;}

/* logo 
#top
{ width: 100%; 
  height: 100px; float:left;
  background: transparent; position: fixed;}
  
#top-lt {background: #000; height: 100px; width: 250px;}

#top-rt {background: #000; height: 100px; width: auto; opacity: .5;}*/

/* navigation menu */
#nav { height: 0px; width: 0;} 

/*===============================================*/

#site_content
{ overflow: hidden;
  width: 11350px; 
  height: 100%;
  background: transparent;
  margin: 0px;}
  

  @media all and (max-width : 768px) {
	  #site_content
{ overflow: hidden;
  width: 100%; 
  height: auto; 
  }
  }


/* left - menu */
#left
{ float: left;  width: 220px; height: 100%;  padding:0px; margin: 0;  background: #000;  opacity: .92; position: fixed; }

#left p {color: #888; padding: 110px 24px 0px 23px; }

#left h3 {  padding: 18px 12px 0px 24px; color: #800;}


@media all and (max-width : 768px) {
	
#left{ 
 width: 100%; 
 height: 160px;  
 padding:0px; 
 margin: 0;  
 opacity: .92; 
 position: fixed; 
 background: #000;
 }
 
}



#mobile {display: none;}

@media all and (max-width : 768px) {
	#mobile {
		display: inherit;
		width: 100%;
		height: 90px;
		float:left;

		border-left: white 6px dashed
		}
	
}


/* right */
#right
{ float: left;  
  width: 12200px; height: 100%; 
  padding:0; 
  margin: 0px 0 0 240px;
  background: transparent;}
  
#right p {padding: 0px 12px 0px 12px; color: #555; margin:0 0 0 12px;}

#right img{ border: 0px; margin: 100px 0 0 0; padding: 12px 12px 12px 0px; }


@media all and (max-width : 768px) {

	#right
{ float: left;  
  width: 100%; 
  height: auto; 
  padding:0; 
  margin: 160px 0 0 0;
  background: transparent;}
	
}

#right a:link {color: #aaa;}

#right a:hover { color: #000; padding: 4px 2px 4px 0px; border-bottom: 0; background: transparent; opacity: .85;}

#right a:active {color: #999; padding: 4px 2px 4px 0px; border-bottom: 0; background: transparent;}


#pic { height: auto; width: auto; background: transparent; float:left;}


@media all and (max-width : 768px) {
	#pic { margin : 0 0 0 20px;}
	
}

.con {height: 400px; width: auto; } 


/*===============================================*/

/* footer */
#foot
{   height: 100px;
  width: 100%; 
  float: left;
  background: transparent;
}

#foot-lt
{   height: 100px;
  width: 250px; 
  background: #000; float:left;  position:fixed;
}

#foot-rt
{   height: 100px;
  width: 2550px; 
 float:left; 
}

/*===============================================*/

.quote
{ margin: 0 40px 0 40px; font-size: .8em; color: #666; }

.td { 
font-size: 1em; padding: 0 0 4px 0;
 margin:0;
color:#fff;  text-shadow: 6px 6px 6px #000;
box-shadow: 1px 1px 16px #000;}





/* overlay menu */
/*https://www.w3schools.com/howto/howto_js_curtain_menu.asp */


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 background: rgba(206,209,207, 0.9);
  overflow-x: hidden;
  transition: 1.2s;
}


.overlay-content {
  position: relative;
  top: 12.5%;
  width: 100%;
 padding: 0 0 0 8%;
  margin-top: 20px;
}

.overlay a {
  padding:16px 0px 16px 32px !important;
  margin: 0% 15% 3% 0;
  border: 1px dotted #eee;
  border-radius: 3px;
  background: #3d3d3d !important;
  text-decoration: none;
  font-size: 1.4rem;
  letter-spacing: .23rem;
  font-weight: 400;
  color: #ddd!important;
  display: block;
  opacity: .9;
  transition: 0.3s;
  text-align: left;
}

.overlay a:hover, 
.overlay a:focus {
 color: white !important;
  background:black !important;
  opacity: 1;
 padding:16px 0px 16px 32px !important;
 text-shadow: 0 0 0 !important;
}


.overlay a:active
{
  background:white;
  color: lightblue !important;
  opacity: .8;
  border: 1px solid black;
}

.overlay 
.closebtn {
  position: absolute;
  top: 20px;
  left: 45px;
  font-size: 2rem;
  padding: 0;
    color:orangered;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  
  .overlay .closebtn {
  font-size: 32px;
  top: 15px;
  right: 35px;
  }
}