/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 26 sept. 2016, 11:55:44
    Author     : salim
*/

html{
    margin:0;
    padding:0;
    border:0
}

body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
div{
    border:0px solid
}
article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section{
    display:block
}
body{
    line-height:1.5;
    background:transparent
}
table{
    border-collapse:separate;
    border-spacing:0
}
caption,th,td{
    text-align:left;
    font-weight:normal;
    float:none !important
}
table,th,td{
    vertical-align:middle
}
blockquote:before,blockquote:after,q:before,q:after{
    content:''
}
blockquote,q{
    quotes:""
}
a img{
    border:none
}
:focus{
    outline:0
}
#ContentArticleContent_1 li{
    margin-left:15px
}
body,html{
    padding:0;
    margin:0
}
.lbb-header-mediaclap{
    padding:20px 0;
    font-family:"Roboto", sans-serif;
    font-weight:300;
    color:white;
    overflow:hidden;
    text-align:center
}
@media (max-width: 767px){
    .lbb-header-mediaclap{
        text-align:right;
        padding-right:10px
    }

}
.lbb-header-mediaclap .lbb-header-wrapper{
    min-width:315px;
    position:relative
}
@media (min-width: 1000px){
    .lbb-header-mediaclap .lbb-header-wrapper{
        width:1000px;
        margin:auto
    }

}
.lbb-header-mediaclap .lbb-logo-mediaclap{
    position:absolute;
    left:0;
    top:-8px
}
.lbb-header-mediaclap .lbb-logo-mediaclap img{
    border:0
}
@media (max-width: 767px){
    .lbb-header-mediaclap .lbb-logo-mediaclap{
        left:10px
    }

}
.lbb-header-mediaclap a{
    -webkit-transition:all 0.6s ease-in-out;
    transition:all 0.6s ease-in-out;
    color:white;
    text-decoration:none!important;
    font-size:16px
}
@media (min-width: 768px){
    .lbb-header-mediaclap a{
        min-width:56px
    }

}
.lbb-header-mediaclap .lbb-header-menu{
    position:relative;
    display:inline-block
}
.lbb-header-mediaclap .lbb-header-menu:after{
    content:" ";
    height:1px;
    width:2000px;
    background-color:white;
    position:absolute;
    top:49%;
    left:5px
}
.lbb-header-mediaclap .lbb-header-menu a{
    display:inline-block;
    position:relative;
    padding:0 1em 2px 36px;
    margin-left:16px;
    margin-right:20px;
    border:2px solid white;
    border-radius:2px;
    z-index:2;
    text-align:left;
    line-height:1.5;
}
.lbb-header-mediaclap .lbb-header-menu a:last-child{
    margin-right:0
}
.lbb-header-mediaclap .lbb-header-menu a .lbb-header-picto{
    display:inline-block;
    position:absolute;
    left:-16px;
    top:-10px;
    padding:4px;
    width:43px;
    height:43px;
    border-radius:50%;
    border:4px solid white;
    box-shadow:0 0 4px #5b5b5b, 0 0 4px #5b5b5b inset;
    text-align:center;
    background-image:url("../images/icones-menu.svg");
    background-repeat:no-repeat;
    background-size:290px 110px;

}
.lbb-header-mediaclap .lbb-header-menu a .lbb-header-picto.decouverte{
    background-position:6px 10px
}
.lbb-header-mediaclap .lbb-header-menu a .lbb-header-picto.boutique{
    background-position:6px -32px
}
.lbb-header-mediaclap .lbb-header-menu a .lbb-header-picto.multimedia{
    background-position:6px -74px
}
.lbb-header-mediaclap .lbb-header-menu a.active,.lbb-header-mediaclap .lbb-header-menu a:hover{
    background-color:white
}
.lbb-header-mediaclap .lbb-header-menu a.active .lbb-header-picto,.lbb-header-mediaclap .lbb-header-menu a:hover .lbb-header-picto{
    background-color:white
}
@media (min-width: 768px){
    .lbb-header-mediaclap .lbb-header-menu a:before{
        display:block;
        content:" ";
        position:absolute;
        right:-8px;
        top:6px;
        z-index:-1;
        height:10px;
        width:8px;
        background-color:white;
        border-radius:0 50% 50% 0
    }

}
.lbb-header-mediaclap .lbb-header-menu a.active:after{
    content:" ";
    width:1px;
    height:20px;
    z-index:-1;
    position:absolute;
    left:50%;
    bottom:-22px;
    width:11px;
    height:20px;
    background-image:url("../images/icones-menu.svg");
    background-position:-279px 0;
    background-size:290px 110px
}
@media (max-width: 767px){
    .lbb-header-mediaclap .lbb-header-menu a.active:after{
        left:0
    }

}
@media (min-width: 768px){
    .lbb-header-mediaclap .lbb-header-menu a .lbb-header-picto:after{
        content:" ";
        display:block;
        width:51px;
        height:22px;
        position:absolute;
        right:-60px;
        top:-12px;
        background-image:url("../images/icones-menu.svg");
        background-size:290px 110px
    }

}
@media (max-width: 767px){
    .lbb-header-mediaclap .lbb-header-menu a{
        padding:0;
        color:transparent !important;
        width:27px;
        margin-right:10px;
        background-color:transparent !important;
        border:0
    }

}
.lbb-header-decouverte{
    background-color:#0082ca
}
.lbb-header-decouverte .lbb-header-menu a{
    background-color:#0082ca
}
.lbb-header-decouverte .lbb-header-menu a.active,.lbb-header-decouverte .lbb-header-menu a:hover{
    color:#0082ca
}
.lbb-header-decouverte .lbb-header-menu .lbb-header-picto{
    background-color:#0082ca
}
.lbb-header-decouverte a:hover .lbb-header-picto.decouverte{
    background-position:-48px 10px
}
.lbb-header-decouverte a:hover .lbb-header-picto.boutique,.lbb-header-decouverte a:hover .lbb-header-picto.active{
    background-position:-48px -32px
}
.lbb-header-decouverte a:hover .lbb-header-picto.multimedia{
    background-position:-48px -73px
}
.lbb-header-decouverte .active .lbb-header-picto{
    background-position:-48px 10px !important
}
.lbb-header-decouverte .lbb-header-picto:after{
    background-position:-207px -111px
}
.lbb-header-boutique{
    background-color:#ee721f
}
.lbb-header-boutique .lbb-header-menu a{
    background-color:#ee721f
}
.lbb-header-boutique .lbb-header-menu a.active,.lbb-header-boutique .lbb-header-menu a:hover{
    color:#ee721f
}
.lbb-header-boutique .lbb-header-menu .lbb-header-picto{
    background-color:#ee721f
}
.lbb-header-boutique a:hover .lbb-header-picto.decouverte{
    background-position:-104px 10px
}
.lbb-header-boutique a:hover .lbb-header-picto.boutique,.lbb-header-boutique a:hover .lbb-header-picto.active{
    background-position:-104px -32px
}
.lbb-header-boutique a:hover .lbb-header-picto.multimedia{
    background-position:-104px -73px
}
.lbb-header-boutique .active .lbb-header-picto{
    background-position:-104px -32px !important
}
.lbb-header-boutique .lbb-header-picto:after{
    background-position:-207px -45px
}
.lbb-header-intranet{
    background-color:#4B4D54
}
.lbb-header-intranet .lbb-header-menu a{
    background-color:#4B4D54
}
.lbb-header-intranet .lbb-header-menu a.active,.lbb-header-intranet .lbb-header-menu a:hover{
    color:#4B4D54
}
.lbb-header-intranet .lbb-header-menu .lbb-header-picto{
    background-color:#4B4D54
}
.lbb-header-intranet a:hover .lbb-header-picto.decouverte{
    background-position:-159px 10px
}
.lbb-header-intranet a:hover .lbb-header-picto.boutique{
    background-position:-159px -32px
}
.lbb-header-intranet a:hover .lbb-header-picto.multimedia,.lbb-header-intranet a:hover .lbb-header-picto.active{
    background-position:-161px -74px
}
.lbb-header-intranet .active .lbb-header-picto{
    background-position:-159px -73px !important
}
.lbb-header-intranet .lbb-header-picto:after{
    background-position:-207px -88px
}

/*<!------------------------------------------------------------- --------------------------------------------------------------->*/

body{

}

.bodygris{
   background:  #4B4D54!important;

}
[class*='col-'] {
    padding-right:10px!important;
    padding-left:10px!important;
}
.nopadding-right {
   padding-right: 0 !important;
}

.nopadding-left {
   padding-left:  0 !important;
}

.row{
    margin-left: 0px!important;
    margin-right: 0px!important;
}


.modal-body {
    padding: 10px!important;
}

.modal-footer {
    padding: 0px!important;
    text-align: right;
    border-top: 0!important;
}
/*<!-------------------------------------------------------------font--------------------------------------------------------------->*/
@font-face {
    font-family: 'roboto_bold';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/Roboto-Bold-webfont.woff') format('woff'),url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),url('fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

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

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

@font-face {
  font-family: 'Roboto Slab';
  src: url("fonts/RobotoSlab-Regular-webfont.eot");
  src: url("fonts/RobotoSlab-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoSlab-Regular-webfont.woff") format("woff"), url("fonts/RobotoSlab-Regular-webfont.ttf") format("truetype"), url("fonts/RobotoSlab-Regular-webfont.svg#roboto_slabregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url("fonts/Roboto-Medium-webfont.eot");
  src: url("fonts/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Medium-webfont.woff") format("woff"), url("fonts/Roboto-Medium-webfont.ttf") format("truetype"), url("fonts/Roboto-Medium-webfont.svg#robotomedium") format("svg");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url("fonts/Roboto-Italic-webfont.eot");
  src: url("fonts/Roboto-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Italic-webfont.woff") format("woff"), url("fonts/Roboto-Italic-webfont.ttf") format("truetype"), url("fonts/Roboto-Italic-webfont.svg#robotoitalic") format("svg");
  font-weight: normal;
  font-style: italic;
}


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


/*<!---------------------------------------------------------------------------------------------------------------------------->*/
.bandeau{
  width: 100%;
  top: 68px;
  background-color: #fff;
  text-align: center;
  margin: auto;
  font-size: 22px;
  padding: 16px 0 16px 0;
}


.span1{
   font-family:"Roboto";
   font-weight:700;
   color: #0080C9;

}

.span2{
   font-family:"Roboto";
   font-weight:300;
   color: #0080C9;

}
.ajoutcarte {
    width: 6vh;
    height: 6vh;
    margin: 5.5vh 0 0 5vh;
    position: relative;
    cursor: pointer;
    display: inline-block;
    background: red;

}


.titreCommande{
    text-align: center;
}

/*.succes {
  padding: 10px 0;
    margin: -15px auto 0 auto;
    text-align: center;
    display: none;
    color: white;
    background: #7fbb45;
}
*/
.alerte {
    padding: 10px 0;
    margin: 20px auto 0 auto;
    text-align: center;
    display: none;
    color: #fff;
    background: #f0ad4e;
    border-color: #f0ad4e;
    border:1px solid;
    border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
font-family: "Roboto Slab";
    font-size: 20px;
}

.LimiteCaractere {
  padding: 10px 0;
  text-align: center;
  display: none;
  color: #fff;
  background: #f0ad4e;
  border-color: #f0ad4e;
  border: 1px solid;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  font-family: "Roboto Slab";
  font-size: 12px;
  margin: -145px 0 0 2px;
}


.btn-primary, .btn {
    margin-top: 15px!important;
    /*display:none!important;*/
}

.carteCommande,.carteResultat,.ajoutAdmin,.modifAdmin{
    display:none!important;
}

.test{
    display:none!important;
}

.CarteImprimer{
    display:none!important;
}
.modal-content {
    min-height: 300px!important;
    overflow: hidden;
    border-radius : 10px!important;
-moz-border-radius : 10px!important;
-webkit-border-radius : 10px!important;
}

.carte{
    cursor: pointer;
}



.cartePostal{
    text-align: center;
}

.personnalisable{
    border: 2px solid #818388;
    width:530px;
    height: 530px;
    display: inline!important;
    box-sizing: content-box;
    margin: auto auto 15px auto;
}

.imageCarte{
  border: 1px solid #818388;
    width: 43px;
    height: 100%;
    margin: 5px 0;
    cursor: pointer;
}

.carteMiniature{
text-align: center;
}

.carteMiniature img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
max-width: 100%;
}


.carteMiniature img:hover{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}


input{
    margin: 0;
    padding: 0;

}


.carteValide {
    margin: 10px auto 10px auto;
    text-align: center;
}

.Enregistrer{
    margin:auto;

}

    /*-------------------------------------------------------------------------cadre4-------------------------------------------------------------------------------------*/

.ajouterCarte {
    width: 6vh;
    height: 6vh;
    /*border-style: solid;*/
    border-radius: 1.31vh;
    /*margin: 5.5vh 0 0 7vh;*/
    position: relative;
    background-color: #7fbb45;
    cursor: pointer;
    display: inline-block;

}

.texte1 {
    width: 21vh;
    height: 4vh;
    position: absolute;
    margin: 5.3vh 0 0 -13vh;
    line-height: 4vh;
    font-size: 2vh;
}

.modifierCarte {

    width: 6vh;
    height: 6vh;
    /*border-style: solid;*/
    border-radius: 1.31vh;
   /* margin: 5.5vh 0 0 44vh;*/
    position: relative;
     background-color: #7fbb45;
    cursor: pointer;
    display: inline-block;
}
.texte2 {
    width: 17vh;
    height: 4vh;
    position: absolute;
    margin: 5.3vh 0 0 -11vh;
    line-height: 4vh;
    font-size: 2vh;
}
.ajouterCarte::after {
    content: "";
    height:4vh;
    display:block;
    width:0.7vh;
    left:2.7vh;
    top:1vh;
    background: #fff;
    position:absolute;
}

.modifierCarte::after {
    content: "";
    height:4vh;
    display:block;
    width:0.7vh;
    left:2.7vh;
    top:1vh;
    background: red;
    position:absolute;
    -ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
    transform: rotate(40deg);
}

.supprimerCarte {
    width: 6vh;
    height: 6vh;
    /*border-style: solid;*/
    border-radius: 1.31vh;
    /*margin: 5.5vh 0 0 92.7vh;*/
    position: relative;
    background-color: red;
    cursor: pointer;
    display: inline-block;
}
.texte3 {
    width: 18vh;
    height: 4vh;
    position: absolute;
    margin: 5.3vh 0 0 -11.5vh;
    line-height: 4vh;
    font-size: 2vh;
}
.ajouterCarte:hover:after, .modifierCarte:hover:after, .supprimerCarte:hover:after{
    background: #454E53;
}

.ajouterCarte:hover:before,.modifierCarte:hover:before,.supprimerCarte:hover:before {
    background: #454E53;
}

.ajouterCarte::before,.modifierCarte::before,.supprimerCarte::before {
    content: "";
    height:4vh;
    display:block;
    width:0.7vh;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    left:2.7vh;
    top:1vh;
    background: #fff;
    position:absolute;
}

.modifierCarte::before {
    content: "";
    height:4vh;
    display:block;
    width:0.7vh;
    -ms-transform: rotate(135deg); /* IE 9 */
    -webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
    transform: rotate(135deg);
    left:2.7vh;
    top:1vh;
    background: blue;
    position:absolute;
}

.optionCarte{
    text-align: center;
}

#montab_wrapper{
    margin-top: 10vh!important;
}

.imgEdit {
    width: 3.5vh;
    height: 3.5vh;
    margin: 0.5vh 0 0 1.2vh;
    cursor: pointer;
    position: absolute;
}

.carteNonTransmit{
    /*background: red;*/
    color: red;
    font-size: 2vh;
    position: absolute;
    top: 0.5vh;
    /*width: 90vh;*/
    max-height: 4.8vh;
    text-align: center;
     overflow: hidden;
     line-height: 4.8vh;
     border-radius: 0.93vh;
}

.carteTransmit{
    /*background: #7FBB45;*/
    color: #7FBB45;
    font-size: 2vh;
    position: absolute;
    top: 0.5vh;
    /*width: 90vh;*/
    max-height: 4.8vh;
    text-align: center;
     overflow: hidden;
     line-height: 4.8vh;
     border-radius: 0.93vh;
}





.connexion{
  padding: 85px;
}

.circle{
margin: 15px auto 15px auto;

}



.renseigner{
  background : #0080C9;
  padding: 10px 0 10px 0;
  border-radius :9px;
  -moz-border-radius : 9px;
  -webkit-border-radius : 9px;
  text-align: center;
  font-family: "Roboto Slab";
  font-size: 20px;
  color:#fff;
}


input[type=text] {
 background-color:#fff;
  margin-top:20px;
  border-radius : 9px 0px 0px 9px;
  -moz-border-radius : 9px 0px 0px 9px;
  -webkit-border-radius : 9px 0px 0px 9px;
  font-family: "Roboto Slab";
  font-size: 20px;
  padding: 13px 0 13px 0;
  border: none;
  text-align: center;
  width: 100%;
 }

 textarea:focus::-webkit-input-placeholder { color:transparent;}
 textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
 textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
 textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */


.valider{
  margin-top:20px;
  border-radius : 0px 9px 9px 0px;
  -moz-border-radius : 0px 9px 9px 0px;
  -webkit-border-radius : 0px 9px 9px 0px;
   font-family: "Roboto";
   font-weight: 700;
   font-size: 25px;
   cursor: pointer;
   background-color: #0080C9;
   color: #fff;
   padding: 10px 0 10px 0;
   text-align: center;
}



/*.imageModal{
  width: 40px;
  height: 40px;
  display: inline-block;
  top: -8px;
position: relative;
}*/
 .titreModal{
   font-family: 'roboto_bold';
   font-weight: normal;
   font-style: normal;
   font-size: 12px;
   color: #0080C9;
   margin-top: 4px!important;
   display: inline-block;
  width: calc(100% - 50px);
 }


 .BoutonClose {
    width: 40px;
    height: 40px;
    border-style: solid;
    border-radius: 50%;
    position: relative;
    background-color: #0080C9;
    cursor: pointer;
    display: inline-block;
    float: right;

}

.BoutonClose::after {
    content: "";
    height:26px;
    display:block;
    width:4px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    left:18px;
    top:7px;
    background: #fff;
    position:absolute;
    border-radius: 10px;
}

.BoutonClose::before{
    content: "";
    height:26px;
    display:block;
    width:4px;
    -ms-transform: rotate(135deg); /* IE 9 */
    -webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
    transform: rotate(135deg);
    left:18px;
    top:7px;
    background: #fff;
    position:absolute;
    border-radius: 10px;
}
.besoin{
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color:#0080C9;
  margin: 5px auto 20px auto;
  text-align: center;

}

.information{
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color:#0080C9;
  margin: 5px auto 20px auto;
  text-align: center;

}

.BoutonPrecedent {
   width: 40px!important;
   height: 40px!important;
   border-style: solid;
   border-radius: 50%;
   position: relative;
   background-color: #0080C9;
   cursor: pointer;
   display: inline-block;

}

.BoutonPrecedent::after {
   content: "";
   height:18px;
   display:block;
   width:3px;
   -ms-transform: rotate(45deg); /* IE 9 */
   -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
   transform: rotate(45deg);
   left:17px;
   top:6px;
   background: #fff;
   position:absolute;
   border-radius: 10px;
}

.BoutonPrecedent::before{
  content: "";
height: 18px;
display: block;
width: 3px;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
left: 17px;
top: 17px;
background: #fff;
position: absolute;
border-radius: 10px;
}

.BoutonSuivant {
   width: 75px!important;
   height: 40px!important;
   border-style: solid;
   border-radius : 6px;
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
   position: relative;
   background-color: #0080C9;
   cursor: pointer;
   display: inline-block;
   font-family: 'Roboto';
 font-weight: 700;
 font-style: normal;
 color:#fff;
 line-height: 40px;
float: right!important;
text-align: center;
top:0px;
}

.retourne{
  font-family: 'Roboto';
font-weight: 700;
font-style: normal;
  font-size: 14px

}

.BoutonRetourne {
   /*width: 144px!important;*/
   height: 40px;
   padding-top: 8px;
   font-family: 'Roboto';
   line-height: 12px;
 font-weight: 700;
 font-style: normal;
 padding-left: 25px!important;
 color:#fff;
 font-size: 10px;
   border-radius : 9px;
 -moz-border-radius : 9px;
 -webkit-border-radius : 9px;
   border-style: solid;
   position: relative;
   background-color: #0080C9;
   cursor: pointer;
   display: inline-block;
   text-align: center;
}

.BoutonRetourne::after {
   content: "";
   height:16px;
   display:block;
   width:3px;
   -ms-transform: rotate(45deg); /* IE 9 */
   -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
   transform: rotate(45deg);
   left:12px;
   top:7px;
  background: #fff;
   position:absolute;
   border-radius: 10px;
}

.BoutonRetourne::before{
  content: "";
height: 16px;
display: block;
width: 3px;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
left: 12px;
top: 16px;
background: #fff;
position: absolute;
border-radius: 10px;
}
.BoutonImpression{
     /*width: 144px!important;*/
     height: 40px;
     padding-top: 8px;
     line-height: 12px;
     border-style: solid;
     border-radius : 9px;
     -moz-border-radius : 9px;
     -webkit-border-radius : 9px;
     position: relative;
     background-color: #0080C9;
     cursor: pointer;
     display: inline-block;
     font-family: 'Roboto';
   font-weight: 700;
   font-style: normal;
   font-size: 9.5px;
   color:#fff;
  text-align: center;
  border:0;
}

.visuelCarte{
  border: 1px solid #818388;
  height:auto;
margin: 6px auto 10px auto;

}

.contenuModal{
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
}

.contenuNomCarte{
  font-family: 'Roboto';
  font-weight: normal;
  font-style: italic;
  font-size: 12px;
}



.personaliser{
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  font-family: "Roboto";
  font-weight: normal;
  font-style: normal;
  font-size: 13px;
  cursor: pointer;
  background-color: #0080C9;
  color: #fff;
  padding: 5px;
  text-align: center;
  margin-top: 10px;
  position: absolute;
}

.message{
  font-family: "Roboto";
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color: #0080C9;
}

.MotFin{
margin-bottom: 10px;
}

.margeConfirmation{
margin-top: 5px
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .modal-content {
      border-radius : 14px!important;
  -moz-border-radius : 14px!important;
  -webkit-border-radius : 14px!important;
  }
  .bandeau{
      text-align:center;
      font-size: 55px;
      padding: 36px 0 36px 0;
  }
  .circle{
  margin: 36px auto 36px auto;

  }
  .renseigner{
    padding: 16px 0 16px 0;
    font-size: 25px;
  }

  .titreModal{
    font-size: 18px;
    color: #0080C9;
    margin-top: 4px!important;
    display: inline-block;
        width: auto;
  }

  /*.imageModal{
    width: 57px;
    height: 57px;
    top: -1px;
    display: inline-block;
  }*/

  .imageCarte{
      width: 97px;
      height: 100%;
      margin: 5px 0;
      cursor: pointer;
  }

  .personaliser{
  padding: 10px;
  font-size: 17px;

  }
  .contenuModal{
    font-family: 'Roboto';
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
  }

  .contenuNomCarte{
    font-family: 'Roboto';
    font-weight: normal;
    font-style: italic;
    font-size: 17px;
  }

  .BoutonPrecedent {
     width: 50px!important;
     height: 50px!important;
    margin-left: 31px;
  }

  .BoutonPrecedent::after {
     content: "";
     height:24px;
     display:block;
     width:4px;
     -ms-transform: rotate(45deg); /* IE 9 */
     -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
     transform: rotate(45deg);
     left:21px;
     top:6px;
     background: #fff;
     position:absolute;
     border-radius: 10px;
  }

  .BoutonPrecedent::before{
    content: "";
  height: 24px;
  display: block;
  width: 4px;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  left: 21px;
  top: 21px;
  background: #fff;
  position: absolute;
  border-radius: 10px;
  }

  .BoutonSuivant {
     width: 130px!important;
     height: 42px!important;
     font-size: 25px;
     line-height: 42px;
    float: none!important;
  }

  .BoutonRetourne {

    font-size: 11px;
line-height: 14px;
padding-top: 6px;
}

  .BoutonRetourne::before,.BoutonRetourne::after{
left:18px
}

.retourne{
  font-size: 16px;
}
.BoutonImpression{
line-height: 14px;
   font-size: 11px;
   padding-top: 6px;
}

.message{
  font-size: 17px;
}

.MotFin{
margin-bottom: 40px;
}
.margeConfirmation{
margin-top: 30px
}
.information{

  font-size: 17px;
}

.LimiteCaractere {
  font-size: 12px;
  margin: -300px 0 0 2px;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .modal-content {
      border-radius : 33px!important;
  -moz-border-radius : 33px!important;
  -webkit-border-radius : 33px!important;
  }
  .bandeau{
      text-align:center;
      font-size: 40px;
      padding: 26px 0 26px 0;
  }

  .circle {
    margin-top: 82px;

  }

  .titreModal{
    font-size: 25px;
    margin-top: 0px!important;
    margin-left: 5px!important;
  }

  .renseigner{
    padding: 16px 0 16px 0;
    font-size: 24px;
    margin-top: 162px;

  }

  .carteMiniature{
  padding-left: 25px!important;
  }

  .imageCarte{
      width: 131px;
      height: 100%;
      margin: 5px 0;
      cursor: pointer;
  }

  .contenuModal{
    font-family: 'Roboto';
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
  }

  .contenuNomCarte{
    font-family: 'Roboto';
    font-weight: normal;
    font-style: italic;
    font-size: 17px;
  }
  .BoutonPrecedent {
     width: 53px!important;
     height: 53px!important;
    margin-left: 334px;
  }
  .BoutonPrecedent::after {
     content: "";
     height:23px;
     display:block;
     width:4px;
     -ms-transform: rotate(45deg); /* IE 9 */
     -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
     transform: rotate(45deg);
     left:22px;
     top:9px;
     background: #fff;
     position:absolute;
     border-radius: 10px;
  }

  .BoutonPrecedent::before{
    content: "";
  height: 23px;
  display: block;
  width: 4px;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  left: 22px;
  top: 23px;
  background: #fff;
  position: absolute;
  border-radius: 10px;
  }
  .BoutonSuivant {
     width: 135px!important;
     height: 53px!important;
     font-size: 25px;
     line-height: 53px;
    float: none!important;
    left: -60px;
    top:0px;
  }

  .BoutonRetourne {

    font-size: 19px;
line-height: 24px;
height: 85px;
padding-top: 19px;
border-radius : 18px;
-moz-border-radius : 18px;
-webkit-border-radius : 18px;

}
.BoutonRetourne::after {
   content: "";
   height:30px;
   display:block;
   width:4px;
   -ms-transform: rotate(45deg); /* IE 9 */
   -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
   transform: rotate(45deg);
   left:24px;
   top:18px;
   background: #fff;
   position:absolute;
   border-radius: 10px;
}

.BoutonRetourne::before{
  content: "";
height: 30px;
display: block;
width: 4px;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
left: 23px;
top: 38px;
background: #fff;
position: absolute;
border-radius: 10px;
}
.retourne{
  font-size: 25px;
}


.BoutonImpression{
line-height: 24px;
   font-size: 19px;
   height: 85px;
   padding-top: 19px;
   border-radius : 18px;
   -moz-border-radius : 18px;
   -webkit-border-radius : 18px;
}

.information{

  font-size: 22px;
}

/*.MotFin{
margin-bottom: 80px;
}
.margeConfirmation{
margin-top: 70px
}*/
.alerte {
    margin: 20px auto 0 auto;

}

.LimiteCaractere {
  font-size: 12px;
  margin: -300px 0 0 2px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  .bandeau{
      text-align:center;
      font-size: 40px;
      padding: 26px 0 26px 0;
  }

  .circle {
    margin-top: 138px;

  }

  .renseigner{
    padding: 19px 0 19px 0;
    font-size: 29px;
    margin-top: 219px;

  }

  .valider{
     font-size: 30px;
      padding: 23px 0 23px 0;
  }

  input[type=text] {

    font-size: 29px;
    padding: 23px 0 23px 0;
   }

   .alerte {
       margin: 21px auto 0 auto;

   }
   .carteMiniature{
   padding-left: 25px!important;
   }

   .information{

     font-size: 22px;
   }
}
.gly-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

button{
  padding:unset!important;
}