.card{
         width: 300px;
         height: 60px;
         position: relative;
         box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
}    

 .hat {
	  text-align: center; 
	  position: relative; 
	  font-size: 45px; 
	  font-weight: bold; 
	  width: auto; 
	  margin: 50px auto; 
	  padding: 0 20px 0 20px; 
	  font-family: 'Berkshire Swash', cursive; 
	  margin-bottom:20px; 
	  color: #001e46;
}  
.popis  {
text-align: center; 
	font-size: 16px; 
	font-weight: regular; 
	width: auto; 
	max-width: 800px; 
	margin: 0px auto; 
	padding: 0 20px 0 20px; 
	margin-bottom: 50px;  
	color: #001e46;
}  
  .hat::after {
    content: url(../img/h1-after.png);
    position: absolute;
    /* bottom: 20px; */
    /* right: 25px; */
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    /* z-index: -1; */
    top: -67px;
}    
      .base, #scratch {
        cursor: default;
        height: 60px;
        width: 300px;
          position: absolute;
          top: 0;
          left: 0;
          cursor: grabbing;
      }

      .base {
        line-height: 60px;
        text-align: center;
      }
      #scratch {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
        -webkit-touch-callout: none;
        -webkit-user-select: none;
      }

.cube__side,
.no-js .cube {
	border: 0.75vw solid #fff;
	outline: 1px solid #fff;
	background: #f0f0f0 url(../img/1.png) no-repeat center center;
	background-size: cover;
}

.cube:nth-child(2n) .cube__side,
.no-js .cube:nth-child(2n) {
	background-image: url(../img/2.png);
	background-size: cover;
}

.cube:nth-child(3n) .cube__side,
.no-js .cube:nth-child(3n) {
	background-image: url(../img/3.png);
	background-size: cover;
}
.cube:nth-child(4n) .cube__side,
.no-js .cube:nth-child(4n) {
	background-image: url(../img/4.png);
	background-size: cover;
}
.cube:nth-child(5n) .cube__side,
.no-js .cube:nth-child(5n) {
	background-image: url(../img/5.png);
	background-size: cover;
}
.cube:nth-child(6n) .cube__side,
.no-js .cube:nth-child(6n) {
	background-image: url(../img/6.png);
	background-size: cover;
}
.cube:nth-child(7n) .cube__side,
.no-js .cube:nth-child(7n) {
	background-image: url(../img/7.png);
	background-size: cover;
}
.cube:nth-child(8n) .cube__side,
.no-js .cube:nth-child(8n) {
	background-image: url(../img/8.png);
	background-size: cover;
}
.cube:nth-child(8n) .cube__side,
.no-js .cube:nth-child(8n) {
	background-image: url(../img/8.png);
	background-size: cover;
}
.cube:nth-child(9n) .cube__side,
.no-js .cube:nth-child(9n) {
	background-image: url(../img/9.png);
	background-size: cover;
}
.cube:nth-child(10n) .cube__side,
.no-js .cube:nth-child(10n) {
	background-image: url(../img/10.png);
	background-size: cover;
}
.cube:nth-child(11n) .cube__side,
.no-js .cube:nth-child(11n) {
	background-image: url(../img/11.png);
	background-size: cover;
}
.cube:nth-child(12n) .cube__side,
.no-js .cube:nth-child(12n) {
	background-image: url(../img/12.png);
	background-size: cover;
}
.cube:nth-child(13n) .cube__side,
.no-js .cube:nth-child(13n) {
	background-image: url(../img/13.png);
	background-size: cover;
}
.cube:nth-child(14n) .cube__side,
.no-js .cube:nth-child(14n) {
	background-image: url(../img/14.png);
	background-size: cover;
}
.cube:nth-child(15n) .cube__side,
.no-js .cube:nth-child(15n) {
	background-image: url(../img/15.png);
	background-size: cover;
}
.cube:nth-child(16n) .cube__side,
.no-js .cube:nth-child(16n) {
	background-image: url(../img/16.png);
	background-size: cover;
}
.cube:nth-child(17n) .cube__side,
.no-js .cube:nth-child(17n) {
	background-image: url(../img/17.png);
	background-size: cover;
}
.cube:nth-child(18n) .cube__side,
.no-js .cube:nth-child(18n) {
	background-image: url(../img/18.png);
	background-size: cover;
}
.cube:nth-child(19n) .cube__side,
.no-js .cube:nth-child(19n) {
	background-image: url(../img/19.png);
	background-size: cover;
}
.cube:nth-child(20n) .cube__side,
.no-js .cube:nth-child(20n) {
	background-image: url(../img/20.png);
	background-size: cover;
}
.cube:nth-child(21n) .cube__side,
.no-js .cube:nth-child(21n) {
	background-image: url(../img/21.png);
	background-size: cover;
}
.cube:nth-child(22n) .cube__side,
.no-js .cube:nth-child(22n) {
	background-image: url(../img/22.png);
	background-size: cover;
}
.cube:nth-child(23n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(23n) {
	background-image: url(../img/23.png);
	background-size: cover;
}
.cube:nth-child(24n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(24n) {
	background-image: url(../img/24.png);
	background-size: cover;
}
.cube:nth-child(25n) .cube__side,
.no-js .cube:not(.cube--inactive):nth-child(25n) {
	background-image: url(../img/25.png);
	background-size: cover;
	display: none;
}
.cube--inactive .cube__side,
.no-js .cube--inactive {
	background-blend-mode: luminosity;
}
.content__meta {
	color: #001e46;
}
.content__meta::before {
	display: none;
}


/* With JS we insert a number span into the cube */

.cube__number,
.no-js .cube::after {
	font-family: 'Sora', Sora, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	line-height: 2.5;
	width: 2em;
	height: 2em;
	padding: 0 0 0 0.25em;
	text-align: center;
	letter-spacing: -0.05em;
	color: #fff;
	border-radius: 100% 0 0 0;
	background: #2dc800;
	display: none;
}

.cube:nth-child(2n):not(.cube--inactive) .cube__number,
.no-js .cube:nth-child(2n):not(.cube--inactive)::after {
	background: #2dc800;
}

.cube:nth-child(3n):not(.cube--inactive) .cube__number,
.no-js .cube:nth-child(3n):not(.cube--inactive)::after {
	background: #2dc800;
}

.cube--inactive .cube__number,
.no-js .cube--inactive::after {
	background: #aaa;
}

.js .content__block {
	text-align: right;
}

.content__number {
	font-family: 'Sora', Sora, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
	font-size: 40vw;
	font-weight: bold;
	line-height: 0.5;
	right: 0;
	top: 12vh;
	text-indent: -0.175em;
	letter-spacing: -0.05em;
	color: rgb(255 255 255 / 60%);
}

@media screen and (max-width: 600px) {
	  .brand-image {
		  display: none;
}  
	 .hat {
	  font-size: 30px; 

}  
	.popis  {
	font-size: 15px; 
}  

}
@media screen and (max-width: 1550px) {
.popis {
    margin-bottom: 30px;
}
.title {
	font-size: 3.00vw;
	font-weight: 700;
	position: absolute;
	right: 3vw;
	bottom: 1vw;
	margin: 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
}
}