@font-face {

  font-family: 'LCOB';

  src: url('fonts/Lulo-Clean-Outline-Bold.woff2') format('woff2'),

       url('fonts/Lulo-Clean-Outline-Bold.woff') format('woff'),

       url('fonts/Lulo-Clean-Outline-Bold.ttf') format('truetype');

}



@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);



* {box-sizing: border-box;}



html, body {

	height: 100%;

	margin: 0;

	padding: 0;

}



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



body {

	background-color: #D7432A;

  	font-family: "Roboto", sans-serif;

  	color: #fff;

}



/* fade-in */

body {opacity: 0; transition: none; background-color: #000;}

body.fade-in {opacity: 1; transition: 0.6s visibility ease-out;}



#video-intro {

  position: fixed;

    right: 0;

    bottom: 0;

    min-width: 100%;

    min-height: 100%;

    z-index: 100;

    transition: opacity 2s ease;

}



section {

	height: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	text-align: center;

}



section > div > img {

	height: 350px;

}



h1 {

	font-family: "LCOB", sans-serif;

	font-weight: lighter;

	color: #fff;

	font-size: 3.5em;

  position: relative;

}



p {

	font-size: 1.2em;

	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.32);

}



#slogan {

	position: relative;

	top: -30px;

}



.tiny {font-size: 65%; vertical-align: top;}



#a-propos {

	position: absolute;

	right: 20px;

	bottom: 20px;

}



#a-propos a {

	color: #fff;

	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.32);

	transition: all 40ms;

}

#a-propos a:hover {

	opacity: 0.85;

}

#a-propos a:active {

	opacity: 0.6;

}



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

/******** bouton *********/

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



.btn-container {

  align-items: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 1em;

  text-align: center;

}



.btn {

  color: #fff;

  cursor: pointer;

  font-size: 16px;

  font-weight: 400;

  line-height: 45px;

  margin: 0 1em 2em;

  max-width: 160px;

  position: relative;

  text-decoration: none;

  text-transform: uppercase;

  width: 100%;



  font-family: "Roboto", sans-serif;

  letter-spacing: 1px;

}

.btn:hover {

  text-decoration: none;

}

.btn:active {

	transform: scale(0.96);

	opacity: 0.8;

}



.btn-5 {

  border: 1px solid transparent;

  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);

  outline: 1px solid;

  outline-color: rgba(255, 255, 255, 0.5);

  outline-offset: 0px;

  text-shadow: none;

  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1), transform 80ms ease, opacity 150ms ease;

}



.btn-5:hover {

  border: 1px solid;

  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);

  outline-color: rgba(255, 255, 255, 0);

  outline-offset: 15px;

  text-shadow: 1px 1px 2px #427388;

}



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

/***** pulse *****/

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



.pulse {

  position: absolute;

  bottom: 10px;

  margin-left: 5px;

  display: inline-block;

  width: 21px;

  height: 21px;

  border: 2px solid white;

  border-radius: 50%;

  background: rgba(255,255,255, 0);

  box-shadow: 0 0 0 rgba(255,255,255, 0.5);

  animation: pulse 1.5s infinite;

}



@-webkit-keyframes pulse {

  0% {

    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.5);

  }

  70% {

      -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0);

  }

  100% {

      -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);

  }

}

@keyframes pulse {

  0% {

    -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.5);

    box-shadow: 0 0 0 0 rgba(255,255,255, 0.5);

  }

  70% {

      -moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);

      box-shadow: 0 0 0 10px rgba(255,255,255, 0);

  }

  100% {

      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);

      box-shadow: 0 0 0 0 rgba(255,255,255, 0);

  }

}