/*
 *  Info (text CTA etc) over image module
 */

.infoOverImage {
    background: url('/images/info-over-image-bg-example.jpg') no-repeat 50% 0 transparent;
    background-size: auto 425px;
    height: 425px;
    width: 100%;
    padding: 10%;
}

    .infoOverImage .infoPiece {
        background-color: rgba(255,255,255,0.7);
        padding: 20px 20px 10px;
        max-width: 380px;
    }

        .infoOverImage .infoPiece h2 {
            padding-bottom: 8px;
        }

        .infoOverImage .infoPiece p,
        .infoOverImage .infoPiece .btn {
            padding-bottom: 12px;
        }

@media all and (min-width: 768px) {
    .infoOverImage {
        background-position: 0 0;
    }

    .infoOverImage {
        padding: 50px;
    }

        .infoOverImage .infoPiece {
            padding-right: 50px;
        }
}

@media all and (min-width: 980px) {
    .infoOverImage {
        padding: 50px 50px 50px 85px;
    }
}


/*
 *  Award winning team
 */

.awardWinning {
    padding: 20% 8%;
}

    .awardWinning h2 {
        font-weight: 400;
        font-size: 1.25rem;
        position: relative;
        padding-left: 90px;
        padding-bottom: 10px;
    }

    .awardWinning p {
        padding-left: 90px;
    }

    .awardWinning h2:before {
        background: url('/images/sprite-icons.png') no-repeat 0 -105px #fff;
        background-size: 200px 280px;
        content: "";
        position: absolute;
        left: 1px;
        top: 1px;
        width: 75px;
        height: 86px;
        display: block;
        float: right;
    }

@media all and (min-width: 768px) {
    .awardWinning {
        padding: 15% 7%;
    }

        .awardWinning h2 {
            font-size: 1.875rem;
            padding-bottom: 12px;
        }
}

@media all and (min-width: 768px) {
    .awardWinning {
        max-width: 825px;
    }
}


/*
 *  In a hurry? Book
 */

.hurryBook {
    background-color: #484f57;
    padding: 8% 10%;
    text-align: center;
    position: relative;
}

    .hurryBook .btn {
        float: none;
        max-width: 175px;
        margin: 0 auto;
    }

    .hurryBook p {
        color: #fff;
        font-size: 1.25rem;
        padding-bottom: 20px;
        max-width: 412px;
        margin: 0 auto;
    }

@media all and (min-width: 768px) {
    .hurryBook {
        padding: 25px 10% 5px 8%;
        text-align: left;
    }

        .hurryBook p {
            float: left;
            max-width: 420px;
            margin: 0;
        }

        .hurryBook .btn {
            float: right;
            width: 160px;
        }
}

@media (min-width: 980px) {
    .hurryBook {
        padding: 25px 80px 10px;
    }

        .hurryBook p {
            float: left;
            max-width: 640px;
            margin: 0;
        }
}


/*
 *  Filter list
 */

.filterList {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 12px 0 0;
    margin-bottom: 20px;
}

    .filterList h2 {
        padding: 0 0 12px;
    }

        .filterList h2 a {
            padding: 0 0 0 28px;
            display: inline-block;
            position: relative;
        }

            .filterList h2 a:before {
                position: absolute;
                content: "";
                background: url(/images/sprite-arrows.png) no-repeat 0 -11px #fff;
                background-size: 95px 40px;
                width: 15px;
                height: 9px;
                display: block;
                top: 7px;
                left: 0;
            }

            .filterList h2 a:hover:before {
                background-position: 0 -31px;
                background-size: 95px 40px;
            }

            .filterList h2 a.active:before {
                background-position: 0 0;
                background-size: 95px 40px;
                top: 4px;
            }

            .filterList h2 a.active:hover:before {
                background-position: 0 -20px;
                background-size: 95px 40px;
            }

.tagList {
    margin-top: 12px;
}

    .tagList ul {
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
    }

    .tagList li {
        float: left;
        margin: 0 8px 8px 0;
    }

    .tagList a {
        border: 2px solid #56cee6;
        padding: 5px 15px;
        float: left;
        font-weight: 700;
        font-size: 0.875rem;
        text-align: center;
    }

        .tagList a:hover {
            border: 2px solid #0079c2;
            color: #333;
        }

        .tagList a.selected {
            background-color: #56cee6;
        }

            .tagList a.selected:hover {
                border: 2px solid #0079c2;
                background-color: #0079c2;
                color: #fff;
            }

.pagination {
    display: block;
}

    .pagination ul {
        list-style: none;
        width: 290px;
        padding-left: 0;
        margin: 25px auto;
    }

        .pagination ul li {
            float: left;
            text-align: center;
            line-height: 34px;
            width: 38px;
            height: 38px;
            margin-right: 10px;
            border-radius: 3px;
            border: 1px solid #ebebeb;
        }

            .pagination ul li a {
                display: block;
                font-weight: 500;
                cursor: pointer;
            }

    .pagination li.next,
    .pagination li.previous {
        position: relative;
        text-indent: -9999px;
    }

        .pagination li.previous:before,
        .pagination li.next:before {
            content: "";
            height: 15px;
            position: absolute;
            width: 9px;
            cursor: pointer;
        }

        .pagination li.previous:before {
            background: #fff url("/images/sprite-arrows.png") no-repeat scroll -64px 0;
            background-size: 95px 40px;
            top: 10px;
            left: 12px;
        }

        .pagination li.next:before {
            background: #fff url("/images/sprite-arrows.png") no-repeat scroll -74px 0;
            background-size: 95px 40px;
            top: 10px;
            left: 14px;
        }

        .pagination li.previous:hover:before {
            background: #fff url("/images/sprite-arrows.png") no-repeat scroll -64px -20px;
            background-size: 95px 40px;
        }

        .pagination li.next:hover:before {
            background: #fff url("/images/sprite-arrows.png") no-repeat scroll -74px -20px;
            background-size: 95px 40px;
        }

        .pagination li.previous.inactive,
        .pagination li.next.inactive,
        .pagination li.previous.inactive a,
        .pagination li.next.inactive a {
            cursor: default;
        }

            .pagination li.previous.inactive:before {
                background: #fff url("/images/sprite-arrows.png") no-repeat scroll -50px 0;
                background-size: 95px 40px;
                cursor: default;
            }

            .pagination li.next.inactive:before {
                background: #fff url("/images/sprite-arrows.png") no-repeat scroll -84px 0;
                background-size: 95px 40px;
                cursor: default;
            }


/*
 *  News list
 */

.newsList {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .newsList li {
        border-bottom: 1px solid #ebebeb;
        padding: 25px 0 20px;
        max-width: 422px;
    }

    .newsList h3 {
        font-weight: 400;
    }

    .newsList img {
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .newsList .date,
    .newsList .newsType {
        font-weight: 700;
        font-size: 0.875rem;
    }

    .newsList .date {
        padding: 7px 0 0 0;
        float: right;
    }

    .newsList .newsType {
        padding: 5px 10px;
        float: left;
        font-weight: 700;
        font-size: 0.875rem;
        width: 122px;
        text-align: center;
    }

        .newsList .newsType.industry {
            border: 2px solid #6ccef5;
        }

        .newsList .newsType.travel {
            border: 2px solid #0079c2;
        }

@media all and (min-width: 768px) {
    .newsList {
        border-bottom: 1px solid #ebebeb;
    }

        .newsList li {
            float: left;
            width: 50%;
            max-width: 800px;
        }

            .newsList li:nth-child(odd) a,
            .newsList li:nth-child(odd) .nonLink {
                border-right: 1px solid #ebebeb;
                padding-right: 10%;
            }

            .newsList li:nth-child(even) a,
            .newsList li:nth-child(even) .nonLink {
                padding-left: 10%;
            }

        .newsList .snippetText {
            height: 100px;
        }
}

@media all and (min-width: 980px) {
    .newsList li:nth-child(odd) a,
    .newsList li:nth-child(odd) .nonLink {
        padding-right: 15%;
    }

    .newsList li:nth-child(even) a,
    .newsList li:nth-child(even) .nonLink {
        padding-left: 15%;
    }
}

.moduleTitle {
    font-size: 1.25em;
    margin-bottom: 10px;
    color: #0079c2;
}


/*
 *  Booking RH Column & summary
 */

#collapsedMobileSummary {
    display: none;
    position: relative;
    background-color: #fff;
}

@media all and (min-width: 768px) {
    #collapsedMobileSummary {
        display: block;
    }
}

.withDynamicRightColContent .rightContent {
    float: none;
}

.openSummary {
    width: 100%;
}

.pricesIcons {
    padding: 22px 22px 5px;
    border: 2px solid #6ccef5;
    clear: both;
    margin: 0 0 20px;
}

.pricesIcons {
    padding: 5px;
}

@media all and (min-width: 768px) {
    .pricesIcons {
        width: 50%;
        margin: 0 auto;
    }
}

@media all and (min-width: 768px) {
    #iconKey {
        margin: 0;
        width: 85%;
    }
}

@media all and (max-width: 768px) {
    #iconKey {
        margin: 0 auto 20px auto;
    }
}

.closeSummary,
.removeDestination {
    text-indent: -9999px;
    display: block;
    float: right;
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    cursor: pointer;
}

.closeSummary {
    height: 40px;
    width: 40px;
    right: -10px;
}

.removeDestination {
    right: 30px;
}
    .closeSummary:hover,
    .removeDestination:hover {
        opacity: 0.7;
    }

    .closeSummary:before,
    .removeDestination:before {
        background: url('/images/sprite-icons.png') no-repeat -140px -50px transparent;
        background-size: 200px 280px;
        content: "";
        position: absolute;
        left: 5px;
        width: 20px;
        height: 20px;
        display: block;
        float: right;
    }

.appointmentSummary h2 {
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid #ebebeb;
    clear: both;
    margin-bottom: 1rem;
}

.appointmentSummary h3 {
    font-size: 0.875rem;
    padding-bottom: 3px;
}

.appointmentSummary .btn {
    width: 100%;
}

.summaryGroup {
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 1rem;
}

    .summaryGroup.lastVisibleSummaryGroup {
        border-bottom: 0;
    }

@media all and (min-width: 768px) {
    .withDynamicRightColContent .rightContent {
        float: right;
        width: 292px;
    }

    .openSummary,
    .closeSummary {
        display: none;
    }

    .appointmentSummary h2 {
        font-weight: 400;
    }
}

@media all and (min-width: 980px) {
    .withDynamicRightColContent .rightContent {
        width: 300px;
    }

    .appointmentSummary h2 {
        font-size: 1.125rem;
    }
}


/* 
 *  Appoinment Information
 */

.appointmentInformation {
    background: #fafafa;
    padding: 20px 15px 0 15px;
    float: left;
    margin: 0 0 20px;
}

.appointmentCB label {
    display: block;
    position: relative;
    cursor: pointer;
    padding-left: 36px;
}

.appointmentCB input[type="checkbox"] {
    float: left;
    border: 1px solid #fafafa;
    left: -999em;
    position: absolute;
}

.appointmentCB label::before {
    content: "";
    border: 1px solid #b7b7b7;
    width: 25px;
    height: 25px;
    display: block;
    float: left;
    margin-bottom: 10px;
    position: absolute;
    left: 0;
    top: 0;
}

.appointmentCB input[type="checkbox"]:checked + label::after {
    background: url('/images/sprite-icons.png') no-repeat -145px -100px transparent;
    background-size: 200px 280px;
    content: "";
    width: 13px;
    height: 10px;
    display: block;
    float: left;
    top: 7px;
    left: 5px;
    position: absolute;
}

.appointmentInformation .btnSecondary:after {
    clear: both;
}

@media all and (min-width: 768px) {
    .appointmentInformation {
        padding: 22px 20px 5px 20px;
        margin-bottom: 40px;
    }
}

@media all and (min-width: 980px) {
    .appointmentInformation .btnSecondary {
        float: right;
    }

    .appointmentCB {
        width: 50%;
        float: left;
    }
}


/* 
 *  Show hide list, all vaccines, faq
 */

.showHide {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

    .showHide li div {
        display: none;
        padding: 18px 0 10px 28px;
    }

    .showHide li.active div {
        display: block;
    }

    .showHide li .btn {
        margin-right: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .showHide li {
        margin-bottom: 20px;
    }

        .showHide li p {
            line-height: 148%;
        }

        .showHide li > a {
            font-weight: 700;
            position: relative;
            padding: 0 0 0 28px;
            display: inline-block;
        }

            .showHide li > a:before {
                position: absolute;
                content: "";
                background: url(/images/sprite-arrows.png) no-repeat 0 -11px #fff;
                background-size: 95px 40px;
                width: 15px;
                height: 9px;
                display: block;
                top: 5px;
                left: 0;
            }

            .showHide li > a:hover:before {
                background-position: 0 -31px;
                background-size: 95px 40px;
            }

        .showHide li.active > a:before {
            background-position: 0 0;
            background-size: 95px 40px;
            top: 4px;
        }

        .showHide li.active > a:hover:before {
            background-position: 0 -20px;
            background-size: 95px 40px;
        }

.showWhenAdded {
    display: none;
}

@media (min-width: 768px) {
    .showHide {
        margin-top: 12px;
    }

    .questionGroup {
        float: left;
        width: 50%;
        padding-right: 2%;
    }

        .questionGroup:nth-child(even) {
            float: left;
            width: 50%;
            padding-right: 0;
            padding-left: 2%;
        }

    .questionCols {
        margin-bottom: 20px;
        clear: both;
    }

        .questionCols h2 {
            padding: 0;
            height: 80px;
        }
}


/* 
 *  Confirmation summary
 */

dl.confirmationSummary,
.confirmationNote {
    padding: 0 0 5px;
    margin: 0 0 20px;
    border-bottom: 1px solid #ebebeb;
}

.confirmationSummary dt {
    margin: 0 0 3px;
    padding: 0;
    font-weight: 700;
}

.confirmationSummary .destination {
    padding-right: 40px;
}

.confirmationSummary dt::after {
    content: ": ";
}

.confirmationSummary dd {
    margin: 0 0 18px;
}

.confirmationSummary span {
    padding: 5px 0 10px 0;
}

.confirmationNote {
    font-style: italic;
    padding: 0 0 20px;
}

@media (min-width: 768px) {
    .confirmationSummary.inBody dt {
        float: left;
        width: 34%;
        clear: both;
        margin: 0 3% 18px 0;
    }

    .confirmationSummary.inBody dd {
        float: left;
        width: 63%;
    }

    .confirmationSummary.inBody span {
        padding-top: 0;
    }
}

@media (min-width: 980px) {
    .confirmationSummary.inBody dt {
        width: 32%;
    }

    .confirmationSummary.inBody dd {
        width: 61%;
    }
}


/* 
 *  Right col registration
 */

.colRegistration {
    padding: 15px 15px 5px;
    border: 1px solid #0082ca;
    margin-bottom: 20px;
}

    .colRegistration label {
        font-size: 0.875rem;
        bottom: -1px;
    }

    .colRegistration .btn {
        width: 50%;
    }

@media (min-width: 768px) {
    .colRegistration {
        padding: 22px 22px 5px;
    }
}


/* 
 *  Service checker
 */

.serviceChecker {
    margin-top: 20px;
}

    .serviceChecker input,
    .serviceChecker select {
        height: 40px;
    }

    .serviceChecker .realInputFields input {
        height: 32px;
    }

    .serviceChecker .startPick {
        border: 1px solid #ebebeb;
        margin-bottom: 20px;
        height: 40px;
    }

    .serviceChecker .fakePlaceholder {
        padding-top: 6px;
    }

        .serviceChecker .fakePlaceholder:after {
            top: 10px;
        }

    .serviceChecker .divider {
        margin-top: 6px;
    }

    .serviceChecker .returnDate {
        float: right;
    }

    .serviceChecker .btnPrimary {
        padding-left: 20px;
        padding-right: 20px;
    }

    .serviceChecker .addLink {
        clear: both;
        font-weight: 700;
        display: block;
        padding: 0 0 20px;
    }

.leftFields {
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .serviceChecker .leftFields {
        float: left;
        width: 284px;
    }

    .serviceChecker .btnPrimary {
        margin-top: 56px;
        margin-left: 20px;
    }
}


/*
 *  What now?
 */

.whatNow {
    background-color: #fafafa;
    padding: 15px 15px 0 15px;
    margin-bottom: 10px;
}

    .whatNow .btn {
        padding-left: 20px;
        padding-right: 20px;
        margin: 0 20px 20px 0;
        width: 100%;
    }

@media (min-width: 768px) {
    .whatNow {
        padding: 22px;
    }

        .whatNow .btn {
            margin: 0 0 0;
            width: 100%;
        }

        .whatNow .btnPrimary {
            width: 48%;
        }

        .whatNow .btnSecondary {
            float: right;
            width: 48%;
        }
}


/*
 *  Static RH Columns
 */

.staticRHcol {
    padding: 15px 15px;
    border: 1px solid #ebebeb;
    margin-bottom: 20px;
}

.appointmentTypes ul,
.clinicDetails ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clinicDetails ul {
    margin: 0 0 20px;
}

    .appointmentTypes ul li,
    .clinicDetails ul li {
        margin-bottom: 14px;
    }

    .appointmentTypes ul a,
    .clinicDetails ul a {
        font-weight: 700;
    }

.appointmentTypes .iconLink,
.clinicDetails .iconLink {
    padding: 2px 0 3px 36px;
}

.appointmentTypes .specialServices {
    border-top: 1px solid #ebebeb;
    padding-top: 20px;
    margin-top: 16px;
}

.telLink {
    display: inline-block;
    padding-bottom: 30px;
}

.mapPlaceholder {
    width: 100%;
}

.clinicDetails h2.iconClinic {
    padding: 2px 0 20px 36px;
    display: block;
    position: relative;
}

    .clinicDetails h2.iconClinic:before {
        background: url('/images/sprite-icons.png') no-repeat -75px -220px transparent;
        background-size: 200px 280px;
        width: 21px;
        height: 27px;
        top: 0;
        content: "";
        position: absolute;
        left: 0;
        top: 0px;
        display: block;
        float: left;
    }

.clinicDetails h2.iconTelephone {
    padding: 2px 0 20px 36px;
    display: block;
    position: relative;
}

    .clinicDetails h2.iconTelephone:before {
        background: url('/images/sprite-icons.png') no-repeat -96px -220px transparent;
        background-size: 200px 280px;
        width: 24px;
        height: 29px;
        top: 0;
        content: "";
        position: absolute;
        left: 0;
        top: 0px;
        display: block;
        float: left;
    }

.staticRHcol .price {
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-block;
}

    .staticRHcol .price span {
        font-size: 0.875rem;
        font-weight: 300;
    }

.staticRHcol .btn {
    width: 100%;
    margin: 0;
}

.ourPartners img {
    width: 100%;
}

.tagged {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

    .tagged li {
        float: left;
        margin: 0 8px 8px 0;
    }

    .tagged a {
        border: 2px solid #0079c2;
        padding: 5px 15px;
        float: left;
        font-weight: 700;
        font-size: 0.875rem;
        text-align: center;
    }

        .tagged a.selected {
            background-color: #56cee6;
        }

            .tagged a.selected:hover {
                color: #333;
            }

@media (min-width: 768px) {
    .staticRHcol {
        padding: 22px;
    }
}


/*
 *  Condition/Vaccine info box
 */

.conditionInfoBox {
    background: #fafafa;
    padding: 20px 15px 10px 15px;
    margin: 0 0 20px;
}

    .conditionInfoBox ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .conditionInfoBox strong {
        margin: 0 0 3px;
        padding: 0;
        font-weight: 700;
        display: block;
    }

    .conditionInfoBox li {
        font-weight: 400;
        padding: 0 0 20px;
        margin: 0;
    }

@media (min-width: 768px) {
    .conditionInfoBox {
        margin: 0 0 40px;
    }

        .conditionInfoBox .floatInfo {
            float: left;
            width: 50%;
            padding:10px;
        }
}


/*
 *  Did you know?
 */

.didYouKnow ul {
    margin: 0;
    padding: 0 0 0 22px;
}

.didYouKnow li {
    margin-bottom: 14px;
}

.didYouKnow h2 {
    font-size: 1rem;
    font-weight: 700;
    padding-bottom: 20px;
}

    .didYouKnow h2:hover:before {
        background-position: -121px 0;
        background-size: 200px 280px;
    }


/*
 *  Pop over
 */

/*.popOver {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    margin: 20px 0;
    z-index: 101;
    max-width: 550px;
    width: 90%;
    padding: 40px 10px 20px;
}

    .popOver .fullContent {
        max-width: 436px;
        margin: 0 auto;
    }

    .popOver .closeSummary {
        display: block;
    }

    .popOver h1 {
        padding-right: 40px;
    }

@media (min-width: 768px) {
    .popOver .leftContent {
        float: none;
        max-width: 436px;
        width: 436px;
    }

    .popOver .rightContent {
        float: none;
        max-width: 436px;
        width: 436px;
    }
}

@media (min-width: 980px) {
    .popOver {
        max-width: 920px;
    }

        .popOver .fullContent {
            max-width: 920px;
            margin: 0 auto;
        }

        .popOver .leftContent {
            float: left;
            max-width: 436px;
            width: 436px;
        }

        .popOver .rightContent {
            float: right;
            max-width: 292px;
            width: 292px;
        }
}*/


/*
 *  Clinic or pharmacy
 */

.orBox {
    padding: 30px 15px;
}

    .orBox p {
        font-weight: 700;
        padding: 0;
    }

    .orBox .or {
        text-align: center;
        font-size: 1.5625rem;
    }

@media (min-width: 980px) {
    .orBox p {
        float: left;
        width: 41%;
    }

    .orBox .or {
        width: 18%;
        margin-top: 30px;
        padding-right: 10px;
    }
}


/*
 *  Quote
 */

.quote {
    padding: 30px 15px;
}

    .quote p {
        font-size: 1.25rem;
    }



/*
 *  Account & contact us
 */

.accountLinks {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

    .accountLinks li {
        margin: 0 0 12px;
    }

.spacer {
    padding-bottom: 2em;
}

.col .btn {
    padding-left: 20px;
    padding-right: 20px;
    width: 212px;
    float: none;
}

@media (min-width: 768px) {
    .colCell.withButton {
        padding-bottom: 50px;
        position: relative;
    }

    .colCell .btn {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .colCell:nth-child(2) .btn {
        width: 80.58%;
        left: 9.71%;
    }
}

.getInTouch {
    background-color: #fafafa;
    padding: 15px;
    overflow: hidden;
}

    .getInTouch .enquiries {
        padding: 0 0 30px;
    }

    .getInTouch .note {
        padding: 20px 0 10px;
        border-top: 1px solid #ebebeb;
        margin: 10px 0 0;
    }

    .getInTouch ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .getInTouch li {
        margin-bottom: 50px;
        overflow: hidden;
    }

    .getInTouch ul .iconLink {
        padding-left: 44px;
    }

        .getInTouch ul .iconLink span {
            display: block;
            font-weight: 400;
            font-size: 0.875rem;
        }

@media (min-width: 768px) {
    .getInTouch {
        padding: 22px;
    }

        .getInTouch .enquiries {
            float: left;
            width: 45%;
            font-size: 1.25rem;
        }

        .getInTouch ul {
            float: right;
            width: 38%;
        }

        .getInTouch .note {
            clear: both;
            width: 100%;
        }
}


/*
 *  Login registration
 */

.loginBox {
    border: 1px solid #ebebeb;
}

.registrationBox {
    background-color: #fafafa;
    margin-top: 20px;
}

.loginBox,
.registrationBox {
    padding: 15px;
}

.logReg {
    margin: 40px auto 0;
    max-width: 436px;
}

    .logReg .fieldHolder input {
        height: 40px;
    }

    .logReg .btn {
        width: 50%;
    }

@media (min-width: 768px) {
    .logReg {
        margin: 40px 0 0;
        max-width: 980px;
    }

    .loginBox,
    .registrationBox {
        display: table-cell;
        width: 50%;
        height: 100%;
        border: 0 transparent solid;
        background-clip: padding-box;
        padding: 0;
    }

    .loginBox {
        border-right-width: 20px;
    }

        .loginBox h2 {
            padding-bottom: 1.5em;
        }

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

    .logReg .colRow {
        height: 100%;
    }

    .loginBox .holder,
    .registrationBox .holder {
        padding: 22px;
    }

    .loginBox .holder {
        border: 1px solid #ebebeb;
        height: 100%;
    }

    .registrationBox {
        border-left-width: 20px;
    }

        .registrationBox ul {
            margin: 0;
        }
}


/*
 *  Account Appointment
 */

.typeAppointment {
    padding: 0 0 15px;
    margin: 0 0 10px;
    font-weight: 400;
    font-size: 1.25rem;
}

.appointmentHolder .btn {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 10px 10px 0;
}

.appointmentHolder {
    margin-bottom: 30px;
    padding: 0 0 20px;
    border-bottom: 1px solid #ebebeb;
}

    .appointmentHolder dl.confirmationSummary {
        border: 0;
    }

.confirmBtn {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 10px;
    clear: both;
    height: 40px;
}

.category {
    margin: 5px 0;
}

.category-title {
    cursor: pointer;
    margin-bottom: 10px;
}

.cta-button {
    padding: 8px;
    background-color: rgba(251,171,35, 0.8);
    border-radius: 8px;
    font-weight: bold;
}