@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

body, h1, h2, h3, h4, h5, h6, a, p, div, span, button, input, textarea {
	 font-family: "Sour Gummy", serif;
}

body {
  margin: 0px;
  /* background: #cc0e17; */
  color: #fff;
	

	background: linear-gradient(0deg, rgba(204, 14, 23, 0.91), rgba(204, 14, 23, 0.91)), url('/images/noise.gif');
  background-repeat: repeat;
  background-size: auto;
}


html {
  scroll-behavior: smooth;
}

#changeColor {
  position: fixed;
  z-index: 99999999;
  top: 40px;
  left: calc(50% - 20px);
}

#changeBack {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: #000;
  cursor: pointer;
}

#introVideo {
  position: fixed;
  z-index: 9999999999;
  background: #fff;
  width: 100%;
  height: 100vh;
	transition: all 1s ease;
}

#introVideo img {
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  top: 50%;
  position: absolute;
}

#pointerBack {
  background: linear-gradient( to right, #fff, #cacaca );
  height: 20px;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  border-radius: 20px;
	z-index: 99999999;
	pointer-events: none;
}

main {
max-width: 1200px;
  margin: auto;
	padding-top: 120px;
}

img {
	max-width: 100%;
}

#logo {
  max-width: 100%;
  width: 210px;
  height: auto;
}

header {
	position: fixed;
/*  background: #cc0e17; */
  z-index: 999;
  width: 100%;
	box-shadow: 0px 0px 2px #fff;

background: linear-gradient(0deg, rgba(204, 14, 23, 0.91), rgba(204, 14, 23, 0.91)), url('/images/noise.gif');
  background-repeat: repeat;
  background-size: auto;
}

nav a {
  color: #fff;
  text-decoration: none;
}

.menu_icon {
  color: #fff;
  font-size: 28px;
	display: none;
}

#innerHeader {
	padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

nav ul {
  display: flex;
  padding: 0;
  list-style: none;
}

nav ul li {
  padding: 10px;
	font-size: 20px;
}

.char, #aboutTitle, p, #wokrs1Title, #wokrs2Title, #experTitle, h2 {
  cursor: default;
}

#firstScreen {
  height: calc(100vh - 120px);
}

#canvas1 {
  border: 1px solid #fff;
	background: #0002;
}

#canvas1 canvas {
  background: transparent !important;
}

#canvas2 {
  position: absolute;
  top: 120px;
}

#subtitle {
  display: flex;
  justify-content: space-between;
	color: #cc0e17;
  padding: 0px 20px;
	  background: #fff;
}

#word1, #word2 {
  display: flex;
  font-size: 120px;
	overflow: hidden;
}

#divider {
  display: flex;
  align-content: center;
}

#divider svg {
  margin: auto;
	transform: scale(0.5);
  transition: all 1s ease;
	animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% { transform: scale(0.5); }
  50% { transform: scale(1); }
  100% { transform: scale(0.5); }
}

#firstScreen #subtitle .char {
	position: relative;
	transition: all 0.75s ease;
}

#canvas1:hover + #pointerBack {
    background: url("/images/brainSmall.png");
	height: 131px;
	width: 180px;
}

#steadyBrain {
  height: 131px;
  width: 180px;
  position: absolute;
  top: 108px;
	 display: none;
}

#canvas1:hover ~ #steadyBrain {
    display: none;
}

#goToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #fff;
  color: #cc0e17;
  font-size: 15px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 99999995;
	cursor: pointer;
	display: none;
	opacity: 0;
	transition: all 0.3s ease;
}

.arrowUp {
  border: solid #cc0e17;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

/*-----------------------------SECOND SCREEN------------------------*/


#secondScreen {
/*  height: calc(100vh - 98px);
	height: 700px;  */
	height: 500px;
	display: flex;
  align-items: center;
  justify-content: center;
}

#aboutTitle {
	 font-size: 175px;
	transform: scale(0.1);
	transition: all 0.5s ease;
}



/*-----------------------------THIRD SCREEN------------------------*/


#thirdScreen {
/* min-height: calc(100vh - 98px); */
	display: flex;
	align-items: flex-end;
}

.leftCol, .rightCol {
  padding: 10px;
	width: 50%;
}

#thirdScreen p {
  font-size: 20px;
}

.invText {
  opacity: 0;
  transition: all 2s ease;
}

/*-----------------------------FOURTH SCREEN------------------------*/


#fourthScreen {
 /* height: calc(100vh - 98px); 
		height: 600px; */ 
		height: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
	overflow: hidden;
}


#wokrs1Title, #wokrs2Title {
  font-size: 110px;
  position: relative;
  transition: all 0.5s ease;
}

#wokrs1Title {
  left: -872px;
}

#wokrs2Title {
right: -872px;
padding-bottom: 25px;
}


/*-----------------------------FIFTH SCREEN------------------------*/


#fifthScreen {
  min-height: calc(100vh - 98px);
}

.gridContainer {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 240px 240px 240px 240px 240px;
}

.gridContainer div {
  border: 1px solid #fff;
}

#ergo1 video, #ergo2 img, #ergo3 img, #ergo4 video, #ergo5 img, #ergo6 img, #ergo7 video, #ergo8 img, #ergo9 img, #ergo10 img, #ergo11 img, #ergo12 img, #ergo13 img, #ergo14 video, #ergo15 img, #ergo16 img, #ergo17 img, #ergo18 img, #ergo19 img, #ergo20 video, #ergo21 img, #ergo22 video, #ergo23 img, #ergo24 video, #ergo25 img {
transition: all 0.2s ease;
}

#ergo1 video:hover, #ergo2 img:hover, #ergo3 img:hover, #ergo4 video:hover, #ergo5 img:hover, #ergo6 img:hover, #ergo7 video:hover, #ergo8 img:hover, #ergo9 img:hover, #ergo10 img:hover, #ergo11 img:hover, #ergo12 img:hover, #ergo13 img:hover, #ergo14 video:hover, #ergo15 img:hover, #ergo16 img:hover, #ergo17 img:hover, #ergo18 img:hover, #ergo19 img:hover, #ergo20 video:hover, #ergo21 img:hover, #ergo22 video:hover, #ergo23 img:hover, #ergo24 video:hover, #ergo25 img:hover {
opacity: 1 !important;	
}

/*-----------------------------SIXTH SCREEN------------------------*/


#sixthScreen {
 /* height: calc(80vh - 98px); */
		height: 500px;
	display: flex;
  align-items: flex-end;
	overflow: hidden;
}

#experTitle {
  font-size: 140px;
	position: relative;
  bottom: -180px;
  transition: all 0.75s ease;
}

/*-----------------------------SEVENTH SCREEN------------------------*/


#seventhScreen {
/*  height: calc(100vh - 98px); */
	height: auto;
}

#matterCanvas canvas {
  background: transparent !important;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	  max-width: 100%;
}


/*-----------------------------EIGHTH SCREEN------------------------*/


#eighthScreen {
 /* height: calc(100vh - 98px); 
			height: 650px; */
	height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contactTitle .char {
  display: inline-block;
  font-size: 140px;
  transition: all 0.25s ease;
  transform: scale(0);
}

/*-----------------------------NINENTH SCREEN------------------------*/


#ninenthScreen {
	display: flex;
	overflow: hidden;
}

.contactIcon {
  width: 25px;
  margin-right: 8px;
}

#ninenthScreen .rightCol p {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#ninenthScreen .rightCol p a {
 color: #fff;
	text-decoration: none;
}

#ninenthScreen .rightCol {
  border-left: 2px dashed #fff;
	position: relative;
  right: -605px;
  transition: all 1s ease;
}

#ninenthScreen h2 {
  margin-top: 0px;
}

#formaEpikoinonias {
  width: 66%;
}

#ninenthScreen .leftCol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
	border-right: 2px dashed #fff;
	position: relative;
  left: -605px;
  transition: all 1s ease;
}

#sendButton {
  font-size: 15px;
  color: #f00;
  background: #fff;
  padding: 10px 15px;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
margin-top: 10px;
}

input, textarea {
  font-size: 15px;
}

/*-----------------------------TENTH SCREEN------------------------*/


#tenthScreen {
  display: flex;
  justify-content: center;
  padding: 35px 15px 15px 15px;
}

#copyright a {
  color: #fff;
  text-decoration: navajowhite;
}

/*-----------------------------ERGA------------------------*/

 /* Hide scrollbar for Chrome, Safari and Opera */
#textForErgo1::-webkit-scrollbar, #textForErgo2::-webkit-scrollbar, #textForErgo3::-webkit-scrollbar, #textForErgo4::-webkit-scrollbar, #textForErgo5::-webkit-scrollbar, #textForErgo6::-webkit-scrollbar, #textForErgo7::-webkit-scrollbar, #textForErgo8::-webkit-scrollbar, #textForErgo9::-webkit-scrollbar, #textForErgo10::-webkit-scrollbar, #textForErgo11::-webkit-scrollbar, #textForErgo12::-webkit-scrollbar, #textForErgo13::-webkit-scrollbar, #textForErgo14::-webkit-scrollbar, #textForErgo15::-webkit-scrollbar, #textForErgo16::-webkit-scrollbar, #textForErgo17::-webkit-scrollbar, #textForErgo18::-webkit-scrollbar, #textForErgo19::-webkit-scrollbar, #textForErgo20::-webkit-scrollbar, #textForErgo21::-webkit-scrollbar, #textForErgo22::-webkit-scrollbar, #textForErgo23::-webkit-scrollbar, #textForErgo24::-webkit-scrollbar, #textForErgo25 ::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#textForErgo1, #textForErgo2, #textForErgo3, #textForErgo4, #textForErgo5, #textForErgo6, #textForErgo7, #textForErgo8, #textForErgo9, #textForErgo10, #textForErgo11, #textForErgo12, #textForErgo13, #textForErgo14, #textForErgo15, #textForErgo16, #textForErgo17, #textForErgo18, #textForErgo19, #textForErgo20, #textForErgo21, #textForErgo22, #textForErgo23, #textForErgo24, #textForErgo25 {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

#ergo1, #ergo2, #ergo3, #ergo4, #ergo5, #ergo6, #ergo7, #ergo8, #ergo9, #ergo10, #ergo11, #ergo12, #ergo13, #ergo14, #ergo15, #ergo16, #ergo17, #ergo18, #ergo19, #ergo20, #ergo21, #ergo22, #ergo23, #ergo24, #ergo25 {
  cursor: pointer;
}

#overlayBack {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0008;
  z-index: 999999999999;
	display: none;
	opacity: 0;
		transition: all 1s ease;
}

#textForErgo1, #textForErgo2, #textForErgo3, #textForErgo4, #textForErgo5, #textForErgo6, #textForErgo7, #textForErgo8, #textForErgo9, #textForErgo10, #textForErgo11, #textForErgo12, #textForErgo13, #textForErgo14, #textForErgo15, #textForErgo16, #textForErgo17, #textForErgo18, #textForErgo19, #textForErgo20, #textForErgo21, #textForErgo22, #textForErgo23, #textForErgo24, #textForErgo25 {
  position: absolute;
  z-index: 999999999999999;
  background: #fffffff7;
  width: calc(86% - 40px);
  height: calc(90vh - 40px);
  top: 5vh;
  left: 7%;
  border-radius: 20px;
  padding: 20px;
	display: none;
	opacity: 0;
		transition: all 2s ease;
	overflow-y: auto;
	color: #000;
}

#closeOveralyTexts {
  position: absolute;
  right: 7%;
  top: 5vh;
  z-index: 99999999999999999999;
  background: #000;
  color: #fff;
  font-size: 25px;
font-family: "Sour Gummy", serif;
  padding: 5px 10px;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(50%, -50%);
	border: 2px solid #fff;
}

 .scrolling_text {
    width: 100%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
	 align-items: center;
  height: 100vh;
}

 .scrolling_text .text {
    font-size: 500px;
    font-weight: 600;
 font-family: "Sour Gummy", serif;
    color: #fff;
    animation: animate_text 120s linear infinite; /* The animation property */
}


 .scrolling_text .text span {
    margin: 0 6px;
}

#scrollingTextBack {
  background: #0000002e;
}

@keyframes animate_text {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
}

.vidFrame {
  max-width: 100%;
}

.workImage {
  max-width: 100%;
  width: 750px;
  margin: 0px 0px 20px 0px;
}

.workImagesContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#ergo1 video {
	animation: animate_ergo1 10s linear infinite; 
}

#ergo4 video {
	animation: animate_ergo4 10s linear infinite; 
}

#ergo7 video {
	animation: animate_ergo7 10s linear infinite; 
}

#ergo14 video {
	animation: animate_ergo14 10s linear infinite; 
}

#ergo20 video {
	animation: animate_ergo20 10s linear infinite; 
}

#ergo22 video {
	animation: animate_ergo22 10s linear infinite; 
}

#ergo24 video {
	animation: animate_ergo24 10s linear infinite; 
}

@keyframes animate_ergo1 {
    0% {
     opacity: 1;
    }
	20% {
       opacity: 0;
    }
	 90% {
       opacity: 0;
    }
   100% {
       opacity: 1;
    }
}

@keyframes animate_ergo4 {
    0% {
     opacity: 0;
    }
	 5% {
     opacity: 0;
    }
	15% {
       opacity: 1;
    }
	35% {
       opacity: 0;
    }
   100% {
       opacity: 0;
    }
}

@keyframes animate_ergo7 {
    0% {
     opacity: 0;
    }
	 20% {
     opacity: 0;
    }
	30% {
       opacity: 1;
    }
	50% {
       opacity: 0;
    }
   100% {
       opacity: 0;
    }
}

@keyframes animate_ergo14 {
    0% {
     opacity: 0;
    }
	35% {
     opacity: 0;
    }
	45% {
       opacity: 1;
    }
	65% {
       opacity: 0;
    }
   100% {
       opacity: 0;
    }
}

@keyframes animate_ergo20 {
    0% {
     opacity: 0;
    }
	50% {
     opacity: 0;
    }
	60% {
       opacity: 1;
    }
	80% {
       opacity: 1;
    }
   100% {
       opacity: 0;
    }
}

@keyframes animate_ergo22 {
    0% {
     opacity: 0;
    }
	 65% {
     opacity: 0;
    }
	75% {
       opacity: 1;
    }
	 95% {
       opacity: 0;
    }
   100% {
       opacity: 0;
    }
}

@keyframes animate_ergo24 {
    0% {
     opacity: 1;
    }
	10% {
       opacity: 0;
    }
	80% {
       opacity: 0;
    }
	90% {
     opacity: 1;
    }
   100% {
       opacity: 1;
    }
}

#copyright {
  text-align: center;
}