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

@font-face {
    font-family: 'regular';
    src: url('https://s0.2mdn.net/creatives/assets/3963737/LardySerif-Regular.woff2') format('woff2');
    font-weight: normal;
    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;}
#container{cursor:pointer;width: 300px; height: 600px;border:1px black solid;box-sizing: border-box;opacity:0;overflow:hidden;background-color:#fff;font-family: 'regular'; color: #3E3E3E;}
#bg{width: 100%;height: 100%;background-color: #fff;}
img {
  image-rendering: optimize-contrast;
}
div, img, svg{
	position: absolute;
}
.o{
	opacity:0;
	visibility: hidden;
}
.f-wh{
	width: 100%;
	height: 100%;
}
.mask{
	overflow: hidden;
}

.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%;
}

#clickthru{
	width: 300px;
	height: 600px;
	
}
.logo{
	width: 110px;
	height: auto;
	top:537px;
	left:166px;
}
.frame1-text-holder{
	width: 300px;
	height: 290px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1.4;
	text-align: center;
}
.frame1-text{
	margin: 0 45px;
}
.frame1-text span{
	font-size: 36px;
	line-height: 1;
}

.image1{
	width: 300px;
	height: auto;
	top: 295px;
}
.nav-holder{
	width: 300px;
	height: 45px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-size: 16px;
	text-align: center;
}
.nav{
	flex: 1;
	position: relative;
}
.nav1{
	margin-left: 16px;
	margin-right: 2px;
}
.nav2{
	margin-left: 2px;
	margin-right: 16px;
}
.nav-line{
	width: 100%;
	height: 1px;
	background-color: #A04044;
	bottom: 0;
}

.frame2-text-holder, .frame3-text-holder{
	width: 300px;
	height: 250px;
	top: 45px;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.frame2-text{
	margin: 0 50px;
}
.frame3-text{
	margin: 0 30px;
}
.image2{
	width: 300px;
	height: auto;
}

.image2-holder{
	width: 300px;
	height: 212px;
	top: 295px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.image2-holder div{
	position: relative;
	width: 24px;
	height: 2px;
	background-color: #fff;
	margin: 8px 0px;
}
.image2-holder p{
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	position: relative;
	text-align: center;
	margin: 0 15px;
}

.slider-container{
	width: 300px;
	height: 212px;
	top: 295px;
	color: #fff;
}
.slides{
	text-align: center;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.headline{
	font-size: 14px;
	color:#fff;
	position: relative;
	margin-top: 20px;
}
.subheadline{
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 35px;
}
.cta{
	border: 1px solid #fff;
	border-radius: 10px;
	width:  150px;
	height: 25px;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}
.arrow{
	width: 12px;
	height: auto;
	top: 95px;
}
.arrow-right{
	right: 10px;
}
.arrow-left{
	left: 10px;
}
.f-18{
	font-size: 18px !important;
}
.frame1, .frame2, .frame3{
	background-color:#fff;
}
.clickTag{
	width: 100%;
	height: 100%;
}