.accordion {

    width: 100%;

    /*! max-width: 1080px; */

    height: 250px;

    overflow: hidden;

    margin: 40px 0px;

}



.accordion ul {

    width: 100%;

    display: table;

    table-layout: fixed;

    margin: 0;

    padding: 0;

}



.accordion ul li {

    display: table-cell;

    vertical-align: bottom;

    position: relative;

    width: 16.666%;

    height: 250px;

    background-repeat: no-repeat;

    background-position: center center;

    transition: all 500ms ease;

}



.accordion ul li div {

    display: block;

    overflow: hidden;

    width: 100%;

}



.accordion ul li div a {

    display: block;

    height: 250px;

    width: 100%;

    position: relative;

    z-index: 3;

    vertical-align: bottom;

    padding: 15px 20px;

    box-sizing: border-box;

    color: #fff;

    text-decoration: none;

    font-family: Open Sans, sans-serif;

    transition: all 200ms ease;

}



.accordion ul li div a * {

    opacity: 0;

    margin: 0;

    width: 100%;

    text-overflow: ellipsis;

    position: relative;

    z-index: 5;

    white-space: nowrap;

    overflow: hidden;

    -webkit-transform: translateX(-20px);

    transform: translateX(-20px);

    -webkit-transition: all 400ms ease;

    transition: all 400ms ease;

}



.accordion ul li div a h2 {

    font-family: Montserrat, sans-serif;

    text-overflow: clip;

    font-size: 24px;

    text-transform: uppercase;

    margin-bottom: 2px;

    top: 160px;

}



.accordion ul li div a p {

    top: 160px;

    font-size: 13.5px;

}



.accordion ul li:nth-child(1) {

    background-image: url("https://www.christianfranchini.com/img-accordion/ebook-evolucion-consciente-4.jpg");

    /*! background-size: cover; */

}



.accordion ul li:nth-child(2) {

    background-image: url("https://www.christianfranchini.com/img-accordion/banner-amazon-author-khristian-franchini.jpg");

}



.accordion ul li:nth-child(3) {

    background-image: url("https://www.christianfranchini.com/img-accordion/banner-libro-creatividad-5.jpg");

}



.accordion ul li:nth-child(4) {

    background-image: url("https://www.christianfranchini.com/img-accordion/chris-y-evaristo-machupichu.jpg");

}



.accordion ul li:nth-child(5) {

    background-image: url("https://www.christianfranchini.com/img-accordion/anillo-vitruvian-entrevista-viceversa.jpg");

}



.accordion ul li:nth-child(6) {

    background-image: url("https://www.christianfranchini.com/img-accordion/resonando-2.jpg");

}



.accordion ul:hover li,

.accordion ul:focus-within li {

    width: 8%;

}



.accordion ul li:focus {

    outline: none;

}



.accordion ul:hover li:hover,

.accordion ul li:focus,

.accordion ul:focus-within li:focus {

    width: 60%;

}



.accordion ul:hover li:hover a,

.accordion ul li:focus a,

.accordion ul:focus-within li:focus a {

    background: rgba(0, 0, 0, 0.4);

}



.accordion ul:hover li:hover a *,

.accordion ul li:focus a *,

.accordion ul:focus-within li:focus a * {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



.accordion ul:hover li {

    width: 5% !important;

}



.accordion ul:hover li a * {

    opacity: 0 !important; 

}



.accordion ul:hover li:hover {

    width: 50% !important;

}



.accordion ul:hover li:hover a {

    background: rgba(0, 0, 0, 0.0);

}



.accordion ul:hover li:hover a * {

    opacity: 1 !important;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



@media screen and (max-width: 600px) {

    .accordion {

        height: auto;

    }

    .accordion ul li,

    .accordion ul li:hover,

    .accordion ul:hover li,

    .accordion ul:hover li:hover {

        position: relative;

        display: table;

        table-layout: fixed;

        width: 100% !important;

        -webkit-transition: none;

        transition: none;

    }

    .accordion ul li div a * {

    opacity: 1 !important;

    -webkit-transform: translateX(0px) !important;;

    transform: translateX(0px) !important;;

}

    .accordion ul:hover li a * {

    opacity: 1 !important; 

}

}



.about {

    text-align: center;

    font-family: "Open Sans", sans-serif;

    font-size: 12px;

    color: #666;

}



.about a {

    color: blue;

    text-decoration: none;

}



.about a:hover {

    text-decoration: underline;

}