body {
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Arial,sans-serif;
    font-size: 15px;
    line-height: 1.7em;
    background: #111;
}

input[type='checkbox'] {
    height: 24px;
    min-width: 24px;
    width: auto;
    padding: 0;
    vertical-align: text-top;
}

h1, h2, h3, h4, h5, h6, p, i, a, span ul, li, .btn, label, input, textarea, .tagline, .form-control {
    font-family: 'Rosario',sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 18px;
}

hr {
    border-top: 5px solid #98348c
}

    hr._99ca0f {
        border-top: 5px solid #99ca0f;
    }

    hr._f1b306 {
        border-top: 5px solid #f1b306;
    }



.container {
    max-width: 1135px;
}

main {
    background-color: #e8e8e8;
    border: 20px solid #fff;
    padding: 20px 40px;
    color: #111;
}

/* Styles copied from main site*/
.header {
    padding-top: 20px;
    padding-bottom: 20px
}

    .header .logo a {
        display: inline-block
    }

        .header .logo a img {
            max-width: 120px
        }

    .header .search, .header .mobile-search {
        padding-left: 28px;
        background-color: #fff;
        position: relative
    }

        .header .search i, .header .mobile-search i {
            font-size: 16px;
            position: absolute;
            top: 7px;
            left: 8px
        }

        .header .search input, .header .mobile-search input {
            width: 100%;
            background: none;
            padding-left: 0;
            border: none !important;
            margin: 0
        }

    .header .search-and-social {
        padding-top: 10px;
        padding-bottom: 22px;
        text-align: right
    }

        .header .search-and-social .like-plugin, .header .search-and-social .search, .header .search-and-social .social {
            float: right
        }

        .header .search-and-social .like-plugin {
            margin-top: 4px;
            margin-right: 8px;
            z-index: 1000;
            position: relative
        }

        .header .search-and-social .search {
            width: 200px;
            opacity: .85
        }

            .header .search-and-social .search:hover {
                opacity: 1
            }

        .header .search-and-social ul.social {
            margin: 0
        }

            .header .search-and-social ul.social li {
                margin-left: 8px;
                margin-right: 0
            }

                .header .search-and-social ul.social li a i {
                    padding: 5px 6px 4px 5px
                }

                .header .search-and-social ul.social li.youtube i {
                    padding: 4px 7px 4px 5px
                }

    .header ul.desktop-tablet-menu {
        margin-left: 0;
        margin-bottom: 0;
        list-style-type: none;
        text-align: right
    }

        .header ul.desktop-tablet-menu li {
            margin-left: 8px;
            padding: 0;
            display: inline-block;
            border-bottom: 8px solid #111
        }

            .header ul.desktop-tablet-menu li a {
                display: block;
                padding: 10px;
                color: #fff;
                font-size: 18px;
                line-height: 18px;
                text-transform: uppercase;
                font-weight: bold
            }

                .header ul.desktop-tablet-menu li a:hover {
                    text-decoration: none
                }

            .header ul.desktop-tablet-menu li:hover.puberty, .header ul.desktop-tablet-menu li.active.puberty {
                border-bottom: 8px solid #d12f89
            }

            .header ul.desktop-tablet-menu li:hover.menstruation, .header ul.desktop-tablet-menu li.active.menstruation {
                border-bottom: 8px solid #e6b800
            }

            .header ul.desktop-tablet-menu li:hover.healthy-vagina, .header ul.desktop-tablet-menu li.active.healthy-vagina {
                border-bottom: 8px solid #9d3493
            }

            .header ul.desktop-tablet-menu li:hover.femcare-products, .header ul.desktop-tablet-menu li.active.femcare-products {
                border-bottom: 8px solid #a6c902
            }

            .header ul.desktop-tablet-menu li:hover.sample, .header ul.desktop-tablet-menu li.active.sample {
                border-bottom: 8px solid #a6c902
            }

            .header ul.desktop-tablet-menu li:hover.questions-and-answers, .header ul.desktop-tablet-menu li.active.questions-and-answers {
                border-bottom: 8px solid #ea6e09
            }

            .header ul.desktop-tablet-menu li:hover.teacher-resources, .header ul.desktop-tablet-menu li.active.teacher-resources {
                border-bottom: 8px solid #00acee
            }

            .header ul.desktop-tablet-menu li:hover.Parents, .header ul.desktop-tablet-menu li.active.Parents {
                border-bottom: 8px solid #e629ee
            }

    .header .icons {
        text-align: right
    }

        .header .icons .menu-icon, .header .icons .search-icon {
            display: inline-block;
            margin-top: 15px;
            margin-left: 15px
        }

            .header .icons .menu-icon i, .header .icons .search-icon i {
                font-size: 30px;
                line-height: 30px;
                color: #fff
            }

    .header .mobile-search, .header .mobile-menu {
        position: relative
    }

    .header .mobile-search {
        margin-top: -53px;
        margin-bottom: 15px;
        -webkit-transition: margin 500ms;
        -moz-transition: margin 500ms;
        -o-transition: margin 500ms;
        -transition: margin 500ms
    }

        .header .mobile-search i {
            top: 10px
        }

        .header .mobile-search input {
            height: 38px;
            line-height: 38px
        }

    .header .mobile-menu {
        height: 0;
        overflow: hidden;
        margin-left: 0;
        -webkit-transition: height 1000ms;
        -moz-transition: height 1000ms;
        -o-transition: height 1000ms;
        -transition: height 1000ms
    }

        .header .mobile-menu ul {
            width: 100%;
            padding: 0;
            margin-top: 0;
            margin-left: 0;
            position: absolute;
            bottom: 0
        }

            .header .mobile-menu ul li, .header .mobile-menu ul li.active, .header .mobile-menu ul li:hover {
                display: block;
                width: 100%;
                padding: 12px;
                margin-bottom: 5px
            }

                .header .mobile-menu ul li.puberty, .header .mobile-menu ul li.active.puberty, .header .mobile-menu ul li:hover.puberty {
                    background-color: #d12f89
                }

                .header .mobile-menu ul li.menstruation, .header .mobile-menu ul li.active.menstruation, .header .mobile-menu ul li:hover.menstruation {
                    background-color: #e6b800
                }

                .header .mobile-menu ul li.healthy-vagina, .header .mobile-menu ul li.active.healthy-vagina, .header .mobile-menu ul li:hover.healthy-vagina {
                    background-color: #9d3493
                }

                .header .mobile-menu ul li.femcare-products, .header .mobile-menu ul li.active.femcare-products, .header .mobile-menu ul li:hover.femcare-products {
                    background-color: #a6c902
                }

                .header .mobile-menu ul li.sample, .header .mobile-menu ul li.active.sample, .header .mobile-menu ul li:hover.sample {
                    background-color: #a6c902
                }

                .header .mobile-menu ul li.questions-and-answers, .header .mobile-menu ul li.active.questions-and-answers, .header .mobile-menu ul li:hover.questions-and-answers {
                    background-color: #ea6e09
                }

                .header .mobile-menu ul li.teachers-resources, .header .mobile-menu ul li.active.teachers-resources, .header .mobile-menu ul li:hover.teachers-resources {
                    background-color: #00acee
                }

                .header .mobile-menu ul li.Parents, .header .mobile-menu ul li.active.Parents, .header .mobile-menu ul li:hover.Parents {
                    background-color: #e629ee
                }

                .header .mobile-menu ul li a, .header .mobile-menu ul li.active a, .header .mobile-menu ul li:hover a {
                    color: #fff;
                    display: block;
                    font-size: 18px;
                    font-weight: bold;
                    height: 100%;
                    line-height: 18px;
                    text-align: center;
                    text-transform: uppercase
                }

                    .header .mobile-menu ul li a:hover, .header .mobile-menu ul li.active a:hover, .header .mobile-menu ul li:hover a:hover {
                        text-decoration: none
                    }

                .header .mobile-menu ul li.social, .header .mobile-menu ul li.active.social, .header .mobile-menu ul li:hover.social {
                    text-align: left;
                    padding: 0;
                    margin: 0
                }

                    .header .mobile-menu ul li.social a, .header .mobile-menu ul li.active.social a, .header .mobile-menu ul li:hover.social a {
                        display: inline-block;
                        width: 36px;
                        height: 35px;
                        margin-right: 2px;
                        text-decoration: none
                    }

                        .header .mobile-menu ul li.social a i, .header .mobile-menu ul li.active.social a i, .header .mobile-menu ul li:hover.social a i {
                            padding: 5px 0 0 6px;
                            font-size: 25px;
                            line-height: 25px;
                            color: #fff
                        }

                        .header .mobile-menu ul li.social a.facebook, .header .mobile-menu ul li.active.social a.facebook, .header .mobile-menu ul li:hover.social a.facebook {
                            background-color: #3b5999
                        }

                        .header .mobile-menu ul li.social a.instagram, .header .mobile-menu ul li.active.social a.instagram, .header .mobile-menu ul li:hover.social a.instagram {
                            background-color: #634d40
                        }

                        .header .mobile-menu ul li.social a.youtube, .header .mobile-menu ul li.active.social a.youtube, .header .mobile-menu ul li:hover.social a.youtube {
                            background-color: #c8222c
                        }

@media(min-width: 768px)and (max-width:1024px) {
    .header .logo a img {
        max-width: 100px
    }

    .header .search-and-social {
        padding-top: 0;
        padding-bottom: 15px
    }

        .header .search-and-social .search {
            width: 180px
        }

    .header ul.desktop-tablet-menu li.item {
        margin-left: 3px
    }

        .header ul.desktop-tablet-menu li.item a {
            font-size: 15px;
            line-height: 15px;
            padding-left: 5px;
            padding-right: 5px
        }
}

@media(max-width: 767px) {
    .header {
        padding-top: 0;
        padding-bottom: 0
    }

        .header .top, .header .bottom {
            position: relative
        }

        .header .top {
            padding-top: 20px;
            padding-bottom: 10px;
            background-color: #111;
            z-index: 300
        }

        .header .bottom {
            z-index: 200
        }

        .header .logo a img {
            max-width: 70px
        }
}

ul.social {
    *zoom: 1;
    margin: 0;
    margin-bottom: 15px;
    list-style-type: none
}

    ul.social:before, ul.social:after {
        display: table;
        content: "";
        line-height: 0
    }

    ul.social:after {
        clear: both
    }

    ul.social li {
        float: left;
        height: 32px;
        width: 32px;
        margin-right: 8px;
        padding: 0;
        opacity: .85
    }

        ul.social li a {
            display: block;
            width: 100%;
            height: 100%
        }

            ul.social li a:hover {
                text-decoration: none
            }

            ul.social li a i {
                color: #fff;
                font-size: 22px;
                line-height: 22px;
                padding: 5px 7px 5px 7px
            }

        ul.social li:hover, ul.social li:focus {
            opacity: 1
        }

        ul.social li.facebook {
            background-color: #3b5999
        }

        ul.social li.instagram {
            background-color: #634d40
        }

        ul.social li.youtube {
            background-color: #c8222c
        }

            ul.social li.youtube i {
                font-size: 21px;
                line-height: 21px
            }


.btn.orange, input[type=submit].orange {
    background-color: #e16500;
    color: #fff;
}


    .btn.orange:hover,
    input[type=submit].orange:hover,
    .btn.orange:active,
    input[type=submit].orange:active,
    .btn.orange:focus,
    input[type=submit].orange:focus {
        background-color: #ea6e09;
    }

.validation-summary-errors {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding: 15px;
    margin-bottom: 20px;
}

    .validation-summary-errors > ul {
        padding: 0;
        list-style: none;
    }

/**Awesomplete**/
.awesomplete {
    display: block
}

    .awesomplete > ul {
        margin-top: 0;
        transition: none;
    }

        .awesomplete > ul:before {
            display: none;
        }

    .awesomplete mark {
        padding: 0;
    }

label {
    white-space: pre-wrap;
}