/* CSS Document for Screens */
/*google fonts - import from google, has to be first line of file*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700); 

@media screen and (min-width: 150px) {

html{background:rgba( 55, 56,50,  1.0);}
body{ font-family:'Open Sans', sans-serif; 
font-size:16px; line-height: 1.5em;
color: #ccc; height:auto !important; 
	  max-width:2000px;  min-height:100%; 
background:rgba(50, 10, 10, 0.0);
	 
}  /*.gridlines{z-index:220; position:absolute; background:rgba( 220,210,  220, 0.9); } */
/*border:0.00em #0ff solid;*/

*    {margin: auto; padding: 0}
li   {list-style-type: none;  }
* a {color: #CCC; text-decoration: none; line-height: 0.5em}
* a:hover, #menu:hover {cursor: pointer; font-size: 1.0em; }
* img { display:block; width:100%; height:auto; }

h1{font-size:1.1em; text-align:center; font-weight:700; line-height:1.1em; letter-spacing:0.1em}
h2{font-size:0.8em; text-align:center; font-weight:500; line-height:1.0em; letter-spacing:0.5em}
h3{font-size:0.9em; text-align:left;   font-weight:500; line-height:0.9em; letter-spacing:-0.04em}
h4{font-size:1.1em; text-align:center; font-weight:700; line-height:0.9em; letter-spacing:1.2em}
h5{font-size:1.3em; text-align:center; font-weight:700; line-height:1.0em; letter-spacing:0.1em}
h6{font-size:0.85em; text-align:right; font-weight:500; line-height:1.0em; letter-spacing:0.1em}

#Page { background:rgba(50, 10, 10, 0.0); height:auto; position:relative} 

#HeaderCon {z-index:111; position:fixed; width:100%; background:rgba(50, 10, 10, 0.8);
	height:1.8em;	
}
#Header {width:65%; margin:auto; position:relative; background:rgba(21, 21, 20, 0.0); 
}
#startTitle { display: block; top:2.2em; margin: 4em 0 0.2em 0; 
}
#startBut {z-index:40; position:relative; width:50%; height:50%;top:5em;
	background:rgba(120, 10, 10, 0.0); cursor: pointer;
}
#one, #two {height:1.0em; position:relative; margin:auto; top:-0.1em; border:0.00em #0ff solid;}
#Left { z-index:118; position:fixed; top:0.2em; }
#Rite { z-index:118; position:fixed; top:0.2em; right:0;}

/*------------------M E N U-----------------------*/
#menu-button {z-index:112; position:relative; width:3em; height:1em; 
	margin:0.35em; opacity:0.5; border:0.0em #ff0 solid; cursor:pointer;
}
.ibar { display:block; border-top: 0.2em #ccc solid; 
	width:1.2em; height:2px; margin:0px; 
}
#back-button, #folder-button {z-index:212; position:fixed; cursor:pointer;
	line-height:1.0em; right:1%; top:0.5em; letter-spacing: -0.02em; 
}
#menu-button:hover 	 {opacity: 0.6}
#back-button:hover 	 {display:inline; opacity: 1.0}
#folder-button:hover {display:inline; opacity: 1.0}

#menu {z-index:215; display:none; text-align:right; background:rgba(6, 60, 105, 0.8);}
//#menu:hover {cursor:pointer;}

#firstUL  {position:absolute; top:2.0em; left: 6px; width:120px;}
#secondUl {position:absolute; top:0.5em; left: 130px; width:140px; } 
.sub1, .sub2 {font-size:1.1em; line-height: 1.0em; 
//	background:rgba(6,60,105,0.7); 
  background:rgba(50, 10, 10, 0.6);
	padding:13px 2px; border-bottom:0.02em solid rgba(160,160,160,0.5)
}
.sub2{padding: 3px;}
/*----------------------M A I N-------------------------------------------*/
#Main {position:absolute; width:100%; height:100%; top: 2.0em;
	background:rgba(20, 120,120, 0.0); 	border:0.0em #ff0 dotted; 
}
#thumbCon, #mobilCon { position:relative; width:96%; top:0.2em; 

	display:block; margin:auto;
	border:0.0px #f0f solid; 	//background:rgba(120, 10, 10, 0.0);
}
#thumbTitle {position:relative; text-align:center;
	top:0.1em; margin:0.2em auto; width:100%; border:0px #ff0 solid;
}
/*------for exact location see js file-----*/
.thumbs, .eaMob { position:relative; display: inline-block;
	opacity:0.9; cursor: pointer; margin:auto;
		border:0.1px #666 solid; background:rgba(0, 20, 60, 0.0); 
}
.thImg { position:relative; overflow: hidden;
	border-radius: 0.5em; border:0.0px #fff solid;background:rgba(200, 200, 200, 0.0); 
}
.eaImg  {position:relative; overflow: hidden; 
	border-radius: 0.25em; border:0.0px #fff solid; background:rgba(200, 200, 200, 0.7); 
}
.thImg img, .eaImg img { opacity:1.0 }

.thText,.thQnty,.thComm,.eaTxt,.eaQty{ position: relative;
	float:left; font-size:0.9em; line-height: 1.3em;
	width: 100%; display:inline-block;
	overflow: hidden;
}
/*#mobilTitle { text-align:center; top:0.2em; margin:auto; }
*/
#mobilTitle {position:relative; text-align:center;
	margin:0.1em auto; width:100%; border:0px #ff0 solid;
}
#mobilTTL {font-weight:700; font-size: 1.0em; letter-spacing: 0.8em; display:inline; }
#mobilQty {font-weight:500; font-size: 0.9em; letter-spacing:-0.01em; display:inline;
}
/*--------I M A G E S -------*/
#imgPreview {z-index:100; position:absolute; right:10px; bottom:10px; border:0.01em #000 solid;
}
#imgPreview  img {border:0.1em #000 solid; right:0px;bottom:-5px;height:300px; width:auto;
}
/*-----------M  A  I  N   I m a g e s----------------*/
#imgMainDiv{position:absolute; width:100%; margin:auto; height:auto;
}
#imgMainDiv img{ width:100%; margin:auto; height: auto; 
} 
/*----A R R O W S----------------*/
#left-Main, #rite-Main { 
z-index: 100;
	position:absolute; top:25%; height:65%; width:40%; 
	opacity:0.4; background:rgba(100,100,0, 0.0); cursor: pointer;
}
#left-Main  {left:0;} 
#rite-Main {right:0;}

#leftArr { position:absolute; bottom:60%;  left:0.2em; opacity:0.4}
#riteArr { position:absolute; bottom:60%; right:0.2em; opacity:0.4}
#leftArr img {height:1.5em; width: 1.5em; }
#riteArr img {height:1.5em; width: 1.5em; }

//#left-Main:hover, #rite-Main:hover { opacity:0.4}
//#leftArr:hover, #riteArr:hover {opacity:0.9}
/*---------B O X E S  and  C O U N T E R -------*/
#Select{ position:absolute; width:98%; right:1%; height:2.6em; bottom:0;
	border:0.00px #C33 solid; background:rgba(50, 10, 10, 0.6);
}
#myTitle2 { position:relative; border:0px #ff0 solid;
	}
#mySign { position:absolute; bottom:2px; right:0.4em; }
#boxes {z-index:100; position:absolute; text-align: center; display:none; 
	bottom:0.4em; left:0;  background: rgba(160, 0, 0, 0.0);
}
.box {position:relative; display:inline-block; 	
	width:12px; height:22px; margin:0; left:0px; top:3px;
	background: rgba(160, 160, 160, 0.5); border:0.1em #000 solid;
}
/*-----C O U N T E R -- D e s c r i p t i o n   o f I m a g e s----*/
#counter {position:absolute; font-size: 1.0em; 	font-weight:700; letter-spacing: -0.03em;
	top:  0.3em; right:0.4em;  }

#type, #year, #city, #name {position:relative; line-height: 0.9em }
#name   {font-weight:700; display:inline-block;}
#year   {font-weight:500; display:inline-block;}
#type   {font-weight:500; }
#city   {font-weight:500; }

/*-------------A B O U T -------------------------------------------*/
#michaelAbout, #oldWeb  { display:block; text-align:justify; position:relative; 
	top:0.5em; width:92%; height:auto; bottom: 2em;
	font-size:1.1em; line-height: 1.3em;
	margin:auto; padding:2%; background:rgba(15,35,65,0.4); //border:0.1em #fff solid;
} 
.webLink  {display:inline-block; text-align:left;width:100%; border-bottom: 0.01em #666 solid}
.webImage {display:inline-block; width:27%; float:left; margin: 0.5em 0.5em 0 0}
.linkText {width:100%; margin-top:0.3em}

/*--------------C O N T A C T-------------*/
#contact {width:70%; margin:0.5em auto;	padding:3%; 
	background:rgba(15,35,65,0.4); 
}
#contactText{display:block; position:relative; line-height:1.4em;
}

//.mPhoto1 { position:relative;}
//.mPhoto2 { position:relative;}
//.mPhoto3 { position:relative;}
////.mPhoto4 { position:relative;}

.mPhoto1 img{float:left;   height:auto; width:100%;margin:0.5em 0.4em 0 0;}
.mPhoto2 img{float:left;   height:auto; width:35%; margin:0.5em 0.4em 0 0;}
.mPhoto2b img{float:right; height:auto; width:60%; margin:0.5em 0.4em 0 0.4em;}
.mPhoto3 img{float:left; height:auto; width:100%; margin: 0.5em 0.4em 0 0;}
.cPhoto1 img{float:left; height:auto; width:100%; margin: 0.5em 0.4em 0 0;}

/*-----------F O O T E R-------*/
#Footer1234 { position:fixed; width:100%; bottom:1px; display:none; 	height: auto; 	background:rgba(50,15,26,0.5); 	border-top:0.01em #666 solid;
}
/* #max1100 {display:block}; #min1100 {display:none}; #min2100 {display:none}*/
}  

/*=========	7 0 0 px  M E D I A  Q U E R Y ====================================*/
@media screen and (min-width: 700px) {
  h1{font-size:1.4em; line-height:1.2em; letter-spacing:0.2em}
  h2{font-size:1.1em; line-height:1.4em; letter-spacing:0.5em}
  h3{font-size:1.1em; line-height:1.0em; letter-spacing:-0.02em}
  h4{font-size:1.3em; line-height:1.1em; letter-spacing:1.4em}
  h5{font-size:1.5em; line-height:1.2em; letter-spacing:0.5em}
  h6{font-size:1.0em; line-height:1.1em; letter-spacing:0.1em}

  #HeaderCon {height:2.4em}
  #menu-button {margin:0.6em}
  .ibar { width: 1.5em; height: 2px; margin: 1px; }
  #back-button, #folder-button { top:1em; 	}
  
  #firstUL  { top:3.0em; left: 6px; width:120px;}
  #secondUl { top:3.0em; left: 130px; width:165px; } 
  
  #thumbTitle, #mobilTitle {top:0.5em;}
  
  #mobilTTL {font-size: 1.2em; letter-spacing: 1.0 }
  #mobilQty {font-size: 1.1em; letter-spacing:-0.01em}
  
  #Select{height:2.8em; bottom:0px }
  #type, #year, #city, #name {font-size: 1.1em }
  
  #michaelAbout, #oldWeb {top:1.5em; width:60%; } 
  #contact { top: 1.5em; width:50% }
  
  .mPhoto1 img{width:55%; }
  .mPhoto2 img{width:30%; }
  .mPhoto2b img{width:45%;}

#firstUL  {width:150px;}
#secondUl {width:170px; left:155px} 
.sub1:hover, .sub2:hover{ font-weight:700; }
}

/*=========	1 1 0 0 px  M E D I A  Q U E R Y ====================================*/
@media only screen and (min-width: 1100px) {


body{ font-size:18px; }


 #HeaderCon {height:2.5em}
 
  #thumbTitle, #mobilTitle {top:0.5em;}


#left-Main  {left:6%;} 
#rite-Main {right:6%;}
 
 .mPhoto1 img{width:50%; margin: 0.5em 0.4em 0 0;}
 .mPhoto2 img{width:25%; margin: 0.5em 0.4em 0 0;}

}

/*=========	3 1 0 0 px  M E D I A  Q U E R Y ====================================*/
 @media screen and (min-width: 2100px) {

//---------- L I N E S-----------------------
//------ V E R T   l I N E S---------------------
#Page:after 	 {content:""; position:absolute; border-left:3px solid red;   } 
//#Main:after 	 {content:""; position:absolute; border-left:3px solid green; }
#imgMainDiv:after{content:""; position:absolute; border-left:3px solid  blue;  }

#Page:after 	 {top:0; bottom:0; left:50%; display:none}
//#Main:after		 {top:0; bottom:0; left:51%; display:none}
#imgMainDiv:after{top:0; bottom:0; left:52%; display:none}

}