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

/*
@font-face {
	font-family:'dti-fonts';
	src: url('../fonts/dti.eot');
	src: url('../fonts/dti.eot?#iefix') format('embedded-opentype'),
		url('../fonts/dti.woff') format('woff'),
		url('../fonts/dti.ttf') format('truetype'),
		url('../fonts/dti.svg#Roboto-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-2044;
}

@font-face {
	font-family:'ubuntu';
	src: url('../fonts/Ubuntu.eot');
	src: url('../fonts/Ubuntu.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Ubuntu.woff') format('woff'),
		url('../fonts/Ubuntu.ttf') format('truetype'),
		url('../fonts/Ubuntu.svg#Ubuntu') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-2044;
}

@font-face {
	font-family:'gothic';
	src: url('../fonts/CenturyGothic.eot');
	src: url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CenturyGothic.woff') format('woff'),
		url('../fonts/CenturyGothic.ttf') format('truetype'),
		url('../fonts/CenturyGothic.svg#CenturyGothic') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-2044;
}


@font-face {
	font-family:'arial-round';
	src: url('../fonts/ArialRoundedMTBold.eot');
	src: url('../fonts/ArialRoundedMTBold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/ArialRoundedMTBold.woff') format('woff'),
		url('../fonts/ArialRoundedMTBold.ttf') format('truetype'),
		url('../fonts/ArialRoundedMTBold.svg#ArialRoundedMTBold') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-2044;
}
*/

html
{
    -ms-text-size-adjust        : 100%;
    -webkit-text-size-adjust    : 100%;
    overflow-x                  : hidden;
}

body
{
    margin      :   0;
    padding     :   0;
    text-align  :   center;
    font-family :   'Roboto';
    font-size   :   14px;
    color       :   #fff;
    text-align  :   center;
}

ul,ol
{
    padding     :   0;
    margin      :   0;
    list-style  :   none
}

/*
h1, h2, h3, h4, h5, h6, section, header, figure
{
    margin      :   0;
    padding     :   0;
    font-family :   'Roboto';
}
*/

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }

  #loadingDiv > .loading_bar > img{
    width: 100%;
}

.custom_container{
	max-width:700px;
	background: #980b13;
	padding:0;
	background-image: url("../images/site/background.jpg");background-repeat: no-repeat;
	background-size: 700px auto;
    background-position: center;
    display: flex;
    min-height: 100vh;
    flex-direction: column;

}

.main_sec{
    min-height: 80vh;
}

.menubar{
	border-bottom:2px solid #fff;
	    background: #790000;
}
.menubar a
{
    text-decoration :   none;
    color:#fff;
    display: block;
    padding: 10px;
}
.heading{
	width:100%;
	position:relative;
	min-height:50px;
	padding: 10px;

}
.heading span{
	display:inline-block;

}
.collapse-icon
{
    cursor          :   pointer;
    position: absolute;
    right: 10px;

}

.collapse-icon div
{
    width           :   24px;
    height          :   3px;
    background-color:   #fff;
    margin          :   5px 0;
}

.menubar ul{
    list-style      :   none;
}

.menubar li{
	/* padding:10px; */
}
.menubar li:hover{
	background:#e1011c;
}

.logo{
	position: absolute;
    top: 14px;
    left: 9px;
    font-size: 18px;
}
.logo img{
	width: 130px;
    height: 45px;
    position: absolute;
    top: -11px;
}

/* Code end for menubar */

.language-div{
	position: absolute;
	right: 50px;

}
.language-dropdown{
    border-radius   :   10px 10px 0 0;
    height          :   32px;
    font-weight     :   bold;
    background      :   #fff;
    color           :   #000;
}
.main_area{
	/*background-color: rgba(255,255,255,0.3);*/
	padding: 15px;
	margin: 0px 0 -29px 0;
    padding-top: 0;
}
.ad-img img{
	width:100%;
	height:100px;
}
.content_area h1{
	font-size:27px;
	color:#fff;
	margin-bottom: 21px;
	padding:10px;
	border-radius:10px;
	border:1px solid #fff;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fe1938;
}
.custom_dropdown_item {
    cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    color: white;
    font-weight: normal;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}


.form-control {
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.btn-success{
    font-size: 28px;
    line-height: 30px;
    border-radius: 0;
    box-shadow: 3px 3px 0px #b3b3b3;
}
.btn-success:hover{
	background:#14938d;
	border-color:#14938d;
}
.footer {
	border-top:2px solid #fff;
    text-align: center;
    padding: 10px 10px 20px;
	color:#fff;
    font-family: arial;
    background: #790000;
}
.footer ul li{
	display: inline-block;
}
.footer_menu ul li a{
	margin: 0 3px;
	color:#fff;
	text-decoration:none;
}
/*for footer social image links*/
.footer_button_img img{
	width:40px;
	height:40px;
	padding:2px;
}
.footer_button_cover img{
	width:45px;
	height:45px;
}
/*for footer social image links*/
.main_area .main_box img{
	width:60%;
}
.main_area .main_box h2{
	position:relative;
	color:#fff;
	font-size:40px;
}
.main_area .main_box p{
	position:relative;
	color:#fff;
	font-size:20px;
}
input[type=text]{
    width:50%;
	padding: 8px;
	font-size:20px;
	position:relative;
	background:#fff;
	 color: #000;
	border-radius:10px;
	word-wrap:break-word;
}

.register-button{
    background:#790000;
    border:1px solid #fff;
	padding:7px;
	margin  :auto;
	border-radius:10px;
	word-wrap:break-word;
    cursor: pointer;
    color: white;
    font-size: 25px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;

}
.register-button:hover{
    background      :#590303;
    color           : white;
    text-decoration : none;
}



.ads{
	height:250px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.share_part {
    position: relative;
    margin: 30px;
}
.share_part .btn {
    border-radius: 5px;
    height: 54px;
	 font-size: 15px;
    box-shadow: none;
}
.share_part .onl_btn-whatsapp {
    background-color: #20c47a;
    border-color: #fff;
}
.share_part .onl_btn-whatsapp:hover{
	background-color: #14a1cc;
    border-color: #00c3ff;
	color:#fff;
}
.wats img {
    width: 30px;
    height: 30px;
    margin-top: -4px;
}
.share_part a {
    color: white;
}
.btn-lg {
    padding: 15px 9px;
}
.share_part .col-md-6.col-sm-6 {
    margin-top: 10px;
}
.share_part .onl_btn-facebook {
    background: #3b5998;
    border-color: #fff;
}
.share_part .onl_btn-facebook:hover{
	background-color: #14a1cc;
    border-color: #00c3ff;
	color:#fff;
}
.share_part .fa-2x {
    font-size: 34px;
    margin-top: -4px;
}
.share_part .onl_btn-bell {
    background-color: #fff70f;
    border-color: #fff;
	color:#000;
}
.share_part .onl_btn-bell:hover{
	background-color: #14a1cc;
    border-color: #00c3ff;
	color:#fff;
}
.stroke img {
    width: 30px;
    height: 32px;
}
.share_part .onl_btn-messanger {
    background-color: #0166ff;
    border-color: #fff;
}
.share_part .onl_btn-messanger:hover{
	background-color: #14a1cc;
    border-color: #00c3ff;
	color:#fff;
}
.share_part .onl_btn-twitter {
    background: #00aced;
    border-color: #fff;
}
.share_part .onl_btn-twitter:hover{
	background-color: #14a1cc;
    border-color: #00c3ff;
	color:#fff;
}
.share_text_page {
    vertical-align: 6px;
}
.share_incre {
    padding-right: 5px;
}
.share_decre {
    padding-left: 5px;
}
.redeed{
	font-size: 40px;
    color: #fff;
}
.link{
	font-size: 23px;
    margin-top: 0px;
    color: #fff;
}
.link_share {
    background: #fff;
    color: #000;
    width: 90%;
    padding: 12px 0px;
    font-size: 18px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align: center;
    margin: auto;
}
.cop_text{
	width:50%;
	font-size:25px;
	position:relative;
	background:#790000;
	margin:10px 0 20px 0;
	padding: 6px;
	color: #fff;
	border-radius:10px;
	word-wrap:break-word;
    border:1px solid #fff;
}
.cop_text:hover{
	background:#590303;
	color:#fff;
}

.copy {
	font-size:16px;
    color: #fff;
	}
    .btn-calcu{
        width:40%;
        font-size:25px;
        position:relative;
        background:#790000;
        margin:20px 0 20px 0 ;
        padding: 6px;
        color: #fff;
        border-radius:10px;
        word-wrap:break-word;
        border:1px solid #fff;
    }
    .btn-calcu:hover{
        background:#590303;
        color:#fff;
    }
    .btn-calcu-back{
        width:40%;
        font-size:25px;
        position:relative;
        background:#08d13d;
        margin:20px 0 20px 20px ;
        padding: 6px;
        color: #fff;
        border-radius:10px;
        word-wrap:break-word;
        border:1px solid #fff;
    }
    .btn-calcu-back:hover{
        background:#057523;
        color:#fff;
    }
.scoreboard_div {
    padding: 12px;
	background:#fff;
    border-radius: 20px;
    margin: 20px 0 20px 0;
    color:#a50000;
	font-size:25px;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.scoreboard_div td{
	text-align: center;
}
.scoreboard_table tbody td {
    font-size: 20px;
	color: #000;
	background:#ce7273;
	text-decoration: none;
	border-radius:5px;
}
.scoreboard_table tbody td a {
  color: #000;
}
.scoreboard_table th{
	font-size:23px;
	font-weight:normal;
	background:#a50000;
	color:#fff;
	text-align: center;
	border-radius:5px;
}
.getstarted-page{
	padding:20px;
}
.getstarted-page h6{
	font-size:40px;
}
.started{
	font-size:30px;
	text-align:center;
 }


/*for kakao, BBM, VK button on share page*/



.share_part  .onl_btn-bio {
    background      :   linear-gradient(to right, #db7a48 , #b33376);
    border-color    :   #8e0052;
}
.share_part  .onl_tiktok-bio {
    background      :   #fae301;
    border-color    :   #ffffff;
    color: #000000;
}
.share_part  .onl_tiktok-bio img{
    margin-top: -10px;
}
.share_part  .onl_tiktok-bio:hover {
    background      :   #fae301;
    border-color    :   #ffffff;
    color: #000000;
}

.fa-instagram {
	font-size	:	33px;
	margin-top	:	-5px;
}

.share_part  .onl_btn-VK{
	background:#6c9dd3;
	border-color:#fff;
}
.share_part  .onl_btn-VK:hover{
	background:#14a1cc;
	border-color:#00c3ff;
	}
.share_part  .onl_btn-VK img{
	width:35px;
	height:35px;
	margin-top: -11px;
	margin-left: -3px;
}
.share_part .col-md-12.col-sm-12 {
    margin-top: 10px;
}
.share_part a:hover{
	color:#fff;
}
.login-page h5{
	font-size:40px;
	color:#fff;
}
.login-page p{
	font-size:30px;
	color:#fff;
}
.last-page h1{
    color:#fff;
    font-size:28px;
}
.last-page p{
	color:#fff;
	font-size:18px;
}
.last-register h1{
	color:#fff;
	font-size:22px;
}
/*for kakao, BBM, VK button on share page*/

.nowrap{
	 white-space: normal;
	 word-wrap:break-word;
	 word-break: break-all;
}

.instruction p{
	color       :   #fff;
	margin      :   0 0 10px 0;
    font-size   :   16px !important;
}

.other-user-stats
{
    margin:0 30px 0 30px;
}

.glyphicon-heart{
	font-size: 20px;
    color: #e4001c;
}

/*for language popup*/
.mymodal .modal-body{
	background:#790000;
	font-size:20px;
	    padding: 15px ;
}

.lang-box{
	margin-bottom:5px;
    padding:10px;
     border:1px solid #fff;
	color:#fff;
	 text-shadow: 1px 1px #000;
	 box-shadow: 1px 1px 1px #000;
}


.lang-box:hover{
	background: #ff0000;

}

.lang-box-new a{
	margin-bottom:5px;
    padding:10px;
     border:1px solid #fff;
	color:#fff;
	 text-shadow: 1px 1px #000;
	 box-shadow: 1px 1px 1px #000;
     display: block;
}


.lang-box-new a:hover{
	background: #ff0000;

}

.close-btn {
    color: #fff;
    background-color: #da0404;
}
.btn:hover, .btn:focus, .btn.focus .close-btn{
    color: #fff;
    text-decoration: none;
	background-color: #a90606;
}
/*for language popup*/

.google_ad{
    margin-bottom: 40px;
    margin-top: 40px;
}
.custom_ad{
    margin-top: 40px;
}
.top_ad{
    margin-top: 40px;
}
.heart-container{
	width:100%;
	position:relative;
}
.heart-container img{
	width:100%;
}
.heart-text{
	color:#fff;
	font-size:30px;
	    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.love-score-link{
    color           :   #fff;
	font-size       :   25px;
    margin-bottom   :   10px;
}

.love-score-link button {
    display         :   block;
	font-size       :   20px;
	padding         :   5px;
    border-radius   :   5px;
    margin          :   auto;
}

.love-score-link button:hover{
    background-color    : #134672;
    border-color        : #134672;
}

.love-score-link a {
    text-decoration :   none;
    display         :   inline-block;
	font-size       :   20px;
	padding         :   5px;
    border-radius   :   5px;
    margin          :   auto;
}

.love-score-link a:hover{
    background-color    : #134672;
    border-color        : #134672;
}
.percentage-line{
	color:#fff;
	font-size:30px;
	margin:10px 0 10px 0;
}
.back-button
{
    background  :#08d13d;
}

.back-button:hover
{
    background      :#057523;
}

.ad_center{
    display     :   inline;
    margin      :   0px 0;

}

@media (min-width: 768px) {


}


@media(max-width:991px){

}

@media(max-width:767px){

}


@media (min-width: 480px) {


}

@media (min-width: 320px) {
    .btn-calcu{
        width:100%;
    }
}



@media(max-width:480px){
    .custom_container{
	width:100%;
}
input[type=text]{
    width:100%;
}
.register-button{
	width:100%;
}
}

@media(max-width:320px){
.last-page img{
	width:80%;
}
.cop_text{
	width:100%;
}
}

@media(max-width:360px){

.last-page img{
	width:80%;
}
.cop_text{
	width:100%;
}
.btn-calcu{
	width:100%;
}

}


.error{
	color       :#fff;
    display     :   none;
    padding     :   5px;
}

#name_post_quiz_div, #loadingDivPostQuiz{
	display: none;
}
.quizSaveLoading,#loadingDivPostQuiz .quizSaveLoading{
	text-align: center;
}

.defaultHide{
	display: none;
}

.register_text1
{
    font-size   :   22px;
}

.love_score_click_here{
    font-size: 20px;
    padding: 5px;
    margin-top: 15px;
    border-radius: 5px;
    display: inline-block;
}

.girl_image
{
    width   :   60%;
}

.calculate-love-form
{
    margin  :   10xp 0 20px 0;
}

.snapchat_ss
{
    width   :   90%;
}

.modal-content
{
    color   : #000;
}






.share_part  .onl_btn-kakao{
	background:#fae301;
	border-color:#908307;
	color:#000;
}
.share_part  .onl_btn-kakao:hover{
	color:#000;
}

.share_part  .onl_btn-kakao img{
	margin-top:-10px;
}


.pages{
    flex: 1;
}
#userStatsImg{
    width: 100%;
}
.facebook-btn:hover {
    color: #fff;
    text-decoration: none;
}
.static_ads{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 10000;
}


.bottom_dfp_ad {
    padding-top: 30px;
    padding-bottom: 15px;
}
.bottom_dfp_ad div div,.top_ad div div{
    margin:auto;
}
.ad_box div {
    margin: auto;
}
#loadingDiv > .quizSaveLoading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#loadingDiv{
   margin-top: 40px;
}
@media(max-width:767px){
    #loadingDiv > .quizSaveLoading{
        position: static;
        transform: none;
        margin-top: 20px;
    }
    #loadingDiv > .quizSaveLoading img{
        width: 200px;
    }
}
.footer{
    padding-bottom:48px;
    margin-top: 50px;
}
.adv-ads-txt{
    font-size: 10px!important;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: 'roboto',sans-serif;
    text-align: center!important;
    opacity: 0.7;
}

/* home page css */
.home .main_area{
    padding-left: 0;
    padding-right: 0;
}
.home-page-image a{
    display: block;
}
.home-page-image a img{
  width:100%;
}
.home .main_area {
    text-align: center;
}
.home .main_area  h1{
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin:0;
}
.home .start-link{
    display: flex;
    justify-content: center;
    align-items: center;
}
.home .start-link a{
    border-radius: 12px;
    background: #790000;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    width:100%;
    text-align: center;
    border:1px solid white;

}
.home .start-link a:hover{
    background: #590303;
}

@media(max-width: 767px) {
  .home .main_area{
      width:80.5%;
      margin:0 auto;
      padding: 23px 0;
    }
    .home .main_area h1{
      font-size: 16px;
      line-height: 19px;
      padding:11px 0 16px;
    }
   .home .start-link a{
      font-size: 14px;
      line-height: 18px;
      padding:13px 10px;
      color:#ffffff;
      max-width:156px;
    }
   }
   @media(min-width: 768px) {
     .home .main_area{
      padding:20px 0;
      margin:20px 0 30px;
  }
    .home .main_area h1{
      font-size: 32px;
      line-height: 38px;
      padding:16px 0;
    }
   .home .start-link a{
      font-size: 24px;
      line-height: 30px;
      padding:18px 10px;
      max-width:229px;
    }
   }


   /**nudge effect **/
.nudge-effect-quiz {
    animation: animate-shake 2s ease-in-out infinite;
}

@keyframes nudge-effect-quiz {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes animate-shake {
    0%,
    10%,
    65%,
    100% {
      transform: rotate(0deg) scale(1.0);
    }

    30%,
    40% {
      transform: rotate(-1deg) scale(1.05);
    }

    35%,
    45% {
      transform: rotate(1deg) scale(1.05);
    }
}


.view_crush{
    border: none;
    background: #790000;
    margin: 10px 0 20px 0;
    padding: 8px 20px;
    width: 100%;
    border-radius: 30px;
    font-size: 20px;
    box-shadow: 0px 5px #fc00521c;
    color: #fff!important;
    transition: 0.8s;
}
.view_crush:hover{
    background: #5a0000;
    color: #fff;
}

/*  */
.reward_confirm_modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 300px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .reward_confirm_modal .reward_modal_dialog {
    margin: auto;
    color: #000;
    padding: 25px;
    background-color: white;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 385px;
    border-radius: 20px;
    height: 170px;
  }

  .reward_modal_dialog > p {
    font-weight: 700;
    font-size: 18px;
  }

  .reward_confirm_modal .closeButton,
  .reward_confirm_modal .rewardButtons {
    display: block;
    text-align: center;
    justify-content: center;
    margin-top: 23px;
  }

  .rewardButtons input[type=button] {
    width: 150px;
  }

  .reward_confirm_modal .closeButton {
    position: absolute;
    right: -10px;
    top: -30px;
    z-index: 9;
  }

  .reward_confirm_modal input[type=button] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    /* margin: 4px; */
    color: white;
  }

  .reward_confirm_modal .rewardButtons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .reward_confirm_modal .rewardButtons .yesButton {
    width: 150px;
  }

  .reward_confirm_modal .yesCheckbox {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .reward_confirm_modal .yesCheckbox input[type=checkbox] {
    margin-top: 0;
  }

  .reward_confirm_modal .yesCheckbox label {
    padding-left: 0px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .reward_confirm_modal .yesButton {
    background: #FF512F;
    display: flex;
    /* padding-left: 10px; */
    align-items: center;
    border-radius: 5px;
    /* display: inline-block; */
    /* margin-top: 17px; */
    /* margin-right: 20px; */
  }

  .reward_confirm_modal .yesButton input[type=button] {
    background: none;
  }

  .reward_confirm_modal .noButton {
    display: inline-block;
    position: relative;
    top: 0px;
  }

  .reward_confirm_modal .noButton input[type=button] {
    border: 1px solid #000000;
    color: #000000;
  }

  .closeButton input[type=button] {
    width: 32px;
    border-radius: 50% !important;
    background: rgb(237, 7, 7) !important;
    font-weight: 800;
  }