/*  ED MCMAHON ART STYLE SHEET */
@import url(https://fonts.googleapis.com/css?family=Raleway);

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

#example1 {
  border: 2px solid black;
  padding: 10px;
  background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
#example2 {
  text-align: center;
}

img.galleryintro {
  border: 2px solid blue;
}


table.mainbody {
  table-layout: fixed;
  width: 1000px;
}

 p.arialb{font-family:"Tahoma",Tahoma,sans-serif;}
 p.ptitle{font-family:"Tahoma",Tahoma,sans-serif;font-size:30px;color:coral;}
 p.oilon{font-family:"Tahoma",Tahoma,sans-serif;font-size:20px;color:#000000;}
 p.flapfont{font-family: "Limelight", cursive;}
 p.hovernote{font-family:"Arial Bold",Arial,sans-serif; font-size: 20px;}
 p.edfont{font-family: "Architects Daughter", "Arial", cursive;}

/* definitions for the menu system */

body {
  margin: 0px;
}
nav {
  margin-top: 5px;
  border: 1px solid blue;
  background-color: #D6EAF8;
  padding: 24px;
  text-align: center;
  font-family: arial;
  box-shadow: 2px 2px 8px -1px #000000;
}

.link-1 {
  transition: 0.3s ease;
  color: #000000;
  font-size: 24px;
  text-decoration: none;
  border-top: 4px hidden #3fa46a;
  border-bottom: 4px hidden #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link-1:hover {
  border-top: 4px solid #c4bf8b;
  border-bottom: 4px solid #c4bf8b;
  padding: 6px 0; 
}



/* Gallery Stuff */


.zoom {
  transition: transform .9s; /* Animation */
  width: 448px;
  height: 448px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}

.zoomfl2 {
  transition: transform .6s; /* Animation */
  width: 448px;
  height: 320px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}
.zoom2p {
  transition: transform .6s; /* Animation */
  width: 448px;
  height: 600px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}
.zoom2l {
  transition: transform .6s; /* Animation */
  width: 448px;
  height: 336px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}
.zoom2a {
  transition: transform .6s; /* Animation */
  width: 448px;
  height: 224px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}
.zoom2b {
  transition: transform .6s; /* Animation */
  width: 448px;
  height: 149px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}

.zoom2c {
  transition: transform .6s; /* Animation */
  width: 448px;
  height: 199px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}

.zoom2d {
  transition: transform .6s; /* Animation */
  width: 420px;
  height: 150px;
/*   margin: 100px 100px 100px 100px; */ 
  padding: 15px;
  background-color: white;
 border-style: solid;
  border-color: coral;
  text-align: center;
}
.zoom3 {
  transition: transform .6s; /* Animation */
  width: 56px;
  height: 56px;
/*   margin: 15px 15px 15px 15px; */ 
  padding: 5px;
  background-color: yellow;
 border-style: solid;
  border-color: coral;
  text-align: center;
}
.zoom4 {
  width: 56px;
  height: 56px;
/*   margin: 15px 15px 15px 15px; */ 
  background-color: white;
 border-style: solid;
  border-color: coral;
  border-width: thin;
  text-align: center;
}


.zoom:hover {
  transform: translateX(112px) translateY(-75px) scale(1.5);
}
.zoomfl2:hover {
  transform: translateX(112px) translateY(10px) scale(1.5);
}
.zoom2a:hover {
  transform: translateX(112px) translateY(-15px) scale(1.5);
}
.zoom2b:hover {
  transform: translateX(120px) translateY(-15px) scale(1.6);
}
.zoom2c:hover {
  transform: translateX(120px) translateY(-10px) scale(1.5);
}
.zoom2p:hover {
  transform: translateX(160px) translateY(-35px) scale(1.2);
}
.zoom2l:hover {
  transform: translateX(120px) translateY(-35px) scale(1.5);
}
.zoom2d:hover {
  transform: translateX(120px) translateY(10px) scale(2);
}
.zoom4:hover {
  transform:  scale(1.5);
}




h1,h3,h4{
  color: #fff;
  text-align: center;
}
.row {
  margin: 40px auto;
    display: grid;
  border: 2px;
    width: 500px;
    grid-column-gap: 1%;
}


/* justify center aligns everything along the X axis */
.thumbnail{
  justify-self:center;
  transition:.5s;
}
.photoContainer, .photoContainer2{
  border: 10px solid #000;
  text-align:center;
  position:relative;
  transform:perspective(500px) rotateY(5deg) ;
  width:94%;
}

/* ANIMATION OF THE PAINTING SHUFFLE */
/* fillmode both means that the photo will revert to original position after the hover is removed */
.photoContainer:hover, .photoContainer2:hover{
  animation-name:thumbTitle;
  animation-duration: 1s;
  animation-fill-mode:both;
  transition-timing-function: ease-in;
}
@keyframes thumbTitle{
  0% {
    transform:perspective(500px) rotateY(5deg) scale(1) ;
  }
  20% {
    transform:perspective(500px) rotateY(-10deg) scale(1.1);
  }
  100%{
    transform:perspective(500px) rotateY(0deg) scale(1.2);
  }
}

/* ANIMATION OF THE PAINTING TITLE */
/* Opacity 0 is blurry, 1 is full on */
/* animationtakes the title and starts 2.4em to the right and slides back to zero position */
.photoContainer:hover .photoInfo, .photoContainer2:hover .photoInfo{
  animation-name:infoSlide;
  animation-duration: 2s;
  animation-fill-mode:both;
  transition-timing-function: ease-in;
}
@keyframes infoSlide{
  0%{
    opacity:0;
    transform: translateX(2.4em);
  }
  100%{
    opacity:1;
    transform: translateX(0);
    visibility:visible;
  }
}


.photoContainer a{
  display:block;
  width:450px;    
  height: 450px;
  text-decoration: none;
}

.photoContainer2 a{
  display:block;
  width:280px;    
  height: 200px;
  text-decoration: none;
}

.photoContainer a img, .photoContainer2 a img{
  width:100%;
  opacity:1;
}

/* ANIMATION OF THE IMAGE WHEN HOVERING */
.photoContainer a img:hover, .photoContainer a img:hover{
  animation-name:imgTransparency;
  animation-duration: 1s;
  animation-fill-mode:both;
  transition-timing-function: ease-in;
}
@keyframes imgTransparency{
  0% {
    opacity:.5;
  }
  100% {
    opacity: 1;
  }
}

.photoInfo{
  background-color:#000;
  position:absolute;
  bottom:0px;  
  text-align:center;
  visibility:hidden;
}

.photoInfo h3{
  margin:7px 10px;
  font-weight:normal;
  font-size: 20px;
}
.photoInfo .paintingDate{
  text-decoration:none;
  color:#7c7c7c;
  font-size: 15px;
  padding:2px;
}