.row {
        margin-right: 0;
        margin-left: 0;
        }

        .header {
        height: 70px;
        }

        .footer {
        margin-top: 10px;
        }

        .gay-background {
        background-image: url("../../../img/landing/41/banner-adult.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 700px;
        position: relative;
           }
           @media (max-width: 767px){
             .gay-background{
               background-image: url("../../../img/landing/182/0001.jpg");
             }
           }

        .grey-background {
        background-color: #363839;
        color: white;
        }

        .footer a {
        color: white;
        }

        .boxs-items {
        list-style: none;
        display: inline;
        padding-top: 30px;

        }

        .boxs-items-img {
        width: 100%;
        }

        .boxs-items h4 {
          margin-top: 15px
        }

        .user-pr {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        max-width: 140px;
        min-width: 140px;
        max-height: 140px;
        min-height: 140px;
        position: relative;
        }

        .user-pr p {
        line-height: 8px;
        font-family: Arial;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        bottom: 1px;
        left: 10px;
        z-index:100;
        color:black;
        margin: 0 auto;
        }

        .user-pr img {
        border: 2px solid #ccc;
        width: 95%;
        max-height: 120px;
        }

        .user-pr img:hover {
        -ms-transform: rotate(10deg); /* IE 9 */
        -moz-transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
        width: 105%;
        max-height: 130px /* Standard syntax */
        }

        .user-pr img:hover ~ .user-pr {
        background-color: rgb(117, 117, 117);
        }

        .box-slider, .box {
        -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);
        -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);
        box-shadow: 0 10px 22px 0 rgba(0,0,0,0.75);
        margin-top: 20px;
        margin-bottom: 20px;
        }

        .box-slide {
        margin: 10px;
        }

        .box {
        max-width: 31%;
        margin: 1%;
        padding: 20px;
        }


       @media only screen and (max-width: 767px){
        .box {
        max-width: 96%;}
        .gay-background {
        height: 720px;
        }
        .boxs-items span {
        font-size: 11px;
        }
        }


        .signUpContent {
        background-color: rgba(160, 120, 155, 0.8);
        color: rgb(6, 56, 81);
        height: 400px;
        max-width: 500px;
        overflow: hidden;
        margin-top: 50px;
        -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;
         }



        .step {
        height: 400px;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        }

        .step h2  {
        font-weight: bold;
        }

        .white {
        /* font-size: 55px; */
        font-size: 32px;
        font-weight: bold;
        color: white;
        }

        .box-header {
        background-color: #5C5C7C;
        color: white;
        padding: 5px;
        text-align:center;
        margin-bottom: 5px;
        }

        .border-radius-5 {
        border-radius: 5px;
        }

        .box-info {
        width: 100%;
        background-color:#363839;
        color: white;
        margin-bottom: 10px;
        margin-top: 10px;
        padding:7px;
        }

        .box-info img {
        width:100px;
        height: 80px;
        float:left;
        }


        .li-btn-sm {
        list-style-type: none;
        display: inline-block;
        }

        .li-btn-sm button {
        width: 10px;
        height: 10px;
        border: none;
        border-radius: 50%;
        padding: 0px;
        }

        .ul-btn-sm {
        position: absolute;
        bottom: 5px;
        left:45%;
        }

        .btn-pr, .btn-nx {
        position: absolute;
        top:40%;
        border: none;
        background-color: white;
        width: 50px;
        height: 50px;
        font-size: 40px;
        }

        .btn-pr {
        left: 10%
        }

        .btn-nx {
        right: 10%;
        }

        .text-align {
        text-align: center;
        }

        .fixed-bottom {
        position: absolute;
        bottom: 0px;
        height: 90px;
        width: 100%;
        background-color: rgba(200, 200, 200, 0.8);
        font-family: Arial;
        font-size: 20px;
        }

        .fixed-bottom img{
        height: 70px;
        margin: 10px;
        }

        .btn-login {
        margin-top: 10px;
        }

        .btn-login a {
        text-decoration: none;
        color: white;
        }

        #buttonYoung, #buttonOld {
        background-color:rgb(6, 56, 81);
        color:white;
        max-width: 200px;
        min-width: 200px;
        margin-left:3%;
        margin-bottom: 20px;
        height: 50px;
        border-radius: 5px;

        }

        #buttonYoung:hover, #buttonOld:hover {
          cursor:pointer;
          color:#f3367a;
        }

        #buttonYoung span:hover, #buttonOld span:hover {
        color:#f3367a;
        }
        #buttonYoung .btn:hover, #buttonOld .btn:hover  {
         color:#f3367a;
       }


        .man:hover {
        color:#f3367a;
        }

        #username, #email, #password, #rf_city, .city {
        display: block;
        max-width: 300px;
        min-width: 300px;
        margin: 3% auto;
        height: 50px;
        border-radius: 5px;
        }

        #dobday, #dobmonth, #dobyear {
        max-width: 100px;
        min-width: 100px;
        margin-left:3%;
        margin-bottom: 10%;
        height: 50px;
        border-radius: 5px;
        }

        #buttonYoung span, #buttonOld span{
        font-family: Arial;
        font-size: 20px;
        line-height: 40px;
        }

        .steps {
        margin-top: 20px;
        }

        .step_bar {
        /* margin: 20px; */
        margin: 20px 7px;
        background-color:rgb(6, 56, 81);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid white;
        }

        .active  {
        background-color:rgb(160, 120, 155);
         color:rgb(6, 56, 81);
         border: 2px solid rgb(6, 56, 81);
        }


        .mainContent h4 {
        color: #f3367a;
        margin-bottom: 0px;
        }

        .heart {
        font-size: 26px;
        position: absolute;
        bottom: 1px;
        right: 3px;
        color: #E40764;
        }

        .sign {
        font-size: 22px;
        position: absolute;
        bottom: 1px;
        right: 1px;
        color: #919191;
        }

        #green-sign {
        height: 25px;
        }



       @media only screen and (max-width: 767px){
        .header {
         height: 140px;
         }
        .signUpContent {
         height: 450px;
        }
        .step {
        height: 450px;
        }
        .step_bar {
        margin: 1px;
        }
        .step_bar {
        width: 30px;
        height: 30px;
        font-size: 16px;
        }
        .mainContent h4 {
        font-size: 13px;
        }
        .mainContent p {
        font-size: 11px;
        }
        }

       @media only screen and (max-width: 350px) {
         .user {
         margin-left: -10px;
         }
        }


      @media (min-width: 400px) and (max-width: 459px){
        #buttonYoung, #buttonOld {
        margin-left: 12%;
        }
        }

        .font-size-12 {
        font-size: 12px
        }

        .img-jp {
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        }

        .img-jp:hover {
        -webkit-transform: translate(0,-0.5em);
        -moz-transform: translate(0,-0.5em);
        -o-transform: translate(0,-0.5em);
        -ms-transform: translate(0,-0.5em);
        transform: translate(0,-0.5em);
        cursor: pointer;
        }

        .pink {
        color: #f3367a;
        font-size: 22px;
        }

        .blockquote {
        color: #ccc;
        content: open-quote;
        font-size: 4em;
        line-height: 0.1em;
        margin-right: 0.25em;
        vertical-align: -0.4em;
        }

        .quotes {
        width: 60px;
        height: 35px;
        margin-left:35%;
        }

        .underline {
        text-decoration: underline;
        }


        .dark_overlay{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 10;
        }

        .grad-bg {
        height: 70px;
        background: -moz-linear-gradient(left,  rgba(6, 56, 81,1) 46%, rgba(6, 56, 81,0.38) 71%, rgba(6, 56, 81,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  rgba(6, 56, 81,1) 46%,rgba(6, 56, 81,0.38) 71%,rgba(6, 56, 81,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  rgba(6, 56, 81,1) 46%,rgba(6, 56, 81,0.38) 71%,rgba(6, 56, 81,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063851', endColorstr='#00063851',GradientType=1 ); /* IE6-9 */
        font-size: 22px;
        font-weight: bold;
        color: white;
        max-width: 500px;
        position: absolute;
        left: 55%;
        top:10%;
        padding-left: 7px;
        }

        .box-save {
        height: 60px;
        max-width: 450px;
        position: absolute;
        left: 55%;
        bottom: 120px;
        right: 5px;
        font-size: 20px;
        color: black;
        font-weight: bold;
        }


        .next_btn {
        margin-top: 10px;
        }

        .submit_btn {
        margin-bottom: 10px;
        }


        .tooltip, .tac-tooltip {
        font-weight: bold;
        position: inherit;
        color:rgb(6, 56, 81);
        text-shadow: 1px 1px white;
        font-size: 14px;
        }

        .tac-tooltip{
          margin-top: -20px;
        }

        #step5 .steps {
        margin-top: 0px;
        }

       @media (min-width: 350px) and (max-width: 480px){
        .hidden-img-480 {
        display: none;
        }
        }

       @media only screen and (max-width: 350px){
        .hidden-img {
        display: none;
        }
        }

       @media only screen and (max-width: 330px){
        #username, #email, #password, #rf_city, .city {
         max-width: 250px;
         min-width: 250px;
        }
        }

       @media (min-width: 768px) and (max-width: 1024px){
         .grad-bg {
          height: 50px;
          left:70%;
          max-width: 250px;
        font-size:12px;
         }
        .box-info {
        height: 84px;
        }
        .box-info img {
        height: 70px;
        width: 80px;
        }
        .box-info h4 {
        font-size:15px;
        }
        .pink {
        font-size:15px;
        }
        }

       @media only screen and (max-width: 767px){
         .header {
         height: 70px;
         }
        .box-info {
        height: 80px;
        }
        .box-info img {
        height: 70px;
        width: 80px;
        }
        .box-info h4 {
        font-size:13px;
        }
        .pink {
        font-size:15px;
        }
        }

       @media only screen and (max-width: 400px){
        .header img {
        max-width: 200px;
        margin-top: 15px;
        margin-left: -15px;
        }
        .header .container {
        padding-left: 5px;
        }
        .header .col-xs-3 {
         padding-left: 5px;
        }
        }

       @media only screen and (max-width: 360px){
        .box-info img {
        height: 70px;
        width: 80px;
        }
        .box-info h4 {
        font-size:11px;
        }
        .pink {
        font-size:11px;
        }
        }

       @media (min-width: 768px) and (max-width: 998px) {
        .box-save {
        left:35%;
        }
        }

       @media only screen and (max-width: 767px) {
        .box-save {
        left:5%;
        font-size: 12px;
        }
        }

        .focus-area {
        cursor: pointer;
        }

        .btn-pink {
        background-color: #f3367a;
        color:white;
        font-weight: bold;
        }

       @media (min-width: 631px) and (max-width: 767px) {
        .hidden-xs-767 {
        display: none;
        }
        .col-xs-6{
        width: 25%;
        }
        .signUpContent {
        left: 10%;
        }
        }

        @media (min-width: 480px) and (max-width: 630px) {
        .hidden-xs-630 {
        display: none;
        }
        .col-xs-6{
        width: 33%;
        }
        }


       @media only screen and (max-width: 479px) {
        .hidden-xs-480 {
        display: none;
        }
        #step4 .steps, #step3 .steps {
        margin-top: 60px;
        }
        #step2 .steps {
        margin-top: 15px;
        }
        }

       @media only screen and (max-width: 320px) {
        #step2 .steps {
        margin-top: 3px;
        }
        }


       @media (min-width: 480px) and (max-width: 510px)  {
        #buttonYoung, #buttonOld {
        left: 22%;
        }
        }


       @media (min-width: 520px) and (max-width: 767px)  {

        .col-xs-12 #buttonYoung, .col-xs-12 #buttonOld {
        width: 47%;
        display: inline-block;
        }
        .step {
        height: 360px;
        }
        .signUpContent {
        height: 360px;
        }
        .box-save {
        left: 20%;
        font-size: 14px;
        }
        .gay-background {
          height: 630px;
        }
        }

       @media only screen and (max-width: 479px)  {
        #buttonYoung, #buttonOld {
        max-width: 250px;
        }
        }

       @media only screen and (max-width: 321px)  {
        .user {
        margin-left: -10px;
        }
        }



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

    .modal-body {
      max-height: 20vh;
      overflow: scroll;
    }

    .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;
    }
  }




          /*Modal modifications*/
          #disclaimerModal .modal-title {
              color: darkred;
              font-weight: bolder;
              text-align: center;
              font-size: large;
          }
          #disclaimerModal .modal-header, #disclaimerModal .modal-footer {
              background-color: #f5f5f5;
          }
          #disclaimerModal .modal-body{
              font-size: 13px;
          }

          #disclaimerModal .btn-success {
              color: #fff;
              background-color: #5cb85c;
              background: #5cb85c;
              border-color: #4cae4c;
          }

          #disclaimerModal .btn-danger {
              color: #fff;
              background-color: #d9534f !important;
              background: #d9534f !important;
              border-color: #d43f3a;
          }
          /* disclaimer modal for mobile  */
          @media (max-width:500px) {

              #disclaimerModal .modal-body {
                  max-height: 20vh !important;
                  overflow: scroll !important;
              }

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

              #disclaimerModal .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;
              }
          }


  @media (max-width:347px){
    .next_btn {
      margin-top: -5px;
    }
  }

  @media (max-width:403px){
    #dobday,
    #dobmonth,
    #dobyear{
      min-width: 80px;
      margin-left: 0;
    }
  }
  .btn-msg{
    display: none;
  }
  @media (max-width:767px){
    .sm-center{
      text-align: center !important;
    }
    .btn-login{
      display: none;
    }
    .btn-msg{
      display: block;
      text-align: center;
      position: relative;
      z-index: 99;
      background-color: #363839;
    }
    .btn-msg a{
      color: white;
      font-size: 11px;
      margin-right: 8px;
    }
  }
  .tt-menu{
    background-color: white;
    width: 100%;
    text-align: center;
  }

/* AL-7 checkbox fix */
.custom-control-tac {
  font-size: 12px;
  text-align: left;
  padding: 0 10px;
  margin-bottom: 10px;
}

@media (min-width: 425px) {
  .custom-control-tac {
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  .custom-control-tac {
    padding: 0 30px;
  }
}

.float-left{
    float: left;
}

.float-right{
    float: right;
}

.checked-profiles{
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    margin-right: 5px;

    font-size: 10px;
    text-align: center;
  }

  .checked-profiles .top{
    background-color:#c1c1c1;
    border-radius: 4px 4px 0 0;
    color: #4c4c4c;
    padding: 2px;
  }

  .checked-profiles .top p{
      margin: 0;
  }

  .checked-profiles .middle{
      background-color: #fff;
  }

  .checked-profiles .middle img{
      display: inline-block;
  }

  .checked-profiles .bottom{
    background-color:#c1c1c1;
    border-radius: 0 0 4px 4px;
    color: #4c4c4c;
    padding: 2px;
  }

  .checked-profiles .bottom p{
      margin: 0;
  }

  .comparison-rating{
      border: 1px solid #000;
      border-radius: 4px;
      margin-right: 5px;

      font-size: 10px;
      text-align: center;
  }

  .comparison-rating .top{
      background-color:#b51d22;
      border-radius: 4px 4px 0 0;
      color: #fff;
      padding: 2px;
  }

  .comparison-rating .top p{
      margin: 0;
  }

  .comparison-rating .middle{
    padding: 2px;
    background-color: #fff;
}

.comparison-rating .middle .fa-star{
    color: #feaf18;
}

.comparison-rating .middle p{
    margin: 0;
}

  .comparison-rating .bottom{
    background-color:#dcdcdc;
    border-radius: 0 0 4px 4px;
    padding: 1px;
}

.comparison-rating .bottom p{
    margin: 0;
}