:root {
  --background:#fff url(thesecretgarden/bg.jpg) repeat 0 0;
  --black: #000;
  --blue: #04134e;
  --bluebg:rgba(3,14,63,1);
  --bluebg_opa:rgba(3,14,63,1);
  --blue_soft:rgba(210,210,255,0.7);
  --blue_soft_2:#355397;
  --blue_hover:rgba(220,220,255,0.9);
  --black_overlay:rgba(0,0,0,0.9);
  --gray: #aaa;
  --red: #d00;
  --red2: #b00;
  --white: #eee;
  --lila: #f0f;
  --zold: #16c60c;
  --boxshad: 3px 3px 4px rgba(0,0,50,0.5);
  --imgshad: 2px 6px 12px -4px rgba(0,0,0,0.75);
  --imgshad_OLD: 4px 6px 12px -2px rgba(0,0,0,0.75);
  --gray: #777;
  --headtranstime: 0.4s ease;
  --fadeIn: fadeIn 1s ease-out;
  --fadeOut: fadeOut 1s ease-out;
  --leftmenutranstime: 0.7s;
  --head: 25vw; /*25.61w*/
  --head_2: 15.61vw;
  --head900: 200px;
  --head1000: 220px;
  --exp_transform: kepek_5 30s linear infinite 0s;
  --maths_transform: kepek_4 24s linear infinite 0s;
  --magan_transform: kepek_2 12s linear infinite 0s;
  --uzenek_transform: kepek_3 18s linear infinite 0s;
  --dia_2:6s;--dia_3:12s;--dia_4:18s;--dia_5:24s;--dia_6:30s;--dia_7:36s;--dia_8:42s;--dia_9:48s;
}

/* @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); */

* {
  padding:0;
  margin:0;
  font-family: Arial;
  font-weight:normal;
  vertical-align:baseline;
  box-sizing: border-box;
  overflow-x:hidden;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  /* font-family: 'montserrat',roboto; */
}

*:not(input):not(textarea)::selection {background:transparent}
*::-webkit-scrollbar {display: none}

html,body {
  scroll-behavior: smooth;
}

body {
 background:var(--background);
 overflow-x:hidden;
}

table {width:100%;border-spacing: 10px;border-collapse: separate}

td {padding:8px}

hr {
  width:calc(100vw - 60px);
  line-height:40px;
  margin-bottom:50px;
  border: 3px solid var(--red);
  border-radius: 4px;
}
 
b {font-weight:bold} 

.a {
 position:relative;
 top:0px;height:30px;
 color:var(--blue_soft_2);
 vertical-align:bottom;
 display: inline-block;border:0px solid red;
 text-decoration:none
}
div.lazy .a {height:36px}
.a:hover {color:var(--red)}

.a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 3px;
  left:0;
  color:var(--red);
  transform-origin: bottom center;
  transition: transform 0.5s ease-out;
}

.a:hover::after {transform: scaleX(1)}

.a:hover::after {background-color: var(--red)}

#wait {display:none;overflow-x:hidden}

#loading {
  position:absolute;
  width:100vw;
  height:100vh;
  display:block;
  background:#000;
}

#loading img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

section {width:fit-content;height:auto;margin:0 auto}

section div {margin:0}

p,div {font-size:18px;text-align:justify;line-height:30px}

.easy {opacity:0;transition: opacity .7s ease}

.easy.active {opacity:1}

.lazy {overflow-y:hidden}

div.lazy {opacity:0;line-height:80px;transform: translate(0px,80px);transition: all .7s ease}

div.lazy.active {opacity:1;line-height:36px;transform: translate(0px,0px)}

h3.lazy {opacity:0;transform: translate(0px,50px);transition: all .3s ease}

h3.lazy.active {opacity:1;transform: translate(0px,0px)}

h4.active {opacity:1;transform: translate(0px,0px)}

p {position:relative;padding-top:20px}

p.lazy {opacity:0;line-height:80px;transform: translate(0px,80px);transition: all .7s ease}

p.lazy.active {opacity:1;line-height:36px;transform: translate(0px,0px)}

div.lazy30 {
  transform: translate(100px,0px);
  opacity: 0;
  transition: all 0.4s ease-out;
  white-space:nowrap;
}

div.lazy30.active {
  transform: translate(0px,0px);
  opacity: 1;
  
}

ul {
  overflow-x:hidden;
  /*list-style-image: url('sqpurple.gif');*/
}

.left {width:fit-content;float:left}
.left img {min-width:calc(100vw - 60px)}
.right {float:right}
.clear {clear:both;max-height:0;display:inline}

ul li {white-space:nowrap}

ul.lista span {display:inline}
ul.lista br {display:block}

.head_secret,.head_secret_mini {
  position:fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height:20vw;
  /*box-shadow: 0 0 1em rgba(255,255,255,.8);*/
  z-index: 100;
  display:block;
  background-image: url(thesecretgarden/the_secret_garden.png);
  background-size: 100vw 20vw;
  transform-origin: left top;
  animation-timing-function: ease-in-out;
}

.head_secret.active,.head_secret_mini.active {
  background-size: 110vw 22vw;
  animation-timing-function: ease-in-out;
  transition-duration: 6s;
}

.head_secret_mini {height:13vw}

.head,.head_mini {
  position:fixed;
  display:inline-block;
  width:100vw;
  height:var(--head);
  overflow-x:hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  z-index:104;
}

.head::-webkit-scrollbar {display: none}
 
.head_kontener {margin:10vw 0 0 8vw;display:inline-table;transition: all var(--headtranstime)  }

.head_kontener_mini {margin:5vw 0 0 8vw;display:inline-table;transition: all var(--headtranstime)  }

.head_kontener_mini ul.menu {display:none}

video {background:var(--black);width:100vw;height:var(--head);display:none}

.bgvideo {
  position:fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height:50vw;
  /*box-shadow: 0 0 5em rgba(0, 0, 0, .5);*/
  object-fit: cover;
  z-index: 100;
  display:block; 
  transition: top var(--headtranstime);
}

.fixedbgvideo {
  position:fixed;
  left: 0;
  top: -25vw;
  width: 100vw;
  height:50vw;
  /*box-shadow: 0 0 1em rgba(255,255,255,.8);*/
  object-fit: cover;
  z-index: 100;
  display:block;
  transition: top var(--headtranstime)
}

.tartalom,.tartalomup {
  position:absolute;
  top:50vw;
  width:100vw;
  min-height:100vh;
  padding:20px 20px 200px 20px;
  overflow-x:visible;
  background:var(--background);color:var(--black);
  z-index: 98;
  display:block;
}

.tartalomup {top:30vw}

.thesecret {padding:20px 0px 200px 0px}

#tartalom div:not(.lablec) div:not(.klszilvia) div:not(.minheight) div:not(.demo) {min-height:202px;overflow:visible}

#tartalom div ul {list-style: none}

#tartalom div ul:not(.slideshow) li:before { /* pipa nyíl */
  content: '\2713';
  color:var(--red);
  font-weight:bold;
  margin: 0 1em;    
}



#tartalom div img,div.left img {
  position:relative;
  width:calc(100% - 15px);
  margin:10px 30px 20px 0;
  border:1px solid var(--black);
  border-radius: 10px;
  display:block
}

div.right img {margin:10px 0 10px 30px}

#tartalom div img.img_right {margin:10px 8px 20px 30px}
#tartalom div img.img_left {left:6px;margin:10px 30px 20px 0}

#tartalom div img.maximg {width:40vw;min-width:240px;display:block}

.lablec {
  position:absolute;
  left:0;
  bottom:0;
  width:100vw;
  height:100px;
  line-height:100px;
  padding-left:calc(15vw + 60px);
  font-size:14px;
  text-align:left;
  color:var(--blue_soft);
  background: var(--blue) url(images/aladinweb_logo_blue.png) no-repeat 8vw 50%;
}

.lablec span:not(.secretgarden) {display:none}

.logo {
  position:relative;
  width:100%;
  height:100px;
  display:block;
  margin:80px 0 0 0;
  background-image: url(images/aladinweb.gif);
  background-size: 100px 100px;
  background-position: center;
  background-repeat: no-repeat;
}

h1 {
  color:var(--white);
  font-size:6vw;
  line-height:7vw;
  font-weight:bold;
  margin:3vw 0 1vw 3vw;
  letter-spacing:1.2vw;
  padding-left:1.5vw;
}

h1 span {font-weight:bold;padding-left:0.6em;color:var(--red)}

.evszam {
  font-size:24px;
  padding:16px;
  background:var(--black);
  color:var(--white);
  border:1px solid var(--black);
  margin-bottom:30px;
  display:inline-block;
  transform:skew(0deg);
  transform: translateX(0px);
  opacity:0;
}

.evszam.active {
  opacity:1;
  transform: skew(-10deg) translateX(12px);
  transform-origin: 50% 50%;
  transition-duration: 0.6s;
  transition-delay: 0.2s;
}


.klszilvia { 
  position:relative;
  left: 0;
  top: 30px;
  width: calc(100vw - 60px);
  height: 0px;
  border:1px solid var(--black);
  /*box-shadow: 0 0 1em rgba(255,255,255,.8);*/
  display:inline-block;
  opacity:0;
  background-image: url(images/referenciak/klszilvia_screenshot_01.png);
  background-size: calc(100vw - 60px) calc(58.34vw - 35px);
  transform-origin: left top;
  -webkit-transition: height 0s, opacity 0.1s, background-size 2s;
  transition: height 0s, opacity 0.1s, background-size 2s;
}

.aktiv2 {
  opacity:1;
  height: calc(58.34vw + 35px);
  background-size: calc(100vw + 60px) calc(58.34vw + 35px);
  -webkit-transition: height 0s, opacity 1s, background-size 2s;
  transition: height 0s, opacity 1s, background-size 2s;
}


/* CSS animáció példák */

.aktiv { 
  display :block; font-size: 24px; background: #000; color: #fff; padding: 5px;
  &:active {-webkit-animation: changeColor 1s infinite;animation-direction: alternate;}
}

@-webkit-keyframes changeColor { from {background:var(--red);} to {background:var(--blue);} }

.skew {
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transform-origin: 50% 50%;
  animation-name: skew;
}

@keyframes skew{
  0% {transform: skew(0deg);}
  100% {transform: skew(-15deg);}
}

/* CSS animáció példák VÉGE */



.menu,.menuhidden {
  position:absolute;
  bottom:0;
  right:0;
  color:var(--white);
  margin:0 1vw 1vw 0;
  font-size:16px;
  font-weight:normal;
  letter-spacing:0.2vw;
  padding-right:1vw;
} 

.menu,.menu a {font-size:15px}

.menu a:hover {color:var(--red)}

.menu li,.menuhidden li {
  display: inline-block;
  padding-right:0.7vw
}

.menu li a,.menuhidden li a {
  margin:0;
  color:var(--blue_soft);
  text-decoration: transparent;
  text-shadow: 2px 1px 3px #000;
  letter-spacing:0.3vw;
  padding-right:0.8vw;
  display:inline;
  transition: opacity 0.3s linear 2s; 
  /*transition: opacity var(--headtranstime)*/
}

.menu {
  opacity:1;
  display:inline;
  -webkit-animation: var(--fadeIn);
  -moz-animation: var(--fadeIn);
  -o-animation: var(--fadeIn);
  animation: var(--fadeIn);
}

.menuhidden {
  opacity:0;
  display:none;
    -webkit-animation: var(--fadeOut);
    -moz-animation: var(--fadeOut);
    -o-animation: var(--fadeOut);
    animation: var(--fadeOut);
}

@-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }
@-moz-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }
@-o-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }

@-webkit-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} }
@-moz-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} }
@-o-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} }
@keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} }


.menuhidden li a {opacity:0}

.menu li a:hover {color:var(--white)}

.menu li a.selected {color:var(--white)}


.selected {
  display: inline-block;
  position: relative;
}

.selected::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.2vw);
  height: 1.5px;
  bottom: -5px;
  left: 0;
  background-color: var(--white);
}

.hover-underline-animation,.hover-underline-animation-left {
  display: inline-block;
  position: relative
}

.hover-underline-animation::after,.hover-underline-animation-left::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -5px;
  left: -1vw;
  transform-origin: bottom center;
  transition: transform 0.5s ease-out;
}

.hover-underline-animation-2::after {left: 0vw;bottom: 9px;}

.hover-underline-animation:hover::after,.hover-underline-animation-left:hover::after {
  height: 1.5px;
  transform: scaleX(1);
  transform-origin: bottom center;
}

.hover-underline-animation:hover::after {background-color: var(--white)}
  
.hover-underline-animation-left:hover::after {background-color: var(--red)}

.hover-underline-animation-left::after,.hover-underline-animation-left:hover::after {transform-origin: bottom left}

li.lazyA {
  position: relative;
  opacity: 0;
  transition: all 0.6s ease;
  letter-spacing:4px;
}

li.lazyA {transition-delay:1.2s}

li.lazyA.active {opacity:1}

h1#head {
  display:inline-table;
  position: relative;
  left:0;
  top:0; 
  white-space:nowrap;
  border-bottom:1px solid var(--white);
}
h2 {
  display:block;
  font-size:3.5vw;line-height:4vw;
  color:var(--white);
  text-align:right;
  padding-right:0.5em;
}


h3 {
  margin:12vw 0 6vw 0;
  line-height:28px;
  font-size:24px;
  word-spacing:10px;
  color:var(--red);
  font-variant:small-caps;
  text-align:left
}

h4 {
  width:fit-content;
  margin:15vw 0 3vw 0;
  padding:18px 18px 18px 78px;
  font-size:24px;
  line-height:28px;
  word-spacing:10px;
  color:var(--blue_soft_2);
  font-weight:bold;
  font-variant:small-caps;
  background-image: url(images/aladinweb.gif);
  background-size: 50px 50px;
  background-position: 9px 7px;
  background-repeat: no-repeat;
  border:3px solid var(--blue_soft_2);
  display:block;
  opacity:0;
  transform: translate(-100px,0px);
  transition: all .4s ease;
}

.logo {
  position:relative;
  width:100%;
  height:100px;
  display:block;
  margin:80px 0 0 0;
  background-image: url(images/aladinweb.gif);
  background-size: 100px 100px;
  background-position: center;
  background-repeat: no-repeat;
}

h4.active {opacity:1;transform: translate(0px,0px);}

.gondolat {line-height:36px;border-bottom:1px solid var(--gray);vertical-align:middle}

.lazyhead {
  position: relative;
  transform: translate(600px,0px);
  opacity: 0;
  transition: all 1.4s ease;
  letter-spacing:40px;
}

h2.lazyhead {transition-delay:0.3s}

h1.active {
  transform: translate(0px,0px);
  opacity: 1;
  letter-spacing:1.2vw;
}

h2.active {
  transform: translate(0px,0px);
  opacity: 1;
  letter-spacing:0.3vw;
}

.box {
  background:#eee;
  border:2px solid #000;
  min-width:100%;
  overflow-x:hidden;
}

.box,img {
  box-shadow: var(--imgshad);
  -webkit-box-shadow: var(--imgshad);
  -moz-box-shadow: var(--imgshad);
}
 
div#video_bg {
  position: absolute;
  left: 0;
  top: 0;
  background: #041350 url(images/aladinweb2.gif) no-repeat 0 0;
  background-size: 100vw 50vw;
  width:100vw;height:50vw;
  display:none;
  z-index: 99;
}

#bgVideo_kontener {
  position: relative;
  padding-bottom: 50%; 
  height: 0;
}




/* hamburger menü ikon CSS */

.hamburger,.hamburgerclose {
  position: fixed;
  width: 10vw;
  height: 10vw;
  top:15vw;right:5vw;
  max-width:50px;max-height:50px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: not(top).5s ease-in-out;
  cursor: pointer;
  display:block;
  z-index:106;
}

.hamburgerup {top:10vw;transition: all var(--headtranstime)  }
.hamburgerdown {top:15vw;transition: all var(--headtranstime)  }

.hamburger span,.hamburgerclose span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: var(--red);
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  z-index:106;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2),.hamburger span:nth-child(3),
.hamburgerclose span:nth-child(2),.hamburgerclose span:nth-child(3) {
  top: 4vw;
}

.hamburger span:nth-child(4) {
  top: 8vw;
}

.hamburgerclose span:nth-child(1),.hamburgerclose span:nth-child(4) {
  top: 4vw;
  width: 0%;
  left: 50%;
}

.hamburgerclose span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hamburgerclose span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@keyframes slideIn {
  0% {width:20%;opacity:0.9}
  25% {width:100%;opacity:1}
  100% {width: 85%;opacity:1}
}

@keyframes slideOut {
  0% {width: 95%;opacity:1}
  100% {width:0%;opacity:0}
}

.nav,.navup {
  position: fixed;
  background: var(--black);
  top: 50vw;
  right: 0;
  height: 130vh;
  width: 0%;
  padding:30px 0 30px 0;
  line-height:50px;
  z-index: 99;
  opacity: 0;
  transition: top var(--headtranstime)
}

.navup {top: 25vw}

.nav ul,.navup ul {position:relative;left:0%;text-align:center}

#nav li {margin:10px 0 10px 0;vertical-align:middle}

#nav li a {
  margin:0;
  color:var(--white);
  padding:0 20px 0 20px;border:1px solid var(--white);
  width:100%; 
  max-width:300px;
  text-decoration: transparent;
  text-align:center;
  /*text-shadow: 2px 1px 3px #000;*/
  letter-spacing:0.3vw;
  white-space:nowrap;overflow:hidden;
  display:inline-block;
  transition: background var(--headtranstime)
}

#nav li a:hover {background:var(--blue_soft);color:var(--black);border:1px solid var(--blue)}

#nav,#nav a {font-size:18px}

#nav li a.selected {color:var(--red)}

.show {
 width: 85%;
 opacity: 1;
 padding:30px;
 animation: slideIn var(--leftmenutranstime)
}

.hide {
 width: 0%;
 opacity: 0;
 padding:30px 0 30px 0;
 animation: slideOut var(--leftmenutranstime)
}

#cookie_div {
  position:fixed;
  left:0;bottom:0;
  height:auto;width:100vw;padding:20px;
  font-size:10px;
  background:var(--bluebg_opa);
  z-index:98;
  display:none;
}
#cookie_div:hover {background:var(--bluebg);}

#cookie_div div {font-size:18px;text-align:left;width:100%;line-height:25px;color:var(--blue_soft)}

#cookie_div div a {color:var(--blue_soft)}
#cookie_div div a:hover {color:var(--blue_hover)}

.redalert {color:var(--red);padding-left:2px;font-size:26px;line-height:26px;vertical-align:middle}

form {width:calc(100vw - 40px);min-width:280px;text-align:left}
form span {margin-left:5px}

.inputmax {max-width:750px}

input,.button {
  display:inline-block;
  height:40px;
  width:calc(100vw - 70px);
  min-width:240px;
  font-size:18px;
  font-weight:bold;
  border:1px solid var(--blue);
  border-radius: 4px;
  color:var(--red);
 /* blue: #04134e;
  --bluebg:rgba(3,14,63,1);
  --bluebg_opa:rgba(3,14,63,1);
  --blue_soft:rgba(210,210,255,0.7);
  --blue_soft_2:#355397;
  --blue_hover:rgba(220,220,255,0.9);*/
  padding:15px;
  margin-bottom:30px;
}

.button {display:block;font-size:20px;height:46px}

input:focus{
  background: rgba( 170, 204, 238, 1);
  box-shadow: 0 0 10px rgba(170, 204, 238, 1);
  color:#000;
} 

input[type=text],input[type=password] {}

input[type=submit],.button {
  height:40px;
  color:#fff;
  background-color:#1d4073;    
  font-variant:small-caps;    
  cursor:pointer;
  text-align: center;
  padding:5px;
  outline:none;
} 
input[type=submit]:hover,.button:hover {background-color:#406bb8}

input[type=submit]:disabled {background-color:#ccc;color:#777} 
input[type=submit]:disabled:hover {background-color:#aaa;color:#555;cursor:default} 

input[type=checkbox]{
  width:24px; height:24px;
  cursor: pointer;
  border:1px solid blue;
  margin:-2px 0 0 0;
  vertical-align: middle;
} 

.textarea {
  background: #efefef;
  overflow:none;
  border:1px solid var(--blue);
  border-radius: 4px;
  margin:0 0 20px 0;
  padding:5px;
  width:calc(100vw - 70px);
  min-width:240px;
  height:30vh;
  font-size:18px;
  text-align:left;
  resize: vertical;
}

.zoldpipa {
  position: relative;
  top: 5px;
  left: 0;
  height: 25px;
  width: 23px;
  background-color: var(--zold);
  display:inline-block;
}

.securdiv {width:calc(100% - 50px)}
.security {display:inline;width:120px;min-width:120px;height:39px;position:relative;left:7px;top:-13px;margin-right:50px}

.siker_green {width:calc(100% - 30px);display:block;padding:25px;background-color:var(--zold);color:var(--white);text-align:center}
.siker_red {width:calc(100% - 30px);display:block;color:var(--red);text-align:center}
#sikeres {font-size:24px}

/* checkbox */

.chbox_div {text-align:left;max-width:1000px}

.container {
  display: inline-block;
  position: relative;
  padding-left: 45px;
  cursor: pointer;
  font-size: 18px;
  line-height:40px;
  height:70px;
  width:300px;
  text-align:left;
  overflow-y:hidden;
}

/* Hide the browser's default checkbox */
.container input {
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 24px;
  background-color: #ddd;
}

.container:hover input ~ .checkmark {background-color: #666}

.container input:checked ~ .checkmark {background-color: var(--zold)}

.checkmark:after {display: none}

.container input:checked ~ .checkmark:after {display: block}

.container .checkmark:after,.zoldpipa:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input::-moz-focus-inner /*Remove button padding in FF*/ {border: 0;padding: 0;}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
	-webkit-text-fill-color: #000 !important;
}  

input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    appearance: none;
    margin: 0; 
}

.textinput {font-size:18px;width:calc(100% - 28px);margin-bottom:10px}
.loading {width:32px;height:28px;display:inline-block;background: url(kep/loading.gif) no-repeat 4px 4px}







.buttonRED {
  position:absolute;
  bottom:26px;right:36px;
  width:120px;
  height:35px;
  outline: none;
  cursor: pointer;
  background:var(--bluebg);
  color:var(--blue_soft);
  text-align: center;
  text-decoration: none;
  font-size:18px;
  padding:6px 7px 7px 7px;
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px;
  border-color:var(--blue_soft);
  border-radius: 2px;
  -webkit-box-shadow: var(--boxshad);
  -moz-box-shadow: var(--boxshad);
  box-shadow: var(--boxshad);
}

.buttonRED {margin-top:10px}
.buttonRED:hover {text-decoration:none;color:var(--blue_hover);border-color:var(--blue_hover);}

.fullbg {
 width:100vw;
 background:url(thesecretgarden/white_bg.jpg) repeat 0 0;
}
.fullbg>* {
  /*grid-area:1/1;*/
}
.secretgarden {position:absolute;right:20px;bottom:20px;height:40px;display:none}
.secretgarden a {bottom:25px;line-height:40px;color:var(--blue_soft);text-decoration:none}
.secretgarden a:hover {color:var(--white)}

.secretgarden2 {display:block}

.table_bal {margin-right:10px}
.table_jobb {margin-left:10px}
.table_bal td span,.table_jobb td span {
  max-width:60vw;
  margin-right:10px;
  line-height:30px;
  font-weight:bold;
  color:var(--blue_soft_2);
  border-top:1px solid var(--blue_soft_2);
  display:inline-block;
}



#tartalom.thesecret {padding-top:50px}

#tartalom.thesecret img {border-radius:0}

#tartalom.thesecret table.table_bal img {width:calc(100% - 10px);margin:0 10px 30px 0}

#tartalom.thesecret table.table_jobb img {width:calc(100% - 10px);margin:0 10px 30px 0}

/*table.table_bal tr td img {width:calc(100% - 105px);left:0px}
.table_jobb tr td img {width:100%;left:15px}*/

div.demo {position:relative;min-height:22px;max-height:30px;word-spacing:15px;float:right;display:inline}

/* SLIDESHOW */

.black_overlay {
  position:fixed;
  top:0;left:0;
  width:100vw;
  height:100%;
  z-index: 200;
  background:var(--black_overlay);
  cursor:pointer;
  display:none;
}

.black_overlay div {
  position:relative;
  top:0;left:0;
  top:320px;
  height:calc(100% - 520px);
  width:100%;
  display:flex;
  justify-content: center
}

.close {
  position:absolute;
  top:0.5vw;
  right:1vw;
  width:40px;
  height:40px;
  color:var(--black);
  background:var(--white);
  font-size:26px;
  line-height:40px;
  text-align:center;
  display:table-cell;
  opacity:0.8;
  transition: 0.3s;
  cursor:pointer;
  z-index:201;
  border:1px solid var(--black)
}

.close:hover {opacity:1;transform: rotate(180deg)}

/* slideshow */

.slideshow_visible {display:none}
.inline {display:inline}

.slideshow,
.slideshow:after {
    position: absolute;
    display:block;
	aspect-ratio:1/1;
	background:#fff;
    z-index: 200;
}

.slideshow {height:100%;border:7px solid var(--white)}

.slideshow:after {
    content: '';
    background: transparent  repeat top right;
}

.slideshow ul li:before {content:''}

.slideshow li span {
	position: absolute;
    top: 0px;
    width: 100%;
    height:100%;
    color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 200;
	transform-origin: bottom center;
}



/*expenses*/

.expenses,
.expenses:after {aspect-ratio:1085/633}

.expenses li span {
	-webkit-backface-visibility: hidden;
    -webkit-animation: var(--exp_transform);
    -moz-animation: var(--exp_transform);
    -o-animation: var(--exp_transform);
    -ms-animation: var(--exp_transform);
    animation: var(--exp_transform);
}

.expenses li:nth-child(1) span { background-image: url(images/referenciak/expenses_screenshot_01.png);
}
.expenses li:nth-child(2) span { background-image: url(images/referenciak/expenses_screenshot_02.png);
    -webkit-animation-delay: var(--dia_2);
    -moz-animation-delay: var(--dia_2);
    -o-animation-delay: var(--dia_2);
    -ms-animation-delay: var(--dia_2);
    animation-delay: var(--dia_2);
}
.expenses li:nth-child(3) span { background-image: url(images/referenciak/expenses_screenshot_03.png);
    -webkit-animation-delay: var(--dia_3);
    -moz-animation-delay: var(--dia_3);
    -o-animation-delay: var(--dia_3);
    -ms-animation-delay: var(--dia_3);
    animation-delay: var(--dia_3);
}
.expenses li:nth-child(4) span { background-image: url(images/referenciak/expenses_screenshot_04.png);
    -webkit-animation-delay: var(--dia_4);
    -moz-animation-delay: var(--dia_4);
    -o-animation-delay: var(--dia_4);
    -ms-animation-delay: var(--dia_4);
    animation-delay: var(--dia_4);
}
.expenses li:nth-child(5) span { background-image: url(images/referenciak/expenses_screenshot_05.png);
    -webkit-animation-delay: var(--dia_5);
    -moz-animation-delay: var(--dia_5);
    -o-animation-delay: var(--dia_5);
    -ms-animation-delay: var(--dia_5);
    animation-delay: var(--dia_5);
}



/*maths*/

.maths,
.maths:after {aspect-ratio:1085/633}
 
.maths li span {
	-webkit-backface-visibility: hidden;
    -webkit-animation: var(--maths_transform);
    -moz-animation: var(--maths_transform);
    -o-animation: var(--maths_transform);
    -ms-animation: var(--maths_transform);
    animation: var(--maths_transform);
}

.maths li:nth-child(1) span { background-image: url(images/referenciak/maths_hu_01.png);
}
.maths li:nth-child(2) span { background-image: url(images/referenciak/maths_hu_02.png);
    -webkit-animation-delay: var(--dia_2);
    -moz-animation-delay: var(--dia_2);
    -o-animation-delay: var(--dia_2);
    -ms-animation-delay: var(--dia_2);
    animation-delay: var(--dia_2);
}
.maths li:nth-child(3) span { background-image: url(images/referenciak/maths_hu_03.png);
    -webkit-animation-delay: var(--dia_3);
    -moz-animation-delay: var(--dia_3);
    -o-animation-delay: var(--dia_3);
    -ms-animation-delay: var(--dia_3);
    animation-delay: var(--dia_3);
}
.maths li:nth-child(4) span { background-image: url(images/referenciak/maths_hu_04.png);
    -webkit-animation-delay: var(--dia_4);
    -moz-animation-delay: var(--dia_4);
    -o-animation-delay: var(--dia_4);
    -ms-animation-delay: var(--dia_4);
    animation-delay: var(--dia_4);
}



/* magánszemélyek */

.magan,
.magan:after {aspect-ratio:1085/633}
 
.magan li span {
	-webkit-backface-visibility: hidden;
    -webkit-animation: var(--magan_transform);
    -moz-animation: var(--magan_transform);
    -o-animation: var(--magan_transform);
    -ms-animation: var(--magan_transform);
    animation: var(--magan_transform);
}

.magan li:nth-child(1) span { background-image: url(images/referenciak/bianchini_ildiko_nagy.png);
}
.magan li:nth-child(2) span { background-image: url(images/referenciak/szraczroland_nagy.png);
    -webkit-animation-delay: var(--dia_2);
    -moz-animation-delay: var(--dia_2);
    -o-animation-delay: var(--dia_2);
    -ms-animation-delay: var(--dia_2);
    animation-delay: var(--dia_2);
}



/*digitabla*/

.digitabla,
.digitabla:after {aspect-ratio:1085/633}
 
.digitabla li span {
	-webkit-backface-visibility: hidden;
    -webkit-animation: var(--magan_transform);
    -moz-animation: var(--magan_transform);
    -o-animation: var(--magan_transform);
    -ms-animation: var(--magan_transform);
    animation: var(--magan_transform);
}

.digitabla li:nth-child(1) span { background-image: url(images/referenciak/digitabla_01.png);
}
.digitabla li:nth-child(2) span { background-image: url(images/referenciak/digitabla_02.png);
    -webkit-animation-delay: var(--dia_2);
    -moz-animation-delay: var(--dia_2);
    -o-animation-delay: var(--dia_2);
    -ms-animation-delay: var(--dia_2);
    animation-delay: var(--dia_2);
}

/*uzenek*/

.uzenek,
.uzenek:after {aspect-ratio:1085/633}
 
.uzenek li span {
	-webkit-backface-visibility: hidden;
    -webkit-animation: var(--uzenek_transform);
    -moz-animation: var(--uzenek_transform);
    -o-animation: var(--uzenek_transform);
    -ms-animation: var(--uzenek_transform);
    animation: var(--uzenek_transform);
}

.uzenek li:nth-child(1) span { background-image: url(images/referenciak/uzenek_01.png);
}
.uzenek li:nth-child(2) span { background-image: url(images/referenciak/uzenek_02.png);
    -webkit-animation-delay: var(--dia_2);
    -moz-animation-delay: var(--dia_2);
    -o-animation-delay: var(--dia_2);
    -ms-animation-delay: var(--dia_2);
    animation-delay: var(--dia_2);
}
.uzenek li:nth-child(3) span { background-image: url(images/referenciak/uzenek_03.png);
    -webkit-animation-delay: var(--dia_3);
    -moz-animation-delay: var(--dia_3);
    -o-animation-delay: var(--dia_3);
    -ms-animation-delay: var(--dia_3);
    animation-delay: var(--dia_3);
}


/* kepek_5*/

@-webkit-keyframes kepek_5 { 
    0%,2%,20%,30% {animation-timing-function: ease}
	0%,30%,100% {opacity: 0} 2%,20% {opacity: 1}
	2% {transform: scale(1.1)} 20% {transform: scale(1.5)} 30% {transform: scale(1.5)}
}
@-moz-keyframes kepek_5 { 
	0%,2%,20%,30% {animation-timing-function: ease}
	0%,30%,100% {opacity: 0} 2%,20% {opacity: 1}
	2% {transform: scale(1.1)} 20% {transform: scale(1.5)} 30% {transform: scale(1.5)}
}
@-o-keyframes kepek_5 { 
	0%,2%,20%,30% {animation-timing-function: ease}
	0%,30%,100% {opacity: 0} 2%,20% {opacity: 1}
	2% {transform: scale(1.1)} 20% {transform: scale(1.5)} 30% {transform: scale(1.5)}
}
@-ms-keyframes kepek_5 { 
	0%,2%,20%,30% {animation-timing-function: ease}
	0%,30%,100% {opacity: 0} 2%,20% {opacity: 1}
	2% {transform: scale(1.1)} 20% {transform: scale(1.5)} 30% {transform: scale(1.5)}
}
@keyframes kepek_5 { 
	0%,2%,20%,30% {animation-timing-function: ease}
	0%,30%,100% {opacity: 0} 2%,20% {opacity: 1}
	2% {transform: scale(1.1)} 20% {transform: scale(1.5)} 30% {transform: scale(1.5)}
}



/* kepek_4*/

@-webkit-keyframes kepek_4 { 
    0%,2%,25%,35% {animation-timing-function: ease}
	0%,35%,100% {opacity: 0} 2%,25% {opacity: 1}
	2% {transform: scale(1.1)} 25% {transform: scale(1.5)} 35% {transform: scale(1.5)}
}
@-moz-keyframes kepek_4 { 
	0%,2%,25%,35% {animation-timing-function: ease}
	0%,35%,100% {opacity: 0} 2%,25% {opacity: 1}
	2% {transform: scale(1.1)} 25% {transform: scale(1.5)} 35% {transform: scale(1.5)}
}
@-o-keyframes kepek_4 { 
	0%,2%,25%,35% {animation-timing-function: ease}
	0%,35%,100% {opacity: 0} 2%,25% {opacity: 1}
	2% {transform: scale(1.1)} 25% {transform: scale(1.5)} 35% {transform: scale(1.5)}
}
@-ms-keyframes kepek_4 { 
	0%,2%,25%,35% {animation-timing-function: ease}
	0%,35%,100% {opacity: 0} 2%,25% {opacity: 1}
	2% {transform: scale(1.1)} 25% {transform: scale(1.5)} 35% {transform: scale(1.5)}
}
@keyframes kepek_4 { 
	0%,2%,25%,35% {animation-timing-function: ease}
	0%,35%,100% {opacity: 0} 2%,25% {opacity: 1}
	2% {transform: scale(1.1)} 25% {transform: scale(1.5)} 35% {transform: scale(1.5)}
}




/* kepek_3*/

@-webkit-keyframes kepek_3 { 
  	0%,8%,33%,43%,100% {animation-timing-function: ease-in-out}
	0%,43%,100% {opacity:0} 8%,33% {opacity:1}
	8% {transform: scale(1.1)} 33% {transform: scale(1.4)} 43% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@-moz-keyframes kepek_3 { 
	0%,8%,33%,43%,100% {animation-timing-function: ease-in-out}
	0%,43%,100% {opacity:0} 8%,33% {opacity:1}
	8% {transform: scale(1.1)} 33% {transform: scale(1.4)} 43% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@-o-keyframes kepek_3 { 
	0%,8%,33%,43%,100% {animation-timing-function: ease-in-out}
	0%,43%,100% {opacity:0} 8%,33% {opacity:1}
	8% {transform: scale(1.1)} 33% {transform: scale(1.4)} 43% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@-ms-keyframes kepek_3 { 
	0%,8%,33%,43%,100% {animation-timing-function: ease-in-out}
	0%,43%,100% {opacity:0} 8%,33% {opacity:1}
	8% {transform: scale(1.1)} 33% {transform: scale(1.4)} 43% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@keyframes kepek_3 { 
	0%,8%,33%,43%,100% {animation-timing-function: ease-in-out}
	0%,43%,100% {opacity:0} 8%,33% {opacity:1}
	8% {transform: scale(1.1)} 33% {transform: scale(1.4)} 43% {transform: scale(1.5)} 100% {transform: scale(1)}
}




/* kepek_2*/

@-webkit-keyframes kepek_2 { 
  	0%,12%,50%,65%,100% {animation-timing-function: ease-in-out}
	0%,65%,100% {opacity:0} 12%,50% {opacity:1}
	12% {transform: scale(1.1)} 50% {transform: scale(1.4)} 65% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@-moz-keyframes kepek_2 { 
	0%,12%,50%,65%,100% {animation-timing-function: ease-in-out}
	0%,65%,100% {opacity:0} 12%,50% {opacity:1}
	12% {transform: scale(1.1)} 50% {transform: scale(1.4)} 65% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@-o-keyframes kepek_2 { 
	0%,12%,50%,65%,100% {animation-timing-function: ease-in-out}
	0%,65%,100% {opacity:0} 12%,50% {opacity:1}
	12% {transform: scale(1.1)} 50% {transform: scale(1.4)} 65% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@-ms-keyframes kepek_2 { 
	0%,12%,50%,65%,100% {animation-timing-function: ease-in-out}
	0%,65%,100% {opacity:0} 12%,50% {opacity:1}
	12% {transform: scale(1.1)} 50% {transform: scale(1.4)} 65% {transform: scale(1.5)} 100% {transform: scale(1)}
}

@keyframes kepek_2 { 
	0%,12%,50%,65%,100% {animation-timing-function: ease-in-out}
	0%,65%,100% {opacity:0} 12%,50% {opacity:1}
	12% {transform: scale(1.1)} 50% {transform: scale(1.4)} 65% {transform: scale(1.5)} 100% {transform: scale(1)}
}


/* SLIDESHOW VÉGE */

.green {color:var(--zold)}
.red {color:var(--red)}
.blue {color:var(--blue_soft_2)}

/*"arak"-kal kezdődő div*/

div[class^="arak"] {display:block;width:100%}

div[class^="arak"] hr {border:1px solid green}

div[class^="arak"] div {width:100%;height:90px;margin:0 0 20px 0}

div[class^="arak"] div:not(.noborder) {border-bottom:1px solid #aaa}

div[class^="arak"] span {display:inline-block}


.arak_1 {border-right:40px solid var(--zold);padding-right:30px}
.arak_2 {border-left:40px solid var(--red);padding-left:30px}
.arak_3 {border-right:40px solid var(--blue_soft_2);padding-right:30px}
.spankont {width:100%;text-align:right;height:32px}
.hibak {width:300px}
.price {width:80px;font-weight:bold;text-align:right;padding-right:10px}
.Ft {text-align:left;width:60px}


@media only screen and (min-width: 330px) {
}

@media only screen and (min-width: 380px) {
  .hamburger span,.hamburgerclose span {height:6px;border-radius:6px}
}

@media only screen and (min-width: 400px) {
  h4 {
   font-size:6vw;
   padding:5vw 5vw 5vw 19vw;line-height:7vw;
   background-size: 13vw 13vw;
   background-position: 2vw 2vw;
  }
  .evszam {font-size:6vw;padding:4vw}
}

@media only screen and (min-width: 460px) {
  .hamburger span,.hamburgerclose span {height:7px;border-radius:7px}
  .black_overlay div {top:290px;height:calc(100% - 460px)}
  .slideshow_visible {display:inline} 
}

@media only screen and (min-width: 500px) {
  h2 {font-size:3vw;line-height:4vw}
  h3 {margin:80px 0 50px 0;line-height:30px;font-size:26px;word-spacing:10px}
  .hamburger span:nth-child(2),.hamburger span:nth-child(3),
  .hamburgerclose span:nth-child(2),.hamburgerclose span:nth-child(3) {top:20px}
  .hamburger span:nth-child(4) {top:40px}
  .black_overlay div {top:280px;height:calc(100% - 440px)}
  .secretgarden {display:inline}
}

@media only screen and (min-width: 560px) {
  div[class^="arak"] div {height:60px;margin:0}
  div[class^="arak"] div:not(.noborder) {border-bottom:0px}
  .spankont {width:auto;height:30px}
}

@media only screen and (min-width: 600px) {
  h4 {
    margin:50px 0 20px 0;
	padding:30px 30px 30px 112px;
	font-size:36px;
	line-height:40px;
	background-size: 76px 76px;
    background-position: 12px 12px;
  }
  .evszam {font-size:36px;padding:26px}
  .lablec span {display:inline}
  table {width:auto;min-width:45vw}
  #tartalom div img,div.left img {margin:10px 30px 10px 0;width:40vw;max-width:360px;display:block}
  div.right img {margin:10px 0 10px 30px}
  .tartalom,.tartalomup {padding:20px 30px 200px 30px}
  .thesecret {padding:20px 10px 200px 10px}
  p,div,input,.container {font-size:20px;line-height:36px}
  .textarea {width:calc(100vw - 100px)}
  .button {font-size:22px;height:50px}
  .a {height:36px}
  div.left img {min-width:44vw;margin-right:10px}
  ul.lista span {display:none}
  .black_overlay div {top:250px;height:calc(100% - 380px)}
  ul {width:fit-content}
  .table_bal {margin-right:10px}
  .table_jobb {margin-left:10px}
  .table_jobb tr td img {left:0}
  form {width:calc(100vw - 60px)}
  input,.button {width:calc(100vw - 100px)}
  .siker_green {width:calc(100% - 40px)}
  .spankont {height:36px}
}

@media only screen and (max-width: 659.99px) {
  .menu {display:none}
}

@media only screen and (min-width: 660px) {
  h2 {font-size:2.6vw;line-height:3vw}
  .head_kontener {margin:0}
  .head_kontener_mini {margin:-1vw 0 0 0}
  .menu {height:40px;opacity:1}
  .menuhidden {height:40px;opacity:0}
  .bgvideo,.fixedbgvideo {height:var(--head)}
  .fixedbgvideo {top:-10vw}
  .head_mini {height:var(--head_2)}
  .tartalom {top:var(--head)}
  .menu,.menu li a {font-size:16px}
  .hamburger,.hamburgerclose,.nav,.navup {display:none}
  .black_overlay div {top:230px;height:calc(100% - 340px)} /*top:230px*/
}

@media only screen and (min-width: 666px) {
  .container {height:60px}
}

@media only screen and (min-width: 800px) {
  .head_kontener_mini {margin:-12px 0 0 0}
  h1 {font-size:50px;line-height:60px;margin:24px 0 8px 24px;letter-spacing:10px;padding-left:12px}
  h2 {font-size:20px;line-height:22px;padding-right:1.5vw;}
  .fixedbgvideo {top:-80px;height:var(--head900)}
  .head_mini {height:120px}
  .tartalomup {top:220px}
  div.left img {min-width:360px}
  ul.lista span {display:inline}
  ul.lista span br {display:none}
  .lablec span:not(.secretgarden) {display:inline}
  .black_overlay div {top:200px;height:calc(100% - 280px)}
  input,.button {height:50px}
}

@media only screen and (min-width: 850px) {
  .black_overlay div {top:175px;height:calc(100% - 230px)}
}

@media only screen and (min-width: 900px) {
  .head,video,.bgvideo,.fixedbgvideo, {height:var(--head900)}
  .tartalom {top:var(--head900)}
  .table_bal {margin-right:10px}
  .table_jobb {margin-left:10px}
   table {min-width:40vw}
  #tartalom div img,div.left img, div.right img {width:45vw;max-width:45vw}
  .button {font-size:22px;height:54px}
}

@media only screen and (min-width: 1000px) {
  .head,video,.bgvideo,.fixedbgvideo {height:var(--head1000)}
  .head_mini {height:140px}
  .black_overlay div {top:145px;height:calc(100% - 150px)}
  .tartalom {top:var(--head1000)}
  .head_secret_mini.active {transition-duration: 0.3s}
  .head_secret_mini {height:1vw}
  input,.button {height:60px}
}

@media only screen and (min-width: 1100px) {

}

@media only screen and (min-width: 1200px) {
  .head,video,.bgvideo,.fixedbgvideo {height:var(--head900)}
  .head_mini {height:120px}
  .black_overlay div {top:125px;height:calc(100% - 130px)}
  .tartalom {top:var(--head900)}
  #tartalom,.tartalom {max-width:1200px;margin:0 auto}
  form {width:1140px}
  input,.button,.textarea {width:1100px}
  table {min-width:560px}
  #tartalom div img,div.left img, div.right img {width:560px;max-width:560px}
}

@media only screen and (max-height: 450px) {
  .black_overlay div {top:16vw}
}