@font-face {
	font-family: "poppins black";
	src: url('fonts/Poppins-Black.ttf');
}

@font-face {
	font-family: "poppins black italic";
	src: url('fonts/Poppins-BlackItalic.ttf');
}

@font-face {
	font-family: "poppins bold";
	src: url('fonts/Poppins-Bold.ttf');
}

@font-face {
	font-family: "poppins bold italic";
	src: url('fonts/Poppins-BoldItalic.ttf');
}

@font-face {
	font-family: "poppins medium";
	src: url('fonts/Poppins-Medium.ttf');
}

@font-face { 
	font-family: "poppins extra bold";
	src: url('fonts/Poppins-ExtraBold.ttf');
}

@font-face { 
	font-family: "poppins semi bold";
	src: url('fonts/Poppins-SemiBold.ttf');
}

@font-face {
	font-family: "poppins regular";
	src: url('fonts/Poppins-Regular.ttf');
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	min-height: 100%;
}

h1{
	font-family: "poppins medium";
	color: #A8A8DD;
	font-size: 38px;
}

@media(max-width: 535px){
	h1{
		font-size: 28px !important;
	}
}

h2 {
	font-family: "poppins extra bold";
	color: #00009B;
	font-size: 34px;
}

h3 {
	font-family: "poppins extra bold";
	color: #00009B;
	font-size: 58px !important;
}

h4 {
	font-family: "poppins medium";
	color: #000000;
	font-size: 23px !important;
}

h5 {
	font-family: "poppins extra bold";
	color: #b8b9dd;
	font-size: 46px !important;
}

@media(max-width: 535px){
	h5{
		font-size: 36px !important;
	}
}

h6 {
	font-family: "poppins regular";
	color: #ffffff;
	font-size: 24px !important;
}

#titre_jury {
	font-family: "poppins extra bold";
	color: #00009B;
	font-size: 32px;
}

.content{
  min-height: 100%;
  /* equal to footer height */
	margin-bottom: -50px; 
}
.content:after {
  content: "";
  display: block;
  height: 50px;
}

@media(max-width: 530px){
	#img_intro{
		width:100%;
	}
}


footer {
	background-color: #ffffff;
	width: 100%;
	height: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
}

@media(max-width: 1200px){
	footer{
		height:70px;
	}
	#curseur{
		margin-bottom: 20px !important;
	}
}
@media(max-width: 768px){
	footer{
		height:85px;
	}
}

@media(max-width: 412px){
	footer{
		height:110px;
	}
}


#separateur {
	margin-left: 20px;
	margin-right: 20px;
}

footer a{
	font-family: "poppins medium";
	color: #000000;
	font-size: 15px;
}

#score {
	font-family: "poppins extra bold";
	color: #ffffff;
	font-size: 68px !important;
}

#body_intro{
	background-color: #00009B;
	margin: 0;
}

#body_juridique{
	position: relative;
	background-color: #BFBFE6;
}


#body_question{
	background-color: #BFBFE6;
	margin: 0;
	margin-top: -16px;

}

#joue, #partage {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	font-family: "poppins extra bold" !important;
	font-size: 30px !important;
	color: white !important;
	padding : 15px 40px;
	border: solid #FF1E3C 2px !important;
	border-radius: 50px !important;
	background-color: transparent;
}

#joue:hover, #partage:hover {
	color: #00009B !important;
	background-color: #FF1E3C;
}

#arrow-return a{
	color: #000000 !important;
}

#arrow-return {
	top: 20px;
	left: 20%;
	margin-top: 50px;
	font-family: "poppins medium" !important;
	font-size: 26px !important;
	color: #000000 !important;
	border: none !important;
	background-color: transparent;
}

#arrow-return:hover .fa-angle-left {
	background-color: #00009B !important;
	color: #ffffff !important;
}

#arrow{
	margin-top: 50px;
	font-family: "poppins extra bold" !important;
	font-size: 30px !important;
	color: #00009B !important;
	border: solid #BFBFE6 2px !important;
	border-radius: 50px !important;
	background-color: transparent;
}

#arrow:hover .fa-angle-right {
	background-color: #00009B !important;
	color: #BFBFE6;
}

#arrow-last{
	margin-top: 50px;
	font-family: "poppins extra bold" !important;
	font-size: 30px !important;
	color: #00009B !important;
	border: solid #BFBFE6 2px !important;
	border-radius: 50px !important;
	background-color: transparent;
}

#arrow-last:hover .fa-angle-right {
	background-color: #00009B !important;
	color: #BFBFE6;
}

.fa-angle-right {
	background-color: #ebebeb !important;
	border-radius: 50% !important;
	padding: 3px 11px;
}

.fa-angle-left {
	background-color: #ffffff !important;
	border-radius: 50% !important;
	color: #1348ac !important;
	padding: 3px 11px;
	margin-right: 10px;
}

.fa-facebook-f {
	font-size: 26px;
	margin-right: 10px;
	background-color: #BFBFE6 !important;
	color: #00009B;
	border-radius: 50% !important;
	padding: 10px 15px;
}

#partage:hover .fa-facebook-f {
	background-color: #00009B !important;
	color: #BFBFE6;
}

.btn_blue {
	font-family: "poppins extra bold" !important;
	font-size: 25px !important;
	color: #00009B !important;
	padding : 10px 20px;
	border: solid #00009B 2px !important;
	border-radius: 50px !important;
	background-color: transparent;
}

.btn_blue:hover {
	color: #BFBFE6 !important;
	background-color: #00009B;
}

a{
	text-decoration: none !important;
}

#error{
	font-family: "poppins semi bold";
	color: #FF1E3C;
	margin-top: 10px;
	font-size: 15px;
}


.image{
	text-align: center;
}

/********** Style radio btn ****************/

.radio {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: "poppins semi bold";
  font-size: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media(max-width: 576px){
	.radio{
		font-size: 18px;
	}

	h2{
		font-size: 24px;
	}

	.checkmark{
		top: 3px !important;
	}

	.radio .checkmark:after {
		top: 3px !important;
	}
}

.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 8px;
  left: 5px;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: solid 3px #00009B;
  border-radius: 50%;
}

.radio:hover input ~ .checkmark {
  background-color: #BFBFE6;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio input:checked ~ .checkmark:after {
  display: block;
}

.radio .checkmark:after {
 	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00009B;
}