#homepage{
	padding-top:63px;
}
#carousel{position: relative;}
#carousel-items{
	display:block;
	width:100%;
}
#carousel-items a{
	display:block;
	width:100%;
	height:100%;
/*	position:absolute;
	left:0; top:0;*/
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
#carousel-items svg{
	width:100%;
	height:auto;
	max-height:calc(100vh - 103px);
	min-height:195px;
	opacity:0;
}
#carousel-items a .titles{
	position:absolute;
	left:50%; top: 50%;
	transform:translate(-50%, -50%);
	padding:20px;
	max-width:910px;
	width:100%;
	color:#fff;
	font-family: "ls-med";
	text-align:center;
}
#carousel-items h2{
	font-size:74px;
	margin-bottom:10px;
}
#carousel-items h3{
	font-size:20px;
	line-height:1.5em;
}
.bx-wrapper .bx-pager{
	position:absolute; 
	left:0;
	bottom:70px;
	width:100%;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{background:#fff;}
.bx-wrapper .bx-pager.bx-default-pager a{background:#666;}

.carousel-down{
	display:block;
	width:60px;
	height:60px;
	position:absolute;
	left:50%;
	bottom:-30px;
	transform:translatex(-50%);
	border-radius:50%;
	background:#fff url("../img/jumpdown_arrows.svg") no-repeat;
	background-size:50px auto;
	background-position: center center;
	cursor:pointer;
}


/*======================= paragraph below slider =================*/

#intro{
	background:#fff;
	color:#000;
}
#intro #intro-content{
	padding:110px 40px;
	max-width:860px;
	margin:auto;
	text-align:center;
}
#intro h2{
	font:normal 54px/54px 'ls-med';
}
#intro h3{
	padding-top:10px;
	font:lighter 20px/26px 'ls';
	color:#333;
}

/*============================= grid ================================*/

#update-grid{
	display:flex;
	flex-flow:row wrap;
}
#update-grid a{
	flex: 0 0 33.333%;
	position:relative;
	display:block;
	background-size:cover;
	background-position:top center;
}
#update-grid svg{
	width:100%; height:auto;
}
#update-grid a span{
	position:absolute;
	left:0;top:0;
	word-wrap: break-word;
	display:block;
	padding:25px;
	font:lighter 54px/54px "ls";
	color:#f6ff00;
}
#update-grid .align-bottom span{
	top:auto;
	bottom:0;
}
#update-grid a span b{
	color:#fff;
	font-family:"ls-med";
}

/*============================== video ===============================*/
#video{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.landscape #video{
	padding-top:0;
	height:calc(100vh - 63px);
}
#video iframe{
	position:absolute;
	left:0;top:0;
	width:100%;height:100%;
}

/*============================ press =======================*/
#press{
	background:#fff;
	padding:65px 50px;	
}
#press h2{
	text-align:center;
	margin-bottom:50px;
	font:normal 54px 'ls-med';
	color:#000;
}
#press-items{
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	max-width:1350px;
	margin:auto;
}
#press a{
	flex:0 0 33.3333%;
	position:relative;
	color:#000;
	font:normal 34px "ls-med";
	text-align:center;
	padding:35px;
}

#press a b{
	display:block;
	position:absolute;
	left:50%;top:50%;
	transform:translate(-50%, -50%);
	text-align:center;

}

#press a span{
	display:block;
	position:relative;
	opacity:0;
	transition:opacity .2s;
	z-index:2;
}
#press a:hover span{
	opacity:1;
}
#press a:hover b{
	opacity:0;
}
#press a:hover{
	background-image:none !important;
}

@media screen and (max-width:1350px){
	#press a{font-size:1.9vw;}
}

@media screen and (max-width:1330px){
	#update-grid a span{
		font-size:2.9vw;
		line-height:1.2em;
	}
}

@media screen and (max-width:910px){
	#carousel-items h2{ font-size:8vw;}
	#carousel-items h3{font-size: 2.2vw;}
}

@media screen and (max-width:860px){
	#intro h2{font-size:6.5vw; line-height:1em;}
	#intro h3{font-size:2.3vw; line-height:1.3em; padding-top:15px;}
}

@media screen and (max-width:800px){
	#press a{flex:0 0 50%; font-size:2.9vw; line-height:1.3em; padding:35px;}
}

@media screen and (max-width:720px){
	.bx-wrapper .bx-pager{
		text-align:left;
		left:15px;
		bottom:10px;
	}
	.carousel-down{bottom:-45px;}
}



@media screen and (max-width:620px){
	#homepage{ padding-top:0; }
	#intro h3{font-size:18px; font-family:ls; font-weight:normal;}
}

@media screen and (max-width:600px){
	#press-items{display:block;}
	#press h2{font-size:24px; margin-bottom:1em;}
	#press a{
		text-align:left;
		font-size:22px;
		padding-bottom:2em;
	}
	#press a b{
		position:static;
		height:auto;
		transform:unset;
		text-align:left;
		margin:0;
	}
	#press a span, #press a:hover b{opacity:1;}
}

@media screen and (max-width:540px){
	#carousel-items h3{font-size:14px;}
	#update-grid{
		display:block;
	}
	#intro h2{font-size:26px;}
	#intro #intro-content{
		padding:55px 20px;
	}
	#update-grid a span{
		font-size:9vw;
	}

	
	

}