/*GENERAL STYLES*/
.preview:hover {
  -webkit-transform: scale(1.3,1.3);
}

.copyright {
	 font-family: "Arial", "Helvetica", sans-serif;  
	margin-top: auto;
	text-align: center;
}

body,h1,h2,h3,h4,h5,h6 {
    font-family: "Arial", "Helvetica", sans-serif;  
}

body {
    background-color: #ffffff;  
	min-height: 100vh;
    display: flex;
    flex-direction: column;
}

p {
line-height:1.4em;
font-weight: normal;
}

.container {
width: 80%;
margin: auto;

}

img {
max-width:100%;
height: auto;
	margin-top: 50px;
	margin-bottom: 100px;
}

.logo_small {
  padding: 0px;
  margin-top: 100px;
}

/*NAV MENU*/

/* Style the header with a grey background and some padding */
.header {
    z-index: 9999;
      background-color: #ffffff;
      width: 100%;
    overflow: hidden;
    position: fixed;
    }
    
    /* Style the header links */
    .header a {
      font-family: Source Sans Pro;
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
    .header a.logo {
      padding: 0px;
      margin-left: 25px;
      font-size: 25px;
      font-weight: bold;
    }
    
    /* Change the background color on mouse-over */
    .header a:hover {
      background-color: #ffffff;
      color: rgb(255, 166, 0);
    }
    
    /* Style the active/current link*/
    .header a.active {
     
      color: rgb(255, 166, 0);
    }
  
  

    
    
    @media screen and (max-width: 600px) {
      .header.responsive {position: relative;}
      .header.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .header.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }



/*HERO SECTION*/

#hero {
    background-size: cover;

    height:85vh;
    display:flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url(../images/bg-pattern.png);
background-repeat: repeat;
background: rgb(104, 114, 124); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgb(45, 50, 56) 0%, rgb(14, 18, 22) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgb(39, 44, 49) 0%,rgb(16, 19, 24) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgb(38, 48, 58) 0%,rgb(22, 30, 39) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fa2f9', endColorstr='#207ce5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
}

#hero h1 {
    color: #fff;    
    font-size: 72px;
    font-weight: 700;
    margin: 0;
    position: relative;
    top: 30px;
    opacity:0;
}

.hero cover {
  background-image: url(../images/cover_theinnsmouthcase.jpg);  
  background-repeat: no-repeat;  
  background-size: cover;
  }


.logo {
position: relative;
width: 400px;
}


/*FOUR COLUMN SECTION*/

.fourColSection {
padding-top: 10px;   
padding-bottom: 100px;

}

.fourColContainer {
    display: block;
    vertical-align: middle;
    border-collapse : collapse;



margin-top: 60px;
}

.fourColSection hgroup h2 {
text-align: center;   
font-size: 40px;
color: #0068af;
margin-bottom: 10px;
}

hgroup {
text-align: center;    
}

.blueDividerLine {
width: 100px;
background-color: #ff6500;
height: 3px;
text-align: center;
display: inline-block;
}

.fourColSection hgroup h3 {
text-align: center;
font-size: 18px;
color: #323232;
margin-top: 5px;
}



@media screen and (min-width:801px) {
        .fourColItem {
        
            display: inline-block;
           
     
            width: 15%;
            min-width: 250px;
           
            margin-right: 50px; 
            margin-bottom: 50px;
            background-color: #fff;
            box-shadow: 0 0 20px rgba(0,0,0,0.06);        
            }
    }






.fourColItem:last-child {
margin-right: 0;    
}

.fourColText {
padding: 0px 20px 20px 20px;
text-align: center;
}

.fourColPlanb{
 ;
  max-width: 60%;;
  font-size: 20px;
  color: #23282c;
  margin-bottom: 5px;
  margin-top: 15px; 
  margin-left: 20%
  }

.fourColItem h3 {
font-size: 22px;
color: #0068af;
margin-bottom: 5px;
margin-top: 15px; 
}

.fourColItem h4 {
  font-size: 18px;
  color: #ff6500;
  margin-bottom: 5px;
  margin-top: 5px; 
  }


/*COG SECTION*/

.cogSection {

padding-top: 40px;
padding-bottom: 60px;
border-top:1px solid #ddd;
}

.cogSection hgroup {
text-align: center;    
margin-bottom: 50px;
}

.cogSection hgroup h2 {
font-size: 48px;
color: #0068af;
margin-bottom: 5px;
}

.cogSection hgroup h3 {
margin-top: 8px;    
}

.reviews {
width: 70%;
margin-right: 15%; 
margin-left: 15%; 

}

.reviewTextCol {
  flex:1;    
 
}

.cogImageCol {
  flex:1;    
position: relative;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
}

.introText {
color: #1d68af;
font-size: 27px;    
}

.cogLeft {
width: 220px;    
position: absolute;
left: 80px;
top: 60px;
}

.cogRight {
width: 220px;   
position: absolute;
    left: 264px;
    top: 158px;
}

/*SERVICES */

.game {
display:flex; 
flex-flow: row wrap;
}

.serviceBox {
flex:1;  
height: 400px;
display:flex;
justify-content: center;
align-items: center;
overflow:hidden;
}

.serviceBox:first-child {
background-image: url(../images/cover_theinnsmouthcase.jpg);  
background-repeat: no-repeat;  
background-size: cover;
}

.serviceBox:nth-child(2) {
background-image: url(../images/cover_planb.jpg);   
background-repeat: no-repeat;  
background-size: cover; 

}

.serviceBox:nth-child(3) {
background-image: url(../images/cover_dow.jpg);
background-repeat: no-repeat;  
background-size: cover;    

}

.serviceBoxInner {
background-color: rgba(255,255,255,0.9);
padding: 25px;
text-align: center;
}

.serviceBoxInner h2 {

}