/* STYLES MANAGING THE DISPLAY OF THE PROMOTIONAL BANNER ON THE "PORTAL" PAGE OF EUROPARL WEBSITE */
/* Composant "PROMOTIONAL ZONE" | template "TOGETHER" */
/* Copyright : European Parliament */
	
	/* ========================================================================================================================================================================== */
	/* == COMMON STYLES FOR ALL BREAKPOINTS ===================================================================================================================================== */
	/* ========================================================================================================================================================================== */
		
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* COMMON STYLES : Main containers */

			/* MAIN CONTAINERS : Reset all tags */
			#website #together.eppz_promotional a,
			#website #together.eppz_promotional h2,
			#website #together.eppz_promotional div,
			#website #together.eppz_promotional ul,
			#website #together.eppz_promotional li,
			#website #together.eppz_promotional span,
			#website #together.eppz_promotional time,
			#website #together.eppz_promotional strong,
			#website #together.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 #together.eppz_promotional a,
			#website #together.eppz_promotional a *{
				cursor: 							pointer 	!important;
			}
			/* MAIN CONTAINERS : Hidden element for accessibility */
			#website #together.eppz_promotional .eppz_hidden{
				position: 							absolute	!important;
				display: 							block		!important;
				overflow: 							hidden		!important;
				width: 								0 			!important;
				height: 							0 			!important;
				opacity: 							0 			!important;
			}
			/* MAIN CONTAINERS : definition of containers */
			#website #together.eppz_promotional{
				position: 							relative;
				display: 							block;
				overflow: 							hidden;
				z-index: 							5;
				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;
			}
			#website #together.eppz_promotional .eppz_banner{
				position: 							relative;
				display: 							block;
				overflow: 							hidden;
				max-width: 							1200px;
				margin: 							0 auto;
				padding: 							0;
				background-color: 					#fff;
				text-align: 						center;
				color: 								inherit;
				color: 								#000;
			}
			#website #together.eppz_promotional .eppz_banner > span{
				position: 							static;
				display: 							block;
				display: 							flex;
				display: 							-webkit-flex;
				max-width:							1200px;
				margin: 							0 auto;
				padding: 							0;
				flex-direction:						row-reverse;
				-webkit-flex-direction:				row-reverse;
				align-items:						stretch;
				-webkit-align-items:				stretch;
				letter-spacing: 					-0.3em;
				white-space: 						nowrap;
				color: 								inherit;
			}
			#website #together.eppz_promotional .eppz_image,
			#website #together.eppz_promotional .eppz_text{
				position: 							static;
				display: 							inline-block;
				margin: 							0;
				padding: 							0;
				text-align:							left;
				vertical-align:						middle;
				white-space:						normal;
			}
			#website #together.eppz_promotional .eppz_banner .eppz_logo svg{
				transition:							fill 0.5s ease-out 0s;
				-webkit-transition:					fill 0.5s ease-out 0s;
			}
			#website #together.eppz_promotional .eppz_banner:hover 	.eppz_logo svg,
			#website #together.eppz_promotional .eppz_banner:focus 	.eppz_logo svg,
			#website #together.eppz_promotional .eppz_banner:active .eppz_logo svg{
				xfill: 								#0C4DA2;
			}
			#website #together.eppz_promotional .eppz_banner 		.eppz_image > span{
				transition:							opacity 0.5s ease-out 0s, filter 0.5s ease-out 0s;
				-webkit-transition:					opacity 0.5s ease-out 0s, filter 0.5s ease-out 0s;
			}
			#website #together.eppz_promotional .eppz_banner:hover 	.eppz_image > span,
			#website #together.eppz_promotional .eppz_banner:focus 	.eppz_image > span,
			#website #together.eppz_promotional .eppz_banner:active .eppz_image > span{
				opacity: 							0.7;
				filter:								blur(5px) brightness(1.1);
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* COMMON STYLES : Test presentation 2 formats */

			#website #together.eppz_promotional + .eppz_promotional{
				overflow: 							visible !important;
				z-index: 							inherit;
				margin-top: 						50px;
			}
			#website #together.eppz_promotional + .eppz_promotional:after{
				position: 							absolute;
				display: 							block;
				left: 								50%;
				z-index: 							30;
				padding: 							2px 5px;
				background-color: 					#fff;
				border: 							1px solid #f00;
				transform:							translate(-50%, 4px);
				font-size: 							1.4em;
				color: 								#f00;
				text-transform: 					uppercase;
				content:							attr(lang);
			}
			#website #together.eppz_promotional + .eppz_promotional:before{
				position: 							absolute;
				display: 							block;
				z-index: 							10;
				top: 								-50px;
				left: 								0;
				right: 								0;
				height: 							50px;
				background-color: 					#fff;
				box-shadow: 						0 0 10px rgba(0,0,0,0.8);
				box-shadow: 						none;
				content: 							'';
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* COMMON STYLES : Image */
			#website #together.eppz_promotional .eppz_image{
				position: 							static;
				width: 								0;
				min-height:							400px;
			}
			#website #together.eppz_promotional .eppz_image:before{
				position: 							absolute;
				display: 							block;
				overflow: 							hidden;
				top: 								0;
				bottom: 							0;
				left: 								0;
				right: 								0;
				background-color: 					#0C4DA2;
				content: 							'';
			}
			#website #together.eppz_promotional .eppz_image span{
				position: 							absolute;
				display: 							block;
				overflow: 							hidden;
				top: 								-2px;
				bottom: 							-2px;
				left: 								-2px;
				right: 								-2px;
				background-image:					url(together.jpg);
				background-position:				center bottom 40%;
				background-size:					cover;
				background-repeat:					no-repeat;
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* COMMON STYLES : Text */

			#website #together.eppz_promotional .eppz_text{
				position:							static;
				overflow: 							hidden;
				z-index:							1;
				display:							flex;
				display:							-webkit-flex;
				flex-direction:						column;
				-webkit-flex-direction:				column;
				color: 								inherit;
			}
			#website #together.eppz_promotional .eppz_text .eppz_title{
				position: 							absolute;
				display: 							block;
				overflow: 							hidden;
				width:								0;
				height: 							0;
				opacity: 							0;
			}
			#website #together.eppz_promotional .eppz_text .eppz_logo{
				position: 							absolute;
				display:							flex;
				display:							-webkit-flex;
				top: 								0;
				bottom: 							0;
				left: 								0;
				right: 								0;
				flex-direction:						column;
				-webkit-flex-direction:				column;
				align-items:						center;
				-webkit-align-items:				center;
				justify-content:					flex-end;
				-webkit-justify-content:			flex-end;
			}
			#website #together.eppz_promotional .eppz_text .eppz_logo span{
				position: 							relative;
				display:							block;
				width: 								100%;
				bottom: 							-11px;
				text-align: 						center;
			}
			#website #together.eppz_promotional .eppz_text .eppz_logo svg{
				position: 							relative;
				display:							inline-block;
				max-width: 							100%;
				max-height: 						140px;
				box-sizing:							border-box;
				fill:								#fff;
			}
			#website #together.eppz_promotional[lang="et"] .eppz_text .eppz_logo svg,
			#website #together.eppz_promotional[lang="fi"] .eppz_text .eppz_logo svg{
				max-height: 						100px;
				bottom: 							15px;
			}
		/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		/* COMMON STYLES : Display animation */

			/* ANIMATION : Definition of animations */
			#website #together.eppz_promotional .eppz_image,
			#website #together.eppz_promotional .eppz_banner .eppz_logo svg{
				animation-timing-function: 			ease-out;
				-webkit-animation-timing-function: 	ease-out;
				animation-fill-mode: 				forwards;
				-webkit-animation-fill-mode: 		forwards;
			}
			#website #together.eppz_promotional .eppz_banner .eppz_image{
				opacity: 							0;
				animation-name:						together_opacity;
				-webkit-animation-name: 			together_opacity;
				animation-duration: 				1.5s;
				-webkit-animation-duration: 		1.5s;
				animation-delay:  					0.5s;
				-webkit-animation-delay:  			0.5s;
			}
			#website #together.eppz_promotional .eppz_banner .eppz_logo svg{
				transform:							translate(0,110%);
				-webkit-transform:					translate(0,110%);
				transform-origin:					center;
				-webkit-transform-origin:			center;
				animation-name:						together_movement;
				-webkit-animation-name: 			together_movement;
				animation-duration: 				1.5s;
				-webkit-animation-duration: 		1.5s;
				animation-delay:  					1s;
				-webkit-animation-delay:  			1s;
			}
			@keyframes together_opacity{
				from{
					opacity: 						0;
				}
				to{
					opacity: 						1;
				}
			}
			/* ANIMATION : Specification for the animation of the title */
			@keyframes together_movement{
				0%,
				50%{
					transform: 						translate(0,110%);
					-webkit-transform:				translate(0,110%);
				}
				100%{
					transform: 						translate(0,0);
					-webkit-transform:				translate(0,0);
				}
			}
			/* ANIMATION : Activation of the animation by script */
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init] 			.eppz_banner .eppz_image,
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init] 			.eppz_banner .eppz_title 	span.eppz_name,
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init] 			.eppz_banner .eppz_title 	span.eppz_catchphrase,
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init] 			.eppz_banner .eppz_subtitle{
				animation-play-state: 				paused;
				-webkit-animation-play-state:		paused;
			}
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_image,
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_title 	span.eppz_name,
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_title 	span.eppz_catchphrase,
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_subtitle{
				animation-play-state: 				running;
				-webkit-animation-play-state:		running;
			}
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_image{										animation-delay: 	0s;		-webkit-animation-delay:	0s;			}
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_title 	span.eppz_name{						animation-delay: 	0.1s;	-webkit-animation-delay:	0.1s;		}
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_title 	span.eppz_catchphrase{				animation-delay: 	0.7s;	-webkit-animation-delay:	0.7s;		}
			body[data-jsactive="true"] #website #together.eppz_promotional[data-init="false"] 	.eppz_banner .eppz_subtitle{									animation-delay: 	2.4s;	-webkit-animation-delay:	2.4s;		}

	/* ========================================================================================================================================================================== */
	/* == STYLES BY BREAKPOINTS ================================================================================================================================================= */
	/* ========================================================================================================================================================================== */
		
		@media screen and (max-width: 640px){
			#website #together.eppz_promotional .eppz_banner .eppz_image{
				min-height:							300px;
			}
			#website #together.eppz_promotional .eppz_banner .eppz_logo svg{
				height: 							120px;
			}
		}
		@media screen and (max-width: 550px){
			#website #together.eppz_promotional .eppz_banner .eppz_image{
				min-height:							240px;
			}
			#website #together.eppz_promotional .eppz_banner .eppz_logo svg{
				height: 							100px;
			}
		}
		@media screen and (max-width: 320px){
			#website #together.eppz_promotional .eppz_banner .eppz_image{
				min-height:							240px;
			}
			#website #together.eppz_promotional .eppz_banner .eppz_logo span{
				bottom: 							-18px;
			}
		}