body{
	/*background-color: rgb(160, 160, 160);*/
	background-color: rgb(220, 220, 220);
/*	background-color: white;*/
	margin-top: 0 !important;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 10pt;

}
h1{

	margin: 0 !important;
	padding: 0 !important;
}
#main{
	/*background-color: rgb(160, 160, 160);*/
	background-color: rgb(220, 220, 220);
	/*background-color: white;*/
	padding:0px;
	margin:0px; 
}



#header{
	background-color:rgb(18, 188, 179, 0.5);
	color:white;

	/*	text-align:center;*/
	 position:fixed;
	padding-left:20px;
	padding-right:20px;
	height: 100px;
	/* width: 200px; */
	/* float:left; */

}
.quotes{
	font-style: italic;

}

.blog{
    background-color:white;
	width: 100%;
	box-shadow: 10px 5px 5px grey;
	border: 1px solid rgb(0, 0, 0);
	color: black;	
	padding: 20px;
	margin-bottom: 30px;
	margin-top: 10px;
}


/*#headerTwo{
	background-color:green;
	color:white;

	padding-left:20px;
	height: 80px;
	width: 100%;
	float:right;
	position: relative;
	top: -60px;

	}*/

	#mainPointer {
		width: 90%;
		height: 90px;
		display: -webkit-flex; /* Safari */
		display: flex;
		flex: auto;
		
	}

	#mainPointer div {
		-webkit-flex: auto;  /* Safari 6.1+ */
		-ms-flex: auto;  /* IE 10 */
		flex: auto;
	}


	#header a:link {
		color:white;
		text-decoration: none;
	}
	#header a:visited{
		color:white;
		text-decoration: none;
	}
	#header a:hover{
		color:white;
		background-color: rgb(60, 60, 60); 
	}


	.myContainer{
		float:left;
		overflow: hidden;
		position: relative;
		top: 10px;
		width: 800px; 
	}

	.myContainertictac{
		/* top: 10px; */
		float:left;
		overflow: hidden;
		position: relative;
		top:10px; 
		width: 400px; 
		height: 300px; 
	}

	.vert{
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	#menu{
		line-height:30px;
		background-color:#eeeeee;
		/*height:300px;*/
		width:200px;
		float:left;
		padding:5px;
		top: 170px; 
		position: absolute;
	}




	#animateddiv{
		margin-left:auto;
		margin-right: auto;
	/*	width: 0px; 
		border: 1px black solid;*/
		color: black;
		overflow: hidden;

	}

	#artwork{
		/*background-color: rgb(160, 160, 160);*/
		background-color: rgb(220, 220, 220);
		/*margin-left: 210px; 210*/
		margin-top: 80px; 
	}

	#artworkHome{
		/*background-color: rgb(160, 160, 160);*/
		background-color: rgb(220, 220, 220);
		margin-left: 210px; 

		 margin-top: 80px;  
	}

	#artwork2{
		/*background-color: rgb(160, 160, 160);*/
		/*background-color: white;*/
		background-color: rgb(220, 220, 220);
		 /*margin-left: 20px; 210*/
		margin-top: 20px; 
		
	}
	#explanation{
		padding: 20px; 
		font-size: 16px
	}

	.imageCentered{
		/*position: relative; */
		margin-left: auto;
		margin-right: auto;
		text-align: center; 
		margin: 10px;
	}

    .center{
    	width: 100%;
    	text-align: center; 
    	margin: 10px;
    }
    .right img{
    	float: right;
    	text-align: center; 
    	margin: 10px;
    }
    .left img{
        float: left;
    }

/*#headder a:link {
	color:black;
	}*/

	#menu a:link {
		color:black;
	}
	#menu a:visited{
		color:black;
	}
	#menu a:focus{
		color:purple;
	}	
	#menu a:hover{
		color:white;
		background-color: rgb(60, 60, 60); 
	}
	#menu a:active{
		color:blue;
	}

	#menu li{
		margin-top: -10px;
	}	
	/* photo grid */
	.row {
		/* position: absolute;  */
		display: flex;
		flex-wrap: wrap;
		 padding: 0 4px; 
	  }
	  
	  /* Create four equal columns that sits next to each other */
	  .column {
		flex: 198%; /* was 25*/ 
		max-width: 19%;
		 padding: 0 4px; 
	  }
	  
	  .column img {
		margin-top: 8px;
		vertical-align: middle;
		width: 100%;
	  }

	  .container {
		position: relative;
		 width: 100%; 
	  }
	  .text {
		background-color: rgb(18, 188, 179);
		/* background-color:rgb(18, 188, 179, 0.5); */
		color: white;
		font-size: 16px;
		padding: 4px 8px; 
		opacity: 0;
		position: absolute; 
		 top: -20px;  
		 width: 80px; 
		/* float:left;  */
	  }
	  /* .container:hover .image {
		opacity: 0.3;
	  } */
	  .container:hover .text {
		opacity: .8;
		
	  }
	  
	  /* Responsive layout - makes a two column-layout instead of four columns
	  @media screen and (max-width: 800px) {
		.column {
		  flex: 50%;
		  max-width: 50%;
		}
	  }
	  
	 
	  @media screen and (max-width: 600px) {
		.column {
		  flex: 100%;
		  max-width: 100%;
		}
	  } */