@font-face {
    font-family: "Indie Flower";
    src: url(../fonts/IndieFlower.ttf);
}

@font-face {
    font-family: "Nunito";
    src: url(../fonts/Nunito-Regular.ttf);
}

html, body {
    height: 100%;
}

body {
    font-family: 'Nunito', sans-serif;
    color: white;
}

h1 {
    font-family: 'Indie Flower', cursive;
    font-size: 4rem;
}

h2 {
    font-size: 2rem;
}

a {
    color: white;
}

#main, .articles {
    background-color: transparent;
    position: relative;
    z-index: 3;

    min-height: 100%;  /* Fallback for vh unit */
    min-height: 100vh;

    /* Make it a flex container */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-align : center;
    -webkit-align-items : center;
    -moz-box-align : center;
    -ms-flex-align : center;
    align-items : center;

    /* In legacy web browsers such as Firefox 9
       we need to specify the width of the flex container */
    width: 100%;

    /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
       hence the bootstrap's container won't be aligned to the center anymore.

       Therefore, we should use the following declarations to get it centered again */
    -webkit-box-pack : center;
    -moz-box-pack : center;
    -ms-flex-pack : center;
    -webkit-justify-content : center;
    justify-content : center;

    flex-direction: column;

}

body.is-loading #main > * {
    opacity: 0;
}

#main > * {
    -moz-transition: opacity 0.325s ease-in-out;
    -webkit-transition: opacity 0.325s ease-in-out;
    -ms-transition: opacity 0.325s ease-in-out;
    transition: opacity 0.325s ease-in-out;
}

.articles {
    display: none;
    -webkit-justify-content : inherit;
    justify-content : inherit;
}

.articles article {

    -moz-transform: translateY(0.25rem);
    -webkit-transform: translateY(0.25rem);
    -ms-transform: translateY(0.25rem);
    transform: translateY(0.25rem);
    -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
    -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
    -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
    transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;

    background-color: rgba(137, 44, 160, 0.7);
    padding: 4.5rem 2.5rem 1.5rem 2.5rem;
    width: 80%;
    max-width: 800px;

    margin: 2rem 0px;
    border-radius: 10px;
    opacity: 0;

    font-size: 1.2rem;
}

body.is-article-visible .articles {
    display: flex;
}
body.is-article-visible .articles article.active {
    transform: translateY(0);
    opacity: 1;
}
body.is-article-visible #main {
    opacity: 0;
}

.articles article .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    text-indent: 4rem;
    overflow: hidden;
    white-space: nowrap;
}

.articles article .close:before {
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
    content: '';
    display: block;
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.articles article .close:hover:before {
    background-color: rgba(255, 255, 255, 0.075);
}

.articles article .close:active:before {
    background-color: rgba(255, 255, 255, 0.175);
}

.articles article figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,.5));
    border-radius: 4px;
}

#gallery img {
    border-radius: 8px;
}

#imagelightbox {
    position: fixed;
    z-index: 9999;
    -ms-touch-action: none;
    touch-action: none;
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,1));
    border-radius: 8px;
}

#imagelightbox-overlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
    -moz-transition-delay: none !important;
    -webkit-transition-delay: none !important;
    -ms-transition-delay: none !important;
    transition-delay: none !important;
}

.logo-wrapper {
    filter: drop-shadow(0px 0px 20px rgba(0,0,0,.5));
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.content {
    border-top: solid 1px white;
    border-bottom: solid 1px white;
    width: 95%;
    max-width: 1200px;
    text-shadow: 0px 2px rgb(74, 74, 74);
    margin-bottom: 3.5rem;
    margin-top: 3.5rem;
    /*max-height: 10rem;*/
}
.home-page .content {
    margin-top: auto;
}

.content .inner {
    -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
    -moz-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
    max-height: 100rem;
}

body.is-loading .content .inner {
    max-height: 0;
    opacity: 0;
}

.content .inner p {
    font-size: 1.2rem;
}

.content .inner hr {
    width: 50%;
}

#nav,
#languageNav {
    display: flex;

    flex-direction: row;
    justify-content: center;
    align-items: stretch;

    width: 90%;
    overflow: hidden;
    flex-wrap: wrap;
}
#languageNav {
    justify-content: flex-end;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 9;
}

#nav a,
#languageNav a {
    padding: 10px;
    border: solid 1px white;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    min-width: 25%;
    text-align: center;
    margin: 5px;
    -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#languageNav a {
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    font-size: 0.85rem;
    min-width: 120px;
}

#nav a.home-link {
    background-color: rgba(137, 44, 160, 0.5);
}
#nav a.news-link {
    color: rgb(137, 44, 160);
    background-color: rgba(255, 255, 255, 0.7);
}
#nav a.news-link:hover,
#nav a.news-link:active {
    background-color: rgba(255, 255, 255, 1);
}
#nav a:hover,
#languageNav a:hover {
    background-color: rgba(137, 44, 160, 0.7);
}
#nav a:active,
#languageNav a:active {
    background-color: rgb(137, 44, 160);
}
#nav a h5 {
    margin: 10px 0px;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    font-size: 0.85rem;
}
#nav a p {
    display: block;
    text-transform: none;
    font-size: 1rem;
    margin: 0;
}

/* BG */

#bg {
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-backface-visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

#bg:before, #bg:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#bg:before {
    -moz-transition: background-color 1.5s ease-in-out;
    -webkit-transition: background-color 1.5s ease-in-out;
    -ms-transition: background-color 1.5s ease-in-out;
    transition: background-color 1.5s ease-in-out;
    -moz-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
    background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5));
    background-size: auto, 256px 256px;
    background-position: center, center;
    background-repeat: no-repeat, repeat;
    z-index: 2;
}

#bg:after {
    -moz-transform: scale(1.125);
    -webkit-transform: scale(1.125);
    -ms-transform: scale(1.125);
    transform: scale(1.125);
    -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
    -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
    -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}
body.is-article-visible #bg:after {
    -moz-transform: scale(1.0825);
    -webkit-transform: scale(1.0825);
    -ms-transform: scale(1.0825);
    transform: scale(1.0825);
    -moz-filter: blur(0.2rem);
    -webkit-filter: blur(0.2rem);
    -ms-filter: blur(0.2rem);
    filter: blur(0.2rem);
}

.home-page #bg:after {
    background-image: url("../images/bg_home.jpg");
}
.private-page #bg:after {
    background-image: url("../images/bg_private.jpg");
}
.pro-page #bg:after {
    background-image: url("../images/bg_pro.jpg");
}

body.is-loading #bg:before {
    background-color: #000000;
}

.text-center {
    text-align: center;
}
.center-block {
    margin-left: auto;
    margin-right: auto;
}

.email-link span {
    direction: rtl;
    unicode-bidi: bidi-override;
    cursor: pointer;
}

@media screen and (max-width: 480px) {
    .articles article {
        padding: 3rem 1.5rem 0.5rem 1.5rem ;
    }
    .logo-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    .content {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    #nav a {
        width: 100%;
    }
    .logo-wrapper {
        flex-direction: column;
    }

    .articles article {
        padding: 3.5rem 2rem 0.5rem 2rem ;
    }

    .articles article .close:before {
        top: 0.875rem;
        left: 0.875rem;
        width: 2.25rem;
        height: 2.25rem;
        background-size: 14px 14px;
    }

    .logo-wrapper {
        margin-top: 30px;
    }
}

/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    #nav a {
        width: 45%;
    }
}

/* Medium devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    #nav a {
        width: 45%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {

}