/**
 * styly pro podpurne skupiny chrudim (c) Michal Novotny, prolidi.cz
 */
    @font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
    }

    * { outline: none !important; -moz-outline-style: none !important; outline-style: none !important; -webkit-tap-highlight-color: transparent; }
    .grey1 { color: #A9ABAE; }
    .grey2 { color: #828386; }
    .grey3 { color: #6d6e72; }
    .red { color: #c01829; }
    html { width: 100%; height: 100%; }
    body { font-family:'Myriad Pro Regular'; font-size: 16px; background: #e6e7e9; margin: 0px; padding: 0px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
    h1 { color: #c01829; text-align: center; }
    #bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    #main { position: relative; width: 100%; height: 100%; overflow: hidden; }
    #header { z-index: 20; position: absolute; left: 0; right: 0; top: 1%; margin: 0 auto; text-align: center; }
    #footer { z-index: 20; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; display: inline-table; }
    @keyframes fadeInAnimation { 0% { opacity: 0; } 25% { opacity: 0; } 100% { opacity: 1; } }
    #header, #footer {
        animation: fadeInAnimation ease 2s; animation-iteration-count: 1;
    }
    #header img { height: 2em; margin: 0 10px; }
    #header div { position: relative; display: inline-block; vertical-align: middle; }
    #header p, #header small { margin: 0; text-shadow: 1px 1px 1px #000000; }
    #header small { display: block; position: absolute; bottom: -5px; right: 0px; }
    #header a, #footer { text-decoration: none; font-size: 1.5em; font-weight: bold; }
    #header a { display: flex; justify-content: center; align-content: center; }
    .menu1, .menu2, .menu3, .menu4, .menu5 { cursor: pointer; display: inline-block; text-align: center; text-shadow: 1px 1px 1px #000000; margin: 0 5px; }
    #footer div:hover, #footer div:hover span, #footer .menuact, #footer .menuact span { color: #c01829 !important; }
    .menu1, .menu2, .menu3, .menu4, .menu5 { color: #A9ABAE; }
    .menu1 span, .menu2 span, .menu3 span, .menu4 span, .menu5 span { color: #6d6e72; }
    .kruh { border: 0px solid #ffffff; overflow-x: hidden; z-index: 11; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); }
    .kruh { aspect-ratio: 1/1; height: 80%; border-radius: 50%; background-color: #ffffff; opacity: 0.9; animation-duration: 0.5s; animation-timing-function: linear; }
    .kruh::-webkit-scrollbar { display: none; }
    .kruh { -ms-overflow-style: none; scrollbar-width: none; }
    .grow { animation-name: grow; }
    @keyframes grow { from { height: 78%; opacity: 0.4; } to { height: 80%; opacity: 0.9; } }
    .fadegrad { position: fixed; top: 0; left: 0; right: 0; height: 100%; background-color: transparent; background-image: radial-gradient(circle, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 68%); }
    .content, .vice, .zpet { background:#ffffff; margin: 0 auto; width: 65%; }
    .content { position: relative; display: none; height: 100%; overflow: hidden; }
    .content.active { display: block; }
    .hcenter { position: absolute; top: 48%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); text-align: center; font-size: 3.5vh; font-weight: bold; }
    .hcenter p { margin: 0; text-shadow: 1px 1px 1px #000000; white-space: nowrap; }
    .cont { height: 100%; position: relative; }
    .cont .activ { cursor: pointer; }
    .cont .activ img:hover { filter: invert(40%) sepia(1%) saturate(1651%) hue-rotate(191deg) brightness(106%) contrast(87%); }
    .dot1 {
        background-color: #c01829;
        -webkit-transform: rotate(245deg) translate(31vh) rotate(-245deg);
        -moz-transform: rotate(245deg) translate(31vh) rotate(-245deg);
        -ms-transform: rotate(245deg) translate(31vh) rotate(-245deg);
        -o-transform: rotate(245deg) translate(31vh) rotate(-245deg);
        transform: rotate(245deg) translate(31vh) rotate(-245deg);
    }
    .dot2 {
        background-color: #A9ABAE;
        -webkit-transform: rotate(94deg) translate(-30vh) rotate(-94deg);
        -moz-transform: rotate(94deg) translate(-30vh) rotate(-94deg);
        -ms-transform: rotate(94deg) translate(-30vh) rotate(-94deg);
        -o-transform: rotate(94deg) translate(-30vh) rotate(-94deg);
        transform: rotate(94deg) translate(-30vh) rotate(-94deg);
     }
    .dot3 {
        background-color: #6d6e72;
        -webkit-transform: rotate(123deg) translate(-23.5vh) rotate(-123deg);
        -moz-transform: rotate(123deg) translate(-23.5vh) rotate(-123deg);
        -ms-transform: rotate(123deg) translate(-23.5vh) rotate(-123deg);
        -o-transform: rotate(123deg) translate(-23.5vh) rotate(-123deg);
        transform: rotate(123deg) translate(-23.5vh) rotate(-123deg);
    }
    .dot4 {
        background-color: #828386;
        -webkit-transform: rotate(161deg) translate(-11.6vh) rotate(-161deg);
        -moz-transform: rotate(161deg) translate(-11.6vh) rotate(-161deg);
        -ms-transform: rotate(161deg) translate(-11.6vh) rotate(-161deg);
        -o-transform: rotate(161deg) translate(-11.6vh) rotate(-161deg);
        transform: rotate(161deg) translate(-11.6vh) rotate(-161deg);
    }
    .dot5 {
        background-color: #c01829;
        cursor: pointer;
        -webkit-transform: rotate(-27deg) translate(-2.3vh) rotate(27deg);
        -moz-transform: rotate(-27deg) translate(-2.3vh) rotate(27deg);
        -ms-transform: rotate(-27deg) translate(-2.3vh) rotate(27deg);
        -o-transform: rotate(-27deg) translate(-2.3vh) rotate(27deg);
        transform: rotate(-27deg) translate(-2.3vh) rotate(27deg);
    }
    #s1 .dot5 {
        cursor: initial;
    }
    .dot6 {
        background-color: #A9ABAE;
        -webkit-transform: rotate(5deg) translate(-16.9vh) rotate(-5deg);
        -moz-transform: rotate(5deg) translate(-16.9vh) rotate(-5deg);
        -ms-transform: rotate(5deg) translate(-16.9vh) rotate(-5deg);
        -o-transform: rotate(5deg) translate(-16.9vh) rotate(-5deg);
        transform: rotate(5deg) translate(-16.9vh) rotate(-5deg);
    }
    .dot7 {
        background-color: #828386;
        -webkit-transform: rotate(36deg) translate(-26.6vh) rotate(-36deg);
        -moz-transform: rotate(36deg) translate(-26.6vh) rotate(-36deg);
        -ms-transform: rotate(36deg) translate(-26.6vh) rotate(-36deg);
        -o-transform: rotate(36deg) translate(-26.6vh) rotate(-36deg);
        transform: rotate(36deg) translate(-26.6vh) rotate(-36deg);
    }
    .dot5 span { color: white; font-size: 80px; align-self: center; }
    .dot { z-index: 10; position: absolute; top: 58%; left: 48%; width: 11vh; height: 11vh; border-radius: 50%; box-shadow: 1px 1px 4px grey; display: flex; justify-content: center; align-content: center; }
    .dot img { width: 11vh; border-radius: 50%; }
    .dota.left { top: -78%; left: -68%; transform: rotate(-40deg);}
    .dota.right { top: -85%; left: 32%; transform: rotate(33deg); }
    .dota.left span { transform: rotate(40deg); }
    .dota.right span { transform: rotate(-33deg); }
    .dota { font-size: 1.6vh; position: absolute; height: 125%; width: 125%; vertical-align: middle; text-align: center; border: 1px solid #bbb; border-radius: 50%; border-bottom-style:inset; border-right-style:inset; border-bottom-color: transparent; }
    .dota span { display: inline-block; margin-top: 4vh; color: #6d6e72; transform: rotate(-40deg); }
    .dota.rightdown { top: 54%; left: 38%; transform: rotate(142deg); border-bottom-style:inset !important; border-right-style:inset !important; border-bottom-color: transparent !important; }
    .dota.rightdown span { font-size: 1.5em !important; margin-top: 25% !important; transform: rotate(-142deg); }
    .info { position: absolute; bottom: 35px; font-size: 1em; width: 100%; text-align: center; display: none; background: #ffffff; z-index: 10; }
    .info span { display: block; margin-top: 20px; cursor: pointer; font-size: 1.5em; color: #828386; }
    .info a { text-decoration: none; color: black; font-weight: bold; }
    .arleft { position: absolute; left: 5px; bottom: 15%; }
    .arright { position: absolute; right: 5px; bottom: 15%; }
    .cont .activ img { width: 120%; filter: invert(21%) sepia(37%) saturate(22%) hue-rotate(177deg) brightness(90%) contrast(89%); }
    .my-5 { margin-top: 30px; }
    .vice, .zpet { position: relative; display: none; cursor: pointer; color: #828386; font-size: 1.5em; margin-top: 10px; }
    .vice span { float: left; }
    .zpet span { float: right; }
    .mact { position: absolute; bottom: 0; left: 0; }
    @media (max-width: 460px) {
        #header a, #footer { font-size: 5vw; }
        .content, .vice, .zpet { max-width: 95vw;}
        .skupina { max-width: 100vw;}
    }