html {position: relative;}
body, html, table, button {
margin: 0px; padding: 0px; font-family: 'Dosis', sans-serif; font-size: 24px; font-weight : 500; color: #000; line-height: 1.25;}

* {box-sizing: border-box;}


.pacifico {font-family: 'Pacifico', cursive;}

body { background: #fff; text-align: center;}
body.fixed {margin-top: 98px;}
h1,h2,h3, h4, h5 {margin: 0px; padding: 30px 0 0 0; font-size: 40px; font-family: 'Dosis', sans-serif; line-height: 1.2; color: #000;  font-weight: 300; /*text-align: left;*/ padding-bottom: 10px;}

.aab__accordion_heading h1,
.aab__accordion_heading h2,
.aab__accordion_heading h3,
.aab__accordion_heading h4,
.aab__accordion_heading h5 {
    padding:0;
}

.aab__accordion_heading h1 {
    font-size: 40px;
}
.aab__accordion_heading h2 {
    font-size: 30px;
}
.aab__accordion_heading h3 {
    font-size: 25px;
}
.aab__accordion_heading h4 {
    font-size: 20px;
}

p {padding: 0px; margin: 10px 0px 20px 0px; /*text-align: left;*/ }
a img {border: 0px solid; display: block;}
a img.aligncenter, a img.alignnone {display: inline-block;}
a {text-decoration: underline; color: #000;}
a:hover {text-decoration: none;}
strong {font-weight: 700;}
ul {list-style: none; margin: 0; padding: 0;}
ul li { margin: 0; padding: 0; line-height: 25px;}
hr {height: 2px; background: #ededed; width: 100%; border: 0; padding: 0; outline: 0; margin: 0;}
form * {font-family: 'Dosis', sans-serif; outline: none; font-size: 17px;}
input[type="text"], input[type="email"], input[type="password"], textarea, select.pt-select {border: 1px solid #000; padding: 10px; font-weight: 700;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000; font-weight: 700;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #000; font-weight: 700;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #000; font-weight: 700;
}
:-moz-placeholder { /* Firefox 18- */
  color: #000; font-weight: 700;
}

.flex { display: flex; flex-direction: row; align-items: start; justify-content: space-between; position: relative;}

.site {position: relative; width: 100%; text-align: center;}
.wrapper {position: relative; margin: 0px auto; display: inline-block; text-align: left; width: 100%; z-index: 1;}
.wrapper.flex {display: flex; align-items: center;}
.links > a, .link {font-size: 20px; background: #95d5d2; padding: 7px 12px; text-decoration: none; text-transform: uppercase; margin: 10px 20px; flex: 1; white-space: nowrap; position: relative; letter-spacing: normal; cursor: pointer; display: inline-block;}
    .links > a:after, .link:after {position: absolute; content: " "; width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 0; border-color: transparent #000000 transparent transparent; top: 5px; right: 5px;}
.link-border {
    margin:0;
    border: 1px solid #000; 
    padding: 7px 20px;
}
.link-border:hover {
    background: #fff;
}
.rel {position: relative;}
i.fa-arrow-up {font-size: 25px; cursor: pointer; z-index: 3;}
    
    
    


.hamburger {
    height: 40px;
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
    outline: none;}
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 50px;
  height: 40px;
  display: inline-block;
  position: relative;
  vertical-align: top;}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 50px;
    height: 4px;
    background-color: #fff;
    /*border-radius: 3px;*/
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .color .hamburger-inner, .color .hamburger-inner::before, .color .hamburger-inner::after, .detail .hamburger-inner, .detail .hamburger-inner::before, .detail .hamburger-inner::after {background-color: #fff;}
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -12px; }
  .hamburger-inner::after {
    bottom: -12px; }
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.burger {display: none;}


#top {position: fixed; top: 0; left: 0; width: 100%; z-index: 2; transition: all 0.3s linear 0s; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);}
#top.small {background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%);}
    #top .wrapper {padding: 0 3.5%;}
        #top .wrapper.flex {align-items: flex-start;}
            #top .logo {margin: 50px 0 0 0; transition: all 0.3s linear 0s;}
            #top.small .logo {margin: 10px 0;}
                #top .logo img {height: 130px; transition: all 0.3s linear 0s;}
                #top.small .logo img {height: 70px;}
            #top .menu {color: #fff; margin: 30px 35px 0 0; font-size: 24px;}
                #top .menu > ul {display: block;}
                    #top .menu > ul > li {display: inline-block; margin: 0 15px; position: relative;}
                        #top .menu a {color: #fff; text-decoration: none; position: relative; z-index: 3;}
                        #top .menu > ul > li.active > a:before, #top .menu > ul > li:hover > a:before {content: " "; position: absolute; top: -7px;left: -5px; height: 7px; width: 35px; background: #fff;}
                    #top .menu ul ul {display: none; position: absolute; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); top: -24px; left: -20px; padding: 55px 10px 20px 20px; width: calc(100% + 40px); min-width: 200px; z-index: 2;}
                    #top.small .menu ul ul {background: linear-gradient(180deg, rgba(0,0,0,0) 81px, rgba(0,0,0,0.75) 81px, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0) 100%);}
                    @media all and (min-width: 951px) {#top .menu > ul > li:hover ul {display: block;}}
                        #top .menu ul ul li {padding: 10px 0; list-style: disc; margin: 0 0 0 15px;}
                            #top .menu ul ul li a {margin-left: -5px; display: block;}
                            #top .menu ul ul li a:hover {text-decoration: underline;}
            #top .langs {position: absolute; top: 27px; right: 1.4%;}
                #top .langs a {font-size: 14px; height: 30px; width: 30px; text-transform: uppercase; text-align: center; line-height: 30px; border-radius: 15px; border: 1px solid #000; background: #fff; display: inline-block; text-decoration: none;}
        #progress {display: block; position: absolute; right: 3.5%; top: 75px; background: #fff; height: 35px; width: 200px; transition: all 0.3s linear 0s; z-index: 1;}
        #top.small #progress {top: 28px; background: none; height: auto; width: auto;}
            #top.small #progress  #done {display: none;}
            #top.small #progress  .text {color: #fff; transition: all 0.3s linear 0s; left: 0;}
            #top.small #progress  .text.green {color: #95d5d2; font-size: 25px; left: 15px;}
            #done {height: 35px; line-height: 35px; position: absolute; left: 0; top: 0; background: #95d5d2; /*min-width: 35px;*/ font-size: 17px; text-align: center;}
            #progress  .text {position: relative; z-index: 1; font-size: 17px; padding: 0 10px; line-height: 35px; cursor:default; }
                        
                        
#head {}
    #head .wrapper {height: 80vh; margin: 0 8% 10vh; padding: 10vh 0 0; width: 84%; flex-direction: column; align-items: flex-end; justify-content: center;}
        #head .heading {font-size: 40px; color: #fff; text-align: right; margin: 0;}
            #head .links {width: 60%; flex-wrap: wrap; margin-right: -20px; min-width: 250px;}
    #head .carousel {position: absolute; z-index: 0; width: 100%; height: 90vh; top: 0; left: 0;}
    #head .carousel.mobile_gray:after {position: absolute; content: " "; left: 0; bottom: 0; z-index: 2; width: 100%; height: 30%; background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 100%);}
        #head .slick-slider {height: 100%;}
        #head .slick-list, #head .slick-track {height: 100% !important;}
        #head .slick-slide > div, #head .slick-slide li {height: 100%;}
        #head .slick-slide img {width: 100%; height: 100%; object-fit: cover;}
        #head .slick-arrow {background: none; width: 40px; height: 70px; border-radius: 0; text-indent: -99999px; position: absolute; margin: auto; top: 0; bottom: 0; z-index: 9; border: 0; cursor: pointer; border: 0; outline: 0;}
        #head .slick-arrow.slick-prev {left: 2.3%;}
        #head .slick-arrow.slick-next {right: 2.3%;}
        #head .slick-arrow.slick-next:before, #head .slick-arrow.slick-next:after, #head .slick-arrow.slick-prev:before, #head .slick-arrow.slick-prev:after {content: " "; position: absolute; width: 3px; height: 60%; background: #fff; left: 50%; transition: all 0.1s linear 0s;}
        #head .slick-arrow.slick-next:before {top: 0; transform: rotate(-45deg);}
        #head .slick-arrow.slick-next:after {bottom: 0; transform: rotate(45deg);}
        #head .slick-arrow.slick-prev:before {top: 0; transform: rotate(45deg);}
        #head .slick-arrow.slick-prev:after {bottom: 0; transform: rotate(-45deg);} 
        #head .slick-arrow.slick-next:hover:before {top: -5px;}
        #head .slick-arrow.slick-next:hover:after {bottom: 5px;}
        #head .slick-arrow.slick-prev:hover:before {top: -5px;}
        #head .slick-arrow.slick-prev:hover:after {bottom: 5px;}    
        #head .slick-dots {text-align: center; position: absolute; bottom: 20px; width: 100%; z-index: 3;}
            #head .slick-dots li {display: inline-block; margin: 0 10px;}
                #head .slick-dots button {border: 1px solid transparent; text-indent: 9999px; display: inline-block; width: 25px; height: 25px; overflow: hidden; border-radius: 15px; background: #fff; cursor: pointer; outline: 0;}
                #head .slick-dots .slick-active button {border: 1px solid #000;}
                
#content {letter-spacing: 0.1em; font-size: 22px;}
    #content .wrapper, #footer .wrapper {width: 88%;}
        #online {position: absolute; top: 50px; left: -2%; width: 8%; max-height: 100vh;}
        #content .clipart {position: absolute; z-index: 2; width: 48%; left: 0; top: 20px;}
        #content .clipart.cokl2 {top: auto; bottom: -100px; width: 20%;}
        #content .clipart.cokl6 {width: 115px; left: auto; right: 20px; top: auto; bottom: -35px;}
        #content .clipart.cokl4 {width: 23%; left: -57%; top: auto; bottom: -50px; z-index: 5;}
        #content .clipart.cokl1.online {left: auto; right: -35%; width: 75%;}
        #content .green {width: 55%; background: #95d5d2; padding: 12%; background: #95d5d2; padding: 20px 3% 20px 4%; margin-left: auto; margin-top: 80px; position: relative;}
        #content .green:after {position: absolute; content: " "; width: 60%; height: 60%; background: #eeefef; top: -8%; right: -6%; z-index: -1;}
            #content .circle {width: 58%; height: 0; border-radius: 40%; overflow: hidden; position: absolute; left: -62%; bottom: -70px; z-index: 4; border: 1px solid #000;}
            #content .circle.online {bottom: -10px;}
            #content .circle img {object-fit: cover; opacity: 0; width: 100%; height: 100%; transition: all 0.3s linear 0s; position: absolute; left: 0; top: 0;}
            #content .circle img.active { opacity: 1;}
            #content .heading, #kurz_top .heading {background: #fff; display: inline-block; width: 100%; border: 3px solid #000; padding: 20px 30px; text-transform: uppercase; font-size: 60px; position: relative; z-index: 3; letter-spacing: 0.1em; font-weight: 400;}
            #content .heading.front {z-index: 5;}
            #content .green .heading { margin-left: -40%;}
                /*#content .heading span {opacity: 0; height: 0; width: 0; overflow: hidden; display: block; transition: all 0.3s linear 0s;}
                #content .heading span.active {opacity: 1; height: auto; width: auto; overflow: visible;}*/
                #content .heading em {font-family: 'Pacifico', cursive; text-transform: none; font-style: normal;}
            #content .green .in  {/*overflow: auto; max-height: 450px; padding-right: 10%;*/  margin-bottom: 30px; margin: 20px 0;}
                 #content .green .in > div {opacity: 0; height: 0; width: 0; overflow: hidden; transition: all 0.3s linear 0s;}
                  #content .green .in > div.active {opacity: 1; height: auto; width: auto; overflow: visible;}
                  #content .scroll-wrapper {max-height: 800px;}
            #content .green .links {flex-wrap: wrap; justify-content: flex-start; margin-top: -10px;}
                #content .green .links a {width: 45%; flex: none; margin: 15px 5% 0 0; background: #fff; border: 1px solid #95d5d2; flex: 1 1 30%; max-width: 100%; width: auto;}
                #content .green .links a.active, #content .green .links a:hover {background: #95d5d2; border: 1px solid #000;}
        #content .jak {width: 69%; margin-left: auto;}          
            #content .jak .heading {margin-top: 30px;}
            #content .jak .links {flex-wrap: wrap; justify-content: space-between; margin-top: 0 !important;}
                #content .jak .links > a {width: 30%; flex: none; margin: 0 0 15px 5px; background: #fff; border: 1px solid #000;}
                #content .jak .links > a:hover, #content .jak .links > a.active {background: #95d5d2;}
            #content .jak .in {border: 2px solid #000; padding: 20px; margin: 10px 0 0; position: relative;}
                #home-arrow, #kurz-arrow2, #varianty-arrow {position: absolute; right: 15px; bottom: 15px; display: none;}
                #home-arrow2 {position: absolute; right: 0px; bottom: -20px;}                
            #content .jak .in.bg {background: url(../images/silueta3.png) no-repeat right 10% bottom; background-size: 22% auto;}
            #content .jak .in.bg2 {background-image: url(../images/silueta6.png);}
                #content .jak .in .scroll {/*overflow: auto; max-height: 200px; padding-right: 50px;*/}
                    #content .jak .in .scroll .scroll-wrapper {max-height: none;}
                    #content .jak .in .scroll ul.extra {column-count: 2; display: block; column-rule: 1px solid #000;}
                    #content .jak .in .scroll ul.onecolumn {column-count: 1;}
                        #content .jak .in .scroll ul.extra li {/*display: inline-block;*/ position: relative; padding: 0 30px 15px 65px; margin: 10px 0 0 10px;}
                        #content .jak .in .scroll ul.onecolumn li {padding: 10px 30px 15px 65px; margin: 10px 0 10px 10px;}
                            #content .jak .in .scroll ul.extra li span.ball {width: 45px; height: 45px; border-radius: 30px; background: #95d5d2; position: absolute; text-align: center; line-height: 45px; font-size: 25px; left: 0; top: 0;}
                #content .jak .switch .tab, #content.kurz .switch .tab {max-height: 0;overflow: hidden; transition: all 0.3s linear 0s; transition: max-height 0.5s ease-out;}
                #content .jak .switch .tab.active, #content.kurz .switch .tab.active {max-height: 50000px;  transition: max-height 0.5s ease-in;}
                #content .jak > .flex {margin-top: 30px;}
                #content .jak .flex .heading {width: 70%; margin-right: 20px; margin-top: 10px;}
                #content .jak .flex .links {flex: 1; flex-direction: column; margin: 0 !important;}
                    #content .jak .flex .links a {display: block; width: 100%; margin: 10px 0 5px; border: 1px solid #000; background: #fff;}
                    #content .jak .flex .links a:hover, #content .jak .flex .links a.active {background: #95d5d2;}
        #content .galerie {}
            #content .galerie .head {width: 69%; margin: 40px 0; margin-left: auto; justify-content: stretch;}
                #content .galerie .heading {width: 70%; margin-right: 20px;}
                    #content .galerie .head .links {flex: 1; flex-direction: column;}
                        #content .galerie .head .links a {display: block; width: 100%; margin: 10px 0 5px; border: 1px solid #000; background: #fff;}
                        #content .galerie .head .links a:last-of-type {margin: 2px 0 0;}
                        #content .galerie .head .links a:hover, #content .galerie .head .links a.active {background: #95d5d2;}
                #content .gallery {display: none;}
                    #content .gallery > div {position: relative; width: 69%; margin-left: auto; padding-bottom: 38.8%; /* 16:9 */ height: 0;}
                        #content .gallery iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
                #content .gallery.active {display: flex;}
				
				#content .gallery.full-double {flex-wrap: wrap; justify-content: space-between;}
                    #content .gallery.full-double > div {width: 49%; border: 1px solid #000; margin-bottom: 20px; padding-bottom: 26.8%;}
				
                #content .gallery.thumbs {flex-wrap: wrap; justify-content: space-between;}
                    #content .gallery.thumbs > div {width: 49%; border: 1px solid #000; margin-bottom: 20px; padding-bottom: 26.8%;}
					
                    .page-template-template-online-php #content .gallery.thumbs > div, #content .gallery.full-double > div {padding-bottom: 27.8%;}
        #content .bottom {width: 65%; padding: 20px 5% 20px 4%; margin-right: auto; margin-top: 170px; margin-bottom: 170px; position: relative; font-family: 'Pacifico', cursive; color: #95d5d2; font-size: 66px; text-align: center;}
            #content .bottom .circle {left: auto; right: -55%; bottom: -280px;}
                #content .bottom .circle img {opacity: 1;}
        #content .varianty{overflow: hidden;}
        #content .varianty .head {background: #eeefef; margin-top: 50px;}        
            #content .varianty h2 {margin: 60px 25%; width: 50%;}
            #content .varianty .head .flex {justify-content: center; bottom: -50px; margin-top: -50px;}
                #content .varianty .circle {position: relative; width: 23%; left: 0; bottom: 0; margin: 0 2%; background: #000;}                
                    #content .varianty .circle img {opacity: 1;}
                    #content .varianty .circle:hover img {opacity: 0.8;}
                    #content .varianty .circle .text {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; z-index: 2; padding: 15%; text-align: center; align-items: center; justify-content: center; flex-direction: column;}
                        #content .varianty .circle .text > * {background: #fff; margin: 5px 0; padding: 5px 10px; text-align: left;}
                            #content .varianty .circle .text > strong {background: none; /*border-left: 10px solid #fff;*/ line-height: 1.3; padding: 0; text-align: center;}
                            #content .varianty .circle .text > strong .b {background: #fff; display: inline; white-space: pre-wrap;padding-right: 20px; font-weight: 400; text-transform: uppercase; line-height: 1.9em; padding: 5px;}
                        
        #content .varianty .content {position: relative;}
            #content .varianty .content .abs {position: absolute; z-index: 0; background: #eeefef; left: 0; top: -40px; width: 100%; border: 1px solid #000; padding: 20px 2%; padding-right: 69%;}
                #content .abs h3 {padding: 10px; font-size: 45px; font-weight: 400; /*border-left: 30px solid #fff;*/ padding: 0; line-height: 1.3;}
                    #content .abs h3 strong {background: #fff; display: inline; white-space: pre-wrap;padding-right: 20px; font-weight: 400; text-transform: uppercase; line-height: 1.4;}
                #content .abs .link {margin: 80px 0 0; width: 100%; max-width:260px; }           
                #content .abs .link.buy {background: #fff; background: #fb0d1c; color: #fff;}
                #content .abs .link.buy:hover {background: #95d5d2}
                #content .abs .link.nopad {margin-top: 15px;}    /* UPRAVA CSS */       
            #content .varianty .content .abs:after {position: absolute; width: 125px; height: 33px; background: url(../images/sipka-nahoru-mala.png) no-repeat; content: " "; left: 20%; top: -33px; transition: all 0.3s linear 0s;}
            #content .varianty .content .abs.href2:after {left: 47%;}
            #content .varianty .content .abs.href3:after {left: 74%;}
            #content .varianty .content .right {margin-left: auto; width: 68%; background: #fff; position: relative; z-index: 1;  border: 1px solid #000; margin-top: 140px; padding: 20px 30px;}
                #content .varianty .content .scroll {/*overflow: auto; max-height: 450px; padding-right: 50px;*/ min-height: 250px;}
                    #content .varianty .content .right .tab {opacity: 0; height: 0; width: 0; overflow: hidden; transition: all 0.3s linear 0s;}
                    #content .varianty .content .right .tab.active {opacity: 1; height: auto; width: auto; overflow: visible;}
                        #content .varianty .content .right .tab ul, #content .accord ul, #content .jak .switch .tab ul:not(.extra), .blogx ul, .blue-li-dots ul {padding-left: 5px;}
                        .blogx ul {margin-left: 10px;}
                            #content .varianty .content .right .tab ul li, #content .accord ul li, #content .jak .switch .tab ul:not(.extra) li, .blogx ul li, .blue-li-dots ul li {display: list-item; position: relative; padding: 0 10px 15px 65px; padding-left: 15px;}                    
                            #content .varianty .content .right .tab ul li::before, #content .accord ul li::before, #content .jak .switch .tab ul:not(.extra) li::before, .blogx ul li:before, .blue-li-dots ul li:before {content: "\2022";  color: #95d5d2; font-weight: bold;  display: inline-block;  width: 1em; margin-left: -1em; }
                    #content .varianty .content .right ul.flex {margin: 20px 0; padding: 0; list-style: none;}
                    #content .varianty .content .right ul.flex li {display: inline-block; position: relative; padding: 0 10px 15px 65px; margin: 10px 0 0;}
                    #content .varianty .content .right ul.flex li:before {display: none;}
                        #content .varianty .content .right li span.ball {width: 45px; height: 45px;  border-radius: 30px; background: #95d5d2; position: absolute; text-align: center; line-height: 45px; font-size: 25px; left: 0; top: 0;}
                #monthly {display: none; position: absolute; right: 0; top: -40px; width: 100%; min-height: 30px;}
                .phase2 #monthly {display: block;}
                    #monthly .link.open {padding-right: 30px; margin: 0; position: absolute; right: 0; top: 0;}
                    #monthly .cont {position: absolute; z-index: 1; right: 0; top: 40px; width: 70%; background: rgba(0,0,0,0.9); color: #fff; padding: 30px 50px;}
                    #monthly .cont, #monthly .cont .href {display: none;}
                    #monthly .cont .href.active {display: block;}
                    #monthly .link.buy {background: #fff; background: #fb0d1c; color: #fff; margin: 10px 30px 0 auto; padding-right: 30px;}
                    #monthly .link.buy:hover {background: #95d5d2}                    
                    #monthly .alignright {text-align: right;}
                    

        #content .reference {background: #eeefef; margin-top: 70px; padding-bottom: 50px; width: 68%; margin-left: auto;}
            #content .reference h2 {margin: 0 auto; margin-right: 20px; width: 70%;}
            #content .reference .head {padding: 30px 20px;}
            #content .reference .scroll {/*overflow: auto; max-height: 450px; margin-right: 30px; min-height: 250px;*/    /*padding: 0 5%;*/}
            #content .reference .tab {display: none;}
            #content .reference .scroll.active {display: block;}
                #content .reference .scroll > div {padding: 0 3% 0 13%;    margin: 0 3%;}
                #content .reference .scroll > div:last-of-type {/*border-left: 1px solid #000;*/}
                    #content .reference .scroll .circle {width: 20%; left: 4%; bottom: auto; top: 0}
                        #content .reference .scroll .circle img {opacity: 1;}
                #content .reference .head .links {flex-direction: column; flex: 1;}
                    #content .reference .head .links a {display: block; width: 100%; margin: 0px 0 6px; border: 1px solid #000; background: #fff;}
                    #content .reference .head .links a:hover, #content .reference .head .links a.active {background: #95d5d2;}
        #content .link.ref {padding-right: 65px; margin: 0 0 70px auto;}
        #content .link.ref.buy, #kurz_top .right .links .link.buy {background: #fb0d1c; color: #fff;}
        #content .link.ref.buy:hover, #kurz_top .right .links .link.buy:hover {background: #95d5d2}
            #content .link.ref img {height: 30px; position: absolute; top: 4px; line-height: 0; right: 25px;}
        #content .buy-buttons-under {
            text-align: right;
            margin-bottom:70px;
        }
        #content .buy-buttons-under .link.ref {
            margin-bottom:0px;
        }
        #content .buy-buttons-under .link.ref.buy-voucher {
            margin-left:8px;
        }

        @media all and (max-width: 480px) {
            #content .buy-buttons-under .link.ref.buy-voucher {
                margin-left:0px;
                margin-top:6px;
            }
        }
            
    #content .reference .scroll-wrapper {margin: 0; /*margin: 0 30px; width: calc(100% - 60px);*/ margin-right: 30px; max-height: 480px;}
    #content .reference .slick-list {width: 100% !important; padding: 0 !important; margin: 0 !important;}
        #content .reference .rel {padding: 0 30px !important;}
           
            
        #content .reference .slick-initialized .slick-slide {padding: 0 25px;}
        #content .reference .slick-arrow {background: none; width: 20px; height: 35px; border-radius: 0; text-indent: -99999px; position: absolute; margin: auto; top: 0; left: 17px; bottom: 0; z-index: 11; border: 0; cursor: pointer;  border: 0; outline: 0;}
        #content .reference .slick-arrow.slick-next {left: auto; right: 17px;}
        #content .reference .slick-arrow.slick-next:before, #content .reference .slick-arrow.slick-next:after, #content .reference .slick-arrow.slick-prev:before, #content .reference .slick-arrow.slick-prev:after { content: " "; position: absolute; width: 2px; height: 60%; background: #000; left: 0; transition: all 0.1s linear 0s;}
        #content .reference .slick-arrow.slick-next {right: 17px;}
        #content .reference .slick-arrow.slick-prev:before {top: 0; transform: rotate(45deg);left: 10px;}
        #content .reference .slick-arrow.slick-prev:after {bottom: 0; transform: rotate(-45deg);left: 10px;}
        #content .reference .slick-arrow.slick-next:before {top: 0; transform: rotate(-45deg); left: 10px;}
        #content .reference .slick-arrow.slick-next:after {bottom: 0; transform: rotate(45deg); left: 10px;}     
        #content .reference .scroll .circle {width: 150px; height: 150px !important; border-radius: 150px !important; left: 0; position: relative; margin-bottom: 20px;}
            
 
/* KURZ +  podstrany */

    #kurz_top, #fake_bg.sub {background: url("../images/psitrenink_0483.jpg") no-repeat; background-size: cover; padding: 250px 0 0 0; min-height: 90vh; padding-bottom: 30px;}
    #fake_bg.sub {background: none; padding: 0;}
    #fake_bg .text, .blog_text {position: absolute; height: 100px; width: 100%; top: 0; bottom: 0; left: 0; margin: auto; display: none; z-index: 1; color: #fff; align-items: center; justify-content: center; flex-direction: column;}
    .blog_text {display: flex;}
        #fake_bg .text strong, .blog_text strong {font-size: 105px; font-weight: 400; line-height: 0.6 ;}
                #fake_bg .text strong span, .blog_text strong span {display: block; opacity: 0.8;}
        .blog_text strong {font-size: 300px; font-weight: 400; line-height: 0.8;}
        #fake_bg .text em, .blog_text em {margin-top: 25px; margin-left: -135px; font-style: normal; text-transform: uppercase; font-weight: 700; font-size: 20px;}
        .blog_text em {font-size: 40px; margin-left: -250px;}
        #kurz_top:after, #fake_bg:after {content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 0;}
        #fake_bg.sub {height: 100vh; position: absolute; width: 100%;}
        #fake_bg img {object-fit: cover; width: 100%; height: 100%; display: block;}
        #kurz_top .wrapper {padding: 0 2%;}
        #kurz_top .menu {color: #fff; width: 470px; list-style: none; margin-right: 50px; margin-top: 20px;}
            #kurz_top .menu > li {}
            
            #kurz_top .menu a {color: #fff; position: relative; padding: 5px 0 5px 50px; width: 100%; display: block; text-decoration: none;}
            #kurz_top .menu li {margin: 1px 0;}
            #kurz_top .menu > li a:before {content: "\2022"; position: absolute; left: 10px; top: 4px; color: #fff; font-size: 35px;}
            #kurz_top .menu > li.blue-marker a:before { color: #95d5d2; content: "\25B6"; font-size: 20px; padding-left: 2px; }
            #kurz_top .menu > li.progress-done-week a:before { color: #848484; }
            #kurz_top .menu > li a:hover:before {color: #000;}
            #kurz_top .menu a:hover, /*#kurz_top .menu > li.active > a,*/ #kurz_top .menu li.highlight > a, #kurz_top .menu li.highlight.progress-done-lesson > a {background: #95d5d2; color: #000;}
            #kurz_top .menu li.progress-done-lesson > a { color: #848484;}
            #kurz_top .menu li.progress-done-lesson > a:hover { color: #000;}
                #kurz_top .menu > li li a {padding-left: 80px;}
                #kurz_top .menu > li li a:before {display: none;}
                #kurz_top .menu li ul {margin-bottom: 40px; display: none;}
                #kurz_top .menu li.active ul {display: block;}
            #kurz_top .left .over .switcher > a {margin: 10px 0; padding-right: 20px;}
            #kurz_top .left .over-hint { display:none; }
        #kurz_top .heading {margin-bottom: 25px; width: auto;}
        #kurz_top .heading.desktop {margin-right: 120px;}
        #kurz_top .right {flex: 1;}
            #kurz_top .video {position: relative; width: 100%; margin-left: auto; padding-bottom: 56.8%; height: 0;}
                #kurz_top .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
                #kurz_top .right .links {margin: 30px 0 0;}
                #kurz_top .right .links.wrap {flex-wrap: wrap;}
                    #kurz_top .right .links a {background: #fff;}
                    #kurz_top .right .links a:hover {background: #95d5d2;}
                    #kurz_top .right .links a:first-of-type {margin-left: 0;}
                    #kurz_top .right .links a:last-of-type {margin-right: 0;}
                    #kurz_top .right .links.wrap a, #kurz_top .right .links.wrap a:first-of-type, #kurz_top .right .links.wrap a:last-of-type {margin: 10px 20px;}
                    #kurz_top .right .links.wrap a.new {display: none;}
                    #kurz_top .right .links.wrap a {display: block;}
        #content.kurz .wrapper {width: 100%; padding: 0 2%;}
            #content.kurz .green {margin-right: 10%; width: 70%; background: #eeefef; margin-top: 35px; margin-bottom: 100px; padding: 0px 3% 20px 3%;}
            #content.kurz .green .heading {margin: 0; margin-left: -35%;}
            #content.kurz .green:after {background: #95d5d2; right: -14%; width: 80%; top: -35px; height: calc(100% + 100px);}
            #content.kurz .clipart.cokl2 {bottom: 100px; width: 30%; left: -10%;}
            #content.kurz .scrollbar-janos > .scroll-content.scroll-scrolly_visible {padding-right: 70px;}
            #content.kurz .green h1 {}
            #content.kurz .green h2 {}
            #content.kurz .green h3 {}
            #content.kurz .green h1, #content.kurz .green h2, #content.kurz .green h3 , a.temata_link {font-weight: 700; padding: 20px 0;}
            #content.kurz .heading .checkbox {display: none; position: absolute; right: -80px; top: 0; bottom: 0; margin: auto; height: 60px; border: 2px solid #000; font-size: 36px; width: 60px; text-align: center; line-height: 56px; cursor: pointer;}
            #content.kurz .heading .checkbox:hover {background: rgba(0,0,0,0.3);}
            #content.kurz .heading .checkbox {display: block;}
                #content.kurz .heading .checkbox i {opacity: 0.1;}
                #content.kurz .heading .checkbox.active i {opacity: 1;}
        #content.sub {padding-top: 350px;}
        #content.sub .green {margin-bottom: 250px; margin-right: 15%;}
        #content.sub .green:after {opacity: 0.6; top: -120px; right: auto; left: -10%; width: 83%; height: calc(100% + 180px);}
        #content.slovnicek .green:after {top: -60px; height: calc(100% + 100px); right: -14%; left: auto; width: 80%;}
        #content.manual .green:after {width: 120%;}
        #content.sub .green .heading {margin-top: -60px; margin-left: -25%;}
        #content.sub .green .in {position: relative; z-index: 2;}
        #content.sub .clipart.cokl2 {bottom: 0; width: 32%; left: 4%; z-index: 1; opacity: 0.6;}
        #content.privolani .clipart.cokl2 {left: auto; right: 4%; opacity: 1;}
        #content.manual .clipart.cokl2 {display: none;}
        #content .accord-parent {cursor: pointer; padding-right: 40px; position: relative; padding-right: 30px !important;}
        #content .accord-parent:after {content: "\f055"; font-family: "Font Awesome 5 Free"; position: absolute; right: 0; font-size: 30px; margin: auto; top: 0; bottom: 0; height: 30px; line-height: 30px; font-weight: 900;}
        #content .accord-parent:before, #content a.temata_link:before {content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #ccc;}
        #content .accord-parent.active:after {content: "\f056";}
        #content .accord-parent:first-of-type:before, #content a.temata_link:first-of-type:before {display: none;}
        #content .accord {display: none;}
        #content .accord.active {display: block;}
        #content a.temata_link {font-family: 'FFDINWebProRegular', sans-serif !important; position: relative; font-size: 40px; line-height: 1.2; color: #000; text-decoration: none; font-weight: 700; padding: 20px 0; display: block;}
        
        #kurz_top .right .slick-arrow {background: none; width: 20px; height: 35px; border-radius: 0; text-indent: -99999px; position: absolute; margin: auto; top: 0; left: -100px; bottom: auto; z-index: 9; border: 0; cursor: pointer;  border: 0; outline: 0;}
        #kurz_top .right .slick-arrow.slick-next {left: auto; right: 17px;}
        #kurz_top .right .slick-arrow.slick-next:before, #kurz_top .right .slick-arrow.slick-next:after, #kurz_top .right .slick-arrow.slick-prev:before, #kurz_top .right .slick-arrow.slick-prev:after { content: " "; position: absolute; width: 2px; height: 60%; background: #fff; left: 0; transition: all 0.1s linear 0s;}
        #kurz_top .right .slick-arrow.slick-next {right: 20px;}
        #kurz_top .right .slick-arrow.slick-prev:before {top: 0; transform: rotate(45deg);left: 10px;}
        #kurz_top .right .slick-arrow.slick-prev:after {bottom: 0; transform: rotate(-45deg);left: 10px;}
        #kurz_top .right .slick-arrow.slick-next:before {top: 0; transform: rotate(-45deg); left: 10px;}
        #kurz_top .right .slick-arrow.slick-next:after {bottom: 0; transform: rotate(45deg); left: 10px;}       
        #kurz_top .arrows {position: absolute; right: 0; top: -100px;}
        
/* BLOG */
    .blogx {margin-bottom: 50px;}
        .blogx .flex {align-items: stretch;}
        .blogx .left {width: 380px; padding-right: 25px; margin-right: 25px; border-right: 1px solid #000; margin-top: 70px;}
            .blogx .left h3 {border: 1px solid #000; padding: 12px 30px; font-size: 45px; font-weight: 400; margin-bottom: 30px; margin-top: 50px;}
            .blogx .left h3:first-of-type {margin-top: 0;}
            .blogx .left p {padding: 0 10px;}
        .blogx .right {flex: 1; background: #eeefef; padding: 3% 5% 3% 3%; margin-top: 40px;}
            .blogx .right h2 {border: 3px solid #000; display: inline-block; padding: 18px 30px; font-size: 50px; font-weight: 400; margin-bottom: 30px; background: #fff;}
                .blogx .right h2 a {text-decoration: none;}
                .blogx .right .small {font-size: 30px;}
        .blogx .blog-post img {max-width: 100%; margin-bottom: 20px; height: auto;}
        .blogx .more {text-align: right;}
        .blogx .load.more {text-align: center;}
            .blogx .more a, .blogx button.more {background: #77808c; margin-left: auto; display: inline-block; text-decoration: none; border: 1px solid #000; font-size: 17px; font-weight: 700; padding: 6px 60px 6px 10px; letter-spacing: 1px; cursor: pointer;}
            .blogx .more a:hover, .blogx button.more:hover {background: #95d5d2;}
            .blogx button.alm-load-more-btn {margin-right: auto; padding: 6px 30px; margin-top: 50px;}
            .blogx button.alm-load-more-btn.done {display: none;}
        .blogx .alm-reveal {padding: 40px 0 40px; border-bottom: 1px solid#000;}
        .blogx .alm-reveal:last-of-type {border: none; padding-bottom: 0;}
        .blogx .alm-reveal:first-of-type {padding-top: 0;}
        .blogx .wp-block-image .alignleft {margin-right: 0; padding-right: 50px;}
        .blogx .wp-block-image {margin: 0;}
            .blogx .wp-block-image img {height: auto;}
        
 
 
                
                
                
    #footer {background: #95d5d2; font-weight: 300; padding: 50px 0; letter-spacing: 0.1em;}
        #footer h2 {font-size: 80px; width: 100%; padding: 0; margin-bottom: 30px;}
        #footer h3 {font-size: 40px; padding-top: 0;}
        #footer .flex {flex-wrap: wrap; align-items: center;}
            #footer .flex:not(.wpcf7-form) > div {width: 50%;}
            #footer .flex >.kontakt {padding-right: 50px; width: 60%; }
            #footer .flex > .cvicebna {border-left: 1px solid #000; padding-left: 50px; width: 40%;}
            #footer form.flex {flex-direction: column; align-items: flex-end;}
                #footer form * {margin: 7px 0;}
                #footer form textarea {width: 70%; height: 150px;}
                #footer form input[type="text"], #footer form input[type="email"], #footer form input[type="password"] {width: 35%; /*text-transform: uppercase;*/}
                #footer .socials {justify-content: flex-start; margin: 20px 0; width: 100% !important;}
                #footer .socials a {width: 100px; height: 100px; border-radius: 50px; background: #fff; position: relative; border: 1px solid #000; margin: 5px 10px 5px 0;}
                    #footer .socials img {width: 80px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
                #footer .links {width: 100% !important; margin-top: 20px;}
                    #footer .links a {background: #fff; border: 1px solid #000; margin-left: 0;}
                #footer .link {border: 1px solid #000; padding: 7px 20px;}
                #footer .link {background: #fff;}
                #footer .link:hover {background: #95d5d2;}

.mobile {display: none !important;}

#popupx, #popupx .content {display: none;}
#popupx {max-width: 600px; background: #000; color: #fff;}
.popupx .fancybox-bg {display: none;}  
.popupx .fancybox-toolbar {display: none;}
    #popupx .buy {background: #fb0d1c; color: #fff; margin: 30px auto 0; padding-right: 65px;}
    #popupx .buy:hover {background: #95d5d2;}    
    #popupx .custom_close {color: #fff; text-decoration: none; margin-bottom: 10px; display: inline-block;}




/*************** SCROLLBAR BASE CSS ***************/
 
.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
 
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
    width: 100% !important;
    scrollbar-width: none;
}
 
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}
 
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
 
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
 
.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
 
 
 
 
 
/******************* JANOS SCROLLBAR *******************/
 
.scrollbar-janos > .scroll-element,
.scrollbar-janos > .scroll-element div
{
    border: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    z-index: 10;
}
 
.scrollbar-janos > .scroll-element div {
    background-color: transparent;
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}
 
.scrollbar-janos > .scroll-element.scroll-x {
    /*border-top: 1px solid #AAAAAA;*/
    bottom: 0;
    height: 16px;
    left: 0;
    min-width: 100%;
    width: 100%;
}
 
.scrollbar-janos > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0;
    top: 0;
    width: 40px;
}
 
.scrollbar-janos > .scroll-element .scroll-element_corner {
    display: none;
}
 

 
.scrollbar-janos > .scroll-content.scroll-scrolly_visible {/* left: -40px; margin-left: 40px;*/ padding-right: 40px; box-sizing: border-box !important;}
.scrollbar-janos > .scroll-content.scroll-scrollx_visible { top:  -40px; margin-top:  40px; }
 
/* scrollbar arrows */
 
.scrollbar-janos > .scroll-element .scroll-arrow { display: none; }
.scrollbar-janos > .scroll-element.scroll-element_arrows_visible .scroll-arrow { display: block; z-index: 12; }
 
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less { height: 100%; width: 40px;}
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more { height: 100%; left: auto; right: 0; width: 40px;}
 
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_outer { left: 16px; }
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_track { left: -32px; }
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_size { left: -33px; }
 
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less { width: 100%; height: 30px; cursor: pointer; top: 0; bottom: auto;}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more { width: 100%; top: auto; bottom: 0; height: 30px; position: absolute; cursor: pointer; }
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more:before, .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more:after,
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less:before, .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less:after {content: " "; position: absolute; width: 2px; height: 28px; background: #000; top: -2px; left: 9px; transition: all 0.1s linear 0s;}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less:before {transform: rotate(45deg);}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less:after {transform: rotate(-45deg); right: 9px; left: auto;}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more:before {transform: rotate(135deg);}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more:after {transform: rotate(-135deg); right: 9px; left: auto;}
 
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_outer { top: 16px; }
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_track { top: -32px; }
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_size { top: -33px; }
 
/* if another scrollbar is visible */
 
.scrollbar-janos > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -17px; }
.scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -17px; }
 
.scrollbar-janos > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_inner { left: -17px; }
.scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_inner { top: -17px; }
 
/* if arrows & another scrollbar are visible */
 
.scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_corner,
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_corner {
    border-top: 1px solid #AAAAAA;
    bottom: 0;
    display: block;
    height: 16px;
    left: auto;
    right: 0;
    top: auto;
    width: 16px;
    z-index: 13;
    display: none;
}
 
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-arrow_more { right: 17px;}
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_track { left: -50px;}
.scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_size { left: -51px;}
 
 
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-arrow_more { bottom: 17px;}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_track { top: -50px;}
.scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_size { top: -51px;}
 







@media all and (max-width: 1400px) {
  
  #content .jak .links > a {width: 49%; margin-left: 0;}
    #content .varianty .content .right ul.flex {display: block;}
    
}    

@media all and (max-width: 1200px) {
  
	#top .menu { font-size:21px; }
	#top .menu:not(.no-reduction) { margin-right:0px; }
		#top .menu > ul > li { margin: 0 8px;}
    
}    


@media all and (max-width: 1050px) {

.mobile {display: block !important;}
.desktop {display: none !important;}

    #content .wrapper.top {width: 100%; overflow: hidden;}
    #content.kurz .wrapper {padding: 0;}
    #content .wrapper.ref-wrap {width: 100%; overflow: hidden;}
    #content .green {margin-right: 0; width: 87%; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 50px;}
    #content .green:after {right: 0; top: -50px;}
        #content .heading, #kurz_top .heading {font-size: 45px; padding: 15px 20px; border: 2px solid #000;}
        #kurz_top .right {text-align: center;}
        #kurz_top .heading.mobile {display: inline-block !important; margin-left: auto; margin-right: auto;}
        #content .green .heading {margin-left: -15%; margin-top: -40px; order: 1;}
        #content .green .in {position: relative; z-index: 2; order: 4; margin-top: 10px; padding-left: 5%; width: 100%;}
        #content .green .links {order: 3; z-index: 2; justify-content: center; width: 65%; margin-left: 5%; flex-direction: column;}
            #content .green .links a {max-width: 100%; margin-left: 0; flex: none; width: 100%;}
        #content .top .circle {width: 45%; left: 0; margin-left: -15%; bottom: auto; top: 0; position: relative; order: 2;}
        #content .top .clipart {top: auto; bottom: 20px; width: 60%; left: 4%;}
        #content .clipart.cokl4 {display: none;}
        #online {top: auto; bottom: 50px; left: 2%; width: 9%;}
    #content .jak {width: 100%;}
        #content .jak > .flex {display: block;}
            #content .jak .flex .links {flex-direction: row;}
            #content .jak .flex .links a {width: 49%;}
    #content .bottom {width: 100%; padding: 0; margin-top: 50px; margin-bottom: 180px; font-size: 40px;}
        #content .bottom .circle {left: auto; right: 0; bottom: -320px; width: 300px;}        
        #footer > .wrapper > .flex {display: block;}
        #footer .flex > div { width: 100%;}
        #footer .flex:not(.wpcf7-form) > div {width: 100%;}
        #footer .cvicebna, #footer .kontakt {border: 0; padding: 0; margin: 20px 0 0;}
        #footer .socials img {width: 60px;}
        #footer .socials a {width: 74px; height: 74px;}
        #footer form input[type="text"], #footer form input[type="email"], #footer form input[type="password"], #footer form textarea {width: 100%;}
            #content .varianty .content .abs:after {left: 45% !important;}   
        #content .reference {width: 100%;}
        #content .reference .scroll {display: block; padding: 0;}
            #content .reference .scroll > div {padding: 0 3% 0 26%;}
            #content .reference .scroll > div:last-of-type {border: none;}
            #content .varianty .circle {width: 60%; right: 0; margin: 40px auto 0; left: 0;}
            #content .varianty .circle.active {/* top: -80px; margin: auto;*/}
            #content .varianty .head {padding-bottom: 100px;}
            #content .varianty .content .right {width: 100%; margin: 0; border-top: 0;}
            #content .varianty .content .abs {position: relative; width: 100%; padding: 20px; top: 0; display: flex; align-items: self-start;}
            #content .varianty .content.initialized {margin-top: 40px;overflow: visible !important;}
            #content .varianty h2 {margin: 20px 20px 50px; width: auto;}
            #content .abs h3 {font-size: 25px;}
            #content .abs .link {margin: 0 0 0 20px; min-width: auto;}
            #content .gallery > div {width: 100%; padding-bottom: 56.25%;}
            #kurz-arrow {position: absolute; right: 0; bottom: -20px;}
            #kurz_top {background: none !important; margin: 0; padding: 0;}
            #kurz_top:after {display: none;}
            #kurz_top .wrapper {padding: 0;}
            #kurz_top .flex {display: block;}
            #kurz_top .right .links {display: flex; flex-wrap: wrap;}
            #kurz_top .right .links a, #kurz_top .right .links a:first-of-type, #kurz_top .right .links a:last-of-type, #kurz_top .right .links.wrap a, #kurz_top .right .links.wrap a:first-of-type, #kurz_top .right .links.wrap a:last-of-type {margin: 5px; width: calc(50% - 10px); background: #95d5d2; flex: auto; border: 1px solid #000;}
            #kurz_top .right .links .link.buy {background: #fb0d1c !important; color: #fff !important;}
            #kurz_top .right .links .link.buy:hover {background: #95d5d2 !important;}
            #kurz_top .right .links a:hover {background: #fff;}
            #kurz_top .left {min-height: 100vh; padding-top: 200px; margin-bottom: 30px;}
            #kurz_top .left .over {position: relative; background: #95d5d2; width: auto; display: inline-block; transform: translateX(-100%); margin-left: 30px; padding: 20px 30px; transition: all 0.3s linear 0s;  height: 250px; overflow: hidden;}
            #kurz_top .left .over-hint { display:none; }
            #kurz_top .left .over.active {transform: none; margin: 0;  height: auto; overflow: visible;}
            #kurz_top .left .over:before {position: absolute; content: " "; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #000000 transparent transparent; top: 3px; right: 3px; cursor: pointer;}
            #kurz_top .left .over.active:before {display: none;}
            #fake_bg {position: absolute; width: 100%; left: 0; top: 0; z-index: 0; height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center;}    
            #kurz_top .left .over > a, #kurz_top .left .over .switcher > a, #kurz_top .menu > li > a {background: #fff; border: 1px solid #000; margin: 10px 0; padding: 5px 10px; min-width: 50vw; color: #000; font-size: 20px;}
            #kurz_top .menu > li.progress-done-week > a { opacity:0.5; }
            #kurz_top .left .over .switcher > a {margin: 0;}
            #kurz_top .menu > li > a:after {position: absolute; content: " "; width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 0; border-color: transparent #000000 transparent transparent; top: 5px; right: 5px;}
            #kurz_top .menu > li > a:before {display: none;}
			#kurz_top .menu > li.blue-marker > a { padding-left:25px; }
			#kurz_top .menu > li.blue-marker > a:before { margin-top:2px; margin-left:-1px; display:block; color: #000; content: "\f0da"; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900; }
			
            #kurz_top .left .over > a:hover, #kurz_top .left .over .switcher > a:hover {background: #95d5d2;}
            #kurz_top .menu > li li a {padding-left: 10px;}
            #kurz_top .menu li ul {margin-bottom: 20px;}
            #kurz_top .menu {/*display: none;*/ margin: 0; width: 100%;}
            #content.kurz .green {margin-right: 5%; width: 95%; margin-top: 40px; display: block; margin-bottom: 250px; padding-top: 30px;}
            #content.kurz .green:after {top: -170px; height: calc(100% + 350px);}
            #content.kurz .heading {width: 86%; margin: 70px 0 0px 7%; width: calc(90% - 70px);}
            #content.kurz .clipart.cokl2 {bottom: 0px; width: 250px; left: 15%;}
            #content.sub .clipart.cokl2 {left: auto; right: 5%; width: 50%;}
            #content.sub .green {margin-bottom: 180px; margin-top: 0; margin-right: 0; margin-left: 5%;}
            #content.sub .green:after {height: calc(100% + 220px); width: 50%;}
            #content.slovnicek .green {margin-bottom: 250px; margin-right: 5%; width: 95%; margin-top: 40px; margin-left: 0;}     
            #content.slovnicek .green:after {height: calc(100% + 350px); width: 80%;}   
            #content.sub .heading {margin: 0px 0 0; position: relative; top: 40px;}
            #content.slovnicek .heading {margin: 70px 0 0px 7%; top: 0; }
            #fake_bg .text {display: flex;}
            #kurz_top .arrows {position: relative; top: 0; height: 50px;}
            #kurz_top .right .slick-arrow.slick-next:before, #kurz_top .right .slick-arrow.slick-next:after, #kurz_top .right .slick-arrow.slick-prev:before, #kurz_top .right .slick-arrow.slick-prev:after {background: #000;}
            #kurz_top .right .slick-arrow {left: 17px; width: auto; line-height: 33px;}
            #kurz_top .right .slick-arrow {text-indent: unset; white-space: nowrap; padding: 0 30px; text-decoration: none;}
            #kurz_top .right .slick-arrow.slick-next:after, #kurz_top .right .slick-arrow.slick-next:before {left: auto; right: 0;}
            .blogx .left {display: none;}
            .blogx .right h2 {font-size: 25px;}
            .blogx .right .small {font-size: 15px;}
            .blogx hr {margin: 30px 0;}
}    
    


@media all and (max-width: 950px) {
    
    body, html, table {font-size: 20px;}
    #top .menu {display: none;}
    #top .menu /*.active*/ {/*display: block;*/ background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); position: absolute; right: 0; top: 59px;  z-index: 2; width:100%; margin-right:0; }
        #top .menu > ul > li {display: block; margin: 0; padding: 5px 30px 5px 10px; position: relative;}
        #top .menu > ul > li.has-submenu > span {z-index: 3; position: absolute; width: 30px; height: 30px;  top: 10px; right: 10px; cursor: pointer;}
            #top .menu > ul > li.has-submenu > span .triangle {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;width: 0; height: 0; border-style: solid; border-width: 10px 7px 0 7px; border-color: #fff transparent transparent transparent;}
        #top .menu > ul > li.has-submenu.is-active > span .triangle {border-width: 0 7px 10px 7px; border-color:  transparent transparent #fff transparent;}
            #top .menu > ul > li a {padding: 5px; display: block;}
            #top .menu > ul > li a:before {display: none;}
                #top .menu > ul > li.has-submenu ul {display: block; width: 0; height: 0; overflow: hidden; position: relative; background: none; top: 0; left: 0; padding: 0; transition: all 0.1s linear 0s;}
                #top .menu > ul > li.has-submenu.is-active ul {width: auto; height: auto; overflow: auto; padding: 0 0 0 20px;}
                #top .menu ul ul li {padding: 5px 0; transition: all 0.1s linear 0s;}
                    #top .menu ul ul li a {padding: 0; font-size: 20px;}
    .burger {display: block; position: absolute; right: 2%; top: 45px; margin-right: 5px;}
    #progress {right: 2%; margin-right: 5px; top: 95px; width: 100px;}
    #top.small #progress {top: 47px; right: 70px;}
    #top .langs {right: 2%; top: 12px;}
    #top .logo {margin: 20px 0 0 0;}
    #head .wrapper {height: 90vh; margin: 0 4% 10vh; padding: 10vh 0 0; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; width: 92%;}
        #head .heading {text-align: center; font-size: 25px; margin-top: 20px;}
        #head .links {width: 35%; flex-direction: column; min-width: 150px;}
        #head .links.longer {width: 75%; }
            #head .links a {margin-left: 0; width: 100%;}
    #head .carousel {height: 100vh;}
        #head .slick-arrow {display: none !important;}
            #head .slick-dots li {margin: 0 5px;}
                #head .slick-dots button {height: 15px; width: 15px;}
    #content .varianty .head .circle .text {font-size: 16px;}
    #content .scroll-wrapper, #content .jak .in .scroll .scroll-wrapper {max-height: none;}


}

@media all and (max-width: 700px) {
    #content .heading, #kurz_top .heading {font-size: 35px; padding: 10px 20px;}
    body, html, table {font-size: 17px;}
    #content .wrapper, #footer .wrapper {width: 90%;}
    .links > a, #content .green .links > a, .over .link {font-size: 17px; padding: 5px 12px; margin-top: 10px; padding-right: 20px;}
    #content .jak .links a {}
    #content .jak .in .scroll ul.extra {column-count: 1;}
    #content .clipart.cokl2 {top: auto; bottom: -53px; width: 90px; left: -9%; display: none;}
    #content.kurz .clipart.cokl2 {display: block; left: 7%;}
    #content.manual .clipart.cokl2 {left: auto; right: 10%; width: 140px;}
    #content.privolani .clipart.cokl2 {left: auto; right: 4%; width: 300px;}
    #content .jak .in {padding-bottom: 40px;}
    #content .galerie .head {width: 100%; margin: 20px 0 0;}
    #content .galerie .head .links a {margin: 10px 0 0;}
    #content .reference .head .links a {margin: -1px 0 3px;}
    #content .gallery.full-double > div,  #content .gallery.thumbs > div, .page-template-template-online-php #content .gallery.thumbs > div {width: 100%; border: none; margin-bottom: 2px; padding-bottom: 56.25%;}
    #content .bottom .circle {width: 200px; bottom: -230px;}
    #footer h2 {font-size: 60px; margin-bottom: 10px;}
    #footer h3 {font-size: 30px;}
    #content .jak .switcher .in {opacity: 1; height: auto; width: auto; overflow: visible; display: none; margin-bottom: 20px;}
    #content .jak .in .scroll ul.onecolumn li {padding: 5px 30px 15px 65px;}
    #content .reference h2 {/*width: auto; min-width: 50%;*/}
    #content .reference .scroll-wrapper {margin: 0; /*margin: 0 30px; width: calc(100% - 60px);*/}    
        #content .reference .scroll-wrapper > .scroll-content, #content .reference .scroll-wrapper {overflow: visible !important;}
        #content .reference .scroll .circle {width: 100px; height: 100px !important; border-radius: 100px !important; left: 0; position: relative; margin-bottom: 20px;}
        #content .reference .slick-arrow {top: 30px; top: 225px; bottom: auto;}
    #content.kurz .green {margin-top: 30px; padding-top: 10px;}
    #content.kurz .green:after {top: -130px;}
	#content.kurz .green .heading {margin: 60px 0 0px 7%;}
    #content.kurz .green h2 {font-weight: 400; font-size: 30px;}
    #content.sub .green h2, #content.sub .green h3 {font-weight: 700; font-size: 30px;}
    #fake_bg.sub {height: auto; width: 100%; position: relative; padding: 0; min-height: auto;}
    #fake_bg img {}
    #content.sub {padding-top: 0;}
    #content.sub .green {margin-top: 0;}
    #content.sub .heading.mobile {margin-top: 0; margin-left: 0; width: auto; display: inline-block !important; min-width: 80%; margin-bottom: 30px;}
    #content.slovnicek .heading.mobile {margin-bottom: 0;}
    /*#content.sub {margin-top: -67px;}*/
    #content.slovnicek {margin-top: -35px;}
    .blog_text strong {line-height: 0.7; font-size: 120px;}
        .blog_text em {font-size: 25px; margin-left: -55px;}
    .blogx .wp-block-image .alignleft {float: none; width: 100%; padding: 0;}
        .blogx .wp-block-image .alignleft img {width: 100%; height: auto;}
    #monthly {position: unset;}
    #monthly .cont {width: 90%;}
    #monthly .link.buy {white-space: normal; font-size: 17px; width: 100%;}
    
	
	/* UPRAVA CSS */
	#content .jak .links > a {width: 100%; margin-left: 0;}	
	#content .abs .link.nopad {display:none;} 	
	#content .jak .flex .links > a {width: 100%; margin-left: 0;}
    
}

@media all and (max-width: 420px) {
        #footer .flex >.kontakt {padding-right: 10px; width: 75%;}
        #footer .flex > .cvicebna {padding-left: 10px; width: 25%; border: 0; min-width: 85px; flex: 1;}
        #content .green .links {padding-bottom: 43px;}
        #content .green .links a.protahnout {position: absolute; left: -40%; bottom: 0; width: 140%; max-width: 140%;}
        #content .jak .in .scroll ul.onecolumn li {margin: 5px 0;}
        #content .jak .in { padding: 10px; padding-bottom: 40px;}
        #content .jak .in .scroll ul.onecolumn li {padding: 5px 5px 15px 55px; font-size: 18px; letter-spacing: 0em;}
        #content .varianty .circle .text {font-size: 18px;}
        #kurz_top .menu, #kurz_top .left, #kurz_top .left .over {width: 100%; overflow: hidden;}

        #kurz_top .left {
            position:relative;
        }

        #kurz_top .left .over.active + .over-hint,
        #kurz_top .left .over-hint.hint-hidden {
            opacity:0;
        }
        #kurz_top .left .over-hint {
            pointer-events: none;
            transition:opacity 0.15s ease-in-out;
            opacity:1;
            position: absolute; 
            left:40px;
            top:450px;
            display:block;
            max-width:calc(100vw - 60px);
            animation: pulsate 2s 5;
        }     
        #kurz_top .left .over-hint img {
            max-width:100%;
            height:auto;
        }       

        @keyframes pulsate {
            0% {
              transform: scale(1);
            }
            50% {
              transform: scale(0.9);
            }
            100% {
              transform: scale(1);
            }
        }
}