@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Sans:400,700');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
    /*vertical-align: baseline;*/
    vertical-align: top; /* My modification */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

    /* My addition */
html {
    box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
    box-sizing: inherit;
    }    
hr {
    margin:0;
    padding:0;
    border: 0;
    flex-grow: 0;
    flex-shrink: 0;
}
a, a:link {
    text-decoration: none; 
    cursor: pointer;
    color: black;
  }
.disabled {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.2 !important;
    text-decoration: none;
    pointer-events: none;
}
.disabled > li {
    opacity: 0.2 !important;
}
button {
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
}
button:focus {
  outline: none;
}
/* end of css reset */

body, html {
    background-color: white;
    --main-blue-color:#003278;
    --blue-darker-color:#2e4f80;
    --blue-light-color:#335b93;
    --blue-lighter-color:#6684ae;
    --submenu-background:#e2f4ff;
    --submenu-background-selected:#c9dff0;
    --blue-text_on_blue:#8cabd7;
    --blue-text-dark_on_blue:#517099;
    --blue-text-underline:#1c437d;
    --grey-darker-color:#b2b2b2;
    --grey-light-color:#e5e5e5;
    --grey-lighter-color:#ededed;
    --orange-hoover-color:#f18e00;
    --orange-hoover-color_light:#f8c780;
    --red: #ff0000;

    --navi-normal-height:70px; /* height of "normal - not scrolled down" navigation */
    --navi-scrolled-height:60px; /* height of "small - scrolled down" navigation */

    --font-normal:400;
    --font-bold:700;

    font-family: 'PT Sans', sans-serif;
	  font-weight:var(--font-normal);
    color: black;
    
	  scroll-behavior: smooth;

    font-size: 14px; /* default font size */

    --shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.18), 0 6px 18px 0 rgba(0, 0, 0, 0.17);
}

button#button--scroll-up {
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background-image: url(../img/icon_scroll_up.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: opacity 1s, bottom 1s ease-out;
}


/* mobil */
@media only screen and (max-width: 1024px) {
    .desktop {
        display: none !important;
    }
    body, html {
        --navi-normal-height:60px; /* height of "normal - not scrolled down" navigation */
        --navi-scrolled-height:60px; /* height of "small - scrolled down" navigation */
        --margin:1.1rem; 
    }
    body.scrolled {
        padding-top: var(--navi-normal-height);
    }
    body.noscrolled {
        padding-top: var(--navi-normal-height);
    }
    
    p {
        line-height: 1.4;
    }
    h1 {
        font-size: 1.55rem;
        color: white;
    }
    h2 {
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 1.45rem;
        font-weight:var(--font-bold) !important;
        text-align: center;
        line-height: 1.2;
    }
    h3 {
        font-size: 1.15rem;
        line-height: 1.3;
        font-weight: var(--font-bold);
    }
    h4 {
        font-size: 1.3rem;
        line-height: 1.4;
        margin-bottom:2px;
        font-weight: var(--font-bold);
    }
    .bold {
        font-weight:var(--font-bold);
    }
    
    .hor_line {
        width: 100%;  
        height: 0;
        border-bottom: 1px solid var(--grey-light-color);
    }
    .hor_line.blue {
        border-color:var(--blue-darker-color);
    }
    
    .funf {
        height:5px;
        border-bottom-width: 5px;
        flex-grow: 0 !important;
    }
    .one {
        height: 1px;
        flex-grow: 0 !important;
    }

    nav.main .vert_line,
    #head_up .vert_line {
        display: inline-block;
        width: 0px; 
        height: 100%; 
        border-left: 1px solid var(--grey-light-color); /* change color later */
    }  
    .vert_line {
        display: none;
    }
    .vert_line.transparent {
        display:none;
    }
    
    .render {
        image-rendering: pixelated;
    }
    
    /* section head_up + Zadosti o pristup + Sprava pristupu + Hlaseni pri SUKL + Kontakt */
    
    #head_up {
        display: flex;
        flex-flow: column;
        align-items: stretch;
        /* --vh from mm-preload.js = 100vh of mobile devices */
        height: calc(var(--vh, 1vh) - var(--navi-normal-height));
        min-height:200px;
    }

    #hlaseni_pro_sukl {
        padding-top: var(--margin);
    }
    #kontakt,
    #video_guides {
        padding-top: var(--margin);
        padding-bottom: var(--margin);
    }
    #head_up .container {
        display: flex;
        flex:1;
        overflow: hidden;
        height:100%;
    }
    #head_up img.landing_panorama {
        width:100%;
        object-fit: cover;
        object-position: center top;
    }
    #head_up .container_uni1 {
        display: flex;
        align-items: center;
        height: calc(var(--vh, 1vh) * 0.15); /* 15vh on mobile devices */
        min-height:120px;
        padding: 1rem 0 1rem 0;
    }	
    #head_up .container_uni1 .col {
        flex-grow:1;
        text-align: center;
        width: 0; /*Force equal-width columns*/
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    #head_up .container_uni1 .col img {
        flex: 0 0 auto;
        margin-bottom:1rem;
    }
    
    #head_up h1 {
        line-height: 1.2;
    }
    #hlaseni_pro_sukl h4,
    #video_guides h4 {
        margin-bottom: initial;
    }
    #hlaseni_pro_sukl .header,
    #video_guides .header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        flex-flow:column;
    }
    #hlaseni_pro_sukl .header img,
    #video_guides .header img {
        margin-bottom: var(--margin);
    }
    #hlaseni_pro_sukl .header h2,
    #video_guides .header h2 {
        margin-top:2px;
    }
    #hlaseni_pro_sukl .row .col,
    #video_guides .row .col {
        display: flex;
        flex-flow: column;
        text-align: center;
        justify-content: center;
    }
    
    #hlaseni_pro_sukl .row .col a,
    #video_guides .row .col a {
        display:flex;
        flex-flow: column;
    }
    #hlaseni_pro_sukl .row .col .hit {
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: center;    
        background-color: var(--main-blue-color);
        padding: var(--margin) 0.8rem var(--margin) 0.8rem;
    }
    #hlaseni_pro_sukl .row .col .hit img {
        height:30px;
        margin: 1rem 0 1rem 0;
    }
    #hlaseni_pro_sukl .fake {
        display: none;
    }
    #hlaseni_pro_sukl .row .col .hit h4 {
        color: white;
    }
    #hlaseni_pro_sukl .row .col .hit .version {
        position: absolute;
        right:0.8rem;
        top:0.8rem;
        font-size: 1rem;
        line-height: 1.1;
        text-align: right;
        color:var(--blue-lighter-color);
    }
    #hlaseni_pro_sukl .row .col .pokec {
        font-weight:var(--font-bold);
        color: white;
    }
    
    #hlaseni_pro_sukl .row .col ul {
        line-height: 1.4;
    }
    #hlaseni_pro_sukl .row .col ul.main {
        padding-bottom: 14px;
        background-color: var(--grey-light-color);
    }
    #hlaseni_pro_sukl .row .col ul.main a li {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* #hlaseni_pro_sukl .row .col ul.main a.link-unavailable li {
      background-color: var(--red);
      color: white;
    }
    #hlaseni_pro_sukl .row .col ul.main a.link-unavailable li::before {
      content: "";
      display: inline-flex;
      width: calc(14px * 1.4 - 1px);
      height: calc(14px * 1.4 - 1px);
      margin-right: 5px;
      background: url(../img/inline_link-unavailable_white.svg) no-repeat center / contain;
    } */
    #hlaseni_pro_sukl .row .col li,
    #video_guides .row .col li {
        margin-top:14px;
    }
    
    #video_guides .row .col .uprow,
    #video_guides .row .col .downrow {
        display: flex;   
        flex-flow: column;
    }
    #video_guides .row .col .uprow {
        justify-content: center;
    }
    #video_guides .row .col .uprow h4 {
        margin:initial;
        flex: 0;
    }
    #video_guides .row .col .uprow img {   
        align-self: center;
        height: 50px;
        margin:24px 0 18px 0;
    }
    #video_guides .row .description {
        color:var(--blue-lighter-color);
        margin-top:auto;
        margin-bottom: 15px;
    }

    #kontakt p {
        color:var(--blue-text_on_blue);
        font-size: 0.9rem;
        /*line-height: 1.6;*/
        
    }
    #kontakt .row.first p.margin {
        margin-top:1rem;
    }
    
    #kontakt .foot p,
    #kontakt .foot a {
        color:var(--blue-text-dark_on_blue);
        font-size: 0.8rem;
    }
    
    #kontakt .title {
        font-weight:var(--font-bold);
        text-transform: uppercase;
    }
    
    #kontakt .row .subtitle {
        font-weight:var(--font-bold);
        margin-top:1rem;
    }
    #kontakt .row .subtitle span {
        font-weight: var(--font-normal);
    }

    #kontakt .logo_sukl {
        width: 15rem;
        margin-left: auto;
        margin-top:var(--margin);
    }
    
    
    #kontakt #map {
        width: 100%;
        height: 200px;
        min-height:30vh;
    }
    #kontakt .map {
        width: 100%;
        height: 200px;
        min-height:30vh;
        object-fit: none;
        object-position: center center;
    }
    
    #kontakt .row.foot {
        margin-top:var(--margin);
    }
    #kontakt .row.foot p {
        text-align: center;
    }
    
    /* universal container1 */
    
    .container_uni1 {
        padding: 0 4% 0 4%;
    }
    .container_uni1 .col {
        margin: 0 1.3% 0 1.3%;
    }
    .container_uni1 .row .col {
        width: 100%;
        margin: var(--margin) 0 var(--margin) 0;
    }
    
    .container_uni1 .row a {
        color:inherit;
        display:block;
    }
    
    
    .container_uni1.blue {
        background-color: var(--main-blue-color);
    }
    .container_uni1 .col.blue {
        background-color: var(--main-blue-color);
    }
    .container_uni1.lightblue {
        background-color: var(--submenu-background-selected);
    }
    .container_uni1.blue p,
    .container_uni1 .col.blue p,
    p.blue {
        color: white;
        /*background-color: var(--main-blue-color);*/
    }
    .container_uni1.blue h2,
    h2.blue {
        color: white;
        font-weight:var(--font-normal);
        background-color: var(--main-blue-color);
    }
    .container_uni1.blue h4,
    .container_uni1 .col.blue h4,
    h4.blue {
        color: white;
    }
    h4.blue {
        background-color: var(--main-blue-color);
    }
    .container_uni1.blue .hor_line {
        background-color:var(--blue-darker-color);
        border-bottom-color:var(--blue-darker-color);
    }
    .container_uni1.blue .vert_line {
        border-left-color:var(--blue-darker-color) !important;
    }
       
    
    /*navigacia*/
    nav.main {
        display:flex;
        padding:0 1.6rem 0 1.6rem;
        transition: all 0.5s;
        position: fixed;
        top:0;
        width:100%;
        background: white;
        z-index:999;
    }
    nav.main * {
        transition: all 0.5s;
    }
    body.noscrolled nav.main, body.noscrolled nav.main * {
        transition-delay: 0s;
    }
    body.scrolled nav.main, body.scrolled nav.main *  {
        transition-delay: 0s;
    }
    body.scrolled .noscrolled {
        display:none !important;
    }
    body.noscrolled .scrolled {
        display:none !important;
    }
    body.scrolled nav.main {
        position: fixed;
        width: 100%;
        z-index: 9999;
        display:flex;
        top: 0px;
    }
    nav.main {
        height: var(--navi-normal-height);
    }
    body.scrolled nav.main {
        height: var(--navi-scrolled-height);
        background-color: var(--main-blue-color)
    }
    
    nav.main .left_part,
    body.scrolled nav.main .left_part {
        margin: 10px 0 10px 0;
        display:inline-flex;
        align-items: center;
    }
    nav.main .logo_sukl {
        height: 36px;
        margin: 0 16px 0 0;
    }
    body.scrolled nav.main .logo_sukl {
        height: 40px;
        margin: 0 16px 0 0;
        border: 1px solid var(--blue-text-dark_on_blue);
    }
    nav.main .title {
        margin: 0 0 0 16px;
        font-size: 1.2rem;
        font-weight:var(--font-bold);
        color:black;
    }
    body.scrolled nav.main .title {
        margin: 0 16px 0 0;
        font-size: 1.2rem;
        color:white;
    }
    
    nav.main .vert_line {
        border-left-color:var(--grey-darker-color);
        height:40px; /* firefox */	
    } 
    body.scrolled nav.main .vert_line {
        border-left-color:var(--blue-text-dark_on_blue);
        height:40px; /* firefox */
    } 
    nav.main .center_part,
    body.scrolled nav.main .center_part {
        margin: 10px 0 10px 0;
        display:inline-flex;
        flex-basis: 50%;
        flex-grow: 0;
        align-items: center;
        align-content: stretch;
    }
    nav.main .input_container,
    body.scrolled nav.main .input_container {
        position:relative;
        margin-left: auto;
        width:100%;
    }
    nav.main .input_container {
        border: 1px solid var(--grey-darker-color);
    }
    body.scrolled nav.main .input_container {
        border: 1px solid var(--blue-text-dark_on_blue);
     
    }
    nav.main .input_text,
    body.scrolled nav.main .input_text {
        border: none;
        width:calc(100% - 40px);
        height:100%;
        padding: 0 0 0 15px;
        background-color: transparent;
        font-size: 0.9rem;
        
    }
    nav.main .input_text {
        color:black;
    }
    body.scrolled nav.main .input_text {
        color:var(--blue-text_on_blue);
    }
    nav.main .input_text:focus,
    body.scrolled nav.main .input_text:focus {
        outline: none;
    }
    nav.main .input_text::placeholder,
    body.scrolled nav.main .input_text::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        opacity: 1; /* Firefox */
        font-family: 'PT Sans', sans-serif;
        font-size: 0.9rem;
        font-weight:var(--font-normal);
        color:var(--grey-darker-color);
        text-transform: uppercase;
    }
    body.scrolled nav.main .input_text::placeholder {
        color:var(--blue-text-dark_on_blue) !important;
    }
    nav.main .input_text:-ms-input-placeholder,
    body.scrolled nav.main .input_text:-ms-input-placeholder { /* Internet Explorer 10-11 */
        font-family: 'PT Sans', sans-serif;
        font-size: 0.9rem;
        font-weight:var(--font-normal);
        color:var(--grey-darker-color);
        text-transform: uppercase;
    }
    body.scrolled nav.main .input_text:-ms-input-placeholder {
        color:var(--blue-text_on_blue) !important;
    }
    nav.main .input_text::-ms-input-placeholder,
    body.scrolled nav.main .input_text::-ms-input-placeholder { /* Microsoft Edge */
        font-family: 'PT Sans', sans-serif;
        font-size: 0.9rem;
        font-weight:var(--font-normal);
        color:var(--grey-text_on_blue);
        text-transform: uppercase;
    }
    body.scrolled nav.main .input_text::-ms-input-placeholder {
        color:var(--blue-text_on_blue) !important;
    }
    
    nav.main .submit_button,
    body.scrolled nav.main .submit_button {
        position: absolute;
        top:0; 
        right:0;   
    }
    body.scrolled nav.main .submit_button {
        top:-5px;
    }
    nav.main .submit_button:focus,
    body.scrolled nav.main .submit_button:focus {
        outline: none;
    }
    nav.main .rest {
        margin-left: auto;
    }
    nav.main .right_part,
    body.scrolled nav.main .right_part  {
        flex-basis:25%;
        flex-shrink: 0;
        display:inline-flex;
        align-items: center;
        margin-left:auto;
    }
    
    nav.main .right_part .aktuality {
        position: relative;
        margin: 0 25px 0 25px;
        flex-grow: 1;
        font-size:0.9rem;
        text-align: center;
        line-height: 1.2;
    }
    body.scrolled nav.main .right_part .aktuality,
    nav.main .right_part .video_guides {
        display: none;
    
    }
    nav.main .aktuality .drop_down {
        position: absolute;
        display:block;
        margin: 2px auto 0 auto;
        left:0; right:0;
    }
    nav.main .rest,
    body.scrolled nav.main .rest {
        flex-grow: 0;
        flex-shrink: 0;
        display:inline-flex;
        align-items: center;
        font-size:0.9rem;
        
    } 
    body.scrolled nav.main .rest {
        margin-left: auto;
    }
    
    nav.main .rest a,
    body.scrolled nav.main .rest a {
        padding: 0px 12px 0px 12px;
        margin: 0px 3px 0px 3px;
        height: 40px;
        width:40px;
        display:inline-flex;
        justify-content: center;
        align-items: center;
        line-height:1.2; /* same as .aktuality to be alligned... */
    }
    nav.main .rest a, nav.main .rest a:link, nav.main .rest a:visited,
    body.scrolled nav.main .rest a, body.scrolled nav.main .rest a:link, body.scrolled nav.main .rest a:visited {
        color:black;
        text-decoration: none;
    }
    body.scrolled nav.main .rest a, body.scrolled nav.main .rest a:link, body.scrolled nav.main .rest a:visited {
        color:white !important;
    }
    nav.main .rest a:hover, nav.main .rest a:active, nav.main .rest a:focus, nav.main .rest a.selected,
    body.scrolled nav.main .rest a:hover, body.scrolled nav.main .rest a:active, body.scrolled nav.main .rest a:focus, body.scrolled nav.main .rest a.selected {
        text-decoration: none;
        background-color: var(--grey-lighter-color);
    }
    body.scrolled nav.main .rest a:hover, body.scrolled nav.main .rest a:active, body.scrolled nav.main .rest a:focus, body.scrolled nav.main .rest a.selected {
        background-color: var(--blue-darker-color);
    }
    
    
    nav.main .ham {
        margin-left: auto;
        height: 70px;
        padding: 10px 0 10px 0;    
    }
    nav.submenu {
        z-index: 9999;
        position: fixed;
        top:var(--navi-normal-height);
        left:0;
        width: 100%;
        background-color: var(--submenu-background);
    }
    .scrolled nav.submenu {
        z-index: 9999;
        position: fixed;
        top:var(--navi-scrolled-height);
        width: 100%;
        background-color: var(--submenu-background);
    }
    nav.submenu ul {
        padding: 2rem 0 1rem 0;
        font-size: 1.2rem;
    
    }
    nav.submenu li {
        white-space: nowrap;
        text-align: center;
    }
    nav.submenu li a {
        display: block;
        padding: 1rem 0 1rem 0;
    }
    nav.submenu li.lang {
        padding: 1rem 1rem 0 1rem;
    }
    nav.submenu li.lang a {
        display:inline-block;
        width: 50%;
        padding: 1rem 0 1rem 0;  
    }
    nav.submenu li.lang a.selected {
        background-color: var(--submenu-background-selected);
    }
    
    .roleta {
        display: flex;
        flex-flow: column;
        /* overflow: hidden; */
        z-index: 9999;
        position: absolute;
        top:var(--navi-normal-height);
        right:calc(1.6rem - 5px + 3px);
        width: calc(100% - 20px - 1.6rem);
        padding: 5px 5px 0 5px;
        background-color: white;
        border: 1px solid var(--main-blue-color);
        border-top: 0;
    }
    body.scrolled nav.main .roleta {
        top:var(--navi-scrolled-height);
    }
    
    .roleta h1 {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--main-blue-color);
        color: white;
        text-align: center;
        font-size: 1.4rem;
        height:50px;
    }
    .roleta h1 img {
        cursor: pointer;
        position: absolute;
        right: 0;
        height: 100%;
    }
    .roleta h2 {
        text-align: left;
        font-size: 1.3rem;
        text-transform: uppercase;
        margin: 20px 10px 0 10px;
        padding-bottom: 10px;
    }
    .roleta h2:first-child {
        margin-top: 0;
    }
    .roleta p {
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 1.2rem;
        margin: 0 10px 10px 10px;
    }
    .roleta a:link,
    .roleta a:visited {
        border-bottom: 1px solid var(--grey-darker-color);
        padding-bottom: 1px;
    }
    .roleta .date {
        font-size: 1rem;
        color: var(--grey-darker-color);
        margin-bottom: 0;
        margin-top:5px;
        padding-bottom:0;
    }
    .roleta .last_paragraph {
        margin-bottom: 50px
    }
    .roleta .content {
        max-height:calc(var(--vh,100vh) - var(--navi-normal-height) - 50px - 20px - 20px - 30px - 5px - 5px - 40px);
        overflow-y: auto;
        margin-top: 20px;
    }
    .roleta .grey {
        background-color: var(--grey-light-color);
        padding: 20px 0 10px 0;
        margin-top: 10px;
    }
    .roleta .roleta_footer {
        position: absolute;
        bottom:-70px;
        left: 0;
        background-color: white;
        padding: 0 5px;
        width: calc(100% + 2px);
        left:-1px;
        border: 1px solid var(--main-blue-color);
        /* border-top:none; */
    }
    .roleta .roleta_footer .content_footer {
        border: initial !important;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width:100%;
        height: 40px;
        padding: 0 10px;
        background-color: white;
    }
    .roleta .roleta_footer .content_footer:hover h2 {
        color: var(--orange-hoover-color);
    }
    .roleta .roleta_footer .content_footer img {
        height: 20px;
        margin-right: 6px;
    }
    .roleta .roleta_footer .content_footer h2 {
        font-size: 1.3rem;
        text-transform: initial;
        margin: initial;
        padding: initial;
        display: inline;
    }
    .roleta a.up {
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
    }
    .roleta .roleta_footer a.up img {
        width: 29px;
        height: 16px;;
    }
    
    /* scroll to anchor but above fixed navi heght */
    .anchor {
        position: relative;
        font-size:0;
    }
    .anchor a {
        position: absolute;
        left: 0px;
        top:calc(-1 * var(--navi-scrolled-height));
    }

    .invisible {
        display:none !important;
    }

    #ytpopup {
        position: fixed;
        padding: 10px;
        z-index: 100;
        width: 800px;
        height: 600px;
        max-width: 95%;
        max-height: 95%;
        left:0; right:0; bottom:0; top:0; 
        margin:auto;
        background: black;
        border-radius: 0;
        transition: all 0.5s ease-in;  
        z-index: 9999;
    }
    
    #ytpopup .content {
        height: 100%;
    }
    
    #ytpopup .close {
        position: absolute;
        top: 5px;
        right: 5px;
        padding:1rem 2rem 1rem 2rem;
        color: white;
        background-color: var(--main-blue-color);
        z-index: 99999;
    }

    /* Openstreetmaps */
    .ol-attribution.ol-uncollapsible {
        border-radius: 0 !important;
        height: initial !important;
        background-color: white !important;
    }
    .ol-attribution.ol-uncollapsible a {
        display:initial !important;
    }
    .ol-zoom {
        display: none;
    }

    button#button--scroll-up {
      right: 5vw;
      width: 40px;
      height: 40px;
      background-color: rgba(201, 223, 240, 0.8);
    }
}


/* desktop */
@media only screen and (min-width: 1025px) {
    .mobil {
        display: none !important;
    }
    body, html {
        --navi-normal-height:70px; /* height of "normal - not scrolled down" navigation */
        --navi-scrolled-height:60px; /* height of "small - scrolled down" navigation */
    }
    body.scrolled {
        padding-top: var(--navi-normal-height);
    }
    body.noscrolled {
        padding-top: var(--navi-normal-height);
    }

    #ytpopup {
        position: fixed;
        padding: 10px;
        box-shadow: 0 0 4px 0px rgba(0,0,0,0.5);
        z-index: 100;
        width: 800px;
        height: 600px;
        max-width: 95%;
        max-height: 95%;
        left:0; right:0; bottom:0; top:0; 
        margin:auto;
        background: black;
        border-radius: 5px;
        transition: all 0.5s ease-in;  
        z-index: 9999;
    }

    #ytpopup .content {
        height: 100%;
        margin-top:10px;    
    }

    #ytpopup .close {
        position: absolute;
        top: 5px;
        right: 5px;
        color: white;
        z-index: 99999;
    }

    p {
        line-height: 1.4;
    }
    h1 {
        font-size: 1.55rem;
        color: white;
    }
    h2 {
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 1.45rem;
        font-weight:var(--font-bold);
    }
    h3 {
        font-size: 1.15rem;
        line-height: 1.3;
    }
    h4 {
        font-size: 1.3rem;
        line-height: 1.4;
        margin-bottom:8px;
    }
    .bold {
        font-weight:var(--font-bold);
    }

    .hor_line {
        width: 100%;  
        height: 0;
        border-bottom: 1px solid var(--grey-light-color);
    }
    .hor_line.blue {
        border-color:var(--blue-darker-color);
    }

    .funf {
        height:5px;
        border-bottom-width: 5px;
        flex-grow: 0 !important;
    }
    .one {
        height: 1px;
        flex-grow: 0 !important;
    }
    .vert_line {
        display: inline-block;
        width: 0px; 
        height: 100%; 
        border-left: 1px solid var(--grey-light-color); /* change color later */
        /*background:var(--grey-light-color);	not work on PC - thin line problem */
    }  
    .vert_line.transparent {
        border-color: transparent;
    }

    .render {
        image-rendering: pixelated;
    }

    /* section head_up + Zadosti o pristup + Sprava pristupu + Hlaseni pri SUKL + Kontakt */

    #head_up,
    #hlaseni_pro_sukl,
    #kontakt,
    #video_guides {
        display: flex;
        flex-flow: column;
        align-items: stretch;
    }
    #head_up {
        height:calc(100vh - var(--navi-normal-height)) !important;
    }
    #kontakt,
    #video_guides {
        height:calc(100vh - var(--navi-scrolled-height));
    }
    #hlaseni_pro_sukl {
        margin-bottom: 3vh;
    }
    #video_guides {
        min-height: calc(200px + 200px + 71px + 9vh);
    }
    #kontakt {
        min-height: 565px;
    }

    #head_up .container {
        display: flex;
        flex:1;
        overflow: hidden;
    }
    #head_up img.landing_panorama {
        width:100%;
        height:100%;
        /*min-height: 85vh;*/
        object-fit: cover;
        object-position: center top;
    }
    #head_up .container_uni1 {
        height:15vh;
        padding-top: 30px;
        padding-bottom: 30px;
        min-height:130px;
    }	
    #head_up .container_uni1 .col {
        text-align: center;
        width: 0; /*Force equal-width columns*/
        height: 100%;
        display: flex;
        /*flex-flow: column;*/
        justify-content: center;
        align-items: center;
        
    }
    #head_up .container_uni1 h1 {
        margin-left:20px;
        
    }
    #head_up .container_uni1 .head_up__icon-scroll-down {
      position: absolute;
    }
    #head_up .container_uni1 .head_up__icon-scroll-down span {
      display: block;
      width: 25px;
      height: 25px;
      border-bottom: 3px solid rgba(255, 255, 255, 0.2);
      border-right: 3px solid rgba(255, 255, 255, 0.2);
      transform: rotate(45deg);
      margin: -10px;
      animation: head_up__icon-scroll-down---keyframes-animation 6s infinite;
    }
    #head_up .container_uni1 .head_up__icon-scroll-down span:nth-child(2) {
      animation-delay: -0.2s;
    }
    #head_up .container_uni1 .head_up__icon-scroll-down span:nth-child(3) {
      animation-delay: -0.4s;
    }
    @keyframes head_up__icon-scroll-down---keyframes-animation {
      0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
      }
      15% {
        opacity: 1;
      }
      30% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
      }
      100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
      }
    }
    #head_up .container_uni1 a:hover h1 {
        color: var(--orange-hoover-color);
    }

    #hlaseni_pro_sukl .row .col,
    #video_guides .row .col {
        display: flex;
        height: 100%;
        flex-flow: column;
        text-align: center;
        justify-content: space-between;
    }
    #video_guides .row .col {
        margin: 0 1.5vh;
        padding: 0 1rem;
    }
    #hlaseni_pro_sukl .row .col.prealt {
        width: calc((100% / 3) - 2.6%);
        flex-grow: 0;
    }
    #video_guides .row .col.prealt {
        width: calc((100% / 4) - 3vh);
        flex-grow: 0;
    }
    #hlaseni_pro_sukl .row ul:not(.userguides) a:hover li {
        background-color: var(--orange-hoover-color);
        color: white;
    } 
    #hlaseni_pro_sukl .row ul.userguides a:hover li {
        color:var(--orange-hoover-color);
        /* font-weight: var(--font-bold); */
    } 
    #video_guides .row a:hover {
        background-color:var(--orange-hoover-color);
    } 
    #video_guides .row a:hover .description {
        color:var(--orange-hoover-color_light);
    }
    #kontakt a:hover,
    #kontakt a:hover p {
        color:var(--orange-hoover-color);
    }

    #hlaseni_pro_sukl .row, 
    #video_guides .row {
        height:calc((var(--vh, 1vh) - var(--navi-normal-height) - 15vh) / 2);
        
        flex-grow: 1;
        flex-shrink: 0;
    }
    #hlaseni_pro_sukl .row {
        min-height:346px;
        max-height: 360px;
    }
    #video_guides .row {
        min-height: 200px;
    }
    #video_guides .fake_margin {
        margin: -1.5vh 0;
    }
    #video_guides .fake_margin_vert {
        margin: 0 calc(-1.3% + 1.5vh);
        /* margin: calc(-3vh + 1.3%) 0 calc(-3vh + 1.3%) 0; */
    }
    
    #hlaseni_pro_sukl .fake_margin {
        margin: -1.5vh 0 -1.5vh 0;
    }

    #hlaseni_pro_sukl .row .col .hit {
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        /* height: calc((var(--vh, 1vh) - var(--navi-normal-height) - 9vh) / 4); */
        /* min-height: 190px; */
        height: 190px;
        padding: 0 1.5rem 0 1.5rem;
        flex-grow: 0;
        flex-shrink: 0;
        background-color: var(--main-blue-color);
    }
    #hlaseni_pro_sukl .row .col .hit h4 {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 30%;
        flex: 0 0 auto;
        color:white;
        margin:initial;
        line-height: 1;
    }
    #hlaseni_pro_sukl .row .col .hit .version {
        position: absolute;
        right:0.8rem;
        top:0.8rem;
        font-size: 1rem;
        line-height: 1.1;
        text-align: right;
        color:var(--blue-lighter-color);
    }


    #hlaseni_pro_sukl .row .col .hit img {
        height:40%;
        min-height: 25px;
        max-height: 45px;
        margin:0.9rem;
        flex-grow: 1;
    }

    #hlaseni_pro_sukl .row .col .hit .pokec {
        color: white;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-shrink: 0;
        height: 30%;
        min-height: 45px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    #hlaseni_pro_sukl .row .col ul {
        line-height: 1.4;
        /* flex: 1; */
        padding: 1rem 0 0 0;
    }
    #hlaseni_pro_sukl .row .col ul.main {
        height: 88px;
        flex-grow: 0;
        flex-shrink: 0;
        padding: 1rem;
        background-color: var(--grey-light-color);
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
    }
    #hlaseni_pro_sukl .row .col ul.main a li {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* #hlaseni_pro_sukl .row .col ul.main a.link-unavailable li {
      background-color: var(--red);
      color: white;
    }
    #hlaseni_pro_sukl .row .col ul.main a.link-unavailable li::before {
      content: "";
      display: inline-flex;
      width: calc(14px * 1.4 - 1px);
      height: calc(14px * 1.4 - 1px);
      margin-right: 5px;
      background: url(../img/inline_link-unavailable_white.svg) no-repeat center / contain;
    } */
    #hlaseni_pro_sukl .row .col ul.userguides {
        flex-grow: 1;
        flex-shrink: 1;
    }
    #hlaseni_pro_sukl .row .col ul .middle {
        margin: 1rem 0 1rem 0;
    }


    #hlaseni_pro_sukl .row .col li {
        /* padding:0.1rem 0 0.1rem 0; */
        position: relative;
    }
    #hlaseni_pro_sukl .row .col li a {
        display: block;
        width: 100%;
    }
    #hlaseni_pro_sukl .row .col li img {
        height: 1.2rem;
        position: absolute;
        right:5px;
        top:3px;
    }
    #hlaseni_pro_sukl .row .col ul.userguides li {
        text-align: left;
        padding-left: 1em; 
        text-indent: -.7em;
    }
    #hlaseni_pro_sukl .row .col ul.userguides li::before {
        content: "• ";
        color: var(--main-blue-color);
    }
    #hlaseni_pro_sukl .row .fake {
        visibility: hidden;
    }
    #video_guides .row .col .uprow,
    #video_guides .row .col .downrow {
        display: flex;   
        flex-flow: column;
    }
    #video_guides .row .col .uprow {
        justify-content: center;
    }
    #video_guides .row .col .uprow h4 {
        margin:initial;
        flex: 0;
    }
    #video_guides .row .col .uprow img {   
        align-self: center;
        height: 55%;
        margin-top:10px;
    }
    #video_guides .row .description {
        color:var(--blue-lighter-color);
        margin-top:auto;
        margin-bottom: 15px;
    }
    #kontakt p {
        color:var(--blue-text_on_blue);
        font-size: 0.9rem;
        /*line-height: 1.6;*/
        
    }
    #kontakt .row.first p.margin {
        margin-top:1rem;
    }

    #kontakt .foot p,
    #kontakt .foot a {
        color:var(--blue-text-dark_on_blue);
        font-size: 0.9rem;
    }

    #kontakt .title {
        font-weight:var(--font-bold);
        text-transform: uppercase;
    }

    #kontakt .row.first {
        height: 40vh;
        flex-grow: 1;
        align-items: stretch;
    }
    #kontakt .row.first .col.left {
        width:40%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }

    #kontakt .row.second {
        flex-wrap: wrap;
        align-items: stretch !important;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #kontakt .row.second .title {
        width: 100%;
        align-self: flex-start;
        flex-grow: 0;
    }
    #kontakt .row.second .col {
        display: flex;
        flex-flow: column;
        
    }
    #kontakt .row.second .col.right {
        justify-content: space-between;
    }
    #kontakt .row .subtitle {
        font-weight:var(--font-bold);
        margin-top:1rem;
    }
    #kontakt .row .subtitle span {
        font-weight: var(--font-normal);
    }
    #kontakt .logo_sukl {
        width: 15rem;
        align-self: flex-end;
    }


    #kontakt #map {
        width: 100%;
        height: 100%;
    }
    #kontakt .map {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    #kontakt .row.foot {
        justify-content: center;
        flex-grow:0;
        flex-shrink: 0;
        height: var(--navi-scrolled-height);
        margin-top: initial;
        margin-bottom: initial;
    }
    #kontakt .row.foot p {
        text-align: center;
    }

    /* universal container1 */
    .container_uni1 .row .col .percent70 {
        height:70%;
    }
    .container_uni1 .row .col .percent30 {
        height:30%;
    }
    .container_uni1 .row .col .percent55 {
        height:55%;
    }
    .container_uni1 .row .col .percent45 {
        height:45%;
    }
    .container_uni1 .row .col .percent50 {
        height:50%;
    }
    .container_uni1 .row .col .percent40 {
        height:40%;
    }
    .container_uni1 .row .col .percent60 {
        height:60%;
    }


    .container_uni1 {
        display: flex;
        align-items: center;
        padding: 0 4% 0 4%;
    }
    .container_uni1 .col {
        margin: 0 1.3% 0 1.3%;
        flex-grow:1;
    }
    .container_uni1 .row {
        display: flex;
        flex-grow: 1;
        align-items: center;
        margin: 3vh 0 3vh 0;
    }
    .container_uni1 .row .col {
        width: 0; /*Force equal-width columns*/
    }

    .container_uni1 .row a {
        color:inherit;
    }


    .container_uni1.blue {
        background-color: var(--main-blue-color);
    }
    .container_uni1 .col.blue {
        background-color: var(--main-blue-color);
    }
    .container_uni1.lightblue {
        background-color: var(--submenu-background-selected);
    }
    .container_uni1.blue p,
    .container_uni1 .col.blue p,
    p.blue {
        color: white;
        /*background-color: var(--main-blue-color);*/
    }
    .container_uni1.blue h2,
    h2.blue {
        color: white;
        font-weight:var(--font-normal);
        background-color: var(--main-blue-color);
    }
    .container_uni1.blue h4,
    .container_uni1 .col.blue h4,
    h4.blue {
        color: white;
    }
    h4.blue {
        background-color: var(--main-blue-color);
    }
    .container_uni1.blue .hor_line {
        background-color:var(--blue-darker-color);
        border-bottom-color:var(--blue-darker-color);
    }
    .container_uni1.blue .vert_line {
        border-left-color:var(--blue-darker-color);
    }
    

    /*navigacia*/
    nav.main {
        display:flex;
        padding:0 1.6rem 0 1.6rem;
        transition: all 0.5s;
        position: fixed;
        top:0;
        width:100%;
        background: white;
        z-index:999;
    }
    nav.main * {
        transition: all 0.5s;
    }

    body.scrolled .noscrolled {
        display:none !important;
    }
    body.noscrolled .scrolled {
        display:none !important;
    }

    body.scrolled nav.main {
        position: fixed;
        width: 100%;
        z-index: 9999;
        display:flex;
        top: 0px;
    }
    nav.main {
        height: var(--navi-normal-height);
    }
    body.scrolled nav.main {
        height: var(--navi-scrolled-height);
        background-color: var(--main-blue-color)
    }

    nav.main .left_part,
    body.scrolled nav.main .left_part {
        margin: 10px 0 10px 0;
        display:inline-flex;
        align-items: center;
    }
    nav.main .logo_sukl {
        height: 43px;
        margin: 0 25px 0 0;
    }
    body.scrolled nav.main .logo_sukl {
        height: 40px;
        margin: 0 16px 0 0;
        border: 1px solid var(--blue-text-dark_on_blue);
    }
    nav.main .title {
        margin: 0 16px 0 16px;
        font-size: 1.2rem;
        font-weight:var(--font-bold);
        color:var(--main-blue-color);
    }
    body.scrolled nav.main .title {
        margin: 0 16px 0 0;
        font-size: 1.2rem;
        color:white;
    }

    nav.main .vert_line {
        border-left-color:var(--grey-darker-color);
        height:50px; /* firefox */	
    } 
    body.scrolled nav.main .vert_line {
        border-left-color:var(--blue-text-dark_on_blue);
        height:40px; /* firefox */
    } 
    nav.main .center_part,
    body.scrolled nav.main .center_part {
        margin: 10px 0 10px 0;
        display:inline-flex;
        flex-basis: 50%;
        flex-grow: 0;
        align-items: center;
        align-content: stretch;
    }
    nav.main .input_container,
    body.scrolled nav.main .input_container {
        position:relative;
        margin-left: auto;
        width:100%;
    }
    nav.main .input_container {
        border: 1px solid var(--grey-darker-color);
    }
    body.scrolled nav.main .input_container {
        border: 1px solid var(--blue-text-dark_on_blue);
    
    }
    nav.main .input_text,
    body.scrolled nav.main .input_text {
        border: none;
        width:calc(100% - 40px);
        height:100%;
        padding: 0 0 0 15px;
        background-color: transparent;
        font-size: 0.9rem;
        
    }
    nav.main .input_text {
        color:black;
    }
    body.scrolled nav.main .input_text {
        color:var(--blue-text_on_blue);
    }
    nav.main .input_text:focus,
    body.scrolled nav.main .input_text:focus {
        outline: none;
    }
    nav.main .input_text::placeholder,
    body.scrolled nav.main .input_text::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        opacity: 1; /* Firefox */
        font-family: 'PT Sans', sans-serif;
        font-size: 0.9rem;
        font-weight:var(--font-normal);
        color:var(--grey-darker-color);
        text-transform: uppercase;
    }
    body.scrolled nav.main .input_text::placeholder {
        color:var(--blue-text-dark_on_blue) !important;
    }
    nav.main .input_text:-ms-input-placeholder,
    body.scrolled nav.main .input_text:-ms-input-placeholder { /* Internet Explorer 10-11 */
        font-family: 'PT Sans', sans-serif;
        font-size: 0.9rem;
        font-weight:var(--font-normal);
        color:var(--grey-darker-color);
        text-transform: uppercase;
    }
    body.scrolled nav.main .input_text:-ms-input-placeholder {
        color:var(--blue-text_on_blue) !important;
    }
    nav.main .input_text::-ms-input-placeholder,
    body.scrolled nav.main .input_text::-ms-input-placeholder { /* Microsoft Edge */
        font-family: 'PT Sans', sans-serif;
        font-size: 0.9rem;
        font-weight:var(--font-normal);
        color:var(--grey-text_on_blue);
        text-transform: uppercase;
    }
    body.scrolled nav.main .input_text::-ms-input-placeholder {
        color:var(--blue-text_on_blue) !important;
    }

    nav.main .submit_button,
    body.scrolled nav.main .submit_button {
        position: absolute;
        top:0; 
        right:0;   
    }
    body.scrolled nav.main .submit_button {
        top:-5px;
    }
    nav.main .submit_button:focus,
    body.scrolled nav.main .submit_button:focus {
        outline: none;
    }

    nav.main .right_part,
    body.scrolled nav.main .right_part  {
        flex-basis:25%;
        flex-shrink: 0;
        display:inline-flex;
        align-items: center;
        /*margin-left:5px;
        background-color: var(--grey-light-color);*/
    }

    nav.main .right_part .aktuality {
        position: relative;
        margin: 0 25px 0 25px;
        flex-grow: 1;
        font-size:0.9rem;
        text-align: center;
        line-height: 1.2;
    }
    body.scrolled nav.main .right_part .aktuality,
    body.scrolled nav.main .right_part .video_guides {
        display: none;
    }
    nav.main .aktuality .drop_down {
        position: absolute;
        display:block;
        width: 13px;
        height: 8px;
        margin: 2px auto 0 auto;
        left:0; right:0;
    }
    nav.main .right_part .video_guides {
        flex-grow: 0;
        flex-shrink: 0;
    }
    nav.main .right_part .video_guides img {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 0.5vw 0 0;
    }
    nav.main .rest,
    body.scrolled nav.main .rest {
        flex-grow: 0;
        flex-shrink: 0;
        display:inline-flex;
        align-items: center;
        font-size:0.9rem;
    } 
    body.scrolled nav.main .rest {
        margin-left: auto;
    }

    nav.main .rest a,
    body.scrolled nav.main .rest a {
        padding: 0px 12px 0px 12px;
        margin: 0px 3px 0px 3px;
        height: 40px;
        width:40px;
        display:inline-flex;
        justify-content: center;
        align-items: center;
        line-height:1.2; /* same as .aktuality to be alligned... */
    }
    nav.main .rest a, nav.main .rest a:link, nav.main .rest a:visited,
    body.scrolled nav.main .rest a, body.scrolled nav.main .rest a:link, body.scrolled nav.main .rest a:visited {
        color:black;
        text-decoration: none;
    }
    body.scrolled nav.main .rest a, body.scrolled nav.main .rest a:link, body.scrolled nav.main .rest a:visited {
        color:white !important;
    }
    nav.main .rest a:hover, nav.main .rest a:active, nav.main .rest a:focus, nav.main .rest a.selected,
    body.scrolled nav.main .rest a:hover, body.scrolled nav.main .rest a:active, body.scrolled nav.main .rest a:focus, body.scrolled nav.main .rest a.selected {
        text-decoration: none;
        background-color: var(--grey-lighter-color);
    }
    body.scrolled nav.main .rest a:hover, body.scrolled nav.main .rest a:active, body.scrolled nav.main .rest a:focus, body.scrolled nav.main .rest a.selected {
        background-color: var(--blue-darker-color);
    }


    nav.main .ham,
    body.scrolled nav.main .ham {
        margin-right: 5px;
        height: 70px;
        padding: 10px;    
    }
    body.scrolled nav.main .ham {
        margin-left:15px;
    }
    nav.submenu {
        z-index: 9999;
        position: fixed;
        top:var(--navi-normal-height);
        left:0;
        width: 100%;
        background-color: var(--submenu-background);
    }
    .scrolled nav.submenu {
        z-index: 9999;
        position: fixed;
        top:var(--navi-scrolled-height);
        width: 100%;
        background-color: var(--submenu-background);
    }
    nav.submenu ul {
        padding: 2rem 0 2rem 0;
        font-size: 1.2rem;

    }
    nav.submenu li {
        text-align: center;
    }
    nav.submenu li a {
        display: block;
        padding: 1rem 0 1rem 0;
    }
    nav.submenu li a:hover {
        color: var(--orange-hoover-color);
    }

    .roleta {
        flex-flow: column;
        /* overflow: hidden; */
        z-index: 9999;
        position: absolute;
        top:var(--navi-normal-height);
        right:calc(1.6rem - 5px + 3px);
        width: calc((100% - 20px - 1.6rem) * 0.25);
        /* max-height:calc(100vh - 23vh - var(--navi-normal-height)); */
        min-width: 264px;
        padding: 0 5px 0 5px;
        background-color: white;
    }
    .roleta * {
        transition: initial !important;
    }
    .roleta .content {
        max-height:calc(100vh - var(--navi-normal-height) - 50px - 30px - 20px - 40px);
        overflow-y: auto;
        margin-top: 20px;
    }
    .roleta .content .hor_line {
        
    }
    .roleta .grey {
        background-color: var(--grey-light-color);
        padding: 20px 0 10px 0;
        margin-top: 10px;
    }
    .roleta h1 {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--main-blue-color);
        color: white;
        text-align: center;
        font-size: 1.4rem;
        height:50px;
    }
    .roleta h1 img {
        cursor: pointer;
        position: absolute;
        right: 0;
        height: 100%;
    }
    .roleta h2 {
        font-size: 1.3rem;
        text-transform: uppercase;
        margin: 20px 10px 0 10px;
        padding-bottom: 10px;
    }
    .roleta h2:first-child {
        margin-top: 0;
    }
    .roleta p {
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 1.2rem;
        padding: 0 10px 10px 10px;
    }
    .roleta a:link,
    .roleta a:visited {
        border-bottom: 1px solid var(--grey-darker-color);
        padding-bottom: 1px;
    }
    .roleta a:hover {
        border-bottom-color: var(--main-blue-color);
    }
    .roleta .date {
        font-size: 1rem;
        color: var(--grey-darker-color);
        margin-bottom: 0;
        margin-top:5px;
        padding-bottom:0;
    }
    .roleta .last_paragraph {
        margin-bottom: 50px;
    }
    .roleta .roleta_footer {
        position: absolute;
        bottom:-70px;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 0 5px;
    }
    .roleta .roleta_footer .content_footer {
        border: initial !important;
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: 40px;
        padding: 0 10px;
        background-color: var(--main-blue-color);
    }
    .roleta .roleta_footer .content_footer:hover {
        background-color: var(--orange-hoover-color);

    }
    .roleta .roleta_footer .content_footer img {
        width: 20px;
        height: 20px;
        margin-right: 7px;
    }
    .roleta .roleta_footer .content_footer h2 {
        font-size: 1.3rem;
        text-transform: initial;
        margin: initial;
        padding: initial;
        display: inline;
        color: white;
        font-weight: var(--font-normal);
    }
    .roleta .roleta_footer a.up {
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
    }
    .roleta .roleta_footer a.up img {
        width: 29px;
        height: 16px;;
    }
    .roleta .gap_difference {
        /* difference between scrolled and noscrolled navi */
        position: absolute;
        --gap_difference: calc(var(--navi-normal-height) - var(--navi-scrolled-height));
        top: calc(-1 * var(--gap_difference));
        left:0;
        width: 100%;
        height: var(--gap_difference);
        background-color: white;
    }

    /* scroll to anchor but above fixed navi heght */
    .anchor {
        position: relative;
        font-size:0;
    }
    .anchor a {
        position: absolute;
        left: 0px;
        top:calc(-1 * var(--navi-scrolled-height));
    }

    .invisible {
        display:none !important;    
    }

    #ytpopup {
        position: fixed;
        padding: 10px;
        z-index: 100;
        width: 800px;
        height: 600px;
        max-width: 95%;
        max-height: 95%;
        left:0; right:0; bottom:0; top:0; 
        margin:auto;
        background: black;
        border-radius: 0;
        transition: all 0.5s ease-in;  
        z-index: 9999;
    }
    
    #ytpopup .content {
        height: 100%;
    }
    
    #ytpopup .close {
        position: absolute;
        top: 5px;
        right: 5px;
        padding:1rem 2rem 1rem 2rem;
        color: white;
        background-color: var(--main-blue-color);
        z-index: 99999;
    }

    /* Openstreetmaps */
    .ol-attribution.ol-uncollapsible {
        border-radius: 0 !important;
        height: initial !important;
        background-color: transparent !important;
    }
    .ol-control {
        background: initial !important;
        padding: initial !important;
    }
    .ol-control,
    .ol-zoom .ol-zoom-in,
    .ol-zoom .ol-zoom-out {
       border-radius: 0 !important;
    }
    .ol-control button {
        height: 1.85rem !important;
        width: 1.85rem !important;
        font-size: 1rem !important;
        margin: 4px !important;
        background-color: rgba(0,50,120,.7) !important;
    }
    .ol-control button:focus {
        outline: none !important;
    }
    .ol-control button:hover {
        background-color: var(--main-blue-color) !important;
    }

    button#button--scroll-up {
      right: 1vw;
      width: 3.15vw;
      height: 3.15vw;
      min-width: 35px;
      min-height: 35px;
      max-width: 55px;
      max-height: 55px;
      background-color: rgba(201, 223, 240, 0.5);
    }
    button#button--scroll-up:hover {
      background-color: rgba(201, 223, 240, 0.9);
    }
}