:root{

	--color-red: #E30421;

}

/* raleway-200 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/raleway-v28-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-200.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-200.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/raleway-v28-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-300.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/raleway-v28-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-500.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('./fonts/raleway-v28-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-800.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-200italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 200;
  src: url('./fonts/raleway-v28-latin-200italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-200italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-200italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-300italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: url('./fonts/raleway-v28-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/raleway-v28-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-500italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url('./fonts/raleway-v28-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-500italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 800;
  src: url('./fonts/raleway-v28-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v28-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v28-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v28-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v28-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v28-latin-800italic.svg#Raleway') format('svg'); /* Legacy iOS */
}


*{

	box-sizing: border-box;
	margin: 0;
	padding: 0;

}

html,body{

	/* overflow-x: hidden; */

}

html{

	font-size: 62.5%;

}

body{

	font-family: 'Raleway', Aral, Helvetica;
	font-size: 1.9em;
	line-height: 1.4em;
	color: #171717;

}

img,svg{

	max-width: 100%;
	height: auto;

}

strong{

	font-weight: 500;

}

#container{



}

#header{

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 220px;
	z-index: 1;

}

#logo{

	width: 100px;
	margin: 25px auto 0 auto;
	

}

@media (min-width: 700px) {

	#logo{
	
		width: 140px;
			
	}

}

#logo svg{

	display: block;
	width: 100%;

}

.frame{

	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	margin-bottom: 50px;

}

@media (min-width: 640px) {

	.frame{
		
		margin-bottom: 120px;
		
	}

}

.frame-fullscreen{

	width: 100%;
	height: 100vh;
	max-width: none;
	padding: 0;

}

.frame-fullscreen .frame-video{

	width: 100%;
	height: 100%;
	position: relative;

}

.frame-fullscreen video{

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

}

.soundon{

	display: none;
	position: absolute;
	left: 50%;
	bottom: 130px;
	width: 50px;
	cursor: pointer;
	z-index: 10;
	transform: translateX(-50%);
	
}


@media (min-width: 700px) {

	.soundon{
	
		left: auto;
		right: 40px;
		bottom: 54px;
		transform: none;
		
	}

}

.soundon svg{

	display: block;
	width: 100%;
	height: auto;

}

.soundon.active svg{

	fill: var(--color-red);

}

.soundon .volumeon{

	display: none;

}

.soundon.active .volumeon{

	display: block;

}

.soundon.active .volumeoff{

	display: none;

}


.controlvideo{

	position: absolute;
	left: 50%;
	bottom: 130px;
	width: 80px;
	cursor: pointer;
	z-index: 10;
	transform: translateX(-50%);
	
}


@media (min-width: 700px) {

	.controlvideo{
	
		left: 40px;
		bottom: 48px;
		transform: none;
		width: 62px;
		
	}

}

.controlvideo svg{

	display: block;
	width: 100%;
	height: auto;
	
}



.controlvideo .controlvideopause{

	display: none;

}

.controlvideo.active .controlvideopause{

	display: block;

}

.controlvideo.active .controlvideoplay{

	display: none;

}


.frame-sticky{

	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 50px;
	z-index: 100;

}

.button{

	display: inline-block;
	background: var(--color-red);
	padding: 15px 40px;
	color: #ffffff;
	text-decoration: none;
	border-radius: 30px;
	letter-spacing: 0.1em;
	font-weight: 500;
	white-space: nowrap;

}


@media (min-width: 800px) {


	.frame-2cols{
	
		display: flex;
		flex-flow: row wrap;
	
	}


}

.frame-2cols > div{

	margin-bottom: 25px;
   

}

@media (min-width: 800px) {

	.frame-2cols > div{
	
		margin-bottom: 0;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: 50%;
	
	}

}

h1{

	font-size: 3em;
	line-height: 1.1em;
	font-weight: 200;

}

@media (min-width: 640px) {

	h1{

		font-size: 4em;
		line-height: 1.1em;
		
	}

}

@media (min-width: 1100px) {

	h1{
	
		font-size: 5em;
		line-height: 1.1em;
		
	}

}

h2{

	font-size: 1.65em;
	line-height: 1.2em;
	font-weight: 200;

}

@media (min-width: 640px) {

	h2{

		font-size: 2.2em;
		line-height: 1.2em;	

	}
	
}


@media (min-width: 1100px) {

	h2{
	
		font-size: 3.5em;
		line-height: 1.2em;
	
	}
	
}

h1 .indent,
h2 .indent{

	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	padding-left: 2.2em;

}

h1 .indent2,
h2 .indent2{

	padding-left: 1.1em;
	display: block;

}

h1 .indent3,
h2 .indent3{

	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	padding-left: 0.4em;

}

h1 .indent span,
h2 .indent span{

	display: block;

}

.reddot{
	
	background: var(--color-red);
	border-radius: 50%;
	display: block;
	width: 0.15em;
  	height: 0.15em;
  	margin-left: 0.1em;
  	  		
}

.frame p:not(:last-child) {

	margin-bottom: 50px;

}

.lightfont{

	opacity: 0.56;

}

.frame-images{

	display: flex;
	flex-flow: row wrap;

}

.frame-images > div{

	transition: transform 0.8s linear;

}

.frame-images > div img{

	display: block;
	width: 100%;

}

.frame-images > div:nth-child(1) {
	
	width: 100%;
	padding: 0 35px 0 50px;
	transform: translateY(100%);
	
}

.frame-images.inviewport > div:nth-child(1) {

	transform: translateY(0);

}

@media (min-width: 800px) {

	.frame-images > div:nth-child(1) {
	
		padding: 0 115px 0 135px;
		

	}

}

.frame-images > div:nth-child(2) {

	transform: translateY(-80px) translateY(100%);
	width: 40%;
	transition-delay: 0.2s;

}

.frame-images.inviewport > div:nth-child(2) {

	transform: translateY(-80px);

}

@media (min-width: 800px) {

	.frame-images > div:nth-child(2) {

		transform: translateY(-180px) translateY(100%) ;

	}
	
	.frame-images.inviewport > div:nth-child(2) {

		transform: translateY(-180px);

	}

	
}

.frame-images > div:nth-child(3) {

	transform: translateY(-50px) translateY(100%);
	width: 50%;
	z-index: -1;
	margin-left: 10%;
	transition-delay: 0.4s;
	
}

.frame-images.inviewport > div:nth-child(3) {

	transform: translateY(-50px);

}

@media (min-width: 800px) {

	.frame-images > div:nth-child(3) {
	
		transform: translateY(-100px) translateY(100%) ;
	
	}
	
	.frame-images.inviewport > div:nth-child(3) {

		transform: translateY(-100px);

	}
	
}

.frame-images > div:nth-child(4) {

	width: 100%;
	transform: translateY(-130px) translateY(100%) ;

}

.frame-images.inviewport > div:nth-child(4) {

	transform: translateY(-130px);

}

@media (min-width: 800px) {

	.frame-images > div:nth-child(4) {

		transform: translateY(-320px) translateX(100px) translateY(100%) ;

	}
	
	.frame-images.inviewport > div:nth-child(4) {

		transform: translateY(-320px) translateX(100px);

	}

}

.blur{

	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
	background: rgb(255,255,255);
background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	z-index: 9;

}

@media (min-width: 800px) {

	.blur{
	
		height: 300px;	
	
	}

}

body.scrolled .blur,
body.scrolledhalf .blur{

	display: block;

}

body.scrolled #header{

	background: #ffffff;
	position: fixed;
	height: 112px;
	padding: 15px;
	-webkit-box-shadow: 0px 0px 40px 0px rgba(23,23,23,0.15);
	box-shadow: 0px 0px 40px 0px rgba(23,23,23,0.15);

}

body.scrolled #logo{

	width: 100px;
	margin: 0 auto;

}

body.scrolled #logo svg path,
body.scrolled #logo svg rect{

	fill: #171717;

}


@media (min-width: 640px) {

	.frame-2cols{
	
		flex-wrap: nowrap;
	
	}

	.frame-2cols > div:nth-child(1) {
	
		padding-right: 130px;
	
	}
}