/* caja acordeon */
.acordeon { max-width:768px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

/********

Generales

*********/

/* ABIERTO */
.acordeon section:target { background:#FFF; padding:10px;}
.acordeon section:target:hover { background:#FFF; }
.acordeon section:target h2 {width:100%;}
.acordeon section:target h2 a{ color:#333; padding:0;}
.acordeon section:target p {display:block;}
.acordeon section:target:before {display:none;}
.acordeon section h2 a{padding:0px 37px;display:block; font-size:16px; font-weight:normal; color:#eee; text-decoration:none; margin-top: -28px; }

/* CERRADO */
.acordeon section{ float:left;	overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.acordeon section:hover {background:#444;}
.acordeon section p { display:none; }
.acordeon section:before{position:relative;font-size:24px;color:#fff;font-weight:bold;}
.acordeon section:nth-child(1):before{content:'1';}
.acordeon section:nth-child(2):before{content:'2';}
.acordeon section:nth-child(3):before{content:'3';}
.acordeon section:nth-child(4):before{content:'4';}
.acordeon section:nth-child(5):before{content:'5';}


/*********************************************************************/

/** HORIZONTAL **/

.horizontal section{ width:40px; height:250px;
    -webkit-transition:width 0.2s ease-out;
    -webkit-transition: width 0.9s ease-out;
    transition:width 0.9s ease-out;
}

/*Posiciona el numero de la viñeta*/
.horizontal section:before{top:3px;left:15px;}

/*h2 girado*/
.horizontal section h2 {
    -webkit-transform:rotate(-90deg);
    transform: rotate(-90deg);
    width:240px; position:relative; left:-100px; top:65px;
}

/*  */

/*abrir al hacer hover*/
.horizontal :target{ width:73%;height:250px; }
.horizontal :target h2{ top:0px;left:0;
    -webkit-transform:rotate(0deg);
    transform: rotate(0deg);
}
/****************************/