/* STYLES GERANT L'AFFICHAGE DE LA ZONE PROMOTIONNELLE DE LA PAGE "PORTAIL" DU SITE EUROPARL */
/* Composant "PROMOTIONAL ZONE" | template "STATE OF THE UNION 2021" */
/* Copyright : European Parliament */
	
	/* =========================================================================================================================================================== */
	/* == VISUAL DEFINITION ====================================================================================================================================== */
	/* =========================================================================================================================================================== */
		
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* MAIN CONTAINERS : Definition of the visual */

			/* MAIN CONTAINERS : Reset tags */
			#website #soteu2021.eppz_promotional a,
			#website #soteu2021.eppz_promotional h2,
			#website #soteu2021.eppz_promotional div,
			#website #soteu2021.eppz_promotional ul,
			#website #soteu2021.eppz_promotional li,
			#website #soteu2021.eppz_promotional span,
			#website #soteu2021.eppz_promotional time,
			#website #soteu2021.eppz_promotional strong,
			#website #soteu2021.eppz_promotional em{
				position: 							static;
				display: 							inline-block;
				margin: 							0;
				padding: 							0;
				border:								none;
				outline: 							none;
				font-size: 							1em;
				font-weight: 						normal;
				text-decoration: 					none;
				letter-spacing: 					normal;
				line-height: 						normal;
				white-space: 						normal;
				cursor: 							default;
				color: 								inherit;
			}
			#website #soteu2021.eppz_promotional a,
			#website #soteu2021.eppz_promotional a *{
				cursor: 							pointer 	!important;
			}
			/* MAIN CONTAINERS : Hidden element */
			#website #soteu2021.eppz_promotional .eppz_hidden{
				position: 							absolute	!important;
				display: 							block		!important;
				overflow: 							hidden		!important;
				width: 								0 			!important;
				height: 							0 			!important;
				opacity: 							0 			!important;
			}
			/* MAIN CONTAINERS : Container */
			#website #soteu2021.eppz_promotional{
				position: 							relative;
				display: 							block;
				overflow: 							hidden;
				z-index: 							2;
				margin: 							0;
				padding: 							0;
				background-color: 					#fff;
				border:								none;
				outline: 							none;
				font-family: 						Helvetica, Arial, sans-serif;
				font-size: 							1em;
				font-weight: 						normal;
				text-decoration: 					none;
				text-align: 						center;
				white-space: 						nowrap;
				color: 								#164482;
			}
			#website #soteu2021.eppz_promotional .eppz_banner{
				position: 							relative;
				display: 							block;
				overflow: 							hidden;
				width: 								100%;
				max-width: 							1200px;
				min-height: 						450px;
				margin: 							0 auto;
				padding: 							0;
				box-sizing:							border-box;
				text-align: 						left;
				letter-spacing: 					-0.3em;
				white-space: 						nowrap;
				color: 								inherit;
			}
			#website #soteu2021.eppz_promotional .eppz_banner > span,
			#website #soteu2021.eppz_promotional .eppz_banner > span > span{
				position: 							static;
				display: 							block;
				margin: 							0;
				padding: 							0;
			}
			/* MAIN CONTAINERS : Position of the content */
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual{
				position: 							static;
				display:  							block;
				z-index: 							5;
				margin: 							0;
				padding: 							0;
				letter-spacing: 					-0.32em;
				white-space: 						nowrap;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual:after,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content{
				position: 							static;
				display: 							inline-block;
				margin: 							0;
				padding: 							0;
				box-sizing:							border-box;
				border-color: 						inherit;
				vertical-align:						top;
				white-space:						normal;
				color: 								inherit;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual:after{
				overflow: 							hidden;
				width: 								0;
				height: 							400px;
				content: 							'';
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content{
				width: 								100%;
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* MAIN CONTAINERS : Text definition */

			/* TEXTS : definition of the blocks */
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content{
				padding: 							40px 0;
				text-align: 						left;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				position: 							relative;
				display: 							block;
				z-index: 							5;
				max-width: 							calc(50% - 12.5% + 10px);
				margin: 							0;
				padding: 							0;
			}
			/* TEXTS : sidebar texts */
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text{
				display: 							inline-block;
				padding: 							25px;
				box-sizing:							border-box;
				color: 								inherit;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_title,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_subtitle{
				position: 							relative;
				display: 							block;
				z-index: 							5;
				box-sizing:							border-box;
				letter-spacing: 					normal;
				white-space: 						normal;
				color: 								inherit;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_title{
				font-size: 							3em;
				font-weight: 						bold;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_subtitle{
				margin-top: 						-0.6em;
				padding-top: 						20px;
				font-size: 							1.8em;
				font-weight: 						lighter;
			}
			/* TEXTS : action button */
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				padding: 							25px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button .eppz_label{
				position: 							static;
				display: 							inline-block;
				padding: 							10px 20px;
				background-color: 					#164482;
				border: 							1px solid #fff;
				border-radius: 						5px;
				transition:							background-color 0.3s ease-out 0.1s, color 0.3s ease-out 0.1s;
				-webkit-transition:					background-color 0.3s ease-out 0.1s, color 0.3s ease-out 0.1s;
				font-size: 							1.4em;
				color: 								#fff;
			}
			/* TEXTS : flight over effect */
			#website #soteu2021.eppz_promotional .eppz_banner:hover 	 .eppz_visual .eppz_content .eppz_button .eppz_label,
			#website #soteu2021.eppz_promotional .eppz_banner:focus 	 .eppz_visual .eppz_content .eppz_button .eppz_label,
			#website #soteu2021.eppz_promotional .eppz_banner:active  	 .eppz_visual .eppz_content .eppz_button .eppz_label{
				background-color: 					#fff;
				text-decoration:  					underline;
				color: 								#164482;
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* MAIN CONTAINERS : Borders */

			/* BORDER : definiton */
			#website #soteu2021.eppz_promotional .eppz_banner > span > span{
				box-sizing:							border-box;
				border-color: 						transparent;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text{
				border-color: 						inherit;
			}
			#website #soteu2021.eppz_promotional .eppz_banner > span > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner > span > span:after,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:before,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:after{
				position: 							absolute;
				display: 							block;
				z-index: 							4;
				top: 								0;
				bottom: 							0;
				left: 								0;
				right: 								0;
				box-sizing:							border-box;
				border-width: 						2px;
				border-style: 						solid;
				border-color: 						inherit;
				transition:							border-color 0.2s ease-out 0s;
				-webkit-transition:					border-color 0.2s ease-out 0s;
				content: 							'';
			}
			#website #soteu2021.eppz_promotional .eppz_banner > span > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:before{
				top: 								2px;
				bottom: 							2px;
				left: 								2px;
				right: 								2px;
				border-width: 						1px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:before,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:after{
				top: 								-3px;
				bottom: 							-3px;
				left: 								0;
				right: 								-3px;
				border-left-style: 					none;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:before{
				left: 								2px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:after{
				top: 								-2px;
				bottom: 							-2px;
				left: 								0;
				right: 								-2px;
				background-color: 					#fff;
				border-left-style: 					none;
			}
			/* TEXTS : flight over effect */
			#website #soteu2021.eppz_promotional .eppz_banner:hover 	  > span > span,
			#website #soteu2021.eppz_promotional .eppz_banner:focus 	  > span > span,
			#website #soteu2021.eppz_promotional .eppz_banner:active  	  > span > span{
				border-color: 						#164482;
			}
			#website #soteu2021.eppz_promotional .eppz_banner:hover 	 > span > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner:focus 	 > span > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner:active  	 > span > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner:hover 	 .eppz_visual .eppz_content .eppz_text:before,
			#website #soteu2021.eppz_promotional .eppz_banner:focus 	 .eppz_visual .eppz_content .eppz_text:before,
			#website #soteu2021.eppz_promotional .eppz_banner:active  	 .eppz_visual .eppz_content .eppz_text:before{
				border-color: 						#fff;
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* MAIN CONTAINERS : Image definition */

			/* IMAGES : definition of the blocks */
			#website #soteu2021.eppz_promotional .eppz_banner > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner > span:after{
				position: 							absolute;
				display: 							block;
				z-index: 							1;
				top: 								0;
				bottom: 							0;
				left: 								0;
				right: 								0;
				background-size: 					cover;
				background-position: 				center;
				background-repeat: 					no-repeat;
				content: 							'';
			}
			#website #soteu2021.eppz_promotional .eppz_banner > span:before{
				background-image: 					url(soteu2021.jpg);
				transition:							filter 0.2s ease-out 0s;
				-webkit-transition:					filter 0.2s ease-out 0s;
			}
			#website #soteu2021.eppz_promotional .eppz_banner > span:after{
				z-index: 							2;
				background-image: 					url(soteu2021.png);
			}
			/* IMAGES : flight over effect */
			#website #soteu2021.eppz_promotional .eppz_banner:hover 	 > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner:focus 	 > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner:active  	 > span:before{
				filter:								brightness(125%);
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* MAIN CONTAINERS : Animation */

			/* ANIMATION :: Mask */
			#website #soteu2021.eppz_promotional .eppz_banner:before,
			#website #soteu2021.eppz_promotional .eppz_banner:after{
				position: 							absolute;
				display: 							block;
				z-index: 							2;
				top: 								0;
				bottom: 							0;
				left: 								0;
				right: 								0;
				opacity: 							0;
				background-size: 					cover;
				background-position: 				center;
				background-repeat: 					no-repeat;
				content: 							'';
			}
			#website #soteu2021.eppz_promotional .eppz_banner:before{
				background-color: 					#fff;
			}
			#website #soteu2021.eppz_promotional .eppz_banner:after{
				background-image: 					url(soteu2021-mask.png);
			}
			/* ANIMATION :: assignment */
			#website #soteu2021.eppz_promotional .eppz_banner:before,
			#website #soteu2021.eppz_promotional .eppz_banner:after{
				opacity: 							1;
				animation-timing-function: 			ease-out;
				-webkit-animation-timing-function: 	ease-out;
				animation-fill-mode: 				forwards;
				-webkit-animation-fill-mode: 		forwards;
				animation-name:						soteu2021_opacity;
				-webkit-animation-name: 			soteu2021_opacity;
				animation-duration: 				4s;
				-webkit-animation-duration: 		4s;
				animation-delay: 					1.5s;
				-webkit-animation-delay: 			1.5s;
			}
			#website #soteu2021.eppz_promotional .eppz_banner:after{
				animation-delay: 					2.2s;
				-webkit-animation-delay: 			2.2s;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text{
				position: 							relative;
				z-index: 							5;
				transform:							translate(-105%, 0);
				-webkit-transform:					translate(-105%, 0);
				opacity: 							1;
				animation-timing-function: 			ease-out;
				-webkit-animation-timing-function: 	ease-out;
				animation-fill-mode: 				forwards;
				-webkit-animation-fill-mode: 		forwards;
				animation-name:						soteu2021_text;
				-webkit-animation-name: 			soteu2021_text;
				animation-duration: 				2s;
				-webkit-animation-duration: 		2s;
				animation-delay: 					2.3s;
				-webkit-animation-delay: 			2.3s;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				opacity: 							0;
				animation-timing-function: 			ease-out;
				-webkit-animation-timing-function: 	ease-out;
				animation-fill-mode: 				forwards;
				-webkit-animation-fill-mode: 		forwards;
				animation-name:						soteu2021_opacity;
				-webkit-animation-name: 			soteu2021_opacity;
				animation-direction:				reverse;
				-webkit-animation-direction:		reverse;
				animation-duration: 				1s;
				-webkit-animation-duration: 		1s;
				animation-delay: 					3s;
				-webkit-animation-delay: 			3s;
			}
			/* ANIMATION : declaration */
			@keyframes soteu2021_opacity{
				from{
					opacity: 						1;
				}
				to{
					opacity: 						0;
				}
			}
			@keyframes soteu2021_text{
				from{
					transform: 						translate(-105%, 0);
					-webkit-transform:				translate(-105%, 0);
				}
				to{	
					transform: 						translate(0, 0);
					-webkit-transform:				translate(0, 0);
				}
			}
			@keyframes soteu2021_responsive{
				0%{
					transform: 						translate(0, -50px);
					-webkit-transform:				translate(0, -50px);
					opacity: 						0;
				}
				20%{	
					opacity: 						0;
				}
				100%{	
					transform: 						translate(0, 0);
					-webkit-transform:				translate(0, 0);
					opacity: 						1;
				}
			}
			/* ANIMATION : JS adaptation */
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init] 			.eppz_banner:before,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init] 			.eppz_banner:after,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init] 			.eppz_banner .eppz_visual .eppz_content .eppz_text,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init] 			.eppz_banner .eppz_visual .eppz_content .eppz_button{
				animation-play-state: 				paused;
				-webkit-animation-play-state:		paused;
			}
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner:before,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner:after,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_visual .eppz_content .eppz_text,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_visual .eppz_content .eppz_button{
				animation-play-state: 				running;
				-webkit-animation-play-state:		running;
			}
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner:before,
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner:after{ 									animation-delay: 0s;	-webkit-animation-delay: 0s;	}
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_visual .eppz_content .eppz_text{ 	animation-delay: 0.8s;	-webkit-animation-delay: 0.8s;	}
			body[data-jsactive="true"] #website #soteu2021.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_visual .eppz_content .eppz_button{ 	animation-delay: 1.5s;	-webkit-animation-delay: 1.5s;	}

	
	/* ========================================================================================================================================================================== */
	/* == STYLES GENERIQUES PAR BREAKPOINTS ===================================================================================================================================== */
	/* ========================================================================================================================================================================== */
		
		@media screen and (max-width: 1219px){
			/* Adapt the size of the text panel */
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				max-width: 							43%;
			}
			/* Unleach the text panel of the left border */
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content{
				padding: 							20px 20px 20px 15px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text{
				padding: 							15px 20px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				padding-left: 						20px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:before,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:after{
				border-left-style: 					solid;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:before{
				left: 								0;
				right: 								0;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text:after{
				left: 								1px;
				right: 								1px;
			}
			/* Remove the border */
			#website #soteu2021.eppz_promotional .eppz_banner > span > span:after{
				display: 							none;
			}
		}
		@media screen and (max-width: 1019px){
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				max-width: 							45%;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_title{
				font-size: 							2.5em;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_subtitle{
				font-size: 							1.6em;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button .eppz_label{
				font-size: 							1.4em;
			}
		}
		@media screen and (max-width: 800px){
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_title{
				font-size: 							2.2em;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_subtitle{
				font-size: 							1.4em;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button .eppz_label{
				font-size: 							1.2em;
			}
		}
		@media screen and (max-width: 749px){
			/* Adapt the visual for the responsive view */
			#website #soteu2021.eppz_promotional .eppz_banner{
				min-height: 						1px;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content{
				padding-left: 						0;
				padding-right: 						0;
				padding-bottom: 					250px;
				text-align: 						center;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text,
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				max-width: 							71.875%;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				margin-left: 						auto;
				margin-right: 						auto;
				padding-left: 						0;
				padding-right: 						0;
			}
			#website #soteu2021.eppz_promotional .eppz_banner > span:before,
			#website #soteu2021.eppz_promotional .eppz_banner > span:after,
			#website #soteu2021.eppz_promotional .eppz_banner:after{
				background-position: 				center top;
				background-size: 					880px auto;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text{
				transform:							translate(0, -50px);
				-webkit-transform:					translate(0, -50px);
				opacity: 							0;
				animation-name:						soteu2021_responsive;
				-webkit-animation-name: 			soteu2021_responsive;
				animation-duration: 				1s;
				-webkit-animation-duration: 		1s;
			}
		}
		@media screen and (max-width: 639px){
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text, 
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				max-width: 							62.5%;
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				padding-top: 						10px;
			}
		}
		@media screen and (max-width: 480px){
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text, 
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_button{
				max-width: 							calc(100% - 30px);
			}
			#website #soteu2021.eppz_promotional .eppz_banner .eppz_visual .eppz_content .eppz_text .eppz_title{
				font-size: 							2em;
			}
		}