@charset "utf-8";

/* ////////////////////////////////////////////////////////////// */

@font-face {
	font-family: "a";
	src: url('../fonts/a.woff') format('woff');
}

@font-face {
	font-family: "a-lite";
	src: url('../fonts/a-lite.woff') format('woff');
}

@font-face {
	font-family: "a-thin";
	src: url('../fonts/a-thin.woff') format('woff');
}

@font-face {
	font-family: "a-bold";
	src: url('../fonts/a-bold.woff') format('woff');
}


/* ////////////////////////////////////////////////////////////// */

body {
	margin: auto;
	background-color: #000;
	font-family: 'a-lite';
	color: #fff;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ////////////////////////////////////////////////////////////// */

.headline {
	font-size: calc((39px + 18 *(100vw - 992px)/ (1950 - 992)) * 1);
	/* font-family: 'a-bold'; */
	font-family: 'a-lite';
	margin-bottom: 10px!important;
	font-weight: 400;
	text-transform: uppercase;
}

.subline {
	font-size: calc((39px + 18 *(100vw - 992px)/ (1950 - 992)) * 1);
	font-family: 'a-thin';
	/* line-height: 110%; */
	font-weight: 400;
}

/* ////////////////////////////////////////////////////////////// */

.center {
	text-align: center;
	margin: auto;
}

.right {
	text-align: right;
	margin: auto;
}

.show {
	opacity: 1!important;
}

.hide {
	opacity: 0;
}

.bold {
	font-family: 'a-bold';
	color: #ff0000;
}

.thin {
	font-family: 'a-thin';
}

.medium {
	font-size: 26px!important;
}

/* ////////////////////////////////////////////////////////////// */

#news-banner {
	width: 100vw;
	height: 30px;
	background-color: rgba(0, 0, 0, .5);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	position: absolute;
	z-index: 100;

	color: #fff;
	line-height: 30px;

	font-family: 'a-lite';
	text-align: center;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* ////////////////////////////////////////////////////////////// */


.buttons {
	text-align: center;
}


#watch-button:hover, #watch-button-2:hover {
	/* border: solid 1px #ff0000; */
	color: #000000;
	background-color: #fff;
}

#watch-button::before {
	content: 'Watch the film';
}

/*
#watch-button-2 {
	margin-left: 100px;
}
*/

#watch-button-2::before {
	content: 'Hearing loss film';
}

#watch-button, #watch-button-2 {
	/* margin: auto; */
	margin-top: 20px;


}

.button {
	width: intrinsic;
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	max-width: content-width;
	padding: 10px;
	height: 40px;
	background-color: transparent;
	box-sizing: border-box;
	border: solid 1px #fff;
	border-radius: 4px;
	margin-top: 10px;
	line-height: 18px;
	transition: all .2s ease-in-out;
	font-size: 14px;
	font-family: 'a-lite';
	text-align: center;
	cursor: pointer!important;
	display: inline-block;

	/* background-color: rgba(255, 255, 255, .4); */
	/*
backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
*/
	text-transform: uppercase;
	letter-spacing: 1px;
}




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

	.button {
		font-size: 12px;
		}

}


/* ////////////////////////////////////////////////////////////// */





.A1 {
	width: 100%;

	position: relative;
	overflow: hidden;
}

section#primary {
	background-color: #000;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	height: 90vh;

	background-image: url('../images/graphics/video-still.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}











section#secondary {
	background: -webkit-linear-gradient(top, #1894e1, #241ca2);
	background: linear-gradient(to bottom, #1894e1, #241ca2);

	height: 90vh;

}

section#tertiary {
	background: -webkit-linear-gradient(top, #1ad3bf, #11c36d);
background: linear-gradient(to bottom, #1ad3bf, #11c36d);

height: 90vh;
}




section#fourth {
	background-image: url('../images/photos/a.jpg');
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	background: -webkit-linear-gradient(top, #af4fc1, #4f1b74);
    background: linear-gradient(to bottom, #af4fc1, #4f1b74);
	height: 101vh;
}



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

	section#fourth {
		height: 76vh;
		background-position: center center;
	}
}


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

	section#fourth {
		height: 130vh;
		background-position: center center;
	}
}








section#fifth {
	background-image: url('../images/photos/a.jpg');
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	background: -webkit-linear-gradient(top, #af4fc1, #4f1b74);
    background: linear-gradient(to bottom, #af4fc1, #4f1b74);
	height: 89vh;
}



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

	section#fifth {
		height: 67vh;
		background-position: center center;
	}
}


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

	section#fifth {
		height: 113vh;
		background-position: center center;
	}
}







section#mili {
/*
	background-image: url('../images/graphics/mili.png');
	background-size: cover;
	background-position: center center;
*/
	height: 89vh;

}






.video-wrapper {
	width: 100vw;
	height: 90vh;
	position: absolute;
	margin: 0px;
	left: 0px;
	right: 0px;
	background-color: #000;
	overflow: hidden;
}


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

	#video-a {
		display: none;
	}

}




.content-type-a {
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	overflow: hidden;
	bottom: 120px;
	width: 700px;
	/* height: 200px; */
	color: #fff;
	padding: 40px;
	border-radius: 10px;
}




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

	.content-type-a {

		width: 50vw;

	}


}



.content-type-b {
	position: absolute;
	margin: auto;
	top: 10vh;
	left: 0px;
	right: 0px;
	background-color: transparent;
	overflow: hidden;
	/* bottom: 120px; */
	width: 800px;
	height: 70vh;
	color: #fff;
}

.content-type-b .block-left {
	margin-top: 10vh;
	background-color: lime;
	width: 330px;
	overflow: hidden;
	height: 70vh;
	display: inline-block;
}

.content-type-b .block-right {
	margin-top: 10vh;
	background-color: orange;
	width: 330px;
	overflow: hidden;
	height: 70vh;
	float: right;
	display: inline-block;
}

.content-type-c {
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	background-color: transparent;
	overflow: hidden;
	bottom: 120px;
	width: 800px;
	height: 300px;
	color: #fff;
}


.content-type-e {
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	background-color: transparent;
	overflow: hidden;
	top: 120px;
	width: 90vw;

	color: #fff;
}









.content-type-f {
	position: absolute;
	margin: auto;
	left: 140px;
	/* right: 0px; */
	/* background-color: red; */
	overflow: hidden;
	top: 100px;
	width: 800px;
	height: 300px;
	color: #fff;
}



@media screen and (max-width: 738px) {
	.content-type-f {
		position: absolute;
		margin: auto;
		left: 0px;
		right: 0px;
		/* background-color: red; */
		overflow: hidden;
		top: 40px;
		width: 80vw;
		height: 300px;
		color: #fff;
	}

}



#button-2 {
	width: 330px;
	/* border: solid 1px #fff; */

}





.content-block {

}


.block-25 {
	background-color: lime;
	width: 25%;
	overflow: hidden;
	height: 70vh;
	display: inline-block;
	float: left;
}

.block-50 {
	background-color: transparent;
	width: 55%;
	overflow: hidden;
	height: 70vh;
	display: inline-block;
	float: left;
}

.block-75 {
	background-color: grey;
	width: 75%;
	overflow: hidden;
	height: 70vh;
	display: inline-block;
	float: left;
}

.block-100 {
	background-color: orange;
	width: 100%;
	overflow: hidden;
	height: 70vh;
	display: inline-block;
	float: left;
}


#iphone-1 {
	background-image: url('../images/photos/d.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 90%;



}

#iphone-2 {
	background-image: url('http://images.apple.com/v/clips/a/images/hw_sayit_large_2x.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 90%;

}






.lower {
	color: #fff; position: absolute; bottom: 60px; font-size: 30px; font-family: 'a'; text-align: center; margin: auto; left: 0px; right: 0px;
}

.lower-small {
	color: #fff; position: absolute; bottom: 30px; font-size: 20px; font-family: 'a-lite'; text-align: center; margin: auto; left: 0px; right: 0px;
}


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

	.lower {
		color: #fff; position: absolute; bottom: 60px; font-size: 18px; font-family: 'a'; text-align: center; margin: auto; left: 0px; right: 0px;
	}

	.lower-small {
		color: #fff; position: absolute; bottom: 30px; font-size: 15px; font-family: 'a-lite'; text-align: center; margin: auto; left: 0px; right: 0px;
	}

}
















.about-img {
	/* position: absolute; */
	margin: auto;
	left: 0px;
	right: 0px;
	width: 40vw;
	z-index: 40;
	height: 26vw;

	font-size: 20px;
	line-height: 25px;
	/* top: 50%; */
	/* margin-top: -200px; */
	background-color: navy;
	border-radius: 10px;
	background-color: red;
	background-image: url('../images/photos/about.png');
	background-size: cover;
	/* margin-top: 130px; */

}



.about-text {
	padding-top: 40px;
	/* position: absolute; */
	margin: auto;
	left: 0px;
	right: 0px;
	width: 70vw;
	z-index: 40;
/* 	height: 300px; */
	font-size: 20px;
	line-height: 25px;

	/* top: 50%; */
	/* margin-top: 40px; */
}



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

	.about-img {
		width: 82vw;
		height: 53vw;
		/* margin-top: 200px; */
	}

	.about-text {
		height: auto;
		width: 82vw;
		/* text-align: justify; */
		font-size: 18px;
	}

}