@font-face {
    font-family: 'Open Sans';
    src: url(../fonts/Lato-Light.woff) format('woff')
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    background-color: #EBF0F1;
    font-family: 'Open Sans', Verdana, Arial;
    font-size: 1.3em;
    letter-spacing: .02em;
    line-height: 1.5em;
    color: #47443e;
    position: relative;
}

a {
    display: inline;
}

a:hover {
    text-decoration: none;
}

section {
    padding: 20px;
    margin-bottom: 40px;
    background-color: #FFF;
    border-radius: 4px;
}

.section-margin {
    margin: .5em 0
}

.navbar {
    background-color: rgba(255, 255, 255, 0.8);
}

.masthead {
    height: 20vh;
    min-height: 300px;
    /* background-image: url('/images/promos/pop30.jpg'); */
    background-size: cover;
    /* background-position: center; */
    background-repeat: no-repeat;
}

.header {
    /* background-color: #EBF0F1; */
    /* background-color:rgba(0,0,0,.2); */
    padding-bottom: 80px;
    position: relative;
    z-index: 999;
}

.header a {
    color: #3a3a3a;
}

.header a:hover {
    color: #666666;
}

.header li {
    font-size: 0.7em;
}

.footer {
    padding-top: 10px;
    bottom: 0;
    width: 100%;
    height: 120px;
    /* Set the fixed height of the footer here */
}

.newsletter {
    width: 100%;
    background-color: #aaadaf;
    margin: 0 auto;
    margin-bottom: 1.5em;
    padding: 1.2em;
    text-align: center;
}

img {
    border: 0
}

label {
    display: inline-block;
    margin-bottom: .5em;
    margin-right: .1em
}

aside, main {
    display: block
}

#sitelogo {
    padding-top: 0.6em;
    position: absolute;
    top: 0;
    margin-top: 0;
    white-space: nowrap;
    z-index: 0
}

#sitelogo a {
    outline: 0
}

a.content {
    font-weight: 700;
    font-weight: bold;
}

.footer-social {
    padding-bottom: 5px;
    text-align: right;
    font-size: 0.8em;
}

.footer-social a {
    color: #3a3a3a;
}

.footer-social a:hover {
    color: #666666;
}

.footer-social p {
    padding-top: 10px;
    margin-bottom: 2px;
}

.footer-social img {
    margin-left: .8em;
}

.footer-logo img {
    margin: 15px;
}

/** Project sidebar menu **/

/* #navbar-right .nav-item {
    width: 100%;
} */

.bd-toc {
    /* font-size: .8rem;
    font-weight: 400; */
    position: sticky;
    top: 5rem;
    /* height: calc(100vh - 1rem); */
    overflow-y: auto;
}

#navbar-right a {
    font-size: .8rem;
    line-height: 1.1rem;
    /* padding: 0 5px;
    margin-top: 3px;*/
    margin-bottom: 10px;
    color: black;
}

#navbar-right li .active {
    font-weight: 600;
}

/* Main landing (magazine) page elements styling: */

#magazine, section.magazine-like {
    display: block;
    position: relative;
    margin: auto;
    font-size: 2.9em;
    line-height: 1.5em;
    text-align: center;
}

#spread, div.spread-like {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 320px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 1px 2px #31363c;
    border-radius: 4px;
}

#spreadlogo {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 420px;
    width: 100%;
    height: 420px;
    background-position: top left;
    background-repeat: no-repeat;
}

.promotext {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    max-height: 254px;
    padding: 33px 22px;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    /* background: linear-gradient(-90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); */
    font-size: 0.3em;
    line-height: 1.2em;
    color: white;
    text-shadow: 0em 0em 0.4em black;
    overflow: auto;
}

.fullwidth {
    width: 92%;
    max-height: 298px;
    padding: 11px 4%;
}

.promo, .promo-like {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 320px;
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 1px 2px #31363c;
    border-radius: 4px;
}

#magazine a, section.magazine-like a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    text-decoration: none;
}

/* #magazine a:focus,
section.magazine-like a:focus {
    outline: 0.1em solid #586068;
} */

div.spread-like, .promo-like {
    background-position: center center;
}

/* 

#projects, section.projects-like {
    display: block;
    position: relative;
    margin: auto;
    max-width: 950px;
    font-size: 2.9em;
    line-height: 1.5em;
}

#projects div, section.projects-like div {
    display: inline-block;
    position: relative;
    max-width: 450px;
    width: 100%;
    background-color: #495460;
    background-position: top left;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 1px 2px #31363c;
    border-radius: 4px;
}

#projects a, section.projects-like a {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 30%;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
}

#projects span, section.projects-like span {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.4em 0em;
    background-color: black;
    border-radius: 0px 0px 4px 4px;
    font-size: 0.4em;
    line-height: 1.2em;
    color: white;
    opacity: 0.6;
    transition: opacity 0.5s;
} */

.question, .bold {
    font-weight: bold;
}

.kicker {
    font-size: 2em;
    font-weight: normal;
    letter-spacing: 0.011em;
    line-height: 1.1em;
}

.blockquote {
    margin-top: 40px;
    margin-bottom: 40px;
}

.blockquote-custom {
    position: relative;
    font-size: 1.1rem;
}

.blockquote-custom-icon {
    font-size: 2.0em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -40px;
    left: 50px;
}

/* Articles page elements styling: */

#index {
    position: relative;
    margin: auto;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding: 1em;
    background: white;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
    border-radius: 4px 4px 4px 4px;
    line-height: 2em;
    text-align: center;
    color: #292929;
    text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.3);
    overflow: hidden;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    -o-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

#index a {
    margin: 0em 0.4em;
    border-bottom: 1px dotted #8594a4;
    text-decoration: none;
    color: #3d4a56;
    white-space: nowrap;
}

/* .permalink {
    font-size: 2em;
    text-decoration: none;
} */

.postdate {
    display: block;
    margin-top: -1.5em;
    margin-bottom: 1.5em;
    color: #4d5965;
}

.metamain {
    margin: 1.6em;
    color: #4d5965;
}

article a {
    text-decoration: underline;
    color: #3a3a3a;
}

article a:hover {
    color: #666666;
}

article li {
    margin-bottom: 1em;
}

a.external {
    padding-right: 20px;
    background: url('../images/icons/external-icon.png') center right no-repeat;
}

.illustration {
    background-color: rgba(255, 255, 255, 0.7);
    background-image: url('../images/loading.gif');
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.quote {
    padding: 2em 1em;
    background: url('../images/quotea.png') top left no-repeat, url('../images/quoteb.png') bottom right no-repeat;
    text-align: left;
}

.metamain {
    margin: 1.6em;
    color: #4d5965;
}

.meta {
    margin-top: 0em;
    padding-bottom: 1.2em;
    border-bottom: 1px dashed #c6ced7;
    color: #4d5965;
}

#scrollup {
    display: block;
    position: fixed;
    bottom: 1.7em;
    right: 1em;
    width: 50px;
    height: 50px;
    background: #687889;
    background: rgba(105, 121, 138, 0.4);
    background-image: url('../images/up.png');
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 8px;
    cursor: pointer;
}

/* Store banner pub */

article .text {
    display: inline-block;
    position: relative;
    max-width: 28.5em;
    width: 90%;
    margin: 0em 1em;
    text-align: left;
    vertical-align: middle;
}

article .product-image {
    display: inline-block;
    position: relative;
    width: 250px;
    margin: 0em 1em;
    text-align: left;
    vertical-align: middle;
}

article .product-image-single {
    display: inline-block;
    position: relative;
    width: 100px;
    margin: 0em 1em;
    text-align: left;
    vertical-align: middle;
}

article.feature {
    display: block;
    position: relative;
    margin: auto;
    margin-bottom: 1em;
    padding: 0.5em;
    border: solid #A9A5A3 1px;
    border-radius: 4px 4px 4px 4px;
    line-height: 1.5em;
    text-align: center;
    color: #292929;
    text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
    word-wrap: break-word;
    padding-right: 8em;
    background-color: #F2EDE9;
    background-image: url('../images/bonus.png');
    background-position: center right;
    background-repeat: no-repeat;
}

article.prince {
    background-image: url('../images/bonus-prince.png');
}

article.package {
    background-image: url('../images/bonus-package.png');
}

article.store {
    margin-bottom: 1em;
    border: solid #A9A5A3 1px;
    border-radius: 4px 4px 4px 4px;
    line-height: 1.5em;
    text-align: center;
    color: #292929;
    text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
    word-wrap: break-word;
    background-color: #ffffff;
}

article .blurb {
    margin: 0em 1em;
    text-align: center;
}

article .text-project {
    display: inline-block;
    position: relative;
    margin: 0em 1em;
    text-align: left;
    vertical-align: middle;
}

article.project {
    margin-top: 2em;
    margin-bottom: 2em;
    line-height: 1.5em;
    text-align: center;
    color: #292929;
    text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
    word-wrap: break-word;
    background-color: #ebebeb;
}

.project-title {
    padding-top: 0.5m;
    padding-bottom: 1em;
}

.ink-pen {
    color: #5980d4;
}

.ink-pen a {
    color: #5980d4;
    display: inline;
}

.ink-pen a:hover {
    color: #5980d4;
    text-decoration: none
}

/* Styling for supplemental page elements: */

div.socialinvite {
    display: table;
    width: inherit;
    margin: 1em 0em;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

div.socialinvite a {
    display: block;
    width: 100%;
    text-decoration: none;
}

span.facebooklogo, span.twitterlogo, span.instagramlogo, span.youtubelogo {
    display: table-cell;
    width: 7em;
    height: 5em;
    background-color: rgba(215, 215, 215, 0.3);
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 4px 0px 0px 4px;
}

span.facebooklogo {
    background-image: url('../images/social/facebook-link.png');
}

span.twitterlogo {
    background-image: url('../images/social/twitter-link.png');
}

span.instagramlogo {
    background-image: url('../images/social/instagram-link.png');
}

span.youtubelogo {
    background-image: url('../images/social/youtube-link.png');
}

span.invitetext {
    display: table-cell;
    width: auto;
    height: 5em;
    padding: 1em;
    border-left: 2px dashed rgba(200, 200, 200, 0.3);
}

/* Conditional (site-scaling) style adjustments: */

@media (max-width:270px) {
    .custom-card {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width:980px) {
    .section-margin {
        margin: .5em 0
    }
}

@media (min-width:1100px) {
    .section-margin {
        margin: .5em 0
    }
}

@media (min-width:600px) {
    .h3, h3 {
        font-size: 36px
    }
}

@media (max-width:575px) {
    .article_info {
        margin-left: 0
    }
}

/* Large */

@media screen and (max-width: 1280px) {
    #banner {
        padding: 6em 0;
        margin: 3em 0 0 0;
    }
}

@media (max-width: 990px) {
    article .product-image {
        text-align: center;
    }
    article .product-image-single {
        text-align: center;
    }
    article .text {
        text-align: center;
    }
}

/* Store */

.product-holder {
    position: relative;
    display: block;
    z-index: 1;
}

.product-holder .product-image {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: 0px;
    z-index: 2;
    max-height: 98%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-article {
    border: 0;
    margin-bottom: 30px
}

.card-article p {
    margin-bottom: 0
}

.article-price {
    color: #d52349
}

.card-article div img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.card-article div:hover img {
    opacity: .8;
}

/* Start: Product first version */

.article_info {
    margin-top: 0px
}

/* .article_info h1 {
    font-weight: bold;
} */

.article_info h3 {
    color: #eb3847;
    margin-bottom: 5em;
}

.article_info h2 {
    text-decoration: none;
    color: #212529;
    font-weight: bold;
}

.article_info h4 {
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: normal;
    color: #4a4a4a;
}

.article_title, .article_title:hover {
    text-decoration: none;
    color: #212529;
    font-weight: bold;
}

.article_info p {
    margin-top: 2em;
    margin-bottom: 2em;
}

.button-color-price {
    color: #eb3847;
}

.version-price {
    font-size: 0.5em;
    color: #eb3847;
}

.buy-article {
    position: relative;
    margin-top: 1em;
    margin-bottom: .2em;
}

.buy-article label {
    font-size: 14px;
    color: #aaa9a9;
    font-weight: 400;
}

.button-external-amazon {
    background: #f8e6b8;
    border: 1px solid #aaa9a9;
    border-radius: 4px;
    font-size: 1em;
    display: inline-block;
    padding: .7em;
    font-size: .8em;
    margin: 5px 5px 5px 5px;
    color: #00000F;
    text-decoration: none;
    background: -moz-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8e6b8), color-stop(6%, #f3d686), color-stop(100%, #ebb62c));
    background: -webkit-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
    background: -o-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
    background: -ms-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
    background: linear-gradient(to bottom, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f8e6b8', endColorstr='#ebb62c', GradientType=0);
}

.button-external-amazon:hover {
    text-decoration: none;
    border: 1px solid #000000;
    color: #000000;
}

.button, .button-external {
    background-color: #fdfdfd;
    border: 1px solid #aaa9a9;
    border-radius: 4px;
    font-size: 1em;
    display: inline-block;
    padding: .7em;
    font-size: .8em;
    text-decoration: none;
    color: #aaa9a9;
    margin: 5px 5px 5px 5px;
}

.button:hover, .button-external:hover {
    text-decoration: none;
    border: 1px solid #000000;
    color: #000000;
}

.button-icon {
    height: 15px;
    width: 15px;
    margin-right: .5em
}

.icon {
    height: 25px;
    width: 25px;
    margin-right: .5em
}

.image-popup {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.avatar {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 50% 50% 50% 50%;
    padding: 4px;
    width: 2.5em;
}

a.custom-card, a.custom-card:hover {
    color: inherit;
}

.imagebox {
    border: 1px transparent rgba(0, 0, 0, .125);
    /* background: black; */
    padding: 0px;
    position: relative;
    text-align: center;
    width: 100%;
}

/* .imagebox img {
    opacity: 1;
    transition: 0.5s opacity;
} */

.imagebox .imagebox-desc {
    background-color: rgba(73, 72, 72, 0.5);
    bottom: 0px;
    color: white;
    font-size: 0.9em;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
    transition: 0.5s padding;
    text-align: center;
    width: 100%;
}

.imagebox:hover img {
    opacity: 0.7;
}

/* .imagebox:hover .imagebox-desc {
    padding-bottom: 10%;
} */