body
{
	background-color:#20234c;
	font-family: verdana;
	font-weight:normal;
	background-image:url(../images/background.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:right top;
	padding:30px;
}

@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'Lotion-Regular';
    src: url('../fonts/Lotion-Regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'Lotion-Bold';
    src: url('../fonts/Lotion-Bold.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
	
}

#background-video {
   width: 100vw;
   height: 100vh;
   object-fit: cover;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: -1;
   opacity:0.8;
}

.kc 
{
	width:100%;
}




.kc .big-table td
{
	
	padding:20px;
	font-size:30px;
	font-weight:bold;
}

h3
{
	font-size:17px;
	color:#fff;
	padding:0 20px;
	font-family: verdana;
	
	
	font-weight: normal;
	margin: 0;
	padding: 25px;
}

h1
{
  font-size: 32px;
  color: #fff;
  padding-top: 30px;
  font-family: verdana;
  font-weight: normal;
}

input {
  width: 388px;
  border: solid 1px #ddb;
  color: #223370;
  font-size: 14px;
  margin-bottom:14px !important;
}
	
.label
{
	font-family:verdana;
	font-weight:normal !important;
	font-size:20px;
	padding:5px;
}	

.btn {
  width: auto;
  border: 0 !important;
  margin-bottom: 22px;
  background-image: url(../images/btn_abonner.png);
  background-repeat: no-repeat;
  color: #000;
  font-family: arial;
  padding: 12px;
  width: 100%;
  font-size: 22px;
  font-weight:bold;
}

.btn:hover
{
	max-width:100%;
  transform: scale(1.1);
  -webkit-transition: all .5s ease-out 0s;
  -moz-transition: all .5s ease-out 0s;
  -ms-transition: all .5s ease-out 0s;
  -o-transition: all .5s ease-out 0s;
  transition: all .5s ease-out 0s;

  vertical-align: middle;
  border-style: none;
  cursor:pointer;
 }
 
.logo {
  text-align: center;
  width: 100%;
  padding: 60px 0 30 0;
}


.logo img
{max-width:250px;
}

input {
  width: 100%;
  border: solid 1px #ddb;
  color: #223370;
  font-size: 14px;
  margin-bottom: 14px !important;
  padding: 15px;
}

.alert {
 /*! --bs-alert-bg:transparent; */--bs-alert-padding-x:1rem;
 --bs-alert-padding-y:1rem;
 --bs-alert-margin-bottom:1rem;
 --bs-alert-color:inherit;
 --bs-alert-border-color:transparent;
 --bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);
 --bs-alert-border-radius:0.375rem;
 --bs-alert-link-color:inherit;
 position:relative;
 padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);
 margin-bottom:var(--bs-alert-margin-bottom);
 color:var(--bs-alert-color);
 background-color:var(--bs-alert-bg);
 border:var(--bs-alert-border);
 border-radius:var(--bs-alert-border-radius)
}
.alert-heading {
 color:inherit
}
.alert-link {
 font-weight:700;
 color:var(--bs-alert-link-color)
}
.alert-dismissible {
 padding-right:3rem
}
.alert-dismissible .btn-close {
 position:absolute;
 top:0;
 right:0;
 z-index:2;
 padding:1.25rem 1rem
}


	
.container-fluid-md
{
	width:390px;
}

.alert.alert-info
{
	padding:15px;
	width:92%;
	background-color:#f0d478 !important;
	color:#000 !important;
	border:1px solid #eec12f;
}

.alert.alert-info.alert-danger
{
	padding:15px;
	width:92%;
	background-color:#f28176 !important;
	color:#fff !important;
	border:1px solid #e52714;
}

.alert-warning, .alert-success
{
	padding:15px;
	width:92%;
	background-color:#70ec84 !important;
	color:#fff !important;
	border:1px solid #0baa25;
}



@media (max-width: 1020px)
{
	body
	{
		background-image:none !important;
	}
	
	.mobile-space
{
	margin-top:15%;}
	
	.logo
	{
		margin-bottom: 50px !important;
float: left;
}

h3 {
  font-size: 22px;
  color: #fff;
  padding: 0 20px;
  font-family: verdana;
  font-weight: normal;
  margin: 0;
  padding: 52px;
}


h1 {
  font-size: 42px;
  color: #fff;
  padding-top: 30px;
  font-family: verdana;
  font-weight: normal;
}

}