@font-face {
	font-family: "hero";
	src: url(../font/Hero\ New\ Regular.otf);
	font-weight: 400;
}

@font-face {
	font-family: "hero";
	src: url(../font/Hero\ New\ Bold.otf);
	font-weight: 700;
}

@font-face {
	font-family: "hero";
	src: url(../font/Hero\ New\ ExtraBold.otf);
	font-weight: 800;
}

body{
	background: #000;
  font-family: "Outfit", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	margin: 0 auto;
	background-image: url(../images/newsletter.jpg);
	background-size: cover;
}

.left_side {
    width: 411px;
    overflow: hidden;
}

.left_side img{
	height: 100%;
    width: 100%;
    object-fit: cover;
}

.body {
	color: #fff;
	background:none;
	max-width: 450px;
	margin: 0 auto;
	padding: 40px;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
}
.em-form .col{
	margin-bottom:0;
}
.em-form fieldset{padding-left:0;padding-right:0;}

.em-form .background {
	background:none;
}

.em-form .header_form {
	text-align: center;
}

.em-form .header_form h1 {
	font-size: 22px;
	color: #fff;
}

.em-form .header_form p {
	font-size: 15px;
	color: #fff;
	font-weight: 500;
	padding:10px 30px;
}

.em-form .input_wrapper {
	display: flex;
	flex-direction: row;
	padding: 0;
	background: #fff;
	border-radius: 1.25rem;
}
.em-form .input_wrapper #email{
	border-radius: 1.25rem 0 0 1.25rem;
		border: none;
}

.em-form .input_form {
	background-color: #FEECD9 ;
	color: #454545;
	border: none;
	border-radius: 15px 0 0 15px ;
	font-size: 14px;
}

.em-form .input_wrapper .button_form{
		width: 50%;
	border-radius: 1.25rem;
	background-color: #e75607;
	color: #ffffff;
	border: none;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}

.em-form .input_wrapper .button_form:hover{
	background: #ce4d06;
    color: white;
}

.em-form .footer_form {
	background: none;
	border: none;
	padding: 0;
	padding-top: 12px;
	font-size: 13px;
	color: #fff;
	text-align: center;
}

.em-form .footer_form a{color:#fff;}
.em-form .footer_form a:hover{color:#c74a06;}



.optinbox{
	font-size: 13px;
	font-family: "hero" !important;
	color:#fff;
	padding-top: 15px;
}

.optinbox input[type="checkbox"] {
  /* Masquer la checkbox par défaut */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Dimensions et style de base */
  width: 14px;
  height: 14px;
  border: 2px solid #E75607 ;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  background-color: white;
  transition: all 0.3s ease;
}

.optinbox input[type="checkbox"]:hover {
  border-color: #ff6600;
}

.optinbox input[type="checkbox"]:checked {
  background-color: #E75607 ;
  border-color: #E75607 ;
}

.optinbox input[type="checkbox"]:checked::after {
  /* Coche blanche */
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.optinbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}







/* PAGE VALIDATION */

.em-form header.validation {
	padding-top:70px;
}

/* Responsive */
@media screen and (max-width: 600px) {

	body{
		display: flex;
		flex-direction: column;
		min-width: 100%;
	}

	.body {
		max-width: 100%;
		padding: 52px 20px;
	}

	.body-validation {
		max-width: 100%;
		padding: 20px;
		min-width: 100%;
	}

	.left_side {
		width: 100%;
		height: 135px;
	}
	
	.left_side img{
		object-position: bottom;
	}

	.header_form h1 {
		font-size: 30px;
	}
	
	.header_form p {
		font-size: 14px;
	}

	.footer_form {
		font-size: 9px;
	}
}