/* @override 
	http://localhost:8888/BSI-Infographic/style.css */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}details,hr,main{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto;resize:vertical}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} html{-webkit-text-size-adjust:100%;color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{box-sizing:content-box;overflow:visible;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}.sr-only,fieldset{border:0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0}.hidden,[hidden]{display:none!important}.sr-only{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,::after,::before{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999}thead{display:table-header-group}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

html {
	font-size: 10px; }
	
body{
	font-family: 'Noto Sans', sans-serif; }

body.has-overlay .wrapper {
	height: 100vh; }
		
.wrapper {
	overflow: hidden;
	box-sizing: border-box;
	min-width: 320px;
	position: relative;
	padding: 1em;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh; }

.experience {
	background-color: #fff;
	overflow: hidden;
	position: relative; }
	
.experience-desktop {
	display: block;
	padding-top: 62.2%; }
	
.experience-mobile {
	display: none;
	padding-top: 392%; }


@media all and (max-width:1000px) {
	
	.experience-desktop {
		display: none; }
		
	.experience-mobile {
		display: block; }
}	

	
		
.visual {
	line-height: 0 !important;
	z-index: 9;
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%; }


.visual img{
	width: 100%;
	height: auto; }
	
	
/* Hotspots */
.hotspots {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; }

.hotspot {
	cursor: pointer;
	top: 0;
	left: 0;
	position: absolute;
	width: 17rem;
	z-index: 12; 
	padding-left: 35px;
	transition: all .5s;
	transform-origin: 0 1.1em; }
	
.hotspot:hover {
	transform: scale(1.1); }
	
		
.hotspot h2,
.hotspot p {
	transition: all .5s;
	margin: 0;
	font-weight: 400; }	

.hotspot h2 {
	margin-bottom: .2em;
	font-size: 2rem;
	line-height: 1.4em; }
	
.hotspot p {
	font-size: 1.4rem;
	line-height: 1.4em; }
		
.point,
.animate  {
	background-color: #D72D18;
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 10em;
	line-height: 20px;
	color: #fff;
	position: absolute;
	transition: all .5s;
	left: 0;
	top: 1.1em; }	
	
.point .symbol {
	width: 20px;
	height: 20px;
	font-size: 16px; }

@media all and (max-width:1000px) {
	
	.hotspot {
		padding-left: 50px; }
	
	.point,
	.animate {
		width: 30px;
		height: 30px; }	
		
	.point .symbol {
		line-height: 27px;
		width: 30px;
		height: 30px;
		font-size: 25px; }
}	

@media all and (max-width:600px) {
	
	.hotspot {
		padding-left: 35px; }
	
	.point,
	.animate {
		width: 20px;
		height: 20px; }	
		
	.point .symbol {
		line-height: 20px;
		width: 20px;
		height: 20px;
		font-size: 20px; }
}			

.hotspot-desktop[data-hotspot="hotspot-01"] {
	top: 72%;
	left: 9%; }

.hotspot-desktop[data-hotspot="hotspot-02"] {
	top: 46.5%;
	left: 30.5%; }
	
.hotspot-desktop[data-hotspot="hotspot-03"] {
	top: 35%;
	left: 62.5%; }

.hotspot-desktop[data-hotspot="hotspot-04"] {
	top: 18%;
	left: 18%; }

.hotspot-desktop[data-hotspot="hotspot-05"] {
	top: 15%;
	left: 54%; }

.hotspot-desktop[data-hotspot="hotspot-06"] {
	top: 33%;
	left: 22%; }
	
.hotspot-desktop[data-hotspot="hotspot-07"] {
	top: 30.5%;
	left: 85%; }

.hotspot-desktop[data-hotspot="hotspot-08"] {
	top: 51.5%;
	left: 83%; }
	
.hotspot-desktop[data-hotspot="hotspot-09"] {
	top: 81%;
	left: 60.2%; }
	
/* Wide hotspots */
.hotspot-desktop[data-hotspot="hotspot-02"],
.hotspot-desktop[data-hotspot="hotspot-03"],
.hotspot-desktop[data-hotspot="hotspot-06"] {
	width: 24rem; }	
	
	
/* Narrow hotspots */
.hotspot-desktop[data-hotspot="hotspot-07"] {
	width: 12rem; }	

.hotspot-desktop[data-hotspot="hotspot-08"] {
	width: 16rem; }	



.experience-mobile .hotspot {
	width: 30rem; }
	
	
.experience-mobile .hotspot h2 {
	margin-bottom: .2em;
	font-size: 2.1rem;
	line-height: 1.3em; }
	
.experience-mobile .hotspot p {
	font-size: 1.3rem;
	line-height: 1.4em; }
	
	
.hotspot-mobile[data-hotspot="hotspot-01"] {
	top: 7.5%;
	left: 46.2%; }

/*.hotspot-mobile[data-hotspot="hotspot-01"] .point {
	top: auto;
	bottom: -50px;
	left: 12rem; }*/

.hotspot-mobile[data-hotspot="hotspot-02"] {
	top: 20%;
	left: 20.5%; }
	
.hotspot-mobile[data-hotspot="hotspot-03"] {
	top: 33.6%;
	left: 42%; }

.hotspot-mobile[data-hotspot="hotspot-04"] {
	top: 52.5%;
	left: 49%; }

.hotspot-mobile[data-hotspot="hotspot-05"] {
	top: 57%;
	left: 20.5%; }

.hotspot-mobile[data-hotspot="hotspot-06"] {
	top: 65%;
	left: 45.5%; }
	
.hotspot-mobile[data-hotspot="hotspot-07"] {
	top: 72%;
	left: 46%;}

.hotspot-mobile[data-hotspot="hotspot-08"] {
	top: 76%;
	left: 20%; }
	
.hotspot-mobile[data-hotspot="hotspot-09"] {
	top: 88%;
	left: 19.5%; }
	
/* Wide hotspots */
/*.hotspot-desktop[data-hotspot="hotspot-02"],
.hotspot-desktop[data-hotspot="hotspot-03"],
.hotspot-desktop[data-hotspot="hotspot-06"] {
	width: 24rem; }	
	*/
	
/* Narrow hotspots */
/*.hotspot-desktop[data-hotspot="hotspot-07"],
.hotspot-desktop[data-hotspot="hotspot-08"] {
	width: 12rem; }	*/	

	
.hotspot-mobile[data-hotspot="hotspot-09"] .point:after {
	content: '';
	width: 60px;
	height: 60px;
	position: absolute;
	top: -15px;
	left: -13px;
	z-index: -10;
	display: block;
	background-image: url('images/end-of-life.svg');
	background-size: contain !important;
	background-repeat: no-repeat; }
	
@media all and (max-width:600px) {
	
	.hotspot-mobile[data-hotspot="hotspot-09"] .point:after {
		width: 40px;
		height: 40px;
		top: -10px;
		left: -9px; }
		
	.hotspot-mobile[data-hotspot="hotspot-04"],
	.hotspot-mobile[data-hotspot="hotspot-07"] {
		width: 16em !important;  }
	
	.hotspot-mobile[data-hotspot="hotspot-03"] {
		top: 33%; }
		
}	
		
@media all and (max-width:400px) {
	
	.hotspot-mobile[data-hotspot="hotspot-01"] {
		top: 6%;
		left: 45%; }
		
	.hotspot-mobile[data-hotspot="hotspot-02"] {
		top: 19.5%;
		left: 19.5%; }
		
	.hotspot-mobile[data-hotspot="hotspot-03"] {
		top: 32.5%; }
		
	.hotspot-mobile[data-hotspot="hotspot-04"] {
		top: 52%;
		left: 48.5%; }
	
	.hotspot-mobile[data-hotspot="hotspot-05"] {
		top: 56.2%;
		left: 20%; }	
		
	.hotspot-mobile[data-hotspot="hotspot-06"] {
		width: 12em !important;  }
	
	.hotspot-mobile[data-hotspot="hotspot-07"] {
		top: 71%;
		width: 12em !important;  }	
}	



	
@keyframes pulse {
	0% {
		transform: scale(.9);
		opacity: .5; 
	}  
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
        
        	
.point .animate {
	top: 0;
	left: 0;
	z-index: -10;
	transform: scale(1.4);
	animation-name: pulse;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-play-state: running; }
	
	
	
@media all and (max-width:1100px) {
	
	.hotspot h2 {
		font-size: 1.4rem; }
		
	.hotspot p {
		font-size: 1.1rem;
		line-height: 1.4em; }
	
	.hotspot-desktop[data-hotspot="hotspot-08"] {
		width: 12rem; }	
}	
	
	
@media all and (max-width:550px) {
	
	.hotspot h2 {
		font-size: 1.3rem !important; }
		
	.hotspot p {
		font-size: 1.1rem !important; }
	
}	
	
@media all and (max-width:360px) {
	
	.hotspot h2 {
		margin-top: .3em;
		margin-bottom: .2em !important;
		font-size: 1.2rem !important; }
		
	.hotspot p {
		font-size: 1rem !important; }
	
}		
	
	
	
/* Overlays */
.overlays {
	min-width: 320px;
	position: absolute;
	top: 0;
	left: -100%;
	height: 100%;
	width: 100%;
	z-index: 9000;
	overflow: auto; }	

.overlays.active {
	left: 0; }
		
.overlay-background {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	z-index: 20;
	transition: opacity 1s;
	background: #000; }	
	
.overlays.active	 .overlay-background {
	position: fixed;
	opacity: .6; }	
	
.overlay {
	display: none;
	border-radius: 10px;
	margin: 10% auto;
	overflow: hidden;
	width: 80%;
	position: relative;
	background: #fff;
    z-index: 1000;
	transition: all .6s;
	transition-delay: .5s;
	opacity: 0; }

.overlay.active {
	display: block;
	opacity: 1;}
	
.overlay .heading,
.overlay .accordion-header h3,
.overlay .accordion-body {
	max-width: 1000px;
	box-sizing: border-box;
	padding: 1rem 3rem 1rem 6rem;
	margin: 0 auto; }
	
 .overlay .heading h2 {
	font-size: 4rem;
	line-height: 1.2em;
	margin-bottom: 0.25em;
	font-weight: normal; }	
	
.overlay .heading p {
	margin: 0;
	font-size: 2rem;
	font-weight: normal; }		

.overlay .heading-content img {
	max-width: 45%;
	max-height: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%); }	

.overlay .heading-content {
	position: relative;
	padding-top: 2rem;
	padding-bottom: 5rem;
	padding-left: 50%; }

/*.overlay .accordion * {
	outline: 1px solid red; }*/
			
.overlay .accordion h3 {
	font-weight: 400;
	position: relative;
	margin-top: 0;
	box-sizing: border-box;
	margin-bottom: 1px;
	font-size: 2.6rem; }	

.overlay .accordion h3:before {
	position: absolute;
	content: '';
	left: 10px;
	top: .6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='triangle' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23D72D18' points='0 0, 50 50, 0 100'/%3E%3C/svg%3E");
	background-size: cover;
	background-repeat: no-repeat;
	width: 16px;
	height: 30px;
	transition: all .3s; }		

.overlay .accordion .accordion-header.active h3:before {
	transform: rotate(90deg); }
	
.overlay .accordion-header {
	cursor: pointer;
	background: #e4e4e4; }
	
	
.overlay .accordion-body { 
 	padding-top: 0;
 	padding-bottom: 0;	
	overflow: hidden;
	font-size: 2rem; }		
	
.overlay .accordion-body  ul {
	margin: 3rem auto;
	padding: 0 ; }
	
.overlay .accordion-body ul li {
	list-style: none;
	position: relative;
	margin-bottom: 2rem;
	padding-left: 4rem; }	
	
.overlay .accordion-body ul li a {
	color: #D72D18;
	text-decoration: none;
	white-space: nowrap; }	
		
.overlay .accordion-body ul li:before {
	position: absolute;
	content: ' \2022';
	left: 0;
	top: .5em;
	color: #D72D18;
	font-size: 1.6em;
	line-height: 0; }	
	
.overlay .close {
	position: absolute;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23D72D18' d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	right: 20px;
	height: 20px;
	width: 20px;
	top: 20px;
	z-index: 900;
	transition: all .4s; }	

.overlay .close:hover {
	transform: scale(1.1); }


	
@media all and (max-width:800px) {
	
	.overlay {
		margin: 5% auto;
		width: 90%; }

	.overlay .heading,
	.overlay .accordion-header h3,
	.overlay .accordion-body {
		padding: 1rem 2rem 1rem 4rem; }
	
	.overlay .heading {
		padding-left: 1rem;
		padding-right: 1rem; }
		
	.overlay .accordion h3 {
		font-size: 1.8rem; }	
	
	.overlay .accordion h3:before {
		top: .7em;
		width: 12px;
		height: 20px; }		
		
	.overlay .accordion-body { 
		font-size: 1.6rem; }
		
	.overlay .accordion-body ul li { 
		padding-left: 2rem; }	
		
	.overlay .heading-content img {
		max-width: 100%;
		max-height: 100%;
		position: relative;
		left: auto;
		top: auto;
		transform: translate(0,0); 	}	
	
	.overlay .heading-content {
		text-align: center;
		position: relative;
		padding-top: 2rem;
		padding-bottom: 5rem;
		padding-left: 0; }
}		
	
	
	
@media all and (max-width:600px) {
	
	 .overlay .heading h2 {
		font-size: 3rem; }	
	
	.overlay .heading p {
		font-size: 1.8rem; }	
		
	.overlay .accordion h3 {
		font-size: 1.8rem; }	
}		
		
	
	

/* localised-tr */
.localised-tr { }

.localised-tr .hotspot-desktop[data-hotspot="hotspot-07"] { 
	top: 30%;
	left: 84.8%; }
		
.localised-tr .hotspot-desktop[data-hotspot="hotspot-08"] {
	top: 46%;
	width: 14rem; 
	left: 85%; }
	
	
@media all and (max-width: 1100px) {
	.localised-tr .hotspot-desktop[data-hotspot="hotspot-08"] {
		top: 45%;
		width: 10rem; }
		
	.localised-tr .hotspot-mobile[data-hotspot="hotspot-07"] {
		width: 25em; }
}	
	
@media all and (max-width:400px) {
	
 
	.hotspot-mobile[data-hotspot="hotspot-08"] {
		top: 74.5%;
		width: 18em !important;  }	
	
	.hotspot-mobile[data-hotspot="hotspot-09"] {
		width: 17em;  }	
}