* {outline: 0}

/* Style definitions for body and block containers ---------------------------*/

html 
  {font-size: 62.5%} 

body 
  {font-size: 1.4em;
   line-height: 1.2;
   font-weight: 400;
   font-family: Verdana, Sans-serif;
   color: black; 
   margin: 0;
   margin-bottom: 1em;
   height: auto;
   background-color: #CCCCCC;
   overflow-y: scroll}
  
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––---------------------------––– */
  
.container 
  {position: absolute;
   width: 860px;
   height: 620px;
   margin: -315px 0px 0px -430px;
   padding: 0 30px;
   box-sizing: border-box;
   top: 50%;
   left: 50%}

@media only screen and (max-height: 690px)
{
   .container 
	  {margin: 0px 0px 0px -430px;
		top: 30px} 
}	
   
.container:after, .row:after
  {content: "";
   display: table;
   clear: both}           
   
div.header
  {float: left;
   width: 100%;
   padding: 0 0 0.2em 0;
   margin: 0;
   font-size: 2.4em;
   font-weight: bold;
   text-align: left;
   color: #C04C0F;
   border-bottom: 1px solid #888888}

div.spaced
  {letter-spacing: 0.2em}      

.row_gallery
  {margin-top: 0.5em}

.col
  {width: 24.25%;
   float: left;
   box-sizing: border-box;
   text-align: right;
   color: #DDDDDD;
   margin-left: 1%;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   padding-top: 20.25%;
   padding-right: 0.6em;
   line-height: 2.2;
   letter-spacing: 0.2em;
   background-position: bottom left;
   background-repeat: no-repeat;
   background-size: 100%} 
   
.col:hover
  {color: white}   

.col.nr1of4
  {margin-left: 0}  
  
#col1of4
  {background-image: url(../Photos/menu_index.jpg)}  
  
#col2of4
  {background-image: url(../Photos/menu_gallery.jpg)}     

#col3of4
  {background-image: url(../Photos/menu_contact.jpg);
   background-size: 200%;
   background-position: top left}     
 
#col4of4
  {background-image: url(../Photos/menu_instagram.jpg);
   background-size: 200%;
   background-position: top left}     
  
div.flex, div.flex2
  {display: flex}  
   
div.flex
  {min-height: 325px}    
   
div.image
  {width: 49.5%;
   float: left;
   box-sizing: border-box}   
   
div.titlebar
  {display: inline-block;
   width: 100%} 
   
div.title
  {float: left}  
  
div.menu
  {float: right;
   margin: 0 -1em 0 0.5em}                 
  
div.text, div.text_gallery, div.text_gallery_main, div.text_gallery_bottom
  {width: 49.5%;
   float: left;
   box-sizing: border-box;
   color: #444444;
   margin-left: 1%;
   margin-bottom: 0.2em;
   padding: 0.5em 1em 0em 1em;
   text-align: left;
   border-top: 1px solid #888888;
   border-bottom: none}   
   
div.text
  {border-bottom: 1px solid #888888;
   flex-grow: 1}  
   
div.text_gallery_main
  {width: 100%;
   margin-left: 0;
   margin-bottom: 0.5em;
   padding: 0.5em 1em 0em 0em;
   border-top: 1px solid #888888;
   border-bottom: none}        

div.text_gallery_bottom
  {border-bottom: 1px solid #888888}  
  
div.scroll
  {width: 49.5%;
   padding: 0.4em 0 3em 0} 
   
div.copyright
  {width: 49.5%;
   margin-left: 1%;
   box-sizing: border-box;
   color: #999999;
   padding: 0.2em 1em 0em 1em;
   text-align: left;
   border-top: none}   
   
div.hide
  {display: none}      
  
@media only screen
{ 
   .container 
     {width: 100%;
      max-width: 860px}
}        

@media only screen and (max-width: 860px)
{
   .container 
     {width: 90%;
      position: relative; 
      height: auto;
      margin: 0 auto;
      padding: 1em 0 3em 0;
      top: auto;
      left: auto}
   
   .header
     {width: 100%;
      padding-top: 0.5em}
     
   .row_gallery    
     {margin-bottom: 0}         
     
   .col
     {width: 49%;
      margin-left: 2%;
      padding-top: 35%}
      
   .col.nr3of4, .col.nr4of4
     {margin-top: 0}    
   
   .col.nr1of4, .col.nr3of4
     {margin-left: 0}
     
   #col3of4, #col4of4
     {background-position: 100% 0}       
      
   div.flex, div.flex2
     {flex-wrap: wrap;
      min-height: 0} 
      
   div.flex2
     {flex-wrap: nowrap}   
   
   div.image, div_image_gallery
     {width: 100%}  
     
   div.image
     {order: 1}   
     
   div.text, div.text_gallery, div.text_gallery_main, 
   div.text_gallery_bottom, div.copyright
     {width: 100%;
      padding: 0.5em 0 1em 0;
      margin-bottom: 0.5em;
      min-height: 0;
      margin-left: 0;
      margin-right: 0;
      border-bottom: 1px solid #888888}  
      
   div.text
     {order: 0}    
      
   div.menu
     {margin-right: 0}    
      
   div.text_gallery
     {order: 2;
       margin-bottom: 0.3em;
      border-top: none} 
      
   div.text_gallery_bottom
     {order: 2;
      border-top: none;
      border-bottom: none}        
      
   div.scroll
     {width: auto;
      padding: 0.5em 0.5em 0 0}     
      
   div.copyright
     {max-width: 100%;
      border-top: 1px solid #888888;
      border-bottom: none;
      padding-top: 0.5em;
      margin-top: 0.5em}      
      
   div.hide
     {display: block}     
}

@media only screen and (max-width: 550px) 
{      
   .container
	  {width: 100%}
	  
	div.header
	  {padding-left: 0.5em}
	
	div.header.left
     {clear: right} 
     
   div.spaced
     {letter-spacing: 2vw}    
   
   div.title
     {float: none}
     
   div.menu
     {float: left;
      margin: -0.5em 0 1em 0}   

	div.text, div.text_gallery, div.text_gallery_main, 
   div.text_gallery_bottom, div.copyright	
     {padding-left: 1.2em;
		padding-right: 1.2em}
		
	div.scroll
	  {padding-left: 1.2em}	
} 

@media only screen and (max-width: 300px) 
{   
   .col
     {letter-spacing: 0} 
} 

div.nobordertop
  {border-top: none} 

/* Style definitions for headings, paragraphs and links ----------------------*/  

p {padding-bottom: 1em;
   line-height: 1.4;
   margin: 0} 
   
p.gallery
  {padding-bottom: 1.4em}   

p.name
  {font-weight: bold;
   letter-spacing: 0.12em;
   color: #C04C0F}  
 
h1{font-size: 1.6em;
   font-weight: bold;
   letter-spacing: 0.2em;
   padding: 0.5em 0 0.7em 0;
   margin: 0;
   color: #C04C0F} 
   
h2, .object-name
  {font-size: 1em;
   font-weight: bold;
   letter-spacing: 0.2em;
   padding: 1em 0 1em 0;
   line-height: 1.2;
   margin: 0;
   color: #C04C0F} 
   
.ID
  {font-size: 0.625em;
   letter-spacing: 0.2em}    

.object-description
  {color: #444444}       
   
@media only screen and (max-width: 300px) 
{   
   h2{letter-spacing: 0} 
}     
   
a.textlink
  {text-decoration: none;
   font-weight: bold;
   letter-spacing: 0.12em;
   color: #EEEEEE}  
   
a.textlink:hover
  {color: white}   
  
/* Style definitions for images ----------------------------------------------*/   
 
img
  {width: 100%;
   height: auto;
   display: block}      
  
/* Style definitions for icons -----------------------------------------------*/   

div.icon
  {width: 40px;
   height: 40px;
   margin-bottom: 0.5em;
   float: left;
   cursor: pointer;
   background-size: cover}
   
div.icon.up
  {margin-left: 0}   
  
div.all
  {margin-right: 0.5em;
   background-image: url(../Photos/icon_all.gif)}  
  
div.cups
  {margin-right: 0.5em;
   background-image: url(../Photos/icon_cups.gif)}  
  
div.plates
  {margin-right: 0.5em;
   background-image: url(../Photos/icon_plates.gif)}  
	
div.teapots
  {margin-right: 0.5em;
   background-image: url(../Photos/icon_teapots.gif)}  	
  
div.vases
  {margin-right: 0.5em; 
   background-image: url(../Photos/icon_vases.gif)}  
  
div.other
  {background-image: url(../Photos/icon_other.gif)}    
  
div.up
  {background-image: url(../Photos/icon_up.gif)}        
  
div.icon:hover
  {background-position: -40px 0}      
  
div.icon.selected
  {background-position: -80px 0}