@import url(https://fonts.googleapis.com/css?family=Poppins:400,300);
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Poppins', helvetica, sans-serif, arial;
}

a {
  color: #212121;
}
a:hover {
  font-style: underline;
  color: #F4AC3F;
}
a:focus {
  color: #ff9900;
  text-decoration: none;
}
a:active {
  color: #ff6600;
}
p a {
  color: #ff9900;
}
p a:visited {
  color: #cc6600;
}
a.p_link {
  text-decoration: underline;
}
input, select, textarea {
  border-radius: 0 !important;
  border: 1px solid #FCC675;
  padding: 0.8rem;
  background: #fff;
}
input:focus, select:focus, textarea:focus,
input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
/*   box-shadow: 0 0 5px rgba(13, 88, 166, 0.5) !important; */
  box-shadow:  0 0 4px #FF9900;
  border-color: #F4AC3F;
}
.form_input_error {
  box-shadow: 0 0 4px rgba(255,0,0,1);
  color: #f00;
}

table.no_border tbody tr td {
  border: none;
}

/* ICONS **********************************************************************/
/*.icon {

}*/
/******************************************************************************/

.upper {
  text-transform: uppercase;
}
.lower {
  text-transform: lowercase;
}
.capital {
  text-transform: capitalize;
}



.pagination > li > a, .pagination > li > span {
  color: #f90;
  border: none;
  transition: background-color 0.2s, color 0.2s;
}
.pagination > li > span:hover {
  background-color: red;
}
.pagination > li > a:hover {
  background-color: #FCC675;
  color: #fff;
}
.pagination > li > a:active {
  background-color: #fde1b5;
  color: #fff;
}
.pagination > li > a:focus {
  color: #fff;
}
.pagination > .disabled > span {
/*   color: red; */
}
.pagination > .active > span {
  background-color: #f90;
  border-color: #f90;
}
.pagination > .active > span:hover {
  background-color: #f90;
}


.mtb_1rem { margin-top: 1rem; margin-bottom: 1rem }
.mtb_2rem { margin-top: 2rem; margin-bottom: 2rem }
.mtb_3rem { margin-top: 3rem; margin-bottom: 3rem }
.mtb_4rem { margin-top: 4rem; margin-bottom: 4rem }
.mtb_5rem { margin-top: 5rem; margin-bottom: 5rem }
.mtb_6rem { margin-top: 6rem; margin-bottom: 6rem }
.mb_1rem { margin-bottom: 1rem }
.mb_2rem { margin-bottom: 2rem }
.mb_3rem { margin-bottom: 3rem }
.mb_4rem { margin-bottom: 4rem }
.mb_5rem { margin-bottom: 5rem }
.mb_6rem { margin-bottom: 6rem }
.mt_1rem { margin-top: 1rem }
.mt_2rem { margin-top: 2rem }
.mt_3rem { margin-top: 3rem }
.mt_4rem { margin-top: 4rem }
.mt_5rem { margin-top: 5rem }
.mt_6rem { margin-top: 6rem }

.val_t { vertical-align: top !important }
.val_m { vertical-align: middle !important }
.val_b { vertical-align: bottom !important }

.width_100-100 {
  width: 100%;
}


.orange { color: #f90 }
.color-primary-0 { color: #FF9900 } /* Main Primary color -> orange*/
.color-primary-1 { color: #FCC675 }
.color-primary-2 { color: #F4AC3F }
.color-primary-3 { color: #D88100 }
.color-primary-4 { color: #BC7100 }

.color-secondary-1-0 { color: #FBFE00 } /* Main Secondary color (1) -> JAUNE*/
.color-secondary-1-1 { color: #FAFC75 }
.color-secondary-1-2 { color: #F1F33F }
.color-secondary-1-3 { color: #D5D700 }
.color-secondary-1-4 { color: #B9BC00 }

.color-secondary-2-0 { color: #7409AA } /* Main Secondary color (2) -> VIOLET*/
.color-secondary-2-1 { color: #8B53A8 }
.color-secondary-2-2 { color: #7C30A3 }
.color-secondary-2-3 { color: #610690 }
.color-secondary-2-4 { color: #54037D }

.color-complement-0 { color: #0D58A6 }  /* Main Complement color */
.color-complement-1 { color: #537BA4 }
.color-complement-2 { color: #32689F }
.color-complement-3 { color: #08498D }
.color-complement-4 { color: #053F7A }


/* As RGBa codes */

.rgba-primary-0 { color: rgba(255,153,  0,1) }  /* Main Primary color */
.rgba-primary-1 { color: rgba(252,198,117,1) }
.rgba-primary-2 { color: rgba(244,172, 63,1) }
.rgba-primary-3 { color: rgba(216,129,  0,1) }
.rgba-primary-4 { color: rgba(188,113,  0,1) }

.rgba-secondary-1-0 { color: rgba(251,254,  0,1) }  /* Main Secondary color (1) */
.rgba-secondary-1-1 { color: rgba(250,252,117,1) }
.rgba-secondary-1-2 { color: rgba(241,243, 63,1) }
.rgba-secondary-1-3 { color: rgba(213,215,  0,1) }
.rgba-secondary-1-4 { color: rgba(185,188,  0,1) }

.rgba-secondary-2-0 { color: rgba(116,  9,170,1) }  /* Main Secondary color (2) */
.rgba-secondary-2-1 { color: rgba(139, 83,168,1) }
.rgba-secondary-2-2 { color: rgba(124, 48,163,1) }
.rgba-secondary-2-3 { color: rgba( 97,  6,144,1) }
.rgba-secondary-2-4 { color: rgba( 84,  3,125,1) }

.rgba-complement-0 { color: rgba( 13, 88,166,1) } /* Main Complement color */
.rgba-complement-1 { color: rgba( 83,123,164,1) }
.rgba-complement-2 { color: rgba( 50,104,159,1) }
.rgba-complement-3 { color: rgba(  8, 73,141,1) }
.rgba-complement-4 { color: rgba(  5, 63,122,1) }


.ftable {
  display: table;
}
.thead {
  display: table-header-group;
}
.tbody {
  display: table-row-group;
}
.tfoot {
  display: table-footer-group;
}
.tr {
  display: table-row;
}
.th {
  font-weight: bold;
}
.td, .th {
  display: table-cell;
}
.caption {
  display: table-caption;
}
.colgroup {
  display: table-column-group;
}

.gris { color: #727272 }

.block { display: block }
.inline_block { display: inline-block }
.inline { display: inline }

.titre_page {
  font-size: 2rem;
}

.ul_reset {
  padding: 0;
  list-style-type: none;
}
.ul_reset li {
  display: inline-block;
  padding: 0;
  margin: 0;
}


/*.bt_icon::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  background: #ff9900;
  padding: 0.8rem 0;
  transition: left 0.2s;
}*/

.bouton_orange, .button_orange {
  border: 1px solid #ff9900;
  background: #ff9900;
  color: white;
  padding: 0.8rem 1.4rem;
  transition: background-color 0.2s;
}
.bouton_orange:hover, .button_orange:hover {
  background-color: #ffaa00;
}
.bouton_orange:active, .button_orange:active {
  transform: translate(0, 2px);
}
/*.panier::after {
  content: "\e116";
}*/
/*.bouton_orange:hover::after {
  left: 0;
}*/

.bouton {
  border: 1px solid transparent;
  padding: 0.8rem 1.4rem;
  transition: background-color 0.2s;
}
.bouton:active {
  transform: translate(0, 2px);
}
a.bouton {
  display: inline-block;
}
a.bouton:hover {
  color: #fff;
  text-decoration: none;
}
a.bouton:active {
  color: #fff;
}

.bt_orange {
  border-color: #ff9900;
  background: #ff9900;
  color: white;
}
.bt_orange:hover {
  background-color: #ffaa00;
}
.bt_orange2 {
  border-color: #BC7100;
  background: #BC7100;
  color: white;
}
.bt_orange2:hover {
  background-color: #D88100;
}

.bt_bleu {
  border-color: #0D58A6;
  background: #0D58A6;
  color: white;
}
.bt_bleu:hover {
  background-color: #32689F;
}

.bt_violet {
  border-color: #7409AA;
  background: #7409AA;
  color: white;
}
.bt_violet:hover {
  background-color: #7C30A3;
}

.bt_jaune {
  border-color: #FBFE00;
  background: #FBFE00;
  color: #BC7100;
}
.bt_jaune:hover {
  background-color: #FAFC75;
}
.bt_gris {
  border-color: #555;
  background: #aaa;
  color: #333;
}
.bt_inactive {
  cursor: not-allowed;
}
.bt_gris.bt_inactive:hover {
  color: #333;
}

@media all and (max-width: 768px) {
  .bouton {
    margin-top: 0.4rem;
  }
}

.bouton_simple {
  border: none;
  background: transparent;
  color: #BC7100;
  padding: 0;
  transition: color 0.2s;
}
.bouton_simple:hover {
  color: #D88100;
}
.bouton_simple:active {
  transform: translate(0, 2px);
}
a.bouton_simple {
  display: inline-block;
}

.bouton_switch {
  width: 50px;
  height: 26px;
  position: relative;
  background: #fff;
  border: 1px solid #F4AC3F;
}
.bouton_switch::before {
  display: block;
  width: 24px;
  height: 22px;
  position: absolute;
  top: 1px;
  content: "";
  transition: background-color 0.5s;
}
.bouton_switch.allume::before {
  color: #fff;
  background-color: #f90;
  right: 1px;
}
.bouton_switch.allume:hover::before {
  background-color: #ccc;
}

.bouton_switch.eteint::before {
  color: #fff;
  background-color: #ccc;
  left: 1px;
}
.bouton_switch.eteint:hover::before {
  background-color: #f90;
}


.bt_a {
  display: inline-block;
  text-decoration: none !important;
  cursor: pointer;
  color: #fff;
}
.bt_a:hover {
  color: #fff;
}
.bt_jaune.bt_a, .bt_jaune.bt_a:hover {
  color: #BC7100;
}

/**
 *  Alerte cookies
 * -----------------------------------------------------------------------------
 */
#alerte_cookies {
  padding: 1rem 0;
  background: #ccc;
}
#alerte_cookies .container {
  position: relative;
  padding-right: 5rem;
}
#alerte_cookies .container p {
  font-size: 1.6rem;
  color: #333;
}
#alerte_cookies .container p, #alerte_cookies .container form {
  display: inline-block;
}
#alerte_cookies .container form {
  position: absolute;
  top: 0rem;
  right: 0.5rem;
}

/**
 *  Entete
 * -----------------------------------------------------------------------------
 */
#container_barre_top {
  background: #efefef;
}
#barre_top {
  padding: 0.4rem 0;
  color: #555;
}
#barre_top a {
  color: #555;
}
#barre_top .col-sm-7 {
  text-align: right;
}
@media all and (max-width: 768px) {
  #barre_top .col-sm-7 {
    text-align: left;
  }
}

#shopping_cart, #lien_connexion {
  display: inline-block;
  position: relative;
}
#shopping_cart > div {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
}
#shopping_cart > a, #lien_connexion > a {
  padding: 0.2rem;
  display: inline-block;
}
#shopping_cart > div > div > img {
  position: absolute;
  left: 2rem;
  top: 0;
  z-index: 4;
}
#shopping_cart table {
  width: 32rem;
  border: 1px solid #ccc;
  margin-top: 2rem;
  box-shadow: -5px 10px 16px rgba(0,0,0,0.6);
}
#shopping_cart table tbody td {
  padding: 0.5rem;
  font-size: 1.2rem;
  background: #fff;
}
#shopping_cart table tbody tr {
  border-bottom: 1px solid #ebebeb;
}
#shopping_cart table tfoot td {
  font-weight: bold;
  padding: 1rem 0.5rem;
  background: #f2f2f2;
}
#shopping_cart:hover > div {
  display: block;
}

#lien_connexion form {
  display: inline-block;
}

#opalona_locale {
  display: inline-block;
  height: 2rem;
  padding: 0 0.6rem;
  position: relative;
  margin: 0 0.5rem;
  cursor: default;
  vertical-align: middle;
}
/*@media all and (max-width: 768px) {
  #opalona_locale {
    float: right;
    padding: 0.5rem 1rem;
  }
}*/
/*#opalona_locale > img {
  display: block;
  width: 22px;
}*/
#opalona_locale .glyphicon {
  font-size: 2.2rem;
  line-height: 1;
  top: 0;
}
#opalona_locale:hover > div {
  display: block;
}
#opalona_locale > div {
  display: none;
  min-width: 24rem;
  padding: 0 1rem;
  position: absolute;
  right: 0;
  top: 100%;
  margin-right: -1rem;
  z-index: 5;
}
#opalona_locale > div > img {
  position: absolute;
  right: 1.4rem;
  top: 0;
  z-index: 4;
}
/*@media all and (max-width: 768px) {
  #opalona_locale > div > img {
    right: 2rem;
  }
}*/
#opalona_locale ul {
  padding: 0.4rem 0;
  border: 1px solid #ccc;
  margin-top: 20px;
  list-style-type: none;
  background: #fff;
  box-shadow: -5px 10px 16px rgba(0,0,0,0.6);
}
#opalona_locale ul li {
  display: block;
  text-align: left;
}
#opalona_locale ul li a {
  display: block;
  padding: 0.2rem 1rem;
  font-size: 1.4rem;
}
#opalona_locale ul li a:hover {
  background-color: #FCC675;
  text-decoration: none;
}
#opalona_locale ul li a:active {
  color: #fff;
}


#form_recherche_top {
  display: inline-block;
  font-size: 0;/* elimine le petit espace entre l'input et le bouton */
  width: 25.3rem;
  background: #fff;
  vertical-align: middle;
  border: 0.1rem solid #ccc;
}

#form_recherche_top input {
  width: 22rem;
  padding: 0.1rem 0.1rem 0.1rem 0.4rem;
}
#form_recherche_top button {
  width: 3rem;
  padding: 0.1rem 0.4rem 0.1rem 0.1rem;
  background: #fff;
}
#form_recherche_top input, #form_recherche_top button {
  font-size: 1.4rem;
  border: none;
  vertical-align: middle;
  margin: 0;
}


/*============================================================================*/
#entete, #wrapper_logo {
  position: relative;
}

#wrapper_logo {
  display: inline-block;
  margin: 4rem 0 1rem 0;
/*   background: moccasin; */
}

#slogan h1 {
  display: inline-block;
  color: #ff9900;
  font-size: 2rem;
  margin: 0 3.2rem;
  font-weight: normal;
  letter-spacing: 0.7rem;
  vertical-align: middle;
}
#slogan {
  min-width: 320px;
}
#slogan img {
  vertical-align: middle;
}


/**
 *  Menu
 * -----------------------------------------------------------------------------
 */
#menu {
  margin: 2rem 0;
  border-bottom: 1px solid #f90;
}
#menu ul  {
  text-align: center;
  padding: 0;
}
#menu ul li {
  display: inline-block;
}
#menu a {
  display: inline-block;
  padding: 1rem;
  border: 1px dashed transparent;
  overflow: hidden;
  position: relative;
  color: #333;
/*   transition: border-color 0.4s, background-color 0.4s; */
  transition: border-color 0.3s;
}
#menu_nouveautes a {
  color: #f90;
}
/*#menu a::after {
  content: "";
  width: 100%;
  position: absolute;
  left: -100%;
  bottom: 0.2rem;
  transition: left 0.2s;
}
#menu a:hover::after {
  left: 0;
}*/
#menu a:hover {
/*   background-color: #ffe0b2; */
  text-decoration: none;
  border-color: #f90;
}
#menu a:active {
  background: #fff;
  color: #f60;
  border-color: #f90;
}
/*#menu_blanches a:hover {
  border-color: #f90;
}
#menu_essentielles a:hover {
  border-color: #9cace3;
}
#menu_serie_limitee a:hover {
  border-color: #d83377;
}
#menu_casual a:hover {
  border-color: #153570;
}
#menu_chemisiers a:hover {
  border-color: #fecc3b;
}
#menu_accessoires a:hover {
  border-color: #260e0c;
}
#menu_nouveautes a:hover {
  border-color: #f42211;
}*/
#menu_hamburger {
  display: none;
}

@media all and (max-width: 767px) {
  #container_barre_top {
    display: none;
  }
  #opalona_locale  {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
  }
  #opalona_locale .glyphicon {
    color: #ccc;
    font-size: 3rem;
  }
  #opalona_locale > div {
    padding: 0;
    left: 0;
    top: 3rem;
  }
  #opalona_locale ul li a {
    padding: 0.2rem 1.6rem;
    font-size: 1.8rem;
  }
  #opalona_locale ul li a:hover {
    color: #fff;
  }
  #opalona_locale > div > img {
    left: 1.2rem;
  }

  #wrapper_logo {
    margin-top: 8rem;
  }

  #menu {
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    z-index: 6;
    margin: 0;
    border: none;
    text-align: right;
  }

/*  #menu.toggle:hover ul, #opalona_locale.toggle:hover ul {
    display: block;
  }*/

  #menu_hamburger {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 3.6rem;
    line-height: 1;
    cursor: default;
    color: #ccc;
  }

  #menu ul {
    display: none;
    padding: 0.8rem 0;
    border: 1px solid #ccc;
    list-style-type: none;
    background: #fff;
    box-shadow: -5px 10px 16px rgba(0,0,0,0.6);
  }
  #menu:hover > ul {
    display: block;
  }
  #menu ul li {
    display: block;
    text-align: left;
  }
  #menu ul li a, #menu ul li form button {
    display: block;
    padding: 0.8rem 1.6rem;
    font-size: 1.8rem;
  }
  #menu ul li form button {
    width: 100%;
    border: none;
    background: none;
    text-align: left;
  }
  #menu ul li a:hover, #menu ul li form button:hover {
    background-color: #FCC675;
    text-decoration: none;
  }
  #menu_nouveautes a:hover {
    color: #fff;
  }
  #menu ul li a:active {
    color: #fff;
  }

  #entete {
    padding-bottom: 4rem;
    margin-bottom: 2rem;
  }
}


/**
 * Fixe le bas-page dans le bas de la fenetre
 */

.supercontainer {
  width: 100%;
  min-height: 100%;
  position: relative;
  padding-bottom: 56rem;
}
@media all and (min-width: 992px) {
  .supercontainer {
    padding-bottom: 30rem;
  }
}
@media all and (min-width: 768px) and (max-width: 991px) {
  .supercontainer {
    padding-bottom: 30rem;
  }
}
#le_bas {
  width: 100%;
  position: absolute;
  bottom: 0;
}

/**
 *  Accueil
 * -----------------------------------------------------------------------------
 */
.container_img_accueil {
  display: block;
  position: relative;
  margin: 0 auto;
  transition: color 0.2s;
}
.container_img_accueil span {
  display: block;
  width: 100%;
  padding: 1rem;
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 1.8rem;
  text-align: center;
  background-color: rgba(255,255,255,0.6);
  transition: background-color 0.3s, color 0.3s;
}
/*.container_img_accueil:hover {
}*/
.container_img_accueil:hover span {
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}
.container_img_accueil:active span {
  color: #fff;
  background-color: rgba(116,9,170,0.5);
}
.accueil_fond_gris {
  background-color: #efefef;
}


/**
 *  Produits
 * -----------------------------------------------------------------------------
 */
#bt_tissutheque {
  display: block;
  width: 325px;
  height: 45px;
  margin: 0 auto;
  line-height: 45px;
  color: #333;
  text-align: center;
  background: transparent url("../images/tissutheque.png") no-repeat scroll center center;
}

.produit {
  display: inline-block;
  width: 50%;
  max-width: 300px;
  position: relative;
  vertical-align: top;
  margin: 0.5rem 0.3rem 4rem 0.3rem;
  text-align: center;
}
@media all and (max-width: 992px) {
  .produit {
    width: 48%;
  }
}
@media all and (max-width: 430px) {
  .produit {
    width: 100%;
  }
}

.produit a {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.container_img_produit {
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.container_img_produit:hover .produit_image_tissu {
  opacity: 1;
}
.image_produit, .produit_image_tissu {
  min-height: 100px;
  display: block;
  width: 100%;
}
.produit_image_tissu {
  border: 1px solid #aaa;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
}
.description_produit {
  display: block;
  max-width: 230px;
  margin: 1rem auto 0 auto;
  color: #000;
  font-weight: 300;
}
.prix_produit {
  display: block;
  color: #333;
}
.extra_info_produit {
  width: 100%;
  padding: 0.8rem;
  position: absolute;
  left: 0;
  bottom: -100%;
  z-index: 2;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.6);
  color: #000;
  transition: bottom 0.2s;
}
@media all and (min-width: 992px) {
  .produit a:hover .extra_info_produit {
    bottom: 0;
  }
}
@media all and (max-width: 260px) {
  .extra_info_produit {
    display: none;
/*     min-height: auto; */
  }
}


#filtres h3 {
  font-size: 1.6rem;
  color: #000;
  border-left: 2px solid #f90;
  padding-left: 1rem;
}
#filtres h3:first-child {
  margin-top: 0;
}
/*#filtres ul li {
}*/
#filtres ul li .glyphicon {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.8rem;
/*   color: #7409AA; */
  color: #f90;
}
#filtres ul li a {
  display: block;
  padding-right: 1.2rem;
  font-size: 1.2rem;
  position: relative;
  vertical-align: middle;
  font-size: 1.4rem;
/*   background: #f2f2f2; */
}
#filtres ul {
  padding: 0 0 0 1rem;
  list-style-type: none;
}
.icone_filtre, .icone_filtre_g {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-color: transparent;
  background-repeat: no-repeat;
}
.icone_filtre_g {
  width: 50px;
  height: 50px;
}

.icone_color {
  background-image: url("../images/couleurs.png");
}
.color_56 {
  background-position: 0 0;
}
.color_52 {
  background-position: -20px 0;
}
.color_47 {
  background-position: -40px 0;
}
.color_54 {
  background-position: -60px 0;
}
.color_46 {
  background-position: -80px 0;
}
.color_48 {
  background-position: -100px 0;
}
.color_49 {
  background-position: 0 -20px;
}
.color_79 {
  background-position: -20px -20px;
}
.color_45 {
  background-position: -40px -20px;
}
.color_50 {
  background-position: -60px -20px;
}
.color_55 {
  background-position: -80px -20px;
}
.color_51 {
  background-position: -100px -20px;
}

.icone_poignets_90 {
  background: url("../images/carac_90.png") 0 0;
}
.icone_poignets_91 {
  background: url("../images/carac_91.png") 0 0;
}


.icone_col_86 {
  background: url("../images/carac_86.png") 0 0;
}
.icone_col_87 {
  background: url("../images/carac_87.png") 0 0;
}
.icone_col_132 {
  background: url("../images/carac_132.png") 0 0;
}

.icone_tissus {
  background-image: url("../images/tissus-chemises-opalona.jpg");
}
.tissu_123 {/*popeline*/
  background-position: 0px 0px;
}
.tissu_157 {/*gabardine*/
  background-position: -20px 0px;
}
.tissu_126 {/*twill*/
  background-position: -40px 0px;
}
.tissu_125 {/*oxford*/
  background-position: -60px 0px;
}
.tissu_128 {/*pin point*/
  background-position: -80px 0px;
}
.tissu_194 {/*natte*/
  background-position: -100px 0px;
}
.tissu_127 {/*chevron*/
  background-position: -120px 0px;
}
.tissu_158 {/*pique*/
  background-position: -140px 0px;
}
.tissu_124 {/*fil a fil*/
  background-position: -160px 0px;
}
.tissu_129 {/*zephir*/
/*   background-position: -180px 0px; */
}
.tissu_159 {/*lin*/
  background-position: -180px 0px;
}
.tissu_190 {/*denim*/
/*   background-position: -220px 0px; */
}
.tissu_160 {/*autres*/
  background-position: -200px 0px;
}



/**
 *  Page produits
 * -----------------------------------------------------------------------------
 */
.titre_nom_produit {
  font-size: 2rem;
  margin-top: 2rem;
}
.tab-content {
  min-height: 12rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}
#prix {
  font-size: 2.2rem;
}
.la_chemise_opalona ul li {
  margin-top: 0.6rem;
}
.filtre_actif {
/* voir opalona.js */
}
.filtre_inactif {
/* voir opalona.js */
}

/**
 *  Page contact
 * -----------------------------------------------------------------------------
 */
#formulaire_reponse {
  margin-top: 1rem;
  padding-left: 2rem;
/*   margin-bottom: 4rem; */
/*   border-bottom: 1px solid #f2f2f2; */
}
#bouton_repondre {
  display: none;
  margin-top: 2rem;
}

.email {
  width: 98%;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-top: 1rem;
}
/*.email p {
  color: #333;
}*/
.email_opalona {
  border-color: #FCC675;
  color: #D88100;
}
.email_client {
  text-align: right;
  border-color: #537BA4;
  color: #0D58A6;
}
.tjrsche {
  display: none;
}

/**
 *  Savoir faire
 * -----------------------------------------------------------------------------
 */
.titre_sv {
  margin: 0.2rem;
  font-size: 1.8rem;
}
.pagination_sv ul {
  margin: 0;
}
.sv_type_tissus img {
  width: 80px;
  height: 80px;
  display: inline-block;
  margin: 1rem 1rem 1rem 0;
}
#cadre_sv {
/*   border: 1px solid #f90; */
  border: 1px solid #FCC675;
  padding: 2rem 2rem;
  margin-bottom: 4rem;
}

/**
 *  Connexion
 * -----------------------------------------------------------------------------
 */
.connexion {
  width: 100%;
  padding: 2rem 1rem;
/*   margin: 0 auto; */
}
@media all and (min-width: 992px) {
  .connexion {
    width: 60%;
  }
}
.connexion label {
  display: block;
}

/**
 *  Boutique
 * -----------------------------------------------------------------------------
 */
#google_map {
  width: 100%;
  height: 600px;
}

/**
 *  Accessoires
 * -----------------------------------------------------------------------------
 */
.img_accessoires {
  display: inline-block;
  width: 100%;
  max-width: 450px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s;
}
.img_accessoires::after {
  display: block;
  left: 0;
  width: 100%;
  height: 4rem;
  content: "";
  position: absolute;
  bottom: -4rem;
  background: rgba(255,255,255,0.8) url("../images/fleche_grib.png") 50% 50% no-repeat;
  transition: bottom 0.2s;
}
.img_accessoires:hover::after {
  bottom: 0;
}
.img_accessoires:active {
  opacity: 0.8;
}

/**
 *  Tissutheque
 * -----------------------------------------------------------------------------
 */
.tissu {
/*   padding: 0.5rem; */
  margin-top: 2rem;
}
.tissu a {
  display: block;
  width: 100%;
  max-width: 270px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
/*   box-shadow: 0px 0px 5px rgba(0,0,0,0.5); */
}
.tissu a:hover {
  text-decoration: none;
}
.tissu a:hover .info_tissu {
  bottom: 0;
}
.tissu_tissutheque {
  display: block;
  width: 100%;
}

.info_tissu {
  display: block;
  width: 100%;
  padding: 0.4rem;
  position: absolute;
  bottom: -150px;
  font-size: 1.2rem;
  color: #000;
  background: rgba(255,255,255,0.6);
  transition: bottom 0.2s;
}

.chemises_tissutheque {
  padding: 5rem 0 0 0;
  position: relative;
/*   border: 1px solid #f90; */
  background: #f2f2f2;
}
#bt_fermer_chemises {
  display: block;
  width: 30px;
  height: 30px;
  border: none;
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: url("../images/fermer.png") 0 0 no-repeat;
}
#bt_fermer_chemises:hover {
  background-position: -30px 0;
}
.tissu_choisi a {
  border: 3px solid #f90;
/*   box-shadow: 0 0 20px #f90; */
}

/**
 *  Panier
 * -----------------------------------------------------------------------------
 */
.panier_qte input {
  width: 6rem;
  border: 1px solid #FCC675;
  text-align: right;
  padding: 0.2rem;
  font-family: mono;
}
.panier_qte button {
  width: 6rem;
  margin-top: 1rem;
}

#panier_total td {
  font-size: 1.6rem;
  font-weight: bold;
}

/**
 *  Administration
 * -----------------------------------------------------------------------------
 */
.table_adm thead tr {
  background: #f2f2f2;
}
.header_adm {
  padding: 1.2rem;
  border: 1px solid #ccc;
  border-bottom: none;
  margin-bottom: 0;
  font-size: 1.6rem;
  font-weight: bold;
  background: #f2f2f2;
  color: #D88100;
}
.form_adm {
  padding: 2rem;
  border: 1px solid #ccc;
}

.explicatif_retour {
  border-color: transparent !important;
}
.explicatif_retour p {
  font-size: 1.2rem;
  color: #D88100;
}

/**
 *  Validation_commande
 * -----------------------------------------------------------------------------
 */
.total_commande {
  font-size: 2rem;
  font-weight: bold;
}

/**
 *  Bas
 * -----------------------------------------------------------------------------
 */
#aller_en_haut_container {
  text-align: right;
}
.container.bas {
  border-top: 1px solid #ebebeb;
  padding-top: 1rem;
}
#le_bas h3 {
  font-size: 1.8rem;
}
#le_bas ul {
  padding: 0;
  list-style-type: none;
}
#le_bas ul a {
  display: block;
  padding: 0.6rem 0.4rem;
  color: #727272;
  transition: background-color 0.1s, color 0.1s;
}
#le_bas ul a:active {
  color: #fff;
  background: #f90;
}
@media all and (min-width: 768px) {
  #le_bas ul a {
    padding: 0.1rem 0.4rem;
  }
}

.lien_image_bas {
  display: block;
  text-align: center;
}
.lien_image_bas img {
  display: inline-block;
}
.lien_image_bas span {
  display: block;
}
@media all and (max-width: 768px) {
  .lien_image_bas {
    display: none;
  }
}

#copyright {
  background: #f0f0f0;
  padding: 0.2rem 0.6rem;
}

/**
 *  Popup
 * -----------------------------------------------------------------------------
 */
.resultat_rech {
  display: block;
  margin: 1rem 0;
  padding: 0.5rem;
  overflow: hidden;
}
.resultat_rech img {
  display: block;
  float: left;
  margin-right: 2rem;
}
a.resultat_rech:hover {
  text-decoration: none;
  color: #537BA4;
  background: #f2f2f2;
}
.resultat_rech span {
  text-decoration: underline;
}

/**
 *  Popup
 * -----------------------------------------------------------------------------
 */
#popup {
  display: none;
  padding: 1rem;
}
#popup p {
  margin: 1.2rem 1rem;
}
#popup img {
/*   margin: 1.2rem 1rem; */
}
#continuer, #fermer {
  display: block;
  margin: 1rem auto;
  width: 94%;
  font-size: 1.8rem;
}


/**
 *  Soldes
 * -----------------------------------------------------------------------------
 */
.logo_soldes {
  padding-bottom: 1rem;
  position: relative;
  background-size: 100%;
  background-color: #f90;
  background-repeat: no-repeat;
  background-position: 0 50%;
}
@media all and (max-width: 640px) {
  .logo_soldes {
    background-repeat: repeat-y;
  }
}
#slogan.slogan_soldes h1 {
  color: #fff;
}
#logo_opalona, #slogan {
  position: relative;
  z-index: 1;
}
#lien_soldes {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 0 !important;
  z-index: 0;
  background: transparent;
}

.prix_soldes {
  display: block;
  padding: 0.2rem;
  position: absolute;
  left: -0.5rem;
  top: 0.5rem;
  z-index: 2;
  color: #fff;
  background: #f60;
  font-size: 1.8rem;
  line-height: 2rem;
}
.prix_soldes:before {
  display: block;
  border-left: 0.5rem solid transparent;
  border-top: 0.8rem solid #b50;
  content: "";
  position: absolute;
  left: 0;
  top: 2.4rem;
}
.detail_produit_prix_soldes span {
  display: inline-block;
  padding: 0.4rem 1rem;
  color: #f60;
  font-size: 3rem;
  font-weight: bold;
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}


/**
 *  Page chemise-blanche
 * -----------------------------------------------------------------------------
 */
.lien_gros {
  display:inline-block;
  padding: 1rem 2rem;
  position: relative;
  font-size: 2rem;
  color: #fff;
  background: #FF9900;
  border-radius: 3px;
  transition: background-color 0.2s;
}
.lien_gros:hover {
  color: #fff;
  background: #F4AC3F;
  text-decoration: none;
}
.lien_gros:active {
  color: #fff;
}

.ftable.pg_ch_ligne .td {
  vertical-align: top;
}
.pg_ch_ligne {
  width: 100%;
  margin-top: 2rem;
}

.pg_ch_img, .pg_ch_logo_txt {
  width: 25%;
}
.pg_ch_img {
  height: 380px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.pg_ch_logo_txt {
  background-color: #999;
  color: #fff;
}
.pg_ch_logo_txt img {
  margin-top: 4rem;
}
.pg_ch_logo_txt h2 {
  padding: 0 2rem;
  margin: 8rem 2rem 2rem 2rem;
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: center;
}
.pg_ch_txt {
  width: 50%;
  background-color: #efefef;
  font-size: 1.4rem;
  padding: 2rem;
  vertical-align: middle !important;
}

@media all and (min-width: 992px) and (max-width: 1200px) {
  .pg_ch_logo_txt h2 {
    margin-top: 6rem;
  }
}
@media all and (max-width: 991px) {
  .ftable.pg_ch_ligne,
  .ftable.pg_ch_ligne > .tr,
  .td.pg_ch_txt,
  .cont_tabl_int  {
    display: block;
  }
  .pg_ch_logo_txt h2 {
    margin-top: 3rem;
  }
  .td.pg_ch_img {
    width: 40%;
    height: 280px;
  }
  .td.pg_ch_logo_txt {
    width: 60%;
  }
  .td.pg_ch_txt, .cont_tabl_int, .cont_tabl_int .ftable {
    width: 100%;
  }
}
@media all and (max-width: 565px) {
  .td.pg_ch_img {
    width: 50%;
    min-height: 200px;
  }
  .td.pg_ch_logo_txt {
    width: 50%;
  }
  .pg_ch_logo_txt img {
    width: 80%;
  }
}


/**
 *  Black Friday
 * -----------------------------------------------------------------------------
 */
#hk_buttons {
  padding: 10px;
}
#bf_logo {
  display: inline-block;
  padding: 2px 4px;
  position: absolute;
  top: 0;
  left: 100%;
  font-size: 12px;
  color: #fff;
  background-color: #000;
  cursor: pointer;
}
/**
 *  Noel
 * -----------------------------------------------------------------------------
 */
.noel {
  background-color: #B22222;
  padding-bottom: 2rem;
}
.info_livraison {
  font-size: 1.6rem;
  padding: 0.5rem;
  color: #B22222;
}
@media all and (max-width: 720px) {
  .info_livraison {
    padding: 0.5rem 60px;
  }
}
.info_livraison .glyphicon {
  font-size: 1.8rem;
}


/**
 * Cache google iframe
 * -----------------------------------------------------------------------------
 */
[name='google_conversion_frame'] {
  display: none;
}