@import "fonts.css";
@import "font-size.css";
@import "header.css";
@import "breadcrumb.css";
@import "search.css";
@import "footer.css";
@import "home.css";
@import "actualite.css";
@import "exposition.css";
@import "production.css";
@import "collection.css";
@import "fam_images.css";
@import "readseelisten.css";
@import "newsfamilistere.css";
@import "season.css";
@import "pagepart/slider-page.css";
@import "pagepart/quicklink.css";
@import "pagepart/last-actu.css";
@import "pagepart/awoo-link.css";
@import "pagepart/ytvideos.css";
@import "pagepart/maplegend.css";
@import "pagepart/chrono.css";
@import "pagepart/collapse.css";
@import "pagepart/submenuitems.css";
@import "pagepart/pdfviewer.css";
@import "pagepart/googlemap.css";
@import "pagepart/panoramique.css";
@import "pagepart/summary.css";
@import "pagepart/card.css";
@import "pagepart/sliderphoto.css";
@import "pagepart/carousel_photo.css";
@import "pagepart/quickaccess.css";
@import "pagepart/expo.css";
@import "pagepart/actu.css";
@import "pagepart/list-actus.css";
@import "pagepart/spectacle.css";
@import "pagepart/socialwall.css";
@import "pagepart/socialshare.css";
@import "pagepart/marchepublic.css";
@import "style-contrast.css";
@import "style-falc.css";

html, body{
    /*max-width: 1024px;*/
    margin: auto;
    background: transparent;
}

html{
    width: 100%;
    max-width: 1170px;
    font-size: 85%;
    /*background: url("../images/home.png") no-repeat;*/
}

body{
    width: 100%;
    padding: 0 2em 1em !important;
    font-size: 1em;

}

main{
    /*padding-top: 11.5em;*/
    margin-bottom: 3.4em;
    display: inline-block;
    width: 100%;
}

.title-bloc-margin-3{
    margin-left: 25%;
    float: inherit;
}

.chapeau{
    margin: -2em 4% 3em auto;
    font-family: 'TradeGothicLTStd';
    color: #000000;
}

.row-fluid{
    display: inline-block;
    width: 100%;
}

.img_strip{
    margin: 1.5em auto;
    /*display: flex;*/
}

.img_strip figure{
    float: left;
    margin: auto 2em 2em auto;
    position: relative;
    min-height: 1px;
    min-width: 250px;
    max-width: 30%;
}

.img_strip figure img{
    width: 100%;
}

figure{
    /*text-align: center;*/
    position: relative;
    margin: 1.25rem auto;
    display: inline-block;
}

.image-pp{
    margin-bottom: 3em;
    max-height: 250px;
}

.image-pp img{
    max-height: 250px;
}

.image-pp.no-max-width, .image-pp.no-max-width img{
    max-height: inherit;
}

.span3{
    padding-top: 0.1em;
    visibility: hidden;
    padding-left: 0;
}

.span3 .image-pp{
    margin-top: 0.25em;
}

.develop-item{
    /*float: right;*/
    border: none;
    font-family: 'TradeGothicLTStd-Bold';
    font-size: 2.5em;
    background-color: white;
    color: #727272;
    margin: 0.5em 0.5em 0.5em auto;
    display: block;
}

.develop-item:focus, .develop-item:active, .develop-item:hover{
    color: #ff8f00;
}

figure, img{
    max-width: 100%;
    /*max-height: 250px;*/
}

figure figcaption{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.75);
    text-align: left;
    opacity: 0;
}

@media handheld {
    figure figcaption{
        opacity: 1;
    }
}

figure:hover figcaption, figure:focus figcaption, figure:active figcaption{
    opacity: 1;
}

figure figcaption p{
    color: black;
    margin: 0 0 0 0.5em;
}

.span12, .span2{
    padding: 0;
}

.with-margin-right{
    padding-right: 4%;
}

footer{
    display: inline-block;
    width: 100%;
    border-top: 1px solid #727272;
}

.title_page{
    text-transform: uppercase;
    color: #ff8f00;
    font-family: 'TradeGothicLTStd-Bold';
    font-size: 3.4em;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1;
}

.title-no-margin{
    margin-top: 0;
}

h2,h3,h4,h5,h6,ol{
    font-family: 'TradeGothicLTStd-Bd2';
    margin-bottom: 0.5em;
    color: #000000;
    margin-top: 0;
}

p, td{
    font-family: 'TradeGothicLTStd';
    margin-bottom: 1.25em;
}

a:not([href]):focus, a:not([href]):hover{
    text-decoration: none;
}

ol, ul{
    margin-bottom: 1.25em;
}

.one-column-with-margin{
    margin: auto;
    display: table;
    max-width: 55%;
}

[aria-hidden='true'] { display: none; }
[aria-hidden='false'] { display:block ; }

.go-to-main{
    z-index: 50;
    clip: inherit;
}

.go-to-main:active, .go-to-main:focus{
    color: #23527c;
    text-decoration: underline;
    top: 0.5em;
}

.sr-only-focusable:active,.sr-only-focusable:focus{
    position:absolute;
    z-index:100000;
}

.view_image_body
{
    position: fixed;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    opacity: 1;
    z-index: 2000;
    display: inline-block;
}

.view_image
{
    height: 100%;
    width: 100%;
    top: 0;
    left:0;
    position: fixed;
    cursor: zoom-out;
    z-index: 2000;
    display: inline-block;
}

.view_image_img
{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 95%;
    max-width: 95%;
    cursor: zoom-out;
    display: inline-block;
}
.video-pp{
    margin-bottom: 1em;
}

.video-pp .caption{
    font-family: 'TradeGothicLTStd';
    font-size: 1em;
    color: black;
}

p.add_edit_info{
    color: #c7c7c7;
    margin-top: 60px;
}

.date-online-pp p.add_edit_info{
    font-size: 1.1em;
}

.pagination_style {
    text-align: center;
}

.pagination_style ul {
    padding: initial;
    list-style: initial;
    border-radius: initial;
}

.pagination_style ul li {
    float: left;
    color: #EECC00;
    font-size: 14px;
    line-height: 29px;
    font-family: "TradeGothicLTStd-Bold";
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

.pagination_style .page-item .page-link {
    display: inline-block;
    line-height: 29px;
    color: #727272;
    padding: 0 5px;
    transition: all ease 0.3s;
    background: none;
    border: none;
    font-family: 'TradeGothicLTStd-Bold';
}

.pagination_style .page-item.active .page-link{
    color: #ff8f00;
}

.pagination_style .page-item.prev .page-link, .pagination_style .page-item.next .page-link {
    width: 29px;
    height: 29px;
    background-color: #ff8f00;
    border-radius: 50%;
    padding: 0;
    text-align: center;
}

.pagination_style .page-item.prev .page-link span, .pagination_style .page-item.next .page-link span {
    color: white;
    font-size: 24px;
    width: 29px;
    position: relative;
    display: inline-block;
    height: 29px;
}

.pagination_style .page-item.prev .page-link span i{
    letter-spacing: 2px;
}

.pagination_style .page-item.next .page-link span i{
    letter-spacing: -2px;
}

.page-link:not(:disabled):not(.disabled){
    cursor: pointer;
}


.pagination_style .page-item::after {
    content: "•";
    height: 29px;
    line-height: 29px;
}

.pagination_style .page-item.prev:after, .pagination_style .page-item.next:after, .pagination_style .page-item:nth-last-child(2):after {
    content: "";
}

@media (min-width: 768px){
    .pagination_style {
        margin-top: 22px;
        margin-right: 11px;
        margin-left: 11px;
    }

    .pagination_style ul li {
        font-size: 17px;
    }

    .pagination_style .page-item .page-link {
        line-height: 34px;
    }

    .pagination_style .page-item.prev .page-link, .pagination_style .page-item.next .page-link {
        width: 34px;
        height: 34px;
        margin: 0 10px;
        line-height: 32px;
    }

    .pagination_style .page-item.prev .page-link span, .pagination_style .page-item.next .page-link span {
        width: 34px;
        height: 34px;
        font-size: 30px;
    }

    .pagination_style .page-item::after {
        height: 34px;
        line-height: 34px;
    }
}

@media screen and (max-width: 768px){
    html{
        font-size: 75%;
    }

    main{
        margin-top: 165px !important;
    }

    main.main-falc{
        margin-top: 50px !important;
    }

    .span3{
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }

    .span3 > * {
        max-width: 48%;
    }

    .span3 > *:nth-child(2n) {
        margin-left: 1%;
    }

    .span6{
        width: 100%;
        display: inline-block;
    }

    .span2{
        width: 100%;
        display: inline-block;
    }

    .span9{
        width: 100%;
        display: inline-block;
        padding: 0;
    }

    .with-margin-right{
        padding-right: 2%;
    }
}

@media screen and (max-width: 480px){
    html{
        font-size: 70%;
    }

    body{
        padding: 0 0.5em;
    }

    main{
        margin-top: 160px !important;
    }

    .with-margin-right{
        padding-right: 0;
    }
}