@charset "utf-8";
/* CSS Document */

* { margin:0px; padding:0px; text-decoration:none; list-style:none;}
body{font-family: 'Muli', sans-serif; line-height: 1.7; font-size: 2.1vw; color: #FFF}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block; padding:0px; margin:0px; border:none; outline:none;}
a,i,strong,p,img { border:none; outline:none;}

.FL{float:left}.FR{float:right}.CL{clear:both; font-size:0; line-height:0; height:0}.CL1{clear:both}
.CTR{text-align:center}.TAR{text-align:right}.uline{text-decoration:underline}.UC{text-transform:uppercase} .tCap { text-transform:capitalize !important;}
:focus{outline:0}.PR{position:relative}
.PA5{padding:5px}.PA7{padding:7px}.PA10{padding:10px}.PA12{padding:12px}.PA15{padding:15px} .PA20{padding:20px;}
.PT5{padding-top:5px}.PT7{padding-top:7px}.PT8{padding-top:8px}.PT10{padding-top:10px}.PT15{padding-top:15px}.PT20{padding-top:20px}.PT25{padding-top:25px}.PT30{padding-top:30px}
.PB5{padding-bottom:5px}.PB7{padding-bottom:7px}.PB10{padding-bottom:10px}.PB15{padding-bottom:15px}.PB20{padding-bottom:20px} .PB30{padding-bottom:30px}.PB25{padding-bottom:25px}
.PL5{padding-left:5px}.PL10{padding-left:10px}.PL15{padding-left:15px}.PL20{padding-left:20px}.PL25{padding-left: 25px}
.PR5{padding-right:5px}.PR10{padding-right:10px}.PR15{padding-right:15px}.PR20{padding-right: 20px}
.PL50 { padding-left:50px;} .PR50 { padding-right:50px;}

.MR5{margin-right:5px}.MR7{margin-right:7px}.MR10{margin-right:10px}.MR15{margin-right:15px}.MR20{margin-right:20px}.MR25{margin-right:25px}.MR30{margin-right:30px}.MR0{margin-right:0 !important}
.ML2{margin-left:2px}.ML5{margin-left:5px}.ML7{margin-left:7px}.ML10{margin-left:10px}.ML15{margin-left:15px}.ML20{margin-left:20px}.ML30{margin-left:30px}
.MT3{margin-top:3px}.MT5{margin-top:5px}.MT7{margin-top:7px}.MT10{margin-top:10px}.MT12{margin-top:12px}.MT15{margin-top:15px}.MT20{margin-top:20px}.MT25{margin-top:25px}.MT30{margin-top:30px}.MT35{margin-top:35px}.MT40{margin-top:40px}.MT45{margin-top:45px} .MT50{margin-top:50px}.MT70{margin-top:70px}
.MB5{margin-bottom:5px}.MB10{margin-bottom:10px}.MB15{margin-bottom:15px}.MB30{margin-bottom:30px}
.clear 		{ display:block; clear:both; height:0px;}
/*     Float containers fix 
=============================== */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
.clearfix{display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%}
.clearfix{display: block}
/* End hide from IE-mac *//* reset CSS end here */
.container,.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:735px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}
.row{margin-left:-15px;margin-right:-15px;}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:0}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:0}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:0}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:0}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:0}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:0}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:0}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:0}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}




.visible-xs, .visible-sm, .visible-md, .visible-lg {
	display: none !important
}
@media (max-width:767px) {
.visible-xs {
	display: block !important
}
table.visible-xs {
	display: table
}
tr.visible-xs {
	display: table-row !important
}
th.visible-xs, td.visible-xs {
	display: table-cell !important
}
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm {
	display: block !important
}
table.visible-sm {
	display: table
}
tr.visible-sm {
	display: table-row !important
}
th.visible-sm, td.visible-sm {
	display: table-cell !important
}
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md {
	display: block !important
}
table.visible-md {
	display: table
}
tr.visible-md {
	display: table-row !important
}
th.visible-md, td.visible-md {
	display: table-cell !important
}
}
@media (min-width:1200px) {
.visible-lg {
	display: block !important
}
table.visible-lg {
	display: table
}
tr.visible-lg {
	display: table-row !important
}
th.visible-lg, td.visible-lg {
	display: table-cell !important
}
}
@media (max-width:767px) {
.hidden-xs {
	display: none !important
}
}
@media (min-width:768px) and (max-width:991px) {
.hidden-sm {
	display: none !important
}
}
@media (min-width:992px) and (max-width:1199px) {
.hidden-md {
	display: none !important
}
}
@media (min-width:1200px) {
.hidden-lg {
	display: none !important
}
}
.visible-print {
	display: none !important
}
@media print {
.visible-print {
	display: block !important
}
table.visible-print {
	display: table
}
tr.visible-print {
	display: table-row !important
}
th.visible-print, td.visible-print {
	display: table-cell !important
}
}
* { box-sizing:border-box;}




@font-face {
    font-family: 'Muli';
    src: url('font/Muli-Regular.eot');
    src: url('font/Muli-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Muli-Regular.woff2') format('woff2'),
        url('font/Muli-Regular.woff') format('woff'),
        url('font/Muli-Regular.ttf') format('truetype'),
        url('font/Muli-Regular.svg#Muli-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.d-flex{display: flex;}

body{
    background:#d53928 url(../images/bg.jpg) no-repeat 0 0;
    background-size: 100%;
	padding-top: 75px;
}

.finalscreen{display: none; position: relative;}
.finalscreen.active{display: block}
.back-screen-home{position: absolute; width: 40px; height: 40px; background-color: #FFF; display: flex; border-radius: 20px; padding: 10px; right: 0; top: -100px;}
.back-screen-home img{width: 100%; height: auto;}


.header{padding-top: 25px}
.screen{display: none; position: relative;}
.screen.active{display: block}
.back-screen{position: absolute; width: 40px; height: 40px; background-color: #FFF; display: flex; border-radius: 20px; padding: 10px; right: 0; top: -100px;}
.back-screen img{width: 100%; height: auto;}

.back-screen-aoc{position: absolute; width: 40px; height: 40px; background-color: #FFF; display: flex; border-radius: 20px; padding: 10px; right: 0; top: -100px;}
.back-screen-aoc img{width: 100%; height: auto;}


.hd1{font-size: 3.7vw; font-weight: 700; color: #FFF; margin-top: 20px; text-align: center; margin-bottom: 20px;}
.hd3{font-size: 36px;line-height: 1.4; color: #FFF; margin-top: 30px; text-align: center; margin-bottom: 50px;}
.c-orange{color: #f3a53b;}
.btn-box {display: flex; justify-content: center; position: relative;}
.btn-box a{padding: 5px 20px 5px 5px; color: #79150d; background: #FFF; font-weight: 600; font-size: 18px; display: flex; align-items: center;}
.btn-box img{margin: 0 3px;}
/* .btn-box.social-wrapper a {color: white; font-size: 12px; text-align: center;padding: 0; background: transparent; font-weight: normal; display: unset;} */
.btn-box.social-wrapper img{width: 60px; border-radius: 4px; padding: 5px; display: block;}
.btn-2{padding: 3px 10px; background: #FFF; border-radius: 5px; font-weight: 700; color: #79150d}

.card-input{display: flex; justify-content: center;}
.relation-box{padding-top: 60px; margin-top: 30px;}
.relation-list{display: flex; justify-content: center; flex-wrap: wrap;}
.relation-list li{text-align: center; margin:10px 24px; font-size: 16px;}
.relation-list li img{width: 106px; height: 106px; border-radius: 53px; border: 4px solid transparent; display: block}

.greeting-list{display: flex; justify-content: center; flex-wrap: wrap;}
.greeting-list li{text-align: center; margin:10px; font-size: 24px; width: 28%;}
.greeting-list li img{border: 6px solid transparent; display: block; width: 100%;}
.greeting-list li label{position: relative; cursor: pointer;}
.greeting-list li .card-input-element:checked + .card-input::before {position: absolute; width: 36px; height: 36px; background: #FFF url(../images/right.jpg) no-repeat center center; content: ""; border-radius: 18px;left: 50%; top: 50%; margin: -18px;}
.greeting-list li .card-input-element:checked + .card-input img{border-color: #ffffff;}



.feelings-list{display: flex; justify-content: center; max-width: 750px; margin: 0 auto; flex-wrap: wrap;}
.feelings-list li{text-align: center; margin:10px; font-size: 24px; background: #FFF; color: #a33636; border-radius: 25px; font-size: 20px;width:340px;}
.selection-div{padding: 40px 30px;}

.feelings-list li img{border: 6px solid transparent; display: block}
.feelings-list li label{position: relative; cursor: pointer;}
.feelings-list li .card-input-element:checked + .card-input::before {position: absolute; width: 36px; height: 36px; background: #a33636 url(../images/right2.png) no-repeat center center; content: ""; border-radius: 18px;left: 50%; top: 0px; margin: -18px;}
.feelings-list li .card-input-element:checked + .card-input img{border-color: #ffffff;}


.relation-list li label {
    width: 100%;
    display: block;
	cursor: pointer;
}

.card-input-element {
    display: none;
}
.card-input-element:checked + .card-input img{
    border-color: #f3a53b;
 }

select.my-select{
	border: 0;
	padding: 20px 30px;
	min-width: 340px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #f3a53b url(../images/down-arrow.png) no-repeat 96% center;
	font-size: 18px;
	color: #c44633;
	text-align: center;
}
select.my-select::-ms-expand {
	display: none;
}

select.my-select:focus::-ms-value {
	background: none;
}

.vid-box{background: #000; position: relative; padding-bottom: 100%; height: 0;}
.vid-box iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 7px solid #FFF;}

.play-btn{background: url(../images/play.png) no-repeat 0 0; position: absolute; width: 40px; height: 48px; left: 50%; top: 50%; margin: -24px 0 0 -20px; z-index: 1;}
.vid-box img{width: 100%; display: block; opacity: .7;}

.url-box{font-size: 1.5vw; display: flex; justify-content: center;}
.url-box button{background:none; border: 0; margin-left: 10px; cursor: pointer;}
.copyurl{text-decoration: underline;}
.copyurl a{color: #FFF;}

.or-box{display: flex; justify-content: center;}
.or-box span{width: 40px; height: 40px; background: #FFF; font-size: 16px; font-weight: 700; color: #a33636; border-radius: 20px; line-height: 2.4;}

@media only screen and (max-width: 992px) {
    body{
		background:#d53928 url(../images/bg-m.jpg) no-repeat 0 0;
		background-size: 100%;
		font-size: 15px;
	}
	
}

@media only screen and (max-width: 767px) {
	body{padding-top: 0; line-height: 1.7;}
	.header img{width: 140px;}
	.back-screen{top: -70px;}
	.back-screen-aoc{top: -70px;}
	.hd1{font-size: 36px;}
	.hd3{font-size: 18px; margin: 30px 0 10px 0;}
	.relation-list li{margin: 10px 15px;}
	.greeting-list li{width: auto; margin: 10px 40px;}
	.feelings-list{flex-wrap: wrap;}
	.feelings-list li{margin: 20px;}
	select.my-select{border: 0; padding: 10px 30px; min-width: 230px;}
	.url-box{font-size: 18px;}
	.top-message {margin-top: 10rem;}
}

.cursor_img {
    position: absolute;
        bottom: -34px;
        left: 55%;
}
@media(max-width:991px) {
    .cursor_img {
            left: 57%;
    }
}
@media(max-width:600px) {
    .cursor_img {
            left: 60%;
    }
}
@media(max-width:400px) {
    .cursor_img {
            left: 65%;
    }
}