/* New Portfolio album page */

html, body, div, span, h1, h2,  p, a,  ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}
:focus {outline: 0;}
a {text-decoration:none;}



#wrap {
  max-width: 80%; 
  
display: inline-block;
margin: 0 12.5%;

} 
li {
  float:left; 
  position:relative; 
  display:inline-block; 
  width:250px; 
  height:300px;
  margin:10px; 
  padding:10px; 
  background:#353535;
	border: #ffffff; 
  box-shadow:0 0 5px rgba(0,0,0,.35);
}
li div {
  position:absolute;
  height:0; 
  width:225px;
  background:rgba(0,0,0,.45); 
  overflow:hidden;
  bottom:10px; 
  left:10px;
  padding: 0 10px;
  line-height:50px;
  color:#fff;
  transition:height 1s;
}
li:hover div {
  height:50px;
}


#gallery


img {

max-width: 100%;
max-height: 100%;
text-align: center;
    display: table-cell;
   
margin: auto;
}




div {

font-family: courier;
}


canvas {
  opacity:1; 
  position:absolute; 
  top:10px;
  left:10px;
  transition:opacity 1s .2s;
}
li:hover canvas {
  opacity:0;
}



/* from old portfolio page */


body {
    background-color: black;
}



.logoBox {
	margin-top: 10%;
	background-color: black;
	text-align: center;
}



.linksUnderLogo {
	font-family: arial;
	font-size: 0.8em;
	text-align: center;
	color: white;
}



.underBox article{
	line-height: 30px;
}


.linksUnderLogo a{
	text-decoration: none;
   	font-family: courier;
   	color: #ffffff;
    
}



/* .underBox a:hover{ 
    
    color: #FF4000;
    background-color: 000066; */
    
.linksUnderLogo span{

  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.linksUnderLogo span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.linksUnderLogo:hover span {
  padding-right: 25px;
}

.linksUnderLogo:hover span:after {
  opacity: 1;
  right: 0;
}


.mobileOnlyInfo {
text-decoration: none;
   	font-family: courier;
   	color: #ffffff;
	font-size: 0.8em;
	text-align: center;
	display:none;
	


}


.portfolioList {
	margin-top: 8%;
	
	text-align: center;

}


.portfolioList  article{
	
	text-align: center;
}

.underPortfolioList {
	text-align: center;
	margin-top: 8%;
	margin-bottom: 5%;



}





.linksUnderLogoBack span{

  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.linksUnderLogoBack span:after {
  content: "<<";
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.linksUnderLogoBack:hover span {
  padding-left: 20px;
}

.linksUnderLogoBack:hover span:after {
  opacity: 1;
  left: 0;
}

.linksUnderLogoBack a{
	text-decoration: none;
   	font-family: verdana;
   	color: #ffffff;
    
}


.linksUnderLogoBack {
	font-family: arial;
	font-size: 0.8em;
	text-align: center;
	color: white;
}


/* error contact page */

.errorMessageforContact p {
	font-family: verdana, arial;
	color: white;
	text-align: center;
}



/* thank you contact page */


.thankyouMessage p {
	color: white;
	text-align: center;
	font-family: verdana, arial;
}


/* contact page */

.contactForm {
	text-align: center;
}

.contactForm p{
	text-align: center;
	color: white;
	font-family: verdana;
}



.bottomBar {
	width: 100%;
	display: block;
	color: white;
	font-family: verdana, arial;
	bottom:0;
	
	font-size: 0.5em;
	
   
   
   
}

.bottomBar p{

	float: left;
	margin-top: 0px;
	margin-left: 2px;
   
   
   
}

.bottomBar p2{

	float: right;
	bottom:0;
	margin-right: 10px;
   
   
   
}