body {
  all: initial;
  all: unset;
  color: #1A1A1A;
  margin: 0;
  cursor: default;
  user-select: none;
  background-color: white;
  transition: margin-top 0.8s;
}

#container{
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory; /* proximity/mandatory */
  overflow-y: scroll;
  height: 100vh;
}

section{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
TOGGLE BUTTON ------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.menu-toggle {
  position: fixed;
  width: 50px;
  height: 50px;
  left: 40px;
  top: 40px;
  z-index: 10;
  background-color: #CDF062;
  border: 6px solid #1A1A1A;
  transition: background-color 0.8s, color 0.8s;
  transform: rotate(-45deg);
}
.menu-toggle span {
  margin: 0 auto;
  position: relative;
  top: 23px;
  transition-duration: 0s;
  transition-delay: .2s;
  transition: background-color 0.3s;
  transform: rotate(45deg);
}
.menu-toggle span:before, .menu-toggle span:after {
  position: absolute;
  content: '';
}
.menu-toggle span, .menu-toggle span:before, .menu-toggle span:after {
  width: 28px;
  height: 6px;
  background-color: #1A1A1A;
  display: block;
  opacity: 1;
}

a.menu-toggle:hover{
  background-color: white;
  cursor: pointer;
}

/* Top line */
.menu-toggle span:before {
  margin-top: -12px;
  transition-property: margin, transform;
  transition-duration: .2s;
  transition-delay: .2s, 0;
}

/* Bottom line */
.menu-toggle span:after {
  margin-top: 12px;
  transition-property: margin, transform;
  transition-duration: .2s;
  transition-delay: .2s, 0;
}

/* Animation */
.menu-toggle-active span {
  background-color: rgba(0,0,0,0);
  transition: 0.3s background-color;
}

.menu-toggle-active span:before {
  margin-top: 0;
  transform: rotate(45deg);
  transition-delay: 0, .2s;
}

.menu-toggle-active span:after {
  margin-top: 0;
  transform: rotate(-45deg);
  transition-delay: 0, .2s;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
NAVIGATION ---------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

nav{
  width: 100%;
  text-align: center;
}

.sidenav {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  background-color: white;
  overflow: hidden;
  transition: height 0.8s;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sidenav a {
  margin: 40px 0 0;
  text-decoration: none;
  color: #1A1A1A;
  display: block;
  transition: color 0.8s;
}

.sidenav a:hover {
  color: #CDF062;
}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
WELCOME PAGE -------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#intro{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.intro-effect{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBg+M/AwMDIAAVwBjYBsEoMFQBW5gIF0HSEnwAAAABJRU5ErkJggg==");
  mix-blend-mode:multiply;
  display: flex;
  justify-content: left;
  align-items: center;
}

#img-stukkball-logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100vh;

  background-image: url("../image/stukkball-logo.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
}

#text-copyright {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 80%;
  margin: 0 10% 2.5vh;
  text-align: center;
  opacity: .25;
}

#intro-video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100vh;
  filter:grayscale(50%) blur(10px);
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
CONTENT ------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.text-content{
  position: relative;
  width: 40%;
  margin: 0 0 0 10%;
  z-index: 3;
  float: left;
}

.text-content-ujragrund, .text-content-kapcsolat{
  margin: 0 50% 0 10%;
}

.other-content{
  position: relative;
  width: 30%;
  margin: 0 10% 0;
  z-index: 3;
  float: left;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
PARALELLOGRAM ------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.parallelogram {
  position: absolute;
  top: 0;
  left: -5%;
  z-index: 2;

  width: 70%;
  height: 100%;
}

.parallelogram-green{
  background-color: #CDF062;
  transform: skew(-30deg);
}

.parallelogram-dark{
  background-color: #1A1A1A;
  transform: skew(30deg);
}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
BACKGROUND IMAGES --------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.subpage-effect{
  width: 70%;
  left: 30%;
}

.bckgrnd-img{
  position: absolute;
  top: -5vh;
  left: 20%;
  z-index: 1;

  width: 110%;
  height: 110vh;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  filter:grayscale(75%) blur(10px);
}

.ujragrund-bg{background-image: url("../image/ujragrund-bg.jpg");}
.socialandtechnique-bg{background-image: url("../image/socialandtechnique-bg.jpg");}
.verticalandvariable-bg{background-image: url("../image/verticalandvariable-bg.jpg");}
.kapcsolat-bg{background-image: url("../image/kapcsolat-bg.jpg");}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
ÚJRAGRUND ----------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#ujragrund-content-img{
  display: none;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
SOCIAL & TECHNIQUE -------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.korosztalyok-content{
  width: 100%;
  align-items: center;
  margin: 16px 0 0;
}

.icon-box {
  height: 10px;
  width: 10px;
  background-color: #CDF062;
  transform: rotate(45deg);
  margin: 4px 16px 0 0;
  float: left;
}

.korosztalyok-content p{
  display: flex;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
VERTICAL & VARIABLE ------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.jatekok-content{
  width: 100%;
  margin: 40px 0 0;
}

.jatekok-content img{
  width: 100px;
  height: 100px;
  border: 0;
  padding: 0;
  margin: 0 20px 0 0;
  float: left;
}

.jatekok-content p{
  display: flex;
}

#jatekszabalyzat-btn{
  float: left;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  margin: 0;
}

.responsive-video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.video-bottom{
  margin: 40px 0 0;
}

.video-portrait {
  display: none;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
KAPCSOLAT FORM -----------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.formInput-left{
  width: 47.5%;
  float: left;
  margin: 0 2.5% 0 0;
}

.formInput-right{
  width: 47.5%;
  float: left;
  margin: 0 0 0 2.5%;
}

.formTextarea{
  width: 100%;
  float: left;
  margin: 0;
}

form{margin-top: 40px;}

label{
  font-weight: bold; font-size: 16px; margin: 16px 0 0 16px; padding: 0;
}

input, textarea{
  width: 100%;
  margin: 0 0 20px;
  padding: 10px 16px 6px;
  border: 3px solid #CDF062;
  font-weight: normal;
  font-size: 16px;
  color: #1A1A1A;
  background-color: white;
  transition: background-color 0.8s, color 0.8s;
  box-sizing: border-box;
}

textarea{
  height: 200px;
  margin: 0;
  line-height: 1.5;
  resize: none;
}

input[type=text]:focus, textarea:focus {
  color: #1A1A1A;
  background-color: #CDF062;
  outline: none;
}

.error{
  font-weight: 400;
  color: #F57AD2;
}

#uzenetkuldes-btn{
  float: right;
}

/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
BUTTON -------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

button{
  margin: 40px 0 0;
  padding: 10px 16px 6px;
  border: 3px solid black;
  background-color: #CDF062;
  display: block;
  cursor: pointer;
  transition: background-color 0.8s, color 0.8s;
}

button a{
  text-decoration: none;
  color: #1A1A1A;
}

.button-pictogram{
  margin: 0 8px 0 0;
  padding: 0;
  border: 0;
}

.button-text{
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  margin: 0;
}

button:hover{
	background-color: white;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
HEADING & PARAGRAPH STYLES -----------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

i, span         {border: 0; margin: 0; padding: 0;}

h2              {font-weight: bold; font-size: 48px; margin: 0; padding: 0; text-transform: uppercase; line-height: 1;}
h3              {font-weight: bold; font-size: 24px; margin: 0; padding: 0; text-transform: uppercase; color: #1A1A1A; line-height: 1;}
h3.h3-dark      {margin: 40px 0 0; color: #CDF062;}
h3.h3-dark span {font-size: 16px;}

p             {font-weight: normal; font-size: 16px; margin: 16px 0 0; padding: 0; line-height: 1.5;}
p.description {font-weight: bold; font-size: 18px; margin: 18px 0 0;}
p.p-slogan    {font-size: 24px; margin: 24px 0;}

mark          {padding: 10px 24px 0; background-color: #1A1A1A; color: #CDF062;}


#intro, #socialandtechnique, #kapcsolat{
  color: white;
}



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
STUKKBALL CUBE -----------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.scene {
  width: 30vw;
  height: 100vh;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene.dragging {
  cursor: grabbing;
}

.cube {
  width: 300px;
  height: 600px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
  transition: transform 0.1s;
  cursor: grab;
}

.face {
  position: absolute;
  width: 300px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  border: 1px solid #ccc;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 0 5px black;
}

.face.front.front-down  { transform: translateZ(150px) translateY(300px); height: 300px;}
.face.front.front-down-back  { transform: translateZ(150px) translateY(300px) rotateY(180deg); height: 300px;}
.face.front.front-up  { transform: translateZ(150px) translateY(0px); height: 150px;}
.face.front.front-up-back  { transform: translateZ(150px) translateY(0px) rotateY(180deg); height: 150px;}

.face.back.back-down   { transform: rotateY(180deg) translateZ(150px) translateY(225px); height: 375px;}
.face.back.back-down-back   { transform: rotateY(0deg) translateZ(-150px) translateY(225px); height: 375px;}
.face.back.back-up  { transform: rotateY(180deg) translateZ(150px) translateY(0px); height: 225px;}
.face.back.back-up-back   { transform: rotateY(0deg) translateZ(-150px) translateY(0px); height: 225px;}

.face.left.left-down   { transform: rotateY(-90deg) translateZ(150px) translateY(300px); height: 300px;}
.face.left.left-down-back   { transform: rotateY(90deg) translateZ(-150px) translateY(300px); height: 300px;}
.face.left.left-up   { transform: rotateY(-90deg) translateZ(150px) translateY(0px); height: 300px;}
.face.left.left-up-back   { transform: rotateY(90deg) translateZ(-150px) translateY(0px); height: 300px;}

.face.right.right-down  { transform: rotateY(90deg) translateZ(150px) translateY(300px); height: 300px;}
.face.right.right-down-back  { transform: rotateY(-90deg) translateZ(-150px) translateY(300px); height: 300px;}
.face.right.right-up   { transform: rotateY(90deg) translateZ(150px) translateY(0px); height: 300px;}
.face.right.right-up-back   { transform: rotateY(-90deg) translateZ(-150px) translateY(0px); height: 300px;}

.face.front.front-up,
.face.back.back-up,
.face.left.left-up,
.face.right.right-up{
  border: 15px solid #CDF062;
  background: repeating-linear-gradient(135deg, rgba(200, 200, 200, 0.25), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0) 25px),
              repeating-linear-gradient(45deg, rgba(200, 200, 200, 0.25), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0) 25px);
}

.face.front.front-up-back,
.face.back.back-up-back,
.face.left.left-up-back,
.face.right.right-up-back{
  border: 15px solid #647530;
  background: repeating-linear-gradient(135deg, rgba(200, 200, 200, 0.25), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0) 25px),
              repeating-linear-gradient(45deg, rgba(200, 200, 200, 0.25), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0), rgba(200, 200, 200, 0) 25px);
}

.face.front.front-down,
.face.back.back-down,
.face.left.left-down,
.face.right.right-down {
  background-color: #ccc;
}

.face.front.front-down, .face.middle {
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.face.front.front-down{
  background-image: url("../image/360-degrees.png");
}

.face.middle{
  background-image: url("../image/stukkball-logo_cube.png");
}

.face.front.front-down-back,
.face.back.back-down-back,
.face.left.left-down-back,
.face.right.right-down-back {
  background-color: #454545;
}

/* Corrected top and bottom faces */
.face.top-left,
.face.top-left-back,
.face.top-right,
.face.top-right-back,
.face.top-front,
.face.top-front-back,
.face.top-back,
.face.top-back-back{
  border: 0;
}

.face.top-left {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #CDF062;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(90deg) rotateZ(90deg) translateZ(100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-left-back {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #647530;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(-90deg) rotateZ(90deg) translateZ(-100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-right {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #CDF062;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(90deg) rotateZ(-90deg) translateZ(100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-right-back {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #647530;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-front {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #CDF062;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(90deg) rotateZ(0deg) translateZ(100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-front-back {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #647530;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(-90deg) rotateZ(180deg) translateZ(-100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-back {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #CDF062;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(90deg) rotateZ(180deg) translateZ(100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.top-back-back {
  width: 301px;
  height: 0;
  border-bottom: 100px solid #647530;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform: rotateX(-90deg) rotateZ(0deg) translateZ(-100px) translateY(100px);
  background-color: rgba(205, 240, 98, 0);
  top: 50px;
}

.face.bottom {
  width: 300px;
  height: 300px;
  transform: rotateX(-90deg) translateZ(200px);
  background-color: #333;
  bottom: 50px;
}

.face.bottom-back {
  width: 300px;
  height: 300px;
  transform: rotateX(90deg) translateZ(200px);
  background-color: #333;
  bottom: -350px;
}

.face.middle {
  width: 300px;
  height: 310px;
  transform: rotateX(75deg) translateZ(0px);
  background-color: #333;
  top: 110px;
  pointer-events: none;
}

.face.middle-back {
  width: 300px;
  height: 310px;
  transform: rotateX(-105deg) translateZ(0px);
  background-color: #333;
  top: 110px;
  pointer-events: none;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
MOBILE RESPONSIVE (992 PX) LANDSCAPE----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* @media only screen and (min-width: 1600px) {
  1600 <
}

@media only screen and (min-width: 1280px) and (max-width: 1599px) {
  1280(x 620) - 1600
}

@media only screen and (min-width: 992px) and (max-width: 1279px) {
  992(x 500) - 1280
}

@media only screen and (min-width: 480px) and (max-width: 992px) {
  480 - 992
}

@media only screen and (max-width: 479px) {
  < 480
}
*/



/* -------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
RESPONSIVE GROUP 2 (1280-1599)----------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) and (max-width: 1599px) {

  i, span         {border: 0; margin: 0; padding: 0;}

  h2              {font-weight: bold; font-size: 36px; margin: 0; padding: 0; text-transform: uppercase; line-height: 1;}
  h3              {font-weight: bold; font-size: 18px; margin: 0; padding: 0; text-transform: uppercase; color: #1A1A1A; line-height: 1;}
  h3.h3-dark      {margin: 20px 0 0; color: #CDF062;}
  h3.h3-dark span {font-size: 16px;}

  p             {font-weight: normal; font-size: 14px; margin: 6px 0 0; padding: 0; line-height: 1.5;}
  p.description {font-weight: bold; font-size: 16px; margin: 16px 0 0;}
  p.p-slogan    {font-size: 18px; margin: 18px 0;}

  mark          {padding: 10px 24px 0; background-color: #1A1A1A; color: #CDF062;}

  #intro, #socialandtechnique, #kapcsolat{
    color: white;
  }

  .korosztalyok-content{
    margin: 0;
  }

  textarea{
    height: 100px;
    margin: 0;
    line-height: 1.5;
    resize: none;
  }
}

.jatekok-content{
  margin: 20px 0 0;
}

.jatekok-content img{
  width: 50px;
  height: 50px;
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
RESPONSIVE GROUP 3 (992-1279)-----------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1279px) {

  i, span         {border: 0; margin: 0; padding: 0;}

  h2              {font-weight: bold; font-size: 24px; margin: 0; padding: 0; text-transform: uppercase; line-height: 1;}
  h3              {font-weight: bold; font-size: 16px; margin: 0; padding: 0; text-transform: uppercase; color: #1A1A1A; line-height: 1;}
  h3.h3-dark      {margin: 20px 0 0; color: #CDF062;}
  h3.h3-dark span {font-size: 12px;}

  p             {font-weight: normal; font-size: 12px; margin: 6px 0 0; padding: 0; line-height: 1.3;}
  p.description {font-weight: bold; font-size: 12px; margin: 16px 0 0;}
  p.p-slogan    {font-size: 14px; margin: 12px 0;}

  mark          {padding: 10px 24px 0; background-color: #1A1A1A; color: #CDF062;}

  .text-content{
    position: relative;
    width: 40%;
    margin: 0 0 0 12.5%;
    z-index: 3;
    float: left;
  }

  .text-content-ujragrund, .text-content-kapcsolat{
    margin: 0 47.5% 0 12.5%;
  }

  .other-content{
    position: relative;
    width: 30%;
    margin: 0 7.5% 0;
    z-index: 3;
    float: left;
  }

  #intro, #socialandtechnique, #kapcsolat{
    color: white;
  }

  .korosztalyok-content{
    margin: 10px 0 0;
  }

  textarea{
    height: 100px;
    margin: 0;
    line-height: 1.5;
    resize: none;
  }
}

.jatekok-content img{
  width: 75px;
  height: 75px;
}

button{
  margin: 20px 0 0;
}

form{margin-top: 20px;}


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
RESPONSIVE GROUP 4 (480-991) -----------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 991px) {

  #container{
    width: 100%;
    overflow: hidden;
    height: auto;
  }

  section{
    width: 100%;
    height: auto;
    display: block;
  }



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  CONTENT ------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .text-content {
    width: 80%;
    height: auto;
    margin: 10%;
    overflow: visible;
  }

  .other-content{
    width: 80%;
    height: auto;
    margin: 0 10% 10%;
    overflow: visible;
  }

  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  PARALELLOGRAM ------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .parallelogram {
    display: none;
  }

  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  BACKGROUND IMAGES --------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .subpage-effect{
    display: none;
  }

  .bckgrnd-img{
    display: none;
  }

  #ujragrund, #verticalandvariable{background-color: #CDF062;}
  #socialandtechnique, #kapcsolat{background-color: #1A1A1A;}



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ÚJRAGRUND ----------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  #ujragrund-content-img{
    display: block;
    width: 100%;
    margin: 16px 0 0;
    filter:grayscale(50%);
  }



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  VERTICAL & VARIABLE ----------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */
  #verticalandvariable .other-content{
    display: none;
  }

  .video-portrait{
    display: block;
    margin: 20px 0 40px;
  }



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  STUKKBALL CUBE -----------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .scene {
    width: 100%;
    height: auto;
    margin: 0;
  }


  .cube {
    width: 200px;
    height: 400px;
  }

  .face {
    width: 200px;
    height: 400px;
  }

  .face.front.front-down {
    background-image: none;
  }

  .face.front.front-down  { transform: translateZ(100px) translateY(200px); height: 200px;}
  .face.front.front-down-back  { transform: translateZ(100px) translateY(200px) rotateY(180deg); height: 200px;}
  .face.front.front-up  { transform: translateZ(100px) translateY(0px); height: 100px;}
  .face.front.front-up-back  { transform: translateZ(100px) translateY(0px) rotateY(180deg); height: 100px;}

  .face.back.back-down   { transform: rotateY(180deg) translateZ(100px) translateY(150px); height: 250px;}
  .face.back.back-down-back   { transform: rotateY(0deg) translateZ(-100px) translateY(150px); height: 250px;}
  .face.back.back-up  { transform: rotateY(180deg) translateZ(100px) translateY(0px); height: 150px;}
  .face.back.back-up-back   { transform: rotateY(0deg) translateZ(-100px) translateY(0px); height: 150px;}

  .face.left.left-down   { transform: rotateY(-90deg) translateZ(100px) translateY(200px); height: 200px;}
  .face.left.left-down-back   { transform: rotateY(90deg) translateZ(-100px) translateY(200px); height: 200px;}
  .face.left.left-up   { transform: rotateY(-90deg) translateZ(100px) translateY(0px); height: 200px;}
  .face.left.left-up-back   { transform: rotateY(90deg) translateZ(-100px) translateY(0px); height: 200px;}

  .face.right.right-down  { transform: rotateY(90deg) translateZ(100px) translateY(200px); height: 200px;}
  .face.right.right-down-back  { transform: rotateY(-90deg) translateZ(-100px) translateY(200px); height: 200px;}
  .face.right.right-up   { transform: rotateY(90deg) translateZ(100px) translateY(0px); height: 200px;}
  .face.right.right-up-back   { transform: rotateY(-90deg) translateZ(-100px) translateY(0px); height: 200px;}

  .face.front.front-up,
  .face.back.back-up,
  .face.left.left-up,
  .face.right.right-up{
    border: 10px solid #CDF062;
  }

  .face.front.front-up-back,
  .face.back.back-up-back,
  .face.left.left-up-back,
  .face.right.right-up-back{
    border: 10px solid #647530;
  }

  .face.top-left {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(90deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-left-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(90deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.top-right {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-right-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.top-front {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(0deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-front-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(180deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.top-back {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(180deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-back-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(0deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.bottom {
    width: 200px;
    height: 200px;
    transform: rotateX(-90deg) translateZ(200px);
    bottom: 100px;
  }

  .face.bottom-back {
    width: 200px;
    height: 200px;
    transform: rotateX(90deg) translateZ(200px);
    bottom: -250px;
  }

  .face.middle {
    width: 200px;
    height: 207px;
    top: 74px;
  }

  .face.middle-back {
    width: 200px;
    height: 207px;
    top: 74px;
  }
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
RESPONSIVE GROUP 5 (<479) -----------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

  #container{
    width: 100%;
    overflow: hidden;
    height: auto;
  }

  section{
    width: 100%;
    height: auto;
    display: block;
  }

  .menu-toggle {
    position: fixed;
    width: 50px;
    height: 50px;
    right: 40px;
    top: 40px;
    z-index: 10;
    background-color: #CDF062;
    border: 6px solid #1A1A1A;
    transition: background-color 0.8s, color 0.8s;
    transform: rotate(-45deg);
  }

  #img-stukkball-logo {
    background-size: 80%;
  }

  h3.h3-dark span {display: block;}

  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  CONTENT ------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .text-content {
    width: 80%;
    height: auto;
    margin: 10%;
    overflow: visible;
  }

  .other-content{
    width: 80%;
    height: auto;
    margin: 0 10% 10%;
    overflow: visible;
  }

  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  PARALELLOGRAM ------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .parallelogram {
    display: none;
  }

  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  BACKGROUND IMAGES --------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .subpage-effect{
    display: none;
  }

  .bckgrnd-img{
    display: none;
  }

  #ujragrund, #verticalandvariable{background-color: #CDF062;}
  #socialandtechnique, #kapcsolat{background-color: #1A1A1A;}



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ÚJRAGRUND ----------------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  #ujragrund-content-img{
    display: block;
    width: 100%;
    margin: 16px 0 0;
    filter:grayscale(50%);
  }



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  SOCIAL & TECNIQUE --------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */
  .korosztalyok-content p{
    line-height: 1.3;
  }



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  VERTICAL & VARIABLE ------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */
  #verticalandvariable .other-content{
    display: none;
  }

  .jatekok-content img{
    width: 100px;
    height: 100px;
    border: 0;
    padding: 0;
    margin: 0 20px 0 0;
    float: left;
  }

  .jatekok-content h3{
    line-height: 100px;
  }

  .jatekok-content p{
    display: inline-block;
  }

  .video-portrait{
    display: block;
    margin: 20px 0 40px;
  }



  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  KAPCSOLAT ------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .formInput-left, .formInput-right{
    width: 100%;
    margin: 0;
  }


  /* -----------------------------------------------------------------------------
  --------------------------------------------------------------------------------
  STUKKBALL CUBE -----------------------------------------------------------------
  --------------------------------------------------------------------------------
  ----------------------------------------------------------------------------- */

  .scene {
    width: 100%;
    height: auto;
    margin: 10% 0;
  }

  .cube {
    width: 200px;
    height: 400px;
  }

  .face {
    width: 200px;
    height: 400px;
  }

  .face.front.front-down {
    background-image: none;
  }

  .face.front.front-down  { transform: translateZ(100px) translateY(200px); height: 200px;}
  .face.front.front-down-back  { transform: translateZ(100px) translateY(200px) rotateY(180deg); height: 200px;}
  .face.front.front-up  { transform: translateZ(100px) translateY(0px); height: 100px;}
  .face.front.front-up-back  { transform: translateZ(100px) translateY(0px) rotateY(180deg); height: 100px;}

  .face.back.back-down   { transform: rotateY(180deg) translateZ(100px) translateY(150px); height: 250px;}
  .face.back.back-down-back   { transform: rotateY(0deg) translateZ(-100px) translateY(150px); height: 250px;}
  .face.back.back-up  { transform: rotateY(180deg) translateZ(100px) translateY(0px); height: 150px;}
  .face.back.back-up-back   { transform: rotateY(0deg) translateZ(-100px) translateY(0px); height: 150px;}

  .face.left.left-down   { transform: rotateY(-90deg) translateZ(100px) translateY(200px); height: 200px;}
  .face.left.left-down-back   { transform: rotateY(90deg) translateZ(-100px) translateY(200px); height: 200px;}
  .face.left.left-up   { transform: rotateY(-90deg) translateZ(100px) translateY(0px); height: 200px;}
  .face.left.left-up-back   { transform: rotateY(90deg) translateZ(-100px) translateY(0px); height: 200px;}

  .face.right.right-down  { transform: rotateY(90deg) translateZ(100px) translateY(200px); height: 200px;}
  .face.right.right-down-back  { transform: rotateY(-90deg) translateZ(-100px) translateY(200px); height: 200px;}
  .face.right.right-up   { transform: rotateY(90deg) translateZ(100px) translateY(0px); height: 200px;}
  .face.right.right-up-back   { transform: rotateY(-90deg) translateZ(-100px) translateY(0px); height: 200px;}

  .face.front.front-up,
  .face.back.back-up,
  .face.left.left-up,
  .face.right.right-up{
    border: 10px solid #CDF062;
  }

  .face.front.front-up-back,
  .face.back.back-up-back,
  .face.left.left-up-back,
  .face.right.right-up-back{
    border: 10px solid #647530;
  }

  .face.top-left {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(90deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-left-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(90deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.top-right {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-right-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.top-front {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(0deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-front-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(180deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.top-back {
    width: 201px;
    border-bottom: 67px solid #CDF062;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(90deg) rotateZ(180deg) translateZ(67px) translateY(67px);
    top: 34px;
  }

  .face.top-back-back {
    width: 201px;
    border-bottom: 67px solid #647530;
    border-left: 67px solid transparent;
    border-right: 67px solid transparent;
    transform: rotateX(-90deg) rotateZ(0deg) translateZ(-67px) translateY(67px);
    top: 34px;
  }

  .face.bottom {
    width: 200px;
    height: 200px;
    transform: rotateX(-90deg) translateZ(200px);
    bottom: 100px;
  }

  .face.bottom-back {
    width: 200px;
    height: 200px;
    transform: rotateX(90deg) translateZ(200px);
    bottom: -250px;
  }

  .face.middle {
    width: 200px;
    height: 207px;
    top: 74px;
  }

  .face.middle-back {
    width: 200px;
    height: 207px;
    top: 74px;
  }
}