@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

body {  
    background: #e6e6e6 url(img/pat.png);
    margin:0;
    padding: 0;
    font:400 14px 'Open Sans',Arial, sans-serif;
    color: #8c7d7d;
}

img, a {border: 0}
a, a:link, a:visited  {font: 14px 'Open Sans',Verdana, sans-serif; color: #ff6600; text-decoration:none;}
a:hover { color:#ff6600; text-decoration: none; background-color: transparent; }

a.titre_link, a.titre_link:link, a.titre_link:visited {
  font:600 18px 'Open Sans',Verdana, sans-serif; color: #ff6600; 
  text-decoration:none; padding:3px; margin:15px 0;
}
a.titre_link:hover { background:#ff6600; color:#fff; }

i { background-color: #eee; padding:3px; margin:2px; }
i:hover { cursor: pointer; }

.btn-lien {color: #fff !important;}


.clear { clear:both; }
.left { float:left; }
.right { float:right; }
.relative { position:relative; }
.center { text-align:center; }
.prod-border { border:solid 1px #000; }

h1 {}
h2 { margin:10px 0; }
h3 {}
h4 { margin:0;  }

.col-centered{
    float: none;
    margin: 0 auto;
}

.box-sizing {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

*, *:after, *:before, .box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.transform-center {
  -webkit-transform: translateX(-50%) translateY(-50%) ;
  -moz-transform: translateX(-50%) translateY(-50%) ;
  -ms-transform: translateX(-50%) translateY(-50%) ;
  -o-transform: translateX(-50%) translateY(-50%) ;
  transform: translateX(-50%) translateY(-50%) ;
}

hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }


label { font:600 18px 'Open Sans',sans-serif; padding:0; margin:0 0 5px 0;  }

input[type="radio"],
input[type="checkbox"] {  
    padding: 0 4px; 
    margin:5px 5px 0 0;
    color:#000;
    font:600 18px 'Open Sans',Arial;
}

.radio, .checkbox {
    display: block;
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-left: 20px;
}


.form-control {
  font:600 18px 'Open Sans',Arial !important;
  color: #000 !important;
}

/*
  .checkbox label:after {
    content: '';
    display: table;
    clear: both;
  }

  .checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
  }

  .checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 24%;
    left: -1px;
    color:#449d44;
  }

  .checkbox label input[type="checkbox"] {
    display: none;
  }

  .checkbox label input[type="checkbox"]+.cr>.cr-icon {
    opacity: 0;
  }

  .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
    opacity: 1;
  }

  .checkbox label input[type="checkbox"]:disabled+.cr {
    opacity: .5;
  }
*/

.form-group-padding { padding:0 10px; }
  

.bt-fiche {
  position:fixed;z-index:200;
  top:0;
  left:50%;
  margin:0px;padding:10px !important;
  width:150px;

  -webkit-transform: translateX(-50%) translateY(0%) ;
    -moz-transform: translateX(-50%) translateY(0%) ;
    -ms-transform: translateX(-50%) translateY(0%) ;
  -o-transform: translateX(-50%) translateY(0%) ;
    transform: translateX(-50%) translateY(0%) ;
}



.icon-modal-abonnements-modifier {
  display: inline-block;
  position: absolute;
  top:5px; right:5px;
  z-index:10;

  width:auto; height:auto;
  cursor: pointer;
}


.icon-modal-abonnements-supprimer {
  display: inline-block;
  position: absolute;
  top:5px; left:5px;
  z-index:10;

  width:auto; height:auto;
  cursor: pointer;
}


/* - - Modal * Boostrap */
.modal-titre{
  width:100% !important; 
  max-width: 100% !important; 
  background:#333; 
  color:#fff; 
  font:400 23px 'Open Sans', Arial; 
  padding:15px 20px 20px 20px; 
  margin:0 auto 0 auto;
}

.container-wrapper {
  padding:25px; background-color: #fff;
}

.row-header {
  margin:0 0 50px 0;
}

.row-menu {
  margin:0 0 0 0;
}

.row-header-item {   }
.row-header-item img { width:100%; height:auto; }


.row-contenu {
  margin:25px 0;
}

.titre-jaune { 
  color:#000; 
  width:auto; height: auto;
  display:inline-block;
  padding:5px 8px; margin:10px 0;
  background-color: #ffe451;
  font:400 16px 'Open Sans', sans-serif;
}

.titre-gris { 
  color:#000; 
  width:auto; height: auto;
  display:inline-block;
  padding:5px 8px; margin:10px 0;
  background-color: #ddd;
  font:400 16px 'Open Sans', sans-serif;
}

.premium-titre {
  width:auto; height:auto;
  display:inline-block;
  font:700 14px 'Open Sans',Arial;
  background:#f00;color:#fff;
  text-align:center;
  padding:5px; margin:0 0 10px 0;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  ARTICLE - - - */
.article-en-attente { color:#fff; background:#999; padding:5px; margin:15px 0 0 0; display:inline-block;}
.article-publie { color:#fff; background:#04e119; padding:5px; margin:15px 0 0 0; display:inline-block;}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  dropzone - - - */
.dropzone {
  width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  border-radius: 0 !important;
  margin: 0; padding: 0;
  border:solid 1px #ccc;
}

.dropzone .dz-default.dz-message {
  border:solid 2px #fff;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.dropzone .dz-preview {
  border:solid 2px #ddd;
  margin: 0 !important; padding: 0 !important;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Code promo - - - */
#cp-envoi-ok {
  width: 100%; height: auto;
  margin: 10px 0; padding: 15px;
  border:solid 1px #ccc;
  text-align: center;
  background-color: #eee;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - SORTABLE - - - */
ul.list-item{
  list-style:none;
  height:auto;
  padding:0; margin:0;
}

ul.list-item li{

  padding:10px;
  cursor:move;

  width:90px;
  height:125px;
  float:left;
  margin:10px;
  background:#fff;
  color:#212326;
  font-size:12px;
  -moz-box-shadow:2px 2px 5px #ccc;

  text-align:center;

  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul#sortable li.fantom,
ul#sortable-page li.fantom,
ul#sortable-promo li.fantom  {
  background:#fcfcfc;
  border:5px dashed #ccc;
  width:100px; height:150px;
}

#sortable div.fantom,
#sortable-page div.fantom,
#sortable-promo div.fantom {
  background:#f3f3f3;
  border:2px dashed #999;
  width:100%; height:125px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Liste Header- - - */
.liste-header{
  background:#8c7d7d;
  color:#fff;
  font: 16px 'Open Sans',Verdana, sans-serif; 
  padding: 5px;
  margin: 0px;
}

.liste-flex-container {
  padding: 10px;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: nowrap;
  flex-wrap: wrap;
  justify-content: space-around;
  -webkit-justify-content: space-between;

  background: #fafafa;

  cursor: pointer;  
}

.liste-flex-container:hover,
.liste-flex-container:nth-of-type(odd):hover {
  background-color: #fc0;
}

.liste-flex-item {
  height: auto; 
  padding: 5px;
  margin: 0px;  
}

.liste-flex-container:nth-of-type(odd) {
    background: #e0e0e0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Media Queries - - - */
@media only screen and (max-width: 991px) { 
  .row-header-item { text-align:center;  }
  .row-header-item img { width:50%; height:auto; }
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Galerie images --*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --*/

ul.liste-galerie {
  list-style:none;
  width:100%; height:auto;
  padding:0; margin:0;
}

ul.liste-galerie li {
  padding:0; margin:0 0 15px 0;
  cursor: pointer;
  border:solid #ccc 1px;
}

.galerie-flex-zone {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  width:100%; height:auto;
  padding:0; margin:0;
  text-align: left; 

  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: left;
  -moz-justify-content: left;
  justify-content: left;

  flex-wrap: nowrap;
  
}

.galerie-flex-zone hr {
  width:65%; height: 10px; 
  border-bottom: solid 1px #fff; 
  padding:0 0 0 0; margin:10px auto 0 auto;
  background-color: #ccc;
}

.galerie-flex-zone img { width:100%; max-width:350px; height:auto; }

.galerie-flex-zone h1 {
  font:600 16px Arial, sans-serif;
  color:#000;
  margin:0 0 10px 0;
}

.galerie-flex-item-image {
  width:15%; height: auto;
  background: rgba(255,255,255,0.9);
  padding: 15px; margin: 0px;
  text-align:center; 
  border-right:solid 1px #ccc;
}

.galerie-flex-item-texte {
  width:85%; height: auto;
  background: rgba(255,255,255,0.9);
  padding: 15px; margin: 0px;
}

#sortable-galerie > div {
  cursor: move;
}

#sortable-galerie > li {
  cursor: move;
}

ul#sortable-galerie li.fantom {
  background-color:rgba(0,0,0,0.35);
  background-image: url(img/pat.png);
  border:5px dashed #eee;
  width:100%; height:150px;  
}


#sortable-promo > div {
  cursor: move;
}

#sortable-galerie > div.fantom {
  background-color:rgba(0,0,0,0.35);
  background-image: url(img/pat.png);
  border:5px dashed #eee;
  width:100%; height:150px;  
}

  /* - - - - - - - - - - - - - - - - - - - - - - - - -  strike blanche ------ texte -----  */
.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap; 
  margin:0 0 10px 0;
}

.strike > span {
    position: relative;
    display: inline-block;
    font:700 18px 'Open Sans',Arial;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #fff;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}


.strike-black > span:before,
.strike-black > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #000;
}



/* - - - - - - - - - - - - - - - - - - - - - Noty */
  #noty
  {
    display:block;
    position:fixed;
    top:0px; left:50%;
    z-index:9000;
    width:100%; max-width:500px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;

    width:90%;

    -webkit-transform: translateX(-50%) translateY(0%) ;
    -moz-transform: translateX(-50%) translateY(0%) ;
    -ms-transform: translateX(-50%) translateY(0%) ;
    -o-transform: translateX(-50%) translateY(0%) ;
    transform: translateX(-50%) translateY(0%) ;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  
  .noty-success
  {
    border: 2px solid #00b944;
    border-top: none;
    color: #fff;
    background-color: #00b944;
    font:600 18px 'Open Sans',Arial, sans-serif;
  }

  .noty-error 
  {
    border: 2px solid  #d83737;
    border-top: none;
    color: #fff;
    background-color: #d83737;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - media queries --*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --*/
@media only screen and (max-width: 1066px) {

} 

@media only screen and (max-width: 768px) {

  .docs-flex {
    -webkit-flex-direction: column; /* Safari */
    flex-direction:         column;
  }

  .docs-flex-item {
    width: 100%;
  }


}