@charset "UTF-8";
/* CSS Document */

*{
    
    margin: 0;
    padding: 0;
   
}

hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 2px;
} 

body{
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    text-align: center;
    color:darkslategray;
}
    
    body h2{
        font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
        font-size: 24px;
        height:50px;
        
    }

img{
    
    width: 20%;
    max-width:100%;
    height:auto;
    
}

img_1{
    
    width: 50%;
    max-width:100%;
    height:auto;
    
}


.wrapper{
 width: 90%;
    margin: 0 auto;
    align-content: left;
    
}

.box-area{
  
    
}

header{
    
    width: 100%;
    height: 150px;
    background: #3078EA;
    position: fixed;
    z-index:+1;
}

.logo{
    
    width: 30%;
    float: left;
    text-align: left;
    line-height: 100px;
}

.logo a{
    
    text-decoration: none;
    font-family: poppins;
    letter-spacing: 4px;
    font-size: 1.2vw;
    color:aliceblue;
    letter-spacing: 4px;
    font-weight:800;
        
}

nav{
    flex-wrap: wrap;
    line-height: 100px;
    
}

nav a{
    
    text-decoration: none;
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    letter-spacing: 4px;
    font-size: .8vw;
    padding: 36px 10px;
    color:aliceblue;
    margin: 0 1px;
    font-weight: 700;
    
}

nav a:hover{
    
    background:aliceblue;
    color:darkolivegreen;
}


.banner-area{
    background-image: url(images/mouldandcondensation.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    top: 100px;
    height: 450px;
    width: 100%;
    position: fixed;
    
    
    
}

.banner-area: after{
    
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background:#130f40;
    opacity: .7;
    
    
}

.banner-area h2{
    
    padding-top: 8%;
    font-size: 1.5vw;
    color:cornflowerblue;
}

.content-area{
    
    width: 100%;
    height: 2200px;
    position: relative;
    background-color:white;
    top: 600px;
    z-index: +1;

}
.content-area h2{
    font-size: 1.5vw;
    margin: 0;
    padding-top: 30px;
    letter-spacing: 4px;
}

.content-area p{
    
    padding: 2% 0;
    line-height: 30px;
    text-align: center;
}

.footer {
  position: fixed;
  bottom: 0;
    left:0;
  width: 100%;
    background:#3078EA;
  height: 6rem;
    text-align: center;
    color:ghostwhite;
    line-height:140px;
    letter-spacing: 4px;
    font-size: .8vw;
    z-index: +2;


.row_1 {
  display: flex;
}
    
    /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row_1::after {
  content: "";
  clear: both;
  display: table;
}