@font-face {
    font-family: epika;
    src: url('fonts/EpikaSerifCondensedPremium-Medium.woff2') format('woff2'), url('fonts/EpikaSerifCondensedPremium-Medium.woff') format('woff');
}

@font-face {
    font-family: anton;
    src: url('fonts/Anton-Regular.woff2') format('woff2'), url('fonts/Anton-Regular.woff') format('woff');
}

@font-face {
    font-family: montserrat;
    src: url('fonts/Montserrat-Black.woff2') format('woff2'), url('fonts/Montserrat-Black.woff') format('woff');
}

@font-face {
    font-family: playfair;
    src: url('fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2'), url('fonts/PlayfairDisplay-VariableFont_wght.woff') format('woff');
}

@font-face {
    font-family: xanh;
    src: url('fonts/XanhMono-Regular.woff2') format('woff2'), url('fonts/XanhMono-Regular.woff') format('woff');
}

@font-face {
    font-family: georgia;
    src: url('fonts/Georgia.woff2') format('woff2'), url('fonts/Georgia.woff') format('woff');
}

@font-face {
    font-family: oswald;
    src: url('fonts/Oswald-Regular.woff2') format('woff2'), url('fonts/Oswald-Regular.woff') format('woff');
}

@font-face {
    font-family: roboto;
    src: url('fonts/Roboto-Regular.woff2') format('woff2'), url('fonts/Roboto-Regular.woff') format('woff');
}

@font-face {
    font-family: pacifico;
    src: url('fonts/Pacifico-Regular.woff2') format('woff2'), url('fonts/Pacifico-Regular.woff') format('woff');
}

:root {
    --black: #000;
    --font: "georgia", serif;
    --sans: "Arial", sans-serif;
    --red: #D80C13;
    --blue: #08437F;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body{
    font-family: var(--font);
    color: var(--black);
    padding: 20px 30px 15px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    margin: 0;
    min-height: 100vh;
    background-image: url("img/bg.png");
    background-position: center;
    background-size: 280px auto;
    background-repeat: no-repeat;
    position: relative;
}

body.homepage, body.registration, body.timeline, body.boleslove, body.nsu{
    background-image: none;
}

a{
    text-decoration: none;
    color: var(--black);
}

.color-blue{
    color: var(--blue);
}

.color-red{
    color: var(--red);
}

.tt-uppercase{
    text-transform: uppercase;
    font-style: italic;
}

#paging a {
    text-decoration: underline;
    color: var(--blue);
}

.container{
    position: relative;
}

#main-content{
    flex-grow: 1;
    flex-basis: 100%;
    display: flex;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

#main-content-holder{
    width: 100%;
}

.main-title{
    font-weight: 400;
    text-align: center;
    font-size: 60px;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0 0 30px;
}

#image-logo{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.project-description{
    display: none;
}

.nav-list{
    margin: 0 0 30px;
    list-style-type: none;
    padding: 0;
}

.nav-item{
    font-size: 20px;
}

.nav-link{
    padding: 2px 0 2px ;
    display: inline-block;
    position: relative;
}

.nav-link::after{
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: var(--red);
    left: 50%;
    position: absolute;
    bottom: 0;
    transition: left 0.3s, width 0.3s;
}

.nav-link:hover::after, .nav-link.active::after{
    left: 0%;
    width: 100%;
}

.nav-item:nth-child(even) .nav-link:hover, .nav-item:nth-child(even) .nav-link.active{
    color: var(--blue);
}

.nav-item:nth-child(odd) .nav-link:hover, .nav-item:nth-child(odd) .nav-link.active{
    color: var(--red);
}

.nav-item:nth-child(even) .nav-link:hover::after, .nav-item:nth-child(even) .nav-link.active::after{
    background-color: var(--blue);
}

#footer{
    position: relative;
    z-index: 1;
    padding: 10px 0 0;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.copyright{
    display: block;
    font-size: 14px;
    line-height: 17px;
    max-width: 300px;
    font-weight: bold;
    margin-bottom: 2em;
}

#about-us-article{
    font-size: 14px;
    line-height: 1.2;
    flex-grow: 1;
}

#about-him-article{
    font-size: 14px;
    line-height: 18px;
}

.about-us-article-title, #about-him-article-title, #about-title{
    font-size: 2em;
    margin: 0 0 0.5em;
    text-transform: none;
    font-weight: 700;
}

#about-us-article h2{
    margin: 1.5em 0 0;
}

#about-us-article strong{
    margin-bottom: 1em;
    display: inline-block;
}

#about-us-article .about-katerina .about-us-article-title{
    margin: 2.5em 0 1em;
}

#about-us-article h3{
    margin: 2em 0 0.5em;
}

.about-us-list{
    padding: 0;
    margin: 0 0 30px;
    list-style-type: none;
}

.about-us-list li{
    margin: 5px 0;
}

#about-us-aside{
    font-size: 14px;
    line-height: 18px;
}

#about-us-aside a{
    color: var(--blue);
}

#about-us-aside-title{
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 1em;
    text-transform: uppercase;
}

.row-big{
    display: flex;
    flex-direction: column;
    height: 100%;
}

p{
    margin: 0 0 1em;
}

.uppercase{
    text-transform: uppercase;
}

body.about #main-content-holder, body.media #main-content-holder{
    color: var(--blue);
}

body.about-him #main-content-holder{
    color: var(--red);
}

#about-article{
    font-size: 14px;
    line-height: 18px;
}

#about-article a{
    color: var(--blue);
    text-decoration: underline;
}

#about-definition{
    border: 1px solid var(--blue);
    padding: 1em;
    font-style: italic;
    margin: 3em auto 3em;
    max-width: 280px;
}

#about-definition em{
    text-decoration: underline;
}

.about-strong{
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    margin: 30px 0 5px;
    font-weight: bold;
}

h2.about-strong{
    margin-top: 0;
}

body.homepage #main-content-holder{
    border: 2px solid var(--black);
    padding: 10px 30px;
    display: flex;
    /*background-image: url("img/grass.png");
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;*/
}

body.homepage #main-content-holder.red{
    border-color: var(--red);
    color: var(--red);
}

body.homepage #main-content-holder.blue{
    border-color: var(--blue);
    color: var(--blue);
}

#quote{
    align-self: center;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    font-size: 26px;
    line-height: 100%;
    height: 100%;
    justify-content: center;
}

#quote.anton{
    font-family: "anton";
}

#quote.anton #title{
    line-height: 130%;
    text-transform: uppercase;
}

#quote.montserrat{
    font-family: "montserrat";
}

#quote.epika{
    font-family: "epika";
}

#quote.pacifico #title{
    line-height: 130%;
}

#quote.playfair{
    font-family: "playfair";
}

#quote.xanh{
    font-family: "xanh";
}

#quote.xanh #title{
    line-height: 130%;
}

#quote.attic{
    font-family: "attic-antique";
}

#quote.nitti{
    font-family: "nitti-typewriter-normal";
}

#quote.market{
    font-family: "ff-market-web-pro-condensed";
}

#quote.oswald{
    font-family: "oswald";
}

#quote.roboto{
    font-family: "roboto";
}

#quote.pacifico{
    font-family: "pacifico";
}

#title{
    font-weight: normal;
    margin: 1em 0 0;
    text-align: center;
    width: 100%;
    font-size: 1em;
}

#age{
    text-align: right;
    padding-right: 10%;
    font-size: 0.4em;
    margin: 0.2em 0 0;
    width: 100%;
}

body.registration-start #main-content-holder{
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.registration-buttons{
    margin: auto;
    max-width: 60vw;
    width: 100%;
}

.not-cz-notice{
    text-align: center;
    color: var(--blue);
    font-family: var(--sans);
    margin:0 auto 30px;
    max-width: 500px;
}

.btn{
    padding: 10px 15px;
    border: 1px solid var(--black);
    background-color: transparent;
    font-family: var(--font);
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1;
    margin: 0;
    display: block;
    text-align: center;
}

.btn:not(:last-child){
    border-bottom: 0;
}

.registration-buttons .btn-group:last-child{
    margin-bottom: 60px;
    border-bottom: 1px solid var(--black);
}

.btn:hover, .btn:focus, .btn:active{
    color: var(--red);
}

.input-text{
    background-color: transparent;
    border: 1px solid var(--black);
    margin: 0 0 30px;
    font-family: var(--font);
    color: var(--black);
    padding: 5px 10px;
    width: 100%;
    font-size: 18px;
    border-radius: 0;
}

.input-text:focus{
    box-shadow: none;
    outline: none;
}

#form{
    font-size: 15px;
}

.main-label{
    margin-bottom: 10px;
    display: inline-block;
    font-weight: bold;
}

.submitGrid .main-label{
    font-family: var(--sans);
    font-weight: normal;
}

.gridRadio{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.radioGroup{
    flex: 0 0 auto;
    width: 50%;
    display: inline-block;
    margin-bottom: 30px;
    padding: 0 10px;
}

.radioGroup input[type=radio], .radioGroup input[type=checkbox]{
    opacity: .1;
    width: 1px;
    height: 1px;
    position: absolute;
    left: -10000px;
}

.radioGroup label{
    line-height: 38px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-right: -50px;
}

.radioGroup label::before{
    width: 32px;
    height: 32px;
    margin: 2px;
    content: "";
    display: inline-block;
    margin-right: 10px;
    border: 1px solid var(--black);
    vertical-align: top;
}

.radioGroup input:checked + label::after{
    width: 38px;
    height: 38px;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("img/checked.svg");
}

.gridRadio{
    margin-bottom: 25px;
}

.radioGroup{
    margin-bottom: 5px;
}

.legend-label{
    margin: 0 0 10px;
    font-weight: bold;
}

#form #agree{
    width: 100%;
    margin: 0;
    padding: 0;
}

#form #agree label{
    padding-left: 50px;
    line-height: 11px;
    font-size: 10px;
    font-family: var(--sans);
    margin: 2px 0 30px;
}

#form #agree label::before{
    position: absolute;
    left: 0;
    top: 0;
}

#form #submitButton{
    background-color: var(--black);
    text-transform: uppercase;
    color: #fff;
    border: 1px solid var(--black);
    padding: 2px 5px;
    width: 100%;
    text-align: center;
    font-family: "newParis";
    font-size: 26px;
    line-height: 30px;
    border-radius: 0;
}

#form #submitButton:hover, #form #submitButton:focus, #form #submitButton:active{
    background-color: transparent;
    color: var(--black);
}

.radioGroup .input-text{
    margin: 2px;
    vertical-align: top;
}

section#thanks{
    display: flex;
    height: 100%;
}

.thanks-holder{
    text-align: center;
    align-self: center;
    font-size: 25px;
    width: 80%;
    margin: 0 auto;
    font-family: var(--medium-italic);
}

.thanks-holder p{
    margin: 0;
}

.mendel-link{
    display: inline-block;
    float: right;
}

#mendel-link, #boleslove-link{
    display: inline-block;
    vertical-align: top;
}

#mendel-link .mendel-logo{
    height: 15px;
    margin-top: 2px;
    vertical-align: top;
}

#boleslove-link .boleslove-logo{
    height: 15px;
    margin-top: 4px;
    margin-right: 10px;
    vertical-align: top;
}

#thanks-title{
    font-weight: bold;
    text-align: center;
    margin: 0 0 1em;
    font-size: 20px;
    line-height: 23px;
    text-transform: uppercase;
}

#thanks-text{
    font-style: italic;
    text-align: center;
    font-size: 20px;
    line-height: 23px;
}

body.registration-thanks #main-content-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color: var(--red);
    color: #fff;
    border: 0;
    padding: 2em 2em 1em;
}

.form-or{
    text-align: center;
    margin: -15px 0 0;
    text-transform: uppercase;
    font-size: 30px;
}

.number-of-entries{
    display: block;
    float: left;
    font-family: var(--sans);
    border: 1px solid var(--black);
    padding: 3px 5px;
    text-transform: uppercase;
    font-size: 10px;
}

#video-intro{
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 5;
    object-fit: cover;
    object-position: center;
    transition: opacity .3s;
}

#video-intro.hiding{
    opacity: 0;
}

#video-intro.hidden{
    display: none;
}

.socials{
    display: inline-block;
    margin: 0 0 0 20px;
}

.socials a img{
    width: 22px;
    height: 22px;
    vertical-align: top;
    padding: 4px;
}

.socials a{
    border-radius: 100%;
    background-color: var(--blue);
    display: inline-block;
    transition: background .2s;
}

.socials a:nth-child(2){
    background-color: var(--red);
}

.socials a:hover, .socials a:focus{
    background-color: var(--black);
}

.button-media{
    color: #fff;
    background-color: var(--blue);
    border-radius: 30px;
    padding: 10px 20px;
    display: inline-block;
}

#media-aside, #about-aside{
    margin-bottom: 20px;
    text-align: right;
}

#media-article p{
    margin-bottom: 10px;
}

#media-article p a{
    color: var(--blue);
    font-weight: bold;
}

body.editor #main-content-holder{
    display: block;
}

body.editor #main-content-holder > p{
    float: right;
}

#paging{
    text-align: center;
}

#editor-table{
    width: 100%;
    margin-top: 20px;
}

#editor-table th{
    text-align: left;
    padding: 3px 10px;
}

#editor-table td{
    padding: 3px 10px;
    border-top: 1px solid var(--black);
}

.editor-link{
    background-color: var(--blue);
    color: #fff;
    border-radius: 30px;
    display: inline-block;
    padding: 10px 20px;
}

#edit-title{
    text-align: center;
}

#lang-setting{
    text-align: right;
    padding: 0;
    margin: 0;
}

#lang-setting li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

#lang-setting a{
    display: inline-block;
    height: 24px;
    border: 0;
    background-color: transparent;
    padding: 0;
    margin-left: 3px;
}

#lang-setting a img{
    height: 100%;
    width: 38px;
    object-fit: cover;
    object-position: center;
}

.submenu{
    display: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 100;
}

.submenu li{
    list-style-type: none;
    line-height: 1;
    padding: 0 10px;
    margin: 0 -10px;
}

.submenu li a.nav-link{
    color: var(--red);
}

.submenu li a.nav-link::after, .submenu li a.nav-link::after {
  background-color: var(--red);
}

.nav-link.active + .submenu, .nav-item:hover .submenu{
    display: block;
}

/*
body.timeline #main-content-holder{
    border: 0;
    padding: 0;
}

.timeline-item{
    padding: 20px 20px 0;
    border: 1px solid var(--blue);
    color: var(--blue);
    margin-bottom: 20px;
}

.timeline-item.red{
    border-color: var(--red);
    color: var(--red);
}

.timeline-item.black{
    border-color: var(--black);
    color: var(--black);
}

.timeline-title{
    text-align: center;
    position: relative;
    margin: 0 0 20px;
    padding: 0 25px;
}

.timeline-title .timeline-number{
    position: absolute;
    top: 0;
    left: 0;
}

.timeline-img{
    margin-bottom: 20px;
}

.timeline-img img{
    width: 100%;
}*/

.accordion{
    padding-left: 50px;
    position: relative;
    margin-bottom: 40px;
}

.accordion:before{
    content: "";
    height: 100%;
    width: 3px;
    position: absolute;
    left: 12px;
    background-color: var(--red);
    display: block;
}

.accordion-header{
    position: relative;
    margin: 40px 0 0;
    cursor: pointer;
}

.accordion-item:first-child .accordion-header{
    margin-top: 10px;
}

.accordion-header:before{
    content: "";
    height: 27px;
    width: 27px;
    border-radius: 50%;
    position: absolute;
    left: -50px;
    background-color: var(--red);
    display: block;
}

.accordion-header h2{
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}

.accordion-body{
    display: none;
    color: var(--blue);
}

.accordion-body a{
    color: var(--blue);
}

.accordion-item.shown .accordion-header h2, .accordion-header h2:hover{
    color: var(--blue);
    text-decoration: underline;
}

.accordion-item.shown .accordion-header:before, .accordion-header:hover:before{
    background-color: var(--blue);
}

.accordion-item.shown .accordion-body{
    display: block;
}

#timeline-image img{
    display: none;
}

.timeline p.date{
    font-size: 1.2em;
}

.btn-subgroup{
    display: flex;
    height: 0;
    overflow: hidden;
}

.btn-subgroup .btn{
    width: 50%;
    font-size: .8em;
    padding: .7em;
}

.registration-buttons .btn.opened{
    color: var(--red);
}

.registration-buttons .btn.opened + .btn-subgroup{
    height: 100%;
}

.btn-subgroup .btn:last-child{
    border-left: 0;
    border-bottom: 0;
}

#about-us-logos a{
    display: inline-block;
    vertical-align: top;
}

#about-us-logos img{
    height: 70px;
    vertical-align: top;
}

#circle{
    width: 140px;
    height: 140px;
    display: inline-block;
    position: absolute;
    top: -100px;
    right: -20px;
    /*transform: rotate(8deg);*/
    z-index: 2;

    &.advent{
        animation-name: advent;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
}

@keyframes advent {
    0% {transform: scale(1.2);}
    50% {transform: scale(1.4);}
    100% {transform: scale(1.2);}
}

#circle .circle-img{
    width: 100%;
    height: 100%;
}

#circle .circle-img-hover{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: opacity .2s;
}

#circle:hover .circle-img-hover{
    opacity: 1;
}

#news-article{
    overflow: auto;
    width: 100%;
}

#news-header{
    padding: 0 0 20px;
    width: 1030px;
}

#news-header .legend{
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 10px 15px;
    cursor: pointer;
}

#news-header .legend.active{
    background-color: var(--black);
    color: #fff;
}

#news-header .legend img{
    vertical-align: top;
}

#news-header .legend .name{
    line-height: 25px;
    margin-left: 4px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: top;
}

#news-table{
    border-collapse: collapse;
    width: 1030px;
}

#news-table td{
    vertical-align: top;
    padding: 10px 0;
    font-size: 20px;
    border-top: 1px solid var(--red);
}

#news-table tr td:first-child{
    padding: 13px 25px 0 0;
    font-size: 15px;
}

#news-table .date{
    font-weight: normal;
    font-size: 20px;
    display: block;
    white-space: nowrap;
}

#news-table h2{
    font-weight: normal;
    font-size: 25px;
    text-transform: uppercase;
    margin: 0;
}

#news-table em{
    font-style: normal;
    text-transform: uppercase;
    color: var(--red);
}

#news-table tr td:last-child{
    text-align: right;
    min-width: 100px;
}

#news-table tr td img{
    height: 45px;
    width: 45px;
    margin: 3px 0 0 5px;
}

#news-table tr.deprecated, #news-table tr.deprecated em{
    color: #919191;
}

#news-table tr.hidden{
    display: none;
}

.row{
    display: flex;
    margin: 0 -5px;
}

.col{
    padding: 0 5px;
    width: 50%;
}

.col-third{
    padding: 0 5px;
    width: 33.33333%;
}

.gallery{
    margin: 30px 0 10px;
    width: 100%;
}

.gallery .row{
    height: auto;
}

.gallery .image{
    padding-top: 70%;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: top;
}

.gallery .image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    vertical-align: top;
}

.gallery .image-square{
    padding-top: 100%;
}

.gallery .image-tall{
    padding-top: calc(140% + 10px);
}

body.boleslove h2, body.nsu h2{
    margin: 0 0 0;
}

body.boleslove h3, body.nsu h3{
    margin: 0.5em 0 1.5em;
    font-weight: normal;
}

body.boleslove #main-content-holder{
    color: var(--blue);
    border-color: var(--blue);
}

body.nsu #main-content-holder{
    color: var(--red);
    border-color: var(--red);
}

body.boleslove #main-content-holder aside, body.nsu #main-content-holder aside{
    font-size: 12px;
}

@media(min-width: 760px){

    #header{
        text-align: center;
    }

    .main-title{
        margin-bottom: 10px;
        font-size: 7.5vw;
        line-height: 6.5vw;
        display: inline-block;
    }

    #image-logo{
        height: 100px;
    }

    .project-description{
        display: inline-block;
        width: 200px;
        font-family: var(--sans);
        vertical-align: top;
        margin: 30px 0 0 30px;
        font-size: 12px;
        text-align: left;
    }

    .nav-list{
        text-align: center;
        margin-bottom: 20px;
    }

    .nav-item{
        display: inline-block;
        padding: 0 10px;
    }

    #main-content-holder{
        border: 2px solid var(--red);
        padding: 30px 30px 10px;
    }

    body.about #main-content-holder, body.media #main-content-holder{
        border-color: var(--blue);
    }

    body.registration-start #main-content-holder{
        padding: 30px 0 10px;
        border: 0;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
    }

    #quote{
        font-size: 5vw;
    }

    body.homepage #main-content-holder{
        padding: 30px 80px;
    }

    #registration{
        flex-flow: row;
    }

    .registration-holder{
        align-self: center;
        text-align: center;
    }

    .btn{
        font-size: 3.5vw;
        padding: 1.5vw;
    }

    .btn:first-child{
        margin-top: auto;
    }

    .btn:last-child{
        margin-bottom: auto;
    }

    .radioGroup{
        width: 33.33333%;
    }

    .thanks-holder{
        font-size: 3vw;
        width: 50%;
    }

    #form #submitButton{
        margin: 20px 0;
    }

    #thanks-title, #thanks-text{
        padding: 0 20%;
        font-size: 3vw;
        line-height: 100%;
    }

    #thanks-text{
        margin-bottom: 10px;
    }

    .number-of-entries{
        font-size: 14px;
    }

    .nav-link.active + .submenu{
        display: inline-block;
    }

    .submenu li{
        display: inline-block;
        margin-left: 20px;
    }
/*
    #timeline-article .row{
        margin: 0 -10px;
        display: flex;
        flex-wrap: wrap;
    }

    #timeline-article .col-4{
        padding: 0 10px 20px;
        width: 50%;
    }

    .timeline-item{
        margin-bottom: 0;
        height: 100%;
    }*/

    .btn-subgroup .btn{
        font-size: 1.2em;
        padding: .5em;
    }

    .gallery-favorite{
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 20px;
    }

    .gallery-favorite .image-holder{
        width: 50%;
    }

    .gallery-favorite .image-holder .image{
        margin: 0;
    }
}

@media(min-width: 1160px) and (min-height: 900px){

    body{
        background-size: 400px auto;
    }
}

@media(min-width: 1160px){

    #main-content-holder{
        display: flex;
    }

    #header{
        text-align: left;
    }

    .nav{
        display: inline-block;
        vertical-align: top;
        margin-top: 35px;
        float: right;
    }

    .nav-list{
        margin: 0 0 30px;
    }

    .nav-item{
        font-size: 1.15vw;
        position: relative;
    }
    
    .nav-item:last-child{
        padding-right: 0;
    }

    .row-big{
        flex-direction: row;
        gap: 25px;
    }

    #about-us-article{
        font-size: 20px;
        margin-right: 40px;
    }

    #about-us-list{
        margin-bottom: 10px;
    }

    #about-us-list li{
        margin: 0;
    }

    #about-us-aside{
        flex-basis: max-content;
        font-size: 15px;
        line-height: 17px;
        display: flex;
        flex-direction: column;
    }

    body.about #main-content-holder{
        flex-direction: row-reverse;
    }

    #about-article{
        display: flex;
    }

    #about-article .left{
        width: calc(100% - 450px);
    }

    #about-definition{
        margin: 0 0 auto 50px;
        width: 400px;
        max-width: none;
    }

    #form, #submitGrid{
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .form-col{
        width: 50%;
        padding: 0 10px;
        display: inline-block;
        vertical-align: top;
    }

    .copyright{
        font-size: 20px;
        line-height: 23px;
        width: 100%;
        margin: 0 0 6em;
    }

    #boleslove-link .boleslove-logo{
        height: 30px;
        margin-right: 20px;
        margin-top: 5px;
    }

    #mendel-link .mendel-logo{
        height: 30px;
        margin: 0;
    }

    #about-him-article{
        max-width: 60%;
    }

    .number-of-entries{
        padding: 5px 8px;
        font-size: 20px;
    }

    .socials{
        margin: 2px 0 2px 30px;
    }

    .socials a{
        margin-left: 5px;
    }

    .socials a img{
        width: 32px;
        height: 32px;
        padding: 8px;
    }

    body.media #main-content-holder{
        flex-direction: row-reverse;
    }

    #media-aside, #about-aside{
        margin-bottom: 0;
        flex-basis: 50%;
    }

    #about-article{
        flex-basis: 120%;
    }

    .submenu{
        position: absolute;
        top: 1.4em;
        left: 0;
        width: 10em;
        text-align: left;
    }

    .submenu li{
        margin: 2px 0 0 0;
        text-align: left;
        padding: 0 0 0 10px;
        display: block;
    }
/*
    .timeline-item{
        padding: 30px 30px 10px;
    }

    #timeline-article .col-4{
        width: 25%;
    }

    .timeline-title{
        height: 90px;
        margin-bottom: 0;
    }

    .timeline-img{
        height: 200px;
    }

    .timeline-img img{
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }
*/
    .row{
        display: flex;
        height: 100%;
    }

    #timeline-article{
        width: 100%;
    }

    #timeline-article .col-2{
        width: 50%;
    }

    .btn-subgroup .btn{
        font-size: 1.7em;
    }

    #timeline-image{
        height: 100%;
        display: flex;
    }

    #timeline-image img{
        width: 80%;
        margin: auto 10%;
    }

    #timeline-image img.visible{
        display: block;
    }

    #news-header, #news-table{
        width: 100%;
    }

    body.boleslove #main-content-holder, body.nsu #main-content-holder{
        flex-wrap: wrap;
    }

    body.boleslove #main-content-holder article, body.nsu #main-content-holder article{
        width: 55%;
    }

    body.boleslove #main-content-holder aside, body.nsu #main-content-holder aside{
        width: 35%;
        margin-left: 10%
    }

    #favorite-article{
        width: 100%;
    }

    .gallery-favorite .image-holder{
        width: 33.33333%;
    }
}

@media(min-width: 1360px){

    #main-content-holder{
        padding: 50px 50px 30px;
    }

    #about-article{
        font-size: 20px;
        line-height: 23px;
    }

    #about-him-article{
        font-size: 20px;
        line-height: 23px;
    }

    #about-definition{
        font-size: 30px;
        line-height: 1.2;
    }

    .form-row, .submit-row{
        display: flex;
        flex-wrap: wrap;
    }

    .form-row-box{
        border: 1px solid var(--black);
        margin-bottom: 20px;
        padding: 10px 15px 0;
    }

    .legend-label, .main-label{
        width: 22%;
        margin: 5px 0 0;
    }

    .gridRadio, .input-text-short{
        width: 78%;
    }

    .gridRadio{
        margin-bottom: 5px;
    }

    .input-text{
        margin-bottom: 20px;
    }

    .submitGrid{
        margin-top: 30px;
    }

    .submitGrid .input-text{
        margin-bottom: 10px;
    }

    .about-strong{
        font-size: 30px;
        line-height: 35px;
        margin: 40px 0 0px;
    }

    #image-logo{
        height: 150px;
    }

    .project-description{
        font-size: 15px;
        margin-top: 50px;
        width: 250px;
    }

    .nav{
        margin-top: 60px;
    }

    #media-article p{
        font-size: 20px;
        line-height: 23px;
    }

    .button-media{
        font-size: 27px;
        padding: 12px 30px;
    }

    #lang-setting{
        position: absolute;
        right: 30px;
        top: 20px;
        z-index: 100;
    }

    #news-header{
        padding-bottom: 50px;
    }

    .row{
        margin: 0 -10px;
    }

    .col, .col-third{
        padding: 0 10px;
    }

    .gallery .image{
        margin: 0 0 20px;
    }

    .gallery .image-tall{
        padding-top: calc(140% + 20px);
    }

    .gallery-favorite .image-holder{
        width: 25%;
    }
}

@media(min-width: 1560px){

    .container{
        max-width: 1600px;
        margin: 0 auto;
    }

    .main-title{
        font-size: 130px;
        line-height: 110px;
    }

    .nav{
        margin-top: 60px;
    }

    .nav-item{
        font-size: 20px;
        padding: 0 20px;
    }

    #form{
        font-size: 15px;
    }

    .submitGrid{
        margin-top: 80px;
        display: flex;
    }

    .submit-col1{
        width: 67%;
        flex: 0 0 auto;
    }

    .submit-col2{
        width: 33%;
        flex: 0 0 auto;
        padding-left: 20px;
        display: flex;
        flex-flow: column;
    }

    #form #submitButton{
        margin-top: auto;
        margin-bottom: 10px;
    }

    .gridRadio, .input-text-short{
        width: 72%;
    }

    .legend-label, .main-label{
        font-size: 20px;
        width: 26%;
        margin-top: 5px;
        margin-right: 2%; 
    }

    .main-col .input-text{
        font-size: 30px;
        padding: 10px 20px
    }

    #form #agree label{
        margin-top: -2px;
        margin-bottom: 0;
    }

    .input-text{
        padding: 6px 10px;
    }

    .submitGrid .main-label{
        font-size: 18px;
        line-height: 30px;
    }

    .registration-buttons{
        width: 1000px;
    }

    .btn{
        font-size: 60px;
    }

    .submenu li{
        padding-left: 20px;
    }

    .btn-subgroup .btn{
        font-size: 2em;
    }
}

@media(min-width: 1720px){
    #circle{
        width: 200px;
        height: 200px;
        right: -50px;
    }
}

#cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}

.load-fonts{
    font-size: 0px;
}

.load-fonts .attic{
    font-family: "attic-antique";
}

.load-fonts .nitti{
    font-family: "nitti-typewriter-normal";
}

.load-fonts .market{
    font-family: "ff-market-web-pro-condensed";
}

#intro-video{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
}

#video{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: var(--black);
}

#intro-video-buttons{
    position: absolute;
    top: 20px;
    left: 60px;
    width: calc(100% - 120px);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    flex-direction: column;
}

#intro-video-buttons .btn{
    background-color: #fff;
    margin: 0;
    width: 100%;
    max-width: 16em;
    cursor: pointer;
    color: var(--black);
    font-size: 1.5em;
    border: 1px solid var(--black);
}

#intro-video-buttons .btn:first-of-type{
    border-bottom-width: 0;
}

#intro-video-close{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 15;
    background-color: transparent;
    background-image: url("img/checked-white.svg");
    background-size: cover;
    background-position: center;
    width: 36px;
    height: 36px;
    font-size: 0;
    border: 0;
    cursor: pointer;
}

.registration-buttons .btn-group button{
    width: 100%;
}

@media(min-width: 768px){
    #intro-video-buttons{
        flex-direction: row;
    }

    #intro-video-buttons .btn:first-of-type{
        border-right: 0;
        border-bottom-width: 1px;
    }
}

#canv{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .10;
    pointer-events: none;
}

#search{
    margin-right: 15px;
    width: 50px;
}

.popup{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #fff;
    background-image: url("img/book.jpg");
    background-size: cover;
    background-position: center center;
    border: 2px solid var(--red);
    color: var(--black);
}

.popup.show{
    display: block;
}

#main-content-holder #quote{
    min-height: 360px;
}

.popup h1{
    font-weight: normal;
    line-height: 1.1;
}

.popup-close{
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.popup-close img{
    width: 20px;
    height: 20px;
}

.popup .btn{
    width: auto;
    border-radius: 100px;
    display: inline-block;
    padding: 10px 25px;
}

@media(min-width: 760px){
    #circle{
        top: 10px;
    }

    .popup-close{
        position: absolute;
        top: 35px;
        right: 35px;
    }

    .popup-close img{
        width: 35px;
        height: 35px;
    }

    .popup{
        padding: 30px 40px;
    }

    .popup h1{
        width: 480px;
        margin: 0 0 30px;
        font-size: 50px;
    }

    .popup p{
        width: 480px;
        margin: 0 0 50px;
        font-size: 25px;
    }

    .popup .btn{
        padding: 15px 30px;
    }
}


#canv{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .10;
    pointer-events: none;
}


@media(max-width: 759px){
    [lang="de"] .registration-buttons .btn, [lang="uk"] .registration-buttons .btn{
        font-size: 20px;
    }
}


/* Dočasná výstava */

#square{
    position: absolute;
    top: 15px;
    right: -15px;
    width: 200px;
}

.square-img{
    width: 100%;
}

.square-img-hover{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#square:hover .square-img-hover{
    display: block;
}

@media(max-width: 759px){
    #square{
        width: 120px;
    }
}

#exhibition img{
    width: 100%;
}


/* Advent calendar */

#advent{
    .gallery-advent{
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 20px;
    }

    .image-holder{
        position: relative;
        width: 50%;
        padding-top: 50%;

        a{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            &:last-child{
                display: none;
            }
        }

        &.revealed{
            img{
                &:last-child{
                    display: block;
                }
            }
        }

        &#advent-16{
            order: 1;
        }

        &#advent-11{
            order: 2;
        }

        &#advent-3{
            order: 3;
        }

        &#advent-5{
            order: 4;
        }

        &#advent-12{
            order: 5;
        }

        &#advent-1{
            order: 6;
        }

        &#advent-9{
            order: 7;
        }

        &#advent-10{
            order: 8;
        }

        &#advent-4{
            order: 9;
        }

        &#advent-25{
            order: 10;
        }

        &#advent-19{
            order: 11;
        }

        &#advent-8{
            order: 12;
        }

        &#advent-7{
            order: 13;
        }

        &#advent-21{
            order: 14;
        }

        &#advent-17{
            order: 15;
        }

        &#advent-20{
            order: 16;
        }

        &#advent-6{
            order: 17;
        }

        &#advent-22{
            order: 18;
        }

        &#advent-23{
            order: 19;
        }

        &#advent-18{
            order: 20;
        }

        &#advent-14{
            order: 21;
        }

        &#advent-28{
            order: 22;
        }

        &#advent-15{
            order: 23;
        }

        &#advent-13{
            order: 24;
        }

        &#advent-24{
            order: 25;
        }

        &#advent-27{
            order: 26;
        }

        &#advent-26{
            order: 27;
        }

        &#advent-30{
            order: 28;
        }

        &#advent-29{
            order: 29;
        }

        &#advent-2{
            order: 30;
        }

        &#advent-31{
            order: 31;
        }
    }
}

@media(min-width: 760px){
    #advent{
        .image-holder{
            width: 33.33333%;
            padding-top: 33.33333%
        }
    }
}

@media(min-width: 1160px){
    #advent{
        .image-holder{
            width: 25%;
            padding-top: 25%
        }
    }

    main.advent{
        #main-content-holder{
            display: block;
        }
    }
}

@media(min-width: 1360px){
    #advent{
        .image-holder{
            width: 20%;
            padding-top: 20%
        }
    }
}