@font-face{
    font-family: "mariolettre";
    src : url("polices/lettremario.ttf");
  }
@font-face{
    font-family: "Doctor_Soos";
    src : url("polices/Doctor Soos Light 1.1.ttf");
  }
h1, h2{
    font-family: "mariolettre";  
  }
p{
    font-family: "Doctor_Soos";  
  }

/*Navbar*/
@font-face{
  font-family: "mariofont";
  src : url("polices/lettremario.ttf");
}
.navbar-toggler{
  width: 47px;
  height: 34px;
  border:none;
}

.navbar-toggler .line{
  width: 100%;
  float: left;
  height: 2px;
  background-color: rgb(253, 203, 109);
  margin-bottom: 5px;
}

.nav-link
{
font-family: "mariofont";	
color: rgb(253, 203, 109);
}

.nav-link:hover
{
color: #12990e;
}

.navbar
{
background-image:url("images/bgred.jpg");
padding-top: 0px;
padding-bottom: 0px;
}

.navbar-toggler
{
color: rgb(253, 203, 109);	
}

.container-fluid
{
padding-left: 0px;
padding-right: 0px;
}

.element:hover {
cursor: pointer;
}

.translate {
  transition-property: top;
  -webkit-transition-property: top;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  top: 0;
  position: relative;
  }
  
.translate:hover {
  top: 30px;
      }
      
.img-circle
{
  padding-left: 30px;
}

.bounce-left {
-webkit-animation: bounce-left 0.8s both;
        animation: bounce-left 0.8s both;
}

@-webkit-keyframes bounce-left {
0% {
  -webkit-transform: translateX(-48px);
      transform: translateX(-48px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
  opacity: 1;
}
24% {
  opacity: 1;
}
40% {
  -webkit-transform: translateX(-26px);
      transform: translateX(-26px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
65% {
  -webkit-transform: translateX(-13px);
      transform: translateX(-13px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
82% {
  -webkit-transform: translateX(-6.5px);
      transform: translateX(-6.5px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
93% {
  -webkit-transform: translateX(-4px);
      transform: translateX(-4px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
25%,
55%,
75%,
87%,
98% {
  -webkit-transform: translateX(0px);
      transform: translateX(0px);
  -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
}
100% {
  -webkit-transform: translateX(0px);
      transform: translateX(0px);
  -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
  opacity: 1;
}
}
@keyframes bounce-left {
0% {
  -webkit-transform: translateX(-48px);
      transform: translateX(-48px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
  opacity: 1;
}
24% {
  opacity: 1;
}
40% {
  -webkit-transform: translateX(-26px);
      transform: translateX(-26px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
65% {
  -webkit-transform: translateX(-13px);
      transform: translateX(-13px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
82% {
  -webkit-transform: translateX(-6.5px);
      transform: translateX(-6.5px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
93% {
  -webkit-transform: translateX(-4px);
      transform: translateX(-4px);
  -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
}
25%,
55%,
75%,
87%,
98% {
  -webkit-transform: translateX(0px);
      transform: translateX(0px);
  -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
}
100% {
  -webkit-transform: translateX(0px);
      transform: translateX(0px);
  -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
  opacity: 1;
}
}

/*background*/

.header, .vert{
    background-color: #12990e;
    color: white;
}

#enfance, #etudes, #etPuis
{
    background-color: rgb(253, 203, 109);
}

/*Sourie changante */
#image0
{
cursor: pointer;
}

/*Footer*/
.page-footer {
  background-image: url("images/bgred.jpg");
}
.bg-circle
{
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 14px 4px;
  color: #ececec;
  text-align: center;
  border-radius: 50%;
}

.bg-circle-outline
{
  width: 50px;
  height: 50px;
  color:smoke;
  padding: 8px 2px;
  border: 2px solid;
  border-color: smoke;
  border-radius: 50%;
}


.bg-circle a, a:hover, .media a:focus
{
  text-decoration: none !important;
  outline: none;
  color: #ececec;
}
.bg-circle-outline a, a:hover, .media a:focus
{
  text-decoration: none !important;
  outline: none;
  color: #ececec;
}

/*Bouton bas*/
.btn
{
  color: white;
  font-family: "mariolettre";
  border: solid;
  padding-right: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
  
}

.buttoncenter
{
  margin-right: auto;
  margin-left: auto;
}

.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
	from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: center center;
			  transform-origin: center center;
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	10% {
	  -webkit-transform: scale(0.91);
			  transform: scale(0.91);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	17% {
	  -webkit-transform: scale(0.98);
			  transform: scale(0.98);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	33% {
	  -webkit-transform: scale(0.87);
			  transform: scale(0.87);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	45% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }
  @keyframes heartbeat {
	from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: center center;
			  transform-origin: center center;
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	10% {
	  -webkit-transform: scale(0.91);
			  transform: scale(0.91);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	17% {
	  -webkit-transform: scale(0.98);
			  transform: scale(0.98);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	33% {
	  -webkit-transform: scale(0.87);
			  transform: scale(0.87);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	45% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }