* {outline: 0}

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

html 
  {font-size: 62.5%} 

body 
  {font-size: 1.3em;
   line-height: 1.2;
   font-weight: 400;
   font-family: Arial, Sans-serif;
   color: #AAADA6; 
   background: black;
   margin: 0;
   margin-bottom: 1em;
   height: auto}
  
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––--------------------------––– */
  
.container 
  {position: absolute;
   width: 860px;
   height: 605px;
   margin: -315px 0px 0px -420px;
   padding: 0 20px;
   box-sizing: border-box;
   top: 50%;
   left: 50%} 

@media only screen
{ 
   .container 
     {width: 100%;
      max-width: 860px}
}   
   
.container:after, .row:after
  {content: "";
   display: table;
   clear: both}      
   
div.header
  {float: left;
   width: 91.5%;
   padding: 1em 0em 1em 0em;
   margin: 0;
   font-size: 1.5em;
   font-weight: bold;
   text-align: center;
   color: #AAADA6;
   border-bottom: 1px solid #555555}

div.spaced
  {letter-spacing: 2.6em} 
  
@media only screen and (max-width: 860px) 
{ 
   /* left out width: 860px from original container css
      as this would override the desired max-width: 860px
      as defined in @medio only screen above
   */   
   
   .container 
     {position: relative; 
      height: auto;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
      top: auto;
      left: auto}         
}   

@media only screen and (max-width: 800px) 
{      
   div.header
     {font-size: 2.6vw;
      padding: 1em 0em 1em 0em}  
   
   div.spaced
     {letter-spacing: 6vw}   
}  

@media only screen and (max-width: 600px) 
{      
   div.header
     {font-size: 3.6vw;
      padding: 1em 0em 1em 0em}  
   
   div.spaced
     {letter-spacing: 5vw}   
} 

@media only screen and (max-width: 300px) 
{      
   div.header
     {font-size: 4.2vw;
      padding: 1em 0em 1.2em 0em}  
   
   div.spaced
     {letter-spacing: 4.2vw}   
}    
 
.col
  {width: 22.125%;
   float: left;
   box-sizing: border-box;
   text-align: right;
   color: #AAADA6;
   font-weight: bold;
   margin-left: 1%;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   padding-top: 17.25%;
   padding-right: 0.6em;
   line-height: 2.2;
   letter-spacing: 0.2em;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100%} 
   
.col:hover
  {color: white}   

.col.nr1of4
  {margin-left: 0}  
 
#nr1of4
  {background-image: url(../Photos/index.jpg); /* This acts as a preload */
   background-image: url(../Photos/index-off.jpg)}  
   
#nr1of4:hover
  {background-image: url(../Photos/index.jpg)}     

#nr2of4
  {background-image: url(../Photos/services.jpg);
   background-image: url(../Photos/services-off.jpg)}  
       
#nr2of4:hover
  {background-image: url(../Photos/services.jpg)}     

#nr3of4
  {background-image: url(../Photos/technology.jpg);
   background-image: url(../Photos/technology-off.jpg)}  
             
#nr3of4:hover
  {background-image: url(../Photos/technology.jpg)}     
 
#nr4of4
  {background-image: url(../Photos/contact.jpg);
   background-image: url(../Photos/contact-off.jpg)}       
       
#nr4of4:hover
  {background-image: url(../Photos/contact.jpg)}        
   
div.image
  {width: 22.125%;
   float: left;
   box-sizing: border-box;
   margin-top: 0;
   background-image: url(../Photos/sidephoto.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: top right;
   min-height: 360px}    
  
div.text
  {width: 68.375%;
   min-height: 360px;
   float: left;
   box-sizing: border-box;
   color: #AAADA6;
   margin-left: 1%;
   padding: 1.5em 2em 0em 1.5em;
   text-align: left;
   border: 0;
   background: -webkit-linear-gradient(#000000, #303030); 
   background: -o-linear-gradient(#000000, #303030); 
   background: -moz-linear-gradient(#000000, #303030); 
   background: linear-gradient(#000000, #303030);
   border-top: 1px solid #555555;
   border-bottom: 1px solid #555555}  
   
div.logo
  {width: 7.5%;
   min-height: 360px;
   float: left;
   box-sizing: border-box;
   margin-left: 1%}  
   
div.logoimg
  {position: absolute;
   bottom: 0;
   width: 50px;
   height: 100px;
   background-image: url(../Photos/ICAEW_logo_v.jpg);
   background-repeat: no-repeat;
   background-position: bottom left}     

@media only screen and (max-width: 860px) 
{ 
   div.header
     {width: 100%}
   
   .col
     {width: 24.25%}
     
   div.flex
     {display: -webkit-flex;
      display: flex}
   
   div.image  
     {width: 24.25%;
      flex-grow: 1}
     
   div.text
     {width: 74.75%;
      flex-grow: 1}  
   
   div.logo
     {width: 115px;
      min-height: 0;
      height: 45px;
      float: right;
      box-sizing: border-box;
      margin-top: 0.5em;
      margin-left: 0} 
      
   div.logoimg
     {width: 115px;
      height: 45px;
      background-image: url(../Photos/ICAEW_logo_h.jpg);
      background-repeat: no-repeat;
      background-position: bottom left}              
}  
          
@media only screen and (max-width: 600px) 
{   
   .container 
     {width: 90%;
      padding: 0}
   
   .header
     {width: 100%}
   
   .col
     {width: 49%;
      margin-left: 2%;
      padding-top: 24.25%}
      
   .col.nr3of4, .col.nr4of4
     {margin-top: 0}    
   
   .col.nr1of4, .col.nr3of4
     {margin-left: 0}
     
   div.image
     {display: none}  
     
   div.text
     {width: 100%;
      min-height: 0;
      margin-left: 0;
      letter-spacing: 0.06em;
      padding: 1em 2em 0em 1em}   
} 

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

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

p {letter-spacing: 0.12em;
   padding-bottom: 1.5em;
   margin: 0} 
 
@media only screen and (max-width: 600px) 
{   
   p {padding-bottom: 1em;
      margin: 0}
}    

a.textlink
  {text-decoration: none;
   font-weight: bold;
   letter-spacing: 0.12em;
   color: white}  

/* Style definitions for tables ----------------------------------------------*/ 
       
table
  {border-collapse: collapse}