@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
body {
	margin: 0;
	width: 100%;
	height: 100%;
	background-image: url(./../img/map.png);
}

.alert {
	text-align: center;
	background-color:#B89769;
	color: white;
	border-radius: 10px;
	padding: 10px;
	width: 80%;
	margin : auto;
	margin-top: 10px;
	line-height: 1.1;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.titre {
  padding-top: 200px;
  overflow: hidden;
  font: 2vw/50vh "Finger Paint";
  text-align: center;
  color: transparent;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.titre span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  -webkit-animation: smoky 5s 3s both;
          animation: smoky 5s 3s both;
}

.titre span:nth-child(even) {
  -webkit-animation-name: smoky-mirror;
          animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
  60% {
    text-shadow: 0 0 20px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
            transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(0);
            transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(0);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@-webkit-keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 20px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(0);
            transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(0);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 20px whitesmoke;
  }
  to {
    -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(0);
            transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(0);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
.titre span:nth-of-type(1) {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

.titre span:nth-of-type(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.titre span:nth-of-type(3) {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.titre span:nth-of-type(4) {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.titre span:nth-of-type(5) {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.titre span:nth-of-type(6) {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.titre span:nth-of-type(7) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.titre span:nth-of-type(8) {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.titre span:nth-of-type(9) {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}

.titre span:nth-of-type(10) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.titre span:nth-of-type(11) {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}

.titre span:nth-of-type(12) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.titre span:nth-of-type(13) {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;

}.titre span:nth-of-type(14) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
.titre span:nth-of-type(15) {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}
.titre span:nth-of-type(16) {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}


#sc{
    text-align: center;
    overflow: hidden;
    font: 10vw "Finger Paint";
    color: white;
    -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 6s; /* Firefox < 16 */
    -ms-animation: fadein 6s; /* Internet Explorer */
    -o-animation: fadein 6s; /* Opera < 12.1 */
    animation: fadein 6s;
    padding-bottom: 404.391px;
    margin-top: -20%;
}



@keyframes fadein {
    0%   {opacity: 0;}
    25%  {opacity: 0;}
    50%  {opacity: 0;}
    75%  {opacity: 0;}
    100% {opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1; }
}

/*----------------*/
/*  SCALLOP down  */
/*----------------*/
.scallop-down{
  height:100px;
  width:100%;
  background: -webkit-gradient(radial, 50% 0, 10, 50% 0, 40, from(#B8B7B7), color-stop(0.49, #B8B7B7), color-stop(0.51, #A9A9A7), to(#A9A9A7));
-webkit-background-size: 49px 100%;
}


/*----------------*/
/*  SCALLOP down2 */
/*----------------*/

.scallop-down2{
  height:100px;
  width:100%;
  background: -webkit-gradient(radial, 50% 0, 10, 50% 0, 40, from(#A9A9A7), color-stop(0.49, #A9A9A7), color-stop(0.51,#B8B7B7 ), to(#B8B7B7));
-webkit-background-size: 49px 100%;
}

/*----------------*/
/*  SCALLOP up    */
/*----------------*/
.scallop-up{
  height:100px;
  width:100%;
  background: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 40, from(black), color-stop(0.49, black), color-stop(0.51, #B8B7B7), to(#B8B7B7));
-webkit-background-size: 49px 100%;
}



                                /*Menu*/
                                
nav {
	width: 100%;
	background-color: black;
	z-index: 9999;
}                         


nav a {
	float: left;
	color: #9e9e9e;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 20px;
	font-family: "Raleway";
	text-transform: uppercase;
}

nav a:hover {
	background-color: #534e45;
	color: white;
}

nav a.active {
	background-color: #BEA177;
	color: white;
}

ul {
	display: flex;
	justify-content : left;
}

li {
	list-style-type: none;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

p {
	color : white;
}

.sticky + .content {
  padding-top: 30px;
}

footer{
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: black;
  padding: 10px;
  font-family: "Raleway";
}

footer a {
  text-decoration: none;
  color: #9e9e9e;
}