/* These styles are applied to all user-side pages in Userside Master and to the CKEditor iFrames in GetCSSFromTemplateForCKEditor() */

/*User-side columns*/
.hubb-columns-two {
    column-count: 2;
    max-width: 80%;
    column-gap: 60px;
}

.hubb-columns-three {
    column-count: 3;
    max-width: 90%;
    column-gap: 40px;
}

.hubb-columns-two, .hubb-columns-three {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    column-rule-style: solid;
    column-rule-color: lightgrey;
}

@media screen and (max-width:800px) {
    .hubb-columns-three {
        column-count: 2
    }
}

@media screen and (max-width:450px) {
    .hubb-columns-two, .hubb-columns-three {
        column-count: 1
    }
}

/*User-side table improvements*/
table.hubb-article-table {
    background-color: #f5f5f5;
    width: 100%;
    border: #eaeaea solid 2px;
}

    table.hubb-article-table td {
        border: #eaeaea solid 1px;
    }

/* Userside Image module images*/
div.hubb-image-module img {
    max-width: 100%;
}
div.hubb-image-module.text-overlay {
    position: relative;
    text-align: center !important;
}
div.hubb-image-module div.hubb-image-module-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.hubb-image-module div.hubb-image-module-text h1 {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: white;
}

/* Elements with shine */
div.hover-shine img, img.hover-shine {
    -webkit-mask-image: linear-gradient(-45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(-45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 120%;
    mask-position: 120%;
}

    div.hover-shine:hover img, img.hover-shine:hover {
        transition: mask-position 1s ease,-webkit-mask-position 1s ease;
        -webkit-mask-position: 0%;
        mask-position: 0%;
        opacity: 1;
    }