@font-face {
  font-family: "Athens";
  src: url("../fonts/Athens.woff2") format("woff2")
}

@font-face {
  font-family: "CF-Din";
  src: url("../fonts/CF-Din-Book.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "CF-Din";
  src: url("../fonts/CF-Din-Bd.woff2") format("woff2");
  font-weight: 600;
}

* {
  padding: 0;
  margin: 0;
}

body {
  overflow: hidden;
  height: calc(var(--vh, 1vh) * 100);
  background: linear-gradient(180deg, rgba(75,149,189,1) 0%, rgba(209,241,201,1) 100%);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Athens';
  position: relative;
  margin: 0 auto;
}

body#home {
  overflow: unset;
  background-attachment: fixed;
}
#home .page-content {
  height: unset;
}

.page-content {
  width:100%;
  height: 100%;
}
.svg-content {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle;
	overflow: hidden;
}

/*
* IMAGES
*/
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/*
* FIXED ACTION BUTTONS
*/
.action-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999;
  position: absolute;
}
.action-button img {
  max-height: 60px;
  pointer-events: none;
  transition: filter 0.3s ease-in-out;
}
.action-button:hover img {
  filter: brightness(1.2);
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.action-button.btn-start {
  background-color: transparent;
  padding: 0;
}
.btn-speaker {
  top: 150px;
  right: 10px;
}
.btn-replay {
  top: 80px;
  right: 10px;
}
.btn-menu {
  top: 10px;
  right: 10px;
  z-index: 1000;
}
.btn-previous-step {
  bottom: 10px;
  left: 10px;
}
.btn-next-step {
  bottom: 10px;
  right: 10px;
}
.btn-replay-sound {
  top: 222px;
  right: 10px;
}

.speaker.muted {
  display: none;
}

.start-button, .replay-button {
  cursor: pointer;
}
.start-button path:not(:first-child), .start-button g, .replay-button path:not(:first-child), .replay-button g {
  pointer-events: none;
}

/*
* SLIDING MENU PANEL
*/
.menu {
  position: fixed;
  right: -100vw;
  top: 0;
  z-index: 999;
  color: #005c9c;
  background: rgba(250, 250, 250, 0.7);
  width: 250px;
  height: calc(var(--vh, 1vh) * 100);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1);
}
.menu ul {
    list-style-type: none;
    height: calc(var(--vh, 1vh) * 80);
    overflow: auto;
    padding: 50px 0px;
}
.menu li {
  padding: 3px 0px 3px 25px;
}
.menu a {
  text-decoration: none;
  font-weight: bold;
  transition: 0.4s all;
}
.menu a.video-link {
  color: #781A43;
}
.menu a.game-link {
  color: #EF6F3C;
}
.menu a:hover {
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
  -moz-filter: brightness(0.8);
  -o-filter: brightness(0.8);
}
.menu.active {
  right: 0;
}
.menu ul {
  list-style-type: none;
}

.game-list + .video-list {
  margin-top: 10px;
}
.project {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}

.game-frame, .start-frame {
  margin-left:7.5%;
  width:85%;
  height:100%;
  touch-action: pinch-zoom;
  /* display: none; */
  /* opacity: 0; */
}

#home .btn-next-step, #home .btn-previous-step {
  display: none;
}
#home .game-frame {
  height: auto;
}
#home .credits {
  padding: 40px 20px;
  /* background: rgba(209,241,201,1); */
}
#home .credits .container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  color: #EF6F3C;
  font-size: 1.3rem;
  font-family: 'CF-Din', sans-serif;
  background: rgba(255, 255, 255, 0.4);
  padding: 20px 40px;
  border-radius: 15px;
}
#home .credits .container h2 {
  font-weight: 400;
  margin-bottom: 30px;
  margin-top: 80px;
  font-size: 1.7rem;
}
#home .credits .container h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
#home .credits .container > h3 {
  margin-top: 60px;
}
#home .credits ul {
  list-style-type: none;
  margin-top: 80px;
}
#home .credits ul li {
  margin-bottom: 24px;
}
#home .credits ul li:last-child {
  margin-bottom: 0;
}
#home .credits .credits-logos {
  display: inline-flex;
  gap: 50px;
  align-items: flex-end;
}
#home .credits .credits-logos a {
  display: inline-block;
}
#home .game-frame, #home .start-frame {
  touch-action: auto;
}

.video-frame {
  height: 100%;
  width: 100%;
}

.video-js {
  width: 100%;
  height: 100%;
}

#js-drop {
  height: 100%;
  width: 100%;
}

#game05 .draggable image {
  transition: transform 0.2s ease-in-out;
}

.draggable.dropped {
  display: none!important;
}

.draggable[data-item="neos-voskos-verka"] {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* droppable zone */
#game01 .droppable {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
#game01 .droppable.caught--it {
  opacity: 1;
}
.droppable {
  transition: opacity 0.2s;
}
#game-4-container .droppable{
  fill:#fff !important;
  opacity:0;
}
.droppable.hovered {
  opacity: 0.3 !important;
}

/* text of element */
*[data-name] {
  position: relative;
}
*[data-name]:after {
    content: attr(data-name);
    display: inline-block;
    position: absolute;
    background-color: white;
    height: fit-content;
    width: max-content;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 0.5em;
    border-radius: 0.5em;
    font-size: 0.9em;
    display: none;
}
*[data-name]:hover::after {
  display: block;
}
*[data-name].hide-text::after {
  display: none;
}

.hide {
  display: none;
}

.show {
  display: inline!important;
}

.available {
  cursor: pointer;
}

.disable {
  pointer-events: none;
}

.caught--it, .caught-it {
  transition: 0.3s ease-in-out;
}

.btnAudio, .btnAudio:hover, .btnItem {
  cursor: pointer;
}
.btnAudio:hover {
  filter: brightness(1.2);
}

#game04 .btnItem {
  cursor: unset;
}

.btnAudio, .draggable {
  pointer-events: bounding-box;
}

.draggable {
  cursor: grab!important;
  touch-action: pinch-zoom;
}

.draggable.getting--dragged {
  cursor: grabbing!important;
}

#new_vaskos_with_elements_2, #new_vaskos_with_elements_1 {
  transition: 0.4s ease-in-out;
  opacity: 1;
}

.btnAudio[data-sound] {
  opacity: 100%;
  transition: 0.6s ease-in-out;
}

.itemImage, .object, .board, .item {
  opacity: 0;
  transition: 0.6s ease-in-out;
}

.item-shadow {
  opacity: 0;
  transition: 0.4s ease-in-out;
}

.opacity-0 {
  opacity: 0!important;
}

.opacity-full {
  opacity: 1!important;
}

.stepImage, .stepText, .partTwo.itemImage, .partTwo.itemDescription, .partTwo.itemTitle, .cardArea {
  opacity: 0;
  transition: 0.4s ease-in-out;
}

.stepImageCard {
  display: none;
}

.modal {
  position: fixed;
  text-align: center;
  display: none;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(255, 255, 255, 0.8);
  z-index: 999999;
}
.modal .modal-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #781A43;
  font-size: 18px;
  text-shadow: rgb(107, 107, 107) 3px 3px 7px;
}
.modal h2 {
  padding: 40px;
}
#check-orientation-modal {
  z-index: 99999999999;
  background: linear-gradient(180deg, rgba(75,149,189,1) 0%, rgba(209,241,201,1) 100%);
}
#check-browser-modal {
  z-index: 999999999999;
  background: linear-gradient(180deg, rgba(75,149,189,1) 0%, rgba(209,241,201,1) 100%);
}
#check-audio-modal {
    cursor:pointer;
}
#check-audio-modal button {
  background-color: #EF6F3C;
  border: 1px solid black;
  border-radius: 6px;
  color: white;
  font-size: 16px;
  padding: 10px 16px;
  margin-top: 20px;
  cursor: pointer;
  font-family: 'Athens'!important;

}

/* Responsiveness */
@media (min-width: 320px) and (max-width: 940px) and (orientation: landscape) {
  #check-orientation-modal {
    display: none;
  }
  button.action-button img, a.action-button img {
    max-height: 40px;
  }
  button.btn-speaker {
    top: 110px;
    right: 10px;
  }
  a.btn-replay {
    top: 60px;
    right: 10px;
  }
  button.btn-menu {
    top: 10px;
    right: 10px;
  }
  a.btn-previous-step {
    bottom: 10px;
    left: 10px;
  }
  a.btn-next-step {
    bottom: 10px;
    right: 10px;
  }
  button.btn-replay-sound {
    top: 160px;
    right: 10px;
  }
}

@media (min-width: 320px) and (max-width: 940px) and (orientation: portrait) {
  #check-orientation-modal {
    display: block!important;
  }
  .project {
    display: none!important;
  }
  button, a.action-button {
    display: none!important;
  }
}

@media (hover:none), (hover:on-demand) {
  /* custom css for "touch targets" */
  body {
    height: calc(var(--vh, 1vh) * 100);
  }
  .page-content {
    height: 100%;
  }
}