html,
body {
    height: 100%;
}

p {
    margin: 10px 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: block;
    margin: 0;
    padding: 0;
}

img,
a img {
    border: 0;
    height: auto;
    outline: none;
    text-decoration: none;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.mcnTextBlock:after,
.mcnTextBlockInner:after {
    display: table;
    clear: both;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box !important;
}

html,
body,
.wrapper {
    height: auto;
    min-height: 100vh;
}

body {
    position: relative;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.templateSection {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}

.templateSection:last-of-type {
    flex-grow: 2;
}

.templateColumn {
    display: flex;
    flex-direction: column;
}

.columnContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.column {
    flex: 1;
}

a.mcnButton {
    display: block;
}

.mcnImage {
    vertical-align: bottom;
}

.mcnTextContent {
    word-break: break-word;
    flex-flow: column;
}

.mcnTextContent img {
    max-width: 100%;
    height: auto !important;
}

.mcnDividerBlock {
    table-layout: fixed !important;
}

.mcPrivacyBadge {
    opacity: 0.6;
}

.mcPrivacyBadge:hover {
    opacity: 1;
}

.mcPrivacyBadge a.privacyLink {
    text-decoration: none;
}

.mcPrivacyBadge a.privacyLink:hover {
    text-decoration: underline;
}

.mcnTemplatePageBanner {
    position: fixed;
    padding: 18px;
    bottom: 0;
    top: unset;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 1;
}

.mcnPageBannerContainer {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 18px;
    box-shadow: 0px 2px 3px rgba(36, 28, 21, 0.1);
    border: 1px solid #dedddc;
}

.mcnPageBannerContentContainer {
    padding: 0 24px 0 0;
}

.mcnCloseButton {
    opacity: .4;
    background: url(data:image/png;
    base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAAEVQTFRFAAAA ////////////////////////////////////////////////////////AAAACwsLlpaWv7+/wMDAwcHB5+fn////js+8jgAAAA90Uk5TABkaT2lvcJi1ttny8/v+KMQKuwAAAJdJREFUKM91UuEawiAIRGdp6pZzi/d/1HDo11bd/RAFTk6QSGFdiDnH4CydYfzMHbM3H/+U+IQ0Df994QuWW8//8kvk4JjEP0itjtf962K86FQ9a6nN1LKqNktOE8uzbMybGOU4eii3imvfZal6DhR7vZastAOR8lAi6UIap4wD8KqAikO58IGwJbiJsO14UHi0+DP8+z5v3a8i3EEOD1IAAAAASUVORK5CYII=); position:absolute;
    top:18px;
    right: 18px;
    height: 24px;
    width: 24px;
}

.mcnCloseButton:hover {
    opacity: .9;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.mcnPaymentTextContent {
    min-width: 284px;
}

.templateSection {
    padding-right: 0px;
    padding-left: 0px;
}

.contentContainer {
    max-width: 960px;
    width: 100%;
    flex: 0 0 auto;
}

h1 {
    color: #FFFFFF;
    font-family: Nunito;
    font-size: 48px;
    font-style: normal;
    font-weight: bold;
    line-height: 125%;
    letter-spacing: normal;
    text-align: left;
}

h2 {
    color: #4A4A4A;
    font-family: Nunito;
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: 125%;
    letter-spacing: normal;
    text-align: left;
}

h3 {
    color: #72DDC3;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 200%;
    letter-spacing: normal;
    text-align: center;
}

h4 {
    color: #4A4A4A;
    font-family: Nunito;
    font-size: 36px;
    font-style: normal;
    font-weight: bold;
    line-height: 150%;
    letter-spacing: normal;
    text-align: center;
}

h5 {
    color: #FFFFFF;
    font-family: Nunito;
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    line-height: 150%;
    letter-spacing: normal;
    text-align: center;
}

.templateHeader {
    background-color: #transparent;
    background-image: url("/dc/onboarding/dark-sky.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 16px;
    padding-bottom: 16px;
}

.headerContainer {
    background-color: #transparent;
    background-image: none;
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.templateHeader .mcnTextContent,
.templateHeader .mcnTextContent p {
    color: #FFFFFF;
    font-family: Nunito;
    font-size: 18px;
    line-height: 150%;
    text-align: left;
}

.templateHeader .mcnTextContent a,
.templateHeader .mcnTextContent p a {
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: none;
}

.templateSplash {
    background-color: #112133;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 45px;
    padding-bottom: 45px;
}

.splashContainer {
    background-color: #transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.splashContainer .mcnTextContent,
.splashContainer .mcnTextContent p {
    color: #FFFFFF;
    font-family: Nunito;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
}

.splashContainer .mcnTextContent a,
.splashContainer .mcnTextContent p a {
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: underline;
}

.templateBody {
    background-color: #ffffff;
    background-image: url("/dc/onboarding/dark-sky.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

.bodyContainer {
    background-color: #transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}

.bodyContainer .mcnTextContent,
.bodyContainer .mcnTextContent p,
.mcnTemplatePageBanner {
    color: #686868;
    font-family: Nunito;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
}

.bodyContainer .mcnTextContent a,
.bodyContainer .mcnTextContent p a,
.mcnTemplatePageBanner a,
.mcnTemplatePageBanner p a {
    color: #4A4A4A;
    font-weight: normal;
    text-decoration: underline;
}

.templateDetails {
    background-color: #112133;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 44px;
    padding-bottom: 44px;
}

.detailsContainer {
    background-color: #transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.detailsContainer .mcnTextContent,
.detailsContainer .mcnTextContent p {
    color: #FFFFFF;
    font-family: Nunito;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
}

.detailsContainer .mcnTextContent a,
.detailsContainer .mcnTextContent p a {
    color: #FFFFFF;
    font-weight: normal;
    text-decoration: underline;
}

.templateFooter {
    background-color: #ffffff;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/dc/onboarding/dark-sky.jpg");
    background-repeat: repeat;
    background-position: bottom;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 50px;
    padding-bottom: 0px;
}

.footerLeftColumnContainer {
    background-color: #transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}

.footerLeftColumnContainer .mcnTextContent,
.footerLeftColumnContainer .mcnTextContent p {
    color: #686868;
    font-family: Nunito;
    font-size: 18px;
    line-height: 150%;
    text-align: left;
}

.footerLeftColumnContainer .mcnTextContent a,
.footerLeftColumnContainer .mcnTextContent p a {
    color: #4A4A4A;
    font-weight: normal;
    text-decoration: underline;
}

.footerRightColumnContainer {
    background-color: #transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}

.footerRightColumnContainer .mcnTextContent,
.footerRightColumnContainer .mcnTextContent p {
    color: #686868;
    font-family: Nunito;
    font-size: 18px;
    line-height: 150%;
    text-align: left;
}

.footerRightColumnContainer .mcnTextContent a,
.footerRightColumnContainer .mcnTextContent p a {
    color: #4A4A4A;
    font-weight: normal;
    text-decoration: underline;
}

@media only screen and (max-width: 480px) {

    body,
    table,
    td,
    p,
    a,
    li,
    blockquote {
        -webkit-text-size-adjust: none !important;
    }
}

@media only screen and (max-width: 480px) {
    body {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcPrivacyBadge {
        padding: 12px 12px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcPrivacyBadgeContent {
        flex-direction: column;
    }
}

@media only screen and (max-width: 480px) {
    .monkeyrewards {
        order: 1;
        margin-bottom: 18px;
    }
}

@media only screen and (max-width: 480px) {
    .reportAbuseWrapper {
        order: 2;
    }
}

@media only screen and (max-width: 480px) {
    .mcnCaptionBlockInner {
        flex: 0 0 auto;
    }
}

@media only screen and (max-width: 480px) {
    .mcnCaptionBlock {
        flex-direction: column;
    }
}

@media only screen and (max-width: 480px) {
    .mcnVideoContainer {
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnRetinaImage {
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnTextBlockInner {
        padding: 9px 0 !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnImageGroupContent {
        padding: 9px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnCaptionColumn {
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnSignUpFormContentContainer {
        padding-right: 0 !important;
        padding-left: 0 !important;
        flex: auto !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnCaptionLeftContentInner,
    .mcnCaptionRightContentInner {
        padding: 0 9px 9px 9px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnImageCardRightContentInner .mcnImageCardImageContent,
    .mcnImageCardLeftContentInner .mcnImageCardImageContent {
        padding: 18px 18px 0 18px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnTextBlockInner,
    .mcnBoxedTextBlockInner,
    .mcnImageCardLeftContentInner,
    .mcnImageCardRightContentInner,
    .mcnCaptionLeftContentInner,
    .mcnCaptionRightContentInner {
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnCaptionLeftContentInner .mcnTextContent,
    .mcnCaptionRightContentInner .mcnTextContent {
        padding: 9px 9px 0 9px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnImageCardTopImageContent,
    .mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent {
        padding-top: 18px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnImageCardBottomImageContent {
        padding-bottom: 9px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnImageGroupBlockInner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnImageGroupBlockOuter {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnTextContent,
    .mcnBoxedTextContentColumn {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnImageCardLeftImageContent,
    .mcnImageCardRightImageContent {
        padding-right: 18px !important;
        padding-bottom: 0 !important;
        padding-left: 18px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcpreview-image-uploader {
        display: none !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnRecContentContainer--row {
        flex: 0 0 50% !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnRecContentContainer .mcnProductTitle,
    .mcnRecContentContainer .mcnButtonBlock,
    .mcnRecContentContainer .mcnProductPrice {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnPaymentProduct {
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnPaymentTextContent {
        min-width: 200px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnPaymentGalleryImages div {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnGalleryImage:nth-last-child(2):first-child,
    .mcnGalleryImage:nth-last-child(2):first-child~.mcnGalleryImage {
        height: 90px !important;
        min-width: 55px !important;
        max-width: 90px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnGalleryImage:nth-last-child(3):first-child,
    .mcnGalleryImage:nth-last-child(3):first-child~.mcnGalleryImage {
        height: 60px !important;
        min-width: 55px !important;
        max-width: 60px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnGalleryImage:nth-last-child(4):first-child,
    .mcnGalleryImage:nth-last-child(4):first-child~.mcnGalleryImage {
        height: 60px !important;
        min-width: 35px !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnGalleryImage:nth-last-child(5):first-child,
    .mcnGalleryImage:nth-last-child(5):first-child~.mcnGalleryImage {
        height: 50px !important;
        min-width: 35px !important;
    }
}

@media only screen and (max-width: 480px) {
    .columnContainer {
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcPrivacyBadge {
        opacity: 1;
    }
}

@media only screen and (max-width: 480px) {
    h1 {
        font-size: 36px !important;
        line-height: 125% !important;
        font-weight: bold !important;
    }
}

@media only screen and (max-width: 480px) {
    h2 {
        font-size: 30px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    h3 {
        font-size: 24px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    h4 {
        font-size: 20px !important;
        line-height: 200% !important;
    }
}

@media only screen and (max-width: 480px) {

    .mcnBoxedTextContentContainer .mcnTextContent,
    .mcnBoxedTextContentContainer .mcnTextContent p {
        font-size: 14px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .headerLeftColumnContainer .mcnTextContent,
    .headerLeftColumnContainer .mcnTextContent p {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .headerRightColumnContainer .mcnTextContent,
    .headerRightColumnContainer .mcnTextContent p {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .splashContainer .mcnTextContent,
    .splashContainer .mcnTextContent p {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .bodyContainer .mcnTextContent,
    .bodyContainer .mcnTextContent p,
    .mcnTemplatePageBanner {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .detailsContainer .mcnTextContent,
    .detailsContainer .mcnTextContent p {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .footerLeftColumnContainer .mcnTextContent,
    .footerLeftColumnContainer .mcnTextContent p {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {

    .footerRightColumnContainer .mcnTextContent,
    .footerRightColumnContainer .mcnTextContent p {
        font-size: 20px !important;
        line-height: 150% !important;
    }
}

.bullet-point-pp {
    text-align: left;
}

.bullet-point-container {
    margin: 0 45px !important;
}

@media only screen and (max-width: 767px) {
    .bullet-point-container {
        margin: 15px !important;
    }
}