@font-face{
  font-family: "mariofont";
  src : url("polices/lettremario.ttf");
}
@font-face{
  font-family: "yoshilettre";
  src : url("polices/lettreyoshi.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;
}
}




@font-face
{
    font-family: "yoshilettre";
    src : url("polices/Doctor_Soos_Light_1.1.ttf");
}

@font-face{
    font-family: "mariolettre";
    src : url("polices/lettremario.ttf");
  }

  .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;
    }
    }
  
  .titre, .vert{
    background-color: #12990e;
    color: white;
    margin-top: 80px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.mx-auto
{
    width : 250px;
    height : 250px;
    
}

h1
{
    font-family: "mariolettre";
}

body
{
    background-color: rgb(253, 203, 109);
}
.card
{
    margin-top : 80px;
}

.image
 {
    width: 478px;
    height: 300px;
    }

.card-body

{
    background-color:#12990e;
}


p, label, .placeholder 
{
    font-family: "yoshilettre";
    font-size: 20px;
}

.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;
	}
  }
    
   .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;
   }
  
   .page-footer {
     background-image: url('images/bgred.jpg');
     
   }

   .formBackground{
    background-image: url('images/bgred.jpg');
    
  }

.placeholder 
{
    font-family: "yoshilettre";
    font-size: 20px;
    background-color: rgb(253, 203, 109);
}

label
{
  font-family: "yoshilettre";
  font-size: 20px;
  color : white;
}