.imagencita:hover{
border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 15px 15px #ec731e;
-webkit-box-shadow: 0px 0px 15px 15px #ec731e;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);



}

/*
button{
padding: 10px 35px;
overflow:hidden;
}

button:before {
font-family: FontAwesome;
content:"\f07a";
position: absolute;
top: 11px;
left: -30px;
transition: all 200ms ease;
}

button:hover:before {
left: 7px;
}

*/

.boton3Dfondito {

background: url('https://i.pinimg.com/originals/30/5b/89/305b89431bdaa640d0a1107003e22c55.jpg');
border-radius: 5px;
padding: 10px 35px;
overflow:hidden;


}




.boton3Dfondito:hover {

background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1zt15KLnC7TbwNGzGA6PQsBi9LWBil12xaqyfrDASui3c1Jv1');
border-radius: 5px;
color: #0000FF;
padding: 10px 35px;
overflow:hidden;


}


.boton3Dfondazos {
height: 100px;
background: url('https://i.pinimg.com/originals/30/5b/89/305b89431bdaa640d0a1107003e22c55.jpg');
border-radius: 5px;
padding: 10px 35px;
overflow:hidden;
font-size: 1.5em;
font-weight: bold;
transition: all .6s;



}




.boton3Dfondazos:hover {

height: 100px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1zt15KLnC7TbwNGzGA6PQsBi9LWBil12xaqyfrDASui3c1Jv1');
border-radius: 5px;
color: #0000FF;
padding: 10px 25px;
overflow:hidden;
font-size: 1.5em;
font-weight: bold;
transition: all .6s;
opacity: 0.8;


}




.boton3Dpersonaje {
height: 100px;
background: url('https://ies1-caba.infd.edu.ar/sitio/wp-content/uploads/2019/10/logo_Alicia.png');
background-size: cover;
border-radius: 5px;
padding: 10px 35px;
overflow:hidden;
font-size: 1.5em;
font-weight: bold;
color: transparent;
transition: all .6s;



}




.boton3Dpersonaje:hover {

height: 100px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1zt15KLnC7TbwNGzGA6PQsBi9LWBil12xaqyfrDASui3c1Jv1');
border-radius: 5px;
color: #0000FF;
padding: 10px 25px;
overflow:hidden;
font-size: 1.5em;
font-weight: bold;
transition: all .6s;
opacity: 0.8;


}





.boton3Dcorto {

background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaTWbWhdhZILpU7E2tFRKtRcWNh06DyEQ9iN9VD7ro3s2_CrJPXw');
border-radius: 5px;
padding: 10px 25px;
overflow:hidden;
color: #ffffff;

}


.boton3Dcorto:hover {

background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5CEwiDEjBy8vZGnmrG-4136FHfzHptIFUGquOsPMXSswAWs09');
border-radius: 5px;
color: #0000FF;
padding: 10px 35px;
overflow:hidden;


}


.boton3Dmedio {

background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaTWbWhdhZILpU7E2tFRKtRcWNh06DyEQ9iN9VD7ro3s2_CrJPXw');
border-radius: 7px;
padding: 10px 35px;
overflow:hidden;
color: #ffffff;

}

.boton3Dmedio:hover {

background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5CEwiDEjBy8vZGnmrG-4136FHfzHptIFUGquOsPMXSswAWs09');
border-radius: 7px;
color: #0000FF;
padding: 10px 35px;
overflow:hidden;

}

/*
.boton3Dmedio:before {

font-family: FontAwesome;
content:"\f07a";
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

.boton3Dcorto:before {

font-family: FontAwesome;
content:"\f07a";
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

.boton3Dcorto:hover:before {
left: 7px;
width: 100%;
}

.boton3Dmedio:hover:before {
left: 7px;
width: 100%;
}

*/

.boton3D { 
	display: inline-block; 
	padding: 20px 40px;
	color: white;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	vertical-align: middle;
	font-family: 'Rubik One', sans-serif;
	text-decoration: none;
	font-size: 4vw;
	transition: all .5s;
	background-color: #3498db;
        
	&::before {
    @extend %test;
		bottom: -15px;
		height: 15px;
		width: 100%;
		left: 8px;
		transform: skewX(45deg);
		background-color: darken(#3498db, 20%);
                
	}

	&::after {
		@extend %test;
		right: -15px;
		height: 100%;
		width: 15px;
		bottom: -8px;
		transform: skewY(45deg);
		background-color: darken(#3498db, 30%);
	}

	&:active {
		margin-left: 10px;
		margin-top: 10px;
		&::before {
			bottom: -5px;
			height: 5px;
			left: 3px;
		}
		
    &::after {
			right: -5px;
			width: 5px;
			bottom: -3px;
		}	
	}
}



/*---- Botón 3D con fondo imagen de la web------------------*/



.boton3Dfondazo { 
	display: inline-block; 
	padding: 20px 40px;
	color: white;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	vertical-align: middle;
	font-family: 'Rubik One', sans-serif;
	text-decoration: none;
	font-size: 4vw;
	transition: all .5s;
	background-color: #3498db;
        background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaTWbWhdhZILpU7E2tFRKtRcWNh06DyEQ9iN9VD7ro3s2_CrJPXw');

	&::before {
    @extend %test;
		bottom: -15px;
		height: 15px;
		width: 100%;
		left: 8px;
		transform: skewX(45deg);
		background-color: darken(#3498db, 20%);
                background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5CEwiDEjBy8vZGnmrG-4136FHfzHptIFUGquOsPMXSswAWs09');
	}

	&::after {
		@extend %test;
		right: -15px;
		height: 100%;
		width: 15px;
		bottom: -8px;
		transform: skewY(45deg);
		background-color: darken(#3498db, 30%);
                background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5CEwiDEjBy8vZGnmrG-4136FHfzHptIFUGquOsPMXSswAWs09');
	}

	&:active {
		margin-left: 10px;
		margin-top: 10px;
                opacity: 0.8; 
		&::before {
			bottom: -5px;
			height: 5px;
			left: 3px;
		}
		
    &::after {
			right: -5px;
			width: 5px;
			bottom: -3px;
		}	
	}
}




/*---------------Animación CSS -------------------------------------*/

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

.animate {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/*---- FIN Animación CSS-----------------------------------------------*/



//http://www.colourlovers.com/palette/694737/Thought_Provoking
@import 'https://fonts.googleapis.com/css?family=Permanent+Marker';
$width: 180px;
$height: 90px;
$depth: 90px;
$rotY: 15deg;

$yellow: #ECD078;
$orange: #D95B43;
$red: #C02942;
$purple: #542437;
$blue: #53777A;
$green: #5faf62;

/*
html, body {
	background: $yellow;
	color: mix( $yellow, white, 30% );
	font-size: 1.1em;
	font-family: 'Permanent Marker', cursive;
}

*/

.girador {
	position: relative;
	width: 400px;
	height: 300px;
	margin: auto;
	margin-top: 150px;
	perspective: 800px;
	perspective-origin: 10% -10%;
}

.bg {
	width: 100%;
	height: 100%;
	position: relative;
	background: $blue;
	border-radius: 5px;
	transform: rotateY( -10deg );
	box-shadow: 20px -5px 30px rgba(0,0,0,0.4);
}

.contenido {
	position: absolute;
	right: -40px;
	top: 20px;
	width: 350px;
	height: 300px;
	background: lighten( $orange, 5% );
	border-radius: 50%;
	text-align: center;
	transform: perspective( 800px ) translateZ( 20px );
	box-shadow: 10px -5px 20px rgba(0,0,0,0.2);

	
	p {
		position: relative;
		margin: auto;
		top: 30%;
		width: 60%;
	}
}

div.btn-girador {
	position: absolute;
	top: 50px;
	left: -40px;
}
div.cube {
	height: $height;
	width: $width;
	transform: rotateY( $rotY );
	position: relative;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	font-size: 1.5em;
	
	.msg {
		position: absolute;
	}
	
	.success {
		background: $green;
		display: none;
	}
	
	.fail {
		backgrond: $red;
		display: block;
	}
	
	&.show-success {
		.back {
			background: $green;
		}
		
		.success {
			display: block;
		}

		.fail {
			display: none;
		}
	}
}

.cube-ani {
	animation:
			press .5s ease,
			spin .35s ease .5s,
			show-top 1.5s ease .85s;
}

.spin {
	animation: spin-up 1s ease-out 0s 1;
}

.face {
	position: absolute;
	height: $height;
	width: $depth;
	backface-visibility: true;
	background: darken( $orange, 5% );
}

.face.front {
	height: $height;
	width: $width !important;
	background: $orange;
	transform: translateZ( $depth / 2 );
}

.face.back {
	height: $height;
	width: $width !important;
	background: $red;
	transform: rotateX( -180deg ) translateZ( $depth / 2 );
}

.face.text {
	display: flex;
	align-items: center;
	justify-content: center;
}

.right {
	transform: rotateY( 90deg )  translateZ( $width / 4 * 3 ) ;
}

.left {
	transform: rotateY( -90deg ) translateZ( $width / 4 );
}

.top {
	width: $width;
	height: $depth;
	background: lighten( $orange, 3% );
	transform: rotateX( 90deg ) translateZ( $height / 2 );
}

.bottom {
	width: $width;
	height: $depth;
	transform: rotateX( -90deg ) translateZ( $height / 2 );
}

@keyframes press {
    0% {transform: rotateY( $rotY ) translateZ( 0px );}
    50% {transform: rotateY( $rotY ) translateZ( -25px );}
	 100% {transform: rotateY( $rotY ) translateZ( 0px );}
}

@keyframes spin {
    from {transform: rotateY( $rotY ) rotateX( 0deg );}
    to {transform: rotateY( $rotY ) rotateX( 360deg );}
}

@keyframes show-top {
	0% {transform: rotateY( $rotY ) rotateX( 0deg );}
	20% {transform: rotateY( $rotY ) rotateX( -190deg );}
	25% {transform: rotateY( $rotY ) rotateX( -180deg );}
	80% {transform: rotateY( $rotY ) rotateX( -180deg );}
	100% {transform: rotateY( $rotY ) rotateX( 0deg );}
}

@keyframes spin-up {
	0% {  transform: translateY( $height - 20px ) rotateY( 0deg ) scale3d( 0, 0, 0 ); }
	70% {transform: translateY( -20px ) rotateY( 1024deg ) scale3d( 1, 1, 1 ); }
	100% {transform: translateY( 0px ) rotateY( 1024deg + $rotY * 5 ) scale3d( 1, 1, 1 ); }
}



@-webkit-keyframes girando {
			from { -webkit-transform: rotateY(0deg);    }
			to   { -webkit-transform: rotateY(-360deg); }
		}
		@-moz-keyframes girando {
			from { -moz-transform: rotateY(0deg);    }
			to   { -moz-transform: rotateY(-360deg); }
		}
		#menu-contenedor {
		    margin: 10px auto;
		    -webkit-perspective: 150px;
		    -moz-perspective: 150px;
		    perspective: 150px;
		}
			#girando {
				margin: 10px auto;
				width: 150px;
				padding: 10px;
				height: 20px;
				background-color: rgba(0,0,0,0.2);
				border: 1px solid #666;
				color: #fff;
				
			    -webkit-animation-name: girando;
				-moz-animation-name: girando;
				animation-name: girando;
				-webkit-animation-timing-function: linear;
				-moz-animation-timing-function: linear;
				animation-timing-function: linear;
				-webkit-animation-iteration-count: infinite;
				-moz-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				-webkit-animation-duration: 3s;
				-moz-animation-duration: 3s;
				animation-duration: 3s;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				transform-style: preserve-3d;

			  }





.botonRobot {
  background: url(http://cead-labremotos.fi.uba.ar/imagenes/chatbot2.png)  no-repeat center center, #764783 ;
  background-size: 40%; 
  height: 100px;  
  width: 100px; 
  display: table;
  text-align: center;
  color: #0000aa;
  border-radius: 100%;
  position: fixed;
  font-weight: bold; 
  right: 140px; 
  top: 350px;
  cursor: pointer;
  box-shadow: inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
}


.botonRobot:active {
  box-shadow: inset 0 5px 30px rgba(0,0,0,.2);
  background-size: 55%; 
}