body{
	font-family: 'DIN Pro Regular';
	margin: 0;
	padding: 0;
	background-color: #f8f9fa;
	/*background-image: url("../assets/backgroundd.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;*/
}
.navbar{
	background-color: #164194;
	position: relative;
	width: 100%;
	height: auto;
	z-index: 1100;
	margin-top: 0px; 
	padding-left: 5vw;
	padding-right: 5vw;
}
.navbar-brand img {
	width: 200px;
	height: auto;
}
.navbar h1 {
	color: white;
	font-size: 1.5vw;
	white-space: nowrap;
	text-align: center;
	margin: 0 auto;
	font-family: 'DIN Pro Black' !important;
}
.footer {
	background-color: #164194;
	color: #fff;
	padding: 10px 20px;
	position: relative;
	bottom: 0;
	width: 100%;
	text-align: center;
}
.footer a {
	color: #fff;
	margin: 0 10px;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}
.titel-container{
	max-width: 85vw;
	/*width: 1100px;*/
	margin: 0 auto;
	border-radius: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	padding: 20px;	
	background-color: #164194;
  background-image:
  linear-gradient(to left, rgba(245, 246, 252, 0.52), #164194),
    url("../assets/Banner-leasing-site.jpg");
	/* background-image: url("../assets/Banner-leasing-site.jpg"); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.titel-section{
	margin-bottom: 10px;
}
.titel-section h3 {
	color: white;
	font-family: 'DIN Pro Black' !important;
}
.titel-section p {
	color: white;
}
.simulator-form {
	max-width: 85vw;
	/*width: 1100px;*/
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	margin-bottom: 80px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
background: rgba(255, 255, 255, 1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
border: 1px solid rgba(255, 255, 255, 0.24);
}
.simulator-section {
	margin-bottom: 30px;
}
.simulator-section h3 {
	color: #164194;
}
.simulator-section p {
	color: #6c757d;
}
.modal-title{
	color: #164194;
}
.modal{
	position: fixed;
	z-index: 1100;
	transform: scale(1);
	transition: all .3s linear;
}


.bar {
    position: relative;
    height: 8px;
    background: #6a6a6a;
    width:  0%;
    top: 0px;
    left: 0px;
    margin-top: 8px;
    box-shadow: 0 0 3px rgba(192,192,192,0.9);
    animation: fill 1.5s forwards, colors 1s forwards/*infinite alternate*/;
}

.bar.fill1 {
  animation: fill-1 1.5s forwards, colors 1.5s forwards;
}

.bar.fill2 {
   animation:  fill-2 1.5s forwards, colors 1.5s forwards;
}


.bar.fill3 {
   animation:  fill-3 1.5s forwards, colors 1.5s forwards;
}



@keyframes fill {
  0%   { width: 0; }
  33%  { width: 30px;}
  66%  { width: 10px;}
  100% { width: 900px; }
}

@keyframes fill-1 {
  0%   { width: 0; }
  /*33%  { width: 100px;}
  66%  { width: 50px;}*/
  100% { width: 300px; }
}

@keyframes fill-2 {
  0%   { width: 0; }
  /*33%  { width: 90px;}
  66%  { width: 70px;}*/
  100% { width: 240px; }
}

@keyframes fill-3 {
  0%   { width: 0; }
  33%  { width: 50px;}
  66%  { width: 24px;}
  100% { width: 109px; }
}



@keyframes colors {
  0% { background-color: white;}
  50% { background-color: white;}
  100% { background-color: white;}
}

@media (max-width: 375px) {
	

@keyframes fill-1 {
  0%   { width: 0; }
  /*33%  { width: 100px;}
  66%  { width: 50px;}*/
  100% { width: 250px; }
}

@keyframes fill-2 {
  0%   { width: 0; }
  /*33%  { width: 90px;}
  66%  { width: 70px;}*/
  100% { width: 190px; }
}

}
@media (max-width: 320px) {
	

@keyframes fill-1 {
  0%   { width: 0; }
  /*33%  { width: 100px;}
  66%  { width: 50px;}*/
  100% { width: 210px; }
}

@keyframes fill-2 {
  0%   { width: 0; }
  /*33%  { width: 90px;}
  66%  { width: 70px;}*/
  100% { width: 150px; }
}

}
@media (max-width: 768px) {
	.navbar {
                height: auto;
                position: relative;
                padding-top: 10px;
                padding-bottom: 10px;
                margin-top: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            .navbar h1 {
                font-size: 4vw;
                white-space: wrap;
input-group-text                padding-top: 10px;
                padding-bottom: 10px;
                font-weight: 700;
                margin: 0 auto;
                margin-top: 10px;
                font-family: 'DIN Pro Cond', sans-serif !important;
                text-align: center;
            }
            .navbar-brand {

            }
            .navbar-brand img {
            width: 200px;
            height: auto;
            margin-top: 10px;
        }
}

button .Fermer, .Calculer, .ren, .Fermer{
	width: 150px;
}

.Calculer{
	background-color: #164194;
	border-color: #164194;
}
#Checkchoix {
    width: 20px;
    height: 20px;    
  }
*:focus {
      outline: none !important;
      box-shadow: none !important;
    }

/*
@media print {
    body * {
      visibility: hidden;
    }
    .modal-content, .modal-content * {
      visibility: visible;
    }
    .modal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .modal-footer, .ren, .Fermer, .Imprimer, .fas, {
      visibility: hidden;
    }

  }*/
.input-group-text{min-width:65px;width:65px;} !important;