@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{
	display:none;
	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;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#portada{
	position:absolute;
    width:96%;
    height:450px;
	text-align : justify;
	margin-left:20px;
	overflow-Y:auto;
	overflow-X: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;
	border:0px;
}
#portada:hover{
	background: linear-gradient( #fff , #fff, #64a116 ); 
	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,-92px) scale(1.4);
	-ms-transform: translate(-12px,-92px) scale(1.4);
	-moz-transform: translate(-12px,-92px) scale(1.4);
	-webkit-transform: translate(-12px,-92px) scale(1.4);
	transform: translate(-12px,-92px) scale(1.4);
	padding:15px;
	text-align : justify;
	-moz-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

#pasos4{
	background-color:#fff;
	border:0px;
}
#pasos4:hover{
	background: linear-gradient( #fff , #fff, #64a116 ); 
	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,-92px) scale(1.4);
	-ms-transform: translate(-12px,-92px) scale(1.4);
	-moz-transform: translate(-12px,-92px) scale(1.4);
	-webkit-transform: translate(-12px,-92px) scale(1.4);
	transform: translate(-12px,-92px) scale(1.4);
	padding:15px;
	-moz-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.logoefecto{
	margin-left:15px;
	height:0px;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
    -moz-transition:all 1s ease-out;
    transition: all 1s ease-out;
}
#pasos4:hover .logoefecto {
	height:94px;
	-moz-transition-delay: 1s;
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}

#nosotros{
	border:0px;
	background-color:#fff;
	text-align : justify;
	overflow-Y:auto;
	overflow-X:hidden;
}
#nosotros:hover{
	background: linear-gradient( #fff , #fff, #64a116 ); 
	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,-92px) scale(1.4);
	-ms-transform: translate(-12px,-92px) scale(1.4);
	-moz-transform: translate(-12px,-92px) scale(1.4);
	-webkit-transform: translate(-12px,-92px) scale(1.4);
	transform: translate(-12px,-92px) scale(1.4);
	padding:10px;
	-moz-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
#contacto{
	background-color:#fff;
	border:0px;
}
#contacto:hover{
	background: linear-gradient( #fff , #fff, #64a116 );
	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,-92px) scale(1.4);
	-ms-transform: translate(-12px,-92px) scale(1.4);
	-moz-transform: translate(-12px,-92px) scale(1.4);
	-webkit-transform: translate(-12px,-92px) scale(1.4);
	transform: translate(-12px,-92px) scale(1.4);
	-moz-transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
	padding:10px;
}
 
.panel:target{
    height:450px;
	display:block;
}