/*-------------------
---- Main Styles ----
---------------------*/

body{
    position:relative;
    font-family:MetaWeb-Book,sans-serif;
    font-size:15px;
    color:#4F453E;
    background:#ABC7DD;
    overflow-y:scroll;
}

a:focus{
    outline:none;
}

img.img-responsive {
    margin:0 auto 20px;
}

.margin-bottom{
    margin-bottom:30px !important;
}

.abstand {
	display: block; clear: both; width: 100%; height: 30px;
}


img.brown-border{
    border:4px solid #4F453E;
}

/*-------------------
---- Text Format ----
---------------------*/

#main-content h1{
    font-size:21px;
    font-weight:bold;
}

#main-content h2{
    font-size:18px;
    font-weight:bold;
}

#main-content h3{
    font-size:21px;
}

#main-content h1:before, 
#main-content h2:before, 
#main-content .square:before {
    display:inline-block;
    content:'';
    margin:-2px 5px 0 0;
    width:14px;
    height:14px;
    background:#4F453E;
    vertical-align:middle;
}

#main-content .text-white{
    color:#fff;
}

#main-content .text-italic{
    font-style:italic;
}

#main-content .bq-style{
    color:#fff;
}

#main-content .bq-style:before{
    content:'\00ab';
    margin-right:2px;
}

#main-content .bq-style:after{
    content:'\00bb';
    margin-left:2px;
}

#main-content ul{
    list-style:none;
    padding-left:18px;
    margin-left: 20px;
}

#main-content ul li{
    position:relative;
    margin-bottom:10px;
}

#main-content ul li:before{
    display:block;
    position:absolute;
    top:6px;
    left:-18px;
    content:'';
    margin:-2px 5px 0 0;
    width:11px;
    height:11px;
    background:#4F453E;
    vertical-align:middle;
}

/*-------------------
--- Layout Styles ---
---------------------*/

#left-side{
    width:50%;
    background:#abc7dd;
}

#right-side{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    padding-top:162px;
    width:50%;
    z-index:1000;
    -webkit-transition:left .5s ease-out;
    transition:left .5s ease-out;
}

#right-side.go-right{
    left:50%;
    -webkit-transition:left .5s ease-out .2s;
    transition:left .5s ease-out .2s;
}

#right-side + #blue-bar{
    position:fixed;
    top:0;
    bottom:0;
    left:50%;
    width:15%;
    background:rgba(50,100,150,0.4);
    -webkit-transition:width .5s ease-out .2s;
    transition:width .5s ease-out .2s;
    z-index:999;
}

#right-side.go-right + #blue-bar{
    width:50%;
    -webkit-transition:width .5s ease-out;
    transition:width .5s ease-out;
}

#background-image{
    width:50%;
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    opacity:1;
    z-index:998;
    -webkit-transition:opacity .5s ease-out;
    transition:opacity .5s ease-out;
}

#background-image.fadeOut{
    opacity:0;
}

#background-image-2{
    width:50%;
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    z-index:997;
}

.container{
    width:690px;
}

.site-title{
    display:block;
    position:fixed;
    width:50%;
    padding-top:60px;
    padding-bottom:50px;
    background:#ABC7DD;
    z-index:10000;
}

.site-title h1{
    position:relative;
    margin:0;
    font-size:28px;
    font-weight:bold;
    text-transform:uppercase;
}

.site-title h1:before{
    position:absolute;
    display:block;
    content:'';
    width:20px;
    height:20px;
    top:4px;
    left:-35px;
    background:#4F453E;
}

.site-title h3{
    margin:0;
    font-size:18px;
    font-weight:100;
    text-transform:uppercase;
}

#home{
    height:600px;
}

/*-------------------
-- Content Styles ---
---------------------*/

#main-content{
    margin-top:300px;
    opacity:0;
    height:0;
    overflow:hidden;
    -webkit-transition:opacity .3s ease-out;
    transition:opacity .3s ease-out;
}

#main-content.fadeIn{
    opacity:1;
    height:auto;
    overflow:auto;
    -webkit-transition:opacity .3s ease-out 0.7s;
    transition:opacity .3s ease-out 0.7s;
}

#main-content h2{
    margin:0;
    margin-bottom:10px;
    font-size:18px;
    font-weight:bold;
}

#main-content section{
    margin-bottom:100px;
    overflow:hidden;	
}

#main-content section:last-of-type{
    margin-bottom:600px;
}

.section-title{
    text-transform:uppercase;
}

/*-------------------
---- Menu Styles ----
---------------------*/

.menu-block{
    margin:15px;
    padding:10px 15px;
    background:#4F453E;
    width:200px;
    height:200px;
    float:left;
}

.menu-title{
    margin:0 0 20px;
    font-size:18px;
    font-weight:bold;
    color:#93B8D6;
}

.menu-block ul{
    list-style:none;
    padding-left:20px;
}

.menu-block ul li{
    margin-bottom:2px;
    line-height:20px;
}

.menu-block ul li a{
    font-size:14px;
    font-weight:bold;
    letter-spacing:0.02em;
    color:#93B8D6;
    text-decoration:none;
    -webkit-transition:color .2s ease-out;
    transition:color .2s ease-out;
}
    
.menu-block ul li a:hover{
    color:#fff;
    text-decoration:none;
}    

.menu-block.transparent{
    position:relative;
    padding:0;
    background:transparent;
}

.small-block{
    margin:0;
    padding:7px 0;
    background:#4F453E;
    width:85px;
    height:85px;
    text-align:center;
    float:left;
}

.small-block + .small-block{
    margin-left:30px;
}

.small-block ul{
    padding:0;
}

.small-block ul li a{
    font-size:12px;
    font-weight:bold;
    letter-spacing:0.02em;
    color:#93B8D6;
    text-decoration:none;
    -webkit-transition:color .2s ease-out;
    transition:color .2s ease-out;
}
    
.small-block ul li a:hover{
    color:#fff;
    text-decoration:none;
} 

.go-right .menu-block ul li.active a{
    color:#fff;
}

.circle,
.circle:focus{
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#93B8D6;
    font-size:24px;
    line-height:50px;
    color:#4F453E;
    text-align:center;
    -webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;
}

.circle:hover{
    background:#4F453E;
    color:#93B8D6;
}

.circle.vcard{
    left:50%;
    margin-left:-25px;
    font-size:21px;
}

.circle.mail{
    left:auto;
    right:0;
    font-size:24px;
}

.circle.vcard .fa + .fa{
    font-size:18px;
    margin-left:2px;
}

.ctooltip{
    display:none;
    position:absolute;
    left:0;
    padding:7px 0;
    width:100%;
    font-size:15px;
    background:#93B8D6;
    color:#4F453E;
    text-align:center;
    border-radius:5px;
}

.circle.phone + .ctooltip {
    bottom:-50px;
}

.circle.mail + .ctooltip {
    bottom:-50px;
}

.circle.vcard + .ctooltip {
    bottom:65px;
}

.circle.phone + .ctooltip:after {
    display:block;
    content:'';
    position:absolute;
    width:0;
    height:0;
    top:-10px;
    left:14px;
    border:10px solid transparent;
    border-bottom-color:#93B8D6;
    border-top-width:0;
}

.circle.mail + .ctooltip:after {
    display:block;
    content:'';
    position:absolute;
    width:0;
    height:0;
    top:-10px;
    right:14px;
    border:10px solid transparent;
    border-bottom-color:#93B8D6;
    border-top-width:0;
}

.circle.vcard + .ctooltip:after {
    display:block;
    content:'';
    position:absolute;
    width:0;
    height:0;
    bottom:-10px;
    left:50%;
    margin-left:-10px;
    border:10px solid transparent;
    border-top-color:#93B8D6;
    border-bottom-width:0;
}

#right-side .container{
    position:relative;
}

#home-link{
    position:absolute;
    top:-100px;
    left:10px;
    font-size:14px;
    font-weight:bold;
    letter-spacing:0.02em;
    color:#93B8D6;
    text-decoration:none;
    opacity:0;
    padding:5px 15px;
    background:#4F453E;
    -webkit-transition:color .2s ease-out, opacity .4s ease-out;
    transition:color .2s ease-out, opacity .4s ease-out;
}

#home-link:hover{
    color:#fff;
}

.go-right #home-link{
    opacity:1;
    -webkit-transition:color .2s ease-out, opacity .4s ease-out 0.7s;
    transition:color .2s ease-out, opacity .4s ease-out 0.7s;
}

#gmap,#gmap2{
    height:350px;
    margin-bottom:20px;
}

/*-----------------
-- Media Queries --
------------------*/

@media (min-width: 1200px) and (max-width: 1399px){
    
    .container{
        width:600px;
    }
    
    .menu-block{
        margin:10px;
        width:180px;
        height:180px;
    }

    .menu-title{
        margin:0 0 10px;
        font-size:14px;
    }

    .small-block{
        width:80px;
        height:80px;
    }

    .small-block + .small-block{
        margin-left:20px;
    }

    .small-block ul li a{
        font-size:11px;
    }

    
}

@media (min-width: 991px) and (max-width: 1199px){
    
    .container{
        width:495px;
    }
    
    .menu-block{
        margin:7.5px;
        width:150px;
        height:150px;
    }

    .menu-block ul li{
        margin-bottom:0;
    }
    
    .menu-block ul li a{
        font-size:12px;
    }
    
    .menu-title{
        margin:0 0 10px;
        font-size:13px;
    }

    .small-block{
        width:67px;
        height:67px;
    }

    .small-block + .small-block{
        margin-left:15px;
    }

    .small-block ul li a{
        font-size:11px;
    }

    .circle{
        width:40px;
        height:40px;
        font-size:18px;
        line-height:40px;
    }

    .circle.vcard{
        margin-left:-20px;
        font-size:16px;
    }

    .circle.mail{
        font-size:18px;
    }

    .circle.vcard .fa + .fa{
        font-size:14px;
    }

    .ctooltip{
        font-size:14px;
    }

    .circle.vcard + .ctooltip {
        bottom:55px;
    }

    .circle.phone + .ctooltip:after {
        left:10px;
    }

    .circle.mail + .ctooltip:after {
        right:10px;
    }

    #gmap{
        height:300px;
    }
    
}

@media (min-width: 768px) and (max-width: 990px){
    
    .container{
        width:350px;
    }
    
    .menu-block{
        margin:7.5px;
        width:160px;
        height:160px;
    }

    .menu-title{
        margin:0 0 10px;
        font-size:14px;
    }

    .menu-block ul li a{
        font-size:12px;
    }
    
    .small-block{
        width:72px;
        height:72px;
    }

    .small-block + .small-block{
        margin-left:16px;
    }

    .small-block ul li a{
        font-size:11px;
    }

    .circle{
        width:40px;
        height:40px;
        font-size:18px;
        line-height:40px;
    }

    .circle.vcard{
        margin-left:-20px;
        font-size:16px;
    }

    .circle.mail{
        font-size:18px;
    }

    .circle.vcard .fa + .fa{
        font-size:14px;
    }

    .ctooltip{
        font-size:14px;
    }

    .circle.vcard + .ctooltip {
        bottom:55px;
    }

    .circle.phone + .ctooltip:after {
        left:10px;
    }

    .circle.mail + .ctooltip:after {
        right:10px;
    }

    #gmap{
        height:250px;
    }
}

@media (min-width: 768px) {
    
    #mobile-nav,
    #menu-btn{
        display:none !important;
    }
}

@media (max-width: 767px) {
    
    body{
        font-size:13px;
    }
    
    #right-side,
    #blue-bar,
    #background-image,
    #background-image-2{
        display:none !important;
    }
    
    #left-side,
    .container{
        width:100%;
    }
    
    #main-content{
        margin-top:100px;
        opacity:1 !important;
        height:auto !important;
        overflow: auto !important;
    }
    
    #main-content section,
    #main-content section:last-of-type{
        margin-bottom:40px;
    }
    
    .site-title{
        width:100%;
        padding-top:10px;
        padding-bottom:10px;
        color:#93B8D6;
        background:#4F453E;
    }

    .site-title h1{
        font-size:21px;
    }


    .site-title h1:before{
        display:none;
    }

    .site-title h3{
        font-size:14px;
    }
    
    /*Mobile menu*/
    
    #menu-btn{
        display:block;
        position:absolute;
        top:10px;
        right:20px;
        font-size:32px;
        color:#93B8D6;
        cursor:pointer;
    }
    
    #menu-btn:hover{
        color:#fff;
    }
    
    #mobile-nav{
        display:none;
    }
    
    #mobile-nav ul{
        margin:10px 0;
        padding:15px 0 0 15px;
        list-style:none;
        border-top:1px solid #93B8D6;
        max-height:240px;
        overflow:scroll;
    }
    
    #mobile-nav ul li a{
        display:block;
        margin:2px 0;
        padding:2px;
        font-weight:bold;
        color:#93B8D6;
        text-decoration:none;
        background:transparent;
    }
    
    #mobile-nav ul li.active a,
    #mobile-nav ul li a:hover{
        color:#fff;
        background:transparent;
    }
    
    #main-content ul li:before{
        top:5px;
        width:10px;
        height:10px;
    }
    
    #gmap{
        height:200px;
    }
}

@media (max-width: 479px) {
	
	.site-title h3{
	    font-size:12px;
	}
	
}
/*----------------
----- Fonts ------
------------------*/
@font-face {
  font-family: MetaWeb-Book;
  src: url("fonts/MetaWeb-Book.eot");
  src: url("fonts/MetaWeb-Book.woff") format("woff");
}

@font-face {
  font-family: MetaScWeb-Book;
  src: url("fonts/MetaScWeb-Book.eot");
  src: url("fonts/MetaScWeb-Book.woff") format("woff");
}