input {
    width: 70%;
    margin-bottom: 10px;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: rgb(7, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
}

input:focus {
    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
}

.btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #e6e6e6;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border: 1px solid #e6e6e6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    *margin-left: .3em;
}


/* .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; } */

.btn-large {
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


/* .btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } */

.btn-primary,
.btn-primary:hover {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.btn-primary.active {
    color: rgba(255, 255, 255, 0.75);
}

.btn-primary {
    background-color: #0d1e32;
    background-image: -moz-linear-gradient(top, #6eb6de, #0d1e32);
    background-image: -ms-linear-gradient(top, #6eb6de, #0d1e32);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#0d1e32));
    background-image: -webkit-linear-gradient(top, #6eb6de, #0d1e32);
    background-image: -o-linear-gradient(top, #6eb6de, #0d1e32);
    background-image: linear-gradient(top, #6eb6de, #0d1e32);
    background-repeat: repeat-x;
    filter: progid: dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#0d1e32, GradientType=0);
    border: 1px solid #3762bc;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
}


/* .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; } */

.btn-block {
    width: 100%;
    display: block;
}

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

table {
    border-collapse: collapse;
}

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,
#bodyTable,
#bodyCell {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mcnPreviewText {
    display: none !important;
}

#outlook a {
    padding: 0;
}

img {
    -ms-interpolation-mode: bicubic;
}

table {
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}

.ReadMsgBody {
    width: 100%;
}

.ExternalClass {
    width: 100%;
}

p,
a,
li,
td,
blockquote {
    mso-line-height-rule: exactly;
}

a[href^=tel],
a[href^=sms] {
    color: inherit;
    cursor: default;
    text-decoration: none;
}

p,
a,
li,
td,
body,
table,
blockquote {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass td,
.ExternalClass div,
.ExternalClass span,
.ExternalClass font {
    line-height: 100%;
}

a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

#bodyCell {
    padding: 10px;
}

.templateContainer {
    max-width: 600px !important;
}

a.mcnButton {
    display: block;
}

.mcnImage,
.mcnRetinaImage {
    vertical-align: bottom;
}

.mcnTextContent {
    word-break: break-word;
}

.mcnTextContent img {
    height: auto !important;
}

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


/*
@tab Page
@section Background Style
@tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
*/

body,
#bodyTable {
    /*@editable*/
    background-color: #000000;
}


/*
@tab Page
@section Background Style
@tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
*/

#bodyCell {
    /*@editable*/
    border-top: 0;
}


/*
@tab Page
@section Email Border
@tip Set the border for your email.
*/

.templateContainer {
    /*@editable*/
    border: 0;
}


/*
@tab Page
@section Heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/

h1 {
    /*@editable*/
    color: #202020;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 26px;
    /*@editable*/
    font-style: normal;
    /*@editable*/
    font-weight: bold;
    /*@editable*/
    line-height: 125%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align: left;
}


/*
@tab Page
@section Heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/

h2 {
    /*@editable*/
    color: #202020;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 22px;
    /*@editable*/
    font-style: normal;
    /*@editable*/
    font-weight: bold;
    /*@editable*/
    line-height: 125%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align: left;
}


/*
@tab Page
@section Heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/

h3 {
    /*@editable*/
    color: #202020;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 20px;
    /*@editable*/
    font-style: normal;
    /*@editable*/
    font-weight: bold;
    /*@editable*/
    line-height: 125%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align: left;
}


/*
@tab Page
@section Heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/

h4 {
    /*@editable*/
    color: #202020;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 18px;
    /*@editable*/
    font-style: normal;
    /*@editable*/
    font-weight: bold;
    /*@editable*/
    line-height: 125%;
    /*@editable*/
    letter-spacing: normal;
    /*@editable*/
    text-align: left;
}


/*
@tab Preheader
@section Preheader Style
@tip Set the background color and borders for your email's preheader area.
*/

#templatePreheader {
    /*@editable*/
    background-color: #FAFAFA;
    /*@editable*/
    background-image: none;
    /*@editable*/
    background-repeat: no-repeat;
    /*@editable*/
    background-position: center;
    /*@editable*/
    background-size: cover;
    /*@editable*/
    border-top: 0;
    /*@editable*/
    border-bottom: 0;
    /*@editable*/
    padding-top: 9px;
    /*@editable*/
    padding-bottom: 9px;
}


/*
@tab Preheader
@section Preheader Text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/

#templatePreheader .mcnTextContent,
#templatePreheader .mcnTextContent p {
    /*@editable*/
    color: #656565;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 12px;
    /*@editable*/
    line-height: 150%;
    /*@editable*/
    text-align: left;
}


/*
@tab Preheader
@section Preheader Link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/

#templatePreheader .mcnTextContent a,
#templatePreheader .mcnTextContent p a {
    /*@editable*/
    color: #656565;
    /*@editable*/
    font-weight: normal;
    /*@editable*/
    text-decoration: underline;
}


/*
@tab Header
@section Header Style
@tip Set the background color and borders for your email's header area.
*/

#templateHeader {
    /*@editable*/
    background-color: #0d1e32;
    /*@editable*/
    background-image: none;
    /*@editable*/
    background-repeat: no-repeat;
    /*@editable*/
    background-position: center;
    /*@editable*/
    background-size: cover;
    /*@editable*/
    border-top: 0;
    /*@editable*/
    border-bottom: 0;
    /*@editable*/
    padding-top: 10px;
    /*@editable*/
    padding-bottom: 10px;
}


/*
@tab Header
@section Header Text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/

#templateHeader .mcnTextContent,
#templateHeader .mcnTextContent p {
    /*@editable*/
    color: #202020;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 16px;
    /*@editable*/
    line-height: 150%;
    /*@editable*/
    text-align: left;
}


/*
@tab Header
@section Header Link
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/

#templateHeader .mcnTextContent a,
#templateHeader .mcnTextContent p a {
    /*@editable*/
    color: #007C89;
    /*@editable*/
    font-weight: normal;
    /*@editable*/
    text-decoration: underline;
}


/*
@tab Body
@section Body Style
@tip Set the background color and borders for your email's body area.
*/

#templateBody {
    /*@editable*/
    background-color: #FFFFFF;
    /*@editable*/
    background-image: none;
    /*@editable*/
    background-repeat: no-repeat;
    /*@editable*/
    background-position: center;
    /*@editable*/
    background-size: cover;
    /*@editable*/
    border-top: 0;
    /*@editable*/
    border-bottom: 2px solid #EAEAEA;
    /*@editable*/
    padding-top: 0;
    /*@editable*/
    padding-bottom: 9px;
}


/*
@tab Body
@section Body Text
@tip Set the styling for your email's body text. Choose a size and color that is easy to read.
*/

#templateBody .mcnTextContent,
#templateBody .mcnTextContent p {
    /*@editable*/
    color: #202020;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 10px;
    /*@editable*/
    line-height: 150%;
    /*@editable*/
    text-align: left;
}


/*
@tab Body
@section Body Link
@tip Set the styling for your email's body links. Choose a color that helps them stand out from your text.
*/

#templateBody .mcnTextContent a,
#templateBody .mcnTextContent p a {
    /*@editable*/
    color: #007C89;
    /*@editable*/
    font-weight: normal;
    /*@editable*/
    text-decoration: underline;
}


/*
@tab Footer
@section Footer Style
@tip Set the background color and borders for your email's footer area.
*/

#templateFooter {
    /*@editable*/
    background-color: #FAFAFA;
    /*@editable*/
    background-image: none;
    /*@editable*/
    background-repeat: no-repeat;
    /*@editable*/
    background-position: center;
    /*@editable*/
    background-size: cover;
    /*@editable*/
    border-top: 0;
    /*@editable*/
    border-bottom: 0;
    /*@editable*/
    padding-top: 9px;
    /*@editable*/
    padding-bottom: 9px;
}


/*
@tab Footer
@section Footer Text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
*/

#templateFooter .mcnTextContent,
#templateFooter .mcnTextContent p {
    /*@editable*/
    color: #656565;
    /*@editable*/
    font-family: Helvetica;
    /*@editable*/
    font-size: 12px;
    /*@editable*/
    line-height: 150%;
    /*@editable*/
    text-align: center;
}


/*
@tab Footer
@section Footer Link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/

#templateFooter .mcnTextContent a,
#templateFooter .mcnTextContent p a {
    /*@editable*/
    color: #656565;
    /*@editable*/
    font-weight: normal;
    /*@editable*/
    text-decoration: underline;
}

@media only screen and (min-width:768px) {
    .templateContainer {
        width: 600px !important;
    }
}

@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) {
    .mcnRetinaImage {
        max-width: 100% !important;
    }
}

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

@media only screen and (max-width: 480px) {
    .mcnCartContainer,
    .mcnCaptionTopContent,
    .mcnRecContentContainer,
    .mcnCaptionBottomContent,
    .mcnTextContentContainer,
    .mcnBoxedTextContentContainer,
    .mcnImageGroupContentContainer,
    .mcnCaptionLeftTextContentContainer,
    .mcnCaptionRightTextContentContainer,
    .mcnCaptionLeftImageContentContainer,
    .mcnCaptionRightImageContentContainer,
    .mcnImageCardLeftTextContentContainer,
    .mcnImageCardRightTextContentContainer,
    .mcnImageCardLeftImageContentContainer,
    .mcnImageCardRightImageContentContainer {
        max-width: 100% !important;
        width: 100% !important;
    }
}

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

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

@media only screen and (max-width: 480px) {
    .mcnCaptionLeftContentOuter .mcnTextContent,
    .mcnCaptionRightContentOuter .mcnTextContent {
        padding-top: 9px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mcnImageCardTopImageContent,
    .mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,
    .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) {
    /*
@tab Mobile Styles
@section Heading 1
@tip Make the first-level headings larger in size for better readability on small screens.
*/
    h1 {
        /*@editable*/
        font-size: 22px !important;
        /*@editable*/
        line-height: 125% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Heading 2
@tip Make the second-level headings larger in size for better readability on small screens.
*/
    h2 {
        /*@editable*/
        font-size: 20px !important;
        /*@editable*/
        line-height: 125% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Heading 3
@tip Make the third-level headings larger in size for better readability on small screens.
*/
    h3 {
        /*@editable*/
        font-size: 18px !important;
        /*@editable*/
        line-height: 125% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Heading 4
@tip Make the fourth-level headings larger in size for better readability on small screens.
*/
    h4 {
        /*@editable*/
        font-size: 16px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Boxed Text
@tip Make the boxed text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
    .mcnBoxedTextContentContainer .mcnTextContent,
    .mcnBoxedTextContentContainer .mcnTextContent p {
        /*@editable*/
        font-size: 14px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Preheader Visibility
@tip Set the visibility of the email's preheader on small screens. You can hide it to save space.
*/
    #templatePreheader {
        /*@editable*/
        display: block !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Preheader Text
@tip Make the preheader text larger in size for better readability on small screens.
*/
    #templatePreheader .mcnTextContent,
    #templatePreheader .mcnTextContent p {
        /*@editable*/
        font-size: 14px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Header Text
@tip Make the header text larger in size for better readability on small screens.
*/
    #templateHeader .mcnTextContent,
    #templateHeader .mcnTextContent p {
        /*@editable*/
        font-size: 16px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Body Text
@tip Make the body text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
    #templateBody .mcnTextContent,
    #templateBody .mcnTextContent p {
        /*@editable*/
        font-size: 16px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}

@media only screen and (max-width: 480px) {
    /*
@tab Mobile Styles
@section Footer Text
@tip Make the footer content text larger in size for better readability on small screens.
*/
    #templateFooter .mcnTextContent,
    #templateFooter .mcnTextContent p {
        /*@editable*/
        font-size: 14px !important;
        /*@editable*/
        line-height: 150% !important;
    }
}