/* Global  */ 

body {
    margin:0;
    padding:0; 
    font-size:18px;   background:url(../img/bkgds/canvas.jpg)repeat;
    overflow-y:scroll;  
    overflow-x: hidden;           
}        
a {
    color:#84a32e;
    text-decoration: none;
}            
a:hover {                
    color:#000; 
}            
a:visited {
    color:#999; 
} 
b {
    color:#000;
}
h3 {  
    width:60%; 
    margin:4% auto 0 20%;
    padding-left:2em;                
    overflow:hidden;
    color:#999;                
    font-size:1.6rem;
    font-family:monospace,serif;
    border-bottom:1px dashed #777; 
}

/*  Image Hovers  */

.imgLegend {               
    position: relative;
    display: inline;
    width:200% !important;
}
.imgLegend .imgDetails {
    position: absolute;
    top:0;
    left:0;  
    margin-left: 0;
    margin-top:1.8em;
    padding:0.8em 1.5em;
    border-radius: 6px;
    z-index: 1;
    visibility: hidden;  
    background-color: rgba(34, 34, 34, 0.56);
    font-size:14px!important;
    font-family:arial narrow,verdana,arial,serif,sans-serif;
    color: #fff;
    text-align: left!important;
    opacity: 0;
    transition: opacity 0.3s;     
}  
.imgDetails {    
    width:300% !important;     
}  
.imgDetails b {                
    color:#cfe050;
}
.imgDetails span {
    word-break:break-all;
    font-size:10px!important;
}
.imgLegend:hover .imgDetails {
    visibility: visible;
    opacity: 1;    
}

 /*  Stamp and Logo  */   

#stamp {
    position: absolute; 
    top:8px;
	left:92%;
    margin:0;
    padding:0 0.2em;          
    font-size:0.9vmax;       
    font-family:monospace,Times New Roman;
    color:rgba(59, 39, 58, 0.38);
    font-weight:normal; 
}
#logo {                
    margin-left:4vw;
    margin-top:2vw;
    max-width:82px;
    max-height:72px;                
}


/*   Navigation   */   

#navbar {                
    position:absolute;
    top:20%;
    left:1vmax;
    margin:0;
    padding:0;
    width:18%; 
    text-align: left;
    font-family: cursive, arial, georgia, sans-serif; 
    font-size:1.2em;
    font-weight:normal;
    color:#333; 
}                      
#navbar > ul {              
    list-style-type: none;     
    margin:0.5em 0.2em auto 0.6em;
    padding-left:0.5em;
    border-left:1px dashed #666;
}              
#navbar >ul >li {                
    margin-top:0.3em;
} 


/* Style for Jumbotron  */

.jT {
    position:relative;
    margin:-2rem 10% 5% 20%;     
    padding: 0 2em 30px 0;             
    border-bottom:1px dashed #333;
    border-right:1px dashed #333;
}                 
h1 {
    position:relative;
    display:inline;               
    margin-left: 12%;
    text-align: center;
    font-size:4vw;
    font-weight:normal;
    letter-spacing: 0.08em;
    text-shadow: 2.5px 2px 2px #d0d0d0; 
    font-family: arial,sans-serif;
}
h1 span {
    vertical-align: -0.1em;
    font-size:14vw;
    font-weight: normal;
}                
#fishArt {                
    margin:0;
    padding:0;
    width:50%;
    z-index:2;
    vertical-align: middle;    
}            
h2 {
    margin: 0 0 0 32%;
    font-size:2em;
    font-weight: normal;
    letter-spacing: 0.02em;     
    color:#555;
    text-shadow: 2.5px 2px 2px #d0d0d0;     
    font-family:arial,serif;
    z-index: 3;                
}
#wrought {
    margin-top:2px;
}
h2 b {            
    color:#000;
}
#pufferFish {                
    width:20vw;
    margin:0 0 2em 0em;     
}
#pufferLegend {                    
    color:#777;
    font-weight:normal;
    font-family:arial,sans-serif;       
}
#pufferLegend h4 {        
    margin:0.8em 2em 0.5em 0;
    font-size:1.8em;
    font-weight:normal;
}
details, summary  {          
    outline:0;       
    padding:0;   
}
summary {              
    font-size:1.5em;
    }
details {
    font-size: 1em!important;
    } 

/* Fish Flip Animation _ Markup & Style  
    Richard Bradshaw
    http://css3.bradshawenterprises.com/flip/  */ 

#f1_container {
  position: relative;
  margin: 2% 40% 2% 10%;
  width:60%;
  height:12vw;
  min-height:150px;
  z-index: 1;    
}
#f1_container {
  perspective: 1000px;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;   
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding:0 80px 0  4px;
  color: #444;
  text-align: left; 
}

/*  Thought and Wrought Animations    */

@keyframes emerge {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }               
}
.jT h2 {
    opacity:0;
    animation: emerge 1s 1s ease-in 1;
    animation-fill-mode: forwards;
}

/*  Puffer Fish Move Animation */

@keyframes move {
    from {
        margin-left:100%;
        width:5vw;
        opacity:0;                   
    }
    to  {                     
        margin-left:0;
        width:20vw;
        opacity:1;
    } 
}
#pufferFish {
    opacity:0;
    position:relative;
    animation: move 3s 250ms 1;
    animation-fill-mode: forwards;
}
            


/* Section Classical-Consumer Art  */


#classicalArt {
    width:50%;
    margin:8% auto 0;
    padding-bottom:0.1vw;                
    text-align:right;                
    border-bottom: 1px dashed #333;    
}          
#classicalArt h2 {
    margin:0 2% 8% 0;       
}
#classicalArt h2:first-child {
    border-top:1px dashed #333;
    padding-top:0.4em;
}
#classicalArt h2 > span {
    font-size:250%;
    font-weight:normal; 
    color:#000;   
}        
#classicalArt img {
    width:10%;
    margin:4em 2em 0 0;
}
.imgDetailsGudea {
    width:312%!important;
}
.imgDetailsGudea, .imgDetailsPraxiteles, .imgDetailsDaVinci, .imgDetailsNefertiti {
    overflow-x: scroll;
    width:200px!important;
    margin-left:-50%!important;
}
#consumerArt {         
    width:50%;
    margin:5% auto 0;
    text-align:right;
}            
#consumerArt h2 { 
    margin:12% 2% 10% 0;    
    text-align: right;
}            
#consumerArt h2 span {              
    color:#555;
    font-size:220%;
}
#consumerArt p {
    font-size:1.2em;    
    text-align:justify;
}
#consumerArt p:first-child {
    margin-top:8%;    
}
section {
    margin:2em 2em 0;
    color:#000;    
    text-align:justify;
}
section h5 {
    font-weight:normal;
    color:#333;
    font-size:1.2em;
    margin-top:0;
    
}
#consumerArt #imgDuchamp {
    width:20%;
    max-width:206px !important;
    margin:1rem auto;
    padding:2em 4em;   
    box-shadow: -4px 2px 2px 2px #d0d0d0;    
}
#imgDetailsDuchamp {
    margin-top:-10%;
    margin-left:-1em;
    width:102%!important;
    background-color: rgba(34, 34, 34, 0.56);
}
#cola {    
    margin:2% auto;
    padding:2em 1em;
    font-size:20px;
    text-align:left;
}
#imgWarhol {    
    margin:2em auto;
    padding:2em 3em;
    width:14%;
    box-shadow: 4px 6px 2px 2px  rgba(172, 153, 153, 0.81);    
}
#imgDetailsWarhol {
    margin-top:-10em;;
    margin-left:-1%;
    width:100%!important;
    min-height: 100%;
    font-size:14px;
    background-color: rgba(34, 34, 34, 0.56);
}
#authorQuote {
    margin-left:40%;               
}
.hoverText {
  position: relative;
  display: inline-block;  
}
.hoverText .hoverTextContent {
      position: absolute;
      top:10%;
      left: -80%;      
      width: 320px;
      padding:14px;
      font-size:14px;
      background-color: rgba(34, 34, 34, 0.67);
      color:#fff;
      border-radius: 5px;
      visibility: hidden;
      z-index: 1;
      opacity: 0;      
}   
.hoverText .hoverTextContent::after {
  content: "";
  position: absolute;
  top:100%;
  left:100%;  
}
.hoverText:hover .hoverTextContent {
  visibility: visible;
  opacity: 1;
}   


/* Section Readymade  */

#readymade {
    width:50%; 
    margin:2% auto 4%;    
    padding:0 1em 1em 5em; 
    font-size:1.1em;
    text-align:center;
    box-sizing: border-box;    
}

#readymadeHeader {
    width:50%;    
    margin-left:20%;                 
    margin-top:0;
    padding-top:20px;    
    color:#000;
}
#readymadeHeader span {
    color:#555;
    font-size:70%;
    font-family:cursive;
    padding-left: 4em;
}
#readymade  p {
    padding:0.5em;   
    text-align:justify;    
}
#readymade img {    
    max-width:130px;
    max-height: 180px;               
    border-radius:5%;
    box-shadow: 2px 6px 4px #999;
    padding:1em 2em;    
}
#readymade .imgDetailsReadymade {      
    margin-top:-106%!important;
    left:-15%;;
    text-align:left!important;
    min-height: 200px;
    width:100%!important;    
    padding:1em 2em;
}


    /* Styles for Banner & Aside */

#banner {
    width:100%;
    top:0.5em;
    margin:0;
    text-align: center;
}
#banner img {
    width:50%;
    margin:0 25%;
    max-width:1024px;
}
#imgDetailsBanner {
    margin-left:25%!important; 
    padding:1.5em !important;
    width:30%!important;
    margin-top:1.6em!important;
    background-color: #222;
}  
 aside {
     margin:12% 25% 0 25%;
     font-size:20px;
     font-family:verdana, helvetica, arial, sans-serif, serif;
     color:#222;
     text-align: justify;
     
}
aside h4 {
    letter-spacing: 0.04em;
}
#banner-dolphins {
    margin:8% 20% 0;width:60%;
}


    /* Styles for Footer  */  

footer { 
    margin:5% 25%;    
    text-align: center;                        
    font-size: 1rem;
    color:#666;  
}   
footer p {
    padding:1em;
    font-size:1rem;
    text-align:justify;
} 
footer ul {
  padding:4em;  
}
footer ul, footer li {
    display:inline;
    word-spacing: 1em;
    font-size:96%;     
}
footer #copyR {
    text-align:center!important;
    margin:5% auto;    
}