/* POUR BACKOFFICE BLOCK DIAPO */
.block_diapo {
    width:150px;
    border:1px solid #4a4a4a;
    margin:5px;
    display:inline-block;
    vertical-align:top;
    cursor: pointer;
    background-color:#4a4a4a;
}

.vignette_block_diapo {
    width:150px;
    height:80px;
    overflow:hidden;
    border-bottom: 1px solid #868686;
}

.btn_suppr_block_diapo {
    background-color: #e24c4c;
    color: #fff;
    text-align: center;
    padding: 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.btn_suppr_block_diapo:hover {
    background-color: #fff;
    color: #e24c4c;
}

.btn_duplique_block_diapo {
    background-color: #4c8ce2;
    color: #fff;
    text-align: center;
    padding: 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.btn_duplique_block_diapo:hover {
    background-color: #fff;
    color: #4c8ce2;
}

.btn_acroche_block_calque {
    background-color: #4d4d4d;
    color: #fff;
    text-align: center;
    padding: 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.btn_acroche_block_calque:hover {
    background-color: #fff;
    color: #4d4d4d;
}

.titre_block_diapo {
    width:100%;
    height:50px;
    padding:8px;
    background-color:#4a4a4a;
    color:#fff;
    text-align:center;
    font-weight:bold;
    font-size:14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.cadre_presentation_calque {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    overflow: hidden;
    text-align: center;
    font-size: 11px;
    background-color: #dddddd;
    position:relative;
}

.cadre_presentation_calque .nom_image {
    width: 200px;
    position:absolute;
    left: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    color:#fff;
}

.titre_section {
    font-size:16px;
    font-weight:bold;
    padding-bottom:8px;
    border-bottom:2px solid #ccc;
}

.cadre_btn_format {
    width:100%;
}

.cadre_interieur_btn_format {
    display:inline-block;
    cursor:pointer;
    margin:7px;
    vertical-align:top;
    opacity:0.8;
}

.cadre_interieur_btn_format_select {
    display:inline-block;
    cursor:pointer;
    margin:7px;
    vertical-align:top;
}


.btn_en_image {
    position:relative;
    width:169px;
    height:99px;
    overflow:hidden;
}

.btn_en_image_select {
    position:relative;
    width:169px;
    height:99px;
    overflow:hidden;
    -webkit-box-shadow:inset 0 0 2px 2px #a05656;
    box-shadow:inset 0 0 2px 2px #a05656;
}



.effet_survol_btn_format {
    position:absolute;
    top:99px;
    left:0px;
    width:169px;
    height:99px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#446184+0,567aa0+100&0.1+0,1+50,1+100 */
    background: -moz-linear-gradient(top,  rgba(68,97,132,0.1) 0%, rgba(77,110,146,1) 50%, rgba(86,122,160,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(68,97,132,0.1) 0%,rgba(77,110,146,1) 50%,rgba(86,122,160,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(68,97,132,0.1) 0%,rgba(77,110,146,1) 50%,rgba(86,122,160,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a446184', endColorstr='#567aa0',GradientType=0 ); /* IE6-9 */
    color:#fff;
    text-align:center;
    font-weight:bold;
    font-size:21px;
    padding-top:35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.btn_en_image:hover .effet_survol_btn_format {
    top:0px;
}


.effet_survol_btn_format_select {
    position:absolute;
    top:99px;
    left:0px;
    width:169px;
    height:99px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#446184+0,567aa0+100&0.1+0,1+50,1+100 */
    background: -moz-linear-gradient(top,  rgba(68,97,132,0.1) 0%, rgba(160,86,86,1) 50%, rgba(160,86,86,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(68,97,132,0.1) 0%,rgba(160,86,86,1) 50%,rgba(160,86,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(68,97,132,0.1) 0%,rgba(160,86,86,1) 50%,rgba(160,86,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a446184', endColorstr='#567aa0',GradientType=0 ); /* IE6-9 */
    color:#fff;
    text-align:center;
    font-weight:bold;
    font-size:21px;
    padding-top:35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.btn_en_image_select:hover .effet_survol_btn_format_select {
    top:0px;
}

.mini_titre_btn_format {
    width:169px;
    padding:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
    background-color:#567AA0;
    text-align:center;
    font-size:10px;
}

.mini_titre_btn_format_select {
    width:169px;
    padding:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
    background-color:#a05656;
    text-align:center;
    font-size:10px;
    position:relative;
}


.mini_titre_btn_format_select:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(160, 86, 86, 0);
    border-top-color: #a05656;
    border-width: 10px;
    margin-left: -10px;
}


/* POUR FRONT OFFICE */


.interieur_diaporama {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 1;
}

.base_calque_diapo_calque {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.fleche_gauche_diaporama_calque {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 99;
    background-image: url('../images/fleche_nav_gauche.png');
    background-position: 4px 4px;
    background-repeat: no-repeat;
}

.fleche_gauche_diaporama_calque:hover {
    background-image: url('../images/fleche_nav_gauche_inv.png');
    border: 2px solid #000;
}

.fleche_droite_diaporama_calque {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 99;
    background-image: url('../images/fleche_nav_droite.png');
    background-position: 6px 4px;
    background-repeat: no-repeat;
}

.fleche_droite_diaporama_calque:hover {
    background-image: url('../images/fleche_nav_droite_inv.png');
    border: 2px solid #000;
}


.nav_diaporama_calque {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
    z-index: 11;
}



@media screen and (min-width:320px) {
    .cadre_diaporama {
        overflow: hidden;
        position: relative;
        /*
        zoom: 39%;
        */
    }

    .point_nav_diaporama_calque {
        width: 21px;
        height: 21px;
        border-radius: 21px;
        background-color: #fff;
        display: inline-block;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .point_nav_diaporama_calque:hover, .point_nav_diaporama_calque_select {
        width: 21px;
        height: 21px;
        border-radius: 21px;
        background-color: #605552;
        display: inline-block;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .num_nav_diaporama_calque {
        padding: 10px;
        font-size: 22px;
        color: #fff;
        border: 3px solid #fff;
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .num_nav_diaporama_calque:hover, .num_nav_diaporama_calque_select {
        padding: 10px;
        font-size: 22px;
        color: #605552;
        background-color: #fff;
        border: 3px solid #605552;
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .vignette_nav_diaporama_calque {
        padding: 0px;
        width: 35px;
        height: 35px;
        opacity: 0.8;
        overflow: hidden;
        border: 1px solid #fff;
        display: inline-block;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .vignette_nav_diaporama_calque:hover, .vignette_nav_diaporama_calque_select {
        padding: 0px;
        width: 35px;
        height: 35px;
        opacity: 1;
        overflow: hidden;
        border: 1px solid #605552;
        display: inline-block;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .la_vignette_nav {
        width: auto;
        height: 56px;
        pointer-events: none;
    }
}

@media screen and (min-width:760px) {
    .cadre_diaporama {
        overflow: hidden;
        position: relative;
        /*
        zoom: 60%;
        */
    }

    .point_nav_diaporama_calque {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        margin-left: 7px;
        margin-right: 7px;
    }

    .point_nav_diaporama_calque:hover, .point_nav_diaporama_calque_select {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        margin-left: 7px;
        margin-right: 7px;
    }

    .num_nav_diaporama_calque {
        padding: 7px;
        font-size: 15px;
        border: 2px solid #fff;
        margin-left: 7px;
        margin-right: 7px;
    }

    .num_nav_diaporama_calque:hover, .num_nav_diaporama_calque_select {
        padding: 7px;
        font-size: 15px;
        border: 2px solid #605552;
        margin-left: 7px;
        margin-right: 7px;
    }

    .vignette_nav_diaporama_calque {
        width: 49px;
        height: 49px;
        opacity: 0.8;
        border: 1px solid #fff;
        margin-left: 7px;
        margin-right: 7px;
    }

    .vignette_nav_diaporama_calque:hover, .vignette_nav_diaporama_calque_select {
        width: 49px;
        height: 49px;
        border: 1px solid #605552;
        margin-left: 7px;
        margin-right: 7px;
    }

    .la_vignette_nav {
        height: 49px;
    }
}

@media screen and (min-width:1000px) {
    .cadre_diaporama {
        overflow: hidden;
        position: relative;
        /*
        zoom: 100%;
        */
    }

    .point_nav_diaporama_calque {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .point_nav_diaporama_calque:hover, .point_nav_diaporama_calque_select {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .num_nav_diaporama_calque {
        padding: 5px;
        font-size: 11px;
        border: 2px solid #fff;
        margin-left: 5px;
        margin-right: 5px;
    }

    .num_nav_diaporama_calque:hover, .num_nav_diaporama_calque_select {
        padding: 5px;
        font-size: 11px;
        border: 2px solid #605552;
        margin-left: 5px;
        margin-right: 5px;
    }

    .vignette_nav_diaporama_calque {
        width: 35px;
        height: 35px;
        opacity: 0.8;
        border: 1px solid #fff;
        margin-left: 5px;
        margin-right: 5px;
    }

    .vignette_nav_diaporama_calque:hover, .vignette_nav_diaporama_calque_select {
        width: 35px;
        height: 35px;
        border: 1px solid #605552;
        margin-left: 5px;
        margin-right: 5px;
    }

    .la_vignette_nav {
        height: 35px;
    }
}