body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.background-hp {
	background:url('../images/bg.png') top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: -50px;
}

header {
	width: 100%;
	height: 200px;
	position: absolute;
	z-index: 10;
}

h1 {
	padding: 0;
	margin: 0;
	font-family: 'Patrick Hand', cursive;
	color:#fff;
	font-size: 32px;
	line-height: 36px;
}

p {
	font-family: 'Ubuntu', sans-serif;
}

.splash {
	width: 100%; margin-top:-5vh;
}

.font-hand { font-family: 'Patrick Hand', cursive; }
.font-ubuntu { font-family: 'Ubuntu', sans-serif; }

.logo {
	float:left;
	width: 20%;
	padding: 0 20px;
	box-sizing: border-box;
}

.meniu {
	float:left;
	width: 70%;
	box-sizing: border-box;
	margin-top:15px;
	text-align: center;
}

.meniu > a {
	padding:0 25px;
	font-family: 'Patrick Hand', cursive;
	font-size: 26px;
	color:#1736be;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
}

.social {
	float:left;
	width: 10%;
	padding: 0 20px;
	box-sizing: border-box;
	margin-top:15px;
	text-align: left;
}

.scena1 {
	width: 100%;
	height: 80vh;
	padding-top:20vh;
	position: relative;
	min-height: 600px;
}

.scena1-premii {
	width: 100%;
	height: 80vh;
	padding-top:20vh;
	position: relative;
}

.scena2 {
	width: 100%;
	height: 225vh;
	padding-top:20vh;
	position: relative;
	/*margin-top:70px;*/
}

.scena2-jocuri {
	width: 100%;
	height: 280vh;
	padding-top:5vh;
	position: relative;
	background:url('../images/background-jocuri.png') top center;
	background-repeat: no-repeat;
	background-size: cover;
}

#nav-icon3 {
  width: 40px;
  height: 35px;
  -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: .5s ease-in-out;
  cursor: pointer;
  position: absolute;
  top:18px;
  right:35px;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #fff;
  border-radius: 7px;
  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;
}

.nav-icon3 > span {
	background:#000!important;
}	

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 14px;
}

#nav-icon3 span:nth-child(4) {
  top: 28px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #000;
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #000;
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
}

.burger {
	display:none;
}
#meniumobile {
	position: fixed; top:5px; right:0; width: 100%; height:100vh; background-color:#f2f2f2; box-sizing: border-box; padding:0 35px; z-index: 99; display: none;
}

#meniumobile.open {
	display:block;
}	

#meniumobile > a {
	width: 100%;
	border-bottom:2px solid #ddd;
	padding: 30px 0 5px 10px;
	font-size:22px;
	display: block;
	color:#000;
	text-decoration: none;
}

.buton {
	text-decoration: none;
	margin:40px 0;
	display: inline-block;
	background-color:#fff;
	padding:15px 35px;
	font-weight: bold;
	font-family: 'Baloo Chettan', cursive;
	color:#1736be;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
}

.buton-albastru {
	text-decoration: none;
	margin:40px 0;
	display: inline-block;
	background-color:#1736be;
	padding:15px 45px;
	font-weight: bold;
	font-family: 'Baloo Chettan', cursive;
	color:#fff;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
}

.formular > form > input {
	width: 100%;
	border:none;
	margin-top:20px;
	background:none;
	padding: 5px;
	color:#fff;
	font-size: 16px;
	font-weight: bold;
	border-bottom:2px solid white;
	font-family: 'Ubuntu', sans-serif;
}

.formular > p, .formular > form > p  {
	color:#fff;
	font-size: 14px;
	width: 70%;
	margin:0 auto;
	margin-bottom:25px;
}

@keyframes float {
	0% { transform: translatey(0px); }
	50% { transform: translatey(-20px);	}
	100% { transform: translatey(0px); }
}

@keyframes float2 {
	0% { transform: translatey(0px); }
	30% { transform: translatey(-25px);	}
	100% { transform: translatey(0px); }
}

@keyframes float3 {
	0% { transform: translatey(0px); }
	50% { transform: translatey(-10px);	}
	100% { transform: translatey(0px); }
}

@keyframes float4 {
	0% { transform: translatey(0px); }
	50% { transform: translatey(-10px);	}
	100% { transform: translatey(0px); }
}

@keyframes float5 {
	0% { transform: translate(0,0); }
	50% { transform: translate(10px,30px);	}
	100% { transform: translate(0,0); }
}

@keyframes caine {
	0% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(10px, -15px) rotate(6deg);	}
	100% { transform: translate(0, 0px) rotate(0deg); }
}

@keyframes rotire {
	0% { transform: skewY(0deg); }
	50% { transform: skewY(4deg);	}
	100% { transform: skewY(0deg); }
}

@keyframes miscare {
	0% { transform: translate(0,0); }
	50% { transform: translate(20px,0);	}
	100% { transform: translate(0,0); }
}

@keyframes miscare2 {
	0% { transform: translate(0,0); }
	50% { transform: translate(-10px,0);	}
	100% { transform: translate(0,0); }
}

@keyframes scalare {
	0% { transform: scale(1,1); }
	50% { transform: scale(0.9,0.9);	}
	100% { transform: scale(1,1); }
}

.plutire {
	transform: translatey(0px);
	animation: float 3s ease-in-out infinite;
}

.plutire2 {
	transform: translatey(0px);
	animation: float2 4s ease-in-out infinite;
}

.plutire3 {
	transform: translatey(0px);
	animation: float3 3s ease-in-out infinite;
}

.plutire4 {
	transform: translatey(0px);
	animation: float4 2s ease-in-out infinite;
}

.plutire5 {
	transform: translatex(0px);
	transform: translatey(0px);
	animation: float5 4s ease-in-out infinite;
}

.anim-caine {
	animation: caine 2s ease-in-out infinite;
}
.rotire {
	animation: rotire 3s ease-in-out infinite;
}

.miscare {
	animation: miscare 4s ease-in-out infinite;
}

.miscare2 {
	animation: miscare2 3s ease-in-out infinite;
}

.scalare {
	animation: scalare 3s ease-in-out infinite;
}

.container-mobile {
	margin:0 auto;
	width: 80%;
}
.centrare {
	text-align: center;
	width: 100%;
	margin-top:20px;
	margin-bottom:20px;
}

.centrare > img {
	max-width: 100%;
}

.animatie_swing {
    -webkit-animation: 4s ease 0s normal none infinite swing;
  -moz-animation: 4s ease 0s normal none infinite swing;
  -o-animation: 4s ease 0s normal none infinite swing;;
  animation: 4s ease 0s normal none infinite swing;
  -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
}

.animatie_swing2 {
    -webkit-animation: 4s ease 0s normal none infinite swing2;
  -moz-animation: 4s ease 0s normal none infinite swing2;
  -o-animation: 4s ease 0s normal none infinite swing2;
  animation: 4s ease 0s normal none infinite swing2;
  -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
}

@keyframes swing {
 0% {
    -ms-transform: skewX(1deg) scale(1,1);
    -webkit-transform: skewX(1deg) scale(1,1);
    transform: skewX(1deg) scale(1,1);
 }
 50% {
     -ms-transform: skewX(-1deg) scale(0.9,0.9);
    -webkit-transform: skewX(-1deg) scale(0.9,0.9);
    transform: skewX(-1deg) scale(0.9,0.9);
 }
100%{
    -ms-transform: skewX(1deg) scale(1,1);
    -webkit-transform: skewX(1deg) scale(1,1);
    transform: skewX(1deg) scale(1,1);
 }
}

@keyframes swing2 {
 0% {
    -ms-transform: skewX(1deg) scale(1,1);
    -webkit-transform: skewX(1deg) scale(1,1);
    transform: skewX(1deg) scale(1,1);
 }
 50% {
     -ms-transform: skewX(-1deg) scale(0.8,0.8);
    -webkit-transform: skewX(-1deg) scale(0.8,0.8);
    transform: skewX(-1deg) scale(0.8,0.8);
 }
100%{
    -ms-transform: skewX(1deg) scale(1,1);
    -webkit-transform: skewX(1deg) scale(1,1);
    transform: skewX(1deg) scale(1,1);
 }
}

footer {
	background-color:#fff; width: 100%; padding: 15px 0; text-align: center; z-index: 5; position: relative;
}

footer > a {
	font-family: 'Ubuntu', sans-serif;
	text-decoration: none; font-weight: bold; color:#000; margin: 8px 15px; display: inline-block;
	white-space:nowrap;
}

label {
	font-family: 'Ubuntu', sans-serif;
	color:#fff;
	font-size: 14px;
	text-align: left;
	display:block;
}

.scena1-jocuri {
	width: 100%;
	height: 90vh;
	padding-top:20vh;
	position: relative;
	min-height: 600px;
	background-image:url('../images/background_iarba.png');
	background-size: contain;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.scena1-jocuri-mobile {
	width: 100%;
	height: 65vh;
	margin-top:25vh;
	box-sizing: border-box;
	position: relative;
	background-color:#acdef4;
	background-image:url('../images/background_iarba_mobil.png');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	display: none;
}

.scena2-jocuri-mobile {
	background-color:#acdef4;
	background-image:url('../images/bgjocurimobil.png');
	min-height: 200vh;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

.scena1-mobile,.scena2-jocuri-mobile { display:none; }
.visible-mobile { display:none; }
.visible-desktop { display:block; }

.meniu_mobile {
		display: none;
		position: absolute;top:0;
		z-index:10;
		margin:0 auto;
		width: 100%;
	}
	.buton_meniu { 
		font-size:30px;color:#e21d36;
	}
.continut_meniu_mobile ul {
		margin:0;
		padding: 0;
		list-style-type: none;
	}
	.continut_meniu_mobile ul li a {
		text-decoration: none;
		display: block;
		padding: 5px 0;
		color:#1736be;
		font-weight: bold;
		font-size: 24px;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		transition: all 0.6s ease;
		text-transform: uppercase;
	}
	.continut_meniu_mobile ul li a:hover {
		color:#e21d36;	
	}
	
::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color: #fff;
}		

.input-file-container {
  position: relative;
  width: 100%;
} 
.js .input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: #fff;
  color: #1736be;
  transition: all .4s;
  cursor: pointer;
  text-align: center;
}
.js .input-file {
  /*position: absolute;*/
  top: 0; left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
  /*background: #34495E;
  color: #39D2B4;*/
}

.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  /*margin: 1em 0;*/
}
.js .file-return {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
  width: 100%;
}
.js .file-return:not(:empty):before {
  content: "";
  font-style: normal;
  font-weight: normal;
}


.input-file-container2 {
  position: relative;
  width: 100%;
} 
.js .input-file-trigger2 {
  display: block;
  padding: 14px 45px;
  background: #fff;
  color: #1736be;
  transition: all .4s;
  cursor: pointer;
  text-align: center;
}
.js .input-file2 {
  /*position: absolute;*/
  top: 0; left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file2:hover + .input-file-trigger2,
.js .input-file2:focus + .input-file-trigger2,
.js .input-file-trigger2:hover,
.js .input-file-trigger2:focus {
  /*background: #34495E;
  color: #39D2B4;*/
}

.file-return2 {
  margin: 0;
}
.file-return2:not(:empty) {
  /*margin: 1em 0;*/
}
.js .file-return2 {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
  width: 100%;
}
.js .file-return2:not(:empty):before {
  content: "";
  font-style: normal;
  font-weight: normal;
}

.buton-mobil-jocuri {
	width:28%;
}	

.norisorjocuri {
	position: absolute; bottom:70vh; left:15vw; width: 16%;
}

.pasarijocuri {
	position: absolute; bottom:73vh; left:19vw; width: 9%;
}

.pasarijoc {
	position: absolute; bottom:60vh; left:9vw; width: 25%;
}

.fatazmeu {
	position: absolute; bottom:29vh; right:10vw; width: 16%;
}

.baiatjoc {
	position: absolute; width: 15%; left:35vw; bottom:25vh; text-align: right; z-index: 3;
}

.tufisjoc {
	position: absolute; width: 35%; left:0vw; bottom:9vh; text-align: right; z-index: 3;
}

.copil1joc { position: absolute; width: 11%; right:30vw; top:13vh; text-align: left; z-index: 3; }
.copil2joc { position: absolute; width: 11%; right:38vw; top:23vh; text-align: left; z-index: 3; }
.copil3joc { position: absolute; width: 11%; right:30vw; top:40vh; text-align: left; z-index: 3; }
.leaganjoc { position: absolute; width: 30%; right:1vw; top:15vh; text-align: left; z-index: 3; }
.fulgaleagan { position: absolute; width: 20%; right:10vw; top:15vh; text-align: left; z-index: 3; }

.selectat {
	color:#e21d36!important;
}

.pupila1 {
	width:7px; height:14px; left:49vw; top:18vh; margin-left:-0.6vw; border-radius:5px; background-color:#fff; position:absolute;
}

.pupila2 {
	width:7px; height:14px; left:50vw; top:18vh; margin-left:0.6vw; border-radius:5px; background-color:#fff; position:absolute;
}

@media only screen and (max-width:1500px) {
	.pupila1 { left:48.8vw; }
	.pupila2 { left:50vw; }
}

@media only screen and (max-width:1400px) {
	.pupila1 { left:48.7vw; }
	.pupila2 { left:49.9vw; }
}

@media only screen and (max-width:1300px) {
	.pupila1 { left:48.5vw; }
	.pupila2 { left:50.2vw; }
}

@media only screen and (max-width:370px) and (min-width:355px) {
	.buton-mobil-jocuri { width:31%; }	
}

@media only screen and (max-width:355px) and (min-width:300px) {
	.buton-mobil-jocuri { width:45%; }	
}

@media only screen and (width:1200px) and (min-height:700px) {
	.norisorjocuri { position: absolute; bottom:75vh; left:5vw; width: 16%; }	
	.pasarijocuri { position: absolute; bottom:78vh; left:13vw; width: 9%; }
	.pasarijoc { position: absolute; bottom:60vh; left:1vw; width: 25%; }
	.fatazmeu {	position: absolute; bottom:20vh; right:5vw; width: 18%; }
	.baiatjoc {	position: absolute; width: 15%; left:30vw; bottom:25vh; text-align: right; z-index: 3; }
	.tufisjoc {	position: absolute; width: 35%; left:-3vw; bottom:9vh; text-align: right; z-index: 3; }
	.copil1joc { position: absolute; width: 11%; right:25vw; top:13vh; text-align: left; z-index: 3; }
	.copil2joc { position: absolute; width: 11%; right:33vw; top:23vh; text-align: left; z-index: 3; }
	.copil3joc { position: absolute; width: 11%; right:25vw; top:40vh; text-align: left; z-index: 3; }
	.leaganjoc { position: absolute; width: 30%; right:-5vw; top:15vh; text-align: left; z-index: 3; }
	.fulgaleagan { position: absolute; width: 20%; right:5vw; top:15vh; text-align: left; z-index: 3; }
}

@media only screen and (max-width:1100px) {
	.meniu_mobile { display:block; }
	.meniu,.social { display:none; }
	.burger { display:block; }
	.scena1, .scena2,.scena1-premii,.scena1-jocuri,.scena2-jocuri { display:none; }
	.scena1-mobile { display:block; }
	.visible-desktop { display:none; }
	.splash { display:none; }
	.scena1-jocuri-mobile,.scena2-jocuri-mobile { display:block; }
	header { display:none; }
	.background-hp { background:url('../images/bg_mobil.png') top center;  background-size: cover; 	background-position-y: 0px;}
}