body { margin:0; font-family: "Open Sans"; }
    html, body, ul, ol, li, form  { margin:0; padding:0; }
    h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
    img { border: 0; }
    li { list-style: none; }
    
    #page { min-height: 1040px;}
    #header { width: 960px; height: 50px; margin: 0 auto; }
    #navbar { float: right; list-style: none; position: relative; }
    #navbar li { float: left; margin-left: 60px; line-height: 50px; }
    #navbar li a { text-decoration: none; font-size: 14px; }
    #navbar li #login_form { display: none; position: absolute; right: 0; top:50px; width: 230px; height: 210px; background: #fff; padding: 30px; }
    #navbar li #login_form form { padding: 30px 0;}
    #navbar li #login_form a{ color: #3366cc; font-size: 11px; display: block; text-align: center; line-height: 2; }
    #navbar li #login_form input { border: 1px solid #921fbe; height: 25px; padding-left: 5px; width: 168px; border-radius: 0; }
    #navbar li #login_form button { width: 175px; background: #921fbe; border: none; height: 30px; color: #fff; width: 175px; line-height:30px; } 
    #navbar li #login_form p { margin-bottom:8px; }
    #navbar li #login_form:before{display: block; content: ''; border-bottom: 7px solid #fff; border-left: 6px solid rgba(255,255,255,0); border-right: 6px solid rgba(255,255,255,0); margin: -37px 0px 0 183px; }
    
    #hero { width: 960px; margin: 0 auto; padding-bottom: 30px;}
    #hero #register { width: 320px; margin: 75px auto; }
    #hero #register #search_form { margin-top: 35px; color: #fff; }
    #hero #register #search_form label { font-size:13px; }
    #hero #register #search_form select { width: 100%; height: 45px; padding-left: 15px; margin: 10px 0 20px 0; font-size:14px; background: url('https://secureimage.securedataimages.com/images/ffadult/cobrand/heatedaffairs.com/grey_arrow.png') no-repeat right 10px center #fff; -webkit-appearance:none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; padding-right: 40px;}
    #hero #register #search_form select::-ms-expand{ display: none; }
    #hero #register #search_form button { width: 100%; height: 65px; border: none; background: #921fbe; font-size: 24px; font-family: 'Open Sans Bold'; color: #fff; margin-top: 20px; outline: none; cursor: pointer;}
    #hero h1 { text-align: center; font-size: 36px; color: #fff; font-weight: normal; line-height: 1.1; }
    #hero h1 span.extrabold { font-family: "Open Sans Etrabold";}
    #hero h1 span.high_light { color: #921fbe;}
    #hero h1 span.bold { font-family: "Open Sans Bold";}
    #hero h1 span.h2 { font-size: 30px;}
    #hero h1 span.h2 span.high_light{ font-size: 40px;}
    .site_desc { height: 308px; background: #fff; }
    .site_desc h2 { margin: 0 auto 40px; text-align: center; font-size: 36px; font-weight: normal; color: #921fbe; padding-top: 70px; }
    .site_desc ul { width: 960px; margin: 0 auto; }
    .site_desc ul li { float: left; width: 235px; font-size: 20px; border-right: 1px solid #921fbe; color: #333; font-weight: 600; margin: 0 45px 85px 20px;; padding-right: 35px; list-style: disc; }
    .site_desc ul li.first { padding-right: 20px; width: 270px; }
    .site_desc ul li.last { border: none; margin-right: 0; padding-right: 0; }

    #mask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
    #close { display: none; }

    
    #footer { background: #fff; color: #000; line-height: 1.5; border-top: 1px solid #921fbe; }   
    #footer a { text-decoration: none; } 
    #footer #textsecsion { color: #ccc; }
    #footer #textsecsion .disclaimer, #footer #textsecsion .safetylaw{ color: #000; }

    #hero .affair_container { max-width:90%; background: none; padding: 3%; }
    #hero .affair_container h1 { text-align: left; font-size: 2em; font-weight: bold; line-height: normal; }
    #hero .affair_container h1 span { color: #921fbe; }
    #hero .affair_container p,
    #hero .affair_container h2 { color: #fff; }
    #hero .affair_container ul li { color: #fff; list-style: disc;}

    /* mobile css */
    @media screen and (max-width:1025px){
      #page { height: auto; background-position-x:62%;}
      #header { width:90%; }
      #close { display: block; }
      #navbar li #login_form form { padding: 0; }
      #navbar li #login_form:before{ border: none; margin: 0; }
      #navbar li #login_form #close{ float: right; font-size: 18px; color: #921fbe; margin: -35px -15px; font-weight: bold;}
      #navbar li #login_form { position: fixed; top: 50%; right: 50%; margin-top: -105px; margin-right: -148px; width: 235px; height: 250px; }
      #navbar li #login_form input { width: 98%; height: 40px; margin-bottom: 5px;}
      #navbar li #login_form input#handle { margin-top: 20px; }
      #navbar li #login_form button { width: 100%; height: 40px; font-size: 21px; margin: 10px 0;}
      #navbar li #nav_join { display: none; }
      #navbar li { clear: both; }
      #hero { width: 100%; padding-bottom: 100px; }
      #hero h1 { font-size: 28px; }
      #hero h1 span.h2 { font-size: 26px;}
      #hero h1 span.h2 span.high_light{ font-size: 32px;}
      .site_desc { background: #fff; }
      .site_desc h2 { margin: 0 0 20px; padding-top: 50px}
      .site_desc ul { width: 100%; }
      .site_desc ul li { clear: both; border: none; width: 90%; margin: 5px 0px 5px 30px; }
      .site_desc ul li.first { width: 90%; }
      #footer { min-width: 90%; padding: 0; background:#343434;}
      #footer .content.full_width { width: 95%; }  
      .legal_div {text-align: center; background:#343434; }
      .legal_div a.desktop_link { color: #aaa; }

      .legal_div, .legal_div a {color:#606060; padding: 10px 0;}
      .legal_div a {line-height: 18px; font-size:12px; white-space: normal;}
      .legal_div p {margin:8px 0; font-size:12px;}
    }
    @media screen and (max-width: 767px){
      #hero #register #search_form { margin-top: 15px; }
      #hero #register #search_form select { margin: 15px 0;}
      #hero #register #search_form button { height: 55px; }
    }
    @media screen and (max-width: 479px){ 
      #hero h1 { font-size: 22px; }
      #hero h1 span.h2 { font-size: 22px;}
      #hero h1 span.h2 span.high_light{ font-size: 25px;}
      .site_desc h2 { font-size: 24px; }
      #footer .footer-l, #footer .footer-middle, #footer .footer-r { width: 100% !important; float: right; position: inherit !important;}
      #footer #footer_other_sites { padding-top: 0; }
      #footer .footer-m .footer-middle { margin-bottom: 20px; }
      #hero #register { margin: 20px auto 50px; }
      .site_desc ul li { font-size: 18px;}
    }
    @media screen and (max-width: 350px){
      #hero #register { width: 90%;} 
      #hero #register #search_form { margin-top: 5px;  }
      #hero #register #search_form select { margin: 10px 0;}
      #hero #register #search_form button { height: 50px; font-size: 21px; }
      #hero #register img { width: 100%; }
      #hero h1 { font-size: 18px; }
      #hero h1 span.h2 { font-size: 16px;}
      #hero h1 span.h2 span.high_light{ font-size: 21px;}
      .site_desc h2 { font-size: 22px; }
      .site_desc ul li { font-size: 18px;}
    }