/* Global  */  

:root {
    --primary-color: #333;
    --secondary-color: #f4f4f4;
    --accent-color: #a04040;
    --max-content-width: 1400px;
    --breakpoint-mobile: 600px; /* Used for Nav collapse */
    --breakpoint-stack: 800px; /* Used for layout stacking (overridden by mobile-styles.css) */
}  
body {
    margin:0 0 200px;
    padding:0; 
    font-size:18px; 
    font-family: 'Georgia', serif;
    color: var(--primary-color);
    line-height: 1.6;
    /*line-height:1.45em; */
    background:url(../img/bkgds/canvas.jpg)repeat;
    overflow-y:scroll;  
    overflow-x: hidden;           
}       
a {
    color:green;
    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; 
}
/* subtitle Ode to Art  with link to Part 2 */

#Ode{
    position:absolute;
    top: 250px;
    left:1%;
    max-width:15%;
    margin:0;
}
#Ode img {
    width:80%;
    display:block; 
    padding:0;
    margin:0; 
    text-align: center;
    opacity: 1.0; 
    transition: opacity 0.3s ease; 
}
#Ode a {
    text-align: center;
    width:100%;
    font-size:1em;
    
}

 /*  Stamp and Logo  */   

#stamp {
    position: absolute; 
    top:150px;
	left:1%;
    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:noraml; 
}

/* Style for Jumbotron  */

.jT {
    position:relative;
    margin:-2rem 10% 5% 20%;     
    padding: 0 2em 30px 0;             
    
}                 
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:2.4em;
    font-weight: normal;
    letter-spacing: 0.02em;     
    color:#555;
    text-shadow: 2.5px 2px 2px #d0d0d0;     
    font-family:arial,serif;
    text-align:right;
    line-height:1.6em;
    z-index: 3;                
}
#wrought {
    margin-top:2px;
}
h2 b {            
    color:#000;
}
#pufferFish {                
    width:20vw;
    margin:0 0 2em 0;     
}
#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% 5%;
  width:100%;
  /* height:min-content; */
  min-height:14rem;
  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);
  
}
.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:center;                
    border-bottom: 1px dashed #333;    
}          
#classicalArt h2 {
    margin:0 2% 8% 0;       
}
#classicalArt h2:first-child {
    padding-top:0.4em;
}
#classicalArt h2 > span {
    font-size:250%;
    font-weight:normal; 
    color:#000;   
}        
#classicalArt img {
    width:14%;
    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:center;
}            
#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:0;
    
}
#imgDetailsDuchamp {
    margin-top:-10%;
    margin-left:-1em;
    width:102%!important;
    background-color: rgba(34, 34, 34, 0.56);
}

/*  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;    
}


/* Styles for Banner & Aside */  
    
hr {
	width:60%;
	margin:6% 20% 0;
}
#banner {
    width:100%;
    top:0.5em;
    margin:0;
    text-align: center;
}
#banner img {
    width:50%;
    margin:0.5% 25%;    
}
#imgDetailsBanner {
    margin-left:25%!important; 
    width:30%!important;
    margin-top:1.2em!important;
    background-color: #222;
}  
 aside {
     margin:0 25% 0 25%;
     font-size:16px;
     font-family:verdana, helvetica, arial, sans-serif, serif;
     color:#222;
     text-align: justify;    
}
aside h4 {
    letter-spacing: 0.04em;
	color:#444;
    margin-top:3rem;
    margin-bottom:2rem;
}
#banner-dolphins {
    	margin:4% 20% 0;
	width:63%;
}
#hpPart2 {
     font-size:120%;
     margin: 4em 0 0 0;
     text-align:center;
     padding-bottom:0; 
}