* {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	-ms-box-sizing: border-box;

	-o-box-sizing: border-box;

	box-sizing: border-box;

	margin: 0;

	padding: 0;

}



body {

	background: #fff;

}



.container2 {

	background-image: url("../images/game_title_es.png"), url("../images/gui_sky_background.png");

	background-color: #cccccc;

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 900px;

	height: 600px;

	position: absolute;

	z-index: 1;

}



.container {

	background-image: url("../images/game_farm_background_overlay2.png"), url("../images/gui_sky_background.png");

	background-color: #cccccc;

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 900px;

	height: 600px;

	position: relative;

}



.container3 {

	background-image: url("../images/container3.jpg");

	background-color: #cccccc;

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 900px;

	height: 600px;

	position: absolute;

	top: 0px;

    z-index: 1;

}

.container3 .felicidades span{

	font-size: 27px;

	font-family: 'Titan One';

	background-color: red;

}



.menu {

	background-image: url("../images/btn_menu.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	display: flex;

	color: #fff;

	font-size: 27px;

	font-family: 'Titan One';

	width: 144px;

	height: 76px;

	justify-content: center;

	align-items: center;

	cursor: pointer;



}



.errores {

	background-image: url("../images/answer_indicator.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	display: flex;

	color: #fff;

	font-size: 27px;

	font-family: 'Titan One';

	width: 167px;

	height: 76px;

	justify-content: flex-end;

	align-items: center;

	bottom: 150px;

	position: relative;

	left: 622px;

}



.mistery {

	background-image: url("../images/btn_answer.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	display: flex;

	color: #fff;

	font-size: 27px;

	font-family: 'Titan One';

	width: 124px;

	height: 76px;

	justify-content: flex-end;

	align-items: center;

	bottom: 75px;

	position: relative;

	left: 502px;

}



.maquina {

	background-image: url("../images/score_overlay.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}



.noErr {

	width: 54px;

	font-size: 37px;

	height: 48px;

}



.container .box {

	background-color: grey;

	padding: 15px;

	display: inline-block;

	color: #fff;

	font-size: 18px;

	font-family: arial;

	margin: 15px 10px;

	display: none;

}



.container .box .text {

	width: 100%;

	height: 25px;

	padding: 5px;

	background-color: #fff;

	margin-top: 10px;

	color: #000;

}



.container .box-container {

	position: absolute;

    bottom: 5.5%;

    right: 4%;

}



.container .box-container .content {

	width: 140px;

	height: 195px;

	margin: 30px 0px;

	display: inline-block;

	cursor: pointer;

	text-align: center;

	position: relative;

	font-family: arial;

}



.container .box-container .blue {

	background-image: url("../images/machine_blue.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}



.container .box-container .blue a img {

    position: absolute;

    transform: translate(-77%, -72%);

    top: 72%;

    left: 77%;

}



.container .box-container .green {

	background-image: url("../images/machine_green.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}



.container .box-container .green a img {

	position: absolute;

    transform: translate(-77%, -72%);

    top: 72%;

    left: 77%;

}



.container .box-container .red {

	background-image: url("../images/machine_red.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}



.container .box-container .red a img {

	position: absolute;

    transform: translate(-77%, -72%);

    top: 72%;

    left: 77%;

}



.container .box-options {

	position: absolute;

	bottom: 5%;

	left: 8%;

}



.container .box-options #opt1,

#opt2,

#opt3 {

	background-image: url("../images/sheep.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}



.container .box-options #opt4 {

	background-image: url("../images/mystery_sheep_1.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	color: white;

	font-family: 'Titan One';



}



.container .box-options .option {

	width: 75px;

	height: 83px;

	margin: 30px 5px;

	display: inline-block;

	cursor: pointer;

	text-align: center;

	position: relative;

	font-family: 'Titan One';

	font-size: 18px;

}



.container .box-options .option p {

	position: absolute;

	transform: translate(-46%, -40%);

	top: 40%;

	left: 46%;

}



.box-btn {

	color: #FFF;

	background-image: url("../images/btn_play2.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	padding: 10px;

	text-align: center;

	margin: 0 auto;

	font-size: 20px;

	font-family: 'Titan One';

	display: flex;

	cursor: pointer;

	position: absolute;

	top: 95%;

	left: 39%;

	transform: translate(-41%, -95%);

	width: 144px;

	height: 76px;

	justify-content: center;

	align-items: center;



}



.box-btn2 {

	color: #FFF;

	background-image: url("../images/btn_play2.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	padding: 10px;

	text-align: center;

	margin: 0 auto;

	font-size: 20px;

	font-family: 'Titan One';

	display: flex;

	cursor: pointer;

	position: absolute;

	top: 95%;

	left: 59%;

	transform: translate(-59%, -95%);

	width: 144px;

	height: 76px;

	justify-content: center;

	align-items: center;

}



.box-btn:hover {

	/*	color: #fff;

	background-color: grey;*/

}



/*NUBES*/

#clouds {

	position: absolute;

	top: 71px;



}



.cloud {

	width: 250px;

	height: 60px;

	background-color: white;

	border-radius: 200px;

	-moz-border-radius: 200px;

	-webkit-border-radius: 200px;

	/*position: relative;*/



	-moz-box-shadow: 9px -7px 0 0 #ffffff inset;

	-webkit-box-shadow: 9px -7px 0 0 #ffffff inset;

	box-shadow: 9px -7px 0 0 #ffffff inset;

}



.cloud:before,

.cloud:after {

	content: '';

	position: absolute;

	background-color: white;

	width: 120px;

	height: 120px;

	top: -75px;



	border-radius: 100px;

	-moz-border-radius: 100px;

	-webkit-border-radius: 100px;



	transform: rotate(30deg);

	-moz-transform: rotate(30deg);

	-webkit-transform: rotate(30deg);



	-moz-box-shadow: 10px 3px 0 0 #ffffff inset;

	;

	-webkit-box-shadow: 10px 3px 0 0 #ffffff inset;

	box-shadow: 10px 3px 0 0 #ffffff inset;

}



.cloud:after {

	width: 90px;

	height: 90px;

	top: -45px;

	right: 25px;



}



.cloud:before {

	left: 25px;

}



.x2 {

	left: 100px;

	top: 120px;

	transform: scale(0.6);

	-webkit-transform: scale(0.6);

	-moz-transform: scale(0.6);

	-o-transform: scale(0.6);



	-webkit-animation: moveclouds 40s linear infinite;

	-moz-animation: moveclouds 40s linear infinite;

	-o-animation: moveclouds 40s linear infinite;

}



.x4 {

	left: -300px;

	transform: scale(0.8);

	-webkit-transform: scale(0.8);

	-moz-transform: scale(0.8);

	-o-transform: scale(0.8);



	-webkit-animation: moveclouds 48s linear infinite;

	-moz-animation: moveclouds 48s linear infinite;

	-o-animation: moveclouds 48s linear infinite;

}



.x5 {

	right: -600px;

	transform: scale(0.6);

	-webkit-transform: scale(0.6);

	-moz-transform: scale(0.6);

	-o-transform: scale(0.6);



	-webkit-animation: moveclouds 35s linear infinite;

	-moz-animation: moveclouds 35s linear infinite;

	-o-animation: moveclouds 35s linear infinite;



}



.x6 {

	left: 100px;

	top: -180px;

	transform: scale(0.2);

	-webkit-transform: scale(0.2);

	-moz-transform: scale(0.2);

	-o-transform: scale(0.2);

	opacity: 0.7;



	-webkit-animation: moveclouds 31s linear infinite;

	-moz-animation: moveclouds 31s linear infinite;

	-o-animation: moveclouds 31s linear infinite;

}





@-webkit-keyframes moveclouds {

	0% {

		margin-left: 600px;

	}



	100% {

		margin-left: -600px;

	}

}



@-moz-keyframes moveclouds {

	0% {

		margin-left: 600px;

	}



	100% {

		margin-left: -600px;

	}

}



@-o-keyframes moveclouds {

	0% {

		margin-left: 600px;

	}



	100% {

		margin-left: -600px;

	}

}



.container .bg-modal {

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0);

	position: absolute;

	top: 0;

	left: 0;

}



.container .position1 {

	bottom: 185px;

	right: 273px;

}



.container .position2 {

	bottom: 185px;

	right: 148px;

}



.container .position3 {

	bottom: 185px;

	right: 23px;

}



.container .position4 {

	width: 356px !important;

	height: 276px !important;

	top: 93px;

	left: 265px;

}



.container .bg-modal .modal {

	background-image: url("../images/history_window.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 226px;

	height: 282px;

	position: absolute;

}



.container .bg-modal .modal .row {

	display: flex;

	align-content: center;

	justify-content: space-evenly;

	color: #fff;

}



.container .bg-modal .modal .row .ob1 {

	background-image: url("../images/sheep_small.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 64px;

	height: 64px;

	color: black;

	position: relative;

	font-family: 'Titan One';

	font-size: 13px;

	display: flex;

	justify-content: center;

	align-items: center;

	position: relative;

	left: 9px;

}



.container .bg-modal .modal .row .ob1 span {

	position: relative;

	bottom: 8px;

}



.container .bg-modal .modal .row .ob2 {

	background-image: url("../images/sheep_naked_small.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 64px;

	height: 64px;

	color: white;

	position: relative;

	font-family: 'Titan One';

	font-size: 13px;

	display: flex;

	justify-content: center;

	align-items: center;

	position: relative;

	right: 9px;

}



.container .bg-modal .modal .row .ob2 span {

	position: relative;

	bottom: 8px;

}

.container .bg-modal .modal .row .ob3 {

	background-image: url("../images/mystery_sheep_1_small.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	width: 64px;

	height: 64px;

	color: black;

	position: relative;

	font-family: 'Titan One';

	font-size: 13px;

	display: flex;

	justify-content: center;

	align-items: center;

	position: relative;

	left: 9px;

}

.container .bg-modal .modal .row .ob3 span {

	position: relative;

	bottom: 8px;

}



.container .bg-modal .modal2 {

	background-image: url("../images/answer_input_window.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	position: absolute;

}



.titulohis {

	position: relative;

	top: 18px;

	left: 16px;

	font-size: 30px;

	font-family: 'Titan One';

	color: white;

	display: inline-flex;

}



.closeModal {

	position: relative;

	bottom: 8px;

	cursor: pointer;

}



.tituloAns {

	position: relative;

	top: 18px;

	left: 16px;

	font-size: 25px;

	font-family: 'Titan One';

	color: white;

	display: inline-flex;

}



.description {

	position: relative;

	top: 18px;

	left: 16px;

	font-size: 23px;

	font-family: 'Titan One';

	color: black;

	display: inline-flex;

	text-align: right;

	width: 313px;



}



.row-content {

	position: relative;

	top: 24px;

	left: 16px;

	font-size: 13px;

	font-family: 'Titan One';

	width: 191px;

	height: 170px;

	overflow: auto;

}



.inputenv {

	display: inline-flex;

	position: relative;

	top: 30px;

	width: 285px;

	left: 35px;

}



.cajaresultado {

	width: 141px;

	height: 56px;

	position: relative;

	top: 10px;

	border: 8px solid #fcbf0f;

	font-family: 'Titan One';

	text-align: center;

	font-size: 37px;

	color: #39205a;

	letter-spacing: 12px;

}



.btnenviar {

    background-image: url(../images/btn_submit.png);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    width: 144px;

    height: 76px;

    font-family: 'Titan One';

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

}

.ovejacae1{

	background-image: url(../images/oveja0.png);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: relative;

    bottom: -5px;

    width: 80px;

    height: 80px;

    left: 30px;

}

.ovejacae2{

	background-image: url(../images/oveja0.png);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: relative;

    bottom: -5px;

    width: 80px;

    height: 80px;

    left: 30px;

}

.ovejacae3{

	background-image: url(../images/oveja0.png);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: relative;

    bottom: -5px;

    width: 80px;

    height: 80px;

    left: 30px;

}









.bg-modal4 {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: #000000a6;

	display: flex;

	/*flex-direction: row;*/

	align-items: center;

	justify-content: center;

	z-index: 9;

}

.bg-modal3 {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 600px;

	background-color: #000000;

	display: flex;

	/*flex-direction: row;*/

	align-items: center;

	justify-content: center;

	z-index: 9;

}

.modal4 {

    width: 576px;

    height: 240px;

	background-image: url(../images/return_to_menu_window.png);

	background-position: center;

    background-repeat: no-repeat;

	display: flex;

    justify-content: center;

    align-items: center;

}





.modal2 {

	width: 85%;

	height: 95%;

}



.myyVideo {

	width: 100%;

	border-radius: 10px;

}



#myVideo {

	position: fixed;

	right: 0;

	bottom: 0;

	min-width: 100%;

	min-height: 100%;

}

#botonesMenu {

	position: fixed;

	right: 0;

	bottom: 0;

	min-width: 100%;

	min-height: 100%;

}





 .Si{

    background-image: url(../images/btn_yes.png);

    width: 94px;

    height: 94px;

    position: absolute;

    top: 317px;

    left: 200px;

    padding: 20px;

    text-align: center;

    z-index: 6;

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    font-family: 'Titan One';

    font-size: 33px;

}

.No{

    background-image: url(../images/btn_no.png);

    width: 94px;

    height: 94px;

    position: absolute;

    top: 317px;

    right: 200px;

    padding: 20px;

    text-align: center;

    z-index: 6;

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    font-family: 'Titan One';

    font-size: 33px;

	

 }

.modal4Menu{

    width: 70px;

    display: flex;

    text-align: center;

    color: white;

    line-height: 17px;

    font-family: 'Titan One';

    font-size: 30px;

    position: relative;

    bottom: 50px;

    left: 153px;

}



.modal4Pregunta{

	width: 334px;

    display: flex;

    text-align: center;

    color: black;

    line-height: 17px;

    font-family: 'Titan One';

    font-size: 20px;

    position: relative;

    right: 30px;

    top: 11px;

}