{
    box-sizing: border-box;
  }

body {
	color:black;
	background: white;
	font-family: helvetica;
	margin:10px;
}


.row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	padding: 0 6px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
	padding: 0 6px;
  }
  
  .column img {
	margin-top: 10px;
	vertical-align: middle;
	width: 100%;
  }

  /* START HOVER ATTEMPT */
  
  .img__wrap {
	position: relative;
	/* height: 200px;
	width: 257px; */
  }
  
  .img__description {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding:80px;
	/* background:grey; */
	color:white;
	visibility: hidden;
	opacity: 1;
	font-weight: bold;
  }

  .img__description_red {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding:80px;
	/* background:grey; */
	color:red;
	visibility: hidden;
	opacity: 1;
	font-weight: bold;
  }

  .column .img__wrap:hover {
	opacity: .7;
	  }

  .column .img__wrap:hover .img__description {
	visibility: visible;
	opacity: 1;
	  }

	  .column .img__wrap:hover .img__description_red {
		visibility: visible;
		opacity: 1;
		  }

	/* transition effect. not necessary */
	/* transition: opacity .2s, visibility .2s;
  }
  

  /* END HOVER ATTEMPT */

  /* .column img:hover {  */
    /* border: 0px solid black; */
    /* opacity: .65;
  } */

  .description {
    padding: 0px;
    text-align: center;
  }

/* 
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media only screen and (max-width: 700px) {
	.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 only screen and (max-width: 500px) {
	.column {
	  -ms-flex: 100%;
	  flex: 100%;
	  max-width: 100%;
	}
  }

/* *css for hover text overlay - start* */
/* .container {
    position: relative;
    height: 350px;
  }
  
  .image {
    display: block;
    width: auto;
    height: 350px;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color:black;
  }
  
  .container:hover .overlay {
    opacity: 50%;
  }
  
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  } */

/* *css for hover text overlay - end* */

footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0px;
	text-align: center;
  }

}
h1 {
	font-size: 60px;
	margin-left: 40px;
}
h2 {
	font-size: 18px;
}

td h2 {
	padding-left:150px;
}

header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	/* padding: 10px; */
	padding-left: 35px;
	border-bottom: 1px solid #eeeeee;
	z-index: 10000;
	background: white;
	overflow: hidden;
}




/* img { */
			/*border: 3px solid black;*/
			/*border-radius: 20px;*/
			/*margin: 20px 0px 0px 0px;*/
			/*width: 550px;*/
/* } */

/*td {
	vertical-align: text-top;
}*/

.header_holder {
		position: relative;
		margin-top: 150px;
}


body{
	z-index:100;

}

#wrapper {
	overflow:auto;
	margin: 0 auto 50px auto;
  }

article {
	margin: 0 auto;
	max-width: 550px;
	padding: 20px;
	font-size: 15px;
	
}
p {
	max-width: 700px;
}


ul.header {
	padding: 1px;
/*	text-align: right;*/
}

li.header {
	display: inline;
	padding: 0px 18px 0px 18px;
}

ul.img-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

ul.img-list li {
	display: inline-block;
	height: 230px;
	margin: 2em 2em 0em 0;
	position: relative;
	width: 300px;
}

span.text-content {
	background: rgba(0,0,0,0.5);
	color: white;
	display: table;
	height: 230px;
	left: 0;
	position: absolute;
	top: 0;
	width: 300px;
	opacity: 0;
}

span.text-content span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

ul.img-list li:hover span.text-content{
	opacity: 1;
}

a {
	color: rgb(200,200,200);
	text-decoration: none;
}
a:hover {
	color: red;
	font-style: italic;
	/* text-decoration: line-through; */
}


.square{
     width:100px; 
     height:100px;  
     background: black;
     margin-left: -200px;
     margin-top: -100px;
    }

.logo{
	display: inline-block;
	width: 30px;
}

.thumbs{
	height: 94px;
}

.gallerythumbs{
	height: 200px;
}

img.gallery{
	height: 500px;
}


nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul{
	list-style: none;
	position: relative;
/*	display: inline-table;*/
}

	nav ul:after {
			content: ""; clear: both; display: block;
		}


nav ul ul {
	/*background: #5f6975; */border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
	
}
	nav ul ul li {
		float: none; 
		/*border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;*/
		position: relative;
	}
		nav ul ul li a {
			/*padding: 15px 40px;*/
			color: black;
			font-size: 14px;
		}	
			/*nav ul ul li a:hover {
				background: #4b545f;
			}*/

nav ul li {
	float: left;
}
	
	nav ul li a {
		display: block; /*padding: 25px 40px;*/
		/*color: #757575; */text-decoration: none;
	}

/*.logo:hover{
	fill:#efc411;
}*/

/*.workimage:hover{
	opacity: 0.5;
}   

.workimage{
	display: inline;
	margin: 40px;
	position: relative;
	width: 100%;*/
}

/*.imageh2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

.imageh2 span {
	color:black;*/
/*	background: rgb(0,0,0);
	background: rgba(0,0,0,0.7);*/
/*	padding: 10px;
}
*/


/*.header_menu {


}

    <header>

			<table style="width:100%">
				<tr>
					<td>
						<h1>
							samantha
							<br>
							tova
							<br>
							rothberg
						</h1>
					</td>
					<td>
						<h2>
							<ul>
								<li><a href="index2.pdf">home</li></a>
								<li><a href="resume-SRothberg.pdf"> my resume</li></a>
								<li><a href="portfolio-prof.html"> my professional work</a></li>
							 	<li><a href="portfolio-personal.html">my metal thoughts</a></li>
								<li><a href="food.html">my food creations</li></a>
								<li><a href="contact.html">contact</li></a>
							</ul>	
					</td>
				</tr>
			</table>
	
	</header>