/*
#@squelettes-2021/CSS/STYLES.less
*/
/* =============================================================================
   RESET
   ===========================================================================*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
[hidden] {
  display: none;
}
figure {
  margin: 0;
}
/* selection */
* {
  outline: none;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Links */
a:hover,
a:active,
a:focus {
  outline: 0;
}
/* Image */
svg:not(:root) {
  overflow: hidden;
}
object {
  max-width: 100%;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
.ie7 img {
  -ms-interpolation-mode: bicubic;
}
/* Bases */
html {
  font-size: 62.5%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  line-height: 1;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
}
/* =============================================================================
   TYPOGRAPHIE & CONTENU
   ===========================================================================*/
/* Icones */
@font-face {
  font-family: 'icomoon';
  src: url('//www.casalonga.com/squelettes-2021/fonts/icomoon/icomoon.eot');
  src: url('//www.casalonga.com/squelettes-2021/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('//www.casalonga.com/squelettes-2021/fonts/icomoon/icomoon.woff') format('woff'), url('//www.casalonga.com/squelettes-2021/fonts/icomoon/icomoon.ttf') format('truetype'), url('//www.casalonga.com/squelettes-2021/fonts/icomoon/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icone {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
}
.icone:before {
  content: attr(data-icon);
}
/* basique */
#global {
  font-family: 'Helvetica', Sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1em;
  min-height: 100%;
  position: relative;
}
/* Titraille / Intertitres */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: 'Montserrat', sans-serif;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
hr {
  height: 1px;
  margin: 1.5em 0;
  border: 0;
  background: #4f4b53;
  color: #4f4b53;
}
h1,
.h1 {
  font-size: 30px;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 20px;
  margin-top: 20px;
}
h2,
.h2 {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 15px;
}
h3,
.h3 {
  font-size: 16.5px;
  font-size: 1.65rem;
  line-height: 1.2;
  margin-bottom: 10px;
}
h4,
.h4 {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.364;
  margin-bottom: 5px;
}
h5,
.h5 {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5em;
}
h6,
.h6 {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
}
body {
  font-size: 15px;
  font-size: 1.5rem;
}
/*------- =============== ---------*/
@media screen and (min-width: 1024px) {
  /* XLARGE ici les instructions pour écrans de plus de 1200 de large. (bureau grand ecran et + ) */
  h1,
  .h1 {
    font-size: 40.5px;
    font-size: 4.05rem;
    line-height: 1;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  h2,
  .h2 {
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 1;
    margin-bottom: 20px;
  }
  h3,
  .h3 {
    font-size: 19.5px;
    font-size: 1.95rem;
    line-height: 1.2;
    margin-bottom: 15px;
  }
  h4,
  .h4 {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.364;
    margin-bottom: 10px;
  }
  h5,
  .h5 {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5em;
  }
  h6,
  .h6 {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
  }
  body {
    font-size: 15px;
    font-size: 1.5rem;
  }
}
/*--- @media 1200---*/
/* Taille et epaisseur */
.t_petit {
  font-size: 0.6em;
}
.petit {
  font-size: 0.8em;
}
.medium {
  font-size: 1em;
}
.grand {
  font-size: 1.2em;
}
.t_grand {
  font-size: 1.5em;
}
/*------- =============== ---------*/
@media screen and (min-width: 468px) {
  .t_petit {
    font-size: 0.7em;
  }
  .petit {
    font-size: 0.9em;
  }
  .medium {
    font-size: 1.1em;
  }
  .grand {
    font-size: 1.3em;
  }
  .t_grand {
    font-size: 1.8em;
  }
}
/*--- @media 468---*/
/*------- =============== ---------*/
@media screen and (min-width: 1024px) {
  .t_petit {
    font-size: 0.8em;
  }
  .petit {
    font-size: 1em;
  }
  .medium {
    font-size: 1.3em;
  }
  .grand {
    font-size: 1.6em;
  }
  .t_grand {
    font-size: 2.4em;
  }
}
/*--- @media 1200---*/
.w100 {
  font-weight: 100;
}
.w200 {
  font-weight: 200;
}
.w300 {
  font-weight: 300;
}
.w400 {
  font-weight: 400;
}
.w500 {
  font-weight: 500;
}
.w600 {
  font-weight: 600;
}
.w700 {
  font-weight: 700;
}
.w800 {
  font-weight: 800;
}
.w900 {
  font-weight: 900;
}
.rouge {
  color: #c51718;
}
.orange {
  color: #ea5f0b;
}
.carmin {
  color: #911536;
}
.jaune {
  color: #fbba02;
}
.bleu {
  color: #2cb9e7;
}
.vert {
  color: #00a8a3;
}
/* Enrichissements typographiques */
strong,
b {
  font-weight: bold;
}
em,
i {
  font-style: italic;
}
.caps {
  text-transform: uppercase;
}
.ombre,
.shadow {
  text-shadow: 0 1px 2px rgba(25, 25, 25, 0.54);
}
.triangle {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
}
abbr[title],
acronym[title] {
  border-bottom: .1em dotted;
  cursor: help;
}
@media print {
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
}
dfn {
  font-weight: bold;
  font-style: italic;
}
del,
.del {
  background-color: #FFDDDD;
  border-color: #CC0000;
  color: #CC0000;
  text-decoration: line-through;
}
ins,
.ins {
  background-color: #DDFFDD;
  border-color: #00AA00;
  color: #00AA00;
  text-decoration: none;
}
sup,
sub {
  font-size: .8em;
  font-variant: normal;
  line-height: 0;
}
sup {
  vertical-align: super;
}
.ie sup {
  vertical-align: text-top;
}
sub {
  vertical-align: sub;
}
.ie sub {
  vertical-align: text-bottom;
}
.caps {
  font-variant: small-caps;
}
/* Position */
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
.text-justify {
  text-align: justify !important;
}
/* Listes */
ul,
ol,
li,
dl,
dt,
dd {
  list-style: none;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
dl dt {
  font-weight: bold;
}
/* Tableaux */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  vertical-align: top;
}
th {
  font-weight: bold;
}
thead tr.row_first th {
  background: #fff69f;
}
th,
td,
caption {
  padding: 0.75em;
}
tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td,
tbody tr.even th,
tbody tr.even td {
  background: #fffce2;
}
tfoot {
  font-style: italic;
}
/* Citations, code et poesie */
q {
  font-style: italic;
}
blockquote {
  padding: 0 50px;
  font-style: italic;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
cite {
  font-style: italic;
}
address {
  font-style: italic;
}
pre,
code,
kbd,
samp,
var,
tt {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
}
pre {
  margin: 1.5em 0;
  /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
  white-space: pre;
  /* CSS 2.0 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3.0 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: -moz-pre-wrap;
  /* Mozilla */
  white-space: -hp-pre-wrap;
  /* HP Printers */
  word-wrap: break-word;
  /* IE 5+ */
}
kbd {
  background-color: #222222;
  color: #FFFFFF;
}
samp {
  font-weight: bold;
}
var {
  font-style: italic;
}
/* Paragraphes */
p,
.p,
dl,
dd,
blockquote,
address,
pre,
table,
fieldset {
  margin-bottom: 1.5em;
}
@media (max-width: 640px) {
  img,
  table,
  td,
  blockquote,
  code,
  pre,
  textarea,
  input,
  iframe,
  object,
  embed,
  video {
    max-width: 100% !important;
  }
  textarea,
  table,
  td,
  th,
  code,
  pre,
  samp {
    word-wrap: break-word;
    /* cesure forcee */
  }
  code,
  pre,
  samp {
    white-space: pre-line;
    /* passage a la ligne specifique pour les elements a chasse fixe */
  }
}
/* =============================================================================
   genere par SPIP
   ===========================================================================*/
/* Listes SPIP */
ul.spip,
ol.spip {
  margin-left: 50px;
}
@media (max-width: 640px) {
  ul.spip,
  ol.spip {
    margin-left: 1.5em;
  }
}
ul.spip li {
  list-style-type: none;
  margin: 12px 0;
}
li ul.spip li {
  list-style-type: none;
}
li li ul.spip li {
  list-style-type: none;
}
ol.spip li {
  list-style-type: decimal;
}
ul.dot li {
  list-style: disc;
}
dl.spip dt,
dl.spip dd {
  padding-left: 50px;
}
dl.spip dt {
  clear: both;
}
/* Tableaux SPIP */
table.spip {
  width: 100%;
}
/* Citations, code et poesie */
blockquote.spip {
  min-height: 40px;
  background: url(//www.casalonga.com/squelettes-2021/CSS/IMG/quote.png) no-repeat;
}
.spip_poesie {
  border-left: 1px solid;
}
.spip_poesie div {
  margin-left: 50px;
  text-indent: -50px;
}
.spip_code,
.spip_cadre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
}
/* Enluminures typo V3 / Cf.: http://www.spip-contrib.net/3118 */
sc,
.sc {
  font-variant: small-caps;
}
.caractencadre-spip {
  background-color: #FFFFCC;
  color: purple;
}
.caractencadre2-spip {
  background-color: #FFFFCC;
  color: orange;
}
.texteencadre-spip {
  display: block;
  margin: 1.5em 50px;
  padding: 1.5em;
  background: #EEE;
}
/* Logos, documents et images */
.spip_logos {
  margin: 5px 0;
  padding: 0;
  border: none;
}
.spip_documents {
  padding: 0;
  background: none;
  max-width: 100%;
  height: auto;
}
.spip_documents,
.spip_documents_center,
.spip_doc_titre,
.spip_doc_descriptif {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.spip_documents_center {
  clear: both;
  display: block;
  width: 100%;
}
.spip_documents_left {
  float: left;
  margin-right: 1.5em;
}
.spip_documents_right {
  float: right;
  margin-left: 1.5em;
}
.spip_doc_descriptif {
  clear: both;
}
.spip_documents {
  float: none !important;
  display: inline-block;
}
.spip_documents .spip_doc_titre {
  padding: 10px 0 0 0;
  font-size: 0.6em;
  line-height: 0.8em;
}
.chapo td {
  background: none !important;
}
/* Modeles par defaut */
.spip_modele {
  float: right;
  display: block;
  width: 25%;
  margin: 0 0 1.5em 1.5em;
  padding: 1.5em;
  background-color: #EEE;
}
/* Paragraphes */
div.spip,
ul.spip,
ol.spip,
.spip_poesie,
.spip_cadre,
div.spip_code,
.spip_documents.spip_documents_center {
  margin-bottom: 1.5em;
}
/* Pagination */
.pagination {
  clear: both;
  text-align: center;
}
/*------------- VARIABLES ----------*/
/*typo*/
/* =============================================================================
   FORMULAIRES
   ===========================================================================*/
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
  *vertical-align: middle;
}
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
  min-height: 50px;
}
legend {
  font-weight: bold;
}
input[type="submit"],
input.submit,
input[type="button"],
input.button,
input[type="image"],
input.image,
input[type="reset"],
input.reset,
button {
  cursor: pointer;
  -webkit-appearance: button;
}
input.confirm {
  background-color: #91bd09;
}
input[type="submit"],
.submit,
input[type="button"],
.button {
  background-color: #c51718;
  border: 0;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
a.submit,
a.button,
a.submit:visited,
a.button:visited,
a.submit:hover,
a.button:hover,
a.submit:focus,
a.button:focus {
  color: #fff;
}
input[type="submit"]:hover,
.submit:hover,
input[type="button"]:hover,
.button:hover,
input[type="submit"]:focus,
.submit:focus,
input[type="button"]:focus,
.button:focus {
  background-color: #b11125;
}
input[type="checkbox"],
input[type="radio"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
input[type="file"] {
  display: block;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
select[multiple],
select[size] {
  height: auto;
}
.ie fieldset {
  padding-top: 0;
}
.ie6 legend,
.ie7 legend {
  margin-left: -7px;
}
.ie button,
.ie input.submit,
.ie input.button {
  position: relative;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button,
input {
  width: auto;
  line-height: normal;
  *overflow: visible;
}
table button,
table input {
  *overflow: auto;
}
.reponse,
.error,
.alert,
.notice,
.success,
.info {
  padding: .8em;
  margin-bottom: 1.5em;
  border: 2px solid #ddd;
}
.error,
.alert {
  background: #ffff00;
  color: #cc3300;
  border-color: #ffcc00;
}
.notice {
  background: #fff490;
  color: #fff490;
  border-color: #fff490;
}
.success {
  background: #ffff36;
  color: #91bd09;
  border-color: #ffff24;
}
.info {
  background: #fff490;
  color: #fff490;
  border-color: #fff490;
}
.error a,
.alert a {
  color: #cc3300;
}
.notice a {
  color: #fff490;
}
.success a {
  color: #91bd09;
}
.info a {
  color: #fff490;
}
/* =============================================================================
   GenerŽ par SPIP
   ===========================================================================*/
/* Box login prive */
#minipres {
  border-radius: 6px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 2px rgba(25, 25, 25, 0.54);
  margin-top: 50px;
  background: #FFF;
}
/* Formulaires */
.formulaire_spip li {
  clear: both;
  margin-bottom: 0.75em;
}
.formulaire_spip .boutons {
  clear: both;
  margin: 0;
  padding: 0;
}
/* Barre typo */
.markItUp .markItUpHeader ul .markItUpSeparator {
  display: none;
}
/* Previsu */
.previsu {
  border: 1px solid #4f4b53;
  padding: 15px;
  margin: 25px 25px 0 25px;
  background: #F3F8F9;
}
fieldset.previsu legend {
  color: #00b3ec;
  font-weight: bold;
}
.previsu input {
  background-color: #00b3ec;
}
.previsu input:hover {
  background-color: #006686;
  -webkit-transition: all 0.15s ease-out;
  -ms-transition: all 0.15s ease-out;
  -o-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* Reponses */
.reponse_formulaire {
  margin-bottom: 1.5em;
  padding: 0.75em;
  border: 2px solid #ddd;
}
.reponse_formulaire_ok {
  background: #e6efc2;
  color: #264409;
  border-color: #c6d880;
}
.reponse_formulaire_erreur {
  background: #fbe3e4;
  color: #8a1f11;
  border-color: #fbc2c4;
}
.reponse_formulaire_ok a {
  color: #264409;
}
.reponse_formulaire_erreur a {
  color: #8a1f11;
}
.erreur_message {
  color: #cc3300;
  font-weight: bold;
}
li.erreur input[type="text"],
li.erreur input.text,
li.erreur input[type="password"],
li.erreur input.password,
li.erreur textarea {
  background-color: #fbe3e4;
  border-color: #fbc2c4;
}
.spip_surligne {
  background-color: yellow;
}
/* Onglet admin */
.spip-admin-float {
  z-index: 9999 !important;
}
/* Formulaire de recherche */
.formulaire_recherche input.text {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid light(#00a8a3, 20%);
  color: light(#312e2f, 20%) !important;
}
.formulaire_recherche input.text:focus {
  background: #00a8a3;
  color: #fff;
  font-style: normal;
}
#recherche {
  border: 1px solid #00a8a3;
}
/* Formulaire de contact */
#formulaire_contact label {
  display: block;
}
/* =============================================================================
   Recherche 
   ===========================================================================*/
.sb-search {
  position: relative;
  width: 100%;
}
.sb-search form {
  width: 100%;
}
.sb-search-input {
  border: none;
  outline: none;
  margin: 0;
  padding: 20px 65px 20px 20px;
  font-family: inherit;
  font-size: 20px;
  color: #fff;
  width: 100%;
  height: 38px;
}
.sb-search-input::-webkit-input-placeholder {
  color: #FFF;
}
.sb-search-input:-moz-placeholder {
  color: #FFF;
}
.sb-search-input::-moz-placeholder {
  color: #FFF;
}
.sb-search-input:-ms-input-placeholder {
  color: #FFF;
}
.sb-icon-search,
.sb-search-submit {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  height: 38px;
  width: 38px;
}
.sb-search-submit {
  background: #fff;
  /* IE needs this */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 8 */
  filter: alpha(opacity=0);
  /* IE 5-7 */
  opacity: 0;
  color: transparent;
  border: none;
  outline: none;
  z-index: 999;
}
.sb-icon-search {
  color: #fff;
  background: #c51718;
  z-index: 90;
  font-size: 22px;
}
.sb-icon-search:hover {
  background: #b11125;
}
/*------- =============== ---------*/
@media screen and (min-width: 768px) {
  /* LARGE ici les instructions pour écrans de plus de 768 de large. (tablette paysage et - ) */
  .sb-search {
    position: fixed;
    top: 217px;
    right: 0;
    z-index: 9999;
    width: 0%;
    min-width: 78px;
    height: 78px;
    overflow: hidden;
    -webkit-transition: width 0.1s;
    -moz-transition: width 0.1s;
    transition: width 0.1s;
    -webkit-backface-visibility: hidden;
  }
  .sb-search-input {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 78px;
    z-index: 10;
  }
  .sb-icon-search,
  .sb-search-submit {
    width: 78px;
    height: 78px;
    line-height: 60px;
  }
  .sb-search-submit {
    z-index: -1;
  }
  /* Open state */
  .sb-search.sb-search-open,
  .no-js .sb-search {
    width: 100%;
  }
  .sb-search.sb-search-open .sb-icon-search,
  .no-js .sb-search .sb-icon-search {
    background: #c51718;
    color: #fff;
    z-index: 11;
  }
  .sb-search.sb-search-open .sb-search-submit,
  .no-js .sb-search .sb-search-submit {
    z-index: 90;
  }
}
/*--- @media 768---*/
/*------- =============== ---------*/
@media screen and (min-width: 1200px) {
  /* XLARGE ici les instructions pour écrans de plus de 1200 de large. (bureau grand ecran et + ) */
}
/* =============================================================================
   HELPER
   ===========================================================================*/
/* transition */
.fade {
  -webkit-transition: all 0.15s ease-out;
  -ms-transition: all 0.15s ease-out;
  -o-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* shadow */
.box_shadow {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* round */
/*Alerte */
.navigateur_info {
  position: absolute;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 42px;
  background-color: #cc3300;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 2px rgba(25, 25, 25, 0.54);
}
.navigateur_info a {
  color: #F7CC11;
  text-decoration: underline;
}
.navigateur_info a:hover,
.navigateur_info a:focus {
  text-decoration: none;
}
.push_alerte {
  height: 42px;
}
/* clear float */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
/* Image */
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
/* block */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.right {
  float: right !important;
}
.left {
  float: left !important;
}
.fix {
  position: fixed;
  z-index: 9999;
}
.lien {
  cursor: pointer;
  color: #c51718;
}
.flex {
  display: flex;
}
.heightfull {
  height: 100%;
}
.heightauto {
  height: auto;
}
.block {
  display: block;
}
.box_ombre,
.box_shadow {
  box-shadow: 5px 5px 2px rgba(25, 25, 25, 0.54);
}
/* visibility */
.none {
  display: none;
  visibility: hidden;
}
.invisible {
  visibility: hidden;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.offscreen {
  position: absolute;
  left: -999em;
  height: 1%;
}
/* -------------------------------- 
Menu _accordéon
-------------------------------- */
.cd-accordion-menu {
  width: 100%;
}
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
  padding-left: 25px;
  font-size: 1.25rem;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label,
.cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 6px 0 6px 40px;
  color: #ffffff;
}
.cd-accordion-menu label:hover,
.cd-accordion-menu a:hover {
  color: #c51718;
}
.no-touch .cd-accordion-menu label:hover,
.no-touch .cd-accordion-menu a:hover {
  color: #c51718;
}
.cd-accordion-menu label::after,
.cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::after {
  background-image: url(//www.casalonga.com/squelettes-2021/IMG/cd-icons.svg);
  background-repeat: no-repeat;
}
/*.cd-accordion-menu label::before {
  background-image: url(../IMG/cd-icons.svg);
  background-repeat: no-repeat;
}*/
.cd-accordion-menu label::after {
  /* arrow icon */
  left: 36px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu a:hover,
.cd-accordion-menu a.on,
.cd-accordion-menu a:hover .rules,
.cd-accordion-menu a.on .rules {
  color: #c51718;
}
.cd-accordion-menu a::after {
  /* image icon */
  left: 15px;
  background: url(//www.casalonga.com/squelettes-2021/IMG/cd-icons.svg) no-repeat -48px 0;
  /* ne pas afficher pile de livre*/
  background: none;
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* Show children when item is checked */
  display: block;
}
.rules_arbo {
  color: #9edff4 !important;
}
.cd-accordion-menu ul label .rules_arbo,
.cd-accordion-menu ul a .rules_arbo {
  color: #88d7f1 !important;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  box-shadow: inset 0 -1px #0f0e10;
}
.cd-accordion-menu ul ul label .rules_arbo,
.cd-accordion-menu ul ul a .rules_arbo {
  color: #71d0ef !important;
}
/*.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}*/
.cd-accordion-menu ul ul ul label .rules_arbo,
.cd-accordion-menu ul ul ul a .rules_arbo {
  color: #5ac8ec !important;
}
.cd-accordion-menu label {
  padding: 6px 0 6px 40px;
  line-height: normal;
}
.cd-accordion-menu a {
  padding: 6px 0 6px 40px;
  line-height: normal;
}
.cd-accordion-menu label::after {
  left: 20px;
}
.cd-accordion-menu.animated label::after {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
/*animations*/
/******************
* Bounce in right *
*******************/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slow {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slower {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slowest {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* Added by Andy Meetan */
.delay-250 {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.delay-500 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.delay-750 {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.delay-1000 {
  -webkit-animation-delay: 1.0s;
  -moz-animation-delay: 1.0s;
  -o-animation-delay: 1.0s;
  animation-delay: 1.0s;
}
.delay-1250 {
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
  -o-animation-delay: 1.25s;
  animation-delay: 1.25s;
}
.delay-1500 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.delay-1750 {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
  -o-animation-delay: 1.75s;
  animation-delay: 1.75s;
}
.delay-2000 {
  -webkit-animation-delay: 2.0s;
  -moz-animation-delay: 2.0s;
  -o-animation-delay: 2.0s;
  animation-delay: 2.0s;
}
.delay-2500 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.delay-2000 {
  -webkit-animation-delay: 2.0s;
  -moz-animation-delay: 2.0s;
  -o-animation-delay: 2.0s;
  animation-delay: 2.0s;
}
.delay-2500 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.delay-3000 {
  -webkit-animation-delay: 3.0s;
  -moz-animation-delay: 3.0s;
  -o-animation-delay: 3.0s;
  animation-delay: 3.0s;
}
.delay-3500 {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
}
.bounceInRight,
.bounceInLeft,
.bounceInUp,
.bounceInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
.flipInX,
.flipInY,
.rotateIn,
.rotateInUpLeft,
.rotateInUpRight,
.rotateInDownLeft,
.rotateDownUpRight,
.rollIn {
  opacity: 0;
}
.lightSpeedInRight,
.lightSpeedInLeft {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.bounceIn.go {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
/****************
* bounceInRight *
****************/
@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(400px);
  }
  60% {
    -webkit-transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  60% {
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.bounceInRight.go {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
/******************
* Bounce in left *
*******************/
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
  }
  60% {
    -webkit-transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px);
  }
  60% {
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.bounceInLeft.go {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
/******************
* Bounce in up *
*******************/
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(400px);
  }
  60% {
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(400px);
  }
  60% {
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.bounceInUp.go {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/******************
* Bounce in down *
*******************/
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-400px);
  }
  60% {
    -webkit-transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-400px);
  }
  60% {
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.bounceInDown.go {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
.fadeIn {
  opacity: 0;
}
.fadeIn.go {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
/**********
* Grow in *
***********/
@-webkit-keyframes growIn {
  0% {
    -webkit-transform: scale(0.2);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@keyframes growIn {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.growIn {
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  opacity: 0;
}
.growIn.go {
  -webkit-animation-name: growIn;
  animation-name: growIn;
}
/********
* Shake *
********/
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}
.shake.go {
  -webkit-animation-name: shake;
  animation-name: shake;
}
/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
  0%,
  100% {
    -webkit-transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateY(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateY(10px);
  }
}
@keyframes shakeUp {
  0%,
  100% {
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateY(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateY(10px);
  }
}
.shakeUp.go {
  -webkit-animation-name: shakeUp;
  animation-name: shakeUp;
}
/*************
* FadeInLeft *
*************/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft {
  opacity: 0;
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}
.fadeInLeft.go {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
/*************
* FadeInRight *
*************/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
.fadeInRight.go {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
/*************
* FadeInUp *
*************/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  opacity: 0;
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}
.fadeInUp.go {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/*************
* FadeInDown *
*************/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}
.fadeInDown.go {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateIn.go {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}
/*****************
* rotateInUpLeft *
*****************/
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpLeft.go {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}
/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownLeft.go {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}
/******************
* rotateInUpRight *
*******************/
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpRight.go {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}
/********************
* rotateInDownRight *
********************/
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownRight.go {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}
/*********
* rollIn *
**********/
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}
.rollIn.go {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/*********
* wiggle *
**********/
@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: skewX(9deg);
  }
  10% {
    -webkit-transform: skewX(-8deg);
  }
  20% {
    -webkit-transform: skewX(7deg);
  }
  30% {
    -webkit-transform: skewX(-6deg);
  }
  40% {
    -webkit-transform: skewX(5deg);
  }
  50% {
    -webkit-transform: skewX(-4deg);
  }
  60% {
    -webkit-transform: skewX(3deg);
  }
  70% {
    -webkit-transform: skewX(-2deg);
  }
  80% {
    -webkit-transform: skewX(1deg);
  }
  90% {
    -webkit-transform: skewX(0deg);
  }
  100% {
    -webkit-transform: skewX(0deg);
  }
}
@keyframes wiggle {
  0% {
    transform: skewX(9deg);
  }
  10% {
    transform: skewX(-8deg);
  }
  20% {
    transform: skewX(7deg);
  }
  30% {
    transform: skewX(-6deg);
  }
  40% {
    transform: skewX(5deg);
  }
  50% {
    transform: skewX(-4deg);
  }
  60% {
    transform: skewX(3deg);
  }
  70% {
    transform: skewX(-2deg);
  }
  80% {
    transform: skewX(1deg);
  }
  90% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
.wiggle.go {
  -webkit-animation-name: wiggle;
  animation-name: wiggle;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/********
* swing *
*********/
@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center;
  }
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.swing.go {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
/*******
* tada *
********/
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.tada.go {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/*********
* wobble *
**********/
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
.wobble.go {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
/********
* pulse *
*********/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse.go {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedInRight {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.lightSpeedInRight.go {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(20%) skewX(-30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedInLeft {
  0% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(20%) skewX(-30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.lightSpeedInLeft.go {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
/*******
* Flip *
*******/
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -webkit-animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}
.flip.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
}
/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.flipInX.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX;
}
/**********
* flipInY *
**********/
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
.flipInY.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  backface-visibility: visible !important;
  animation-name: flipInY;
}
/*****************
* Out animations *
*****************/
/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.bounceOut.goAway {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.bounceOutUp.goAway {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
.bounceOutDown.goAway {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.bounceOutLeft.goAway {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
.bounceOutRight.goAway {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut.goAway {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.fadeOutUp.goAway {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
.fadeOutDown.goAway {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.fadeOutLeft.goAway {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
.fadeOutRight.goAway {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flipOutX.goAway {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}
/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}
/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
.lightSpeedOutRight.goAway {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOutLeft.goAway {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}
.rotateOut.goAway {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}
/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -transform-origin: left bottom;
    -transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotateOutUpLeft.goAway {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}
/************
* rotateOutDownLeft *
*************/
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutDownLeft.goAway {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}
/************
* rotateOutUpRight *
*************/
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutUpRight.goAway {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}
/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
.rollOut.goAway {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/*****************
* Short Animations
*******************/
/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInUpShort {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUpShort {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.fadeInUpShort.go {
  -webkit-animation-name: fadeInUpShort;
  animation-name: fadeInUpShort;
}
/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInDownShort {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDownShort {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}
.fadeInDownShort.go {
  -webkit-animation-name: fadeInDownShort;
  animation-name: fadeInDownShort;
}
/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRightShort {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRightShort {
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
.fadeInRightShort.go {
  -webkit-animation-name: fadeInRightShort;
  animation-name: fadeInRightShort;
}
/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeftShort {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
}
.fadeInLeftShort.go {
  -webkit-animation-name: fadeInLeftShort;
  animation-name: fadeInLeftShort;
}
/***** formulaire SELECT style DROPKICK ******/
.dk-select,
.dk-select *,
.dk-select *:before,
.dk-select *:after,
.dk-select-multi,
.dk-select-multi *,
.dk-select-multi *:before,
.dk-select-multi *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.dk-select,
.dk-select-multi {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
  background: -moz-linear-gradient(top, #ffffff, #f5f5f5);
  background: -o-linear-gradient(top, #ffffff, #f5f5f5);
  background-color: #f5f5f5;
  line-height: 1.2em;
  margin-bottom: 18px;
  border-radius: 5px;
  width: 90%;
  margin: 0 5%;
}
#tri .dk-select {
  margin: 0 5px;
  min-width: 275px;
}
.dk-selected {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  border: 1px solid #CCCCCC;
  border-radius: 0.4em;
  padding: 0.6em 0.8em;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.dk-selected:before,
.dk-selected:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
}
.dk-selected:before {
  top: 50%;
  border: solid transparent;
  border-width: 0.25em 0.25em 0;
  border-top-color: #CCCCCC;
  margin: -0.125em 0.5em 0 0;
}
.dk-selected:after {
  top: 0;
  height: 100%;
  border-left: 1px solid #CCCCCC;
  margin: 0 1.5em 0 0;
}
.dk-selected-disabled {
  color: #BBBBBB;
}
.dk-select .dk-select-options {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
}
.dk-select-open-up .dk-select-options {
  border-radius: 0.4em 0.4em 0 0;
  margin-bottom: -1px;
  bottom: 100%;
}
.dk-select-open-down .dk-select-options {
  border-radius: 0 0 0.4em 0.4em;
  margin-top: -1px;
  top: 100%;
}
.dk-select-multi .dk-select-options {
  max-height: 10em;
}
.dk-select-options {
  background-color: white;
  border: 1px solid #CCCCCC;
  border-radius: 0.4em;
  list-style: none;
  margin: 0;
  max-height: 10.5em;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.25em 0;
  width: auto;
  z-index: 1000;
}
.dk-option-selected {
  background-color: #00a8a3;
  color: #fff;
}
.dk-select-options-highlight .dk-option-selected {
  background-color: transparent;
  color: inherit;
}
.dk-option {
  padding: 0.3em 0.5em;
  border: 1px dotted #D9D2C6;
}
.dk-select-options .dk-option-highlight {
  background-color: #00a8a3;
  color: #fff;
}
.dk-select-options .dk-option-disabled {
  color: #BBBBBB;
  background-color: transparent;
}
.dk-select-options .dk-option-hidden {
  display: none;
}
.dk-optgroup {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 0.25em 0;
  margin-top: 0.25em;
}
.dk-optgroup + .dk-option {
  margin-top: 0.25em;
}
.dk-optgroup + .dk-optgroup {
  border-top-width: 0;
  margin-top: 0;
}
.dk-optgroup:nth-child(2) {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}
.dk-optgroup:last-child {
  border-bottom-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.dk-optgroup-label {
  padding: 0 0.5em 0.25em;
  font-weight: bold;
  width: 100%;
}
.dk-optgroup-options {
  list-style: none;
  padding-left: 0;
}
.dk-optgroup-options li {
  padding-left: 1.2em;
}
.dk-select-open-up .dk-selected {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-color: #00a8a3;
}
.dk-select-open-down .dk-selected {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #00a8a3;
}
.dk-select-open-up .dk-selected:before,
.dk-select-open-down .dk-selected:before {
  border-width: 0 0.25em 0.25em;
  border-bottom-color: #00a8a3;
}
.dk-select-open-up .dk-selected:after,
.dk-select-open-down .dk-selected:after {
  border-left-color: #00a8a3;
}
.dk-select-open-up .dk-select-options,
.dk-select-open-down .dk-select-options,
.dk-select-multi:focus .dk-select-options {
  display: block;
  border-color: #00a8a3;
}
.no-touch .dk-select-multi:hover,
.no-touch .dk-select-multi:focus {
  outline: none;
}
.no-touch .dk-selected:hover,
.no-touch .dk-selected:focus {
  outline: none;
  border-color: #00a8a3;
}
.no-touch .dk-selected:hover:before,
.no-touch .dk-selected:focus:before {
  border-top-color: #00a8a3;
}
.no-touch .dk-selected:hover:after,
.no-touch .dk-selected:focus:after {
  border-left-color: #00a8a3;
}
.dk-select-disabled {
  opacity: 0.6;
  color: #BBBBBB;
  cursor: not-allowed;
}
.no-touch .dk-select-disabled .dk-selected:hover,
.no-touch .dk-select-disabled .dk-selected:focus {
  border-color: inherit;
}
.no-touch .dk-select-disabled .dk-selected:hover:before,
.no-touch .dk-select-disabled .dk-selected:focus:before {
  border-top-color: inherit;
}
.no-touch .dk-select-disabled .dk-selected:hover:after,
.no-touch .dk-select-disabled .dk-selected:focus:after {
  border-left-color: inherit;
}
select[data-dkcacheid] {
  display: none;
}
/* =============================================================================
   PRINT
   ===========================================================================*/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  a,
  a:visited {
    color: #600;
    text-decoration: none !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 10%;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  header nav,
  aside,
  #bloc_actu,
  nav#col_d,
  #sous_menu_interne,
  #arbo,
  .pagination,
  .formulaire_spip,
  form,
  #menu_a_propos,
  #pied,
  #pied_partage,
  #goute,
  #deplie_menu {
    display: none !important;
  }
  #solidaris {
    width: 38%;
    margin: 0 auto;
    text-align: center;
  }
  #img_acc {
    width: 18%;
    margin: 0 auto;
    text-align: center;
  }
  .ligne_1,
  .ligne_2 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    color: #312e2f;
    font-size: 0.9em;
  }
  .ligne_2 {
    margin-bottom: 2em;
  }
}
/* =============================================================================
   LAYOUT CSS SITE CASALONGA 2021 *
   ===========================================================================*/
/*--- ========= ---*/
@media screen {
  /* SMALL ici les instructions pour tous les écrans */
  /*------------- =============== -----------*/
  /*---------------    GLOBAL      ----------*/
  /*------------- =============== -----------*/
  #icone_travaux {
    z-index: 9999;
  }
  .relative {
    position: relative;
  }
  .responsive {
    height: auto;
    max-width: 100%;
  }
  .responsive35 {
    height: auto;
    max-width: 35%;
  }
  .responsive10 {
    height: auto;
    max-width: 10%;
  }
  .space_in {
    padding: 20px;
  }
  .space_pub {
    padding: 20px 10px 0 10px;
  }
  .space_out {
    margin: 10px 20px;
  }
  .space {
    padding: 0 1.5%;
  }
  /* selection */
  ::-moz-selection {
    background: #17dcff;
    color: #fff;
    text-shadow: none;
  }
  ::selection {
    background: #17dcff;
    color: #fff;
    text-shadow: none;
  }
  /* Links */
  a {
    color: #6a0c0d;
    text-decoration: none;
  }
  a.dark {
    color: #312e2f;
  }
  .no-touch a:hover {
    color: #250405;
  }
  .no-touch a:focus {
    color: #250405;
  }
  a.bouton {
    color: #ffffff;
  }
  a.bouton h3,
  a.bouton .h3 {
    display: inline-block;
    background: #c51718;
    padding: 2px 3px;
    margin: 3px 20px 3px 50px;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
  }
  .no-touch a.bouton:hover h3,
  .no-touch a.bouton:focus h3,
  .no-touch a.bouton:hover .h3,
  .no-touch a.bouton:focus .h3 {
    margin-left: 65px;
    background: #312e2f;
    color: #c51718;
  }
  .texte_cache {
    background: #f5f4f2;
    padding: 10px 15px;
  }
  .texte_cache p {
    margin: 0 0 10px 0;
  }
  /* image */
  .responsive {
    height: auto;
    max-width: 100%;
  }
  .video {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
  }
  .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* table */
  tbody tr:nth-child(even) th,
  tbody tr:nth-child(even) td,
  tbody tr.even th,
  tbody tr.even td {
    background: #d4cfc7;
  }
  tbody tr:nth-child(odd) th,
  tbody tr:nth-child(odd) td,
  tbody tr.odd th,
  tbody tr.odd td {
    background: #efedea;
  }
  /*------------- =============== -----------*/
  /*-------------structure SOMMAIRE----------*/
  /*------------- =============== -----------*/
  body {
    background: #ffffff;
    color: #312e2f;
  }
  /*Arbo-----------*/
  nav#arbo {
    font-size: 0.8em;
    padding: 5px 3%;
    margin-top: 0;
  }
  nav#arbo ol li {
    display: inline;
  }
  nav#arbo strong {
    color: #c51718;
  }
  /*Menu colonne gauche-----------*/
  #col_menu {
    background: #312e2f;
    display: block;
    position: fixed;
    left: -220px;
    top: 0;
    padding: 17px 0 0 0;
    width: 280px;
    height: 100%;
    overflow: auto;
    color: #ffffff;
    z-index: 999;
  }
  #col_menu_left {
    width: 80%;
    padding: 50px 0 0 15px;
  }
  #col_menu_right {
    width: 20%;
    padding: 5px 5px 25px 5px;
  }
  .icon_col {
    flex-direction: column;
    justify-content: flex-end;
  }
  .bando {
    width: 100%;
    height: 12px;
    position: absolute;
    top: 0;
  }
  .lien_icon {
    cursor: pointer;
    display: block;
    margin: 5px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
  }
  .no-touch .lien_icon:hover,
  .no-touch .lien_icon:focus {
    opacity: 65%;
  }
  #menu_icon {
    margin-bottom: auto;
  }
  .no-touch #menu_icon:hover,
  .no-touch #menu_icon:focus {
    margin-bottom: auto;
    transform: rotate(90deg);
  }
  .open {
    transform: rotate(90deg);
  }
  /*Menu lang-----------*/
  .intro_lang {
    margin: 0 10px;
    color: #d4cfc7;
  }
  #menu_lang,
  #formulaire_menu_lang {
    display: flex;
    align-items: center;
    position: absolute;
    top: 25px;
    right: 25px;
  }
  #formulaire_menu_lang label {
    font-size: 0.8em;
  }
  #menu_lang img {
    margin: 0 2px;
    box-shadow: 0px 2px 1px #59534b;
  }
  #menu_lang a {
    display: inline-block;
    overflow: hidden;
    /*-- width:23px; --*/
    height: 18px;
  }
  #menu_lang a img#fr {
    display: block;
    position: relative;
    left: 0;
    top: 0;
  }
  .no-touch #menu_lang a:hover img#fr {
    top: -18px;
  }
  #menu_lang a img#en {
    display: block;
    position: relative;
    left: 0;
    top: -36px;
  }
  .no-touch #menu_lang a:hover img#en {
    top: -54px;
  }
  #menu_lang a img#de {
    display: block;
    position: relative;
    left: 0;
    top: -72px;
  }
  .no-touch #menu_lang a:hover img#de {
    top: -90px;
  }
  #menu_lang a img#zh {
    display: block;
    position: relative;
    left: 0;
    top: -108px;
  }
  .no-touch #menu_lang a:hover img#zh {
    top: -126px;
  }
  .ie8 #menu_lang img {
    max-width: none;
  }
  .ie7 #menu_lang img {
    max-width: none;
  }
  /*Main content-----------*/
  #global {
    overflow: hidden;
  }
  main {
    margin-left: 60px;
  }
  main h1.logo {
    display: block;
    margin: auto;
    max-width: 600px;
  }
  main h1.logo img {
    padding-top: 30px;
  }
  main p,
  main li {
    line-height: 1.3em;
  }
  .sous-titre {
    justify-content: center;
    align-items: center;
  }
  .sous-titre h2 {
    margin: 0;
    padding: 0 15px;
  }
  .trait {
    display: block;
    height: 1px;
    width: 25%;
    border-bottom: 1px solid #312e2f;
  }
  /*Rubrique & artcile content-----------*/
  .contenu_texte {
    margin: 0;
  }
  .col_g {
    padding: 0 20px;
  }
  .col_g p {
    padding: 0 15px;
  }
  .col_g hr {
    margin: 10px 0;
  }
  .col_g .lien_vert a {
    text-decoration: underline;
    color: #00a8a3;
  }
  .col_d {
    max-width: 400px;
    margin: 30px auto;
  }
  .hgroup {
    margin: 20px 0;
  }
  .chapo {
    color: #827c88;
    font-style: italic;
  }
  .texte p,
  .chapo p,
  .chapo_accueil p {
    text-align: left;
  }
  .plus_square {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    width: 20px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: -5px -90px;
  }
  .ie7 .plus_square {
    display: block;
    float: left;
  }
  .rub_actu {
    margin: 0 0 30px 0;
  }
  #bloc_plus {
    margin: 10px 5px;
    text-align: right;
  }
  .liste_article {
    display: grid;
    grid-template-columns: 1fr;
  }
  .liste_article article.box_tiers,
  .liste_article li.box_tiers {
    align-self: stretch;
    margin: 5px 0;
  }
  .liste_article article.box_tiers a.onglet,
  .liste_article li.box_tiers a.onglet {
    height: 100%;
    margin: 5px;
    padding: 15px 20px;
  }
  .liste_article article.box_tiers a.onglet:hover,
  .liste_article li.box_tiers a.onglet:hover {
    background: #c51718;
    color: #fff;
  }
  .liste_article article.box_tiers .chapo,
  .liste_article li.box_tiers .chapo {
    color: #4f4b53;
    margin: 0 0 5px 0;
  }
  /*Services-----------*/
  #bloc_couleur_wrapper {
    margin: 25px 0 0 0;
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
  }
  #bloc_couleur_wrapper .bloc_couleur {
    min-height: 60px;
    position: relative;
  }
  #bloc_couleur_wrapper .bloc_couleur .plus {
    width: 18px;
    height: 18px;
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
  #bloc_couleur_wrapper .bloc_couleur h3 {
    color: #ffffff;
    text-align: right;
    padding: 15px;
    float: right;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(1) {
    background: #c51718;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(1) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_01.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(2) {
    background: #911536;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(2) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_02.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(3) {
    background: #fbba02;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(3) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_03.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(4) {
    background: #2cb9e7;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(4) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_06.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(5) {
    background: #00a8a3;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(5) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_05.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(6) {
    background: #c51718;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(6) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_09.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(7) {
    background: #fbba02;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(7) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_07.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(8) {
    background: #ea5f0b;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(8) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_08.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(9) {
    background: #911536;
  }
  #bloc_couleur_wrapper .bloc_couleur:nth-child(9) .bloc_lien {
    background: url(//www.casalonga.com/squelettes-2021/IMG/bg_service_04.png) no-repeat;
    background-size: cover;
  }
  #bloc_couleur_wrapper .bloc_lien {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #bloc_couleur_wrapper .no-touch .bloc_lien:hover,
  #bloc_couleur_wrapper .no-touch .bloc_lien:focus {
    background-color: #312e2f !important;
  }
  #bloc_couleur_wrapper .no-touch .bloc_lien:hover h3,
  #bloc_couleur_wrapper .no-touch .bloc_lien:focus h3 {
    color: #ea5f0b;
  }
  .no-touch #bloc_couleur_wrapper .bloc_lien:hover,
  .no-touch #bloc_couleur_wrapper .bloc_lien:focus {
    background-color: #312e2f !important;
  }
  .no-touch #bloc_couleur_wrapper .bloc_lien:hover h3,
  .no-touch #bloc_couleur_wrapper .bloc_lien:focus h3 {
    color: #ea5f0b;
  }
  #welcome-text {
    margin: 50px auto;
    max-width: 520px;
  }
  #welcome-text .split {
    flex-grow: 1;
    width: 50%;
    padding: 0 15px;
  }
  #welcome-text .split_l {
    text-align: right;
  }
  #welcome-text .split_l h2 {
    line-height: 1.25em;
  }
  #welcome-text .split_l h2 span {
    color: #911536;
  }
  #welcome-text .split_r {
    padding: 5px 0 0 0;
  }
  /* Rubrique divers-----------*/
  #documents {
    margin: 40px 0 ;
  }
  .liste_article,
  .liste_article_basique {
    position: relative;
    z-index: 10;
    margin: 0 0 30px 0;
  }
  .liste_article_basique article {
    margin: 0 0 30px 0;
  }
  span.puce {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0 -330px;
    margin: 0 5px 0 0;
  }
  .no-touch a:hover span.puce {
    background-position: 0 -360px;
  }
  .texture {
    background: #efedea;
  }
  .onglet {
    display: block;
    position: relative;
    border-radius: 0 0 12px 0;
  }
  .box {
    width: 100%;
    margin: 25px 0;
  }
  .cadre {
    position: relative;
    border: 1px solid #d9d2c6;
  }
  .derriere {
    z-index: 10;
    position: relative;
  }
  .devant {
    z-index: 20;
    position: absolute;
  }
  /*Structure Col_d-----------*/
  a.titre_box {
    display: block;
    padding: 4% 6% 3% 6%;
    background: transparent;
    transition: background 0.2s;
  }
  .no-touch a.titre_box:hover,
  .no-touch a.titre_box:focus {
    text-decoration: none;
    background-color: #c51718;
    transition: background 0.6s;
  }
  .no-touch a.titre_box:hover .sst_col,
  .no-touch a.titre_box:focus .sst_col {
    color: #FFF;
  }
  nav.menu_col {
    margin: 15px 0 11% 0;
  }
  ul.liste_juri_2 li {
    width: 92%;
    margin: 0 2% 10px 0;
    color: #35332a;
    display: block;
    padding: 1% 2%;
    border-bottom: 1px solid #D9D2C6;
  }
  ul.liste_juri {
    margin: 0 0 10px 0;
  }
  .juri {
    margin: 5px 0;
  }
  .juri h3 {
    color: #00a8a3 !important;
    margin: 20px 0 5px 0;
  }
  .juri p,
  .titre_juri p {
    margin: 0;
    line-height: 16px;
  }
  ul.liste_juri li:last-child {
    margin: 0 0 10px 0;
  }
  nav.menu_col ul li a,
  ul.liste_juri li {
    color: #35332a;
    display: block;
    padding: 2% 4%;
    border-bottom: 1px solid #D9D2C6;
  }
  nav.menu_col ul li:first-child a {
    border-top: 1px solid #D9D2C6;
  }
  .no-touch nav.menu_col ul li a:hover,
  nav.menu_col ul li a:focus {
    color: #fff;
    background-color: #DD6B2D;
    text-decoration: none;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  }
  nav.menu_col ul li a#lock {
    color: #DD6B2D;
  }
  nav.menu_col ul li a#lock span,
  nav.menu_col ul li a#lock2 span {
    display: inline-block;
    float: right;
    height: 15px;
    width: 24px;
    background: #ffffff url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -270px;
  }
  .no-touch nav.menu_col ul li a#lock:hover,
  .no-touch nav.menu_col ul li a#lock:focus,
  .no-touch nav.menu_col ul li a#lock.on,
  .no-touch nav.menu_col ul li a#lock2:hover,
  .no-touch nav.menu_col ul li a#lock2:focus,
  .no-touch nav.menu_col ul li a#lock2.on {
    color: #fff;
    background: #DD6B2D;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  }
  .no-touch nav.menu_col ul li a#lock:hover span,
  .no-touch nav.menu_col ul li a#lock:focus span,
  .no-touch nav.menu_col ul li a#lock.on span,
  .no-touch nav.menu_col ul li a#lock2:hover span,
  .no-touch nav.menu_col ul li a#lock2:focus span,
  .no-touch nav.menu_col ul li a#lock2.on span {
    background: #dd6b2d url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -285px;
  }
  nav.menu_col ul li a#watch {
    color: #DD6B2D;
  }
  nav.menu_col ul li a#watch span {
    display: inline-block;
    float: right;
    height: 15px;
    width: 24px;
    background: #ffffff url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -300px;
  }
  .no-touch nav.menu_col ul li a#watch:hover,
  .no-touch nav.menu_col ul li a#watch:focus {
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  }
  .no-touch nav.menu_col ul li a#watch:hover span,
  .no-touch nav.menu_col ul li a#watch:focus span {
    background: #dd6b2d url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -315px;
  }
  .lien_equipe .devant {
    bottom: 20%;
    left: 0;
  }
  .lien_bu img {
    min-height: 230px;
  }
  .lien_bu .devant {
    top: 0;
    left: 0;
  }
  a.lien_box {
    color: #fff;
    background: #c51718;
    display: inline-block;
    padding: 10px 5px;
    margin: 25px 15px 0 0;
  }
  .no-touch a:hover.lien_box,
  .no-touch a:focus.lien_box {
    background: #312e2f;
    color: #c51718;
  }
  a:visited.lien_box {
    color: #fff;
    text-decoration: none;
  }
  .pub a.lien_box,
  .space_pub a.lien_box {
    margin: 5px 0 0 0;
  }
  .lien_box h3 {
    padding: 0 10px;
    margin: 0;
    font-size: 1.2em;
  }
  .icone {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    width: 28px;
  }
  .rub_139 {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0px 0px;
  }
  .rub_71 {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0px -210px;
  }
  .rub_82 {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0px -30px;
  }
  .rub_equipe {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0px -180px;
  }
  .rub_juri {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0px -150px;
  }
  .rub_107 {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0px -240px;
  }
  .titre_col {
    padding: 4% 6% 0 6%;
    margin: 0;
  }
  .box .titre_col {
    padding: 4% 6% 2% 6%;
  }
  .box form {
    position: relative;
    z-index: 999;
  }
  /*Equipes spécialisés-----------*/
  .spip_mail {
    vertical-align: middle;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: -5px -60px;
    font-weight: normal;
    display: block;
    height: 22px;
    padding: 4px 0 0 27px;
  }
  .double {
    height: auto;
    position: relative;
  }
  .double img {
    float: left;
    margin: 0 15px 15px 0;
  }
  .double_flot {
    float: left;
  }
  .double_flot p {
    margin: 0;
    padding: 0;
    font-weight: 600;
  }
  .double_flot p.titre_mot {
    color: #00a8a3;
  }
  #liste_fiche .double img {
    margin: 0;
  }
  #liste_fiche .double_flot {
    padding: 10px 2%;
    width: 61%;
  }
  #liste_fiche h3 {
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-size: 1em;
  }
  #liste_fiche p {
    font-size: 0.9em;
    line-height: 1em;
    color: #222017;
    font-weight: 400;
    margin: 4px 0 0 4px;
  }
  .no-touch #liste_fiche a:hover,
  .no-touch #liste_fiche a:focus,
  .no-touch #liste_fiche a:hover p,
  .no-touch #liste_fiche a:focus p {
    color: #DD6B2D;
    background-color: #fff;
    background-image: none;
  }
  .hgroup.double_flot {
    position: relative;
    padding-top: 20px;
    font-size: 1em;
    width: 85%;
  }
  h3.equ {
    text-transform: uppercase;
    font-size: 0.9em;
    color: #DD6B2D;
    position: absolute;
    top: 0;
  }
  .chapo_equ {
    color: #222017;
  }
  .depli,
  nav.menu_col ul li .texte_cache a {
    display: block;
    width: 32%;
    margin: 4% auto;
    padding: 1% 2%;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
    background: #736a5d;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #86785a), color-stop(1, #605235));
    background-image: -moz-linear-gradient(0% 100% 90deg, #605235 0%, #86785a 100%);
    border-radius: 12px;
    box-shadow: inset 0px 0px 0px 1px rgba(92, 81, 57, 0.4), 1px 1px 3px #bfb39f;
    border: 1px solid #705c42;
  }
  nav.menu_col ul li .texte_cache a {
    width: 52%;
  }
  .no-touch .depli:hover,
  .no-touch .depli:focus,
  .no-touch nav.menu_col ul li .texte_cache a:hover {
    color: #FBF8F5;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #dd6b2d), color-stop(1, #c65518));
    background-image: -moz-linear-gradient(0% 100% 90deg, #dd6b2d 0%, #c65518 100%);
    border: 1px solid #b64b10;
  }
  .depli_off {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0 -390px;
    margin: 0 10px 0 0;
  }
  .depli_on {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: 0 -375px;
    margin: 0 10px 0 0;
  }
  .juri h3,
  .indic {
    font-size: 0.8em;
    color: #CDB0A0;
  }
  /*Contact europe bloc-----------*/
  #contact {
    background: #d4cfc7;
    padding: 25px 0;
    margin-bottom: 100px;
  }
  #contact_content {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  }
  #contact_content #villes {
    z-index: 2;
  }
  #contact_content #villes .villes_contenteur {
    display: block;
  }
  #contact_content #villes .villes_contenteur a.bouton h3 {
    margin: 3px 50px;
  }
  #contact_content #villes .villes_contenteur .no-touch a.bouton:hover h3,
  #contact_content #villes .villes_contenteur .no-touch a.bouton:focus h3 {
    margin-left: 65px;
  }
  .no-touch #contact_content #villes .villes_contenteur a.bouton:hover h3,
  .no-touch #contact_content #villes .villes_contenteur a.bouton:focus h3 {
    margin-left: 65px;
  }
  #carte_europe_fond {
    min-height: 700px;
    position: relative;
    background: url(//www.casalonga.com/squelettes-2021/IMG/europe_1024.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  #carte_europe {
    position: relative;
  }
  img#flat {
    max-height: 385px;
    margin: -90px 0;
    position: relative;
    z-index: 1;
  }
  img#spot {
    position: absolute;
    z-index: 2;
    top: -90px;
    left: 0;
  }
  .flex-item {
    flex-basis: 100%;
  }
  /*App Mobile-----------*/
  #app {
    margin: 80px 0 0 0;
  }
  .bloc_titre {
    position: relative;
    margin-bottom: 15px;
  }
  .bloc_titre .titre_col {
    display: block;
    padding: 0;
    font-size: 1.6em;
    margin: 0 0 5px 0;
  }
  #app_content {
    background: url(//www.casalonga.com/squelettes-2021/IMG/appmobile_full.jpg) no-repeat;
  }
  #upc_content {
    background: url(//www.casalonga.com/squelettes-2021/IMG/upc_full.jpg) no-repeat;
    min-height: 350px;
  }
  #app_content,
  #upc_content {
    background-size: cover;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  }
  #app_content .bloc_button,
  #upc_content .bloc_button {
    margin: 30px 0 0 0;
  }
  #app_content .bloc_info,
  #upc_content .bloc_info {
    padding-bottom: 50px;
    position: relative;
    z-index: 2;
  }
  #app_content img,
  #upc_content img {
    max-height: 200px;
    margin: -90px 0 -30px 0;
    float: right;
    display: block;
  }
  .titrage {
    display: block:
		color: #000;
    margin: 0;
  }
  .pub .lien_download {
    height: 65px;
    width: 217px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/mobile_download.png) no-repeat;
    left: 50%;
    margin-left: -108px;
    background-size: 100%;
  }
  .pub a#googleplay {
    bottom: 10px;
    background-position: 0 0;
  }
  .pub .no-touch a#googleplay:hover,
  .pub .no-touch a#googleplay:focus {
    background-position: 0 -65px;
  }
  .pub a#appstore {
    bottom: 85px;
    background-position: 0 -130px;
  }
  .pub .no-touch a#appstore:hover,
  .pub .no-touch a#appstore:focus {
    background-position: 0 -195px;
  }
  .pub a#webapp {
    bottom: 160px;
    background-position: 0 -260px;
  }
  .pub .no-touch a#webapp:hover,
  .pub .no-touch a#webapp:focus {
    background-position: 0 -325px;
  }
  /*App mobile accueil-----------*/
  .bloc_button .lien_download {
    display: block;
    margin: 10px 50px;
    height: 65px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/mobile_download.png) no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 2;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
  }
  .bloc_button .no-touch .lien_download:hover,
  .bloc_button .no-touch .lien_download:focus {
    margin-left: 65px;
  }
  .bloc_button .lien_download {
    height: 55px;
    background-size: auto 330px;
  }
  .bloc_button a#googleplay {
    background-position: 0 0;
  }
  .bloc_button a#appstore {
    background-position: 0 -110px;
  }
  .bloc_button a#webapp {
    background-position: 0 -220px;
  }
  /*Actu-----------*/
  #actu {
    margin-top: 80px;
  }
  #actu .bloc_titre {
    margin-bottom: 30px;
  }
  #actu .actu_date {
    margin-bottom: 5px;
  }
  a.plus {
    background: #c51718;
    color: #fff;
    padding: 3px 5px;
    text-align: right;
    margin: 5px 0;
  }
  .no-touch a.plus:hover,
  .no-touch a.plus:focus {
    background: #312e2f !important;
    color: #ea5f0b;
  }
  a.boitier {
    display: block;
    padding: 5px 15px;
  }
  a.boitier h3 {
    font-size: 1.2em;
    padding: 10px 0 0 0;
  }
  .no-touch .actu a.boitier:hover,
  .no-touch .actu a.boitier:focus {
    text-decoration: none;
    background-color: #fff;
  }
  .no-touch .actu a.bloc_plus:hover,
  .no-touch .actu a.bloc_plus:focus {
    text-decoration: none;
    background-color: transparent;
    opacity: 0.5;
  }
  .bloc_plus {
    position: absolute;
    right: 0;
  }
  .bloc_plus_relative {
    position: relative;
    text-align: right;
  }
  .lien_plus {
    color: #c51718;
    font-size: 0.8em;
    display: inline-block;
  }
  .intro {
    margin-bottom: 10px;
  }
  .bando_actu {
    display: flex;
    flex-direction: column;
  }
  .bando_actu article {
    flex-grow: 1;
  }
  .bando_actu article h3 {
    padding: 3px 5px;
  }
  .actu_illu {
    display: flex;
    flex-grow: 1;
  }
  .actu_illu img {
    align-self: flex-end;
    max-height: 200px;
  }
  #illu_reward,
  #illu_info {
    justify-content: flex-start;
  }
  #illu_annonce {
    justify-content: flex-end;
  }
  #info,
  #reward {
    background: #efedea;
  }
  #info article:nth-of-type(1),
  #reward article:nth-of-type(1) {
    padding: 30px 10px 30px 30px;
  }
  #info article:nth-of-type(2),
  #reward article:nth-of-type(2) {
    padding: 30px 15px 30px 20px;
    border-top: 1px solid #d4cfc7;
  }
  #annonce {
    background: #ffffff;
    margin-top: 0;
  }
  #annonce article:nth-of-type(1) {
    padding: 30px 10px 30px 30px;
  }
  #annonce article:nth-of-type(2) {
    padding: 30px 30px 30px 20px;
    border-top: 1px solid #d4cfc7;
  }
  #illu_information {
    background-color: #ea5f0b;
  }
  #illu_annonce {
    background-color: #fbba02;
    order: -1;
  }
  #illu_reward {
    background-color: #911536;
  }
  .onglet .actu article {
    border-bottom: #675c4f 1px dashed;
  }
  .onglet .actu article:last-child {
    border-bottom: none;
  }
  .actu .texte_col {
    position: relative;
    padding: 0 0 30px 0;
    color: #35332a;
    font-size: 0.9em;
  }
  .full .actu .texte_col {
    padding: 0 0 10px 0;
  }
  /*Europe-----------*/
  #europe {
    position: relative;
    margin-top: 80px;
  }
  #europe img {
    margin-top: -20px;
  }
  .menu_bando {
    position: absolute;
    top: 10rem;
    flex-direction: column;
  }
  /*Equipe-----------*/
  #equipe {
    margin: 175px 15px 0 15px;
  }
  ul.personnel {
    margin: 0 1% 10px 0;
    padding: 1% 0 2% 0;
    width: 49%;
    float: left;
  }
  ul.personnel-1col {
    margin: 0 1% 5% 0;
    padding: 1% 0 2% 0;
    width: 19%;
    float: left;
  }
  ul.personnel li,
  ul.personnel-1col li {
    display: block;
    float: left;
    position: relative;
    margin: 5px;
  }
  ul.personnel li a,
  ul.personnel-1col li a {
    display: block;
    position: relative;
  }
  ul.personnel li a .portrait_c,
  ul.personnel-1col li a .portrait_c {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  ul.personnel-nick {
    margin: 0 1% 5% 0;
    padding: 1% 0 2% 0;
    width: 49%;
    float: left;
  }
  ul.personnel-nick li a {
    display: block;
    padding: 1% 2% 0.5% 2%;
    border-top: 1px solid #D9D2C6;
  }
  ul.personnel-nick li a.photosurvol {
    color: #fff;
    background-color: #c51718;
    text-decoration: none;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  }
  .no-touch ul.personnel-nick li a:hover,
  .no-touch ul.personnel-nick li a:focus {
    color: #fff;
    background-color: #c51718;
    text-decoration: none;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  }
  .avo {
    font-size: 0.8em;
    color: #7C6E5F;
  }
  ul.personnel-nick li a.photosurvol .avo {
    color: #fff;
  }
  .no-touch ul.personnel-nick li a:hover .avo,
  .no-touch ul.personnel-nick li a:focus .avo {
    color: #fff;
  }
  .bt_orange {
    display: inline-block;
    width: 35%;
    padding: 10px 5px;
    margin: 0 15px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
    border: none;
    line-height: 1.2em;
  }
  .no-touch .bt_orange:hover,
  .no-touch .bt_orange:focus {
    background-color: #312e2f;
    color: #ea5f0b;
  }
  #tri {
    justify-content: center;
    flex-direction: column;
  }
  #tri select {
    order: 1;
    margin: 0 5px;
  }
  #tri input {
    width: 100%;
    margin: 5px 0 0 0;
    order: 2;
  }
  .triage {
    margin: 5px 0 !important;
  }
  #formulaire_recherche {
    margin: 30px 0 20px 0;
  }
  #formulaire_recherche .flex {
    flex-direction: column;
    justify-content: center;
  }
  #formulaire_recherche .flex .bt_orange {
    width: 100%;
    margin: 5px 0 0 0;
  }
  .formulaire_recherche input.text,
  #tri .dk-select {
    width: 100%;
    margin: 10px 0;
    min-height: 40px;
  }
  .box form input {
    margin: 10px 0 0 0;
  }
  #liste_fiche .double img {
    margin: 0;
  }
  #liste_fiche .double_flot {
    padding: 10px 2%;
    width: 61%;
  }
  #liste_fiche h3 {
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-size: 1em;
  }
  #liste_fiche p {
    font-size: 0.9em;
    line-height: 1em;
    color: #222017;
    font-weight: 400;
    margin: 4px 0 0 4px;
  }
  .no-touch #liste_fiche a:hover,
  .no-touch #liste_fiche a:focus,
  .no-touch #liste_fiche a:hover p,
  .no-touch #liste_fiche a:focus p {
    color: #DD6B2D;
    background-color: #fff;
    background-image: none;
  }
  .box_double {
    display: block;
    width: 100%;
    float: none;
    margin: 15px 0;
  }
  .double_cont .box_double:first-child {
    margin: 15px 0;
  }
  .double_cont .decal {
    margin: 15px 0;
  }
  /*----Classement annee---*/
  #annee {
    margin: 0 0 20px 0;
  }
  #annee li {
    display: inline-block;
    margin: 5px;
  }
  #annee li a {
    display: block;
    padding: 5px 10px;
    background-color: #c51718;
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid #c51718;
    border-top: 1px solid #c51718;
  }
  .no-touch #annee li a.on,
  #annee li a:hover,
  #annee li a:focus {
    background-color: #fff;
    color: #35332A;
    text-decoration: none;
    border-bottom: 1px solid #4f4b53;
    border-top: 1px solid #4f4b53;
  }
  /*----footer---*/
  .no-touch nav.menu_col ul li a:hover,
  nav.menu_col ul li a:focus {
    color: #fff;
    background-color: #c51718;
    text-decoration: none;
  }
  nav.menu_col ul li a#lock span,
  nav.menu_col ul li a#lock2 span {
    display: inline-block;
    float: right;
    height: 15px;
    width: 24px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -270px;
  }
  .no-touch nav.menu_col ul li a#lock:hover,
  .no-touch nav.menu_col ul li a#lock:focus,
  .no-touch nav.menu_col ul li a#lock.on,
  .no-touch nav.menu_col ul li a#lock2:hover,
  .no-touch nav.menu_col ul li a#lock2:focus,
  .no-touch nav.menu_col ul li a#lock2.on {
    color: #fff;
    background: #c51718;
  }
  .no-touch nav.menu_col ul li a#lock:hover span,
  .no-touch nav.menu_col ul li a#lock:focus span,
  .no-touch nav.menu_col ul li a#lock.on span,
  .no-touch nav.menu_col ul li a#lock2:hover span,
  .no-touch nav.menu_col ul li a#lock2:focus span,
  .no-touch nav.menu_col ul li a#lock2.on span {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -285px;
  }
  nav.menu_col ul li a#watch span {
    display: inline-block;
    float: right;
    height: 15px;
    width: 24px;
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -300px;
  }
  .no-touch nav.menu_col ul li a#watch:hover,
  .no-touch nav.menu_col ul li a#watch:focus {
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
  }
  .no-touch nav.menu_col ul li a#watch:hover span,
  .no-touch nav.menu_col ul li a#watch:focus span {
    background: url(//www.casalonga.com/squelettes-2021/IMG/icone.png) no-repeat;
    background-position: right -315px;
  }
  footer {
    background: #d4cfc7;
  }
  footer nav.menu_col {
    font-size: 0.85em;
    text-align: center;
    margin: 10px 0 0 0;
  }
  footer .menu_col li {
    display: inline-block;
  }
  footer .menu_col li a {
    display: block;
    border-top: 1px solid #D9D2C6;
    margin: 5px;
    height: 23px;
    padding: 5px 5px 0 5px !important;
    font-size: 0.9em;
  }
  footer #footer {
    text-align: center;
    padding: 15px 65px;
    color: #7C6E5F;
    font-size: 0.7em;
  }
  #footer {
    padding: 10px 0;
  }
}
/*------------- =============== -----------*/
/*-------------structure CONTENU-----------*/
/*------------- =============== -----------*/
/*------------- =============== -----------*/
/*-------------structure PIED--------------*/
/*------------- =============== -----------*/
/*--- @media all---*/
/*------- =============== ---------*/
@media screen and (max-width: 768px) {
  /* MOBILE ici les instructions pour écrans de moins de 768 de large. (tablette et - ) */
  ul.personnel li a .portrait_c,
  ul.personnel-1col li a .portrait_c {
    max-width: 62px !important;
  }
  ul.personnel li a .portrait_nb,
  ul.personnel-1col li a .portrait_nb {
    max-width: 62px !important;
  }
}
/*------- =============== ---------*/
@media screen and (min-width: 481px) {
  /* sous MEDIUM ici les instructions pour écrans de plus de 481px de large. (smartphone paysage ) */
  #bloc_couleur_wrapper {
    grid-template-columns: 1fr 1fr;
  }
  #bloc_couleur_wrapper .bloc_couleur {
    min-height: 80px;
    position: relative;
  }
  #welcome-text {
    width: 69%;
    min-width: 380px;
  }
  #equipe {
    margin: 95px 15px 0 15px;
  }
}
/*--- @media 481px---*/
/*------- =============== ---------*/
@media screen and (min-width: 641px) {
  /* MEDIUM ici les instructions pour écrans de plus de 641px de large. (smartphone paysage et tablette) */
}
/*--- @media 641---*/
/*------- =============== ---------*/
@media screen and (min-width: 719px) {
  /* LARGE ici les instructions pour écrans de plus de 768 de large. (tablette paysage et - ) */
  .contenu_texte {
    margin: 0 30px 30px 30px;
  }
  .texte p,
  .chapo p,
  .chapo_accueil p {
    text-align: justify;
  }
  #contact_content,
  #app_content,
  #upc_content {
    justify-content: space-between;
  }
  #contact_content {
    margin-top: -30px;
  }
  .flex-item {
    flex-basis: 290px;
  }
  #app_content img,
  #upc_content img {
    max-height: 350px;
  }
  #bloc_couleur_wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #bloc_couleur_wrapper .bloc_couleur {
    min-height: 120px;
    position: relative;
  }
  #bloc_couleur_wrapper .bloc_couleur h3 {
    width: 75%;
  }
  main h1.logo {
    width: 50%;
    min-width: 380px;
  }
  .sous-titre {
    width: 40%;
    min-width: 300px;
  }
  .bando_actu {
    flex-direction: row;
  }
  .bando_actu article {
    width: 40%;
  }
  .actu_illu {
    width: 20%;
  }
  .actu_illu img {
    max-height: none;
  }
  #info article:nth-of-type(2),
  #reward article:nth-of-type(2) {
    border-top: none;
    border-left: 1px solid #d4cfc7;
  }
  #annonce article:nth-of-type(2) {
    border-top: none;
    border-left: 1px solid #d4cfc7;
  }
  #illu_annonce {
    order: inherit;
  }
  #europe img {
    margin-top: -40px;
  }
  .deco {
    position: relative;
    z-index: 10;
    text-align: right;
    margin: -35px 0 0 0;
  }
  #groupe img {
    width: 35%;
    padding: 0 20px 0 0;
  }
  .menu_bando {
    top: 20rem;
  }
  #equipe {
    margin: 80px 50px 0 50px;
  }
  ul.personnel-nick {
    margin: 0 1% 5% 0;
    padding: 1% 0 2% 0;
    width: 38%;
    float: left;
  }
  ul.personnel {
    margin: 0 1% 10px 0;
    padding: 1% 0 2% 0;
    width: 58%;
    float: left;
  }
  #tri {
    flex-direction: row;
  }
  #tri select {
    order: 1;
  }
  #tri input {
    width: 35%;
    margin-top: 0;
    order: 2;
  }
  #formulaire_recherche .flex {
    flex-direction: row;
  }
  #formulaire_recherche .flex .bt_orange {
    width: 35%;
    margin-top: 0;
  }
  .formulaire_recherche input.text,
  #tri .dk-select {
    width: 40%;
    margin: 0;
  }
  .box_double {
    display: block;
    width: 47%;
    float: left;
    margin: 15px 0 0 0;
  }
  .double_cont .box_double:first-child {
    margin: 15px 4% 15px 0;
  }
  .double_cont .decal {
    margin: 15px 4% 15px 0;
  }
  .liste_article {
    grid-template-columns: 1fr 1fr;
  }
}
/*--- @media 767---*/
/*------- =============== ---------*/
@media screen and (min-width: 1200px) {
  /* XLARGE ici les instructions pour écrans de plus de 1200 de large. (bureau grand ecran et + ) */
  main {
    margin-left: 280px;
  }
  #col_menu {
    left: 0px;
  }
  #bloc_couleur_wrapper {
    margin: 30px 0 0 0;
  }
  #contact #contact_content img {
    max-height: 600px;
  }
  #app_content img,
  #upc_content img {
    max-height: 390px;
  }
  .liste_article {
    grid-template-columns: repeat(auto-fit, minmax(33.33%, 1fr));
  }
  .col_g {
    float: left;
    width: 69%;
    margin-right: 1.5%;
  }
  .col_d {
    float: right;
    width: 25%;
    margin-left: 1.5%;
    margin-right: 3%;
  }
}
/*--- @media 1200---*/
/*------- =============== ---------*/
@media screen and (min-width: 1440px) {
  /* XXLARGE ici les instructions pour écrans de plus de 1441 de large.  */
}
/*--- @media 1441---*/
/*------- =============== ---------*/
@media screen and (min-width: 1680px) {
  /* plus que XXLARGE ici les instructions pour écrans de plus de 1681 de large.  */
  .liste_article {
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  }
}
/*--- @media 1681---*/