/* RESPONSIVE-------------------*/
@media (max-width: 1700px) {

    .actu .titre {
        font-size: 1.7em;
    }

    #slider-gp .slide-gp,
    #slider-pub .slide-pub {
        min-width: 28%;
    }

    #slider-gp a {
        height: 40vw;
    }

    .glisse-gp,
    .glisse-pub {
        transform: translateX(-28%);
    }

    #droite-gp,
    #gauche-gp {
        bottom: calc(40vw / 2 + 64px);
    }

    #slider-pub .a4 {
        height: calc(((100vw - 200px) / (100 / 28) - 80px) * 1.4143);
    }

    #droite-pub,
    #gauche-pub {
        bottom: calc(((100vw - 200px) / (100 / 28) - 80px) * 1.4143 / 2 + 80px);
    }

    .adresse-v2 {
        padding-left: 178px !important;
    }

    .adresse-v2 p:first-child {
        left: 32px;
    }
}

@media (max-width: 1600px) {

    #en-avant .texte {
        padding: 32px;
    }

    #en-avant h2 {
        font-size: 2em;
    }

    #en-avant span[style*="under"],
    #en-avant p {
        font-size: 1.1em;
    }
}

@media (max-width: 1500px) {
    #principal>.parent>ul {
        -webkit-column-count: 3;
        column-count: 3;
    }

    #colonne>div {
        width: 270px;
        padding: 30px;
    }

    .decale3 {
        padding-right: 290px;
    }

    .adresse-v2 h3 {
        font-size: 1.4em !important;
    }
}

@media (max-width: 1414px) {

    #h2 {
        min-width: 100%;
    }

    .actu {
        padding: 40px 15px 40px;
    }

    .adresse-v2:first-child {
        min-width: 100%;
    }
}

@media (max-width: 1360px) {

    #grands-projets,
    #publications-accueil {
        padding: 64px 60px;
    }

    #droite-gp,
    #gauche-gp,
    #droite-pub,
    #gauche-pub {
        right: -15px;
    }

    #gauche-gp,
    #gauche-pub {
        left: -15px;
    }

    #slider-pub .slide-pub {
        padding-right: 42px;
    }

    #slider-pub .a4 {
        height: calc(((100vw - 120px) / (100 / 28) - 40px) * 1.4143);
    }

    #droite-pub,
    #gauche-pub {
        bottom: calc(((100vw - 120px) / (100 / 28) - 40px) * 1.4143 / 2 + 64px);
    }

    .ic_eventlist {
        padding: 64px 32px;
    }

    #boite {
        display: block;
    }

    #colonne {
        width: 100%;
        padding-top: 0;
    }

    #colonne>div {
        width: 980px;
        margin: 0 auto 20px;
        padding: 20px;
    }

    .decale2 {
        margin: 0 !important;
    }

    .decale3 {
        padding-right: 0;
    }

    #liste-communes {
        column-count: 3;
        column-gap: 32px;
    }

    .actu .titre {
        font-size: 1.5em;
    }

    .journal h2 {
        font-size: 1.8em;
    }
}

@media (max-width: 1300px) {

    #en-avant .image {
        min-width: 66.66%;
        height: 31.69vw;
    }

    #slider-gp .slide-gp,
    #slider-pub .slide-pub {
        min-width: 42%;
    }

    #slider-gp a {
        height: 54vw;
    }

    .glisse-gp,
    .glisse-pub {
        transform: translateX(-42%);
    }

    #droite-gp,
    #gauche-gp {
        bottom: calc(54vw / 2 + 64px);
    }

    #slider-pub .a4 {
        height: calc(((100vw - 120px) / (100 / 42) - 40px) * 1.4143);
    }

    #droite-pub,
    #gauche-pub {
        bottom: calc(((100vw - 120px) / (100 / 42) - 40px) * 1.4143 / 2 + 64px);
    }

}

@media (max-width: 1264px) {

    #principal>li>a,
    #principal>li>.nav-header {
        font-size: .9em;
        letter-spacing: -.03em;
        padding-left: 7px;
    }

    .centre-accueil {
        width: 100%;
        margin: 0 auto;
        padding: 0 32px;
    }

    #rapide-2 ul {
        width: calc(100% - 64px);
    }

    #rapide-2 a {
        min-width: 180px;
    }

    #rapide-2 span {
        padding: 0 8px;
    }

    #rapide-2::before,
    #rapide-2::after {
        left: 12px;
        transform: translateX(0);
    }

    #rapide-2::after {
        left: auto;
        right: 12px;
        transform: translateX(0) scaleX(-1);
    }

    #actualites .categorie {
        font-size: .8em;
    }

    #actualites h3 {
        font-size: 1.4em;
    }

    #actualites a:first-child h3 {
        font-size: 1.6em;
    }

    #actualites a:first-child .image {
        width: calc(66.66% - 16px);
        height: 320px;
    }

    #actualites .bouton {
        font-size: 1.1em;
    }

    #outils-carte,
    #carte {
        flex: none;
        width: 100%;
    }

    .complete #OMapsID {
        height: 600px !important;
    }

    .txt-carte {
        left: auto;
        right: 30px;
    }
}

@media (max-width: 1200px) {

    #actualites {
        padding-bottom: 80px;
    }

    #en-avant .image {
        min-width: 100%;
        height: 47.54vw;
    }

    .accueil-autres-sites img {
        max-width: 120px;
        max-height: 100px;
    }
}

@media (max-width: 1100px) {

    #actualites .grille  {
        gap: 64px 42px;
    }

    #actualites a:first-child .image {
        width: calc(66.66% - 8px);
    }
}

@media (max-width: 1015px) {

    .centre {
        width: 100%;
        margin: 0;
        padding-left: 15px;
        padding-right: 15px;
    }

    #outils-carte .boite {
        padding: 30px 15px;
    }

    #colonne {
        padding: 0 15px;
    }

    #colonne>div {
        width: 100%;
    }

    .accueil {
        margin-top: -40px;
    }

    .slide .bouton {
        display: none;
    }

    #rapide img {
        max-width: 60px;
        max-height: 50px;
    }

    #rapide a {
        padding-top: 15px;
        width: 120px;
        height: 120px;
        font-size: .8em;
    }

    #rapide .image-title {
        top: 75px;
    }

    .event:nth-child(3n) {
        margin-right: 15px;
    }

    .event:nth-child(2n) {
        margin-right: 0;
    }

    #partager {
        right: 15px;
    }

    #adresse {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
    }

    #adresse .custom:nth-child(1) {
        -webkit-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
        border-left: 0;
    }
}

@media (min-width: 1056px) {

    #principal {
        display: block !important;
    }
}

@media (max-width: 1055px) {

    header {
        -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .08);
        box-shadow: 0 5px 5px rgba(0, 0, 0, .08);
    }

    #burger {
        display: block;
        position: absolute;
        top: -10px;
        right: 10px;
        height: 60px;
        width: 60px;
    }

    .barre {
        display: block;
        background: #608846;
        height: 4px;
        width: 36px;
        margin: 7px 0;
        transition: transform .3s, width .3s;
    }

    #barre1:first-child {
        transform-origin: 4px 5px;
    }

    #barre3:last-child {
        transform-origin: 4px 0;
    }

    .croix #barre1 {
        transform: rotate(45deg) scaleX(1.03);
    }

    .croix #barre2 {
        transform: scaleX(0);
    }

    .croix #barre3 {
        transform: rotate(-45deg) scaleX(1.03);
    }

    #principal {
        display: none;
        position: absolute;
        top: 50px;
        width: 100%;
        background: #608846;
        -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .08);
        box-shadow: 0 5px 5px rgba(0, 0, 0, .08);
    }

    #principal li,
    .box-menu {
        display: block;
    }

    #principal>li>a,
    #principal>li>.nav-header {
        font-size: 1em;
        letter-spacing: -.01em;
        padding-left: 15px;
    }

    #principal a,
    #principal .nav-header {
        display: block;
        width: 100%;
        height: auto;
        padding: 15px 15px;
        color: #fff;
        border-top: 1px solid #7eaa61;
    }

    .deroule::after {
        display: none;
    }

    .opacite {
        opacity: 1;
    }

    #principal .parent ul {
        position: static;
    }

    #principal ul a,
    #principal ul .nav-header {
        border: 0;
    }

    #navigation.fixe {
        position: absolute;
        top: 130px;
    }

    #navigation.fixe a,
    #navigation.fixe .nav-header {
        height: auto !important;
    }

    #logo.fixe {
        opacity: 1;
    }

    .contenu {
        padding-top: 40px;
    }
}

@media (max-width: 1003px) {

    #rapide-2 {
        padding-bottom: 32px;
    }

    #rapide-2 a {
        min-width: 144px;
        height: 130px;
    }

    #rapide-2 img {
        max-width: 70px;
        max-height: 50px;
    }

    #rapide-2 span {
        top: 85px;
        font-size: .8em;
    }
}

@media (max-width: 900px) {

    #principal .parent ul {
        -webkit-column-count: 2;
        column-count: 2;
    }

    #actualites a:first-child  {
        grid-column-end: 3;
    }

    #actualites .grille  {
        grid-template-columns: 1fr 1fr;
    }

    #actualites .vide  {
        display: none;
    }

    #slider-gp h3 {
        font-size: 1.1em;
    }

    #slider-pub .a4 {
        padding: 0 16px;
    }

    #slider-pub h3 {
        font-size: 1.2em;
    }

    #slider-pub a {
        font-size: 1em;
    }

    .ic-section {
        grid-template-columns: 1fr 1fr;
    }

    .ic-date-img-box {
        height: 25vw !important;
    }

    .ic-date-div {
        top: calc(25vw - 76px);
    }

    .col-chiffre {
        font-size: 1em;
    }

    .gros-chiffre {
        font-size: 2.5em;
    }

    #flex-gmap .col {
        -webkit-box-flex: 1;
        -ms-flex: 1 100%;
        flex: 1 100%;
        padding: 10px 0;
    }
}



@media (max-width: 740px) {

    #flex-drop .col {
        -webkit-box-flex: 1;
        -ms-flex: 1 100%;
        flex: 1 100%;
        padding: 0 0 10px;
    }

    #actualites h2,
    #grands-projets h2,
    #publications-accueil h2,
    .ic_eventlist h2,
    .accueil-autres-sites h2 {
        font-size: 2.4em;
    }

    #recherche-accueil form {
        width: calc(100% - 64px);
    }

    #slider-gp .slide-gp,
    #slider-pub .slide-pub {
        min-width: 74%;
    }

    #slider-gp a {
        height: 90vw;
    }

    .glisse-gp,
    .glisse-pub {
        transform: translateX(-74%);
    }

    #droite-gp,
    #gauche-gp {
        bottom: calc(90vw / 2 + 64px);
    }

    #slider-pub .a4 {
        height: calc(((100vw - 120px) / (100 / 74) - 40px) * 1.4143);
    }

    #droite-pub,
    #gauche-pub {
        bottom: calc(((100vw - 120px) / (100 / 74) - 40px) * 1.4143 / 2 + 64px);
    }
}

@media (min-width: 716px) {

    #elu .nav {
        display: block !important;
    }
}

@media (max-width: 715px) {

    #menu-haut a {
        font-size: .9em;
        padding: 10px 0px 0;
    }

    #contact {
        font-size: .9em;
        padding: 10px 10px 0;
    }

    #recherche-accueil,
    #recherche-accueil img {
        height: 400px;
    }

    #rapide-2 ul {
        width: 100%;
        margin-top: 0;
        padding: 16px;
        border-radius: 0;
    }

    #actualites a:first-child  {
        grid-column-end: 2;
    }

    #actualites a:first-child .image {
        min-width: 100%;
    }

    #actualites a:first-child .boite {
        padding-top: 0;
    }

    #actualites .grille  {
        grid-template-columns: 1fr;
    }

    #actualites .doux  {
        margin-top: -40px;
    }

    .calque {
        background: rgba(0, 178, 175, .6);
    }

    .slide h2 {
        width: 100%;
        bottom: 13vw;
        right: 0;
        padding: 0 50px;
        font-size: 5vw !important;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .event {
        width: 100%;
        margin-right: 0;
    }

    #burger-elu {
        padding: 10px;
        cursor: pointer;
    }

    #burger-elu::after {
        content: 'Menu élus';
    }

    #elu {
        height: auto;
    }

    #elu .nav {
        display: none;
    }

    #elu li,
    #elu ul ul,
    #elu a,
    #elu .nav-header {
        display: block !important;
        position: static;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #ddd;
        float: none;
    }
}

@media (max-width: 660px) {

    #article,
    .articles,
    .perso {
        text-align: left;
    }

    .articles {
        padding: 30px 15px;
    }

    h1 {
        font-size: 2.5em !important;
    }

    #principal .parent ul {
        -webkit-column-count: 1;
        column-count: 1;
    }

    #adresse {
        -webkit-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
    }

    .lettre a {
        font-size: 1.4em;
    }

    #bande {
        height: 32vw;
    }

    .decale {
        margin-top: calc(32vw - 30px) !important;
    }

    .input-append,
    #filter_category,
    .ic-filter-submit-btn,
    .ic-filter-reset-btn {
        width: 100%;
    }

    .ic-filter-submit-btn {
        margin-bottom: 20px;
    }

    #liste-communes {
        column-count: 2;
    }
}

@media (max-width: 570px) {

    .ic-section {
        grid-template-columns: 1fr;
    }

    .ic-date-img-box {
        height: 40vw !important;
    }

    .ic-date-div {
        top: calc(40vw - 76px);
    }

    .col-chiffre {
        width: 100%;
        margin: 10px 0;
    }

    #partager {
        right: auto;
        left: 0;
        margin-top: 0;
        position: relative;
        top: -15px;
    }
}

@media (max-width: 560px) {

    #logo {
        margin-top: 55px;
    }

    #logo img {
        height: 110px;
    }
}

@media (max-width: 530px) {

    .article-info {
        position: static;
        margin: 0 0 10px 0;
    }

    a {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }

    #bloc-partager .bouton {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* @media (max-width: 663px) {

    #rapide-2 ul {
        justify-content: space-around;
    }
} */

@media (max-width: 500px) {

    #slider-gp {
        border-radius: 20px;
    }

    #slider-gp .slide-gp,
    #slider-pub .slide-pub {
        padding-right: 0;
        min-width: 100%;
    }

    #slider-gp a {
        height: 120vw;
        border-radius: 0;
    }

    .glisse-gp,
    .glisse-pub {
        transform: translateX(-100%);
    }

    #droite-gp,
    #gauche-gp {
        bottom: calc(120vw / 2 + 64px);
    }

    .degrade {
        display: none !important;
    }

    #slider-pub .a4 {
        height: calc((100vw - 120px) * 1.4143);
    }

    #droite-pub,
    #gauche-pub {
        bottom: calc((100vw - 120px) * 1.4143 / 2 + 32px);
    }
}

@media (max-width: 440px) {

    h1 {
        font-size: 1.9em !important;
    }

    h2 {
        font-size: 1.5em !important;
    }

    #actualites h2,
    #grands-projets h2,
    #publications-accueil h2,
    .ic_eventlist h2,
    .accueil-autres-sites h2 {
        font-size: 2.1em !important;
        margin-bottom: 32px;
    }

    .centre-accueil,
    #en-avant .texte {
        padding-left: 16px;
        padding-right: 16px;
    }

    #adresse .custom {
        -webkit-box-flex: 100% !important;
        -ms-flex: 100% !important;
        flex: 100% !important;
        border-left: 0;
    }

    .js-calendar td {
        padding: 8px 4px;
    }

    #recherche-accueil form {
        width: calc(100% - 32px);
    }

    #recherche-accueil input {
        font-size: 1.1em;
        padding: 15px 45px 15px 15px;
    }

    .txt-carte {
        position: static;
        display: block;
    }

    .footer-droite {
        padding-bottom: 132px;
    }
}

@media (max-width: 380px) {

    #contact {
        position: absolute;
        top: 55px;
        right: 20px;
        border-radius: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #grands-projets,
    #publications-accueil {
        padding: 32px 35px;
    }

    #droite-gp,
    #gauche-gp,
    #droite-pub,
    #gauche-pub {
        background-size: 45%;
        right: -30px;
    }

    #gauche-gp,
    #gauche-pub {
        left: -30px;
    }

    #droite-gp,
    #gauche-gp {
        bottom: calc(120vw / 2 + 32px);
    }

    #slider-pub .a4 {
        height: calc((100vw - 70px) * 1.4143);
    }

    #droite-pub,
    #gauche-pub {
        bottom: calc((100vw - 70px) * 1.4143 / 2 + 32px);
    }

    .ic_eventlist {
        padding: 32px 16px;
    }

    .adresse-v2 {
        padding: 32px 16px 32px 130px !important;
    }

    .adresse-v2 p:first-child {
        width: 100px;
        height: 100px;
        left: 16px;
    }

    #menu-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

}

@media (max-width: 350px) {
    #liste-communes {
        column-count: 1;
    }
}

@media only print {

    nav,
    footer {
        display: none;
    }

    body {
        font-size: 10.5pt;
    }
}