/* CSS Document */
/* tabs content styles for the denominations page */

@charset "utf-8";

/****** description and info table ******/

.specificationsContent {
	background-color: white;
	margin-left: -20px;
    padding: 5px 0 0 5px;
}

table.ecb-banknoteTable {
	margin: 0px;
	margin-top: -1px;
}

table.ecb-banknoteTable td {
	width: 50%;
}

.specName {
	font-weight: bold;
}

@media only screen and (max-width: 767px) {

	.specificationsContent {
		margin-left: 15px;
	    margin-right: 15px;
	}

}

/* 5. BANKNOTE DETAILS ************************************ */

.banknoteDetails {
	display: flex;
	overflow: hidden;
	margin-top: 0px;
}

.bn-section-description {
	padding: 15px 5px 0px;
	margin: 0;
}

.videoContent {
	margin-left: -35px;
	margin-right: -35px;
}

.banknoteDetails .ecb-column p, 
.banknoteDetails .ecb-box p, 
.banknoteDetails .bn-section-description p,
.video-box .videoFeature p {
	color: #191919;
}

@media only screen and (max-width: 767px) {
	.videoContent {
		margin-left: -15px;
		margin-right: -15px;
	}	
}

.detailsContainer {
	padding: 2rem;
	background: white;
	width: 100%;
	display: block;
}

.detailsContainer h2 {
	border-bottom: 2px solid rgba(5, 54, 155, 0.1); 
	margin: 50px 5px 25px; 
	padding-bottom: 10px; 
	font-size: 28px;
}

@media only screen and (max-width: 1023px) {
	.detailsContainer h2 {
		margin: 50px 0px 25px;
	}
	.ecb-columns.ecb-twoCol .ecb-column {
		width: 100%;
	}
	.bn-section-description {
		padding: 0px 0px 0px;
	}

	.specificationsContent {
	    margin-left: 0px;
		margin-right: 0px;
		margin-top: 30px;
		padding: 0px;
	}

	.ecb-columns.ecb-twoCol .ecb-column {
		margin: 0px;
	}

}

@media only screen and (max-width: 767px) {
	.detailsContainer {
		padding: 15px;
	}
}




/* design and security elements */
.europaFeature, 
.firstFeature { 
	position: relative; 
	max-width: 882px; 
}

.firstFeature:nth-child(odd),
.europaFeature:nth-child(odd) { 
	margin-left: auto; 
}

.firstFeature:nth-child(even),
.europaFeature:nth-child(even) { 
	margin-right: auto; 
}

.featureDescription {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 11;
}

.featureDescription h3 {
	border-bottom: 2px solid #f4f4f4;
	width: -moz-fit-content;
		 width: fit-content;
	display: table;
	padding-bottom: 7px;
	color: #000;
}

.featureDescription p {
	color: #5d5d5d;
}

.featureDescription.leftPosition {
	padding-right: 60%;
	padding-left: 5px;
}

.featureDescription.rightPosition {
	padding-left: 60%;
}

.featureShowcase {
	width: 100%;
	position: absolute;
	z-index: 1;
}

.featureShowcase.rightPosition {
	left: 35%;
	padding-left: 20%;
}

.featureShowcase.leftPosition {
	left: -35%;
	padding-right: 20%;
}

/* ISOMETRIC VIEW 
   - use class .banknoteFR when it is showed the front of the banknote in the right side of the column
   - use class .banknoteFR_inverted when it is showed the front of the banknote upside down in the right side of the column
   - use class .banknoteBR when it is showed the back of the banknote in the right side of the column
   - use class .banknoteFL when it is showed the front of the banknote in the left side of the column
   - use class .banknoteBL when it is showed the back of the banknote in the left side of the column 

   Some classes are added to the previous to display different banknote sizes (the default banknote size is to be applied only in the 100, 200 and 500 banknotes):
   - for the 5 euro banknotes the class .banknoteSizeXS should be added
   - for the 10 euro banknotes the class .banknoteSizeS should be added
   - for the 20 euro banknotes the class .banknoteSizeM should be added
   - for the 50 euro banknotes the class .banknoteSizeL should be added
   
   Some data values:
   - 5 euro banknotes have 62mm of height
   - 10 euro banknotes have 67mm of height
   - 20 euro banknotes have 72mm of height
   - 50 euro banknotes have 77mm of height  
   - 100 euro, 200 euro and 500 euro banknotes have 82mm of height (100 euro and 200 euro europa series have 77mm) */

/* .banknoteFR + .banknoteBR */
.banknoteFR,
.banknoteBR {
	border-bottom: 2px solid #cbcbcb;
	border-left: 2px solid #cbcbcb;
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
}
.banknoteFR.banknoteSizeXS,
.banknoteBR.banknoteSizeXS {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
}
.banknoteFR.banknoteSizeS,
.banknoteBR.banknoteSizeS {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
}
.banknoteFR.banknoteSizeM,
.banknoteBR.banknoteSizeM {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
}
.banknoteFR.banknoteSizeL,
.banknoteBR.banknoteSizeL {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
}

/* .banknoteFR_inverted */
.banknoteFR_inverted {
	border-top: 2px solid #cbcbcb;
	border-right: 2px solid #cbcbcb;
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
}
.banknoteFR_inverted.banknoteSizeXS {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
}
.banknoteFR_inverted.banknoteSizeS {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
}
.banknoteFR_inverted.banknoteSizeM {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
}
.banknoteFR_inverted.banknoteSizeL {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
}

/* .banknoteFL + .banknoteBL */
.banknoteFL,
.banknoteBL {
	border-right: 2px solid #cbcbcb;
	border-bottom: 2px solid #cbcbcb;
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.1, 1.1, 1.1);
}
.banknoteFL.banknoteSizeXS, 
.banknoteBL.banknoteSizeXS {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.0, 1.0, 1.0);
}
.banknoteFL.banknoteSizeS, 
.banknoteBL.banknoteSizeS {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.025, 1.025, 1.025);
}
.banknoteFL.banknoteSizeM, 
.banknoteBL.banknoteSizeM {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.05, 1.05, 1.05);
}
.banknoteFL.banknoteSizeL, 
.banknoteBL.banknoteSizeL {
	-webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
	   -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
		-ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
		 -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
			transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.075, 1.075, 1.075);
}

.banknoteFR img,
.banknoteFR_inverted img,
.banknoteFL img,
.banknoteBL img,
.banknoteBR img {
	display: block;
}

.banknoteFade {
	position: absolute;
	top: 0%;
    left: 0%;
	height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
}

.featureHighlight {
	background: lightgrey;
	position: absolute;
}

.animLeft,
.animLeftTilt,
.animRight,
.animRightTilt,
.animRightTilt_inverted,
.banknoteFade,
.tiltShadow,
.tiltShadow_inverted {
	opacity: 0;
}

.featureTopBorder,
.featureRightBorder,
.featureBottomBorder,
.featureLeftBorder {
	position: absolute; 
	background: #003299;
}

.featureTopBorder {
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 2px;
}

.featureRightBorder {
	top: 0; 
	left: calc(100% - 2px); 
	width: 2px; 
	height: 100%;
}

.featureBottomBorder {
	top: calc(100% - 1px); 
	left: 0; 
	width: 100%; 
	height: 2px;
}

.featureLeftBorder {
	top: 0; 
	left: 0;
	width: 2px; 
	height: 100%;
}

.backgroundGrid {
	position: relative; 
	margin-left: -34px; 
	margin-right: -34px;
}
	
.backgroundGrid img {
	display: block;
}

.gridShadow {
	position: absolute;
    left: 0%;
    top: 0%;
    height: 100%;
    width: 100%;
    z-index: 10;
}

.featureShowcase,
.backgroundGrid {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* iOS Safari */
		-webkit-user-drag: none; /* Safari */
		 -khtml-user-drag: none; /* Konqueror HTML */
		   -moz-user-drag: none; /* Firefox */
			 -o-user-drag: none; /* Internet Explorer/Edge */
}


/* 5.3 Feature Responsiveness ***************************** */

@media only screen and (max-width: 1023px) {

	.featureDescription {
		position: relative; 
		transform: translate(0, 0%);
	}
	
	.featureDescription.leftPosition, 
	.featureDescription.rightPosition, 
	.featureShowcase.leftPosition, 
	.featureShowcase.rightPosition {
		padding-right: 0%;
		padding-left: 0%;
		margin-bottom: 60px;
	}
	
	.backgroundGrid {
		margin-bottom: 40px;
	}

}

@media only screen and (max-width: 558px) {

	.banknoteFR,
	.banknoteFR.banknoteSizeXS, 
	.banknoteFR.banknoteSizeS, 
	.banknoteFR.banknoteSizeM, 
	.banknoteFR.banknoteSizeL, 
	.banknoteBR,
	.banknoteBR.banknoteSizeXS, 
	.banknoteBR.banknoteSizeS, 
	.banknoteBR.banknoteSizeM, 
	.banknoteBR.banknoteSizeL,
	.banknoteFR.paper {	 
		transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(0%, 0) scale3d(1.5, 1.5, 1.5);
	}
	
	.banknoteFR_inverted,
	.banknoteFR_inverted.banknoteSizeXS, 
	.banknoteFR_inverted.banknoteSizeS, 
	.banknoteFR_inverted.banknoteSizeM, 
	.banknoteFR_inverted.banknoteSizeL {
		transform: rotateX(60deg) rotateY(0deg) rotateZ(135deg) translate(0%, 0) scale3d(1.5, 1.5, 1.5);
	}
	
	.banknoteFL,
	.banknoteFL.banknoteSizeXS, 
	.banknoteFL.banknoteSizeS, 
	.banknoteFL.banknoteSizeM, 
	.banknoteFL.banknoteSizeL,
	.banknoteBL,
	.banknoteBL.banknoteSizeXS, 
	.banknoteBL.banknoteSizeS, 
	.banknoteBL.banknoteSizeM, 
	.banknoteBL.banknoteSizeL {	 
		transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translate(0%, 0) scale3d(1.5, 1.5, 1.5);
	}
	
	.featureDescription.leftPosition, 
	.featureDescription.rightPosition {
		margin-bottom: 100px;
	}
	
	.backgroundGrid {
		margin-bottom: 75px;
		transform: scale(1.5);
	}
	
	.featureTopBorder {
		height: 1px;
	}
	
	.featureRightBorder {
		top: 0;
		left: 100%; 
		width: 1px;
	}
	
	.featureBottomBorder {
		top: calc(100% - 1px); 
		left: 0;
		height: 1px;
	}
	
	.featureLeftBorder {
		width: 1px;
	}

}







/****** animations ******/

/* white mask */

.europaFeature.anim .banknoteFade,
.firstFeature.anim .banknoteFade {
	-webkit-animation: banknoteFade 1s ease-in-out forwards;
	   -moz-animation: banknoteFade 1s ease-in-out forwards;
			animation: banknoteFade 1s ease-in-out forwards;
}

/* shadow (tilt effect and both sides) */

.europaFeature.anim .tiltShadow, 
.firstFeature.anim .tiltShadow {
	-webkit-animation: tiltShadow 6s linear 3s infinite;
	   -moz-animation: tiltShadow 6s linear 3s infinite;
			animation: tiltShadow 6s linear 3s infinite;
}

/* shadow (tilt effect, right side and upside down banknotes) */

.europaFeature.anim .tiltShadow_inverted, 
.firstFeature.anim .tiltShadow_inverted {
	-webkit-animation: tiltShadow_inverted 6s linear 3s infinite;
	   -moz-animation: tiltShadow_inverted 6s linear 3s infinite;
			animation: tiltShadow_inverted 6s linear 3s infinite;
}

/* fading, moving forward and floating (left side) */

.europaFeature.anim .animLeft,
.firstFeature.anim .animLeft {
	-webkit-animation: fadeInPopUpLeft 3s ease-in-out 0s forwards, banknoteLevitationLeft 4s ease-in-out 3s infinite;
	   -moz-animation: fadeInPopUpLeft 3s ease-in-out 0s forwards, banknoteLevitationLeft 4s ease-in-out 3s infinite;
			animation: fadeInPopUpLeft 3s ease-in-out 0s forwards, banknoteLevitationLeft 4s ease-in-out 3s infinite;
}

/* fading, moving forward and tilting (left side) */

.europaFeature.anim .animLeftTilt,
.firstFeature.anim .animLeftTilt {
	-webkit-animation: fadeInPopUpLeft_toTilt 3s ease-in-out 0s forwards, tiltLeft 6s linear 3s infinite;
	   -moz-animation: fadeInPopUpLeft_toTilt 3s ease-in-out 0s forwards, tiltLeft 6s linear 3s infinite;
			animation: fadeInPopUpLeft_toTilt 3s ease-in-out 0s forwards, tiltLeft 6s linear 3s infinite;
}

/* fading, moving forward and floating (right side) */

.europaFeature.anim .animRight,
.firstFeature.anim .animRight {
	-webkit-animation: fadeInPopUpRight 3s ease-in-out 0s forwards, banknoteLevitationRight 4s ease-in-out 3s infinite;
	   -moz-animation: fadeInPopUpRight 3s ease-in-out 0s forwards, banknoteLevitationRight 4s ease-in-out 3s infinite;
			animation: fadeInPopUpRight 3s ease-in-out 0s forwards, banknoteLevitationRight 4s ease-in-out 3s infinite;
}

/* fading, moving forward and tilting (right side) */

.europaFeature.anim .animRightTilt,
.firstFeature.anim .animRightTilt {
	-webkit-animation: fadeInPopUpRight_toTilt 3s ease-in-out 0s forwards, tiltRight 6s linear 3s infinite;
	   -moz-animation: fadeInPopUpRight_toTilt 3s ease-in-out 0s forwards, tiltRight 6s linear 3s infinite;
			animation: fadeInPopUpRight_toTilt 3s ease-in-out 0s forwards, tiltRight 6s linear 3s infinite;
}

/* fading, popping up and tilting (right side inverted) */

.europaFeature.anim .animRightTilt_inverted,
.firstFeature.anim .animRightTilt_inverted {
	-webkit-animation: fadeInPopUpRight_toTilt_inverted 3s ease-in-out 0s forwards, tiltRightInversed 6s linear 3s infinite;
	   -moz-animation: fadeInPopUpRight_toTilt_inverted 3s ease-in-out 0s forwards, tiltRightInversed 6s linear 3s infinite;
			animation: fadeInPopUpRight_toTilt_inverted 3s ease-in-out 0s forwards, tiltRightInversed 6s linear 3s infinite;
}








/****** keyframes ******/

/* fade in */

@keyframes banknoteFade {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}

}

/* fade in and move forward */

@keyframes fadeInPopUpLeft {

	0% {
		opacity: 0;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 0);
		   -moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			 -o-transform: translate(0, 0);
				transform: translate(0, 0);
	}

	25% {
		opacity: 1;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 0);
		   -moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			 -o-transform: translate(0, 0);
				transform: translate(0, 0);
	}

	100% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0.2), 50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(-50px, -50px);
		   -moz-transform: translate(-50px, -50px);
			-ms-transform: translate(-50px, -50px);
			 -o-transform: translate(-50px, -50px);
				transform: translate(-50px, -50px);
	}

}

@keyframes fadeInPopUpRight {

	0% {
		opacity: 0;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 0);
		   -moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			 -o-transform: translate(0, 0);
				transform: translate(0, 0);
	}

	25% {
		opacity: 1;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 0);
		   -moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			 -o-transform: translate(0, 0);
				transform: translate(0, 0);
	}

	100% {
		opacity: 1;
		box-shadow: -50px 50px 10px rgba(0, 0, 0, 0.2), -50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(50px, -50px);
		   -moz-transform: translate(50px, -50px);
			-ms-transform: translate(50px, -50px);
			 -o-transform: translate(50px, -50px);
				transform: translate(50px, -50px);
	}

}

@keyframes fadeInPopUpLeft_toTilt {

	0% {
		opacity: 0;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 50px);
		   -moz-transform: translate(0, 50px);
			-ms-transform: translate(0, 50px);
			 -o-transform: translate(0, 50px);
				transform: translate(0, 50px);
	}

	25% {
		opacity: 1;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 50px);
		   -moz-transform: translate(0, 50px);
			-ms-transform: translate(0, 50px);
			 -o-transform: translate(0, 50px);
				transform: translate(0, 50px);
	}

	100% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0.2), 50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(-50px, 0);
		   -moz-transform: translate(-50px, 0);
			-ms-transform: translate(-50px, 0);
			 -o-transform: translate(-50px, 0);
				transform: translate(-50px, 0);
	}

}

@keyframes fadeInPopUpRight_toTilt {

	0% {
		opacity: 0;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 50px);
		   -moz-transform: translate(0, 50px);
			-ms-transform: translate(0, 50px);
			 -o-transform: translate(0, 50px);
				transform: translate(0, 50px);
	}

	25% {
		opacity: 1;
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(0, 50px);
		   -moz-transform: translate(0, 50px);
			-ms-transform: translate(0, 50px);
			 -o-transform: translate(0, 50px);
				transform: translate(0, 50px);
	}

	100% {
		opacity: 1;
		box-shadow: -50px 50px 10px rgba(0, 0, 0, 0.2), -50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(50px, 0px);
		   -moz-transform: translate(50px, 0px);
			-ms-transform: translate(50px, 0px);
			 -o-transform: translate(50px, 0px);
				transform: translate(50px, 0px);
	}

}

@keyframes fadeInPopUpRight_toTilt_inverted {

	0% {
		opacity: 0;	
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);	
		-webkit-transform: translate(0, -50px);
		   -moz-transform: translate(0, -50px);
			-ms-transform: translate(0, -50px);
			 -o-transform: translate(0, -50px);
				transform: translate(0, -50px);
	}

	25% {
		opacity: 1;	
		box-shadow: -1px 2px 2px -2px rgba(0, 0, 0, 0.2);	
		-webkit-transform: translate(0, -50px);
		   -moz-transform: translate(0, -50px);
			-ms-transform: translate(0, -50px);
			 -o-transform: translate(0, -50px);
				transform: translate(0, -50px);
	}

	100% {
		opacity: 1;	
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0.2), 50px -50px 0px rgba(0, 0, 0, 0.2);	
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

}

/* levitation */

@keyframes banknoteLevitationLeft {

	0% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0.2), 50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(-50px, -50px);
		   -moz-transform: translate(-50px, -50px);
			-ms-transform: translate(-50px, -50px);
			 -o-transform: translate(-50px, -50px);
				transform: translate(-50px, -50px);
	}

	50% {
		opacity: 1;
		box-shadow: 45px 45px 10px rgba(0, 0, 0, 0.2), 45px 45px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(-45px, -45px);
		   -moz-transform: translate(-45px, -45px);
			-ms-transform: translate(-45px, -45px);
			 -o-transform: translate(-45px, -45px);
				transform: translate(-45px, -45px);

	}

	100% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0.2), 50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(-50px, -50px);
		   -moz-transform: translate(-50px, -50px);
			-ms-transform: translate(-50px, -50px);
			 -o-transform: translate(-50px, -50px);
				transform: translate(-50px, -50px);
	}

}

@keyframes banknoteLevitationRight {

	0% {
		opacity: 1;
		box-shadow: -50px 50px 10px rgba(0, 0, 0, 0.2), -50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(50px, -50px);
		   -moz-transform: translate(50px, -50px);
			-ms-transform: translate(50px, -50px);
			 -o-transform: translate(50px, -50px);
				transform: translate(50px, -50px);
	}

	50% {
		opacity: 1;
		box-shadow: -45px 45px 10px rgba(0, 0, 0, 0.2), -45px 45px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(45px, -45px);
		   -moz-transform: translate(45px, -45px);
			-ms-transform: translate(45px, -45px);
			 -o-transform: translate(45px, -45px);
				transform: translate(45px, -45px);
	}

	100% {
		opacity: 1;
		box-shadow: -50px 50px 10px rgba(0, 0, 0, 0.2), -50px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(50px, -50px);
		   -moz-transform: translate(50px, -50px);
			-ms-transform: translate(50px, -50px);
			 -o-transform: translate(50px, -50px);
				transform: translate(50px, -50px);
	}

}

/* tilt */

@keyframes tiltLeft {

	0% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0), 50px 50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

	25% {
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0), 50px 50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1.25) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1.25) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1.25) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1.25) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1.25) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

	75% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0), 50px 50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(0.75) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(0.75) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(0.75) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(0.75) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(0.75) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

	100% {
		opacity: 1;
		box-shadow: 50px 50px 10px rgba(0, 0, 0, 0), 50px 50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

}

@keyframes tiltRight {

	0% {
		opacity: 1;
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(50px, 0%);
	}

	25% {
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(50px, 0%);
	}

	75% {
		opacity: 1;
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(50px, 0%);
	}

	100% {
		opacity: 1;
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);	
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(50px, 0%);
	}

}

@keyframes tiltRightInversed {

	0% {
		opacity: 1;
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

	25% {
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1.25) skewX(-15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

	75% {
		opacity: 1;
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);
		-webkit-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(0.75) skewX(15deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

	100% {
		opacity: 1;
		box-shadow: 50px -50px 10px rgba(0, 0, 0, 0), 50px -50px 0px rgba(0, 0, 0, 0);	
		-webkit-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
		   -moz-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			-ms-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
			 -o-transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
				transform: scaleY(1) skewX(0deg) rotateY(0deg) rotateX(0deg) rotateZ(0deg) translate(-50px, 0%);
	}

}

/* tilt shadow */

@keyframes tiltShadow {

	0% {
		opacity: 1;
		box-shadow: 500px 50px 10px rgba(0, 0, 0, 0.2), 500px 50px 0px rgba(0, 0, 0, 0.2);		
		-webkit-transform: translate(-500px, 0px);
		   -moz-transform: translate(-500px, 0px);
			-ms-transform: translate(-500px, 0px);
			 -o-transform: translate(-500px, 0px);
				transform: translate(-500px, 0px);
	}

	100% {
		opacity: 1;
		box-shadow: 500px 50px 10px rgba(0, 0, 0, 0.2), 500px 50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: translate(-500px, 0px);
		   -moz-transform: translate(-500px, 0px);
			-ms-transform: translate(-500px, 0px);
			 -o-transform: translate(-500px, 0px);
				transform: translate(-500px, 0px);
	}

}

@keyframes tiltShadow_inverted {

	0% {
		opacity: 1;
		box-shadow: 500px -50px 10px rgba(0, 0, 0, 0.2), 500px -50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: scaleY(1) translate(-500px, 0px);
		   -moz-transform: scaleY(1) translate(-500px, 0px);
			-ms-transform: scaleY(1) translate(-500px, 0px);
			 -o-transform: scaleY(1) translate(-500px, 0px);
				transform: scaleY(1) translate(-500px, 0px);
	}

	100% {
		opacity: 1;
		box-shadow: 500px -50px 10px rgba(0, 0, 0, 0.2), 500px -50px 0px rgba(0, 0, 0, 0.2);
		-webkit-transform: scaleY(1) translate(-500px, 0px);
		   -moz-transform: scaleY(1) translate(-500px, 0px);
			-ms-transform: scaleY(1) translate(-500px, 0px);
			 -o-transform: scaleY(1) translate(-500px, 0px);
				transform: scaleY(1) translate(-500px, 0px);		
	}

}







/****** navigation link component ******/
.tabFeatureLink {
	margin-left: -35px;
	margin-right: -35px;
	margin-bottom: -2rem;
    background-color: #f8f8f8;
    padding: 14px;
    text-align: center;
	position: relative;
	border-bottom: 3px solid #4076BF;
	border-top: 1px solid #eee;
}

.tabFeatureLink:before,
.tabFeatureLink:after {
    content: '';
    display: block;
	position: absolute;
	left: calc( 50% - 10px );
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

.tabFeatureLink:before {
    border-top: 10px solid #eee;
    top: 0;
}

.tabFeatureLink:after {
	border-top: 10px solid #fff;
    top: -1px;
}

@media only screen and (max-width: 1023px) {

	.tabFeatureLink {
		border-bottom: unset;
	}

}

@media only screen and (max-width: 767px) {

	.tabFeatureLink {
		margin-bottom: -15px;
	}

}







/****** video highlight component ******/
.responsiveVideoContainer {
	padding-top: 0px;
}

.video-box .videoFeature p {
	color: #949494;
}

.video-box {
	display: block;
	padding: calc(2em + 5px);
	background-color: white;
}

.videoFeature {
	padding: calc(2em + 5px);
	border: 2px solid #eee;
	position: relative;
}

.ecb-mediaYTVideo {
	margin-bottom: 0px;
	border-bottom: 5px solid #4076bf;
}

.video-bottom-element {
	border-top: 10px solid #4076bf;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	position: absolute;
	left: calc(50% - 10px);
}

@media only screen and (max-width: 767px) {

	.video-box {
		padding: calc(1em + 5px);
	}

	.videoFeature {
		padding: calc(1em + 5px);
	}
	
}