@charset "UTF-8";
/* Constants */
/* Mixin's helpers, more info: http://sass-lang.com/guide#topic-6*/
/* Font embeds, examples see: https://www.google.com/fonts */
/* Imports the style from the google fonts cdn */

/*****************************************************/
/********************** FONTS ************************/
/*****************************************************/

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url('Roboto-Regular.ttf') format('truetype');
}


/*****************************************************/
/********************** COLORS ***********************/
/*****************************************************/

:root {
    --accentColor: #1268b2;
    --swipeboxColor: white;
    --swipeboxBgColor: black;

    --nightModeAccentColor: white;
}

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

html :focus,
body :focus {
    outline: none;
}

body {
    overflow-x: hidden;
}

body::after {
    content: " ";
    display: block;
    clear: both;
}

/* Set link color */
span[data-text-edit-color] a {
    color: inherit;
}

*:not(input):not(textarea) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Swiper navigation */
.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
    user-select: none;
    height: 21px;
    width: 17px;
}

.swiper-container .swiper-button-prev {
    background: var(--accentColor) none;
    -webkit-mask: url('ic_left.svg') no-repeat;
    -webkit-mask-size: contain;
    mask: url('ic_left.svg') no-repeat;
    mask-size: contain;
    left: 4%;
}

.swiper-container .swiper-button-next {
    background: var(--accentColor) none;
    -webkit-mask: url('ic_right.svg') no-repeat;
    -webkit-mask-size: contain;
    mask: url('ic_right.svg') no-repeat;
    mask-size: contain;
    right: 4%;
}


.swiper-container .swiper-button-disabled {
    display: none;
}

/*****************************************************/
/******************** NIGHT MODE *********************/
/*****************************************************/

body.night-mode {
    color: var(--nightModeArticleTextColor);
}

body.night-mode #page {
    background-color: var(--nightModeArticleBgColor);
}

body.night-mode .swiper-button-prev,
body.night-mode .swiper-button-next {
    background-color: var(--nightModeAccentColor);
}


#swipebox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: var(--swipeboxBgColor);
}

#swipebox.no-pagination .swiper-pagination {
    display: none;
}

#swipebox.hide-bars .top-bar {
    transform: translateY(-100%);
}

#swipebox.hide-bars .swiper-pagination {
    transform: translateY(100%);
}

#swipebox.no-top-bar .top-bar {
    transform: translateY(-100%) !important;
}

#swipebox a.close {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    z-index: 3;
    -webkit-mask: url('ic_close.svg') no-repeat;
    -webkit-mask-size: contain;
    mask: url('ic_close.svg') no-repeat;
    mask-size: contain;
    background-color: var(--swipeboxColor);
}

#swipebox .top-bar {
    position: absolute;
    z-index: 2;
    width: 100%;
    padding: 10px 40px;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    color: var(--swipeboxColor) !important;
    transform: none;
    transition: transform 0.3s ease;
}

#swipebox .swiper-container {
    height: 100%;
}


#swipebox .swiper-container .swiper-slide img.article-in-image {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translateX(-50%) translateY(-50%);
    max-height: 100%;
    max-width: 100%;
}

#swipebox .swiper-container .pinch-zoom-container {
    width: 100%;
    height: 100%;
}

#swipebox .swiper-container .swipebox-image-wrapper {
    width: 100%;
    height: 100%;
}

#swipebox .swiper-pagination {
    bottom: 0;
    color: var(--swipeboxColor) !important;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 43px;
    text-align: center;
    transform: none;
    transition: transform 0.3s ease;
}




/*****************************************************/
/****************** MEDIA QUERIES ********************/
/*****************************************************/

/*** TABLET ***/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

/*** PHONE ***/
@media only screen and (min-width: 320px) and (max-width: 767px)  {
    .swiper-container .swiper-button-prev {
        left: 2%;
    }

    .swiper-container .swiper-button-next {
        right: 2%;
    }
}