/* marioncoutts.com */

html{height: 100%;}

  ::selection {
  background-color: black;
  color: white;
 }


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


h1{ font-size: 1.4em;
line-height: 1.4rem;
letter-spacing: -0.08rem;
  padding: 116px 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;}
  
   @media only screen and (max-width: 800px) { 
   #right h3 {padding: 0px 12px;}
   }

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;}
  
  
h5{ font-size: 0.8em; 
 padding: 0px 50px 0px 10px;    margin: 0 0 0 18px;         
  font-weight: normal; color: #555;}
  
  
  
  p
{	font-size: .9rem;
	padding: 6px 24px 0px 24px;
	margin: 0px;
	line-height: 1.35rem;
	font-weight: normal; color: #888;}
	
	  @media only screen and (max-width: 800px) { 
	  	  p{
			  font-size: 1rem; 
			  line-height: 1.5rem;
			  }  
	  }
	
      
  .pad {padding: 0 0px 0 60px;}
  
  .pad2 {padding: 0 0px 0 91px;}
  
  
  /*
  
  
  #cf1 {  position:relative;  
  height:auto; 
  width:100%;
  margin:0 auto 88% 23px;
    padding: 0 0 0px 0;
  }
  
  	  @media only screen and (max-width: 700px) { 
  #cf1 {   
  margin:0 auto 100% 23px;
  }
	  }
  
    	  @media only screen and (max-width: 600px) { 
  #cf1 {   
  margin:0 auto 115% 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{outline; letter-spacing: .05 rem;}

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


a:hover {
	color: #fff; 
	padding: 6px 2px 6px 0px; 
	border-radius:4px;
	border-bottom: 1px solid #888 !important; 
	opacity: .4 !important;
	}
	
a:active {
	text-decoration: none;	
	color: #fff; 
	padding: 6px 2px 6px 0px;}
	

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



  @media only screen and (max-width: 800px) { 
img{ 	 max-width: 100%;
	 height: auto;}
  }



/* 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;}
  
  
/* navigation menu */
#nav { height: 0px; width: 0;} 

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

#site_content
{ overflow: hidden;
  width: 14000px; 
  height: auto; /*this was 100%*/
  background: transparent;
  margin: 0px;}

  @media only screen and (max-width: 800px) { 
  #site_content
{   width: 100%; 
    padding: 0;
    margin:0;
 }
  }


/* mobile banner */  
  #top  {
	 display:inherit; 
	 width: 100%;
	 height: 160px;
	 background: #111;
	 	 position: fixed;	 
	 z-index: 10;
	 opacity: .95;
	 	 } 
		 
   #top h1  { 
	padding:58px 0 0 24px;
	}

  
  @media only screen and (min-width: 500px) { 
  #top  {	
	 height: 110px;
	 	 } 
		 
	#top h1  { 
	padding:12px 0 0 28px;
	color:white;
	}
		 
  }



  @media only screen and (min-width: 800px) { 
  #top  {	
   display:none; 
	 	 } 
  }
  
    
/* left - menu */
#left
{ float: left;  
width: 220px; 
height: 100%;  
padding:0px; 
margin: 0;  
background: #000;  
opacity: .92; 
position: fixed; }

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


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

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

#left a {border: 0;}

#left a:hover {
	background: transparent !important; 
    border: 0 !important;}



/* right */
#right
{ float: left;  
  width: auto; height: 100%; 
  padding:0; 
  margin: 0px 0 0 240px;
  background: transparent;}
  
    @media only screen and (max-width: 800px) { 
	#right { margin: 60px 2px 0 4px ;
	         width: auto ;
				}
		}
		
		#right a:link {background:whitesmoke;}
  
#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 only screen and (max-width: 800px) {
		#right img{ 
		margin: 60px 0 0 0px; 
		padding: 12px 12px 12px 0px; }
	}


#right a:link {color: #555; 
background: transparent !important;
border-bottom: 1px dotted;
padding: 3px 0;
}

#right a:hover { color: #000 !important; padding: 3px 2px 3px 0px;  background: #fff !important; border:0  !important;
opacity: 1 !important;
}

#right a:active {color: #600; border-bottom: 0; background: transparent;}





#pic { 
     height: auto; 
     width: auto; 
     background: transparent; 
     float:left;}
	 
	 
@media only screen and (max-width: 800px) {	 
#pic { 
     height: auto; 
     width: 98%;
	 background: transparent;
	 padding: 10px 0% 0 0%;
	 margin: 0 1%;
     float:left;}
	 
	 #pic img {
	width: 98%;
		  padding:10px 0 0 0%;
	      height: auto !important;	 }
	 	 			 		 }

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


/* manages space between first img on home page and header */


@media only screen and (max-width: 800px) {	 
.pic1
{ display: inherit;
  margin: 80px 0px 0 0 !important; 
	 }
}

@media only screen and (max-width: 500px) {	 
.pic1
{ display: inherit;
  margin: 200px 0px 0 0 !important; 
	 }
}




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

/* footer */
#foot
{   height: 100px;
  width: 2800px; 
  background: transparent;
}

@media only screen and (max-width: 800px) {	 

#foot
{   height: 100px;
  width: 100%;; 
}


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

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



.menu-mobile
{
   	background: #111;
	height: auto; 
	width: 10%;
	padding: 22px 0 0 26px;
	margin:0 0 0 0px;
	border-radius: 3px;
	color: #ddd;
	font-size: 1.6rem; 
    z-index: 23;
    font-weight: 500;
	}


  @media only screen and (min-width: 800px) { 
 .menu-mobile
{
display: none;	
}
  }


/* 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 !important;
  margin: 0% 15% 3% 0;
  border: 1px dotted #eee;
  border-radius: 6px;
  background: #3d3d3d !important;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: .32rem;
  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 !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: 14px;
  left: 16px;
  font-size: 1.6rem;
  padding: 0;

}

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