/*
Theme Name: vratkelimek
Author: fafik
Author URI: http://www.archa.cz
Description: zákaznická šablona
Version: 1.1
License: GNU General Public License
License URI: license.txt
*/

/* ------------------------- RESET ------------------------------ */
body, div, h1, h2, h3, h4, p, ul, li, form { margin:0; padding:0; }
div, h1, h2, h3, h4, p, li, th, td, input, select, option, textarea { font: inherit; }
a img { border:none; display: block; }
* {
	box-sizing:border-box;
}
html {
	overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
	scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ------------------------- FONTS ------------------------------ */
.asap-regular {
  font-family: "Asap", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;  /* value from 100 to 900 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* ------------------------- BASIC ------------------------------ */
:root {
	--brcal: #00dc7d;
  --zelena: #11633e;
	--tmzelena: #0d5131; /* kontrastnější text */
  --basic-font: 'Asap', sans-serif;
}
body {
  font-family:sans-serif;		/* old browsers */
	font-family:var(--basic-font);
  font-size:1vw;  /* old browsers */
  font-size: max(20px, min(1vw, 24px)); /* browsers that do not support the clamp() */
	font-size: clamp(20px, 1vw, 24px);  /* (minimum, preferred, maximum); */
  line-height: 1.5;
  margin:0 auto;
  text-align:center;
	color:#fff;
}
h1 {
	font-size: 61px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1em;
  margin: 0 0 10px 0;
}
h2 {
	font-size: 42px;
  font-weight: 700;
  line-height:1.2em;
  margin: 1em 0 0.7em 0;
}
h3 {
	font-size: 32px;
  font-weight: 700;
	margin: 1em 0;
	line-height: 1.3em;
}
h4 {
	font-size: 26px;
  font-weight: 700;
  margin:0.5em 0 0.7em 0;
  line-height:1.3em;
}
p {
  margin-bottom:1em;
}
p:empty {
  display:none;
}
a {
	text-decoration: none;
  color: var(--zelena);
}
a:hover {
	text-decoration: underline;
}
a.obr {
	display:block;
}
.fr { float:right; }
.fl { float:left; }
.cb { clear:both; }
.left { text-align:left; }
.center { text-align:center; }
.right { text-align:right; }

span.break {
	display:block;
}
ul, ol {
  margin-top:0;
}
.container {
	width:1600px;
	margin:0 auto;
	padding:2em
	text-align:left;
}

/* ------------------------ WORDPRESS BASIC ---------------------------- */
.my-logo div{
  width: 32px;
  height: 32px;
  background-image: url("./assets/css/custom-logo.png") no-repeat;
}
a.post-edit-link, a.post-edit-link:visited {
  float:right;
  text-transform:uppercase;
}
.logged-in header {
  top: 32px;
}

/* ------------------------- TOP ------------------------------ */
nav {
  display:block;
	width:100%;
  text-align: center;
  padding:0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  transition: 0.3s ease;
}
nav .wrapper {
  height:75px;
	display: flex;
  align-items: center;
}

/* ------------------------- MENU ------------------------------ */
#topmenu {
	display:inline-block;
	flex-grow: 2;
  list-style-type: none;
}
#top nav {
  transition: all .3s ease;
}
#topmenu li {
  display: inline-block;
}
#topmenu li.mobile {
	display:none;
}
#topmenu li a, #topmenu li a:visited {
	display:block;
	margin: 0 0 0 1em;
  position: relative;
  text-transform: uppercase;
	color:var(--zelena);
}
#topmenu li a.home img {
	width: 15px;
}
#topmenu li#lang a, #topmenu li#lang a:visited {
	width: 40px;
  height: 40px;
  line-height: 40px;
	text-align:center;
	background:var(--zelena);
	border-radius:50%;
	color:#fff;
}
#topmenu a::after,
#topmenu a:hover::after {
  background:#fff;
}
#topmenu li:first-child a::before {
	display:none;
}
#topmenu li.menu-item-has-children > a:hover {
	cursor:default;
	pointer-events:none;
}
/*
#topmenu li .sub-menu {
  position: absolute;
	display: none;
  background: var(--cerna);
  color: #fff;
  padding: 10px 20px 20px 20px;
  z-index: 9999;
  text-align: left;
}
#topmenu li .sub-menu li {
  width: 100%;
	display:block;
}
#topmenu li .sub-menu li a, #topmenu li .sub-menu li a:visited {
  height: 24px;
  line-height: 24px;
	font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  float: none;
  padding:0;
  text-decoration: none;
  display: inline-block;
  margin:0 0 10px 0;
  break-inside:avoid;
}
#topmenu li .sub-menu li:last-child a, #topmenu li .sub-menu li:last-child a:visited {
  border-bottom:none;
}
*/
#topmenu li:hover > .sub-menu,
#topmenu li:focus-within > .sub-menu,
#topmenu li ul:hover,
#topmenu li ul:focus {
   display: block;
}
#closebtn,
#topmenu li.icon {
  display: none;
}
#fullmenu {
	display:none;
}
#menu_icon {
	display:none;
}
/* korekce mm menu */
.mm-page {
	min-height:initial !important;
  background: initial !important;
}
.mm-btn--next::after {
  right: 23px !important; /* osetreni inset-inline-end na starsich android browserech */
}
.mm-listitem--selected a, .mm-listitem--selected a:visited,
.mm_selected_group {
  font-family: var(--bold-font);
}

/* ------------------------- HOMEPAGE ------------------------------ */
#content {
	text-align:left;
}
#content > div {
	padding: 2vw;
}
#content h2 {
  text-transform: uppercase;
}
#content ul {
	margin:0 0 2em 3em;
}
div.brcal {
  background-color:var(--brcal);
}
div.bila {
  color:var(--zelena);
}
div.brcal > .wp-block-group__inner-container,
div.bila > .wp-block-group__inner-container {
  width:1400px;
	margin:0 auto;
}
div.brcal {
	color:var(--tmzelena);
}
#intro {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:6vw 4vw 0 4vw;
	/*
  background-image: url('assets/css/tecky.png');
  background-repeat: repeat-x;
	*/
  flex-wrap: wrap;
}
#intro_img {
	width:420px;
	height:400px;
	position:relative;
}
#intro_img a {
	display: inline-block;
  margin: 0 auto;
}
.kelimek-recycle {
  width:100%;
	height:auto;
}
#intro .bg {
  width: 100%;
  animation: spin 20s linear infinite;
}
@keyframes spin {
  100% {transform: rotate(1turn); }
}
#intro .kelimek {
	position:absolute;
  top: 50%;
  left: 41px;
  transform: translateY(-44%);
  width: 70%;
	height:auto;
}
#intro .stars {
  position:absolute;
	height:auto;
}
#intro .star1 {
  top:6%;
  left:15%;
  width:35px;
  animation: blink1 1s infinite;
}
@keyframes blink1 {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
#intro .star2 {
  top:23%;
  right:22%;
  width:30px;
  animation: blink2 1.2s infinite;
}
@keyframes blink2 {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
#intro .star3 {
  top: 77%;
  right: 16%;
  width: 25px;
  animation: blink3 1.33s infinite;
}
@keyframes blink3 {
  0%   { opacity: 0; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
#intro .ruka {
	position: absolute;
  top: 91px;
  left: 62px;
  width: 96px;
  height: auto;
  animation: arm 4s infinite;
  transform-origin: 88% 80%;
}
@keyframes arm {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-15deg); }
  20% { transform: rotate(0); }
  30% { transform: rotate(-15deg); }
  40% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
#intro .oko {
	position:absolute;
  top: 99px;
  left: 201px;
  width: 29px;
	height: 43px;
}
#intro .oko_bg {
	position: absolute;
  left: 0;
  top: 0;
	width:100%;
	height:auto;
}
#intro .vicko {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
}
#intro .vicko span{
  display:block;
  width:30px;
  background: #FFF;
  border-radius: 0 0 50% 50%;
  border-bottom: 4px solid var(--zelena);
  margin: 0 0 0 -2px;
  animation: mrk 4s infinite ease-in-out;
}
@keyframes mrk {
  0% { height: 0; }
  53% { height: 0; }
  60% { height: 30px;  }
  67% { height: 0; }
  100% { height: 0; }
}
#intro_text {
	margin-left:4em;
  text-align: left;
  text-transform: uppercase;
}
#intro h1 span {
  text-shadow: 4px 4px 0px #fff;
}
#intro h2 {
  display: inline-block;
	margin: 0;
  padding: 0 15px;
  background: var(--zelena);
	font-size:76px;
	color: #fff;
}
#intro h3 {
	font-size: 47px;
	font-style:normal;
  font-weight: 800;
	margin: 4px 0 0 0;
}
#uvod > .wp-block-group__inner-container {
  display:flex;
	justify-content:center;
	align-items:center;
}
#uvod_info {
	width:570px;
}
#uvod h2 {
	margin:0 0 10px 0;
}
#count {
	width:550px;
	display:flex;
	justify-content:center;
  flex-direction: column;
  text-align: center;
}
#count_inner {
	display:flex;
	justify-content:center;
  flex-direction: row;
  min-width: 400px;
  margin: 0 auto;
  background: var(--zelena);
  color: #fff;
  border-radius: 4em;
}
#count_inner img {
  width: 50px;
  margin-right: 1.5em;
}
#count_inner img:first-child {
  margin-right: 0;
	margin-left: 1.5em;
  transform: rotateY(180deg);
	display:none;
}
.counter {
	padding:20px;
  margin: 0;
	min-width:190px;
	line-height: 1em;
	font-size: 66px;
  text-align: right;
}
.counter_jednotka {
  padding:20px 0;
	margin: 0 15px 0 0;
	line-height: 1em;
	font-size: 66px;
}
.counter_text {
  margin-top: 10px;
  line-height: 1em;
	font-size: 42px;
  font-weight: 700;
}
.counter_text span {
  font-size: 20px;
  font-weight: initial;
}

#infos .wp-block-group__inner-container {
	display:flex;
	justify-content:center;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
#infos .wp-block-group__inner-container .wp-block-group__inner-container {
  display:flex;
	flex-direction:column;
	text-align:center;
}
#infos .wp-block-group__inner-container .wp-block-group {
	width:20%;
  padding: 0 1em;
}
#infos .wp-block-group__inner-container .wp-block-group h3 {
	margin-bottom: 0.5em;
}
#infos .wp-block-group__inner-container .wp-block-group h3::before {
  content:'';
	display:block;
	background-position:top center;
	background-repeat:no-repeat;
  background-size: 100%;
	width: 240px;
  height: 240px;
  margin: 0 auto 1em auto;
  border-radius: 50%;
  background-color: var(--brcal);
  background-position: center;
	background-repeat: no-repeat
}
#infos .wp-block-group__inner-container .wp-block-group:nth-child(1) h3::before {
	background-image: url('assets/images/ico1.svg');
}
#infos .wp-block-group__inner-container .wp-block-group:nth-child(2) h3::before {
	background-image: url('assets/images/ico2.svg');
}
#infos .wp-block-group__inner-container .wp-block-group:nth-child(3) h3::before {
	background-image: url('assets/images/ico3.svg');
}
#infos .wp-block-group__inner-container .wp-block-group:nth-child(4) h3::before {
	background-image: url('assets/images/ico4.svg');
}
#infos .wp-block-group__inner-container .wp-block-group:nth-child(5) h3::before {
	background-image: url('assets/images/ico5.svg');
}
#content #infos ul {
	list-style-type:none;
	margin:0;
}

#slogan {
  text-align:center;
	background-color:var(--zelena);
  color:#fff;
	margin:0;
  padding:1.5em;
}

#proc-vracet h2 {
	text-align:center;
}
#proc-vracet ul {
	display:flex;
	justify-content:center;
  margin-left: 0;
	margin-bottom: 1em;
  list-style-type: none;
}
#proc-vracet ul li {
	width:25%;
  padding: 0 1em;
}
#proc-vracet ul li::before {
  content:'';
	display:block;
	background-position:top center;
	background-repeat:no-repeat;
  background-size: 100%;
	width: 150px;
  height: 150px;
  margin: 0 auto 1em auto;
  background-color: var(--brcal);
  background-position: center;
	background-repeat: no-repeat
}
#proc-vracet ul li:nth-child(1)::before {
	background-image: url('assets/images/bubble1-white.svg');
}
#proc-vracet ul li:nth-child(2)::before {
	background-image: url('assets/images/bubble2-white.svg');
}
#proc-vracet ul li:nth-child(3)::before {
	background-image: url('assets/images/bubble3-white.svg');
}
#proc-vracet ul li:nth-child(4)::before {
	background-image: url('assets/images/bubble4-white.svg');
}
#kde-vratit {
	text-align:center;
}
#vice ul {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	list-style-type:none;
	margin:0;
}
#vice ul li {
	width:16.5%;
	padding:1vw;
	text-align:center;
}
#vice ul li::before {
  content:'';
	display:block;
	margin:0 auto;
  width: 100px;
  height: 130px;
  background-size: 100px;
  background-image: url('assets/images/kelimek.svg');
  background-repeat: no-repeat;
  background-position:top center;
}
#faq ul {
	list-style-type:none;
  margin-left: 0;
}
#faq ul li {
  position: relative;
	padding: 1vw 1vw 1vw 6.5vw;
}
#faq ul li::before {
  content:'';
	display:block;
  position: absolute;
  left: 0;
  top: 24px;
  width: 100px;
  height: 60px;
  background-size: 100px;
  background-image: url('assets/images/dlan-ukazujici.svg');
  background-repeat: no-repeat;
  background-position:center;
}
#faq ul li strong {
	font-size:1.2em;
}
#faq ul li a strong {
	font-size:1em;
  color:var(--tmzelena);
}
#nadace .wp-block-group__inner-container {
	display:flex;
	align-content:flex-start;
  margin: 2em auto;
}
#nadace .wp-block-group__inner-container > * {
	width:25%;
  padding-right: 1em;
}
#nadace h2,
#nadace h3 {
	margin-top:0;
}

/* ------------------------- ANIMACE ------------------------------ */
.test #mycka *:not(path) {
	display:none;
}
.test #mycka path,
.test #sberny_box {
	fill:transparent;
}
#linka svg {
	width:90%;
	height:auto;
}
#ozubena_kola path {
  animation: rotace 3s linear infinite;
	transform-origin: center;
	transform-box: fill-box;
}
@keyframes rotace {
	0% { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}
#zuby{
  animation: otaceni_retezu 0.148s infinite linear;
}
@keyframes otaceni_retezu {
  to { stroke-dashoffset: 6; }
}
#kelimek_1 {
	animation: pohyb 15s linear infinite;
}
@keyframes pohyb {
	/* dopad shora */
  0% { transform: translate(0,-100%); opacity:0; }
  /* start bounce: při celé délce úvodní sekvence (do myčky) 21s je 1% animace = 0.21s! Tj. chci-li cca vteřinový bounce při dopadu, mám na to cca 5% animace */
	0.3% { transform: translate(0,0); opacity:1; }
  0.5% { transform: translate(0,-8%); }
  0.7% { transform: translate(0,0); }
  0.85% { transform: translate(0,-3%); }
  1% { transform: translate(0,0); }
	/* konec bounce a vjezd do mycky: na celý posun 79% v ose X potřebuje 90% času, tj. na posun 25% (do otočení) potřebuje 90*25/79=28.5% */
  28.5% { transform: translate(25%,0); }
	/* nadzdvihnutí - aby se mohl otočit */
  28.6% { transform: translate(25%,-10px); opacity:1; }
  90% { transform: translate(79%,-10px); opacity:1; }
  100% { transform: translate(79%,-10px); opacity:0; }
	/* dojezd k expedici */
}
#kelimek_1_next {
	animation: otoceni 15s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes otoceni {
  0%, 28.5% { transform: rotate(0); }
  28.6%, 100% { transform: rotate(-85deg); }
}
#kelimek_2 {
	opacity:0;  /* před první animací */
	animation: pohyb 15s linear infinite;
  animation-delay: 7.5s;
}
#kelimek_2_next {
	animation: otoceni 15s linear infinite;
  animation-delay: 7.5s;
  transform-origin: center;
  transform-box: fill-box;
}
#kelimek_1 .telo {
	animation: umyti 15s linear infinite;
}
#kelimek_2 .telo {
	animation: umyti 15s linear infinite;
  animation-delay: 7.5s;
}
@keyframes umyti {
  0%, 28.5% {fill:transparent; }
  28.6%, 100% {fill:#fff; }
}
#kelimek_1 .xicht {
	animation: face 15s linear infinite;
}
#kelimek_2 .xicht {
	animation: face 15s linear infinite;
  animation-delay: 7.5s;
}
@keyframes face {
  0%, 28.5% { opacity:0; }
  28.6%, 100% { opacity:1; }
}
.light1 {
	fill:#fff;
	animation: flash1 1s infinite linear;
}
@keyframes flash1 {
  0%, 10% {fill:#fff; }
  10%, 100% {fill:#0d5131; }
}
.light2 {
	fill:#fff;
	animation: flash2 1s infinite linear;
}
@keyframes flash2 {
  0% {fill:#0d5131; }
	10%, 20% {fill:#fff; }
  20%, 100% {fill:#0d5131; }
}
.light3 {
	fill:#fff;
	animation: flash3 1s infinite linear;
}
@keyframes flash3 {
  0% {fill:#0d5131; }
	20%, 30% {fill:#fff; }
  30%, 100% {fill:#0d5131; }
}
.light4 {
	fill:#fff;
	animation: flash4 1s infinite linear;
}
@keyframes flash4 {
  0% {fill:#0d5131; }
	30%, 40% {fill:#fff; }
  40%, 100% {fill:#0d5131; }
}
.light5 {
	fill:#fff;
	animation: flash5 1s infinite linear;
}
@keyframes flash5 {
  0% {fill:#0d5131; }
	40%, 50% {fill:#fff; }
  50%, 100% {fill:#0d5131; }
}
.light6 {
	fill:#fff;
	animation: flash6 1s infinite linear;
}
@keyframes flash6 {
  0% {fill:#0d5131; }
	50%, 60% {fill:#fff; }
  60%, 100% {fill:#0d5131; }
}
#ukazatel {
  animation: kmitani 1s infinite;
	transform-origin: 60% 80%;
  transform-box: fill-box;
}
@keyframes kmitani {
	0% { transform: rotate(45deg); }
	20% { transform: rotate(35deg);	}
	55% { transform: rotate(52deg);	}
	100% { transform: rotate(45deg);	}
}
#cislo{
	animation: blikani 3s infinite ease-in-out alternate;
}
@keyframes blikani {
  0%, 92%, 96%, 100% { opacity: 1; }
  94%, 98% { opacity: 0; }
}
#chnapka {
	animation: vysunuti 15s linear infinite;
}
@keyframes vysunuti {
  0%, 68% { transform: translate(0,0); }
  69%, 70% { transform: translate(0,6%); }
  71%, 100% { transform: translate(0,0); }
}

#po-akci ul {
  display: flex;
  justify-content: center;
}
#po-akci ul li {
	width:25%;
	padding-right:2em;
}
#linka {
	text-align: center;
}

/* ------------------------- PAGE ------------------------------ */
.page:not(.home) #intro {
  padding-bottom: 3vw;
}
.page:not(.home) #content {
	color: var(--tmzelena);
  width: 1400px;
  margin: 4em auto;
	padding:0 4vw;
}

/* ------------------------- FOOTER ------------------------------ */
#footer {
	clear: both;
  padding: 2em;
	background:var(--tmzelena);
}
#footer .container {
	padding-bottom:0;
}
#footer #loga a {
	display:inline-block;
  margin: 0 1em;
}
#footer #loga img {
	height: 40px;
  width: auto;
}
#footermenu {
  display:flex;
	flex-wrap:wrap;
	align-content:flex-start;
  justify-content: center;
  list-style-type:none;
}
#footermenu {
  list-style-type:none;
	margin:1em;
}
#footermenu li a, #footermenu li a:visited,
#footermenu li .cookie_link {
	color: #fff;
	display:inline-block;
	margin:0 15px;
}

/* ------------------------- COOKIES (-settings) a LISTA (-alert) ------------------------------ */
#cookies h2  {
  font-size: 32px;
}
#cookies-alert {
	display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 1.5em 3em;
  z-index: 9999999;
  background: var(--tmzelena);
  font-size:17px;
}
#cookies-settings p {
	margin-bottom:0;
}
#cookies-alert p {
  color: #fff;
	line-height: 1.3em;
	margin-bottom: 0.5em;
}
#cookies-alert .button,
#cookies-settings .button {
  border:none;
	text-transform:uppercase;
	display:inline-block;
	padding:10px 15px;
}
#cookies-alert .button:hover,
#cookies-settings .button:hover {
  text-decoration:none;
	cursor:pointer;
}
#cookies-alert .button {
  margin: 0 15px 5px 15px;
  padding: 0;
 	display: inline-block;
  color: #fff;
}
#cookies-alert .button:hover {
	color: var(--brcal);
	cursor:pointer;
}
#cookies-settings .button {
  margin: 0 20px 20px 0;
	padding: 0;
  background:none;
  color:#fff;
}
#cookies-settings .button:hover {
  cursor:pointer;
  color:var(--brcal);
}
#cookies-settings .group h2 {
	text-align:left;
  font-size: 20px;
  margin: 0.5em 0 0 0;
}
#cookies-settings .group p {
	padding-left:80px;
  font-size: initial;
}
#cookies-settings .buttons {
  overflow: auto;
	padding-left:80px;
  margin: 1em 0 0 0;
}
.switch, .switch-item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-right:20px;
}
.switch input, .switch-item input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider, .slider-item {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--brcal);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before, .slider-item:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 5px;
  bottom: 3px;
  background-color: var(--zelena);
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider, input:checked + .slider-item {
  color: var(--zluta);
}
input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
  background-color: #000;
}
input:checked + .slider-item:before {
  -webkit-transform: translateX(-8px);
  -ms-transform: translateX(-8px);
  transform: translateX(-8px);
}
input#cookieset_nutne:checked + .slider {  cursor: default;	}
.slider.round {	border-radius: 34px;	}
.slider-item.round { border-radius: 22px;	}
.slider.round:before, .slider-item.round:before {	border-radius: 50%;	}

.cookie_link {
	margin-top:2em;
}
.cookie_link:hover {
	cursor:pointer;
	text-decoration:underline;
}
#cookies-modal {
  position: fixed;
  z-index: 9999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  display: none;
	justify-content:center;
  align-items:center;
}
#cookies-modal-box {
  background-color: var(--zelena);
  border: 3px solid #fff;
  width: 900px;
	max-height:calc(100% - 4em);
  padding:1.5em;
	overflow-x:auto;
	position:relative;
	text-align: left;
}
#cookies-modal-box .title {
  font-size:30px;
  font-weight: 700;
	margin-left:0;
	margin-bottom:0.3em;
  line-height: 1.3em;
}
#cookies-modal-box p {
  font-size: initial;
	line-height: 1.2em;
}
.close-modal {
  position: absolute;
  top: 0;
  right: 30px;
  font-size: 60px;
  color:#fff;
}
.close-modal:hover,
.close-modal:focus {
  cursor: pointer;
}