/* Homepage Media Queries Style Sheet */ 


@media screen and (min-width: 500px) and (max-width: 599px) {

	 
body {
   	font-size:14px;
} 
#Ode img {		
	opacity: 0.6;
}
#pufferLegend h4, summary, details {             
	font-size:14px!important;
}	                   
#f1_container {
	width:100%;
	margin-bottom:0; 
	min-height:10rem!important;	
}					
					
#classicalArt img {
		width:18%! important;
}
#cola {
		text-align:justify;
		font-size:14px;
		margin:
}      
#cola blockquote  {
		width:100%;
		margin-right:0;
		font-size:12px;
}
#cola h5 {
		font-size:12px;
} 
#imgWarhol {
		width:50%;
}    
#readymade {
		width:80%;
		margin:2% 10%;
}
  
aside {
		width:80%;
		margin:1% 10% 0;
		font-size:16px;
		font-family:verdana, helvetica, arial, sans-serif, serif;
		color:#222;
		text-align: justify;        
}
aside h4 {
		letter-spacing: 0.04em;
		color:#555;
		text-align:center;
		margin:2em 0 1em;
}
#banner-dolphins {
		margin:4% 20% 0;
		width:60%;
}
#hpPart2 {
		font-size:120%;
		margin: 4em 0 0 0;
		text-align:center;
		padding-bottom:0; 
		}
}

 @media (max-width: 599px){								                

#hpImage {
 		top:26.5%;
 		left:10px;

 	}
			    
#Ode {
	    font-size:0.9em;
} 
#Ode img {		
	    opacity: 0.6;
} 	                                      
h2{                   	    
        font-size: 1.2rem           			 
}                   	    
#pufferFish h4{                   		
        font-size:12px!important           			 
}                   			                            
#classicalArt img {                        
        width:18%;
		margin-right:1em					  ;                      
}                        
 #consumerArt{	                   
		width:70%;					 
		margin:15%;					 
		font-size:1em					  
}	                    
 #artRhyme{				       
		font-size:0.8em;			          
		line-height:1.2em			          
}					    
 #cola{					   
		font-size:0.8em					 
 }	                   
section{					    
		 padding-right:2em!important					  
 }	                   
					   

}

@media screen and (min-width: 600px) and (max-width: 900px) {
			
#Ode img {								
	 opacity: 0.7;                   
}
#hpImage {
 		top:30%;
 		left:10px;
}	                    
h2 {						         
	font-size:1.2em !important;						     
}   
#pufferLegend h4, summary, details {             
	font-size:14px!important;
} 
#f1_container {
	width:80% !important;
	min-height:11rem; 
}
                     
#consumerArt{	                   
		width:70%;					 
		margin:15%;					 
		font-size:1em					  
}	 
#cola {
	text-align:left;
	width:100%;
}
#cola blockquote  {
    width:100%;
    margin-right:0;
	font-size:12px;
}
#cola h5 {
	font-size:12px;
}
	                    
aside {
    margin:0 18%;					
}
  
#readymade {
	width:80%;
	margin:2% 10%;
}

}


@media only screen and (min-device-width: 900px) and (max-device-width: 1200px){
                   
    h2{
        font-size: 1.8rem;
    }
    #footnote{
        font-size:1.2em;
        font-weight:normal;
    }
    #footnote-1 h5{
        margin-top:3em auto
    }
    #logo-img{
        width:82px
    }


}

 @media (min-width: 1440px) {     
						
			           
	h1 {
		margin-left:16%!important;        
	}
	 h2 {		
	    font-size:2em;
	}
	#fishArt {                
		max-width:40% !important;
	}	           
    #pufferLegend h4 {
        margin-top:0.4em;
        font-size:1.4em;
    }		            
	aside {
		margin-top: 2%;
	}
	summary {
       font-size: 1.2em;
    }           
}

@media (max-width: 600px) {

	#imgDetailsDuchamp {		
		text-align:left!important;
	    	min-height: 200px;
		max-width:200px;
		min-width:100px!important;    
		padding:1em 2em;
	}
	#footnote-1 {
		padding:0; 
		margin:0;
	}
	aside {
		width:100%;
	}
	
}

@media screen and (min-width: 200px) and (max-width: 499px) {
	
	
	 #consumerArt, #readymade, #cola, aside, #footnote, #footnote-1 {
				 width: 90%! important;
				 margin:0 5%;
				 font-size:0.9rem;
	 }
 }