.body
{
    margin: 0 auto;
    width:70%;
    clear: both;
}

body
{
    position:relative;
 /*background-image:url('3.jpg');*/
    background-repeat: no-repeat;
    
    color: #000305;
    font-size: 87.5%;/*base font size is 14px*/
    font-family: sans-serif;
    line-height: 1.5;
    text-align: left;
   
    
}
a img {border-color: #859DB1; border-width: 1px;    }
header {height:45vh; text-align: center;}
.mainHeaderImage
{
 max-width: 100%;
    max-height:100%;
}

.mainContent
{
    width:100%;
    margin-top: 1%;
    position: relative;
}


.contentImage
{
     width: 70%;
    margin-left: 10%;
    margin-bottom: 0;
}

.brands
{
    text-align: center;
    white-space: nowrap;
    position: absolute;
    z-index: 1;
    margin-top: -2%;
    padding-bottom: 5%;
    left:0;
right:0;
}
.hover-tile
{
    -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;  -ms-transition: all 0.2s linear; transition: all 0.2s all;
    margin-right: 4%;
    padding: 8px;
    border:1px solid transparent;
}

.hover-tile:hover
{
   
    border-color: #859DB1;    
}

.hrStyle
{
 display: none;
}

@media only screen and (max-width:767px)
    {
     
        .body
        {   
            width:90%;
            background-repeat: repeat-y;
        }
        
        .mainContent
        {
            width:90%;
            margin-top: 5%;
            position: relative;
        }
        .contentImage
        {
            width:90%;
            margin-left:5%;
            margin-bottom: 0;
        }
        .brands
        {
            width:auto;
          position:static;
            margin:0;
               text-align: center;
       
         margin-top:0.5em;
        }
        .brands > span {display: block}
        
        .brands a {display: inline-block;
           
         
        }
        .brands img {max-width:70px; margin:0;}
        
        .cementBay, .wingAree, .winTrans
        {
            
           margin-left: 12%;
            margin-bottom: -15%;
           
        }
        
        
        }

@media only screen and (min-width:768px) and (max-width:1200px)
    {
        .mainHeader {     text-align: center;}
        .mainHeaderImage
            {
           
             width: 90%;   
            }

        .mainContent
        {
            width:90%;            
            position: relative;
        }
        .contentImage
        {
            width:80%;
            margin-left:10%;
            margin-bottom: 0;
        
        }
        
        .brands
        {
            width:auto;
            padding: 5%;  
            position: relative;
        }
        .brands span {width:33%; float: left;}
        .brands img {max-width:60%;}
        
        .cementBay, .wingAree, .winTrans
        {
            margin-bottom: 3%;
         ;
        }
        
        .cementBay
        {
            margin-left:10%;   
        }
    
}