@charset "utf-8";
/*
*  CSS para el sitio www.jjcreaciones.com
*  Manejo de Efectos en la web 
*  Copyright 2014, Autor: Jorge De Freitas
*/
#rotador{
	position:relative;
}
.panel{
	height:0px;
    position:relative;
    width:96%;
	margin-left:20px; 
	overflow:hidden;
	-ms-transition: all 700ms ease-out;
	-o-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -moz-transition:all 700ms ease-out;
    transition: all 700ms ease-out;

}
#portada{
	background-color:#fff;
	position:absolute;
    width:96%;
    height:450px;
	margin-left:20px;
	-ms-transition: all 700ms ease-out;
	-o-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -moz-transition:all 700ms ease-out;
    transition: all 700ms ease-out;
}
#portada:hover{
	background: linear-gradient( #fff , #fff, #b7fd99 ); 
	box-shadow: 0px 0px 30px #000;
	border:5px solid #ccc;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-o-transform: translate(-12px,-20px) scale(1.1);
	-ms-transform: translate(-12px,-20px) scale(1.1);
	-moz-transform: translate(-12px,-20px) scale(1.1);
	-webkit-transform: translate(-12px,-20px) scale(1.1);
	transform: translate(-12px,-20px) scale(1.1);
	padding:10px;
}

#pasos4{
	background-color:#fff;
}
#pasos4:hover{
	background: linear-gradient( #fff , #fff, #b7fd99 ); 
	box-shadow: 0px 0px 30px #000;
	border:5px solid #ccc;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px; 
	-o-transform: translate(-12px,-20px) scale(1.1);
	-ms-transform: translate(-12px,-20px) scale(1.1);
	-moz-transform: translate(-12px,-20px) scale(1.1);
	-webkit-transform: translate(-12px,-20px) scale(1.1);
	transform: translate(-12px,-20px) scale(1.1);
	padding:10px;
}
.logoefecto{
	display:none;
}

#nosotros{
	background-color:#fff; 
}
#nosotros:hover{
	background: linear-gradient( #fff , #fff, #b7fd99 );
	box-shadow: 0px 0px 30px #000;
	border:5px solid #ccc;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px; 
	-o-transform: translate(-12px,-20px) scale(1.1);
	-ms-transform: translate(-12px,-20px) scale(1.1);
	-moz-transform: translate(-12px,-20px) scale(1.1);
	-webkit-transform: translate(-12px,-20px) scale(1.1);
	transform: translate(-12px,-20px) scale(1.1);
	padding:10px;
}
#contacto{
	background-color:#fff; 
}
#contacto:hover{
	background: linear-gradient( #fff , #fff, #b7fd99 );
	box-shadow: 0px 0px 30px #000;
	border:5px solid #ccc;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-o-transform: translate(-12px,-20px) scale(1.1);
	-ms-transform: translate(-12px,-20px) scale(1.1);
	-moz-transform: translate(-12px,-20px) scale(1.1);
	-webkit-transform: translate(-12px,-20px) scale(1.1);
	transform: translate(-12px,-20px) scale(1.1);
	padding:10px;
}
 
.panel:target{
    height:450px;
}