﻿body {
    background-image: linear-gradient(white 60%, #918AC1 20%);
}

.navbar-inverse {
    background-color: transparent;
    border: none;
    top: 30px; 
    position: fixed;   
    z-index: 999;
    opacity: .9;
}

.femvue-logo {
    padding-top: 10px;
}

.nav-wrap {
    background-color: transparent;
}

.header-container {
    top: -20px;
}

.hero-container {
    top: 200px;
}

.hero-title {
    color: #ffffff;
}

.hero-subtitle {
    color: #ffffff;
}

.hcp-a {
    color: #666666;
    font-size: 1em;
    padding-right: 10px;
}

.hcp-a:active, .hcp-a:hover {
    text-decoration: none;
    color: #918AC1;
    
}

.hcp {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

footer {
    background-color: #918AC1;
}

.sono-hsg-background {
    width: 100%;
    background-image: url(/images/sonohsg.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right top;
    min-height: 600px;
}
.sono-hsg-container {
    z-index: 99;
}

.sono-hsg-para {
    float: left;   
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 28.8px;
    line-height: 33px;
    position: relative;
    z-index: 99;
    margin-top: 6%;
    margin-left: -15px;
}

.sono-hsg-para h2 {      
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 34px;
    /*letter-spacing: 1px;*/
    line-height: 42px;
    position: relative;
    z-index: 99;
    margin-top: 8%;
}

.why-femvue-container {
    width: 100%;
    background-image: url(/images/footer_purple_swoop.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 100px;
    padding-top: 50px;
    position: relative;
    top: -55px;
}

/* title has gone missing - maybe a bum property{
    width: 100%;
    background-image: url('/images/sonohsg.png');
    background-repeat: no-repeat;
    background-size: cover;
}
}*/
.sono-hsg {
    float: right;
    width: 45%;
    margin-right: -15px;
}

.lower-tag {
    position: relative;
    top: -85px;
    z-index: 100;
}

.why-femvue {
    font-size: 19.2px;
    z-index: 99;
    font-family: inherit;
    font-weight: inherit;
    line-height: 24px;
    margin-top: 0;
}

.why-femvue-para {
    background-color: #fff;
    border-radius: 25px;
    padding-top: 50px;
    padding-bottom: 15px;
    margin-top: 50px;
    line-height: 19px;
    box-shadow: rgba(0,0,0, 0.3) 6px 6px 8px;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 200px;
    max-width: 200px;
}

.femvue-fertility-icon {
    width: 65px;
    height: auto;
}

.lower-text-fertility {
    margin-top: 5%;
}

.footer-style {
    list-style: disc;
    list-style-position: outside;
    margin-left: 15px;
    padding-right: 15px;
    
}

footer hr {
    border-top: 1px solid #fff;
    margin-top: 40px;
    margin-bottom: 40px;
}

div.form-group.col-md-6:first-of-type {
    padding-left: 0;
}

div.form-group.col-md-7 {
    padding-right: 0;
}

#contact .form > .form-group.col-md-6 {
    padding-right: 0;
}

#contact .form > .form-group.col-md-12 {
    padding-left: 0;
    padding-right: 0;
}


#contact .form-control, #contact .form-control {
    margin-left: 0;
}

.margin-neg {
    margin-left: -15px;
}

.btn-default:hover {
    color: #ffffff;
    background-color: #285583;
}

.btn-default {
    margin-top: 10px;
}

#contact a:hover, #contact-email a:hover {
    background-color: #D7D3F4;
    color: #ffffff;
}


footer a:hover, footer a:active, footer a:focus {
    color: #D7D3F4;
}


@media screen and (max-width: 767px) {

    .hcp {
        padding-right: 0;
    }

    .navbar-collapse.collapse.in {
        background-color: #ffffff;
        opacity: 1;
        float: right;
    }

    .navbar-inverse .navbar-toggle {
        border: none;
    }

    .navbar-toggle {
        margin-right: 25px;
    }

    .navbar-header {
        margin-right: -20px;
    }

    .navbar-collapse {
        border: none;
    }
   
    .navbar-inverse {
        padding-right: 0px;
        opacity: 1;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #000000;
        margin-top: 5px;
        margin-bottom: 5px;
        
    }

    .navbar-brand {
        padding-left: 0px;
    }

    .header-container {
        max-width: 768px;
        min-height: 277px;
        overflow: hidden;
    }

    .infertility-phone {
        transform: scale(2.7);
        position: relative;
        right: 19%;
        top: 100px;
    }

    .hero-container {
        top: 75px;
    }

    .hero-title {
        font-size: 21px;
        line-height: 26px;
    }

    .hero-subtitle {
        font-size: 18px;
        line-height: inherit;
    }

    .hcp a {
        padding-right: 15px;
    }

    .femvue-logo {
        max-width: 60%;
    }

    .sono-hsg-background {
        background-image: none;
        min-height: 350px;
    }

    .sono-hsg-para h2 {
        font-size: 22px;
        line-height: 24px;
    }

    .sono-hsg-para {
        font-size: 18px;
        line-height: 20px;
        padding-right: 15px;
    }

    .why-femvue-container {
        background-image: none;
        background-color: #D7D3F4;
        padding-bottom: 50px;
    }

    .lower-text {
        font-size: 18px;
    }

    .lower-text-fertility {
        margin-top: 0;
        font-size: 22px;
    }

    .why-femvue {
        padding-left: 15px;
        padding-right: 15px;
    }

    .why-femvue-para {
        max-width: 232px;
        min-height: 217px;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        padding-top: 0;
        padding-left: 15px;
        padding-right: 15px;
    }

    #contact .form > .form-group.col-md-6 {
        padding-left: 0;
    }

    .bottom-femvue {
        padding-right: 15px;
        padding-left: 15px;
    }

    #contact .form > .form-group.col-md-7 {
        padding-left: 0;
    }

    .col-md-3.col-sm-5 > h3 {
        padding-top: 25px;
    }

    footer ul > li {
        margin-bottom: 8px;
    }

    .col-md-5.col-sm-10.col-sm-offset-1.col-md-offset-0 > h3 {
        padding-top: 25px;
    }

    .bottom-femvue {
        height: auto;
    }

    body {
        background-image: linear-gradient(white 50%, #918AC1 20%);
    }
}

@media screen and (min-width:768px) and (max-width: 1200px) {

    div.form-group.col-sm-6:first-of-type {
        padding-right: 5px !important;
    }

    .navbar.navbar-inverse.navbar-fixed-top {
        padding-left: 0;
        padding-right: 0;
    }

    .femvue-logo {
        max-width: 100%;
    }

    .navbar-brand {
        max-width: 150px;
    }

    .nav > li > a {
        padding: 15px 10px;
    }

    /*Begin transfer styles*/
    .hero-container {
        top: 90px;
        left: 8.33333%;
    }
    
    .hero-wrap {
        width: 750px;
    }

    .hero-title {
        font-size: 25px;
        line-height: 28px;
    }

    .hero-subtitle {
        font-size: 18px;
        line-height: inherit;
    }

    .btn-default {
        margin-top: 0px;
    }

    .sono-hsg-para h2 {
        font-size: 22px;
        line-height: 26px;
        font-weight: 700;
    }

    .sono-hsg-para {
        font-size: 16px;
        line-height: inherit;
        padding-left: 15px;
    }

    .sono-hsg-background {
        background-size: 40% auto;
        min-height: 350px;
    }

    .lower-tag {
        margin-top: 50px;
    }

    .lower-text-fertility {
        font-size: 22px;
        margin-top: 0;
    }

    .why-femvue-container {
        background-position: center;
        padding-bottom: 50px;
    }

    .why-femvue {
        margin-left: auto;
        width: 70%;
        margin-right: auto;
        font-size: inherit;
    }

    footer {
        padding-top: 0;
    }

    .why-femvue-para {
        max-width: 255px;
        margin-left: auto;
        margin-right: auto;
    }

    body {
        background-image: linear-gradient(white 50%, #918AC1 50%);
    }

    footer ul > li {
        margin-bottom: 8px;
    }

    #contact .form > .form-group.col-md-6 {
        padding-left: 0px;
    }

    #contact .form > .form-group.col-md-7 {
        padding-left: 0px;
    }

    .col-md-5.col-sm-10.col-sm-offset-1 h3 {
        margin-top: 25px;
    }
}

@media screen and (min-width: 1200px) {
    footer {
        padding-top: 25px;
    }
}

@media screen and (min-width: 1450px) {
    footer {
        padding-top: 50px;
    }
}

@media screen and (min-width: 1200px) {
    .sono-hsg-background {
        background-size: 38%;
        min-height: 500px;
    }
}
@media screen and (min-width: 1570px) {
    .sono-hsg-background {
        width: 100%;
        background-image: url(/images/sonohsg.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right top;
        min-height: 700px;
    }

    .why-femvue-container {
        top: -100px;
    }
}

@media screen and (min-width: 2500px) {
    .sono-hsg-background {
        background-size: auto 100%;
    }

    .why-femvue-container {
        top: -150px;
    }
}

@media screen and (min-width: 900px) and (max-width: 1060px) {
    .sono-hsg-background {
        height: 400px;
    }
}

@media screen and (min-width: 1061px) and (max-width: 1200px) {
    .sono-hsg-background {
        height: 450px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .hero-wrap {
        width: 970px;
    }

    .hero-container {
        top: 130px;
        padding-left: 15px;
    }

     .hcp {
        padding-left: 8.34%;
        padding-right: 8.34%;
    }

    div.form-group.col-md-6:first-of-type {
        padding-right: 5px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .hcp {
        padding-right: 0px;
    }
}