*,
*::before,
*::after {
    box-sizing: inherit;
}

:root {
    --home-color:#333;
}

body {
    margin:0;
    padding:0;
    vertical-align: baseline;
    text-align: center;
    box-sizing: border-box;
    font-size:100%;
    line-height: 1.6;
    font-family: 'Questrial', sans-serif;
    background:#fff;
}
.mobileVisible {
    display: none;
}
.mobileHidden {
    display: block;
}

.topContainer {
    width: 100%;
    display: flex;

}
.domContainer {
    width: 96%;
    margin:1% auto;
    border-radius: 15px;
    background: #fff;
    box-shadow: 2px -4px 12px #cdcdcd, -5px 5px 10px #d0cac9;
}
.webContent {
    width: 80%;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #eeeeee;
}
.webContentArticle {
    width: 80%;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #fff;
    padding-bottom:3rem;
}
.trBorderRadius, .trBorderRadius img {
    border-top-right-radius: 15px;
}
.brBorderRadius, .brBorderRadius img {
    border-bottom-right-radius: 15px;
}
.webSidebar {
    width: 20%;
    background: #eee;
}
.sidebarMenu {
    margin-top:10em;
}
.sidebarLogo {
    background: url(../gfx/mobile_logo.png) no-repeat center;
    background-size: contain;
    width: 72%;
    position: relative;
    margin: 1em auto;
    height: 120px;
    top: 0.35rem;
}
.sidebarLogo a {
    width:100%;
    height: 100%;
    display: block;
}
.sidebarNews {
    padding:10px 6px;
    border-top: 2px solid #CCC;
    background-color: #eee;

}
.sidebarNewsTitle {
    font-size:2rem;
    font-weight: bold;
    text-align: center;
    margin:2rem 0;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #fff;
}
.sidebarNewLine:hover {
    background:#f6ebe6;
    cursor: pointer;
}
.sidebarNewLine a {
    color:#222;
    text-decoration: none;
    font-size:0.9rem;
}
.sidebarNewLine {
    padding:0.2rem 0.8rem;
    text-align: left;
    line-height: 1.3rem;
}
.sidebarNewLine + .sidebarNewLine {
    border-top:1px solid #fde7f9;
}


.listingContainer {
    margin:3px 0 0 0;
    /*display: flex;*/
    /*gap: 3px;*/
    /*flex-flow:wrap;*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    overflow: hidden;
    /*grid-gap: 3px;*/
}

.listingBox {
    /*width: 25%;*/
    /*width: calc(25% - 2.333333px);*/
    background: #FFF;
    position: relative;
    cursor: pointer;
}
.listingBoxBig {
    /*width: 50%;*/
    /*width: calc(50% - 2px);*/
    grid-column: 3 / span 2;
    grid-row: second-line / 4;
    background: #FFF;
}
.listingArticleImage {
    position: relative;
    overflow: hidden;
}
.listingArticleImage img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: right;
}
.listingBoxBig img {
    height: 500px;
    object-fit: cover;
    object-position: right;
}
h2 {
    font-size:1.5rem;
    margin:0;
}
.listingBox h2 {
    text-align: left;
    line-height: 1.25rem;
    padding: 0.6rem;
}
.listingBox h2 a {
    font-size:1.15rem;
    color: #000;
}
p {
    margin-bottom: 0.25em;
}
a {
    text-decoration: none;
}
.articleDescription {
    font-weight: bold;
    font-size:1.25rem;
    line-height: 1.35rem;
}
.articleContainer {
    text-align: left;
    font-size:1.05rem;
    line-height: 1.25rem;
}
.articleSection {
    color: #345abe;
    text-shadow: 2px 2px 2px #c1c1c1;
}
.articleTitle {
    margin:2rem 0 0.2rem 0;
    padding:0;
    font-size:2rem;
    line-height: 2.3rem;
}
.articleDate {
    font-size:1rem;
    color:#999;
}
.articleImage {
    margin-top:2rem;
}
.articleDescription,.articleContent,.articleTitle,.articleDate, .articleImage,.articleSection {
    padding: 0 4rem;
}
.articleImage img {
    width: 100%;
    height: auto;
}
.articleContent img {
    width: 80%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.articleContent h2 {
    margin:2rem 0 0 0;
    position: relative;
    top: 0.5rem;
    color: #666;
}
.slideshowContainer + .slideshowContainer {
    margin-top:3px;
}
.slideshowContainer {
    width: 100%;
    height:45rem;
    display: flex;
    gap:3px;
    overflow: hidden;
    user-select: none;
}
.flexReverse {
    flex-direction: row-reverse;
}
.slideshowHalfCol {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.slideshowBig {
    width: 100%;
    height: 60%;
    display: flex;
    gap: 3px;
    flex:1;
}
.slideshowSmall {
    width: 100%;
    height: 40%;
    display: flex;
    gap:3px;
    /*flex:1;*/
}
.slideshowItem {
    position: relative;
    height: 100%;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}
.slideshowImage {
    height: 100%;
    width: 100%;
    position: relative;
}
.slideshowImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.slideshowDesc {
    position: absolute;
    bottom:0;
    z-index: 1;
    padding: 0.6rem 1.6rem;
    text-align: left;
    pointer-events: none;
}
.slideshowDesc h5 {
    font-size: 1.05rem;
    line-height: 1.05rem;
    color:#AAA;
    text-shadow: 1px 1px 2px black;
    margin: 0 0 0.3rem 0;
    padding: 0;
}
.slideshowDesc h4 {
    margin:0;
    padding:0;
}
.slideshowBig h4 a {
    text-decoration: none;
    color:#FFF;
    font-size:3rem;
    line-height: 3rem;
    text-shadow: 1px 1px 2px black;
}

.slideshowSmall h5 {
    margin: 0 0 0.15rem 0;
}
.slideshowSmall h4 a {
    text-decoration: none;
    color:#FFF;
    font-size:1.9rem;
    line-height: 1.9rem;
    text-shadow: 1px 1px 2px black;
}

.slideshowDesc h6 {
    font-size:2rem;
    font-weight: bold;
}

.slideshowDesc a:hover {
    color:#FEFFEF;
}


.glow::before {
    position: absolute;
    top: 50%;
    left:50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(0,0,0,.2);
    /*border-radius: 100%;*/
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.homepageLinkMore {
    background:#eee;
    padding:2rem 0;
    text-align: center;
}
.homepageLinkMore a {
    color:#FA2615;
    font-weight: bold;
    font-size:1.65rem;
}
.homepageLinkMore a:hover, .listingPageNumber a:hover {
    color:#000;
}

.listingPagination {
    display: flex;
    background:#eee;
    padding:2rem 0;
    justify-content: center;
}
.listingPageNumber {

}
.listingPageNumber + .listingPageNumber {
    margin-left:1rem;
}
.listingPageNumber a {
    color:#FA2615;
    font-weight: bold;
    font-size:1.05rem;
}
.listingPageSelected a {
    color:#999;
    font-weight: normal;
}

.glow:hover::before {
    animation: circle 0.5s forwards;
}
.sidebarCatMenu {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    /*gap:1px;*/
    padding:0;
    margin:0;
}
.sidebarCatMenu li {
    border:1px solid #AAA;
    position: relative;
    flex: 1;
    white-space: nowrap;
}
.sidebarCatMenu li:hover {
    border:1px solid #035397;
}
.sidebarCatMenu li:before {
    position: absolute;
    content:'';
    display: block;
    top:0;
    left:0;
    z-index: -1;
    width:100%;
    height: 100%;
    border:1px solid #FFF;
}
.sidebarCatMenu li:hover:before {
    border:1px solid #5089C6;
}
.sidebarCatMenu li a {
    padding: 0.4rem 0.5rem;
    font-size:0.95rem;
    display: block;
    width:100%;
    color:#FFF;
    text-transform: uppercase;
    height: 100%;
    /*background:rgba(150,186,255,0.6);*/
    background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
    transition: all 1s;
    text-shadow: 1px 1px 2px #5b5b5b;
    white-space: break-spaces;
}
.sidebarCatMenu li a:hover {
    /*background:rgba(150,186,255,1);*/
}
.sidebarMenuMobile {
    position: fixed;
    top: 1rem;
    right: 1rem;
    font-size:1.3rem;
    cursor: pointer;
    text-transform: uppercase;
    transition:all 1s ease-in;
}
.sidebarMenuMobile:hover {
    color:#FA2615;
}
.sidebarMenuClose {
    cursor: pointer;
    font-size:1.1rem;
    margin:1rem 0;
    text-align: center;
}

footer {
    width: 100%;
    background:#eee;
    padding: 1rem 0;
    text-align: center;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

@keyframes circle {
    0% {
        width: 1%;
        height: 1%;

    }
    100% {
        opacity: .5;
        background: rgba(255,255,255,.52);
        width: 200%;
        height: 200%;
    }
    /*100% {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    opacity: 0;*/
    /*}*/
}




@media (max-width: 85em) { /* 1350px */

    .articleContent img {
        width: 100%;
        height: auto;
    }

}


@media (max-width: 66em) { /* 1050px */

    .sidebarLogo {
        width:80%;
    }
    .articleDescription, .articleContent, .articleTitle, .articleDate, .articleImage, .articleSection {
        padding: 0 2rem;
    }


}

@media (max-width: 55em) { /* 875px */
    .mobileVisible {
        display: block;
    }
    .mobileHidden {
        display: none;
    }


    .articleContent img {
        width: 100%;
        height: auto;
    }
    .sidebarLogo {
        width:45%;
    }
    .webSidebar {
        width: 100%;
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 2;
    }
    .slideshowBig h4 a, .slideshowBig h5 a {
        font-size:2rem;
        line-height: 2rem;
    }
    .slideshowItem {
        margin-top:3px;
    }
    .webContentArticle, .webContent,.slideshowHalfCol {
        width:100%;
        border-radius: unset;
    }
    footer {
        border-radius: unset;
    }
    .webContent {
        padding-top:4rem;
    }
    .slideshowContainer {
        height: auto;
        display: block;
    }
    .slideshowHalfCol, .slideshowBig, .slideshowSmall {
        display: block;
    }
    .domContainer {
        width: 100%;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: unset;
    }
    .articleDescription, .articleContent, .articleTitle, .articleDate, .articleImage, .articleSection {
        padding: 0 1rem;
    }
}


@media (max-width: 40em) { /* 640px */
    .sidebarLogo {
        width:95%;
    }
    .articleContent img {
        width: 100%;
        height: auto;
    }
    .articleDescription, .articleContent, .articleTitle, .articleDate, .articleImage, .articleSection {
        padding: 0 0.5rem;
    }

}