:root {
    --cl-black: #000000;
    --cl-grey: #565656;
    --cl-grey-16: #161616;
    --cl-grey-32: #323232;
    --cl-white: #ffffff;

    --cl-pink: #f49ac1;
    --cl-pink-hover: #DF597B;

    --filter-white: invert(98%) sepia(5%) saturate(266%) hue-rotate(72deg) brightness(113%) contrast(100%);
    --filter-mata: invert(69%) sepia(64%) saturate(430%) hue-rotate(108deg) brightness(111%) contrast(102%);
    --filter-grey-39: invert(20%) sepia(35%) saturate(15%) hue-rotate(316deg) brightness(97%) contrast(95%);;
    --filter-grey-a4: invert(76%) sepia(9%) saturate(14%) hue-rotate(325deg) brightness(87%) contrast(83%);
    --filter-grey-c9: invert(82%) sepia(14%) saturate(0%) hue-rotate(171deg) brightness(94%) contrast(99%);

    --font-articulat: 'articulat-cf', 'articulat-cf-fallback', sans-serif;
    --font-articulat-heavy: 'articulat-heavy-cf', 'articulat-cf-fallback', sans-serif;
}

@font-face {
  font-family: 'articulat-cf-fallback';
/*
font-family: articulat-cf, sans-serif;
font-style: normal;
font-weight: 100;
/*
  src: local('Georgia');
  size-adjust: 107.0%;
  ascent-override: 90.2%;
  descent-override: 23.1%;
  line-gap-override: 0%;*/
}

body { font-family: var(--font-articulat); background: var(--cl-pink); color: var(--cl-black); position: relative; margin: 0; padding: 0; }
main { position: relative; margin: 0 auto; padding: 0 1rem 8rem; }

body:before { content: ''; position: absolute; left: calc(50% - 149px); top: 0; width: 297px; height: 420px; background: url('/images/postavicky/2.svg') no-repeat; background-size: 100%; }
main:before { content: ''; position: absolute; left: calc(50% - 149px); bottom: 0; width: 297px; height: 420px; background: url('/images/postavicky/4.svg') no-repeat; background-size: 100%; }

.container { box-sizing: content-box; position: relative; margin: 0 auto; max-width: 87.5rem; }
.fullContainer { box-sizing: content-box; position: relative; margin: 0 auto; max-width: 120rem; }

.hp__uvod__headline { font-family: var(--font-articulat); font-weight: 700; font-size: 4rem; line-height: 4.5rem; padding: 9rem 0 0; margin: 0 0 2rem; text-align: center; }
.hp__uvod__headline span { font-size: 3rem; line-height: 3.5rem; }
.hp__uvod__misto { text-align: center; font-size: 2.5rem; line-height: 2.5rem; margin-top: 0; margin-bottom: 3rem; }
.hp__uvod__counter { margin: 0 auto 3.5rem; padding: 0; max-width: 54rem; }
.hp__uvod__kapely { text-align: center; font-size: 2.5rem; line-height: 2.75rem; font-weight: 700; margin-bottom: 2rem;  }
.hp__uvod__cinnosti { text-align: center; font-size: 1.5rem; line-height: 2.125rem; margin-bottom: 5rem; }

.hp__uvod__socky { margin: 0 0 5rem;}
.hp__uvod__socky__headline { text-align: center; font-size: 1.5rem; line-height: 2.125rem; font-weight: 700; }
.hp__uvod__socky__list { text-align: center;  }
.hp__uvod__socky__list a { display: inline-block; }
.hp__uvod__socky__list a:first-child { margin-right: 1.5rem; }
.hp__uvod__socky__list a svg { fill: var(--cl-black); width: 5rem; height: 5rem; transition: all 0.2s ease; }
.hp__uvod__socky__list a:hover svg { fill: var(--cl-grey-32); transform: scale(1.1); }

.hp__uvod__links { text-align: center; }
.hp__uvod__links h2 { font-size: 2rem; line-height: 2.5rem; padding: 0; margin: 0 0 1rem;}
.hp__uvod__links p { font-size: 1.25rem; line-height: 1.5rem; letter-spacing: 0.125px;}
.hp__uvod__links p a { color: var(--cl-black); font-weight: 700; text-decoration: none; display: inline-block; border: 2px solid var(--cl-black); border-radius: 10px; padding: 0.375rem 0.75rem; margin: 0 0.375rem 0.875rem; transition: all 0.2s ease; }
.hp__uvod__links p a:hover { background: var(--cl-pink-hover); }
.hp__uvod__links p a:first-child { font-size: 2rem; line-height: 2.5rem; }

.hp__uvod__predprodej_outer { text-align: center; margin: 0 0 5rem; }
.hp__uvod__predprodej { display: inline-block; text-align: center; margin: 0 auto 0; background: var(--cl-white); padding: 2rem 1.5rem 2rem; border-radius: 2rem; }
.hp__uvod__predprodej__headline { font-size: 1.875rem; line-height: 2.375rem; font-weight: 700; text-decoration: none; margin: 0 0 1.5rem; }
.hp__uvod__predprodej__claim { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin: 0 0 2.5rem; }
.hp__uvod__predprodej__link {  }
.hp__uvod__predprodej__link a {  }
.hp__uvod__predprodej__link a:hover {  }

.hp__uvod__predprodej__link { text-align: center; position: relative; }
.hp__uvod__predprodej__link__button { display: inline-block; position: relative; padding: 1.0rem 1.5rem 1.0rem 4rem; background: var(--cl-black); color: var(--cl-white); text-decoration: none; font-weight: 700; text-transform: uppercase; border-radius: 1rem; font-size: 1.25rem; line-height: 1.75rem; transition: all 0.2s ease; letter-spacing: 0.75px; max-width: 176px; }
.hp__uvod__predprodej__link__button:hover { text-decoration: none; background: var(--cl-pink-hover); }
.hp__uvod__predprodej__link__button:before { content: ''; position: absolute; width: 36px; height: 36px; background: url('/assets/img/ticket.svg'); left: 26px; top: 26px; transition: all 0.2s ease; filter: var(--filter-white); }
.hp__uvod__button__link:hover:before { filter: none; }


/* **************************** Counter **************************** */

.tick {
    font-size: 1rem;
    white-space: nowrap;
    font-family: var(--font-articulat);
}

.tick-flip, .tick-text-inline {
    /*font-size: 2.5em;*/
}

.tick-char { width: 1.5em; }

.tick-text-inline { display: inline-block; text-align: center; min-width: 1em; }

.tick-text-inline + .tick-text-inline {
    margin-left: -0.325em;
}

.tick-group {
    margin: 0 .5em;
    text-align: center;
    line-height: 1.0;
}
.tick-group > div {
    line-height: 1.4;
}

.tick-text-inline {
    color: var(--cl-white) !important;
}

.tick-label {
    margin-top: 0;
    font-size: 1.125em;
    letter-spacing: 1.25px;
    color: var(--cl-white) !important;
}

.tick-flip {
    font-family: var(--font-articulat) !important;
    border-radius: 0.12em !important;
}

.tick-flip-panel-text-wrapper {
    line-height: 1.4 !important;
}

.tick-flip-panel {
    color: var(--cl-grey-16) !important;
    font-weight: 700;
    background-color: rgb(233, 240, 233) !important;
}

.hp__uvod__counter .tick .tick-credits { display: none !important; }


@media screen and (min-width: 78rem) {
    body:before { content: ''; position: absolute; left: 0; top: 0; width: 445px; height: 630px; background: url('/images/postavicky/2.svg') no-repeat; background-size: 100%; }
    main:before { content: ''; position: absolute; left: 0; bottom: 0; width: 445px; height: 630px; background: url('/images/postavicky/4.svg') no-repeat; background-size: 100%; }

    body:after { content: ''; position: absolute; right: 0; top: 0; width: 445px; height: 630px; background: url('/images/postavicky/6.svg') no-repeat; background-size: 100%; }
    main:after { content: ''; position: absolute; right: 0; bottom: 0; width: 445px; height: 630px; background: url('/images/postavicky/3.svg') no-repeat; background-size: 100%; }

    .hp__uvod__headline { font-family: var(--font-articulat); font-weight: 700; font-size: 8rem; line-height: 6rem; padding: 9rem 0 0; margin: 0 0 2rem; text-align: center; }
    .hp__uvod__headline span { font-size: 5rem; line-height: 4rem; }

    .hp__uvod__socky__headline { text-align: center; font-size: 2.5rem; line-height: 3.125rem; font-weight: 700; }
    .hp__uvod__predprodej__headline { text-align: center; font-size: 2.5rem; line-height: 3.125rem; font-weight: 700; }
    .hp__uvod__predprodej { padding: 3rem 6rem 2rem; }
    .hp__uvod__predprodej__link__button { padding: 1.5rem 1.5rem 1.5rem 4rem; font-size: 1.25rem; line-height: 1.25rem; max-width: unset; }
    .hp__uvod__predprodej__link__button:before { left: 15px; top: 16px; }
    .tick-label { margin-top: 0; font-size: 0.5em; letter-spacing: 1.25px; color: var(--cl-white) !important; }



    .hp__uvod__kapely { text-align: center; font-size: 3.5rem; line-height: 3.75rem; font-weight: 700; margin-bottom: 2rem;  }
    .hp__uvod__cinnosti { text-align: center; font-size: 2.5rem; line-height: 3.125rem; margin-bottom: 5rem; }
    .hp__uvod__misto { text-align: center; font-size: 2.5rem; line-height: 2.5rem; margin-top: 0; margin-bottom: 5rem; }
}