@font-face{font-family:EBGaramond;src:url(../Fonts/EBGaramond-VariableFont_wght.ttf) format("truetype");}
@font-face{font-family:OpenSans;src:url(../Fonts/OpenSans-VariableFont_wdthwght.ttf) format("truetype");}

#content-wrapper{
    max-width: 900px;
    padding-top: 15px;
    min-height: 400px;
    padding-bottom: 50px;
}

body{
    font-family: 'EBGaramond', serif;
    font-size: 1.9rem;
    letter-spacing: 0.15em;
}

.ce-bodytext{
    margin: 7px 7px 21px 7px;
}

.headerlogo{
    width: 35rem;
    height: auto;
    margin: 80px auto 20px auto;
    transition: ease-in-out 0.5s;
}

.smalllogo{
    width: 10rem;
    position: fixed;
    top: 5px;
    margin: 0 0 0 20px;
    z-index:2000;
}

@media screen and (max-width: 768px){
    #content-wrapper{
        margin-top: 80px;
    }
    .headerlogo{
        top: 5px;
        width: 10rem;
        height: 50px;
        position: fixed;
        margin: 0 0 0 20px;
        z-index:2000;
        transition: ease-in-out 0.5s;
    }
}

.headerlogo .roxanne_logo, .smalllogo .roxanne_logo {
    fill: #8d0909;
    -webkit-filter: drop-shadow( 2px 2px 1px #0A0A0A );
            filter: drop-shadow( 2px 2px 1px #0A0A0A );
}
#roxanne_logo{
    overflow: visible;
}

h1, h2, h3{
    font-family: 'OpenSans', sans-serif;
    color: #FFF;
    text-shadow: 2px 2px 2px #0A0A0A;
}

h2,h3{
    text-align: center;
}

.navbar-inverse, .footer, .frame-layout-10{
    background-color: rgba(255,255,255,0.8);
    border-color: transparent;
}
.frame-layout-10{
    padding-top: 10px;
    border-radius: 3px;
    margin-bottom: 20px;
    height: 100%;
}

.frame-layout-10 h1, .frame-layout-10 h2, .frame-layout-10 h3{
    color: #000;
}

.row{
    margin-bottom: 20px;
}

.whitefull{
    background-color: rgba(255,255,255,1.0);
}

.navbar-collapse, .navbar-header{
    width: 100%;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, a{
    color: #8d0909;
    background-color: transparent;
}
a:hover, .navbar-inverse .navbar-nav > li > a:hover{
    color: #0A0A0A;
}

@media screen and (min-width: 768px){
    .navbar-nav {
        float:none;
        margin:0 auto;
        display: block;
        text-align: center;
    }

    .navbar-nav > li {
        float: none;
        display: inline-block;
    }
}

@media screen and (max-width: 768px){
    .navbar-inverse .navbar-toggle .icon-bar{
        background-color: #8d0909;
    }
    .navbar-inverse .navbar-toggle:hover .icon-bar{
        background-color: #FFFFFF;
    }
    .navbar-inverse .navbar-toggle:hover{
        background-color: #8d0909;
    }
    .navbar-collapse, .navbar-header{
        width: auto;
    }
}

footer.footer{
    bottom: 0;
    position: fixed;
    width: 100%;
}

.footer .nav > li{
    float: left;
}

.footer .copyright{
    margin-top: 10px;
}

@media screen and (max-width:768px){
    .footer{
        font-size: 1rem;
    }
}

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

.olLayerDiv{
    position: relative !IMPORTANT;
}