*{
    margin:0;
    padding:0;
}
body{
    font-family: 'Abel', sans-serif;
    text-align:center;
    color:#4b464a;
    background-color:#e1dcd9;
}

* { box-sizing: border-box; }
.video-background {
    opacity:0;
    background: #000;
    position: fixed;
    width:calc(100% - 100px);
    height:calc(100% - 100px);
    top: 50px; left: 50px;
    z-index: -98;
    overflow:hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px,
                rgba(0, 0, 0, 0.1) 0px 4px 4px,
                rgba(0, 0, 0, 0.1) 0px 8px 8px,
                rgba(0, 0, 0, 0.1) 0px 16px 16px,
                rgba(0, 0, 0, 0.1) 0px 32px 32px,
                rgba(0, 0, 0, 0.1) 0px 64px 64px;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
  .video-foreground { height: 300%; top: -100%; }






#logo{
    position:absolute;
    z-index:25;
    width:370px;
    left:50%;
    margin-left:-185px;
}

#logo svg path {
  fill: none;
  stroke: #4b464a;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 15000;
  stroke-dashoffset: 15100;
  -webkit-animation: dash 5s ease forwards;
  animation: dash 5s ease forwards;
}


@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

h3{
    text-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-size:40px;
}

#album h2{
    display:inline;
    vertical-align:middle;
}
h1,h2,.bouton{
    text-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-size:12px;
}

#album img{
    vertical-align:middle;
}

#social{
    text-align:right;
    position:fixed;
    width:200px;
    height:25px;
    bottom:15px;
    right: 50px
}

#facebook{
    background-image:url(../img/fb.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}

#social a{
    margin-left:10px;
    opacity:0.7;
}
#social a:hover{
    margin-left:10px;
    opacity:1;
}

#youtube{
    background-image:url(../img/yt.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}

.bouton{
    transition:0.5s;
    display:inline-block;
    margin:10px auto;
    padding: 15px 20px;
    background-color:#4b464a;
    color:#fff;
    border:1px solid #4b464a;
}
.bouton:hover{
    background-color:rgba(255,255,255,0);
    color:#4b464a;
    transition:0.1s;
    padding: 15px 40px;
}
#tour{
    position:absolute;
    z-index:70;
    top:70%;
    position:absolute;
    width:700px;
    left:50%;
    margin-left:-350px;
    margin-bottom:40px;
}
#album{
    text-align:center;
    position:absolute;
    width:100%;
    z-index:50;
    top:150px;
}

a{
    color:#888;
}

hr{
    position:relative;
    z-index:65;
    border:none;
    height:100px;
    width:1px;
    background-color:#4b464a;
    margin:10px auto;
}
#embed{
    position:relative;
    z-index:55;
    background-color:#fff;
    padding:50px;
    margin-top:-50px;
}

#background{
    position:fixed;
    z-index:-99;
    top:50px;
    left:50px;
    width:calc(100% - 100px);
    height:calc(100% - 100px);
    background-image:url(../img/background.jpg);
    background-size:cover;
    background-color:#f9f9f9;
    background-repeat:no-repeat;
    background-position:right center;
    box-shadow: rgba(91, 72, 41, 0.1) 0px 2px 2px,
                rgba(91, 72, 41, 0.1) 0px 4px 4px,
                rgba(91, 72, 41, 0.1) 0px 8px 8px,
                rgba(91, 72, 41, 0.1) 0px 16px 16px,
                rgba(91, 72, 41, 0.1) 0px 32px 32px,
                rgba(91, 72, 41, 0.1) 0px 64px 64px;
}


.fade{
  -webkit-animation: FADE 5s ease; /* Safari 4+ */
  -moz-animation:    FADE 5s ease; /* Fx 5+ */
  -o-animation:      FADE 5s ease; /* Opera 12+ */
  animation:         FADE 5s ease; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes FADE {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes FADE {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes FADE {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}
@keyframes FADE {
  0%   { opacity:0; }
  50%   { opacity:0; }
  100% { opacity:1; }
}



.monte{
  -webkit-animation: MONTE 81s ease; /* Safari 4+ */
  -moz-animation:    MONTE 81s ease; /* Fx 5+ */
  -o-animation:      MONTE 81s ease; /* Opera 12+ */
  animation:         MONTE 81s ease; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes MONTE {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:200px; }
  98%   { margin-top:200px; }
  100% { margin-top:0; }
}
@-moz-keyframes MONTE {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:200px; }
  98%   { margin-top:200px; }
  100% { margin-top:0; }
}
@-o-keyframes MONTE {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:200px; }
  98%   { margin-top:200px; }
  100% { margin-top:0; }
}
@keyframes MONTE {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:200px; }
  98%   { margin-top:200px; }
  100% { margin-top:0; }
}



.descend{
  -webkit-animation: DESCEND 81s ease; /* Safari 4+ */
  -moz-animation:    DESCEND 81s ease; /* Fx 5+ */
  -o-animation:      DESCEND 81s ease; /* Opera 12+ */
  animation:         DESCEND 81s ease; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes DESCEND {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:-300px; }
  98%   { margin-top:-300px; }
  100% { margin-top:0; }
}
@-moz-keyframes DESCEND {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:-300px; }
  98%   { margin-top:-300px; }
  100% { margin-top:0; }
}
@-o-keyframes DESCEND {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:-300px; }
  98%   { margin-top:-300px; }
  100% { margin-top:0; }
}
@keyframes DESCEND {
  0%   { margin-top:50px; }
  2%   { margin-top:0; }
  8%   { margin-top:0; }
  10%   { margin-top:-300px; }
  98%   { margin-top:-300px; }
  100% { margin-top:0; }
}



.disparition{
  -webkit-animation: DISPARITION 81s ease; /* Safari 4+ */
  -moz-animation:    DISPARITION 81s ease; /* Fx 5+ */
  -o-animation:      DISPARITION 81s ease; /* Opera 12+ */
  animation:         DISPARITION 81s ease; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes DISPARITION {
  0%   { opacity:0; }
  8%   { opacity:0; }
  10%   { opacity:1; }
  98%   { opacity:1; }
  100%   { opacity:0; }
}
@-moz-keyframes DISPARITION {
  0%   { opacity:0; }
  8%   { opacity:0; }
  10%   { opacity:1; }
  98%   { opacity:1; }
  100%   { opacity:0; }
}
@-o-keyframes DISPARITION {
  0%   { opacity:0; }
  8%   { opacity:0; }
  10%   { opacity:1; }
  98%   { opacity:1; }
  100%   { opacity:0; }
}
@keyframes DISPARITION {
  0%   { opacity:0; }
  8%   { opacity:0; }
  10%   { opacity:1; }
  98%   { opacity:1; }
  100%   { opacity:0; }
}


.noir{
  -webkit-animation: NOIR 81s ease; /* Safari 4+ */
  -moz-animation:    NOIR 81s ease; /* Fx 5+ */
  -o-animation:      NOIR 81s ease; /* Opera 12+ */
  animation:         NOIR 81s ease; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes NOIR {
  0%   { background-color:#e1dcd9; }
  8%   { background-color:#e1dcd9; }
  10%   { background-color:#000; }
  98%   { background-color:#000; }
  100%   { background-color:#e1dcd9; }
}
@-moz-keyframes NOIR {
  0%   { background-color:#e1dcd9; }
  8%   { background-color:#e1dcd9; }
  10%   { background-color:#000; }
  98%   { background-color:#000; }
  100%   { background-color:#e1dcd9; }
}
@-o-keyframes NOIR {
  0%   { background-color:#e1dcd9; }
  8%   { background-color:#e1dcd9; }
  10%   { background-color:#000; }
  98%   { background-color:#000; }
  100%   { background-color:#e1dcd9; }
}
@keyframes NOIR {
  0%   { background-color:#e1dcd9; }
  8%   { background-color:#e1dcd9; }
  10%   { background-color:#000; }
  98%   { background-color:#000; }
  100%   { background-color:#e1dcd9; }
}