/************************************************************************************
Fonts
*************************************************************************************/

@font-face {
    font-family: 'Crimson Semibold';
    src: url('../fonts/crimsontext-semibolditalic-webfont.eot');
    src: url('../fonts/crimsontext-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/crimsontext-semibolditalic-webfont.woff2') format('woff2'),
    url('../fonts/crimsontext-semibolditalic-webfont.woff') format('woff'),
    url('../fonts/crimsontext-semibolditalic-webfont.ttf') format('truetype'),
    url('../fonts/crimsontext-semibolditalic-webfont.svg#crimson_textsemibolditalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Crimson Semibold';
    src: url('../fonts/crimsontext-semibold-webfont.eot');
    src: url('../fonts/crimsontext-semibold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/crimsontext-semibold-webfont.woff2') format('woff2'),
    url('../fonts/crimsontext-semibold-webfont.woff') format('woff'),
    url('../fonts/crimsontext-semibold-webfont.ttf') format('truetype'),
    url('../fonts/crimsontext-semibold-webfont.svg#crimson_textsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Crimson Bold';
    src: url('../fonts/crimsontext-bold-webfont.eot');
    src: url('../fonts/crimsontext-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/crimsontext-bold-webfont.woff2') format('woff2'),
    url('../fonts/crimsontext-bold-webfont.woff') format('woff'),
    url('../fonts/crimsontext-bold-webfont.ttf') format('truetype'),
    url('../fonts/crimsontext-bold-webfont.svg#crimson_textbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Crimson Bold';
    src: url('../fonts/crimsontext-bolditalic-webfont.eot');
    src: url('../fonts/crimsontext-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/crimsontext-bolditalic-webfont.woff2') format('woff2'),
    url('../fonts/crimsontext-bolditalic-webfont.woff') format('woff'),
    url('../fonts/crimsontext-bolditalic-webfont.ttf') format('truetype'),
    url('../fonts/crimsontext-bolditalic-webfont.svg#crimson_textbolditalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Crimson Regular';
    src: url('../fonts/crimsontext-regular-webfont.eot');
    src: url('../fonts/crimsontext-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/crimsontext-regular-webfont.woff2') format('woff2'),
    url('../fonts/crimsontext-regular-webfont.woff') format('woff'),
    url('../fonts/crimsontext-regular-webfont.ttf') format('truetype'),
    url('../fonts/crimsontext-regular-webfont.svg#crimson_textroman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Crimson Regular';
    src: url('../fonts/crimsontext-italic-webfont.eot');
    src: url('../fonts/crimsontext-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/crimsontext-italic-webfont.woff2') format('woff2'),
    url('../fonts/crimsontext-italic-webfont.woff') format('woff'),
    url('../fonts/crimsontext-italic-webfont.ttf') format('truetype'),
    url('../fonts/crimsontext-italic-webfont.svg#crimson_textitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

/************************************************************************************
Main Elements
*************************************************************************************/

html{
    font-size: 100%;
}

body {
    font-family: 'Crimson Regular', 'Open Sans', sans-serif;
    font-size: 11pt;
    color: #696969;
    background-color: rgb(244, 241, 234);
    background-image: url("../img/background.png");
    /*background-size: 100% auto;*/
    background-position: left top;
    background-repeat: no-repeat;
}

#pagewrap {
    width: 868px;
    margin: 145px auto 0px;
}
header {
    height: auto;
    padding: 25px;
}
header > img {
    width: 100%;
    height: auto;
}
nav {
    padding: 25px;
}
main {
    padding: 25px;
    min-height: 465px;
}

footer {
    padding: 25px;
    height: 66px;
    text-align: right;
    background-image: url("../img/footer_bg.png");
}

footer a,
footer a:link,
footer a:visited,
footer a:focus,
footer a:hover {
    color: #ffffff;
}

div#logo-group {
    margin-top: -86px;
}

img#inscription {
    position: relative;
    float: left;
    bottom: -20px;
    left: -65px;
    width: 526px;
    height: 83px;
}

img#logo {
    float: right;
    margin-bottom: 17px;
    width: 188px;
    height: 69px;
}

header {
    margin-top: 0px;
}

header, nav {
    margin-bottom: 25px;
}

main {
    margin-bottom: 0px;
}

header, main, nav, footer {
    background-color: white;
}

div.main-topbar {
    margin-bottom: 10px;
}

nav > ul {
    width: 100%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

nav > ul li {
    display: inline;
    width: auto;
    padding: 0px 15px;
}

nav > ul a,
nav > ul a:link,
nav > ul a:visited,
nav > ul a:focus {
    font-family: "Crimson Semibold";
    display: inline-block;
    color: #696969;
    border-bottom: 2px solid #857f6f;
    text-decoration: none;
}

nav > ul a:hover,
nav > ul a.active {
    color: #696969;
    border-bottom: 2px solid #f3ce7b;
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    font-family: "Crimson Bold";
    color: #857f6f;
    margin-top: 0px;
}

h1 {
    font-size: 1.1em;
}

h2, h3, h4, h5 {
    font-size: 1em;
}

b {
    font-family: "Crimson Bold";
    font-weight: normal;
}

.carousel-indicators {
    bottom: -11px !important;
}

#disclaimer {
    padding: 4px;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #857f6f;
}

#map {
    width: 100%;
    height: 500px;
    background-color: #f8f8f8;
    background-image: url("../img/loading.gif");
    background-repeat: no-repeat;
    background-position: center center;
}

/************************************************************************************
Main Topbar
*************************************************************************************/

a.back,
a.back:link,
a.back:visited,
a.back:focus,
a.back:hover {
    color: #555;
    font-size: 0.8em;
    text-decoration: none;
}

a.font-resize,
a.font-resize:link,
a.font-resize:visited,
a.font-resize:focus,
a.font-resize:hover {
    color: #656565;
    text-decoration: none;
}

a.increase-font {
    font-size: 1.2em;
}

a.decrease-font {
    font-size: 0.8em;
}

.font-oneAndHalf {
    font-size: 1.5em;
}

/************************************************************************************
Subnav
*************************************************************************************/

div.subnav a,
div.subnav a:link,
div.subnav a:visited,
div.subnav a:focus,
div.subnav a:hover {
    text-decoration: none;
    border: none;
}
div.subnav > a > img {
    width: 100%;
}
div.subnav > div.subnav-label {
    text-align:center;
    border-bottom: 2px solid #857f6f;
    margin-top: -0.4em;
    margin-bottom: 1em;
}
div.subnav > div.subnav-label span {
    display: inline-block;
    position: relative;
    top: 0.75em;
    font-family: "Crimson Semibold";
    font-size: 1em;
    background: #fff;
    color: #857f6f;
    padding: 0px 10px;
}

/************************************************************************************
Thumbnails
*************************************************************************************/

div.thumb-wrapper {
    margin-bottom: 10px;
}

div.thumb-wrapper:last-of-type {
    margin-bottom: 5px;
}

span.thumb-label {
    font-size: 0.75em;
}

div.thumb-wrapper img.thumb {
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

div.thumb-wrapper img.show-fullscreen {
    position: relative;
    float: right;
    bottom: 25px;
    right: 8px;
    cursor: zoom-in;
}

/************************************************************************************
Lightbox
*************************************************************************************/

div#lightbox {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-image: url("../img/lightbox_bg.png");
    text-align: center;
    display: none;
    z-index: 999;
}

div#lightbox div.image-wrapper {
    position: relative;
    max-width: 95%;
    margin: 2%;
    padding: 10px;
    display: inline-block;
    background-color: white;
    text-align: left;
}

div#lightbox img.fullscreen {
    height: auto;
    margin-bottom: 10px;
}

div#lightbox span.lightbox-label {
    display: inline-block;
}

div#lightbox div.prev-image {
    position: absolute;
    bottom: 80px;
    left: 10px;
    background-color: #ffffff;
    cursor: pointer;
    padding: 4px 12px 2px 0px;
}

div#lightbox div.next-image {
    position: absolute;
    bottom: 80px;
    right: 10px;
    background-color: #ffffff;
    cursor: pointer;
    padding: 4px 0px 2px 12px;
}

div#lightbox div.close-fullscreen {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: zoom-out;
}

/************************************************************************************
Tooltip
*************************************************************************************/

.tooltip-inner {
    background-color: #979082;
    filter: alpha(opacity=95);
    opacity: .95;
    font-size: 1.1em;
}

.tooltip-arrow {
    filter: alpha(opacity=95);
    opacity: .95;
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    border-top-color: #979082;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #979082;
}
.tooltip.left .tooltip-arrow {
    border-left-color: #979082;
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #979082;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/* for 868px or less */
@media screen and (max-width: 868px) {

    #pagewrap {
        width: 100%;
    }

}

/* for 870px or less
@media screen and (max-width: 870px) {

    main {
        width: auto;
    }

}*/

/* for 575px or less
@media screen and (max-width: 575px) {

    img#inscription {
        width: 100% !important;
        height: auto !important;
    }
}*/

/* for 480px or less
@media screen and (max-width: 480px) {

    header {
        height: auto;
    }
    h1 {
        font-size: 2em;
    }

}*/