/* Responsive Navigation styles begin here */

@media (max-width: 500px) {
    #recherche div {margin-top: 20%!important;}	
}

@media (max-width: 400px) {
    .t40 {width: 80% !important;}
    #actu, .espace-telecharge, .espace-enquete, .espace-question, .espace-temoigne {display: none !important;}
    #recherche div {margin-top: 30%!important;}
    .cycle_lien.celltop {display: inline-block!important;}
    .cycle_lien.celltop.t30 {width: 94%!important;}
    .cycle_texte.celltop {display: block!important;}
    article.cycle-slide {padding: 1%; margin-bottom: 100px;}
    ul.cycle_lien.celltop li.mb4 {margin-bottom: 2%!important;}
    article.cycle-slide label {width: 40%!important;}
    article.cycle-slide label.t85 {width: 75%!important;}
    article.cycle.table.t70 {width: 100%!important;}
}

@media (max-width: 991px) {
    .colonne {
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1;
        -webkit-column-gap: 1.5rem;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
    }
    .colonne hr {display: none!important;}
    .synthese.t25 {width: 100%!important;}
    .wrap-center {margin-left: 0%; margin-right: 0%!important;}
    nav select {display: inline-block;}
    #recherche {margin-top: 20px !important;}
    #recherche div {margin-top: 15%;}
    .cycle-slide img, .diapo, #cabane, #tel, .grisentre figure, .nav-left {display: none !important;}
    #actu article {margin-right: 5% !important;}
    #reseaux {float: none !important; margin: 0 !important; bottom: 0; position: absolute; background-color: #373737; width: 100%;}
    #reseaux i {color: #FFFFFF;}
    footer {display: none!important;}
    header {height: 120px;}
    #logo {margin-top: 10px; display: block;}
    #nav_top {display: none;}
    #nav_smart, #tj_smart, #sejour_smart, #inscription_smart, .synthese {display: block!important;}
    #tj_smart {margin-top: 60px;}
    #nav_smart ul {margin-left: 40%; margin-top: 50px; background-color: #aa0000;}
    #nav_smart li {list-style-type: none;}
    #sejour_smart {padding-bottom: 60px!important;}
    #main {display: none;}
    #sejour_smart {padding: 2%;}
    #inscription_smart {
        position: absolute;
        margin: -220px 0 0px 65%;
        border: 1px solid ##ff9a00;
        border-radius: 50%;
        cursor: pointer;
        height: 6rem;
        width: 6rem;
        background-color: ##ff9a00;
        padding: 0;
        outline: 0;
        z-index: 7777;
    }
    #inscription_smart a, #inscription_smart a i {
        margin: 20px 0 0 15px;
        color: #FFFFFF;
        text-decoration: none;
        display: block;
    }
    #inscription_smart:hover {background-color: #FFFFFF;}
    #inscription_smart a:hover, #inscription_smart a i:hover {color: #000000;}
    #ConteneurCabane div.table[role="main"], #ConteneurCabane article.table[id="general"] {display: block!important;}

    ul.bas {padding-top: 0%;}
    nav + * {
        position: relative;
    }
    /* Theming opened nav */
    nav ul {
        /* maximum height */  
        max-height: 20em;
        overflow: visible;
        /* translate with hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: max-height .4s;
        transition: max-height .4s, overflow .4s;
        will-change: max-height, overflow;
        /* global styles */   
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: ##ff9a00;
        font-style: italic;
        margin-bottom: 20px;
    }
    nav a {
        display: block;
        padding: 0.3rem;
        color: #FFFFFF;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.2em;
    }
    nav a:hover,
    nav a:focus,
    nav a:active {
        background: #000000;
        padding: 0.3rem;
    }
    /* Theming closed nav */
    nav.is-closed ul {
        max-height: 0;
        overflow: hidden;
    }
    /* Global styling nav button */
    nav > button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 1;
        height: 3rem;
        width: 3rem;
        background-color: #333;
        padding: 0;
        outline: 0;
        border: 1px solid #333;
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-transition: -webkit-transform .2s;
        transition: transform .2s;
    }
    /*  Removing Firefox's dotted outline on button */
    nav > button::-moz-focus-inner {
        border: 0;
    }
    nav > button::before {
        font-family: "FontAwesome";
        content: "\f039";
        color: #FFFFFF;
        font-size: 22px;
    }
    /* Theming opened nav button */
    nav:not(.is-closed) > button,
    nav:not(.is-closed) > button::before {
        -webkit-transform: rotate(180deg) translateZ(0);
        -ms-transform: rotate(180deg) translateZ(0);
        transform: rotate(180deg) translateZ(0);
    }
    /* Hide alternate text except from screen readers */
    .visually-hidden {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
        overflow: hidden;
        height: 1px;
        width: 1px;
    }
}

@media (orientation: landscape) and (max-device-width: 660px) {
    html, body {
        -webkit-text-size-adjust: 100%;
    }
}

.infobulle {
    z-index: 10000;
    position: absolute;
    visibility: hidden;
    border: 1px solid Black;
    padding: 10px;
    font-family: Verdana, Arial;
    font-size: 10px;
    background-color: #FFFFCC;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 );
    -webkit-transition: all .3s 1s ease;
    -moz-transition: all .3s 1s ease;
    -ms-transition: all .3s 1s ease;
    -o-transition: all .3s 1s ease;
    transition: all .3s 1s ease;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
}