body {
      font: 14px Tahoma, Verdana, sans-serif;
      background: url('../../../img/landing/86/bg2.jpg') center center;
      height: 100%;

      }
      .gray-bg img {
        height: 64px;
      }


      .signUpContent {
      background-color: white;
      color: black;
      height: 630px;
      max-width: 450px;
      overflow: hidden;
      -webkit-box-shadow: 0 10px 22px 0 rgba(0,0,0,0.75);
      -moz-box-shadow: 0 10px 22px 0 rgba(0,0,0,0.75);
      -o-box-shadow: 0 10px 22px 0 rgba(0,0,0,0.75);
      -ms-box-shadow: 0 10px 22px 0 rgba(0,0,0,0.75);
      box-shadow: 0 10px 22px 0 rgba(0,0,0,0.75);
      z-index: 999;
      margin: 0 auto;
      border: 10px solid #ccc;
      }



      .step {
      height: 610px;
      text-align: center;
      font-size: 14px;
      padding-right: 0;
      padding-left: 0;
      }

      .steps {
      margin: 20px auto;
      }

      label {
      cursor: pointer;
      }
      .step_bar{
      border-radius: 50%;
      border: 2px solid #fff;
      width: 30px;
      height: 30px;
      text-align: center;
      }

      .active {
        background-color: #7a7a7a;
      }

      .display-inbl {
      display: inline-block;

      }

      .font-size-10 {
      font-size: 10px;
      }

      .float-left {
      float:left;
      }

      .gender {
      text-align:center;
      display: block;
      padding:10px;
      padding-right: 50px;
      padding-bottom: 0px;
      }


      .next_btn{
      min-width:200px;
      margin-top: 10px;
      min-height: 47px;
      font-weight: bold;
      }

      .submit_btn {
      min-width:200px;
      min-height: 47px;
      }

      .font-size-40 {
      font-size: 25px;
      font-weight: bold;
      line-height: 60px;
      }
      .drop_down_container {
        margin-bottom: 35px;
      }

      .dobday, .dobday, .dobyear{
          padding: 6px;
      border-radius: 5px;
      font-size: 30px;
      margin-top: 15px;
      margin-bottom: 15px;
      -webkit-appearance : none; /* To gain control over the appearance on WebKit */
      -moz-appearance : none; /* To gain control over the appearance on Gecko */
      appearance: none;
      }

      #username, #email, #rf_city, #password {
      max-width: 220px;
      border-radius: 5px;
      font-size: 24px;
      margin-top: 45px;
      margin-bottom: 30px;
      padding: 6px;
      }

      #username{
      margin-bottom: 20px;
      }

      #password {
      margin-top: 15px;
      margin-bottom: 25px;
      }

      .margin-top-20 {
        margin-top: 20px;
      }
      .step {
        background-color: white;
      }


      .display-inbl {
        float:right;
      }

      .gray-bg {
        background-color: #515151;
        padding: 10px;
      }

      .man {
        position: relative;
      }

      .greensign {
        position: absolute;
        left:10px;
        top:-5px;
        display: none;
       }
         #gender_m_greensign, #looking_for_gender_f_greensign{
             display:inline;
         }
         .fr-tooltip{
             color:#ff0722;
         }
       .margin-lr-15 {
         margin-right: 15px;
         margin-left: 15px;
       }

       .login {
        margin-right: 50px;
        margin-top:50px;

       }

       .login a {
        color: white;
       }

       .footer {
         text-align: center;
         color: white;
         margin-top: 100px;
       }

#footerseo{
    margin-top: 4%;
    background-color: rgba(00, 00, 00, 0.5);
    padding: 1%;
	color: #fff;
}

#footerseo h3{
    font-size:22px;
}

       .footer a {
         color: white;
       }

       .padding-lr-3 {
        padding-left: 3px;
        padding-right: 3px;
       }



      * {
        box-sizing: border-box;
       }

       a {
        cursor: pointer;
        text-decoration: none;
        color: #ccc;
      }

      a:hover {
          color: #fff;
      }

      ul {
          list-style: none
      }

      .clearfix:before,
      .clearfix:after {
          content: " ";
          display: table;
      }

      .clearfix:after {
          clear: both;
      }

      .clearfix {
          *zoom: 1;
      }

      /* Main */


      .container1 {
          text-align: center;
          max-width: 450px;
          background-color: transparent;
          margin: 0 auto;

      }

      .in-bl {
        display: inline-block;
        color: white;
       }

       .radioBtnForMW {
        display: none;
       }
     #step1 .fr-tooltip {
       max-width:250px;
     }



#social {
    text-align: center;
    position: absolute;
    bottom: 14%;
    width: 100%;
}
#social p{
  margin-bottom: 10px;
}

#social ul,
#social li {
    display: inline-block;
}

/* Skeleton */

ul.flip {
    position: relative;
    float: right;
    margin: 5px;
    width: 50px;
    height: 75px;
    font-size: 70px;
    font-weight: bold;
    line-height: 72px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
    display: inline-block;
}

ul.flip li {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;

}

ul.flip li:first-child {
    z-index: 2;
}

ul.flip li a {
    display: block;
    height: 100%;
    perspective: 200px;

}

ul.flip li a div {
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

ul.flip li a div .shadow {
    position: absolute;

    width: 100%;
    height: 100%;
    z-index: 2;
}

ul.flip li a div.up {
    transform-origin: 50% 100%;
    top: 0;
    }

ul.flip li a div.up:after {
  content: "";
  position:absolute;
  top:44px;
  left:0;
  z-index: 5;
    width: 100%;
  height: 3px;
  background-color: rgba(0,0,0,.4);
}

ul.flip li a div.down {
    transform-origin: 50% 0%;
    bottom: 0;
}

ul.flip li a div div.inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #ccc;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    background-color: #333;
    border-radius: 6px;
}

ul.flip li a div.up div.inn {
    top: 0;

}

ul.flip li a div.down div.inn {
    bottom: 0;
}

/* PLAY */

body.play ul li.before {
    z-index: 3;
}

body.play ul li.active {
    animation: asd .5s .5s linear both;
    z-index: 2;
}


@media only screen and (max-width: 480px) {

  .signUpContent{
    margin-right: 5px;
    margin-left:5px;

  }

  .footer {
    margin-top: 10px;
  }
  .gender {
    margin:10px auto;
    margin-top: 1px;
  }
  #step1 .next_btn {
    margin-top:0px;
  }
  hr {
    margin-top:10px;
    margin-bottom:10px;
  }
}





@keyframes asd {
    0% {
        z-index: 2;
    }
    5% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}

body.play ul li.active .down {
    z-index: 2;
    animation: turn .5s .5s linear both;
}

@keyframes turn {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

body.play ul li.before .up {
    z-index: 2;
    animation: turn2 .5s linear both;
}

@keyframes turn2 {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

/* SHADOW */

body.play ul li.before .up .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: show .5s linear both;
}

body.play ul li.active .up .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    animation: hide .5s .3s linear both;
}

/*DOWN*/

body.play ul li.before .down .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    animation: show .5s linear both;
}

body.play ul li.active .down .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    animation: hide .5s .3s linear both;
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


@media (min-width: 400px) and (max-width: 480px){
   .gender {
    margin:2px auto;
     padding-right: 20px;
  }

}
@media (min-width: 480px) and (max-width: 767px){
   .login {
    margin-top:20px;
     margin-right:10px;
  }
   .signUpContent{
    margin-top:10px;
    }

}




@media only screen and (max-width: 400px) {
    .gray-bg {
    padding: 0px;
    }
    .gray-bg img {
      width: 300px;
      height: 60px;
    }

    .font-size-40 {
    font-size: 15px;
    font-weight: bold;
    }
    .small-img {
    width:55px;
    height: 45px;
    }
    .font-size-10 {
    font-size: 9px;
    }
     .signUpContent{
    height:555px;
    margin-top:10px;
    }
    .step {
    height:540px;
    }
    .dobday, .dobday, .dobyear{
    font-size: 20px;
    }

    #username, #email, #rf_city {
    font-size: 20px;
    margin-top: 35px;
    margin-bottom: 35px;
    }
    .gender {
      padding-right: 30px;
    }

    #password {
    font-size: 20px;
    margin-bottom: 20px;
    }

    .fr-tooltip {
      font-size: 11px;
      margin: 0px;
    }
    .drop_down_container {
      margin-bottom: 30px;
    }
     #step1 .fr-tooltip {
       max-width:180px;
     }

  }



@media only screen and (max-width: 370px) {
    .gray-bg {
    padding: 0px;
    }
    .login-container {
     height:20px;
    }
    .login {
      margin-top: 5px;
    }
    .gray-bg img {
      width: 250px;
      height: 50px;
    }
    .font-size-40 {
    font-size: 14px;
    font-weight: bold;
    }
    .gender {
      padding-right: 15px;
      padding-bottom: 1px;
    }

    .small-img {
    width:50px;
     height: 40px;
    }
    .font-size-10 {
    font-size: 9px;
    }

    .man img {
      height:75px;
    }
    .greensign {
      left:5px;
    }
    .greensign img {
      height:30px;
      width:30px;
    }
    .signUpContent{
      height:550px;
      margin-top:10px;
    }
    .step {
       height:535px;
    }

    #username, #email, #password {
    margin-top: 20px;
    margin-bottom: 15px;
    }

    .drop_down_container {
      margin-bottom: 10px;
    }
     #step1 .fr-tooltip {
       max-width:180px;
     }
    }

    .ps-relative {
      position: relative;
    }

    .fr-tooltip {
      opacity: 0;
    }


/* modal for mobile  */
@media (max-width:500px) {

    .modal-body {
        max-height: 20vh;
        overflow: scroll;
        font-size: 13px !important;
    }

    .modal-footer .pull-left {
        float: unset !important;
        width: 100% !important;
        display: block !important;
        padding: 8px 0 !important;
    }

    .modal-footer .btn-danger {
        /* float: unset !important; */
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        padding: 8px 0 !important;
    }
}
.twitter-typeahead {
  width: 100%;
}

.tt-menu {
  background: white;
  width: 100%;
  text-align: center;
}

@media (max-width: 700px) {
  .m-b--20 {
      margin-bottom: -20px;
  }
}

.tt-hint {
  display: none;
}

.error {
color: red;
opacity: 0;
}
.error-tac {
opacity: 0;
color: red !important;
margin-top: 2px;
/* margin-bottom: -10px !important; */
}

.custom-control-label{
  display: contents;
}

.custom-checkbox {
    padding: 0 10px;
}