@font-face {
  font-family: "Robinson";
  src: url("../fonts/ROBINSON_REGULAR.ttf") format("truetype"), url("../fonts/ROBINSON_REGULAR.OTF") format("truetype");
}

@font-face {
  font-family: "Cambria";
  src: url("../fonts/Cambria.ttf") format("truetype"), url("../fonts/Cambria.otf") format("truetype");
}

@font-face {
  font-family: "Cambria Bold";
  src: url("../fonts/cambria_bold.ttf") format("truetype");
}

body {
  background: #000000;
  font-family: 'Robinson';
}

body .bandes-cinema {
  width: 100%;
  position: fixed;
  background-color: #000;
  z-index: 10000;
  height: 62px;
}

body .bandes-cinema.top {
  top: 0;
}

body .bandes-cinema.bottom {
  bottom: 0;
}

body #splashcreen {
  padding: 20px;
  background: #000000;
  position: fixed;
  z-index: 800;
}

body #splashcreen p {
  text-align: center;
  color: #d6b477;
  font-size: 20px;
}

body .scrollmagic-pin-spacer {
  top: 0 !important;
}

body .hidden {
  display: none;
}

body #button-play {
  position: fixed;
  z-index: 610;
  bottom: 83px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #FFF;
  text-align: center;
  cursor: pointer;
  opacity: 0;
}

body #button-play img {
  width: 20%;
}

body #intro {
  position: fixed;
  z-index: 605;
  width: 100%;
}

body #control-audio {
  width: 32px;
  height: 32px;
  position: fixed;
  z-index: 999;
  right: 50px;
  bottom: 50px;
  cursor: pointer;
}

body #control-audio.off {
  background: url("../img/pictos/icon-sound_off.png") no-repeat center;
}

body #control-audio.on {
  background: url("../img/pictos/icon-sound_on.png") no-repeat center;
}

body .credits {
  position: relative;
  margin-top: 50px;
  text-align: center;
  color: #FFFFFF;
  text-shadow: #000000;
  font-family: 'Cambria';
  font-size: 16px;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  z-index: 3;
  text-decoration: underline;
}

@keyframes pulse {
  from {
    opacity: .6;
  }
  to {
    opacity: .2;
  }
}

@keyframes pulseShadow {
  50% {
    -webkit-box-shadow: 0px 0px 82px 40px #00fff0;
    -moz-box-shadow: 0px 0px 82px 40px #00fff0;
    box-shadow: 0px 0px 82px 40px #00fff0;
  }
}

@keyframes pulseShadowGreen {
  50% {
    -webkit-box-shadow: 0px 0px 82px 40px #00ff78;
    -moz-box-shadow: 0px 0px 82px 40px #00ff78;
    box-shadow: 0px 0px 82px 40px #00ff78;
  }
}

@keyframes pulseShadowOrange {
  50% {
    -webkit-box-shadow: 0px 0px 82px 40px #ffba00;
    -moz-box-shadow: 0px 0px 82px 40px #ffba00;
    box-shadow: 0px 0px 82px 40px #ffba00;
  }
}

@keyframes pulseShadowYellow {
  50% {
    -webkit-box-shadow: 0px 0px 82px 40px #ffea00;
    -moz-box-shadow: 0px 0px 82px 40px #ffea00;
    box-shadow: 0px 0px 82px 40px #ffea00;
  }
}

/***********************
TEST SKROLL R
 ******************/
#bg-sky {
  background: url("../img/tableau-1/plans/plan-fixe-bis.png") no-repeat center;
  height: 100%;
  position: fixed;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 0px;
  background-size: cover;
  z-index: 1;
  transition: background  1s;
}

#bg-sky-2 {
  background: url("../img/tableau-2/plans/tab-2_plan-fixe.jpg") no-repeat center;
  height: 100%;
  position: fixed;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 0px;
  background-size: cover;
  z-index: 1;
}

#bg-sky-3 {
  background: url("../img/tableau-3/plans/tab-3_plan-fixe.png") no-repeat center;
  height: 100%;
  position: fixed;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 0px;
  background-size: cover;
  z-index: 4;
}

#vignette {
  background: url("../img/plans/vignette.png") no-repeat center;
  height: 100%;
  position: fixed;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 0px;
  background-size: cover;
  z-index: 1;
}

#canv {
  position: fixed;
  top: 0;
  width: 1680px;
  height: 940px;
  z-index: 2;
  background: transparent;
}

.cta {
  position: fixed;
  z-index: 2;
  cursor: pointer;
}

.cta.index {
  top: 0;
  right: 0;
}

.cta.libelle {
  position: fixed;
  margin: 0 auto;
  left: 17%;
  width: 10%;
  z-index: 100;
  bottom: 33%;
}

.cta.podcast {
  position: fixed;
  margin: 0 auto;
  left: 17%;
  width: 10%;
  cursor: pointer;
  z-index: 100;
  bottom: 21%;
}

#next {
  font-size: 36px;
  position: fixed;
  right: 0;
  top: 39%;
  cursor: pointer;
  z-index: 599;
}

#next span {
  color: #d6b477;
  font-size: 23px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #b98f11, 0 0 20px #b98f11, 0 0 30px #b98f11, 0 0 40px #d6b477, 0 0 70px #d6b477, 0 0 80px #d6b477, 0 0 100px #d6b477, 0 0 150px #d6b477;
}

#next span:after {
  position: absolute;
  font-weight: 100;
  letter-spacing: 7px;
  top: 12px;
  color: #d6b47799;
  display: block;
  content: attr(text);
  animation: pulse 1s alternate infinite;
}

#next .arrow:last-child {
  left: -19px;
  position: relative;
}

#prev {
  font-size: 36px;
  position: fixed;
  right: 0;
  top: 39%;
  cursor: pointer;
  z-index: 599;
  left: 10px;
}

#prev span {
  display: inline-block;
  position: relative;
  top: -2px;
  left: -9px;
  color: #d6b477;
  font-size: 23px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #b98f11, 0 0 20px #b98f11, 0 0 30px #b98f11, 0 0 40px #d6b477, 0 0 70px #d6b477, 0 0 80px #d6b477, 0 0 100px #d6b477, 0 0 150px #d6b477;
}

#prev span:after {
  position: absolute;
  font-weight: 100;
  letter-spacing: 0px;
  top: 0px;
  color: #d6b47799;
  display: block;
  content: attr(text);
  animation: pulse 1s alternate infinite;
}

#prev .arrow.move {
  left: -15px;
  position: relative;
}

#tableau-1 {
  height: 100%;
  position: fixed;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 0px;
  background-size: cover;
  z-index: 1;
  min-width: 100%;
  display: inline-block;
  vertical-align: top;
}

#tableau-1 .s {
  position: fixed;
  width: 13555px;
  height: 939px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
}

#tableau-1 .s.circe {
  background-image: url("../img/tableau-1/elements/element-circe-cut.png");
  background-position-y: top;
  cursor: pointer;
  width: 25%;
  height: 50% !important;
}

#tableau-1 .s.moon {
  background-image: url("../img/tableau-1/elements/element-moon-cut.png");
  background-position-y: top;
  cursor: pointer;
  width: 16%;
  height: 27% !important;
}

#tableau-1 .s.slide1 {
  background-image: url("../img/plans/plan-7.png");
}

#tableau-1 .s.slide2 {
  background-image: url("../img/plans/plan-6.png");
}

#tableau-1 .s.slide3 {
  background-image: url("../img/plans/plan-5.png");
}

#tableau-1 .s.slide4 {
  background-image: url("../img/plans/plan-4.png");
}

#tableau-1 .s.slide5 {
  background-image: url("../img/plans/plan-3.png");
}

#tableau-1 .s.slide6 {
  background-image: url("../img/plans/plan-2.png");
}

#tableau-1 .s.slide7 {
  background-image: url("../img/plans/plan-1.png");
}

#tableau-1 .s.slide9 {
  background-image: url("../img/transitions/transition-plan-2.png");
  width: 1920px;
}

#tableau-1 .s.slide11 {
  background-image: url("../img/transitions/transition-plan-1.png");
  width: 1920px;
}

#tableau-1 .s.slide12 {
  background-image: url("../img/transitions/transition-2.png");
  width: 1633px;
  z-index: 10;
}

#tableau-1 .s.slide13 {
  background-image: url("../img/transitions/transition-3.png");
  width: 1633px;
  z-index: 10;
}

#tableau-1 .s.slide14 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-7.png");
}

#tableau-1 .s.slide15 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-6.png");
}

#tableau-1 .s.slide16 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-5.png");
}

#tableau-1 .s.slide17 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-4.png");
}

#tableau-1 .s.slide18 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-3.png");
}

#tableau-1 .s.slide19 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-2.png");
}

#tableau-1 .s.slide20 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-1.png");
}

#tableau-1 .s.slide21 {
  background-image: url("../img/tableau-3/plans/plan-5.png");
}

#tableau-1 .s.slide22 {
  background-image: url("../img/tableau-3/plans/plan-4.png");
}

#tableau-1 .s.slide23 {
  background-image: url("../img/tableau-3/plans/plan-3.png");
}

#tableau-1 .s.slide24 {
  background-image: url("../img/tableau-3/plans/plan-2.png");
}

#tableau-1 .s.slide25 {
  background-image: url("../img/tableau-3/plans/plan-1.png");
}

#tableau-1 .s.slide26 {
  background-image: url("../img/tableau-4/plans/plan-7.png");
}

#tableau-1 .s.slide27 {
  background-image: url("../img/tableau-4/plans/plan-5.png");
}

#tableau-1 .s.slide28 {
  background-image: url("../img/tableau-4/plans/plan-4.png");
}

#tableau-1 .s.slide29 {
  background-image: url("../img/tableau-4/plans/plan-3.png");
}

#tableau-1 .s.slide30 {
  background-image: url("../img/tableau-4/plans/plan-2.png");
}

#tableau-1 .s.slide31 {
  background-image: url("../img/tableau-4/plans/plan-1.png");
}

#tableau-1 .element-click {
  position: fixed;
  background-repeat: no-repeat;
  cursor: pointer;
}

#tableau-1 .element-click.pie {
  top: 38%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  z-index: 3;
  animation: pulseShadow 5s infinite;
}

#tableau-1 .element-click.pie span {
  background-image: url("../img/tableau-1/elements/element-pie.png");
  width: 95px;
  height: 74px;
  bottom: 30px;
  z-index: 4;
  display: block;
  position: relative;
  right: 58px;
}

#tableau-1 .element-click.mandragore {
  top: 90%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  z-index: 3;
  animation: pulseShadow 5s infinite;
}

#tableau-1 .element-click.mandragore span {
  background-image: url("../img/tableau-1/elements/element-mandragore.png");
  width: 215px;
  height: 175px;
  bottom: 71px;
  z-index: 4;
  display: block;
  position: relative;
  right: 85px;
}

#tableau-1 .element-click.magnetite {
  top: 90%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  z-index: 3;
  animation: pulseShadow 5s infinite;
}

#tableau-1 .element-click.magnetite span {
  background-image: url("../img/tableau-1/elements/element-magnetite.png");
  width: 203px;
  height: 156px;
  bottom: 86px;
  z-index: 4;
  display: block;
  position: relative;
  right: 85px;
  cursor: pointer;
}

#tableau-1 .element-click.morelle {
  top: 89%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadow 5s infinite;
}

#tableau-1 .element-click.morelle span {
  background-image: url("../img/tableau-1/elements/morelle.png");
  width: 91px;
  height: 134px;
  bottom: 47px;
  display: block;
  position: relative;
  right: 35px;
  cursor: pointer;
}

#tableau-1 .element-click.corneille {
  top: 36%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadowGreen 5s infinite;
}

#tableau-1 .element-click.corneille span {
  background-image: url("../img/tableau-2/elements/element-corneille.png");
  width: 230px;
  height: 224px;
  display: block;
  position: relative;
  right: 78px;
  bottom: 114px;
  cursor: pointer;
}

#tableau-1 .element-click.amanite {
  top: 58%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadowGreen 5s infinite;
}

#tableau-1 .element-click.amanite span {
  background-image: url("../img/tableau-2/elements/element-amanite.png");
  width: 298px;
  height: 286px;
  display: block;
  position: relative;
  right: 136px;
  bottom: 106px;
  cursor: pointer;
}

#tableau-1 .element-click.crapaud {
  top: 89%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadowGreen 5s infinite;
}

#tableau-1 .element-click.crapaud span {
  background-image: url("../img/tableau-2/elements/element-crapaud.png");
  width: 259px;
  height: 168px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
}

#tableau-1 .element-click.datura {
  top: 89%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  z-index: 6;
  animation: pulseShadowGreen 5s infinite;
}

#tableau-1 .element-click.datura span {
  background-image: url("../img/tableau-2/elements/element-datura.png");
  width: 310px;
  height: 182px;
  bottom: 66px;
  z-index: 8;
  display: block;
  position: relative;
  right: 76px;
}

#tableau-1 .element-click.lapislazuli {
  top: 90%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadowGreen 5s infinite;
}

#tableau-1 .element-click.lapislazuli span {
  background-image: url("../img/tableau-2/elements/element-lapislazuli.png");
  width: 230px;
  height: 151px;
  bottom: 66px;
  z-index: 4;
  display: block;
  position: relative;
  right: 138px;
}

#tableau-1 .element-click.morgane {
  background-image: url("../img/tableau-2/elements/element-morgan.png");
  background-position-y: top;
  z-index: auto;
  cursor: pointer;
  width: 750px;
  height: 450px;
}

#tableau-1 .element-click.chouette {
  top: 46%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadowOrange 5s infinite;
}

#tableau-1 .element-click.chouette span {
  background-image: url("../img/tableau-3/elements/element-chouette.png");
  right: 221px;
  width: 288px;
  height: 320px;
  bottom: 20px;
  display: block;
  position: relative;
}

#tableau-1 .element-click.renard {
  top: 77%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  left: 58px;
  animation: pulseShadowOrange 5s infinite;
}

#tableau-1 .element-click.renard span {
  background-image: url("../img/tableau-3/elements/element-renard.png");
  width: 254px;
  height: 249px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
}

#tableau-1 .element-click.millepertuis {
  top: 63%;
  width: 136px;
  height: 141px;
  display: block;
  border-radius: 100%;
  left: 58px;
}

#tableau-1 .element-click.millepertuis span {
  background-image: url("../img/tableau-3/elements/element-millepertuis.png");
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
  width: 136px;
  height: 141px;
}

#tableau-1 .element-click.saphir {
  top: 92%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
}

#tableau-1 .element-click.saphir span {
  background-image: url("../img/tableau-3/elements/element-saphir.png");
  bottom: 112px;
  display: block;
  position: relative;
  right: 138px;
  width: 234px;
  height: 210px;
}

#tableau-1 .element-click.chat {
  top: 87%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
}

#tableau-1 .element-click.chat span {
  background-image: url("../img/tableau-4/elements/element-chat.png");
  bottom: 112px;
  display: block;
  position: relative;
  right: 138px;
  width: 241px;
  height: 252px;
}

#tableau-1 .element-click.micheechauderon {
  top: 17%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
}

#tableau-1 .element-click.micheechauderon span {
  background-image: url("../img/tableau-4/elements/element-bougies.png");
  bottom: 112px;
  display: block;
  position: relative;
  width: 400px;
  height: 509px;
  z-index: 6;
}

#tableau-1 .element-click.chicoree {
  top: 49%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
}

#tableau-1 .element-click.chicoree span {
  background-image: url("../img/tableau-4/elements/element-chicoree.png");
  bottom: 112px;
  display: block;
  position: relative;
  width: 140px;
  height: 291px;
  z-index: 6;
}

#tableau-1 .element-click.orpiment {
  top: 54%;
  width: 18px;
  height: 17px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
}

#tableau-1 .element-click.orpiment span {
  background-image: url("../img/tableau-4/elements/element-orpiment.png");
  bottom: 57px;
  right: 40px;
  display: block;
  position: relative;
  width: 100px;
  height: 112px;
  z-index: 6;
}

#tableau-1 #saphir {
  z-index: 10;
  width: 234px;
  height: 210px;
  top: 81%;
  right: 142px;
}

#tableau-1 #chouette {
  z-index: 10;
  width: 288px;
  height: 320px;
  top: 38%;
}

#tableau-1 #millepertuis {
  z-index: 10;
  width: 136px;
  height: 141px;
  top: 55%;
}

#tableau-1 #renard {
  z-index: 10;
  width: 254px;
  height: 249px;
  top: 67%;
}

#tableau-1 #crapaud {
  z-index: 10;
  height: 168px;
  width: 259px;
  top: 83%;
}

#tableau-1 #lapislazuli {
  z-index: 10;
  width: 230px;
  height: 151px;
  top: 83%;
}

#tableau-1 #corneille {
  width: 230px;
  height: 224px;
  z-index: 10;
  top: 23%;
}

#tableau-1 #amanite {
  width: 201px;
  height: 251px;
  z-index: 10;
  top: 50%;
}

#tableau-1 #morgane {
  width: 100px;
  height: 100px;
  z-index: 10;
  top: 20%;
}

#tableau-1 #hildegarde {
  width: 179px;
  height: 224px;
  z-index: 10;
  top: 14%;
}

#tableau-1 #micheechauderon {
  width: 200px;
  height: 200px;
  z-index: 10;
  top: 14%;
}

#tableau-1 #chat {
  width: 251px;
  height: 262px;
  z-index: 10;
  top: 72%;
}

#tableau-1 #circe {
  width: 231px;
  height: 335px;
  z-index: 10;
  top: 6%;
}

#tableau-1 #moon {
  width: 100px;
  height: 100px;
  z-index: 10;
  top: 7%;
}

#tableau-1 #orpiment {
  width: 100px;
  height: 117px;
  z-index: 10;
  top: 48%;
}

#tableau-1 #chicoree {
  width: 100px;
  height: 100px;
  z-index: 10;
  top: 54%;
}

/************************************************

             MODAL

 ********************************************* */
.modal-backdrop.show {
  opacity: 0;
}

.modal .modal-dialog {
  max-width: 90%;
}

.modal .modal-dialog .modal-content {
  background: rgba(0, 0, 0, 0.82);
  border-radius: 0;
}

.modal .modal-dialog .modal-content [type=button], .modal .modal-dialog .modal-content [type=reset], .modal .modal-dialog .modal-content [type=submit], .modal .modal-dialog .modal-content button {
  -webkit-appearance: none;
}

.modal .modal-dialog .modal-content .modal-header {
  border-bottom: none;
  height: 150px;
}

.modal .modal-dialog .modal-content .modal-header .close {
  right: 10px;
  opacity: 0.8;
  z-index: 30;
  margin: -41px 0;
  width: 176px;
  padding: 0;
  position: fixed;
}

.modal .modal-dialog .modal-content .modal-header .close:hover {
  opacity: 1;
}

.modal .modal-dialog .modal-content .modal-body {
  color: #FFFFFF;
  padding: 1rem 1rem 4rem 1rem;
}

.modal .modal-dialog .modal-content .modal-body .titre_tab {
  position: absolute;
  width: 300px;
  top: -119px;
  left: 35%;
}

.modal .modal-dialog .modal-content .modal-body .texte {
  padding-left: 150px;
  padding-right: 70px;
}

.modal .modal-dialog .modal-content .modal-body h1 {
  text-align: center;
  bottom: 12px;
  position: relative;
  letter-spacing: 5px;
  font-size: 34px;
  text-transform: uppercase;
}

.modal .modal-dialog .modal-content .modal-body h3 {
  text-align: center;
  font-size: 20px;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.modal .modal-dialog .modal-content .modal-body h2 {
  background: url("../img/pictos/picto-paragraphe.png") no-repeat left top;
  height: 146px;
  margin-bottom: -19px;
}

.modal .modal-dialog .modal-content .modal-body h2.without-margin {
  margin-bottom: 15px;
}

.modal .modal-dialog .modal-content .modal-body h2 span {
  position: relative;
  top: 35%;
  left: 22px;
  font-size: 34px;
  letter-spacing: 3px;
}

.modal .modal-dialog .modal-content .modal-body h2 span.little {
  font-size: 31px;
}

.modal .modal-dialog .modal-content .modal-body p {
  font-family: 'Cambria';
  font-size: 16px;
  text-align: justify;
  margin-left: 22px;
  line-height: 18px;
}

.modal .modal-dialog .modal-content .modal-body p.introduction {
  margin-top: 92px;
}

.modal .modal-dialog .modal-content .modal-body .border-l {
  border-left: 1px solid #d6b477;
}

.modal .modal-dialog .modal-content .modal-body .illustration {
  width: 68%;
  text-align: center;
  margin-left: 8%;
  margin-bottom: 50px;
  position: relative;
  display: block;
}

.modal .modal-dialog .modal-content .modal-body .illustration:first-child {
  margin-top: 134px;
}

.modal .modal-dialog .modal-content .modal-body .pictos {
  position: absolute;
  top: 220px;
  right: 6%;
}

.modal .modal-dialog .modal-content .modal-body .pictos .picto-img {
  display: block;
  width: 150px;
  cursor: pointer;
}

.modal .modal-dialog .modal-content .modal-body .pictos .ellipse {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #d6b477;
  display: block;
  margin: 0 auto;
}

#snow {
  position: fixed;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  z-index: 9;
  left: 0;
  top: 0;
}

#snow .snow-1 {
  background: url("../img/snow/17.png") repeat 0px 0px;
  -webkit-animation: dropFlowParticles 2s linear infinite;
  -o-animation: dropFlowParticles 2s linear infinite;
  animation: dropFlowParticles 2s linear infinite;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#snow .snow-2 {
  background: url("../img/snow/7bis.png") repeat 0px 0px;
  -webkit-animation: dropFlowParticles 12s linear infinite;
  -o-animation: dropFlowParticles 12s linear infinite;
  animation: dropFlowParticles 12s linear infinite;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@-webkit-keyframes dropFlowParticles {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 939px;
  }
}

@keyframes dropFlowParticles {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 939px;
  }
}

/***************************************

CANDLE
 **************************************/
.demo-wrap {
  position: fixed;
  align-self: flex-end;
  animation: blink .1s infinite;
  width: 50px;
  z-index: 11;
}

.demo-wrap .flicker {
  position: absolute;
  width: 5px;
  height: 30px;
  border-radius: 50%;
  background-color: #e7c278;
  box-shadow: 0 0 0px 0px #e7c278;
  -webkit-animation: 10s flicker infinite;
  animation: 10s flicker infinite;
  transition: .3s ease-in-out;
}

.demo-wrap .flicker.flicker-1 {
  animation: 12s flicker infinite;
}

.demo-wrap .flicker.flicker-2 {
  animation: 11s flicker infinite;
}

.demo-wrap .flicker.flicker-3 {
  animation: 13s flicker infinite;
  background-color: rgba(227, 167, 68, 0.61);
  box-shadow: 0 0 0px 0px rgba(227, 167, 68, 0.61);
}

.demo-wrap .flicker.flicker-4 {
  animation: 14s flicker infinite;
}

@keyframes flicker {
  78% {
    opacity: 0;
    box-shadow: 0 0 0.33px 0.165px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  29% {
    opacity: 0;
    box-shadow: 0 0 0.66px 0.33px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  28% {
    opacity: 0;
    box-shadow: 0 0 0.99px 0.495px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  59% {
    opacity: 0;
    box-shadow: 0 0 1.32px 0.66px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  95% {
    opacity: 0;
    box-shadow: 0 0 1.65px 0.825px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  37% {
    opacity: 0;
    box-shadow: 0 0 1.98px 0.99px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  71% {
    opacity: 0;
    box-shadow: 0 0 2.31px 1.155px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  81% {
    opacity: 0;
    box-shadow: 0 0 2.64px 1.32px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  86% {
    opacity: 0;
    box-shadow: 0 0 2.97px 1.485px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  19% {
    opacity: 0;
    box-shadow: 0 0 3.3px 1.65px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  73% {
    opacity: 0;
    box-shadow: 0 0 3.63px 1.815px #e6c074;
    height: 0;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  76% {
    opacity: 0;
    box-shadow: 0 0 3.96px 1.98px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  78% {
    opacity: 0;
    box-shadow: 0 0 4.29px 2.145px #e6c074;
    height: 0;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  31% {
    opacity: 0;
    box-shadow: 0 0 4.62px 2.31px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  74% {
    opacity: 0;
    box-shadow: 0 0 4.95px 2.475px #e6c074;
    height: 0;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  23% {
    opacity: 0;
    box-shadow: 0 0 5.28px 2.64px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  26% {
    opacity: 0;
    box-shadow: 0 0 5.61px 2.805px #e6c074;
    height: 0;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  53% {
    opacity: 0;
    box-shadow: 0 0 5.94px 2.97px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  28% {
    opacity: 0;
    box-shadow: 0 0 6.27px 3.135px #e6c074;
    height: 0;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  8% {
    opacity: 0;
    box-shadow: 0 0 6.6px 3.3px #e5be6f;
    height: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  71% {
    opacity: 0;
    box-shadow: 0 0 6.93px 3.465px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  93% {
    opacity: 0;
    box-shadow: 0 0 7.26px 3.63px #e5be6f;
    height: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  56% {
    opacity: 0;
    box-shadow: 0 0 7.59px 3.795px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  91% {
    opacity: 0;
    box-shadow: 0 0 7.92px 3.96px #e5be6f;
    height: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  18% {
    opacity: 0;
    box-shadow: 0 0 8.25px 4.125px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  19% {
    opacity: 0;
    box-shadow: 0 0 8.58px 4.29px #e5be6f;
    height: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  79% {
    opacity: 0;
    box-shadow: 0 0 8.91px 4.455px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  57% {
    opacity: 0;
    box-shadow: 0 0 9.24px 4.62px #e5be6f;
    height: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  93% {
    opacity: 0;
    box-shadow: 0 0 9.57px 4.785px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  65% {
    opacity: 0;
    box-shadow: 0 0 9.9px 4.95px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  82% {
    opacity: 0;
    box-shadow: 0 0 10.23px 5.115px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  56% {
    opacity: 0;
    box-shadow: 0 0 10.56px 5.28px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  83% {
    opacity: 0;
    box-shadow: 0 0 10.89px 5.445px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  22% {
    opacity: 0;
    box-shadow: 0 0 11.22px 5.61px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  55% {
    opacity: 0;
    box-shadow: 0 0 11.55px 5.775px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  75% {
    opacity: 0;
    box-shadow: 0 0 11.88px 5.94px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  73% {
    opacity: 0;
    box-shadow: 0 0 12.21px 6.105px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  17% {
    opacity: 0;
    box-shadow: 0 0 12.54px 6.27px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  63% {
    opacity: 0;
    box-shadow: 0 0 12.87px 6.435px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  7% {
    opacity: 0;
    box-shadow: 0 0 13.2px 6.6px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  32% {
    opacity: 0;
    box-shadow: 0 0 13.53px 6.765px #e4ba67;
    height: 0;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  43% {
    opacity: 0;
    box-shadow: 0 0 13.86px 6.93px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  53% {
    opacity: 0;
    box-shadow: 0 0 14.19px 7.095px #e4ba67;
    height: 0;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  48% {
    opacity: 0;
    box-shadow: 0 0 14.52px 7.26px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  91% {
    opacity: 0;
    box-shadow: 0 0 14.85px 7.425px #e4ba67;
    height: 0;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  57% {
    opacity: 0;
    box-shadow: 0 0 15.18px 7.59px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  10% {
    opacity: 0;
    box-shadow: 0 0 15.51px 7.755px #e4ba67;
    height: 0;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  86% {
    opacity: 0;
    box-shadow: 0 0 15.84px 7.92px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  83% {
    opacity: 0;
    box-shadow: 0 0 16.17px 8.085px #e4ba67;
    height: 0;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  32% {
    opacity: 0;
    box-shadow: 0 0 16.5px 8.25px #e3b862;
    height: 0;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  1% {
    opacity: 0;
    box-shadow: 0 0 16.83px 8.415px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  1% {
    opacity: 0;
    box-shadow: 0 0 17.16px 8.58px #e3b862;
    height: 0;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  35% {
    opacity: 0;
    box-shadow: 0 0 17.49px 8.745px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  82% {
    opacity: 0;
    box-shadow: 0 0 17.82px 8.91px #e3b862;
    height: 0;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  7% {
    opacity: 0;
    box-shadow: 0 0 18.15px 9.075px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  62% {
    opacity: 0;
    box-shadow: 0 0 18.48px 9.24px #e3b862;
    height: 0;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 18.81px 9.405px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  11% {
    opacity: 0;
    box-shadow: 0 0 19.14px 9.57px #e3b862;
    height: 0;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  47% {
    opacity: 0;
    box-shadow: 0 0 19.47px 9.735px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  31% {
    opacity: 0;
    box-shadow: 0 0 19.8px 9.9px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  54% {
    opacity: 0;
    box-shadow: 0 0 20.13px 10.065px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  71% {
    opacity: 0;
    box-shadow: 0 0 20.46px 10.23px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  41% {
    opacity: 0;
    box-shadow: 0 0 20.79px 10.395px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  2% {
    opacity: 0;
    box-shadow: 0 0 21.12px 10.56px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  80% {
    opacity: 0;
    box-shadow: 0 0 21.45px 10.725px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  31% {
    opacity: 0;
    box-shadow: 0 0 21.78px 10.89px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  20% {
    opacity: 0;
    box-shadow: 0 0 22.11px 11.055px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  27% {
    opacity: 0;
    box-shadow: 0 0 22.44px 11.22px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  14% {
    opacity: 0;
    box-shadow: 0 0 22.77px 11.385px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  65% {
    opacity: 0;
    box-shadow: 0 0 23.1px 11.55px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  68% {
    opacity: 0;
    box-shadow: 0 0 23.43px 11.715px #e2b45a;
    height: 0;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  44% {
    opacity: 0;
    box-shadow: 0 0 23.76px 11.88px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  53% {
    opacity: 0;
    box-shadow: 0 0 24.09px 12.045px #e2b45a;
    height: 0;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  35% {
    opacity: 0;
    box-shadow: 0 0 24.42px 12.21px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  14% {
    opacity: 0;
    box-shadow: 0 0 24.75px 12.375px #e2b45a;
    height: 0;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  86% {
    opacity: 0;
    box-shadow: 0 0 25.08px 12.54px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  92% {
    opacity: 0;
    box-shadow: 0 0 25.41px 12.705px #e2b45a;
    height: 0;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  66% {
    opacity: 0;
    box-shadow: 0 0 25.74px 12.87px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  98% {
    opacity: 0;
    box-shadow: 0 0 26.07px 13.035px #e2b45a;
    height: 0;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  58% {
    opacity: 0;
    box-shadow: 0 0 26.4px 13.2px #e1b255;
    height: 0;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  44% {
    opacity: 0;
    box-shadow: 0 0 26.73px 13.365px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  32% {
    opacity: 0;
    box-shadow: 0 0 27.06px 13.53px #e1b255;
    height: 0;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  14% {
    opacity: 0;
    box-shadow: 0 0 27.39px 13.695px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  72% {
    opacity: 0;
    box-shadow: 0 0 27.72px 13.86px #e1b255;
    height: 0;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  14% {
    opacity: 0;
    box-shadow: 0 0 28.05px 14.025px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  51% {
    opacity: 0;
    box-shadow: 0 0 28.38px 14.19px #e1b255;
    height: 0;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  34% {
    opacity: 0;
    box-shadow: 0 0 28.71px 14.355px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 29.04px 14.52px #e1b255;
    height: 0;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  14% {
    opacity: 0;
    box-shadow: 0 0 29.37px 14.685px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  72% {
    opacity: 0;
    box-shadow: 0 0 29.7px 14.85px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  87% {
    opacity: 0;
    box-shadow: 0 0 30.03px 15.015px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  28% {
    opacity: 0;
    box-shadow: 0 0 30.36px 15.18px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  91% {
    opacity: 0;
    box-shadow: 0 0 30.69px 15.345px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  92% {
    opacity: 0;
    box-shadow: 0 0 31.02px 15.51px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  64% {
    opacity: 0;
    box-shadow: 0 0 31.35px 15.675px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  37% {
    opacity: 0;
    box-shadow: 0 0 31.68px 15.84px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  5% {
    opacity: 0;
    box-shadow: 0 0 32.01px 16.005px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  15% {
    opacity: 0;
    box-shadow: 0 0 32.34px 16.17px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  44% {
    opacity: 0;
    box-shadow: 0 0 32.67px 16.335px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  57% {
    opacity: 0;
    box-shadow: 0 0 33px 16.5px #dfae4d;
    height: 0;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  60% {
    opacity: 0.23;
    box-shadow: 0 0 0.99px 0.495px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  81% {
    opacity: 0.23;
    box-shadow: 0 0 1.98px 0.99px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  83% {
    opacity: 0.23;
    box-shadow: 0 0 2.97px 1.485px #e7c278;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  91% {
    opacity: 0.23;
    box-shadow: 0 0 3.96px 1.98px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  75% {
    opacity: 0.23;
    box-shadow: 0 0 4.95px 2.475px #e6c074;
    height: 0;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  47% {
    opacity: 0.23;
    box-shadow: 0 0 5.94px 2.97px #e6c074;
    height: 0;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  4% {
    opacity: 0.23;
    box-shadow: 0 0 6.93px 3.465px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  27% {
    opacity: 0.23;
    box-shadow: 0 0 7.92px 3.96px #e5be6f;
    height: 0;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  86% {
    opacity: 0.23;
    box-shadow: 0 0 8.91px 4.455px #e5be6f;
    height: 0;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  37% {
    opacity: 0.23;
    box-shadow: 0 0 9.9px 4.95px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  96% {
    opacity: 0.23;
    box-shadow: 0 0 10.89px 5.445px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  99% {
    opacity: 0.23;
    box-shadow: 0 0 11.88px 5.94px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  11% {
    opacity: 0.23;
    box-shadow: 0 0 12.87px 6.435px #e5bc6b;
    height: 0;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  31% {
    opacity: 0.23;
    box-shadow: 0 0 13.86px 6.93px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  74% {
    opacity: 0.23;
    box-shadow: 0 0 14.85px 7.425px #e4ba67;
    height: 0;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  55% {
    opacity: 0.23;
    box-shadow: 0 0 15.84px 7.92px #e4ba67;
    height: 0;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  50% {
    opacity: 0.23;
    box-shadow: 0 0 16.83px 8.415px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  49% {
    opacity: 0.23;
    box-shadow: 0 0 17.82px 8.91px #e3b862;
    height: 0;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  86% {
    opacity: 0.23;
    box-shadow: 0 0 18.81px 9.405px #e3b862;
    height: 0;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  98% {
    opacity: 0.23;
    box-shadow: 0 0 19.8px 9.9px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  63% {
    opacity: 0.23;
    box-shadow: 0 0 20.79px 10.395px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  36% {
    opacity: 0.23;
    box-shadow: 0 0 21.78px 10.89px #e2b65e;
    height: 0;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  21% {
    opacity: 0.23;
    box-shadow: 0 0 22.77px 11.385px #e2b65e;
    height: 0;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  73% {
    opacity: 0.23;
    box-shadow: 0 0 23.76px 11.88px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  27% {
    opacity: 0.23;
    box-shadow: 0 0 24.75px 12.375px #e2b45a;
    height: 0;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  93% {
    opacity: 0.23;
    box-shadow: 0 0 25.74px 12.87px #e2b45a;
    height: 0;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  11% {
    opacity: 0.23;
    box-shadow: 0 0 26.73px 13.365px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  83% {
    opacity: 0.23;
    box-shadow: 0 0 27.72px 13.86px #e1b255;
    height: 0;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  90% {
    opacity: 0.23;
    box-shadow: 0 0 28.71px 14.355px #e1b255;
    height: 0;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30% {
    opacity: 0.23;
    box-shadow: 0 0 29.7px 14.85px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  97% {
    opacity: 0.23;
    box-shadow: 0 0 30.69px 15.345px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  18% {
    opacity: 0.23;
    box-shadow: 0 0 31.68px 15.84px #e0b051;
    height: 0;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  44% {
    opacity: 0.23;
    box-shadow: 0 0 32.67px 16.335px #e0b051;
    height: 0;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  79% {
    opacity: 0.45;
    box-shadow: 0 0 0.33px 0.165px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  46% {
    opacity: 0.45;
    box-shadow: 0 0 0.66px 0.33px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  49% {
    opacity: 0.45;
    box-shadow: 0 0 0.99px 0.495px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  32% {
    opacity: 0.45;
    box-shadow: 0 0 1.32px 0.66px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  41% {
    opacity: 0.45;
    box-shadow: 0 0 1.65px 0.825px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  75% {
    opacity: 0.45;
    box-shadow: 0 0 1.98px 0.99px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  8% {
    opacity: 0.45;
    box-shadow: 0 0 2.31px 1.155px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  64% {
    opacity: 0.45;
    box-shadow: 0 0 2.64px 1.32px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    opacity: 0.45;
    box-shadow: 0 0 2.97px 1.485px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    opacity: 0.45;
    box-shadow: 0 0 3.3px 1.65px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  82% {
    opacity: 0.45;
    box-shadow: 0 0 3.63px 1.815px #e6c074;
    height: 28px;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  11% {
    opacity: 0.45;
    box-shadow: 0 0 3.96px 1.98px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  51% {
    opacity: 0.45;
    box-shadow: 0 0 4.29px 2.145px #e6c074;
    height: 28px;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  98% {
    opacity: 0.45;
    box-shadow: 0 0 4.62px 2.31px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  43% {
    opacity: 0.45;
    box-shadow: 0 0 4.95px 2.475px #e6c074;
    height: 28px;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  87% {
    opacity: 0.45;
    box-shadow: 0 0 5.28px 2.64px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  35% {
    opacity: 0.45;
    box-shadow: 0 0 5.61px 2.805px #e6c074;
    height: 28px;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  2% {
    opacity: 0.45;
    box-shadow: 0 0 5.94px 2.97px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  92% {
    opacity: 0.45;
    box-shadow: 0 0 6.27px 3.135px #e6c074;
    height: 28px;
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  77% {
    opacity: 0.45;
    box-shadow: 0 0 6.6px 3.3px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  12% {
    opacity: 0.45;
    box-shadow: 0 0 6.93px 3.465px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  32% {
    opacity: 0.45;
    box-shadow: 0 0 7.26px 3.63px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  61% {
    opacity: 0.45;
    box-shadow: 0 0 7.59px 3.795px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  9% {
    opacity: 0.45;
    box-shadow: 0 0 7.92px 3.96px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  31% {
    opacity: 0.45;
    box-shadow: 0 0 8.25px 4.125px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  13% {
    opacity: 0.45;
    box-shadow: 0 0 8.58px 4.29px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  72% {
    opacity: 0.45;
    box-shadow: 0 0 8.91px 4.455px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  68% {
    opacity: 0.45;
    box-shadow: 0 0 9.24px 4.62px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  3% {
    opacity: 0.45;
    box-shadow: 0 0 9.57px 4.785px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  62% {
    opacity: 0.45;
    box-shadow: 0 0 9.9px 4.95px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  56% {
    opacity: 0.45;
    box-shadow: 0 0 10.23px 5.115px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 10.56px 5.28px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  36% {
    opacity: 0.45;
    box-shadow: 0 0 10.89px 5.445px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  78% {
    opacity: 0.45;
    box-shadow: 0 0 11.22px 5.61px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  27% {
    opacity: 0.45;
    box-shadow: 0 0 11.55px 5.775px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  57% {
    opacity: 0.45;
    box-shadow: 0 0 11.88px 5.94px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  84% {
    opacity: 0.45;
    box-shadow: 0 0 12.21px 6.105px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  8% {
    opacity: 0.45;
    box-shadow: 0 0 12.54px 6.27px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  88% {
    opacity: 0.45;
    box-shadow: 0 0 12.87px 6.435px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  67% {
    opacity: 0.45;
    box-shadow: 0 0 13.2px 6.6px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  91% {
    opacity: 0.45;
    box-shadow: 0 0 13.53px 6.765px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  64% {
    opacity: 0.45;
    box-shadow: 0 0 13.86px 6.93px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  5% {
    opacity: 0.45;
    box-shadow: 0 0 14.19px 7.095px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  8% {
    opacity: 0.45;
    box-shadow: 0 0 14.52px 7.26px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  12% {
    opacity: 0.45;
    box-shadow: 0 0 14.85px 7.425px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  35% {
    opacity: 0.45;
    box-shadow: 0 0 15.18px 7.59px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  7% {
    opacity: 0.45;
    box-shadow: 0 0 15.51px 7.755px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  49% {
    opacity: 0.45;
    box-shadow: 0 0 15.84px 7.92px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  18% {
    opacity: 0.45;
    box-shadow: 0 0 16.17px 8.085px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30% {
    opacity: 0.45;
    box-shadow: 0 0 16.5px 8.25px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  23% {
    opacity: 0.45;
    box-shadow: 0 0 16.83px 8.415px #e3b862;
    height: 20px;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  82% {
    opacity: 0.45;
    box-shadow: 0 0 17.16px 8.58px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  6% {
    opacity: 0.45;
    box-shadow: 0 0 17.49px 8.745px #e3b862;
    height: 20px;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  4% {
    opacity: 0.45;
    box-shadow: 0 0 17.82px 8.91px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  26% {
    opacity: 0.45;
    box-shadow: 0 0 18.15px 9.075px #e3b862;
    height: 20px;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  20% {
    opacity: 0.45;
    box-shadow: 0 0 18.48px 9.24px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  29% {
    opacity: 0.45;
    box-shadow: 0 0 18.81px 9.405px #e3b862;
    height: 20px;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  54% {
    opacity: 0.45;
    box-shadow: 0 0 19.14px 9.57px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  92% {
    opacity: 0.45;
    box-shadow: 0 0 19.47px 9.735px #e3b862;
    height: 20px;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }
  20% {
    opacity: 0.45;
    box-shadow: 0 0 19.8px 9.9px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  69% {
    opacity: 0.45;
    box-shadow: 0 0 20.13px 10.065px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  27% {
    opacity: 0.45;
    box-shadow: 0 0 20.46px 10.23px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  63% {
    opacity: 0.45;
    box-shadow: 0 0 20.79px 10.395px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  7% {
    opacity: 0.45;
    box-shadow: 0 0 21.12px 10.56px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  27% {
    opacity: 0.45;
    box-shadow: 0 0 21.45px 10.725px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  68% {
    opacity: 0.45;
    box-shadow: 0 0 21.78px 10.89px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  16% {
    opacity: 0.45;
    box-shadow: 0 0 22.11px 11.055px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  36% {
    opacity: 0.45;
    box-shadow: 0 0 22.44px 11.22px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  51% {
    opacity: 0.45;
    box-shadow: 0 0 22.77px 11.385px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  49% {
    opacity: 0.45;
    box-shadow: 0 0 23.1px 11.55px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  48% {
    opacity: 0.45;
    box-shadow: 0 0 23.43px 11.715px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  28% {
    opacity: 0.45;
    box-shadow: 0 0 23.76px 11.88px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  33% {
    opacity: 0.45;
    box-shadow: 0 0 24.09px 12.045px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  17% {
    opacity: 0.45;
    box-shadow: 0 0 24.42px 12.21px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  68% {
    opacity: 0.45;
    box-shadow: 0 0 24.75px 12.375px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  11% {
    opacity: 0.45;
    box-shadow: 0 0 25.08px 12.54px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  40% {
    opacity: 0.45;
    box-shadow: 0 0 25.41px 12.705px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  6% {
    opacity: 0.45;
    box-shadow: 0 0 25.74px 12.87px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  17% {
    opacity: 0.45;
    box-shadow: 0 0 26.07px 13.035px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(-3.5deg);
    transform: rotate(-3.5deg);
  }
  49% {
    opacity: 0.45;
    box-shadow: 0 0 26.4px 13.2px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  85% {
    opacity: 0.45;
    box-shadow: 0 0 26.73px 13.365px #e1b255;
    height: 14px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  67% {
    opacity: 0.45;
    box-shadow: 0 0 27.06px 13.53px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  63% {
    opacity: 0.45;
    box-shadow: 0 0 27.39px 13.695px #e1b255;
    height: 14px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  60% {
    opacity: 0.45;
    box-shadow: 0 0 27.72px 13.86px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  66% {
    opacity: 0.45;
    box-shadow: 0 0 28.05px 14.025px #e1b255;
    height: 14px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  98% {
    opacity: 0.45;
    box-shadow: 0 0 28.38px 14.19px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  82% {
    opacity: 0.45;
    box-shadow: 0 0 28.71px 14.355px #e1b255;
    height: 14px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  7% {
    opacity: 0.45;
    box-shadow: 0 0 29.04px 14.52px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  70% {
    opacity: 0.45;
    box-shadow: 0 0 29.37px 14.685px #e1b255;
    height: 14px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  85% {
    opacity: 0.45;
    box-shadow: 0 0 29.7px 14.85px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  44% {
    opacity: 0.45;
    box-shadow: 0 0 30.03px 15.015px #e0b051;
    height: 12px;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  77% {
    opacity: 0.45;
    box-shadow: 0 0 30.36px 15.18px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  66% {
    opacity: 0.45;
    box-shadow: 0 0 30.69px 15.345px #e0b051;
    height: 12px;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  73% {
    opacity: 0.45;
    box-shadow: 0 0 31.02px 15.51px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  33% {
    opacity: 0.45;
    box-shadow: 0 0 31.35px 15.675px #e0b051;
    height: 12px;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  56% {
    opacity: 0.45;
    box-shadow: 0 0 31.68px 15.84px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  86% {
    opacity: 0.45;
    box-shadow: 0 0 32.01px 16.005px #e0b051;
    height: 12px;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  95% {
    opacity: 0.45;
    box-shadow: 0 0 32.34px 16.17px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  63% {
    opacity: 0.45;
    box-shadow: 0 0 32.67px 16.335px #e0b051;
    height: 12px;
    -webkit-transform: rotate(-4.5deg);
    transform: rotate(-4.5deg);
  }
  92% {
    opacity: 0.45;
    box-shadow: 0 0 33px 16.5px #dfae4d;
    height: 10px;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  28% {
    opacity: 0.32;
    box-shadow: 0 0 0.66px 0.33px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  49% {
    opacity: 0.32;
    box-shadow: 0 0 1.32px 0.66px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  56% {
    opacity: 0.32;
    box-shadow: 0 0 1.98px 0.99px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  86% {
    opacity: 0.32;
    box-shadow: 0 0 2.64px 1.32px #e7c278;
    height: 30px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  68% {
    opacity: 0.32;
    box-shadow: 0 0 3.3px 1.65px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  15% {
    opacity: 0.32;
    box-shadow: 0 0 3.96px 1.98px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  72% {
    opacity: 0.32;
    box-shadow: 0 0 4.62px 2.31px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  46% {
    opacity: 0.32;
    box-shadow: 0 0 5.28px 2.64px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  49% {
    opacity: 0.32;
    box-shadow: 0 0 5.94px 2.97px #e6c074;
    height: 28px;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
  }
  22% {
    opacity: 0.32;
    box-shadow: 0 0 6.6px 3.3px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  60% {
    opacity: 0.32;
    box-shadow: 0 0 7.26px 3.63px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  1% {
    opacity: 0.32;
    box-shadow: 0 0 7.92px 3.96px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  19% {
    opacity: 0.32;
    box-shadow: 0 0 8.58px 4.29px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  44% {
    opacity: 0.32;
    box-shadow: 0 0 9.24px 4.62px #e5be6f;
    height: 26px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  58% {
    opacity: 0.32;
    box-shadow: 0 0 9.9px 4.95px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  76% {
    opacity: 0.32;
    box-shadow: 0 0 10.56px 5.28px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  75% {
    opacity: 0.32;
    box-shadow: 0 0 11.22px 5.61px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  22% {
    opacity: 0.32;
    box-shadow: 0 0 11.88px 5.94px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  14% {
    opacity: 0.32;
    box-shadow: 0 0 12.54px 6.27px #e5bc6b;
    height: 24px;
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg);
  }
  45% {
    opacity: 0.32;
    box-shadow: 0 0 13.2px 6.6px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  99% {
    opacity: 0.32;
    box-shadow: 0 0 13.86px 6.93px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  41% {
    opacity: 0.32;
    box-shadow: 0 0 14.52px 7.26px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  73% {
    opacity: 0.32;
    box-shadow: 0 0 15.18px 7.59px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20% {
    opacity: 0.32;
    box-shadow: 0 0 15.84px 7.92px #e4ba67;
    height: 22px;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  90% {
    opacity: 0.32;
    box-shadow: 0 0 16.5px 8.25px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  97% {
    opacity: 0.32;
    box-shadow: 0 0 17.16px 8.58px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  9% {
    opacity: 0.32;
    box-shadow: 0 0 17.82px 8.91px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  84% {
    opacity: 0.32;
    box-shadow: 0 0 18.48px 9.24px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  48% {
    opacity: 0.32;
    box-shadow: 0 0 19.14px 9.57px #e3b862;
    height: 20px;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }
  34% {
    opacity: 0.32;
    box-shadow: 0 0 19.8px 9.9px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  71% {
    opacity: 0.32;
    box-shadow: 0 0 20.46px 10.23px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  53% {
    opacity: 0.32;
    box-shadow: 0 0 21.12px 10.56px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  50% {
    opacity: 0.32;
    box-shadow: 0 0 21.78px 10.89px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  64% {
    opacity: 0.32;
    box-shadow: 0 0 22.44px 11.22px #e2b65e;
    height: 18px;
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  73% {
    opacity: 0.32;
    box-shadow: 0 0 23.1px 11.55px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  100% {
    opacity: 0.32;
    box-shadow: 0 0 23.76px 11.88px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  2% {
    opacity: 0.32;
    box-shadow: 0 0 24.42px 12.21px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  12% {
    opacity: 0.32;
    box-shadow: 0 0 25.08px 12.54px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  49% {
    opacity: 0.32;
    box-shadow: 0 0 25.74px 12.87px #e2b45a;
    height: 16px;
    -webkit-transform: rotate(3.5deg);
    transform: rotate(3.5deg);
  }
  22% {
    opacity: 0.32;
    box-shadow: 0 0 26.4px 13.2px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  13% {
    opacity: 0.32;
    box-shadow: 0 0 27.06px 13.53px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  53% {
    opacity: 0.32;
    box-shadow: 0 0 27.72px 13.86px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  88% {
    opacity: 0.32;
    box-shadow: 0 0 28.38px 14.19px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  54% {
    opacity: 0.32;
    box-shadow: 0 0 29.04px 14.52px #e1b255;
    height: 14px;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  53% {
    opacity: 0.32;
    box-shadow: 0 0 29.7px 14.85px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  73% {
    opacity: 0.32;
    box-shadow: 0 0 30.36px 15.18px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  61% {
    opacity: 0.32;
    box-shadow: 0 0 31.02px 15.51px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  10% {
    opacity: 0.32;
    box-shadow: 0 0 31.68px 15.84px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  54% {
    opacity: 0.32;
    box-shadow: 0 0 32.34px 16.17px #e0b051;
    height: 12px;
    -webkit-transform: rotate(4.5deg);
    transform: rotate(4.5deg);
  }
  25% {
    opacity: 0.32;
    box-shadow: 0 0 33px 16.5px #dfae4d;
    height: 10px;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}

/***************************************

      PAGE CREDITS
 **************************************/
#credits-page {
  max-width: 800px;
  position: relative;
  margin: 50px auto;
  color: #FFFFFF;
  font-family: 'Cambria';
  text-align: justify;
}

#credits-page strong {
  font-family: 'Cambria Bold"';
}

#credits-page a {
  color: #FFFFFF;
  text-decoration: underline;
}

#credits-page table {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#credits-page table tr {
  border: none;
}

#credits-page table tr td {
  vertical-align: top;
  border: none;
}

#credits-page h2 {
  height: auto;
  margin-bottom: 20px;
}

/***************************************

        VOLET SOMMAIRE

 **************************************/
#volet {
  width: 30%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.82);
  color: #d6b477;
  position: fixed;
  right: -100%;
  height: 100%;
  top: 0;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
  z-index: 600;
}

#volet .icon-search {
  width: 20px;
  right: 33px;
  position: relative;
  top: 2px;
}

#volet .twitter-typeahead {
  font-family: 'Cambria';
  width: 80%;
  margin-left: 10%;
  margin-top: 250px;
  margin-bottom: 70px;
  z-index: 10;
}

#volet .twitter-typeahead .tt-menu {
  height: 50px;
  overflow: scroll;
  width: 100%;
}

#volet .twitter-typeahead .tt-menu .tt-suggestion:hover {
  background: #FFD6B477;
}

#volet input {
  font-family: 'Cambria';
  width: 100%;
  background: transparent;
  border: 2px solid #d6b477;
  color: #ffffff;
  box-shadow: none;
}

#volet input:focus {
  outline: none;
}

#volet .link {
  position: absolute;
  right: 0;
}

#volet .link.ouvrir {
  display: block;
}

#volet .link.ouvrir .cta.index {
  width: 250px;
  margin: 0;
  right: -56px;
  top: 0;
}

#volet .link.fermer {
  display: block;
  position: relative;
  margin: 0 auto;
  display: none;
}

#volet .link.fermer .cta.index {
  width: 250px;
  position: static;
  margin: 0 auto;
  display: block;
}

#volet #sWrapper {
  overflow: auto;
  height: 66%;
  position: relative;
  margin-top: 0;
}

#volet #sWrapper .inner {
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 4px;
  text-align: center;
  border-right: 1px solid #d6b477;
}

#volet #sWrapper .inner span {
  margin: 25px 10px 25px 10px;
  text-decoration: underline;
  cursor: pointer;
}

/***************************************

       SPLASHSCREEN MOBILE

 **************************************/
#splashscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background: #000000;
}

#splashscreen p {
  font-family: 'Cambria';
  text-align: center;
  font-size: 14px;
  color: #d6b477;
  width: 80%;
  margin: 0 auto;
  vertical-align: middle;
  margin-top: 250px;
}

/***************************************

       PLAN URGENCE

 **************************************/
#tab-desk {
  height: 100%;
  position: fixed;
  right: 0px;
  left: 0;
  margin: 0 auto;
  top: 0px;
  background-size: cover;
  z-index: 1;
  min-width: 100%;
  display: inline-block;
  vertical-align: top;
}

#tab-desk .s {
  position: fixed;
  width: 13555px;
  height: 939px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  background-image: url("../img/plans/4tableaux-DESK.jpg");
}

#tab-desk #circe {
  width: 350px;
  height: 450px;
  z-index: 200;
  position: absolute;
  left: 39%;
  top: 4%;
  cursor: pointer;
}

#tab-desk #moon {
  width: 150px;
  height: 150px;
  z-index: 200;
  position: absolute;
  left: 61%;
  top: 13%;
  cursor: pointer;
}

#tab-desk .element-click.pie {
  top: 59%;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 100%;
  left: 42%;
  position: absolute;
  z-index: 3;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.pie span {
  background-image: url("../img/tableau-1/elements/element-pie.png");
  width: 95px;
  height: 74px;
  bottom: 30px;
  z-index: 4;
  display: block;
  position: relative;
  right: 58px;
}

#tab-desk .element-click.mandragore {
  top: 90%;
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 100%;
  right: 14%;
  position: absolute;
  z-index: 3;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.mandragore span {
  background-image: url("../img/tableau-1/elements/element-mandragore.png");
  width: 215px;
  height: 175px;
  bottom: 71px;
  z-index: 4;
  display: block;
  position: relative;
  right: 85px;
}

#tab-desk .element-click.magnetite {
  top: 92%;
  right: 32%;
  width: 5px;
  height: 5px;
  position: absolute;
  display: block;
  border-radius: 100%;
  z-index: 3;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.magnetite span {
  background-image: url("../img/tableau-1/elements/element-magnetite.png");
  width: 203px;
  height: 156px;
  bottom: 86px;
  z-index: 4;
  display: block;
  position: relative;
  right: 85px;
  cursor: pointer;
}

#tab-desk .element-click.morelle {
  top: 93%;
  left: 21%;
  width: 5px;
  position: absolute;
  height: 5px;
  display: block;
  border-radius: 100%;
  z-index: 3;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.morelle span {
  background-image: url("../img/tableau-1/elements/morelle.png");
  width: 91px;
  height: 134px;
  bottom: 47px;
  display: block;
  position: relative;
  right: 35px;
  cursor: pointer;
}

#tab-desk .element-click.corneille {
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 32%;
  cursor: pointer;
  display: block;
  border-radius: 100%;
  left: 187%;
  animation: pulseShadowGreen 5s infinite;
}

#tab-desk .element-click.corneille span {
  background-image: url("../img/tableau-2/elements/element-corneille.png");
  width: 230px;
  height: 224px;
  display: block;
  position: relative;
  right: 78px;
  bottom: 114px;
  cursor: pointer;
}

#tab-desk .element-click.amanite {
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 58%;
  display: block;
  border-radius: 100%;
  left: 182%;
  animation: pulseShadowGreen 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.amanite span {
  background-image: url("../img/tableau-2/elements/element-amanite.png");
  width: 298px;
  height: 286px;
  display: block;
  position: relative;
  right: 136px;
  bottom: 106px;
  cursor: pointer;
}

#tab-desk .element-click.crapaud {
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 93%;
  display: block;
  border-radius: 100%;
  left: 201%;
  animation: pulseShadowGreen 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.crapaud span {
  background-image: url("../img/tableau-2/elements/element-crapaud.png");
  width: 259px;
  height: 168px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
}

#tab-desk .element-click.datura {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 89%;
  cursor: pointer;
  display: block;
  border-radius: 100%;
  left: 234%;
  z-index: 6;
  animation: pulseShadowGreen 5s infinite;
}

#tab-desk .element-click.datura span {
  background-image: url("../img/tableau-2/elements/element-datura.png");
  width: 310px;
  height: 182px;
  bottom: 66px;
  z-index: 8;
  display: block;
  position: relative;
  right: 76px;
}

#tab-desk .element-click.lapislazuli {
  cursor: pointer;
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 87%;
  display: block;
  border-radius: 100%;
  left: 215%;
  animation: pulseShadowGreen 5s infinite;
}

#tab-desk .element-click.lapislazuli span {
  background-image: url("../img/tableau-2/elements/element-lapislazuli.png");
  width: 150px;
  height: 90px;
  z-index: 4;
  display: block;
  position: relative;
  right: 84px;
  bottom: 38px;
}

#tab-desk .element-click.morgane {
  width: 550px;
  height: 400px;
  z-index: 200;
  position: absolute;
  left: 195%;
  top: 1%;
  cursor: pointer;
}

#tab-desk .element-click.chouette {
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 59%;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
  left: 337%;
  cursor: pointer;
}

#tab-desk .element-click.chouette span {
  background-image: url("../img/tableau-3/elements/element-chouette.png");
  right: 193px;
  width: 226px;
  height: 250px;
  bottom: 20px;
  display: block;
  position: relative;
  background-size: 225px;
}

#tab-desk .element-click.renard {
  cursor: pointer;
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 70%;
  display: block;
  border-radius: 100%;
  left: 396%;
  animation: pulseShadowOrange 5s infinite;
}

#tab-desk .element-click.renard span {
  background-image: url("../img/tableau-3/elements/element-renard.png");
  width: 161px;
  height: 157px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
  background-size: 161px;
}

#tab-desk .element-click.millepertuis {
  cursor: pointer;
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 3;
  top: 67%;
  display: block;
  border-radius: 100%;
  left: 378%;
  animation: pulseShadowOrange 5s infinite;
}

#tab-desk .element-click.millepertuis span {
  background-image: url("../img/tableau-3/elements/element-millepertuis.png");
  bottom: 66px;
  display: block;
  position: relative;
  right: 76px;
  width: 136px;
  height: 141px;
}

#tab-desk .element-click.saphir {
  cursor: pointer;
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 89%;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
  left: 380%;
}

#tab-desk .element-click.saphir span {
  background-image: url("../img/tableau-3/elements/element-saphir.png");
  bottom: 112px;
  display: block;
  position: relative;
  right: 138px;
  width: 234px;
  height: 210px;
}

#tab-desk .element-click.hildegarde {
  width: 250px;
  height: 300px;
  left: 395%;
  position: absolute;
  top: 11%;
  z-index: 3;
  cursor: pointer;
}

#tab-desk .element-click.chat {
  cursor: pointer;
  position: absolute;
  width: 5px;
  height: 5px;
  left: 519%;
  z-index: 3;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
  top: 94%;
}

#tab-desk .element-click.chat span {
  background-image: url("../img/tableau-4/elements/element-chat.png");
  bottom: 112px;
  display: block;
  position: relative;
  right: 138px;
  width: 241px;
  height: 252px;
}

#tab-desk .element-click.micheechauderon {
  position: absolute;
  z-index: 3;
  display: block;
  left: 4609px;
  width: 350px;
  height: 350px;
  top: 11%;
  cursor: pointer;
}

#tab-desk .element-click.chicoree {
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 3;
  top: 56%;
  display: block;
  border-radius: 100%;
  left: 572%;
  animation: pulseShadowYellow 5s infinite;
  cursor: pointer;
}

#tab-desk .element-click.chicoree span {
  background-image: url("../img/tableau-4/elements/element-chicoree.png");
  bottom: 112px;
  display: block;
  position: relative;
  width: 140px;
  height: 291px;
  z-index: 6;
  right: 39px;
}

#tab-desk .element-click.orpiment {
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 3;
  top: 57%;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
  left: 613%;
  cursor: pointer;
}

#tab-desk .element-click.orpiment span {
  background-image: url("../img/tableau-4/elements/element-orpiment.png");
  bottom: 57px;
  right: 40px;
  display: block;
  position: relative;
  width: 100px;
  height: 112px;
  z-index: 6;
}

#tab-desk .demo-wrap {
  position: absolute;
  height: 16%;
  width: 17px;
  z-index: 11;
}

#icon-scroll {
  z-index: 599;
  position: fixed;
  right: 0;
  top: 50%;
}

#icon-scroll img {
  width: 75%;
}

#icon-scroll-mobile {
  position: absolute;
  z-index: 200;
  margin: 0 auto;
  display: block;
  width: 100%;
}

#icon-scroll-mobile img {
  text-align: center;
  margin: 0 auto;
  display: block;
  width: 150px;
}

.close-volet {
  float: none;
  width: 26%;
  left: -5%;
  position: absolute;
  cursor: pointer;
  z-index: 30;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: none;
}

/***************************************

      v2 parralaxe
 **************************************/
.titre {
  width: 400px;
  height: 400px;
  display: block;
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
}

#tab-1 {
  display: inline-block;
}

#tab-1 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  z-index: 2;
}

#tab-1 .slide7 {
  background-image: url("../img/tableau-1/plans/plan-1.png");
  z-index: 8;
}

#tab-1 .slide6 {
  background-image: url("../img/tableau-1/plans/plan-2.png");
  z-index: 7;
}

#tab-1 .slide5 {
  background-image: url("../img/tableau-1/plans/plan-3.png");
  z-index: 6;
}

#tab-1 .slide4 {
  background-image: url("../img/tableau-1/plans/plan-4.png");
  z-index: 5;
}

#tab-1 .slide3 {
  background-image: url("../img/tableau-1/plans/plan-5.png");
  z-index: 4;
}

#tab-1 .slide2 {
  background-image: url("../img/tableau-1/plans/plan-6.png");
  z-index: 3;
}

#tab-1 .slide1 {
  background-image: url("../img/tableau-1/plans/plan-7.png");
  z-index: 2;
}

#tab-1 #circe {
  position: fixed;
  width: 350px;
  height: 450px;
  z-index: 200;
  cursor: pointer;
}

#tab-1 #moon {
  position: fixed;
  width: 150px;
  height: 150px;
  z-index: 200;
  cursor: pointer;
}

#tab-1 #magnetite {
  position: fixed;
  width: 203px;
  height: 156px;
  z-index: 200;
  cursor: pointer;
}

#tab-1 #mandragore {
  position: fixed;
  width: 215px;
  height: 175px;
  z-index: 200;
  cursor: pointer;
}

#tab-1 #morelle {
  position: fixed;
  width: 91px;
  height: 134px;
  z-index: 200;
  cursor: pointer;
}

#tab-1 #pie {
  position: fixed;
  width: 95px;
  height: 74px;
  z-index: 200;
  cursor: pointer;
}

#tab-1 .titre-1 {
  background-image: url("../img/titres/titre-1.png");
  z-index: 7;
}

#tab-1 .element-click {
  position: fixed;
  background-repeat: no-repeat;
  cursor: pointer;
}

#tab-1 .element-click.circe {
  background-image: url("../img/tableau-1/elements/element-circe-cut.png");
  background-position-y: top;
  cursor: pointer;
  width: 420px;
  height: 458px;
  background-size: 420px;
  z-index: 2;
}

#tab-1 .element-click.moon {
  background-image: url("../img/tableau-1/elements/element-moon-cut.png");
  background-position-y: top;
  cursor: pointer;
  width: 300px;
  height: 279px;
  z-index: 2;
  background-size: 300px;
}

#tab-1 .element-click.pie {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  z-index: 5;
  animation: pulseShadow 5s infinite;
}

#tab-1 .element-click.pie span {
  background-image: url("../img/tableau-1/elements/element-pie.png");
  width: 95px;
  height: 74px;
  bottom: 30px;
  z-index: 4;
  display: block;
  position: relative;
  right: 58px;
}

#tab-1 .element-click.mandragore {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  z-index: 7;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-1 .element-click.mandragore span {
  background-image: url("../img/tableau-1/elements/element-mandragore.png");
  width: 215px;
  height: 175px;
  bottom: 71px;
  z-index: 4;
  display: block;
  position: relative;
  right: 85px;
}

#tab-1 .element-click.magnetite {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  z-index: 7;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-1 .element-click.magnetite span {
  background-image: url("../img/tableau-1/elements/element-magnetite.png");
  width: 203px;
  height: 156px;
  bottom: 86px;
  z-index: 4;
  display: block;
  position: relative;
  right: 85px;
  cursor: pointer;
}

#tab-1 .element-click.morelle {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  z-index: 8;
  animation: pulseShadow 5s infinite;
  cursor: pointer;
}

#tab-1 .element-click.morelle span {
  background-image: url("../img/tableau-1/elements/morelle.png");
  width: 91px;
  height: 134px;
  bottom: 47px;
  display: block;
  position: relative;
  right: 35px;
  cursor: pointer;
}

#transition1 {
  display: inline-block;
}

#transition1 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  z-index: 20;
}

#transition1 .slidetransition1 {
  background-image: url("../img/transitions/transition-plan-2.png");
  top: 0;
}

#tab-2 {
  display: inline-block;
}

#tab-2 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  z-index: 2;
  top: 0;
}

#tab-2 .titre-2 {
  background-image: url("../img/titres/titre-2.png");
  z-index: 5;
}

#tab-2 .slide7 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-1.png");
  z-index: 8;
}

#tab-2 .slide6 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-2.png");
  z-index: 7;
}

#tab-2 .slide5 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-3.png");
  z-index: 6;
}

#tab-2 .slide4 {
  background-image: url("../img/tableau-2/plans/plan-4.png");
  z-index: 5;
}

#tab-2 .slide3 {
  background-image: url("../img/tableau-2/plans/tab-2_plan-5.png");
  z-index: 4;
}

#tab-2 .slide2 {
  background-image: url("../img/tableau-2/plans/plan-6.png");
  z-index: 3;
}

#tab-2 .slide1 {
  background-image: url("../img/tableau-2/plans/plan-7.png");
  z-index: 2;
}

#tab-2 #crapaud {
  position: fixed;
  width: 259px;
  height: 168px;
  z-index: 200;
  cursor: pointer;
}

#tab-2 #corneille {
  position: fixed;
  width: 230px;
  height: 224px;
  z-index: 200;
  cursor: pointer;
}

#tab-2 #amanite {
  position: fixed;
  width: 298px;
  height: 286px;
  z-index: 200;
  cursor: pointer;
}

#tab-2 #datura {
  position: fixed;
  width: 310px;
  height: 182px;
  z-index: 200;
  cursor: pointer;
}

#tab-2 #morgane {
  position: fixed;
  width: 750px;
  height: 450px;
  z-index: 200;
  cursor: pointer;
}

#tab-2 #lapislazuli {
  position: fixed;
  width: 230px;
  height: 151px;
  z-index: 200;
  cursor: pointer;
}

#tab-2 .element-click {
  position: fixed;
  background-repeat: no-repeat;
  cursor: pointer;
}

#tab-2 .element-click.corneille {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  z-index: 5;
  animation: pulseShadowGreen 5s infinite;
}

#tab-2 .element-click.corneille span {
  background-image: url("../img/tableau-2/elements/element-corneille.png");
  width: 230px;
  height: 224px;
  display: block;
  position: relative;
  right: 78px;
  bottom: 114px;
  cursor: pointer;
}

#tab-2 .element-click.amanite {
  z-index: 5;
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowGreen 5s infinite;
}

#tab-2 .element-click.amanite span {
  background-image: url("../img/tableau-2/elements/element-amanite.png");
  width: 298px;
  height: 286px;
  display: block;
  position: relative;
  right: 136px;
  bottom: 106px;
  cursor: pointer;
}

#tab-2 .element-click.crapaud {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  z-index: 5;
  animation: pulseShadowGreen 5s infinite;
}

#tab-2 .element-click.crapaud span {
  background-image: url("../img/tableau-2/elements/element-crapaud.png");
  width: 259px;
  height: 168px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
}

#tab-2 .element-click.datura {
  z-index: 8;
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowGreen 5s infinite;
}

#tab-2 .element-click.datura span {
  background-image: url("../img/tableau-2/elements/element-datura.png");
  width: 310px;
  height: 182px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 76px;
}

#tab-2 .element-click.lapislazuli {
  z-index: 5;
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowGreen 5s infinite;
}

#tab-2 .element-click.lapislazuli span {
  background-image: url("../img/tableau-2/elements/element-lapislazuli.png");
  width: 230px;
  height: 151px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
}

#tab-2 .element-click.morgane {
  z-index: 2;
  background-image: url("../img/tableau-2/elements/element-morgan.png");
  background-position-y: top;
  cursor: pointer;
  width: 750px;
  height: 450px;
}

#transition2 {
  display: inline-block;
}

#transition2 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  z-index: 200;
}

#transition2 .slidetransition2 {
  background-image: url("../img/transitions/transition-2.png");
  top: 0;
}

#tab-3 {
  display: inline-block;
}

#tab-3 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  top: 0;
}

#tab-3 .titre-3 {
  background-image: url("../img/titres/titre-3.png");
  z-index: 12;
}

#tab-3 .slide5 {
  background-image: url("../img/tableau-3/plans/plan-1.png");
  z-index: 9;
}

#tab-3 .slide4 {
  background-image: url("../img/tableau-3/plans/plan-2.png");
  z-index: 8;
}

#tab-3 .slide3 {
  background-image: url("../img/tableau-3/plans/plan-3.png");
  z-index: 7;
}

#tab-3 .slide2 {
  background-image: url("../img/tableau-3/plans/plan-4.png");
  z-index: 6;
}

#tab-3 .slide1 {
  background-image: url("../img/tableau-3/plans/plan-5.png");
  z-index: 5;
}

#tab-3 #renard {
  width: 161px;
  height: 157px;
  z-index: 200;
}

#tab-3 #chouette {
  position: fixed;
  width: 225px;
  height: 250px;
  z-index: 200;
}

#tab-3 #saphir {
  position: fixed;
  width: 234px;
  height: 210px;
  z-index: 200;
}

#tab-3 #hildegarde {
  position: fixed;
  width: 250px;
  height: 100px;
  z-index: 201;
}

#tab-3 #millepertuis {
  position: fixed;
  width: 136px;
  height: 141px;
  z-index: 200;
}

#tab-3 .element-click {
  position: fixed;
  background-repeat: no-repeat;
  cursor: pointer;
}

#tab-3 .element-click.chouette {
  width: 1px;
  height: 1px;
  z-index: 9;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
}

#tab-3 .element-click.chouette span {
  background-image: url("../img/tableau-3/elements/element-chouette.png");
  right: 193px;
  width: 225px;
  height: 250px;
  bottom: 20px;
  display: block;
  position: relative;
  background-size: 225px;
}

#tab-3 .element-click.renard {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
  z-index: 7;
}

#tab-3 .element-click.renard span {
  background-image: url("../img/tableau-3/elements/element-renard.png");
  width: 161px;
  height: 157px;
  bottom: 66px;
  display: block;
  position: relative;
  right: 138px;
  background-size: 161px;
}

#tab-3 .element-click.millepertuis {
  cursor: pointer;
  width: 1px;
  height: 1px;
  z-index: 7;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
}

#tab-3 .element-click.millepertuis span {
  background-image: url("../img/tableau-3/elements/element-millepertuis.png");
  bottom: 66px;
  display: block;
  position: relative;
  right: 76px;
  width: 136px;
  height: 141px;
}

#tab-3 .element-click.saphir {
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  animation: pulseShadowOrange 5s infinite;
  z-index: 8;
}

#tab-3 .element-click.saphir span {
  background-image: url("../img/tableau-3/elements/element-saphir.png");
  bottom: 112px;
  display: block;
  position: relative;
  right: 138px;
  width: 234px;
  height: 210px;
}

#transition3 {
  display: inline-block;
}

#transition3 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  z-index: 200;
}

#transition3 .slidetransition3 {
  background-image: url("../img/transitions/transition-3.png");
  top: 0;
}

#tab-4 {
  display: inline-block;
}

#tab-4 .s {
  position: fixed;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: cover;
  top: 0;
}

#tab-4 .titre-4 {
  background-image: url("../img/titres/titre-4.png");
  z-index: 9;
}

#tab-4 .slide7 {
  background-image: url("../img/tableau-4/plans/plan-1.png");
  z-index: 13;
}

#tab-4 .slide6 {
  background-image: url("../img/tableau-4/plans/plan-2.png");
  z-index: 12;
}

#tab-4 .slide5 {
  background-image: url("../img/tableau-4/plans/plan-3.png");
  z-index: 11;
}

#tab-4 .slide4 {
  background-image: url("../img/tableau-4/plans/plan-4.png");
  z-index: 10;
}

#tab-4 .slide3 {
  background-image: url("../img/tableau-4/plans/plan-5.png");
  z-index: 9;
}

#tab-4 .slide1 {
  background-image: url("../img/tableau-4/plans/plan-7.png");
  z-index: 8;
}

#tab-4 #chat {
  position: fixed;
  width: 241px;
  height: 252px;
  z-index: 200;
}

#tab-4 #micheechauderon {
  position: fixed;
  width: 350px;
  height: 350px;
  z-index: 200;
}

#tab-4 #orpiment {
  position: fixed;
  width: 100px;
  height: 112px;
  z-index: 200;
}

#tab-4 #chicoree {
  position: fixed;
  width: 140px;
  height: 291px;
  z-index: 200;
}

#tab-4 .element-click {
  position: fixed;
  background-repeat: no-repeat;
  cursor: pointer;
}

#tab-4 .element-click.chat {
  cursor: pointer;
  width: 1px;
  height: 1px;
  z-index: 9;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
}

#tab-4 .element-click.chat span {
  background-image: url("../img/tableau-4/elements/element-chat.png");
  bottom: 112px;
  display: block;
  position: relative;
  right: 138px;
  width: 241px;
  height: 252px;
}

#tab-4 .element-click.chicoree {
  width: 1px;
  height: 1px;
  z-index: 12;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
  cursor: pointer;
}

#tab-4 .element-click.chicoree span {
  background-image: url("../img/tableau-4/elements/element-chicoree.png");
  bottom: 112px;
  display: block;
  position: relative;
  width: 140px;
  height: 291px;
  z-index: 6;
  right: 39px;
}

#tab-4 .element-click.orpiment {
  width: 1px;
  height: 1px;
  z-index: 11;
  display: block;
  border-radius: 100%;
  animation: pulseShadowYellow 5s infinite;
  cursor: pointer;
}

#tab-4 .element-click.orpiment span {
  background-image: url("../img/tableau-4/elements/element-orpiment.png");
  bottom: 57px;
  right: 40px;
  display: block;
  position: relative;
  width: 100px;
  height: 112px;
  z-index: 6;
}

/***************************************

     Cookies

 **************************************/
.link-cookies {
  text-align: center;
  position: relative;
  display: block;
  color: #FFF;
  font-family: 'Cambria';
  text-decoration: underline;
  margin-top: 50px;
}

.link-cookies:hover {
  color: #d6b477;
}

#modalCookies {
  z-index: 400;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#modalCookies .modal-dialog {
  max-width: 100%;
  margin: 0;
}

#modalCookies .modal-dialog .modal-content {
  background: rgba(0, 0, 0, 0.82);
  color: #FFFFFF;
  font-family: 'Cambria';
  border-radius: 0;
}

#modalCookies .modal-dialog .modal-content [type=button], #modalCookies .modal-dialog .modal-content [type=reset], #modalCookies .modal-dialog .modal-content [type=submit], #modalCookies .modal-dialog .modal-content button {
  -webkit-appearance: none;
}

#modalCookies .modal-dialog .modal-content .modal-body {
  max-width: 80%;
  margin: 0 auto;
}

#modalCookies .modal-dialog .modal-content .modal-body .btn {
  border: 2px solid #d6b477;
  border-radius: 20px;
  min-width: 53%;
  color: #FFFF;
  font-family: 'Cambria';
}

#modalCookies .modal-dialog .modal-content .modal-body .btn:first-child {
  margin-bottom: 20px;
}

#gestionCookies-modal .modal-dialog .modal-content, #infoCookies-modal .modal-dialog .modal-content {
  background: black;
  border: 2px solid #C69B6E;
}

#gestionCookies-modal .modal-dialog .modal-content [type=button], #gestionCookies-modal .modal-dialog .modal-content [type=reset], #gestionCookies-modal .modal-dialog .modal-content [type=submit], #gestionCookies-modal .modal-dialog .modal-content button, #infoCookies-modal .modal-dialog .modal-content [type=button], #infoCookies-modal .modal-dialog .modal-content [type=reset], #infoCookies-modal .modal-dialog .modal-content [type=submit], #infoCookies-modal .modal-dialog .modal-content button {
  -webkit-appearance: none;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body, #infoCookies-modal .modal-dialog .modal-content .modal-body {
  font-family: 'Cambria';
  padding: 0;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body .p-50, #infoCookies-modal .modal-dialog .modal-content .modal-body .p-50 {
  padding: 50px;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body h2, #infoCookies-modal .modal-dialog .modal-content .modal-body h2 {
  background: none;
  height: auto;
  margin-bottom: 20px;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body .block-gold, #infoCookies-modal .modal-dialog .modal-content .modal-body .block-gold {
  background: #C69B6E;
  padding: 50px;
  margin-bottom: 25px;
  margin-top: 25px;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body .block-gold h2, #infoCookies-modal .modal-dialog .modal-content .modal-body .block-gold h2 {
  margin-bottom: 40px;
  height: auto;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body .block-gold ul, #infoCookies-modal .modal-dialog .modal-content .modal-body .block-gold ul {
  padding-left: 20px;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body h1, #infoCookies-modal .modal-dialog .modal-content .modal-body h1 {
  text-align: left;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body a, #infoCookies-modal .modal-dialog .modal-content .modal-body a {
  color: #F5BD68;
  text-decoration: underline;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body a.btn, #infoCookies-modal .modal-dialog .modal-content .modal-body a.btn {
  border: 2px solid #C69B6E;
  border-radius: 20px;
  min-width: 23%;
  color: #FFFF;
  font-family: 'Cambria';
  text-decoration: none;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body p, #infoCookies-modal .modal-dialog .modal-content .modal-body p {
  margin-left: 0;
}

#gestionCookies-modal .modal-dialog .modal-content .modal-body .text-center, #infoCookies-modal .modal-dialog .modal-content .modal-body .text-center {
  text-align: center;
}