/*
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
*/

/*********************************
GLOBAL
*********************************/

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-style: normal;
}
.btn-primary {
    background-color: #00ACFB;
    border-color: #00ACFB;
}
.btn-primary:hover {
    color: #fff;
    background-color: #ff6929;
    border-color: #ff6929;
}

/*********************************
TOP LINKS
*********************************/

.top-links {
    height: 42px;
    background-color: #2A323A;
    overflow: hidden;
}
.top-links ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
}
.top-links ul li {
    display: block;
    float: left;
    padding-right: 1.4em;
}
.top-links ul li a {
    color: #fff;
    line-height: 42px;
    text-decoration: none;
    font-weight: 300;
}
.top-links .btn-cart {
    display: block;
    float: right;
    color: #fff;
    line-height: 28px;
    text-decoration: none;
    border: 2px solid #fff;
    margin-top:5px;
    padding: 0 1.4em;
    font-weight: 300;
    border-radius: 0.25rem;
}
.top-links .btn-cart:hover {
    background-color: #fff;
    color: #2A323A;
}

/*********************************
TOP NAV
*********************************/

.top-nav {
    margin-top: 42px;
    height: 135px;
    background-color: #00ACFB;
}
.top-nav .sitelogo {
    max-height: 55px;
    margin-top: 40px;
}
.top-nav nav {
    display: block;
    float: right;
    margin-top: 45px;
}
.top-nav nav .btn {
    margin-right: 0;
    padding-right: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    color: #fff;
}
.top-nav nav .btn:hover {
    color: #ff6929;
}

/*********************************
FOOTER
*********************************/

footer {
    background-color: #2A323A;
}
.footerbox {
    padding: 3em 0;
    text-align: center;
    color: #fff;
}
.footerbox p {
    padding: 0;
    margin: 0;
}
.footerbox ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footerbox p,
.footerbox a,
.footerbox ul li a {
    color: #e1e1e1;
    text-decoration: none;
    opacity: 0.8;
}
.footerbox a:hover,
.footerbox ul li a:hover {
    color: #fff;
    opacity: 0.99;
}
.footerbox form input,
.footerbox form input:focus,
.footerbox form input:active {
    border-color: #fff;
    background-color: #2A323A;
    color: #fff;
    box-shadow: none;
}
.footerbox form button.btn-primary {
    color: #2A323A;
    background-color: #fff;
    border-color: #fff;
}
.footerbox form button.btn-primary:hover {
    background-color: #e1e1e1;
    border-color: #c1c1c1;
}
.footerbox ul.sociallinks {
    margin: 0 auto;
    text-align: center;
    display: block;
    float: none;
}
.footerbox ul.sociallinks li {
    display: inline-block;
    padding: 0 0.4em;
}
.footerbox ul.paymentoptions {
    margin: 0 auto 1em 0;
    text-align: center;
    display: block;
    float: none;
}
.footerbox ul.paymentoptions li {
    display: inline-block;
    padding: 0 0.4em;
}


/*********************************
E-CARDS
*********************************/

#editorLogo:hover {
    cursor: pointer;
}
.album .card:hover {
    cursor: pointer;
}
.album .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.album .shadow-sm:hover {
    box-shadow: 0 0.250rem 0.50rem rgb(0 0 0 / 48%) !important;
}
.album .shadow-sm:hover .btn-outline-secondary {
    color: #fff;
    background-color: #464646;
    border-color: #464646;
}

/*********************************
E-CARDS EDITOR
*********************************/

div#e-card-container {
    border: 4px solid #1cabe2;
    display: flex;
}
div#e-card-spacer {
    width: 58%;
    max-width: 650px;
}
div#e-card-video-wrapper {
    position: relative;
}
div#animation_container {
    background-color:rgba(255, 255, 255, 1.00);
    width:650px;
    height:650px;
}
canvas#canvas {
    width:650px;
    height:650px;
    position: absolute;
    display: none;
    background-color:rgba(255, 255, 255, 1.00);
}
div#dom_overlay_container {
    pointer-events:none;
    overflow:hidden;
    width:650px;
    height:650px;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
div#_preload_div_ {
    position:absolute;
    top:0;
    left:0;
    display: inline-block;
    height:650px;
    width: 650px;
    text-align: center;
}
div#_preload_div_ > span {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
div#_preload_div_ > img {
    vertical-align: middle;
    max-height: 100%;
}
div#editor-spacer {
    width: calc(100% - 650px);
    height: 650px;
    border-left: 4px solid #1cabe2;
}
div#editor-wrapper {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px
}
div#editorTxt {
    height: 330px;
    font-size: 24px;
}
div#editorComp {
    height: 130px;
    font-size: 24px;
}
div#logo-wrapper {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0 10px 10px 10px;
}
div#editorLogo {
    height: 118px;
}
p#ecardLogoPlaceHolder {
    text-align: center;
    color: #ccc;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

@media (min-width: 1180px) and (max-width: 1399px) {

    section#ecard-details div.container {
        width: 100%;
        max-width: 100%;
    }

}
@media (max-width: 1140px) {

    #e-card-video-wrapper #animation_container,
    #e-card-video-wrapper canvas {
        max-width: 100%;
        width: 100%;
    }

    div#e-card-container {
        border: 4px solid #1cabe2;
        display: block;
    }
    div#e-card-spacer {
        width: 100%;
        max-width: 100%;
        float: none;
        display: block;
        margin: 0 auto;
    }
    div#editor-spacer {
        float: none;
        width: 100%;
        max-width: 100%;
        display: block;
        border-left: none;
        border-top: 4px solid #1cabe2;
    }
}


/*********************************
CART
*********************************/

table.cart .btn.btn-link {
    color: #000;
}
table.cart .btn.btn-link:hover {
    color: #666;
}
table.cart input.cart-qty {
    text-align: center;
    width: 65px;
}