@font-face {
    font-family: 'bold';
    src: url('https://s0.2mdn.net/creatives/assets/3963737/AvivaCurve-Regular.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-smoothing: antialiased;
	font-family: 'Schibsted Grotesk', sans-serif;
/* 	font-weight: 500; */
}

#container {
	cursor: pointer;
	width: 300px;
	height: 600px;
	border: 1px black solid;
	box-sizing: border-box;
	opacity: 0;
	overflow: hidden;
	background-color: #fff;
}

img {
	image-rendering: optimize-contrast;
}

div, img, svg {
	position: absolute;
}

.o {
	opacity: 0;
	visibility: hidden;
}

.f-wh {
	width: 100%;
	height: 100%;
}

.c-h {
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	left: 50%;
}

.c-v {
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
}

.c-hv {
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
}

.clickTag {
	top:0;
}

.mask {
	overflow: hidden;
}

.logo {
	width: 59px;
	height: auto;
	top: 0px;
	right: 15px;
	display: none;
}
.bold{
	font-family: 'bold';
}
.regular{
	font-family: 'Schibsted Grotesk';
}
.bg{
	width: 300px;
	height: 600px;
	top:0;
}
.headline{
	margin: 30px 20px 10px 20px;
	font-size: 26px;
	line-height: 1.2em;
	color: #000;
	position: relative;
}
.subheadline{
	margin: 0 20px 0 20px;
	font-size: 14px;
	line-height: 1.4em;
	color: #000;
	position: relative;
}
.cta{
	margin: 0 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3em;
	letter-spacing: 0px;
	background-color: #FFD900;
	position: relative;
	color: #000;
	padding: 10px 18px;
	border-radius: 6px;
	text-align: center;
	/* text-transform: uppercase; */
	align-self: flex-start;
}


.legal-btn{
	/* position: relative; */
	font-size: 13px;
	margin: 0 20px;
	text-decoration: underline;
	bottom: 15px;
}
.legal-text{
	top: 0px;
	background-color: #fff;
	color: #000;
	font-size: 13px;
	line-height: 1.3;
	padding: 30px 10px 10px 10px;
	width: 300px;
	height: 600px;
	box-sizing: border-box;
}
#legal-close{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 14px;
	height: auto;
	border-radius: 50%;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
	padding: 10px;
	background-color: #000;
}

.cta-holder{
	position: relative;
	flex: 1 0;
	display: flex;
	/* justify-content: flex-end; */
	flex-flow: column;
	margin-top: 20px;
}
.video-holder{
	width: 300px;
	height: 169px;
	position: relative;
	margin-top: 70px;
	overflow: hidden;
	background-color:#ccc;
}
#video{
	width: 100%;
	height: 100%;
	position: absolute;
}
.video-controls{
	top: 200px;
	width: 300px;
	height: 20px;
}
#play, #pause{
	right: 33px;
	width: 20px;
	height: 20px;
}
#mute, #unmute{
	right: 10px;
	width: 20px;
	height: 20px;
}