/*###################### Futura ##############################*/

@font-face {
    font-family: 'FuturaStd-Heavy';
    src: url('../font/Futura/FuturaStd-Heavy.otf') format('opentype');
    src: url('../font/Futura/FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'), url('../font/Futura/FuturaStd-Heavy.woff') format('woff'), url('../font/Futura/FuturaStd-Heavy.ttf') format('truetype'), url('../font/Futura/FuturaStd-Heavy.svg#FuturaStd-Heavy') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaStd-Bold';
    src: url('../font/Futura/FuturaStd-Bold.otf') format('opentype');
    src: url('../font/Futura/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'), url('../font/Futura/FuturaStd-Bold.woff') format('woff'), url('../font/Futura/FuturaStd-Bold.ttf') format('truetype'), url('../font/Futura/FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaStd-Book';
    src: url('../font/Futura/FuturaStd-Book.otf') format('opentype');
    src: url('../font/Futura/FuturaStd-Book.eot?#iefix') format('embedded-opentype'), url('../font/Futura/FuturaStd-Book.woff') format('woff'), url('../font/Futura/FuturaStd-Book.ttf') format('truetype'), url('../font/Futura/FuturaStd-Book.svg#FuturaStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*###################### Quicksand ##############################*/

@font-face {
    font-family: 'Quicksand-Light';
    src: url('../font/Quicksand/Quicksand-Light.otf') format('opentype');
    src: url('../font/Quicksand/Quicksand-Light.eot?#iefix') format('embedded-opentype'), url('../font/Quicksand/Quicksand-Light.woff') format('woff'), url('../font/Quicksand/Quicksand-Light.ttf') format('truetype'), url('../font/Quicksand/Quicksand-Light.svg#Quicksand-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand-Bold';
    src: url('../font/Quicksand/Quicksand-Bold.otf') format('opentype');
    src: url('../font/Quicksand/Quicksand-Bold.eot?#iefix') format('embedded-opentype'), url('../font/Quicksand/Quicksand-Bold.woff') format('woff'), url('../font/Quicksand/Quicksand-Bold.ttf') format('truetype'), url('../font/Quicksand/Quicksand-Bold.svg#Quicksand-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand_Book';
    src: url('../font/Quicksand/Quicksand_Book.otf') format('opentype');
    src: url('../font/Quicksand/Quicksand_Book.eot?#iefix') format('embedded-opentype'), url('../font/Quicksand/Quicksand_Book.woff') format('woff'), url('../font/Quicksand/Quicksand_Book.ttf') format('truetype'), url('../font/Quicksand/Quicksand_Book.svg#Quicksand_Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand-Regular';
    src: url('../font/Quicksand/Quicksand-Regular.otf') format('opentype');
    src: url('../font/Quicksand/Quicksand-Regular.eot?#iefix') format('embedded-opentype'), url('../font/Quicksand/Quicksand-Regular.woff') format('woff'), url('../font/Quicksand/Quicksand-Regular.ttf') format('truetype'), url('../font/Quicksand/Quicksand-Regular.svg#Quicksand-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    /*Titre*/
    font-family: "Share-Regular";
    src: url("Share-Regular.eot?") format("eot"), url("Share-Regular.woff") format("woff"), url("Share-Regular.ttf") format("truetype"), url("Share-Regular.svg#Share-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}


/*###################### Lato ##############################*/

@font-face {
    /*Text*/
    font-family: "Lato Regular";
    src: url("../font/Lato/Lato-Regular.eot?") format("eot"), url("../font/Lato/Lato-Regular.woff") format("woff"), url("../font/Lato/Lato-Regular.ttf") format("truetype"), url("../font/Lato/Lato-Regular.svg#Lato-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}


/* The Modal (background) */

.modalFntPop {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 10000;
    /* Sit on top */
    left: 50%;
    top: 50%;
    width: 300px;
    /* Full width */
    height: auto;
    /* Full height */
    max-width: 660px;
    /* max width */
    max-height: 600px;
    /* max height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: #ffffff;
    /* Fallback color */
    color: #323d46;
    font-family: Arial;
    /*font-weight:bold;*/
    font-size: 15px;
    -moz-box-shadow: 2px 2px 5px 1px #cfcfcf;
    -webkit-box-shadow: 2px 2px 5px 1px #cfcfcf;
    -o-box-shadow: 2px 2px 5px 1px #cfcfcf;
    box-shadow: 2px 2px 5px 1px #cfcfcf;
    filter: progid: DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=134, Strength=5);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-bottom: 10px;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.modalFntPop .CorpFntPop {
    width: auto;
    /* Full width */
    height: auto;
    /* Full height */
    margin: 50px 15px 10px 15px
}

.modalFntPop .barreFntPop {
    position: absolute;
    height: 30px;
    background-color: #5c666f;
    /* Fallback color */
    cursor: move
}

.modalFntPop .illustration {
    height: 10px;
    margin-top: -8px;
    background-color: #ffffff;
}

.modalFntPop .titleFntPop {
    width: auto;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    margin: 5px 0 0 10px
}


/* The Close Button */

.modalFntPop .closeFntPop {
    color: #ffffff;
    float: right;
    margin-right: 10px;
    margin-top: 15px;
    font-size: 28px;
    /*font-weight: bold;*/
    line-height: 0px
}

.modalFntPop .closeFntPop:hover,
.modalFntPop .closeFntPop:focus {
    color: #dd0934;
    text-decoration: none;
    cursor: pointer
}


/*####################### Les listes ############################################*/

.listeSelectFntPop {
    /*margin:auto;*/
    color: #323d46;
    font-size: 14px;
}

.listeSelectFntPop h4 {
    padding: 2px 0 0 0;
    margin: 0px;
    height: 20px;
    font-size: 13px;
    font-weight: bold;
    padding-left: 20px;
    border-bottom: 1px solid #ffffff;
    background-color: #bcbcbc;
    line-height: 18px
}

.listeSelectFntPop div {
    display: none
}

.listeSelectFntPop h4.active {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    background-color: #323d46;
    cursor: pointer
}

.listeSelectFntPop h4.active:hover,
.listeSelectFntPop h4.active:focus {
    border-bottom: 1px solid #ffffff
}

.listeSelectFntPop h4:hover,
.listeSelectFntPop h4:focus {
    border-bottom: 1px solid #ffffff;
    cursor: pointer
}

.listeSelectFntPop h4:before {
    content: '';
    background-image: url(../images/bouton_flech_veille.png);
    background-repeat: no-repeat;
    position: absolute;
    margin-top: -2px;
    left: 8px;
    width: 22px;
    height: 22px
}

.listeSelectFntPop h4:hover:before,
.listeSelectFntPop h4:focus:before {
    color: #ffffff
}

.listeSelectFntPop h4.active:before {
    content: '';
    background-image: url(../images/bouton_flech_actif.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 22px;
    height: 22px
}


/*##################################  INPUT ##################################################*/

.modalFntPop input {
    outline: none;
    color: #323d46;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px
}

.modalFntPop input[type=text] {
    font-size: 15px
}

.modalFntPop input[type=radio] {
    color: #000000;
    font-size: 20px;
    width: 20px;
    height: 20px
}

.modalFntPop input[type=checkbox] {
    color: #000000;
    font-size: 20px;
    width: 20px;
    height: 20px
}

.modalFntPop input[type=button] {
    color: #000000;
    font-size: 20px;
    width: auto;
    height: auto
}

.modalFntPop input[type=text]:hover,
.modalFntPop input[type=button]:hover,
.modalFntPop input[type=text]:focus {
    border: 2px solid #dd0934
}

.modalFntPop a {
    text-decoration: none;
    outline: none;
    color: #dd0934;
    font-size: 12px
}


/*######################################### Grille image ######################################*/

.modalFntPop .galerie {
    position: relative;
    width: 370px;
    margin: 0 auto
}

.galerie .galerie-action {
    display: block;
    overflow: hidden;
    margin: 0px 10px 0px 10px;
    background: trasparent
}

.galerie .galerie-liste {
    display: table;
    border: 0px;
    border-collapse: separate;
    border-spacing: 10px 0px;
    position: relative;
    width: 100%;
    background: trasparent;
    -webkit-transition: all 2000ms ease;
    transition: all 2000ms ease;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.galerie .galerie-liste .galerie-row {
    display: table-row
}

.galerie .galerie-liste .galerie-image {
    display: table-cell;
    vertical-align: middle;
    width: 102px;
    height: 128px;
    text-align: center;
    background: trasparent;
    padding-left: 0px;
    cursor: pointer
}

.galerie .galerie-liste .galerie-image.select {
    border-bottom: 1px solid #0ce1f0;
}

.galerie .suiv {
    display: block;
    cursor: pointer;
    position: absolute;
    color: #5c666f;
    font-size: 60px;
    right: -9px;
    background: trasparent;
    vertical-align: middle;
    line-height: 0px
}

.galerie .prec {
    display: block;
    cursor: pointer;
    position: absolute;
    color: #5c666f;
    font-size: 60px;
    left: -9px;
    background: trasparent;
    vertical-align: middle;
    line-height: 0px
}

.galerie .pagination {
    display: block;
    background: trasparent;
    text-align: center;
    color: #bcbcbc;
    font-size: 15px;
}

.galerie .pagination label {
    display: inline-block;
    width: auto;
    margin-right: 5px;
    background-color: #ffffff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #e5e38b;
    cursor: pointer;
}

.galerie .suiv:hover,
.galerie .prec:hover {
    color: #72b1c7
}

.galerie .pagination label:hover,
.galerie .pagination label.active {
    background-color: #72b1c7
}


/*######################################### Grille image hort fenetre ######################################*/

.galerie_sansFnt {
    position: relative;
    width: 635px;
    margin: 0 auto
}

.galerie_sansFnt .galerie-action {
    display: block;
    overflow: hidden;
    margin: 0px 10px 0px 10px;
    background: trasparent
}

.galerie_sansFnt .galerie-liste {
    display: table;
    border: 0px;
    border-collapse: separate;
    border-spacing: 10px 0px;
    position: relative;
    width: 100%;
    background: trasparent;
    -webkit-transition: all 3000ms ease;
    transition: all 3000ms ease;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.galerie_sansFnt .galerie-liste .galerie-row {
    display: table-row
}

.galerie_sansFnt .galerie-liste .galerie-image {
    display: table-cell;
    vertical-align: top;
    width: 182px;
    height: 482px;
    background: trasparent;
    padding-left: 0px;
    cursor: pointer
}

.galerie_sansFnt .suiv {
    display: block;
    cursor: pointer;
    position: absolute;
    color: #5c666f;
    font-size: 80px;
    right: -25px;
    background: trasparent;
    vertical-align: middle;
    line-height: 0px
}

.galerie_sansFnt .prec {
    display: block;
    cursor: pointer;
    position: absolute;
    color: #5c666f;
    font-size: 80px;
    left: -25px;
    background: trasparent;
    vertical-align: middle;
    line-height: 0px
}

.galerie_sansFnt .pagination {
    display: block;
    background: trasparent;
    text-align: center;
    color: #bcbcbc;
    margin-top: 6px;
    font-size: 20px;
    line-height: 15px
}

.galerie_sansFnt .pagination label {
    display: inline-block;
    width: auto;
    margin-right: 5px;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #5c666f;
    cursor: pointer
}

.galerie_sansFnt .suiv:hover,
.galerie_sansFnt .prec:hover {
    color: #72b1c7
}

.galerie_sansFnt .pagination label:hover,
.galerie_sansFnt .pagination label.active {
    background-color: #72b1c7;
}