/* notes:
remove fixed widths
change .nav
change .wrapper
add .wrapper everywhere
remove .wrapper from .topWrapper
change .blocks and add .cols in home
*/

/* basic */
img{
    max-width:100%;
}
.transition{
    -webkit-transition: all ease-in-out .25s;
    transition: all ease-in-out .25s;
}

/* responsive structure */
.wrapper{
    display:block;
    position:relative;
    padding:0 30px;
    width:100%;
    float:left;
    clear:both;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.maxContent{
    display:block;
    margin:auto;
    width:100%;
    max-width:1000px;
}
.cols{
   display:block;
   position:relative;
   margin-left:-15px; 
   margin-right:-15px;
}
.cols-narrow{
   display:block;
   position:relative;
   margin-left:-5px; 
   margin-right:-5px;
}
.col{
    display:block;
    position:relative;
    float:left;
    padding-left:15px;
    padding-right:15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.col-narrow{
    padding-left:5px;
    padding-right:5px;
}
.col1{
    text-align:justify;
    width:100%;
}
.col1 .item em{
    font-family: 'Open Sans Condensed',Helvetica,Arial,Sans-serif;
    font-size:20px;
    font-style:normal;
}
.col2,col2-i{
    text-align:justify;
    width:50%;
    margin-bottom:20px;
}
.col3{
    width:33.33%;
    margin-bottom:20px;
}
.col3 .img{
    width:25%;
    margin-left:10px;
    margin-right:10px;
}
.col3 .item{
    min-height:150px;
}
.col3 .item p{
    text-align:left;
}
.col3-2{
    width:65.67%;
}
.col3-2 h1,.col3-2 h2{
    margin-bottom:0;
}
.col3-i{
    width:33.333%;
}
.col4{
    font-size:13px;
    width:25%;
    margin-bottom:20px;
}
.col5{
    font-size:13px;
    color:#444;
    text-decoration:none!important;
    width:20%;
    margin-bottom:40px;
}
.col5 p, .col5 h3{
    margin:0;
}
.col5 img{
    display:block;
}
a.col5:hover img{
    opacity:0.8;
    filter:alpha(opacity=80);
}
.col5 .img{
    background-color:#52c2ef;
    margin:0 0 20px 0;
    padding:0;
}

/* mobile menu */
.mobile-menu{
    font-size:2em!important;
    text-align:center;
    text-transform:uppercase;
    line-height:60px;
    display:block;
    position:relative;
    width:100%;
    list-style:none;
    padding:0;
    margin:50px auto 0 auto;
    border-bottom:1px solid #e3e3e3;
}
.mobile-menu li{
    display:block;
    position:relative;
    border-top:1px solid #e3e3e3;
}
.mobile-menu li a{
	background-color:#fff;
	color:#333;
        text-decoration:none;
	display:block;
	position:relative;
	padding:0 1em;      
}
.mobile-menu li a:hover{
	color:#36abe7;
	-webkit-transition:background .25s; /* For Safari 3.1 to 6.0 */
	transition:background .25s;
}
.mobile-menu li.active{
    border-top:1px solid #e3e3e3;
}
.mobile-menu li.active>a{
        color:#52c2ef;
}
.mobile-menu li ul{
    display:none;
    font-size:0.9em;
    font-weight:300;
    background-color:#fff;
    line-height:40px;
    padding-left:0;
    padding-bottom:50px;
}
.mobile-menu li ul li ul{
    display:none;
    text-transform:none;
    line-height:32px;
}
.mobile-menu li ul li ul li{
    border:0!important;
}

/* mobile dock */
.mobiledock{
    display:none;
    position:absolute;
    top:0;
    right:0;
    width:100%;
    max-width:400px;
    overflow:hidden;
    min-height:100%;
    z-index:3;
}
.mobiledock-container{
    display:block;
    position:absolute;
    right:-401px;
    top:0;
    height:auto;
    width:100%;
    margin-left:0;
    z-index:1000;
    border-left: 1px solid #e3e3e3;
}
.mobiledock-border{
    display:block;
    overflow:hidden;
    margin-left:-1px;
    border-left: 1px solid #444;
}
.mobiledock-content{
    display:block;
    position:relative;
    overflow:hidden;
    margin:30px 40px 40px 40px;
}


/* burger btn */
.burger{
    color:#333;
    font-size:1.5em;
    text-transform:uppercase;
    line-height:38px;
    display:none;
    position:absolute;
    right:20px;
    top:0;
    height:38px;
    margin:0;
    padding:20px 40px 20px 0;
    cursor:pointer;
    z-index:5;
}
.burger:hover{
    color:#888;
}
.burger strong{
    background:#fff;
    display:block;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-10px;
    width:22px;
    height:22px;
}
.burger strong span{
	background:#333;
	display:block;
        position:relative;
        float:left;
	width:100%;
	height:2px;
	margin:2px 0;
}
.burger:hover strong span{
	background:#888;
}
.burger.open strong span{
    position:absolute;
    top:9px;
    left:0;
    width:25px;
    margin:0;
}
.burger.open span.top{
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.burger.open span.middle{
    height:0;
}
.burger.open span.bottom{
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (max-width: 900px) {
    .navleft li{
        padding-right:20px!important;
    }
    .navright li{
        padding-left:20px!important;
    }
}

@media screen and (max-width: 800px) {
    .headerWrapper{
        position:relative!important;
    }
    .topWrapper{
        margin-top:0!important;
    }
    .frame a{
        height:auto!important;
        padding-bottom: 0!important;
    }
    .mobiledock,.burger{
        display:block;
    }
    .page{
        position:relative;
        z-index:4;
    }
    .mobiledock-open .page{
        border-right:1px solid #444;
        overflow:hidden;
        -ms-transform: translate(-400px,0); /* IE 9 */
        -webkit-transform: translate(-400px,0); /* Safari */
        transform: translate(-400px,0);
    }
    .mobiledock-open .mobiledock-container{
        right:0;
    }
    .mobiledock-open .burger{
        left:20px;
    }
    .nomobile{
        display:none!important;
    }
    .col2,.col3,.col3-2{
        width:100%;
    }
    .col4{
        width:50%;
    }
    .col5{
        width:33.33%;
    }
    
}
@media screen and (max-width: 480px) {
    .sliderWrapper .slider .flexslider{
        width:250%!important;
        float:right;
    }
    .sliderWrapper .slider{
        width:100%;
        overflow:hidden;
    }
    .mobiledock{
        //display:block;
    }
    .txtBlock{
        min-height:0!important;
        margin-bottom:20px;
    }
    .frame a{
        height:auto!important;
        padding-bottom:0!important;
    }
    .col4,.col3-i,.col2-i{
        width:100%!important;
    }
    .col5{
        width:50%!important;
    }
    
}