﻿@charset "utf-8";

@font-face {
  font-family: "DancingScript-Regular";
  src: url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.eot"); /* IE9 Compat Modes */
  src: url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.otf") format("opentype"), /* Open Type Font */
    url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.svg") format("svg"), /* Legacy iOS */
    url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.woff") format("woff"), /* Modern Browsers */
    url("/infographics/love-match-calculator/fonts/DancingScript-VariableFontwght.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cabin-Regular";
  src: url("/infographics/love-match-calculator/fonts/Cabin-Regular.eot"); /* IE9 Compat Modes */
  src: url("/infographics/love-match-calculator/fonts/Cabin-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/infographics/love-match-calculator/fonts/Cabin-Regular.otf") format("opentype"), /* Open Type Font */
    url("/infographics/love-match-calculator/fonts/Cabin-Regular.svg") format("svg"), /* Legacy iOS */
    url("/infographics/love-match-calculator/fonts/Cabin-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/infographics/love-match-calculator/fonts/Cabin-Regular.woff") format("woff"), /* Modern Browsers */
    url("/infographics/love-match-calculator/fonts/Cabin-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cabin-SemiBold";
  src: url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.eot"); /* IE9 Compat Modes */
  src: url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.otf") format("opentype"), /* Open Type Font */
    url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.svg") format("svg"), /* Legacy iOS */
    url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.woff") format("woff"), /* Modern Browsers */
    url("/infographics/love-match-calculator/fonts/Cabin-SemiBold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: "Cabin-Bold";
    src: url("/infographics/love-match-calculator/fonts/Cabin-Bold.eot"); /* IE9 Compat Modes */
    src: url("/infographics/love-match-calculator/fonts/Cabin-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/infographics/love-match-calculator/fonts/Cabin-Bold.otf") format("opentype"), /* Open Type Font */
    url("/infographics/love-match-calculator/fonts/Cabin-Bold.svg") format("svg"), /* Legacy iOS */
    url("/infographics/love-match-calculator/fonts/Cabin-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/infographics/love-match-calculator/fonts/Cabin-Bold.woff") format("woff"), /* Modern Browsers */
    url("/infographics/love-match-calculator/fonts/Cabin-Bold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

.ig-wrapper *{margin:0; padding: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.ig-wrapper {
    background: #fef5e8;
    font-family: "Cabin-Regular";
    margin: 0px;
    padding: 0px;
    color: #6A6A6A;
    font-size: 15px;
    line-height: 26px;
    font-weight: normal;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 800px;
    /* overflow-x: hidden; */
}
    .ig-wrapper ul, .ig-wrapper ol {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
.ig-wrapper a {
    text-decoration: none;
    color: #196666;
}
    .ig-wrapper a:hover, .ig-wrapper a:focus {
        text-decoration: none;
        outline: none;
    }
    .ig-wrapper img:focus, .ig-wrapper input:focus, .ig-wrapper textarea:focus, .ig-wrapper button:focus {
        outline: none;
    }
    .ig-wrapper .form-control:focus {
        box-shadow: none;
    }
    .ig-wrapper p {
        color: #6A6A6A;
        font-size: 15px;
        line-height: 173%;
        font-weight: 400;
    }
    .ig-wrapper h1, .ig-wrapper h2, .ig-wrapper h3, .ig-wrapper h4, .ig-wrapper h5, .ig-wrapper h6 {
        margin-top: 0;
        font-weight: 400;
    }

.page-wrapper{/* overflow: hidden; */ background: url(/infographics/love-match-calculator/images/bg-flower.svg) no-repeat top -85px center; background-size: 1350px; padding: 25px 0;   height: 100vh;}

.love-match-calculator {
   margin: 0;
}

.phychic-container {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    width: auto;
    font-family: "Cabin-Regular";
}

.logo-div {  max-width: 312px;   margin: 0 auto 20px; }
.logo-div img{max-width: 100%;}
.phychic-title { text-align: center; font-family: "DancingScript-Regular";   color: #4c1c1c;    font-size: 76px;    line-height: 1;  margin: 0 0 25px;}
.phychic-content{ max-width: 960px;  text-align: center; margin: 0 auto; }
.phychic-content p{ font-size: 19px; line-height: 28px; color: #000;   margin: 0 0 20px;}

.heart-bgdiv{max-width: 620px; position: absolute; /* bottom: -10px; */ left: 0; right: 0; margin: 0 auto;}
#love-calculator-slider{ background: url(/infographics/love-match-calculator/images/hertl-img.svg) no-repeat center; background-size: 585px; height: 515px; padding-top: 125px;}
.calculator-quetilte{font-size: 30px; max-width: 530px; margin: 0 auto 20px; text-align: center; font-family: "Cabin-Bold"; color: #fff; line-height: 1.3;}
.phychic-result-div{display: none;}
.short-msgtxt{color: #c04547; max-width: 760px; font-size: 28px; line-height: 1.4; text-align: center; font-family: "Cabin-Bold"; margin: 0 auto 20px;}
.phychic-result-div .phychic-content{max-width: 760px;}
.phychic-result-div .phychic-content p{font-size: 21px; line-height: 32px; margin-bottom: 0;}
.phychic-result-div .phychic-content p strong{font-family: "Cabin-Bold";}
.phychic-noticelabel{background: #fff; border: 2px solid #c04547; max-width: 1120px; padding: 15px 30px; margin: 0 auto; border-radius: 100px; font-size: 20px; line-height: 1.5; color: #4c1c1c; text-align: center; }
.phychic-noticelabel strong{font-family: "Cabin-Bold";}

.calc-quebox input[type="radio"], .calc-quebox input[type="checkbox"]{position: absolute; top: 0; left: 0; height: 100%; width: 100%;  cursor: pointer; opacity: 0; visibility: hidden;}
.calc-quebox{max-width: 600px; margin: 0 auto 10px; position: relative;}
.calc-quebox .calcque-label{max-width: 100%; display: block; padding: 10px 15px; margin: 0; font-size: 18px; line-height: 24px; color: #000; background: #fff; border-radius: 40px; text-align: center; cursor: pointer;}
.calc-quebox label span{color: #c04547;}
.calc-quebox .calcque-label:hover{background: #302E2B; color: #fff;}
.calc-quebox .calcque-label:hover span{ color: #fff;}
.calc-quebox input[type="radio"]:checked~.calcque-label, .calc-quebox input[type="checkbox"]:checked~.calcque-label{background: #302E2B; color: #fff;}
.calc-quebox input[type="radio"]:checked~.calcque-label span, .calc-quebox input[type="checkbox"]:checked~.calcque-label span{color: #fff;}

.owl-nav { display: none;}
.owl-dots {  margin: 25px 0 0 0;}
.owl-theme .owl-dots .owl-dot span { height: 14px; width: 14px; margin: 5px;background: #fff;   opacity: 0.3;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {    background: #fff;  opacity: 1;}
.owl-theme .owl-dots .owl-dot:disabled span { background: transparent !important; opacity: 1; border: 1px solid #fff;}
.owl-theme .owl-dots .owl-dot:disabled:hover span {  background: transparent !important;  opacity: 1; border: 1px solid #fff;}
.ui-datepicker .ui-datepicker-buttonpane{display: none !important;}

#date1{border: 1px solid #fff; height: 60px; font-size: 20px; color: #fff; padding: 0 20px; background: url(/infographics/love-match-calculator/images/calender-icon.svg) no-repeat right 15px center transparent; max-width: 100%; width: 100%; background-size: 40px;}
#date1::-webkit-input-placeholder {  color: #fff;}
#date1::-moz-placeholder {  color: #fff;}
#date1:-ms-input-placeholder {  color: #fff;}
#date1:-moz-placeholder { color: #fff;}
.mmddyyyy{font-size: 20px; margin-bottom: 20px; color: #fff !important; text-align: center; line-height: 1.2;}
.dateinput-fildiv{position: relative; max-width: 370px; margin: 30px auto 20px; }
.dateinput-fildiv:after{position: absolute; height: 100%; width: 1px; background: #fff; content: ""; right: 70px; top: 0;}
.fire-icon{max-width: 154px; margin: 0 auto 25px; display: block;}
.vector-gricon{max-width: 280px; margin: 20px auto 10px; display: block;}
.start_again_div{text-align:center;color:#c04547; margin-bottom:5px;}
.start_again_div a{color:#c04547;}

.learnmore, .learnmore2 {
    color: #c04547;
    font-family: "Cabin-Regular";
    font-weight: bold;
    margin: 0 auto 20px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    /* text-transform: uppercase; */
    line-height: 24px;
}

.panellearnmore {
    margin-top: 20px;
    padding: 10px 20px;
    text-align: left;
    border: #c04547 solid 1px;
    max-width: 430px;
    font-family: "Cabin-Regular";
    margin: 0 auto;
    display: block;
    background-color: white;
    font-size: 15px;
    line-height: 22px;

}

    .panellearnmore h2 {
        text-align: center;
        font-family: "Cabin-Regular";
        line-height: 30px;
        font-size: 22px;
    }

.extra-info{margin-bottom:20px;}

@media (max-width: 1680px) {
    .page-wrapper{padding: 15px 0;}
  .logo-div {    margin: 0 auto 15px;}
  .phychic-title {  font-size: 66px;  margin: 0 0 20px;}
  .phychic-content {  max-width: 900px;}
  .phychic-content p { font-size: 16px;  line-height: 24px;}
  #love-calculator-slider {   background-size: 490px;  height: 435px;   padding-top: 95px;}
  .calculator-quetilte {  font-size: 26px;  max-width: 460px;}
  .calc-quebox .calcque-label{font-size: 16px; line-height: 22px;}
  .calc-quebox{max-width: 560px;}
  .fire-icon {  max-width: 140px;  margin: 0 auto 20px;}
  .phychic-result-div .phychic-content p {  font-size: 18px;   line-height: 28px;}
  .short-msgtxt {  max-width: 710px;  font-size: 24px;  line-height: 1.3;}
  .phychic-noticelabel {  max-width: 1020px;  padding: 12px 30px;  font-size: 18px;  line-height: 1.4;}
  .vector-gricon {  margin: 22px auto;} 
  .owl-dots {  margin: 15px 0 0 0;}  
  .owl-theme .owl-dots .owl-dot span {  height: 10px; width: 10px;  margin: 4px;}
  .page-wrapper{    background: url(/infographics/love-match-calculator/images/bg-flower.svg) no-repeat top -70px center; background-size: 1100px; }
}
@media (max-width: 1366px) {
  .logo-div {  max-width: 300px; margin: 0 auto 12px;}
  .phychic-title {  font-size: 56px;  margin: 0 0 15px;}
  #love-calculator-slider {  background-size: 380px;  height: 335px;  padding-top: 80px;}
  .calc-quebox .calcque-label { padding: 6px 15px; font-size: 14px;  line-height: 20px;}
  .calculator-quetilte {  font-size: 20px;  max-width: 360px;     margin: 0 auto 14px;}
  .calc-quebox {  max-width: 480px;  margin: 0 auto 6px;}
  #date1{height: 46px; padding: 0 15px; font-size: 18px;  background: url(/infographics/love-match-calculator/images/calender-icon.svg) no-repeat right 12px center transparent; background-size: 32px;}
  .dateinput-fildiv:after{right: 58px; }
  .dateinput-fildiv{max-width: 250px;}
  .mmddyyyy {  font-size: 16px;  margin-bottom: 15px;}
  .owl-theme .owl-dots .owl-dot span {  height: 8px;  width: 8px;  margin: 3px;}
  .owl-dots {  margin: 10px 0 0 0;}
  .page-wrapper{    background: url(/infographics/love-match-calculator/images/bg-flower.svg) no-repeat top -60px center; background-size: 980px; }
  .fire-icon {   max-width: 110px;  margin: 0 auto 15px;}
  .short-msgtxt { margin: 0 auto 15px;  max-width: 600px;   font-size: 22px;    line-height: 1.3;}
  .phychic-result-div .phychic-content p {  font-size: 16px;  line-height: 24px;}
  .phychic-result-div .phychic-content {  max-width: 810px;}
  .vector-gricon {   margin: 15px auto 5px;    max-width: 250px;}
  .phychic-noticelabel {   max-width: 900px;   padding: 10px 30px;   font-size: 16px;    line-height: 1.4;}
}
@media (max-width: 1024px){
  .page-wrapper {   padding: 40px 0; height: auto;}
  .logo-div {   max-width: 260px;   margin: 0 auto 30px;}
  .phychic-title {  font-size: 68px; line-height: 1.1; margin: 0 0 30px;   padding: 0 20px;}
  .phychic-content {  max-width: 100%; padding: 0 20px;}
  .phychic-content p {  font-size: 20px;   line-height: 32px;}
  .heart-bgdiv{position: relative; bottom: 0;}
  #love-calculator-slider {   background-size: 490px;  height: 435px;   padding-top: 95px;}
  .calculator-quetilte {  font-size: 26px;  max-width: 460px;}
  .calc-quebox .calcque-label{font-size: 16px; line-height: 22px; padding: 10px 15px;}
  .calc-quebox{max-width: 560px;}
  .owl-dots {  margin: 15px 0 0 0;}  
  .owl-theme .owl-dots .owl-dot span {  height: 10px; width: 10px;  margin: 4px;}
  .page-wrapper { overflow-x: hidden; overflow-y: auto; background: url(/infographics/love-match-calculator/images/bg-flower.svg) no-repeat top -30px center;   background-size: 980px;}
  .fire-icon {  max-width: 140px;  margin: 0 auto 30px;}
  .short-msgtxt {  margin: 0 auto 25px;  max-width: 760px;  font-size: 30px;  line-height: 1.4;}
  .phychic-result-div .phychic-content p {  font-size: 20px;  line-height: 30px;}
  .vector-gricon {  margin: 40px auto;  max-width: 280px;}
  .phychic-noticelabel {  max-width: 95%;  padding: 12px 30px;  font-size: 18px;   line-height: 1.4;}
  .phychic-result-div .phychic-content {  max-width: 880px;}
}
@media (max-width: 992px){
  .page-wrapper {  background: url(/infographics/love-match-calculator/images/bg-flower.svg) no-repeat top center;   background-size: 730px;}
  .phychic-title {  font-size: 60px; line-height: 1.2; margin: 0 0 30px; }
}
@media (max-width: 767px){
    .phychic-title{font-size: 50px; padding: 0 15px;}
    .phychic-content {  padding: 0 15px;}
    #love-calculator-slider {  background-size: 380px;  height: 335px;  padding-top: 80px;}
  .calc-quebox .calcque-label { padding: 6px 15px; font-size: 14px;  line-height: 20px;}
  .calculator-quetilte {  font-size: 20px;  max-width: 360px;     margin: 0 auto 14px;}
  .calc-quebox {  max-width: 480px;  margin: 0 auto 6px;}
  .phychic-noticelabel {  padding: 20px 40px;   border-radius: 50px;  font-size: 18px;  line-height: 1.4;}
  .phychic-result-div .phychic-content p {   font-size: 18px;   line-height: 28px;}
  .phychic-content p {  font-size: 18px;  line-height: 30px;}
  .short-msgtxt {  font-size: 28px;  line-height: 1.3;}
}
@media (max-width: 480px){
  .page-wrapper {    background-size: 600px;}
  .logo-div {  max-width: 220px;   margin: 0 auto 25px;}
  .page-wrapper {  padding: 30px 0;}
  .phychic-title {  font-size: 38px; margin: 0 0 25px; padding: 0 10px;}
  .phychic-content {  padding: 0 10px;}
    .phychic-result-div .phychic-content p {   font-size: 16px;   line-height: 26px;}
    .short-msgtxt {  font-size: 24px;  line-height: 1.3;     margin: 0 auto 20px;}
    .phychic-content p {   font-size: 16px;   line-height: 26px;}
    .fire-icon {    max-width: 110px;    margin: 0 auto 20px;}
    .phychic-noticelabel{font-size: 16px;     border-radius: 50px;  padding: 20px;}
    #love-calculator-slider {  background-size: 340px;   height: 300px;   padding-top: 75px;}
    #date1 {  height: 40px;   padding: 0 12px;    font-size: 16px;    background: url(/infographics/love-match-calculator/images/calender-icon.svg) no-repeat right 8px center transparent;    background-size: 24px;}
    .dateinput-fildiv {   max-width: 210px;     margin: 25px auto 15px;}
    .dateinput-fildiv:after {  right: 42px;}
    .mmddyyyy {  font-size: 14px;}
    .calculator-quetilte { font-size: 18px;  max-width: 320px;}
    .calc-quebox .calcque-label{line-height: 18px;}
    .vector-gricon {   margin: 35px auto;   max-width: 260px;}   
}
@media (max-width: 360px){
  .page-wrapper {    background-size: 520px;}
    .logo-div {  max-width: 220px;   margin: 0 auto 20px;}
    .phychic-title {  font-size: 32px;  margin: 0 0 20px; padding: 0px;}
    .phychic-content{padding: 0;}
    .phychic-content p {  font-size: 15px;  line-height: 24px;}
    #love-calculator-slider {  background-size: 305px;  height: 270px;   padding-top: 65px;}
    .calculator-quetilte {  font-size: 18px;   max-width: 285px;}
    .short-msgtxt {  font-size: 20px;   line-height: 1.3;  margin: 0 auto 15px;}
    .phychic-result-div .phychic-content p {   font-size: 14px;   line-height: 24px;}
    .phychic-noticelabel {  font-size: 14px;  border-radius: 40px;   padding: 20px;}
    .fire-icon {  max-width: 100px;   margin: 0 auto 20px;}
    .vector-gricon {  margin: 30px auto;  max-width: 220px;}
}