/***********************************************/
/***************** Accordion ********************/
/***********************************************/

article.acordion  {  
    background: #fff;
    border-radius: 5px;  
    box-shadow: 0 0 4px rgba(0,0,0,0.4);  
    display: block;  
    margin: 0 auto; 
    margin-top: 40px; 
    padding: 0.5em 0.5em 1px 0.5em;  
    width: 100%;  
}  
article.acordion section {  
    background: #999;  
    border-radius: 3px;  
    color: #333;  
    display: block;  
    height: 2em;  
    margin: 0 0 0.5em 0;  
    overflow: hidden;  
    padding: 0 1em;
    width: 98%;  
}  
article.acordion section h2 {  
    color: #ddd;
    font-size: 1em;  
    font-weight: bold;  
    line-height: 2em;  
    margin: 0;  
    padding: 0;  
    width: 100%;  
}  
article.acordion section h2 a {  
    color: inherit;  
    display: block;  
    line-height: 2em;  
    outline: 0 none;  
    text-decoration: none;  
    width: 100%;  
}  
article.acordion section:target.ac1 {  
    height: 100%;
} 
article.acordion section:target.ac2 {  
    height: 100%;
}
article.acordion section:target.ac3 {  
    height: 100%;
} 
article.acordion section:target {  
    height: 100%;  
    background-color: #fff;  
}  
article.acordion section:target h2 {  
    color: #333;  
    font-size: 1.6em;  
}  
article.acordion section,  
article.acordion section h2 {  
    transition: all 1s ease;  
}  
aside {
    border-radius: 3px;
    cursor: pointer;
    height: 32px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 4px;
    transition: all .3s linear;
    width: 114px;
}
aside:hover {
    transform: rotate(-3deg);
}
#text {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow:0 1px #fff;
    color:#222;
    font-size: 14px;
    font-family: "Lato";
    height: 100px;
    margin: 0 0 14px 21px;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px;
    white-space: pre-wrap;
    width: 780px;
    word-wrap: break-word;
}