/* Efectos basicos /. */

.mal_tiembla {
	transition: all 200ms ease;
	animation: mal_tiembla 125ms ease-in-out infinite alternate;
}
@keyframes mal_tiembla {
 0% {
transform:rotateZ(-5deg);
}
 50% {
transform:rotateZ( 0deg) scale(.8);
border-color: red;
}
 100% {
transform:rotateZ( 5deg);
}
}
.mal_cabeza {
	transition: all 250ms ease;
	animation: mal_cabeza 250ms ease-in-out infinite alternate;
}
@keyframes mal_cabeza {
 0% {
 margin-left:0px;
}
 50% {
 margin-left:20px;
 border-color: red;
}
 100% {
 margin-left:-20px;
}
}
.bien_cabeza {
	transition: all 250ms ease;
	animation: bien_cabeza 250ms ease-in-out infinite alternate;
}
@keyframes bien_cabeza {
 0% {
 margin-top:0px;
}
 50% {
 margin-top:20px;
 border-color: green;
}
 100% {
 margin-top:-20px;
}
}
.mal_cabeza_R {
	transition: all 250ms ease;
	animation: mal_cabeza_R 250ms ease-in-out infinite alternate;
}
@keyframes mal_cabeza_R {
 0% {
 left:0px;
}
 50% {
 left:20px;
}
 100% {
 left:-20px;
 border-color: red;
}
}
.bien_cabeza_R {
	transition: all 250ms ease;
	animation: bien_cabeza_R 250ms ease-in-out infinite alternate;
}
@keyframes bien_cabeza_R {
 0% {
 top:0px;
}
 50% {
 top:20px;
}
 100% {
 top:-20px;
 border-color: green;
}
}

/* Escala */

.ani_sc{
	transition:all 300ms ease;
}

.ani_sc:hover{
	transform:scale(1.1);
}
.ani_sc:active{
	transform:scale(0.9);
}


/* Transicion en drag revert */
.animation {
	transition: all 250ms ease;
}
/* Botonera */
  
#botonera:before {
	background-color: transparent!important;
}
#botonera div {
	border-bottom: 6px solid #89380f;
}

/* Escala infinite*/
.agranda {
	transition: all 250ms ease;
	animation: agranda 800ms ease-out infinite alternate;
	cursor: pointer;
}

@keyframes agranda{ 
	 from {
	 	transform:scale(1);
	}  
	 to {
	 	transform:scale(1.15);
	 	-webkit-box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
		-moz-box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
		box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
	}
}
 
.off {
	visibility:hidden;	
}

/* ./ ***************************************************************** */

 
/* codigo de video en reemplazo de sg-video...etc */ 
.videobox {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 100%;
	z-index:100;
}
.videobox video {
    position: relative;
    top: 175px;
    left: 335px;
    width: 685px;
    height: 372px;
    background-color: #272E2B;
}
.cartel {
	position: absolute;
	cursor:pointer;
	margin-left: auto;
	margin-right: auto;
	left:-25px;
	right:0;
	text-align:center;
	min-width: 200px;
	max-width: 760px;
	z-index:101;
}
.titcartel {
	color: rgb(255, 255, 255);
	font-size: 1em;
	padding: 10px;
	border-radius: 10px;
	box-shadow: rgb(0, 0, 0) 0px 0px 10px;
	background: rgb(19, 26, 45);
}
.titcartel h2{
	padding: 7px 10px 11px;
	border-radius: 7px;
	border: 3px dashed rgb(243, 236, 130);	
}
/* Finaliza codigo de video */

.bien1 {
    position: absolute;
    top: 484px;
    left: 99px;
    background-color: white;
    width: 271px;
    height: 213px;
    /* opacity: 0; */
    transition: all 300ms ease;
    border-radius: 15px;
}

.bien1>div {
    pointer-events: none;
}


.bien1 div {
    width: 110px;
    height: 60px;
    font-size: 30px;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    display: inline-block;
}

.bien1 img {
    width: 80px;
}
.bien2 {
    position: absolute;
    top: 484px;
    left: 418px;
    background-color: white;
    width: 281px;
    height: 213px;
    /* opacity: 0; */
    font-size: 30px;
    border-radius: 15px;
    transition: all 300ms ease;
}
.bien3 {
    position: absolute;
    top: 484px;
    left: 748px;
    background-color: white;
    width: 281px;
    height: 213px;
    /* opacity: 0; */
    transition: all 300ms ease;
    border-radius: 15px;
}



.bien3 div {
    width: 110px;
    height: 60px;
    font-size: 30px;
    position: relative;
    z-index: 13;
    background-color: rgba(255, 255, 255, 0.7);
    display: inline-block;
}

.bien3 img {
    width: 80px; 
}
.encima{
    opacity: 0.3;
	transform:scale(1.2);
}

img.drag {
    position: absolute;
    right: 100px;
    z-index: 1;
    cursor: pointer;
}

.bien2 div {
    width: 110px;
    height: 60px;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    display: inline-block;
}

.bien2 img {
    width: 80px;
}

.psc3 {
    top: 624px;
    opacity: 0;
}

.psc2 {
    top: 440px;
    opacity: 0;
}

.psc1 {
    top: 250px;
    opacity: 0;
}

.psc0 {
    top: 317px;
    opacity: 0;
}

.st1 {
    font-size: 40px;
    text-align: center;
    color: #C5C5C5;
    top: 506px;
    left: 237px;
    width: 182px;
    height: 141px;
    border-radius: 15px;
}

.bien1.st1 p {
    position: absolute;
    top: 0px;
    font-size: 31px;
}
.st2 {
    font-size: 40px;
    text-align: center;
    color: #C5C5C5;
    top: 506px;
    left: 631px;
    width: 182px;
    height: 141px;
    border-radius: 15px;
}

.bien1.st1 img {
    margin-top: 33px;
    width: 171px;
    margin-left: -29px;
}
.bien2.st2 img {
    margin-top: 33px;
    width: 171px;
    margin-left: -29px;
}
.bien3.st3 img {
    margin-top: 33px;
    width: 171px;
    margin-left: -29px;
}
.bien2.st2 p {
    position: absolute;
    top: 0px;
    font-size: 29px;
}
.st3 {
    font-size: 40px;
    text-align: center;
    color: #C5C5C5;
    top: 506px;
    left: 1000px;
    width: 182px;
    height: 141px;
    border-radius: 15px;
}
.bien3.st3 p {
    position: absolute;
    top: 3px;
    z-index: 1;
    font-size: 30px;
}

.psc5 {
    top: 230px;
    left: 330px;
    border-radius: 14px;
}
.psc6 {
    top: 230px;
    left: 730px;
    border-radius: 14px;
}
.psc7 {
    top: 230px;
    left: 1110px;
    border-radius: 14px;
}

.imagenesgne {
    position: absolute;
    top: 230px;
    left: 270px;
}

.textose {
    position: absolute;
    top: 451px;
    left: 60px;
    width: 1147px;
    background-color: #EB7F26;
    color: white;
    border-radius: 15px;
    padding: 8px 44px;
    font-size: 32px;
}

.siguiente {
    position: absolute;
    top: 446px;
    right: 100px;
    cursor: pointer!important;
}

textarea.info {
    position: absolute;
    top: 520px;
    left: 60px;
    width: 1178px;
    height: 88px;
    border-radius: 13px;
    resize: none;
    font-size: 60px;
    text-align: center;
    padding: 30px;
}

.fraciones {
    position: absolute;
    top: 240px;
    left: 350px;
}

.fraciones img {
    position: absolute;
    display: none;
}

.pesonajes {
    position: absolute;
    top: 357px;
    left: 260px;
}

.pesonajes img {
    position: relative;
    cursor: pointer;
}

img.m1 {
    left: 0px;
}
img.m2 {
    left: 150px;
}
img.m3 {
    left: 300px;
}
img.m4 {
    left: 450px;
}
img.m5 {
    left: 582px;
}
img.m6 {
    left: 730px;
}

input.inpG {
    position: absolute;
    width: 50px;
    font-size: 30px;
    text-align: center;
    border-radius: 14px;
    border: 3px dashed black;
    color: black;
}

.contiene {
    position: absolute;
    height: 168px;
    width: 114px;
    background-color: rebeccapurple;
}

.contiene.ps1 {
    top: 277px;
    left: 299px;
}

.contiene.ps1 div {
    float: left;
    width: 31.5%;
    border: 1px solid white;
    height: 11.5%;
}

.contiene.ps1 div.activado {
    background-color: rgba(255, 255, 255, 0.33);
}

.contiene.ps1 div:hover {
    background-color: white;
    cursor: pointer;
}



.contiene.ps2 {
    top: 277px;
    left: 698px;
    background-color: #993333;
}

.contiene.ps2 div {
    float: left;
    width: 47.5%;
    border: 1px solid white;
    height: 32.5%;
}

.contiene.ps2 div.activado {
    background-color: rgba(255, 255, 255, 0.33);
}

.contiene.ps2 div:hover {
    background-color: white;
    cursor: pointer;
}



.contiene.ps3 {
    top: 277px;
    left: 1051px;
    background-color: #5F9933;
}

.contiene.ps3 div {
    float: left;
    width: 31.5%;
    border: 1px solid white;
    height: 24.5%;
}

.contiene.ps3 div.activado {
    background-color: rgba(255, 255, 255, 0.58);
}

.contiene.ps3 div:hover {
    background-color: white;
    cursor: pointer;
}

.in_ps1 {
    top: 571px;
    left: 290px;
}
.in_ps2 {
    top: 624px;
    left: 290px;
}
.in_ps3 {
    top: 571px;
    left: 674px;
}
.in_ps4 {
    top: 624px;
    left: 674px;
}
.in_ps5 {
    top: 571px;
    left: 1048px;
}
.in_ps6 {
    top: 624px;
    left: 1049px;
}


.contiene.ps4 {
    top: 277px;
    left: 299px;
    background-color: #8D9006;
}

.contiene.ps4 div {
    float: left;
    width: 98.5%;
    border: 1px solid white;
    height: 19%;
}

.contiene.ps4 div.activado {
    background-color: rgba(255, 255, 255, 0.33);
}

.contiene.ps4 div:hover {
    background-color: white;
    cursor: pointer;
}




.contiene.ps5 {
    top: 277px;
    left: 697px;
}

.contiene.ps5 div {
    float: left;
    width: 48%;
    border: 1px solid white;
    height: 19%;
}

.contiene.ps5 div.activado {
    background-color: rgba(255, 255, 255, 0.33);
}

.contiene.ps5 div:hover {
    background-color: white;
    cursor: pointer;
}




.contiene.ps6 {
    top: 277px;
    left: 1050px;
    background-color: #993333;
}

.contiene.ps6 div {
    float: left;
    width: 23%;
    border: 1px solid white;
    height: 19%;
}

.contiene.ps6 div.activado {
    background-color: rgba(255, 255, 255, 0.33);
}

.contiene.ps6 div:hover {
    background-color: white;
    cursor: pointer;
}



.img1 {
	position: absolute;
	left: 55px;
	top: -6px;
}
.img2 {
	position: absolute;
	left: 175px;
	top: -4px;
}
.img3 {
	position: absolute;
	left: 176px;
	top: 33px;
}
.img4 {
	position: absolute;
	left: 176px;
	top: 132px;
}
.img5 {
	position: absolute;
	left: 176px; 
	top: 178px;
}
.img6 {
	position: absolute;
	left: 130px;
	top: 178px;
}
.img7 {
	position: absolute;
	left: 19px;
	top: 177px;
}
.img8 {
	position: absolute;
	left: -6px;
	top: 152px;
}
.img9 {
	position: absolute;
	left: -5px; 
	top: 39px;
}


.pastel1 {
    position: absolute;
    top: 293px;
    left: 1080px;
    transform: scale(0.5);
    pointer-events: none;
}
.pastel2 {
    position: absolute;
    top: 254px;
    left: 1099px;
    transform: scale(0.25);
    pointer-events: none;
}
.pastel3 {
    position: absolute;
    top: 428px;
    left: 1103px;
    transform: scale(0.35);
    pointer-events: none;
}
.pastel4 {
    position: absolute;
    top: 593px;
    left: 1110px;
    pointer-events: none;
    transform: scale(0.5);
}
.imgp2-1 {
	position: absolute;
	left: 88px;
	top: 2px;
}
.imgp2-2 {
	position: absolute;
	left: 293px;
	top: 1px;
}
.imgp2-3 {
	position: absolute;
	left: 290px;
	top: 84px;
}
.imgp2-4 {
	position: absolute;
	left: 288px;
	top: 288px;
}
.imgp2-5 {
	position: absolute;
	left: 85px;
	top: 290px;
}
.imgp2-6 {
	position: absolute;
	left: 2px;
	top: 87px;
}
.imgp3-1 {
	position: absolute;
	left: 12px;
	top: -1px;
}
.imgp3-2 {
	position: absolute;
	left: 219px;
	top: 0px;
}
.imgp3-3 {
	position: absolute;
	left: 12px;
	top: 205px;
}
.imgp3-4 {
	position: absolute;
	left: 219px;
	top: 206px;
}
.imgp4-1 {
	position: absolute;
	left: 7px;
	top: 43px;
}
.imgp4-2 {
	position: absolute;
	left: 48px;
	top: 1px;
}
.imgp4-3 {
	position: absolute;
	left: 155px;
	top: 2px;
}
.imgp4-4 {
	position: absolute;
	left: 155px;
	top: 49px;
}
.imgp4-5 {
	position: absolute;
	left: 7px;
	top: 149px;
}
.imgp4-6 {
	position: absolute;
	left: 52px;
	top: 151px;
}
.imgp4-7 {
	position: absolute;
	left: 154px;
	top: 151px;
}
.imgp4-8 {
	position: absolute;
	left: 154px;
	top: 149px;
}