@charset "utf-8";
/* CSS Document */
html { font-size:16px; }
body { margin:0; padding:0; }
body,input,select,textarea { font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:12px; font-size:0.75rem; vertical-align:middle; }
.holded { color:#aaa; }
img { border:0; max-width:100%; }
div, ul, ol, li, dl, dt, dd, a, img, form, p, h1, h2, h3, h4, h5, h6, span { margin:0; padding:0; border:0px; }
input,select{ outline: none; }
ul, li { list-style: none; }
/*去除手机端按钮默认样式*/
input { -webkit-appearance: none; outline: none; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

/*去除 select 背景*/
select::-ms-expand { display: none; }
select { border: none; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; }
a:link,a:visited{ color:#32962b; text-decoration: none; }
a:hover{ color:#fff; text-decoration:none;}
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */



/* layout */
#body{
	margin: 0;
padding: 0;
background: url("../images/bg.jpg") top right;
background-color:#073548;
background-position: center 0;
background-repeat: no-repeat;
font-family: Open Sans, sans-serif;
background-size: cover;

}

.content{width: 100%;
display: block;
margin: 80px 0 0 0;
height: calc(100vh - 30px);  }

.content_wrapper {
    max-width: 750px;
    display: block;
    text-align: center;
    margin: 0 auto;}

.content_heading {
    text-align: center;
    font-size: 50px;
    color: #fff;
    font-family: Open Sans, sans-serif;
    margin: 0 0 70px 0;
    text-shadow: 0 0 17px black;
}
.content_wrapper_matches{
    max-width: 500px;
    display: block;
    margin: auto;
}

.content_wrapper_matches .lady_container{
max-width: 500px;
display: block;
position: relative;
min-height: 500px;
}

 .content_wrapper_matches .lady_img {
    display: block;
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: .5s;
    background-position: center top;
}
.content_wrapper_matches .lady-one {
    width: 141px;
    height: 257px;
    background-image: url("../images/g1.jpg");
    background-position: center top;
    z-index: -3;
    top: 25px;

}
.content_wrapper_matches .lady-two {
    width: 200px;
    height: 100px;
    top: -60px;
    left: 0px;
    background-image: url("../images/g2.jpg");
    z-index: -4;
}

.content_wrapper_matches .lady-three {
    width: 200px;
    height: 240px;
    top: -70px;
    left: 154px;
    background-image: url("../images/g3.jpg");
    -webkit-animation: moveImages 1.2s ease 1.2s infinite;
    animation-delay: .4s;
    z-index: -5;
}

.content_wrapper_matches .lady-four {
    width: 135px;
    height: 180px;
    top: -10px;
    left: 340px;
    background-image: url("../images/g4.jpg");
    z-index: -4;
}


.content_wrapper_matches .lady-five {
    width: 210px;
    height: 210px;
    top: 110px;
    left: 140px;
    background-image: url("../images/male_portrait.png");
    -webkit-animation: moveImages 1.2s ease 1.2s infinite;
    animation-delay: .3s;
    z-index: -1;
}

.content_wrapper_matches .lady-six {
    width: 360px;
    height: 155px;
    top: 230px;
    left: -8px;
    background-image: url("../images/g6.jpg");
    -webkit-animation: moveImages 1.2s ease 1.2s infinite;
    animation-delay: .2s;
    z-index: -2;
}

.content_wrapper_matches .lady-seven {
    width: 150px;
    height: 240px;
    top: 170px;
    left: 330px;
    background-position: 0 0;
    background-image: url("../images/g7.jpg");
    -webkit-animation: moveImages 1.2s ease 1.2s infinite;
    animation-delay: .1s;
    z-index: -3;
}

.content_wrapper_matches .lady-eight {
    width: 150px;
    height: 120px;
    top: 420px;
    left: 280px;
    background-image: url("../images/g8.jpg");
    z-index: -4;
}


.content_wrapper_matches .lady-nine {
    width: 288px;
    height: 136px;
    top: 390px;
    left: 30px;
    background-image: url("../images/g9.jpg");
    -webkit-animation: moveImages 1.2s ease 1.2s infinite;
    z-index: -3;
}


a.button,.button, .content_wrapper_button, .content_wrapper_matches .lady_container_button {
    width: 180px;
    height: 180px;
    border: 5px solid #fff;
    background: #009600;
    background-image: -moz-linear-gradient( 90deg, rgb(12,122,1) 0%, rgb(71,201,61) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(12,122,1) 0%, rgb(71,201,61) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(12,122,1) 0%, rgb(71,201,61) 100%);
    border-radius: 50%;
    z-index: 10;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: Open Sans, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: .7s;
}
a.button:hover, .button:hover, .content_wrapper_button:hover, .content_wrapper_matches .lady_container_button:hover{
 color:#fff;  background-image: -moz-linear-gradient( 90deg, rgb(13,140,0) 0%, rgb(71,201,61) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(13,140,0) 0%, rgb(71,201,61) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(13,140,0) 0%, rgb(71,201,61) 100%);
}

.content_wrapper_matches .lady_container_button {
    display: block;
    position: absolute;
    bottom: 0;
    left: 160px;
    font-size: 50px;
    line-height: 175px;
}

.content_wrapper_button {
    position: relative;
    display: inline-block;
    margin: 20px 20px 40px 0;
    font-size: 30px;
    line-height: 180px;
}
.subheading {
text-align: center;
font-size: 30px;
color: #fff;
margin: 100px 0 20px 0;
 }
.yellow {
  font-size: 35px;
  color: #fff300;
  text-transform: uppercase;
  font-weight: 900; 
}

.text {
    font-size: 25px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    margin: 20px 0; 
}

.counter {
        font-size: 40px;
        color: #fff300;
        font-weight: 900;
        text-align: center; 
}

 .content__wrapper_three-answers {
font-size: 15px;
color: #fff;
font-weight: 400;
text-align: center;
margin: 10px 0; }
 .content_wrapper .radio-buttons {
width: 220px;
display: block;
margin: 20px auto 0 auto; }
 .content_wrapper .radio-buttons__wrapper {
  display: block;
  text-align: left;
  margin: 10px 0;
  cursor: pointer; }
   .content_wrapper .radio-buttons__wrapper_label {
    font-size: 25px;
    color: #fff;
    display: inline-block;
    line-height: 25px;
    margin: 0 0 0 5px; }
   .content_wrapper .radio-buttons__wrapper_radio {
    opacity: 0;
    position: absolute; }
     .content_wrapper .radio-buttons__wrapper_radio:checked ~ .checkmark {
      background-color: #31ae27; }
   .content_wrapper .radio-buttons__wrapper_checkmark {
    background-color: transparent;
    position: relative;
    height: 20px;
    width: 20px;
    border: 1px solid #fff;
    border-radius: 5px;
    display: inline-block; }
.header{ height: 40px;line-height: 1; width: 100%;background-color: #073548;display: block;}
.header_logo{ margin-left: 10%;vertical-align:middle;float: left;}
.header_logo img{max-height: 32px;vertical-align: middle;padding-top: 4px; }
.signin{ float: right;margin-right: 10%;color: #eee;font-size: 13px;line-height: 40px;text-align: right;}
.login_go a:link{ color: #fff;text-decoration: underline;}
.login_go a:hover{ color: #ff5e9b;}

.red-button {
  background: #85352a !important; }

.margin-top-partial {
  margin: 100px auto 0 auto !important; }


 .footer {
    width: 100%;
    background-color: #073548;
    position: relative;
    bottom: 0;
    z-index: 20;
    text-align: center;
        display: block;
    margin: auto;
    padding: 10px 0;
    color:#eee;
}
/*************** gen style elements ***********/

.js-pattern {
            position: absolute;
            bottom: 0;
            left: 139px; }

.js-pattern-element {
  background-image: url("../images/heart.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  visibility: hidden;
  -webkit-transition: 1s ease;
  left: 50%;
  top: 50%; }

.small-heart {
  width: 20px;
  height: 20px;
  -webkit-animation: moveSmallHeart 1.5s ease-in-out infinite; }

.middle-heart {
  width: 30px;
  height: 30px;
  -webkit-animation: moveMiddleHeart 2s ease-in-out infinite; }

.large-heart {
  width: 50px;
  height: 50px;
  -webkit-animation: moveLargeHeart 1.8s ease-in-out infinite; }

.visible {
  visibility: visible; }



/* animation */
@-webkit-keyframes bounceCenter{
	0%{-webkit-transform:scale(1)}
	10%{-webkit-transform:scale(1)}
	50%{-webkit-transform:scale(1.2)}
	100%{-webkit-transform:scale(1)}
}
@keyframes bounceCenter{
	0%{transform:scale(1)}
	10%{transform:scale(1)}
	50%{transform:scale(1.2)}
	100%{transform:scale(1)}
}

@keyframes moveImages {
  0% {
   transform: translateY(0); }
  70% {
    transform: translateY(30px);}
  100% {
    transform: translateY(0); } 

  }

/* Responsive */
/********************************** media rules ******************************************/
@media screen and (max-width: 1025px) {
  .body {
    min-height: 100% !important; }
  .footer {
    display: block !important;
    position: relative !important; } }

@media screen and (max-width: 768px) {
  .body {
    min-height: 100% !important; }
  .footer {
    display: block !important;
    position: relative !important; } }

@media screen and (max-width: 500px) {
  .header_logo{margin-left: 10px;}
  .signin{margin-right: 10px;   }
  .signin .login_pop{ background-color: #626262;
    padding: 5px 18px;
    border: none;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    font-size: 12px;
    transition: .7s;
    cursor: pointer;}
    .signin .login_pop a:link{color:#fff;}
  .mhide{display: none;}
   .content {
    width: 100%;
    display: block;
    margin: 50px 0 0 0;
    height: 100vh; }
    .body .content_wrapper {
      max-width: 750px;
      display: block;
      text-align: center;
      margin: 0 auto; }
     .body .subheading {
        font-size: 4vh;
        margin: 4vh 2vh; }
         .yellow {
          font-size: 4vh;
          color: #fff300;
          text-transform: uppercase;
          font-weight: 900; }
      .body .counter {
        font-size: 4vh;
        margin: 0 2vh; }
     .body  .text {
        font-size: 2.5vh;
        margin: 4vh 2vh; }
      .body .content__wrapper_three-answers {
        font-size: 15px;
        color: #fff;
        font-weight: 400;
        text-align: center;
        margin: 10px 0; }
      .body .content_wrapper .radio-buttons {
        width: 220px;
        display: block;
        margin: 20px auto 0 auto; }
        .body .content_wrapper .radio-buttons__wrapper {
          display: block;
          text-align: left;
          margin: 10px 0;
          cursor: pointer; }
          .body .content_wrapper .radio-buttons__wrapper_label {
            font-size: 25x;
            color: #fff;
            display: inline-block;
            line-height: 25px;
            margin: 0 0 0 5px; }
          .body .content_wrapper .radio-buttons__wrapper_radio {
            opacity: 0;
            position: absolute; }
            .body .content_wrapper .radio-buttons__wrapper_radio:checked ~ .checkmark {
              background-color: #31ae27; }
          .body .content_wrapper .radio-buttons__wrapper_checkmark {
            background-color: transparent;
            position: relative;
            height: 20px;
            width: 20px;
            border: 1px solid #fff;
            border-radius: 5px;
            display: inline-block; }
      .body .content_wrapper_button {
            box-sizing: border-box;
        width: 20vh;
        height: 20vh;
        font-size: 3vh;
        display: inline-block;
        line-height: 20vh; 
        margin:30px 10px;}
      .body .content_heading {
        text-align: center;
        font-size: 4vh;
        color: #fff;
        font-family: Open Sans, sans-serif;
        margin: 0 0 105px 0;
        text-shadow: 0 0 17px black; }
       .body .content_wrapper_matches {
        max-width: 500px;
        display: block;
        margin: auto; }
         .body .content_wrapper_matches .lady_container {
          max-width: 500px;
          display: block;
          position: relative;
          min-height: 500px; }
        .body .content_wrapper_matches .lady-one {
            width: 36%;
            height: 35%;
            left: 4%;
            background-position: top; }
         .body .content_wrapper_matches .lady-two {
            width: 48%;
            height: 20%;
            top: -17%;
            left: 7%; }
        .body  .content_wrapper_matches .lady-three {
            width: 45%;
            height: 33%;
            top: -16%;
            left: 37%; }
         .body .content_wrapper_matches .lady-four {
            width: 25%;
            height: 29%;
            top: 5%;
            left: 72%; }
         .body .content_wrapper_matches .lady-five {
            width: 40%;
            height: 32%;
            top: 8%;
            left: 33%; }
         .body .content_wrapper_matches .lady-six {
            width: 58%;
            height: 21%;
            top: 24%;
            left: 8%; }
         .body .content_wrapper_matches .lady-seven {
            width: 24%;
            height: 30%;
            top: 18%;
            left: 69%;
            background-position: top; }
        .body .content_wrapper_matches .lady-eight {
            width: 33%;
            height: 20%;
            top: 51%;
            left: 61%; }
        .body  .content_wrapper_matches .lady-nine {
            width: 50%;
            height: 21%;
            top: 45%;
            left: 10%; }

         .body .content_wrapper_matches .lady_container_button {
            width: 20vh;
            height: 20vh;
            font-size: 4vh;
            display: block;
            position: absolute;
            bottom: 38%;
            left: calc(50% - 10vh);
            line-height: 20vh; }

   .footer {
    width: 100%;
    background-color:#073548;
    position: relative;
    bottom: 0;
    z-index: 20; }

  .margin-top-partial {
    margin: 0 !important; }
  .mobile-no-margin {
    margin: 0 !important; }
  /***************** reg form styling **********************/
  .vb-overlay .form-container {
    border: none !important; }
  .vb-overlay .content_land {
    width: 95% !important; }
  .vb-overlay .form-header {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    padding: 12px 0 7px 0 !important; } }

@media (max-height: 450px) {
   .content {
    height: 250vh !important; } }
@media (max-width:350px) {

  .header_logo img{    max-height: 24px;padding-top: 6px;}
  .body .content_wrapper_button{     box-sizing: inherit;    font-size: 3vh; }
  .content{ margin: 20px 0 0 0;}
  .body .content_heading{    font-size: 4vh; }
  a.button, .button, .content_wrapper_button, .content_wrapper_matches .lady_container_button{border: 3px solid #fff;  }

}
@media (min-width:650px) and (max-width:820px) and (orientation:landscape){

}