/*
Theme Name: SAYWELLS 2014
Theme URI: 
Author: Ash at Practice Advantage
Author URI: http://practiceadvantage.com.au/
Description: 
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/** MAIN **/
body{
    padding:0; margin:0;
    color:#464646;
    font-family: "open-sans", sans-serif;
    background-color: #fff;}

.main, .wrap, footer, footer span, header, section, .cols, .services, .contact{
    overflow:hidden;}

/** COLORS **/
/**White Font**/          .services h2, .services h4, .services p, .services h4 a, footer li a, footer span p, footer span p a, nav li a, #login h5 a{color:#fff;}
/**Blue Font**/           h6, h6 a{color:#004964;}
/**D Grey Back**/         .services, #box{background: #595959;}
/**L Blue Back**/         footer{background: #98b3c4;}
/**D Blue Back**/         footer span, nav{background: #004964;}


/** TYPOGRAPHY **/
h1, h2, h3, h4, h5, p{margin:10px; padding:10px;}
h1{ 
    font-size:30pt;
    font-weight: normal;
    text-transform: uppercase;}
h2{
    font-size:30pt;
    font-weight: normal;
    text-transform: uppercase;}
h3{ font-size:18pt;}
h4{ font-size:16pt;}
h5{ font-size:16pt;}
h6{ font-size:12pt;
    padding:10px;
    margin:0;
    top:5px;
    right:5px;
    position: absolute;}
h6 a{
    transition: 0.25s linear;
    border-radius: 5px;
    padding:7px;}
h6:hover a{
    background:#004964;
    color:#fff;}
p{  
    font-size:12pt;
    line-height: 20pt;}
a{
    color:#98b3c4;
    text-decoration:none;}
.main ul li{
    list-style:none;
    font-size:12pt;
    padding:8px;}
#login{
    height:59px;
    position: absolute;
    top:0px;
    transition: .25s linear;
    margin-left:155px;
    width:59px;}
#login img{
    margin:0;
    padding:0;}
#login h3{
    width:100%;
    padding:10px 0;
    font-weight: normal;
    margin:0;
    font-size:10pt;
    color:#fff;
    background:url(img/login-back.png);
    text-transform: uppercase;}
#box{
    position: fixed;
    left:0;
    z-index: 2000;
    width:70px;
    height:200px;
    top:300px;
    display:block;
    box-shadow: 1px 1px 6px #ccc;
    transition: 0.5s ease-in-out;}
#box:hover{
    background:#004964;}
#box img{
    padding:10px;}

/** NAVIGATION **/
nav *{
    transition: .5s linear;}
nav{
    width:100%;
    height:50px;
    padding:0; margin:0;}
nav ul{
    width:1200px;
    margin:0 auto;
    text-align: center;
    padding:0;}
nav ul li{
    list-style: none;
    padding:17px 5px;
    text-transform: capitalize;
    margin:0;
    position: relative;
    font-size: 10pt;
    display:inline-block;
    text-align: center;}

nav ul li:hover{background:#98b3c4;}
nav ul li.current-menu-item{background:#98b3c4;}

/** DROP DOWN **/
li ul{
        display: none;
        padding:0;
        background:#98b3c4;
        position: absolute;
        top:50px; 
        left:0;
        width:auto;}
li:hover ul{
        display:table;}
li ul li{
    width:160px;
    border-top:1px solid #fff;
    padding:15px;
    text-transform: capitalize;
    text-align: left;
    margin:0;}
li ul li:hover{
    background: #004964; }
/** HEADER **/
header{
    width:100%;
    height:170px;
    text-align: center;
    margin:0; padding:0;}
header img{
    margin-top:20px;
    padding:35px 15px;}
header .main-logo{
    margin-top:0;
    max-width:500px;}
section{
    background:#ccc;
    background-size:cover;        
    width:100%;
    min-height: 450px;}
.left, .right{
    width:20%;
    float:left;
    min-height: 450px;}
.mid{
    width:100%;
    background:url(img/banner2.png);
    min-height: 500px;
    float:left;
    background-repeat: no-repeat;
    background-size: cover;}
.left{
    background:url(img/b-left.png) repeat-x bottom;}
.right{
    background:url(img/b-right.png) repeat-x bottom;}
/** CONTENT **/
.main{
    width:100%;
    margin:0; padding:30px 0;}
.main input, .main label{
    width:auto;}
.wrap{
    width:1000px;
    margin:0 auto;
    padding:50px 0;}
.services h2{
    text-align: center;}
.services h4{
    font-size:14pt;
    text-transform: uppercase;}
.services img{
    float:left;
    border-radius: 50%;
    width:60px;
    margin:8px;
    padding:9px;
    height:60px;
    border:2px solid #fff;}
.services .col:hover{
    background:#646464}
.services .col:hover img{
    background:#545454}
.services p{
    line-height: 16pt;
    font-size: 11pt;
    text-align: justify;}
.services .col{
    padding:0;
    transition: 0.5s ease-in-out;
    border-radius: 5%;
    transition-property: background;
    position: relative;
    height:400px;
    margin:1.5%;
    text-align: center;
    width:30%;
    float:left;}
.services button{
    position: absolute;
    bottom:0;
    transition: .5s ease-in-out;
    font-weight: bold;
    border:2px solid #fff;
    background:none;
    color:#fff;}
.services button:hover{
    background:#ccc;
    color:#595959;}
.contact .col{
    float:left;
    width:30%;
    text-align: center;
    padding:0;
    margin:1.5%;}


.cert-logos img{margin:1em;}


/** FOOTER **/
footer{
    width:100%;
    text-align: center;
    margin:0; padding:0;}
footer img{
    margin:0 auto;
    padding:25px 0;
    display: block;
    clear: both;}
footer ul{
    margin:0 auto;
    padding:15px 0;
    text-align: center;
    width:100%;
    display:block;}
footer ul li{
    padding:10px;
    text-align: center;
    list-style: none;
    border-bottom:1px solid #98b3c4;
    display: inline-block;}
footer li:hover, footer li.current-menu-item{
    border-bottom: 1px solid #fff;}
footer span{
    width:99%;
    display:block;
    padding:.5%;
    margin:0;}
    footer span p{
        padding:10px;
        float:left;
        margin:0;}    
    footer span img{
        float:right;
        clear: none;
        padding:10px;
        margin:0;}
footer ul li ul, footer ul li:hover ul{
    display:none;}    

/** BUTTONS **/
button{
    border:0;
    padding:10px;
    margin:10px;
    text-transform: uppercase;
    cursor: pointer;}

/** SPECIAL **/
#googleMap{
    width:100%;
    min-height: 500px;}
#googleMap p{
    text-align: center;
    line-height: 12pt;}
/** MEDIA QUERIES **/

@media only screen and (max-width : 1199px) {

.wrap, nav, nav ul{
    width:100%;}
nav ul li{
    font-size:9pt;
    padding:18px 5px;}
nav{
    height:100px;}
#login{
    margin-left:15px;}        
h6{
    font-size:10pt;}    
.left, .right{
    display:none;}
.mid{
    width:100%;}    
.services .col{
    width:45%;
    height:340px;}    
}    

@media only screen and (max-width : 759px) {
.services .col{
    width:80%;
    border-radius: 15px;
    height:300px;
    margin:5% 10%;}
.contact .col p{
    font-size:10pt;}

}