@charset "utf-8";
/* CSS Document */

.btnCreative{
	background:url(../img/btn_cc.png) no-repeat;
	background-size: 100%;
  width: 80px;
  height: 84px;
  position: absolute;
  bottom: 24px;
  right: 24px;
	cursor:pointer;
}

.btnCreative:active{
	background:url(../img/btn_ccoff.png) no-repeat;
	background-size: 100%;
  width: 80px;
  height: 84px;
  position: absolute;
  bottom: 22px;
  right: 22px;
}

.creative{
	  background: #74AED1;
  border: solid #042C49 2px;
  border-radius: 5%;
  width: 800px;
  height: 233px;
}

.dropCuadrado{
	width: 115px;
  height: 115px;
  background: transparent;
  position: absolute;
  top: 429px;
  right: 86px;
}

.dropParalelogramo{
	  width: 74px;
  height: 109px;
  -webkit-transform: skew(-13deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
  transform: skew(20deg);
	background: transparent;
}

.dropRombo{
	width: 110px;
  height: 110px;
    -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dropTrapecio{
	border-bottom: 100px solid transparent;
  border-left: 24px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 130px;
  shape-outside:polygon(30px 30px, 60px 30px, 45px 45px);
}

.resplandorExterior
{
	animation-duration: 1s;
  	animation-name: sombra;
 	animation-iteration-count: infinite;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: sombra;
	-webkit-animation-iteration-count: infinite;
	
	-moz-box-shadow: 0px 0px 30px #ffffff;
	-webkit-box-shadow: 0px 0px 30px #ffffff;
	box-shadow: 0px 0px 30px 13px #0040FF;
	padding: 0px 0px 0px 0px;
}

    @keyframes sombra{
      0% {box-shadow: 0px 0px 5px #4C0C01}
      50% {box-shadow: 0px 0px 40px #4C0C01}
      100% {box-shadow: 0px 0px 5px #4C0C01}
    }
    @-moz-keyframes sombra{
      0% {box-shadow: 0px 0px 5px #4C0C01}
      50% {box-shadow: 0px 0px 40px #4C0C01}
      100% {box-shadow: 0px 0px 5px #4C0C01}
    }
    @-webkit-keyframes sombra{
      0% {box-shadow: 0px 0px 5px #4C0C01}
      50% {box-shadow: 0px 0px 40px #4C0C01}
      100% {box-shadow: 0px 0px 5px #4C0C01}
    }
	

	

#btnIngreso{
	background:url(../img/M_G04_U03_L04_01_01_BTNINGRESAR.png) no-repeat;
	  background-size: 100%;
	  background-position-y: 2px;
  width: 174px;
  height: 75px;
  position: absolute;
  top: 455px;
  left: 710px;
  cursor: pointer;
  border-radius: 17px;
	display:none;
}

#cuadrado1{
  width: 106px;
  height: 106px;
  background: #895B14;
  position: absolute;
  bottom: 31px;
  left: 215px;
  cursor:pointer;	
}


#cuadrado2{
  width: 100px;
  height: 100px;
  background: #AFA122;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
  position: absolute;
  bottom: 31px;
  right: 555px;
  cursor:pointer;  
}


#paralelogramo1{
	width: 97px;
  height: 69px;
  -webkit-transform: skew(-12deg,25deg);
  -moz-transform: skew(-12deg,25deg);
  -o-transform: skew(-12deg,25deg);
  transform: skew(-12deg,25deg);
  background: #009938;
  position: absolute;
  bottom: 52px;
  right: 1195px;
  cursor:pointer;
}


#paralelogramo2{
	width: 138px;
  height: 71px;
  -webkit-transform: skew(11deg);
  -moz-transform: skew(11deg);
  -o-transform: skew(11deg);
  transform: skew(11deg);
  background: #6162A4;
  position: absolute;
  bottom: 52px;
  right: 84px;
  cursor:pointer;
}


#puerta{
	background:#EB7F26;
	width: 282px;
  height: 273px;
  position: absolute;
  top: 346px;
  left: 570px;	
  display:none;	
}


#rombo1{
  background:url(../img/M_G04_U03_L04_01_01_ROMBO1.png) no-repeat;
  background-size: 100%;
	width: 152px;
  height: 90px;
  position: absolute;
  bottom: 25px;
  left: 350px;
  cursor: pointer;
}


#rombo2{
  background:url(../img/M_G04_U03_L04_01_01_ROMBO2.png) no-repeat;
  background-size: 100%;
	width: 120px;
  height: 100px;
  position: absolute;
  bottom: 33px;
  right: 250px;
  cursor: pointer;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}



#trapecio1{
	border-bottom: 100px solid #008337;
  border-left: 26px solid transparent;
  border-right: 23px solid transparent;
  height: 0px;
  width: 91px;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  bottom: 37px;
  left: 525px;
  cursor:pointer;
}



#trapecio2{
	border-bottom: 95px solid #BF1947;
  border-left: 26px solid transparent;
  border-right: 23px solid transparent;
  height: 0px;
  width: 102px;
  position: absolute;
  bottom: 37px;
  right: 360px;
  cursor:pointer;
}