/*
--C-01-12-2019
.font-urara, [data-font-family=urara], [data-font-family] {
    font-family: Urara;
}

.font-josefin, [data-font-family=josefin] {
    font-family: josefin;
}

.font-baskerville, [data-font-family=baskerville] {
    font-family: baskerville;
}

.font-poiretone, [data-font-family=poiretone] {
    font-family: poiretone;
}

.font-sourcecode, [data-font-family=sourcecode] {
    font-family: sourcecode;
}

.font-myunderwood, [data-font-family=myunderwood] {
    font-family: TrixiePro-Heavy;
}

.font-oldnewspapertype, [data-font-family=oldnewspapertype] {
    font-family: oldnewspapertype;
}


.font-ankecalligraphic, [data-font-family=ankecalligraphic] {
    font-family: Anke Calligraphic;
}

.font-KidTYPE-KrayonA, [data-font-family=kidtypecrayon] {
    font-family: KidTYPE-KrayonA;
}

.font-wilson, [data-font-family=wilson] {
    font-family: wilson;
}

.font-aldo, [data-font-family=aldo] {
    font-family: aldo;
}

.font-lisa, [data-font-family=lisa] {
    font-family: lisa;
}

.font-real, [data-font-family=real] {
    font-family: real;
}

.font-tsui, [data-font-family=tsui] {
    font-family: tsui;
}

.font-chris, [data-font-family=chris] {
    font-family: chris;
}

.font-ira, [data-font-family=ira] {
    font-family: ira;
}

.font-mdd, [data-font-family=mdd] {
    font-family: mdd;
}

.font-erhard, [data-font-family=erhard] {
    font-family: erhard;
}

.intervensi-signature, [data-font-family=Intervensi] {
    font-family: Intervensi;
}

.babylittle, [data-font-family=babylittle] {
    font-family: babylittle;
}
.brittney-signature, [data-font-family=brittney-signature] {
    font-family: brittney-signature;
}
.chocolate-covered-raindrops, [data-font-family=chocolate-covered-raindrops] {
    font-family: chocolate-covered-raindrops;
}
.darling, [data-font-family=darling] {
    font-family: darling;
}
.dilemhandwritten, [data-font-family=dilemhandwritten] {
    font-family: dilemhandwritten;
}
.edwards, [data-font-family=edwards] {
    font-family: edwards;
}
.flowatt, [data-font-family=flowatt] {
    font-family: flowatt;
}
.handwritten-serial-killer, [data-font-family=handwritten-serial-killer] {
    font-family: handwritten-serial-killer;
}
.hollie-mally, [data-font-family=hollie-mally] {
    font-family: hollie-mally;
}
.lancelot, [data-font-family=lancelot] {
    font-family: lancelot;
}
.odaiba-script, [data-font-family=odaiba-script] {
    font-family: odaiba-script;
}
.perfect-redemption, [data-font-family=perfect-redemption] {
    font-family: perfect-redemption;
}
.ronhilli-script, [data-font-family=ronhilli-script] {
    font-family: ronhilli-script;
}
.skulduggery, [data-font-family=skulduggery] {
    font-family: skulduggery;
}
.springwood-line, [data-font-family=springwood-line] {
    font-family: springwood-line;
}
.vancouver-handwritten-script, [data-font-family=vancouver-handwritten-script] {
    font-family: vancouver-handwritten-script;
}
.violaceous, [data-font-family=violaceous] {
    font-family: violaceous;
}
.wattermellon, [data-font-family=wattermellon] {
    font-family: wattermellon;
}*/


.font-fontsystem-uno, [data-font-family=fontsystem-uno] {
    font-family: fontsystem-uno;
}

.hastooltip-error {
    border-color: #bd362f !important;
    border-width: 1px;
}

.hastooltip-warning {
    border-color: rgb(239, 121, 0) !important;
    border-width: 1px;
}




/** START CSS PARA LOS TAMAŅOS DE LOS POPUPS */

@media (min-width: 268px) {
    div.dlgCustomizeColumns {
        width: 240px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 250px;
    }
}

@media (min-width: 278px) {
    div.dlgCustomizeColumns {
        width: 250px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 260px;
    }
}

@media (min-width: 288px) {
    div.dlgCustomizeColumns {
        width: 260px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 270px;
    }
}

@media (min-width: 298px) {
    div.dlgCustomizeColumns {
        width: 270px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 280px;
    }
}

@media (min-width: 308px) {
    div.dlgCustomizeColumns {
        width: 280px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 290px;
    }
}

@media (min-width: 318px) {
    div.dlgCustomizeColumns {
        width: 290px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 300px;
    }
}

@media (min-width: 328px) {
    div.dlgCustomizeColumns {
        width: 300px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 310px;
    }
}

@media (min-width: 338px) {
    div.dlgCustomizeColumns {
        width: 310px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 320px;
    }
}

@media (min-width: 348px) {
    div.dlgCustomizeColumns {
        width: 320px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 330px;
    }
}

@media (min-width: 358px) {
    div.dlgCustomizeColumns {
        width: 330px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 340px;
    }
}

@media (min-width: 368px) {
    div.dlgCustomizeColumns {
        width: 340px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 350px;
    }
}

@media (min-width: 378px) {
    div.dlgCustomizeColumns {
        width: 350px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 360px;
    }
}

@media (min-width: 388px) {
    div.dlgCustomizeColumns {
        width: 360px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 370px;
    }
}

@media (min-width: 398px) {
    div.dlgCustomizeColumns {
        width: 370px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 380px;
    }
}

@media (min-width: 408px) {
    div.dlgCustomizeColumns {
        width: 380px;
    }

    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 390px;
    }
}

@media (min-width: 418px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 400px;
    }
}

@media (min-width: 428px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 410px;
    }
}

@media (min-width: 438px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 420px;
    }
}

@media (min-width: 448px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 430px;
    }
}

@media (min-width: 458px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 440px;
    }
}

@media (min-width: 468px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 450px;
    }
}

@media (min-width: 478px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 460px;
    }
}

@media (min-width: 488px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 470px;
    }
}

@media (min-width: 498px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 480px;
    }
}

@media (min-width: 508px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 490px;
    }
}

@media (min-width: 518px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 500px;
    }
}

@media (min-width: 528px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 510px;
    }
}

@media (min-width: 538px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 520px;
    }
}

@media (min-width: 548px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 530px;
    }
}

@media (min-width: 558px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 540px;
    }
}

@media (min-width: 568px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 550px;
    }
}

@media (min-width: 578px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 560px;
    }
}

@media (min-width: 588px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 570px;
    }
}

@media (min-width: 598px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 580px;
    }
}

@media (min-width: 608px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 590px;
    }
}

@media (min-width: 618px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 600px;
    }
}

@media (min-width: 628px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 610px;
    }
}

@media (min-width: 638px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 620px;
    }
}

@media (min-width: 648px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 630px;
    }
}

@media (min-width: 658px) {
    div[class^="popup-lg-"], div[class*=" popup-lg-"] {
        width: 640px;
    }
}

@media (min-width: 668px) {
    div.popup-lg-700, div.popup-lg-800, div.popup-lg-900, div.popup-lg-1000, div.popup-lg-1100 {
        width: 650px;
    }
}

@media (min-width: 718px) {
    div.popup-lg-800, div.popup-lg-900, div.popup-lg-1000, div.popup-lg-1100 {
        width: 705px;
    }
}

@media (min-width: 768px) {
    div.popup-lg-800, div.popup-lg-900, div.popup-lg-1000, div.popup-lg-1100 {
        width: 755px;
    }
}

@media (min-width: 992px) {
    div.popup-lg-1000, div.popup-lg-1100 {
        width: 980px;
    }
}

div.dlgCustomizeColumns .group-columns .selected {
    background: #ddd;
}

@media (min-width: 1200px) {
    div.dlgCustomizeColumns {
        width: 400px;
        border: 2px solid #ccc;
    }

    div.popup-lg-100 {
        width: 100px;
    }

    div.popup-lg-200 {
        width: 200px;
    }

    div.popup-lg-300 {
        width: 300px;
    }

    div.popup-lg-400 {
        width: 400px;
    }

    div.popup-lg-500 {
        width: 500px;
    }

    div.popup-lg-600 {
        width: 600px;
    }

    div.popup-lg-700 {
        width: 700px;
    }

    div.popup-lg-800 {
        width: 800px;
    }

    div.popup-lg-900 {
        width: 900px;
    }

    div.popup-lg-1000 {
        width: 1000px;
    }

    div.popup-lg-1100 {
        width: 1100px;
    }
}
/** END CSS PARA LOS TAMAŅOS DE LOS POPUPS */

.display-inline {
    display: -webkit-inline-box;
    display: inline-grid;
}

.paper-color {
    z-index: 500;
    position: absolute;
    width: 100%;
    height: 100%;
}

    .paper-color.white, .paper-color[data-color=white], .white .paper-color, [data-color=white] .paper-color {
        background: url(../../Banners/static/images/card_bg_white.png);
    }

    .cream .paper-color, .paper-color.cream, .paper-color[data-color=cream], [data-color=cream] .paper-color {
        background: url(../../Banners/static/images/card_bg_cream.png) repeat;
    }

    .brown .paper-color, .paper-color.brown, .paper-color[data-color=brown], [data-color=brown] .paper-color {
        /*background: url(../../Banners/static/images/bag.gif) repeat;*/
        background: #f8f9f9;
    }

.card-hero {
    -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
    -ms-box-shadow: 0 4px 10px rgba(0,0,0,.2);
    -o-box-shadow: 0 4px 10px rgba(0,0,0,.2);
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-perspective: 2000px;
    -khtml-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
    -webkit-perspective-origin: 50% 0;
    -khtml-perspective-origin: 50% 0;
    -ms-perspective-origin: 50% 0;
    -o-perspective-origin: 50% 0;
    perspective-origin: 50% 0;
    display: block;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

    .card-hero.vertical {
        -webkit-perspective-origin: 0 50%;
        -khtml-perspective-origin: 0 50%;
        -ms-perspective-origin: 0 50%;
        -o-perspective-origin: 0 50%;
        perspective-origin: 0 50%;
    }

    .card-hero.white {
        background: url(../../Banners/static/images/card_bg_white.png)repeat;
    }

    .card-hero.cream {
        background: url(https://Banners/static/images/card_bg_cream.png) repeat;
    }

    .card-hero.brown {
        background: url(https://Banners/static/images/bag.gif) repeat;
    }

    .card-hero .card-hero-images {
        -webkit-transform-style: preserve-3d;
        display: inline-block;
        overflow: hidden;
        position: relative;
        transform-style: preserve-3d;
    }

        .card-hero .card-hero-images, .card-hero .card-hero-images img {
            height: 100%;
            max-height: none;
            max-width: none;
            width: 100%;
        }

            .card-hero .card-hero-images .scene7Image {
                z-index: 900;
                display: block;
                pointer-events: none;
                position: relative;
            }

            .card-hero .card-hero-images .custom-photo-container {
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
            }

            .card-hero .card-hero-images .button-container {
                text-align: center;
            }

            .card-hero .card-hero-images .bleed-mask {
                z-index: 1300;
                display: block;
                height: auto;
                left: 0;
                max-height: 100%;
                max-width: 100%;
                min-height: 100%;
                min-width: 100%;
                pointer-events: none;
                position: absolute;
                top: 0;
                width: auto;
            }

    .card-hero.horizontal .writeCardFlipOpen {
        -webkit-transform-origin: 50% 0;
        -khtml-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-animation: flip-open-animation 1s ease-in-out 1 forwards;
        animation: flip-open-animation 1s ease-in-out 1 forwards;
    }

    .card-hero.horizontal .writeCardFlipClosed {
        -webkit-transform-origin: 50% 0;
        -khtml-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-animation: flip-closed-animation 1s ease-in-out 1 forwards;
        animation: flip-closed-animation 1s ease-in-out 1 forwards;
    }

    .card-hero.vertical .writeCardFlipOpen {
        -webkit-animation: flip-open-animation-vertical 1s ease-in-out 1 forwards;
        animation: flip-open-animation-vertical 1s ease-in-out 1 forwards;
    }

    .card-hero.vertical .writeCardFlipClosed, .card-hero.vertical .writeCardFlipOpen {
        -webkit-transform-origin: 0 50%;
        -khtml-transform-origin: 0 50%;
        transform-origin: 0 50%;
    }

    .card-hero.vertical .writeCardFlipClosed {
        -webkit-animation: flip-closed-animation-vertical 1s ease-in-out 1 forwards;
        animation: flip-closed-animation-vertical 1s ease-in-out 1 forwards;
    }

    .card-hero.has-bleed-mask, .card-hero.has-bleed-mask .scene7Image {
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }


#contentCardImage .content-card-text {
    width: auto;
    height: auto;
}


    #contentCardImage .content-card-text.vertical {
        /*max-width: 350px;
        max-height: 440px;*/
        max-width: 343px;
        max-height: 440px; /*485px*/
    }

    #contentCardImage .content-card-text.horizontal {
        /*max-width: 650px;
        max-height: 464px;*/
        max-width: 686px;
        max-height: 343px;
    }

@-webkit-keyframes flip-open-animation {
    0% {
        -webkit-transform: rotateX(0deg);
        -khtml-transform: rotateX(0deg);
        transform: rotateX(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    99% {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }
}

@keyframes flip-open-animation {
    0% {
        -webkit-transform: rotateX(0deg);
        -khtml-transform: rotateX(0deg);
        transform: rotateX(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    99% {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }
}

@-webkit-keyframes flip-open-animation-vertical {
    0% {
        -webkit-transform: rotateY(0deg);
        -khtml-transform: rotateY(0deg);
        transform: rotateY(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    99% {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }
}

@keyframes flip-open-animation-vertical {
    0% {
        -webkit-transform: rotateY(0deg);
        -khtml-transform: rotateY(0deg);
        transform: rotateY(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    99% {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }
}

@-webkit-keyframes flip-closed-animation {
    0% {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }

    1% {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(0deg);
        -khtml-transform: rotateX(0deg);
        transform: rotateX(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }
}

@keyframes flip-closed-animation {
    0% {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }

    1% {
        -webkit-transform: rotateX(90deg);
        -khtml-transform: rotateX(90deg);
        transform: rotateX(90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(0deg);
        -khtml-transform: rotateX(0deg);
        transform: rotateX(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }
}

@-webkit-keyframes flip-closed-animation-vertical {
    0% {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }

    1% {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(0deg);
        -khtml-transform: rotateY(0deg);
        transform: rotateY(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }
}

@keyframes flip-closed-animation-vertical {
    0% {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }

    1% {
        -webkit-transform: rotateY(-90deg);
        -khtml-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(0deg);
        -khtml-transform: rotateY(0deg);
        transform: rotateY(0deg);
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }
}

.writing-area-mobile {
    z-index: 2100;
    background: #f0f5fb;
    left: 0;
    min-height: 568px;
    padding: .625rem;
    position: fixed;
    top: -200vh;
    width: 100vw;
    -webkit-transition: top .35s cubic-bezier(.45,-.01,1,1);
    transition: top .35s cubic-bezier(.45,-.01,1,1);
}

@media only screen and (max-width:42em) {
    .writing-area-mobile.active {
        -webkit-transition: top .5s cubic-bezier(.06,.21,.25,1);
        transition: top .5s cubic-bezier(.06,.21,.25,1);
        bottom: 0;
        left: 0;
        top: 0;
    }
}

.writing-area-mobile .writing-field {
    background-color: #fff;
    margin-bottom: .625rem;
    overflow-y: scroll;
    resize: none;
}

    .writing-area-mobile .writing-field:focus {
        background-color: #fff;
    }

.writing-area-mobile #message-mobile {
    height: 25vh;
}

.writing-area-mobile #signoff-mobile {
    height: 10vh;
}

.writing-area-mobile .button-save {
    display: block;
    width: 100%;
}

.writing-area {
    -webkit-transform: translate(-50%);
    -khtml-transform: translate(-50%);
    transform: translate(-50%);
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    padding: 0 !important;
    visibility: hidden;
    overflow: hidden;
    font-size: 2.9vw;
}

    .writing-area .no-js {
        visibility: visible;
        width: 100%;
        height: 100%;
    }

    .writing-area, .writing-area.white, .writing-area[data-paper-stock=white] {
        background: url(../../Banners/static/images/card_bg_white.png)repeat;
    }

        .writing-area.cream, .writing-area[data-paper-stock=cream] {
            background: url(https://Banners/static/images/card_bg_cream.png) repeat;
        }

        .writing-area.brown, .writing-area[data-paper-stock=brown] {
            background: url(https://Banners/static/images/bag.gif) repeat;
        }

@media only screen and (max-width:42em) {
    .writing-area {
        font-size: 5vw;
        cursor: pointer;
    }

        .writing-area.disabled {
            cursor: default;
        }
}

.writing-area .writing-card-message {
    margin: 0;
    min-height: 0;
    padding: 0;
    position: absolute;
    overflow-x: hidden;
    word-wrap: break-word;
    height: -webkit-fill-available;
    border-width: 2.5px;
    border-color: #00b7b5;
    border-style: solid;
    height: 87%;
}

.writing-area #signoff {
    margin: 0;
    min-height: 0;
    padding: 0;
    position: absolute;
    overflow-x: hidden;
    word-wrap: break-word;
    height: -webkit-fill-available;
    border-width: 2.5px;
    border-color: #00b7b5;
    border-style: solid;
    height: 10.9%;
    /*margin-top:114.5%;*/
    /*margin-top:61.7%;*/
}

.writing-area .writing-field {
    -webkit-transition: opacity .6s ease-in-out,border-color .6s ease-in-out;
    transition: opacity .6s ease-in-out,border-color .6s ease-in-out;
    overflow: hidden;
    resize: none;
    background: transparent;
    color: inherit;
    border: 1px dotted #bbe4ed;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga" 1;
    -webkit-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;
    -webkit-font-variant-ligatures: common-ligatures;
    font-variant-ligatures: common-ligatures;
}

    .writing-area .writing-field::-moz-selection {
        background: #fbb988;
        color: #005ca6;
    }

    .writing-area .writing-field::selection {
        background: #fbb988;
        color: #005ca6;
    }

@media only screen and (max-width:42em) {
    .writing-area .writing-field {
        border: none;
        opacity: 1;
        pointer-events: none;
    }
}

.writing-area.disabled .writing-field {
    border-width: 0;
}

.writing-area #buttonMobile {
    display: none;
    opacity: 1;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

@media only screen and (max-width:42em) {
    .writing-area #buttonMobile {
        display: block;
    }
}

.writing-area #buttonMobile.hidden {
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}

.writing-area #buttonMobile .button-writing-area-mobile {
    font-family: brandongrotesque-regular,sans-serif;
    letter-spacing: normal;
    background: #fff;
    color: #00265d;
}

@media only screen and (min-width: 42.0625em) {
    .sections-three .main-view,
    .main-view.sub-thumbnail-shown {
        padding-right: 0;
        padding-left: 0;
        /*margin-left: -90px;*/
        /*padding-top: 0px;*/
        max-width: 650px;
    }

        .sections-three .main-view.padding-top-10 {
            padding-top: 15px;
        }

    .contentCardImage .content-card-text {
        width: auto;
        height: auto;
    }

        .contentCardImage .content-card-text.horizontal {
            max-width: 650px;
            max-height: 464px;
        }

        .contentCardImage .content-card-text.vertical {
            max-width: 350px;
            max-height: 440px;
        }

    .preview-card-popup {
        width: auto;
        height: auto;
    }


        .preview-card-popup.horizontal {
            /* max-width: 650px;
            max-height: 468px;*/
            width: 686px;
            height: 343px;
        }

        .preview-card-popup.vertical {
            /* max-width: 350px;
            max-height: 490px;*/
            width: 343px;
            height: 485px;
        }



        .preview-card-popup .writing-area {
            width: 100%;
            height: 100%;
            visibility: visible;
        }

            .preview-card-popup .writing-area .content-preview-card-text {
                position: absolute;
                word-break: break-word;
                white-space: normal;
            }

            .preview-card-popup .writing-area .content-preview-card-text,
            .writing-area .writing-card-message {
                padding-left: 25px !important;
                padding-right: 25px !important;
                /*padding-top: 25px !important;*/
            }
}

.writing-area .writing-card-message {
    height: 100%;
    border-width: 0.5px !important;
    padding: 1px;
}

    .writing-area .writing-card-message.has-back-card {
        height: 50%;
    }


#ContentFont {
    width: 100%;
    height: 100%;
    visibility: visible;
    font-size: 31px;
}

textarea {
    max-width: 100%;
}

.writing-card-message.isAdmin {
    width: 100%;
}

.contentCardImage .content-card-text.vertical.isAdmin {
    width: 350px;
    height: 440px;
}

.contentCardImage .content-card-text.horizontal.isAdmin {
    width: 650px;
    height: 464px;
}

.font-color-blue, [data-font-color=blue], [data-font-color] {
    color: #005ca6 !important;
}

.font-color-black, [data-font-color=black] {
    color: #000 !important;
}

.font-color-purple, [data-font-color=purple] {
    color: #7e3e98 !important;
}

.font-color-crayon, [data-font-color=crayon] {
    color: #e26b0a !important;
}

.font-color-brown, [data-font-color=brown] {
    color: #672d03 !important;
}