/* The @media (hover: hover) and (pointer: fine) queries resolve the "sticky
	hover" issue on mobile devices, for which the hover state is meaningless.
	The @media query resolves to false on mobile devices which therefore 
	ignore the css hover rules. Found on
	https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c
*/

* {outline: 0;
	box-sizing: border-box}

/* Set contrast colour ------------------------------------------------------ */

:root 
  {--alert: #4682b4}

/* Body and block containers ------------------------------------------------ */

html 
  {font-size: 62.5%} 

body 
  {font-size: 1.6em;
   line-height: 1.4;
   font-weight: 400;
   font-family: arial;
   color: grey; 
   margin: 0;
   padding: 0;
   height: auto;
	overflow-y: scroll}
   
/* Grid --------------------------------------------------------------------- */

div.container 
  {position: absolute;
   width: 1200px;
   max-width: 1200px;
	min-height: 100vh;
   margin-left: -600px;
   left: 50%} 	
	
div.row
  {clear: both}	
  	
@media only screen and (max-width: 1200px) 
{   
   div.container 
     {position: relative; 
      margin: 0 auto;
		width: auto;
      top: auto;
      left: auto} 
}	

div.alaska
  {float: left;
   padding: 10px 0 5px 50px}		
	
div.menuicon_open, div.menuicon_closed, div.menuicon_closed_hover
  {position: absolute;
   top: 20px;
	right: 40px;
   height: 60px;
   width: 100px;
	cursor: pointer;
	transition: 0.5s;
	background-image: url("../Images/menu_closed.gif");
	z-index: 3} 

div.menuicon_open
  {height: 37px;
	background-image: url("../Images/menu_open.gif");
	z-index: 2}
	
div.menuicon_closed_hover
  {background-position: 100px 0;
   transition: 0.3s;
   z-index: 1}	 
		
div.text
  {margin: 25px 50px;
	width: calc(100% - 400px)}    
	
@media only screen and (max-width: 900px) 
{    
	div.alaska
	  {padding-left: 35px}
	  
	div.menuicon_closed, div.menuicon_open, div.menuicon_closed_hover
	  {right: 28px}  
		
	div.text
     {margin: 25px 35px;
		width: calc(100% - 70px)} 
}	

@media only screen and (max-width: 600px) 
{   
   div.alaska
	  {padding-left: 25px}	
	  
	div.menuicon_closed, div.menuicon_open, div.menuicon_closed_hover
	  {right: 18px} 
	
	div.text
     {margin: 25px 30px;
		width: calc(100% - 50px)} 
}	

/* Side navigation ---------------------------------------------------------- */

div.sidenav	
  {height: 100%;
	width: 0px;
	position: absolute;
	z-index: 1;
	top: 75px;
	right: 0;
	background-color: white;
	opacity: 92%;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 25px}
	
@media only screen and (max-width: 900px) 
{
	div.sidenav
	  {max-width: 295px}
}	

@media only screen and (max-width: 600px) 
{
	div.sidenav
	  {max-width: 290px}
}	  

.navlink, .navlinkselected 
  {padding: 0 0 10px 30px;
   text-decoration: none;
	letter-spacing: 0.03em;
   font-size: 1.4em;
   color: grey;
   display: block;
   transition: 0.3s}
	
.navlinkselected
  {color: var(--alert);
	font-weight: bold;
	cursor: default}
	
div.navmain
   {}

div.navsub
   {font-size: 0.7em;
	 padding-left: 17px}		
  
@media (hover: hover) and (pointer: fine)
{
	.sidenav:hover, .navlink:hover
     {color: var(--alert)}
}	  
	
/*
@media screen and (max-height: 450px) 
{
	.sidenav 
      {padding-top: 15px}
   
	.sidenav a 
	   {font-size: 18px}
}
*/

/* Headings, paragraphs and links ------------------------------------------- */  

h1{font-size: 2.8em;
	text-transform: uppercase;
   color: var(--alert);
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: inline-block}

h2{font-size: 1.4em;
	color: var(--alert);
	letter-spacing: 0.03em;
	font-weight: bold}
	
h2.property, h2.group
  {font-weight: normal;
   color: grey;
   margin: 0;
	padding: 0;
	display: inline-block}	

span.h2
  {font-weight: normal; 
	font-size: 0.7em;
	color: grey}	
	
@media only screen and (max-width: 600px) 
{   
   h2.property
	  {display: none}	
}

@media only screen and (max-width: 400px) 
{    
  h2.group
    {display: none} 
}	 

p {margin: 0px;
   padding-bottom: 15px}
	  
a.textlink
  {text-decoration: underline;
   color: #CCCCCC}     
	
.tl
  {color: grey}	

@media (hover: hover) and (pointer: fine)
{
	.tl:hover
     {color: var(--alert);
	   transition: 0.3s;} 
}	

ul{margin-top: 0}  

/* Image viewer ------------------------------------------------------------- */  

#image-slider 
  {position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   overflow: hidden}

#image-slider img 
  {max-height: 100%;
   max-width: 100%;  
   flex: 0 0 100%;
   transition: all 0.75s;
	aspect-ratio: 4 / 2}
	
@media only screen and (max-width: 900px) 
{	
   #image-slider img 
     {aspect-ratio: 3.5 / 2}
}	

@media only screen and (max-width: 600px) 
{	
   #image-slider img 
     {aspect-ratio: 3 / 2}
}  

#arrows 
  {display: flex;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0}

#arrows b 
  {position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(128, 128, 128, .75);
   color: white;
   cursor: pointer;
   height: 50px;
   padding: 20px;
	margin: 0;
	transition: 0.3s;
   transition: background-color .5s, color .5s}

#arrows b:last-of-type 
  {left: 100%;
   transform: translate(-100%, -50%)}

@media (hover: hover) and (pointer: fine)
{
	#arrows b:hover 
	  {background-color: rgba(27, 51, 71, .75)}
}	  
	
.prevnext
  {font-size: 2em;
   line-height: 0.20}	
	
#prev
  {display: none}