body.cast section.cast .variable {
    display: none !important;
}

body.cast section.cast .variable.show {
    display: inline-block !important;
}

body.cast section.cast .info.variable.show {
    display: table !important;
}



body.cast section.cast .pads {
    display: table;
    width: 100%;
    max-width: 144em;
    margin: 4em auto 1em;
    border-spacing: 2em;
    border-collapse: separate;
}

body.cast section .text-wrapper {
    padding: 4em;
}

body.cast section.cast .inner {
    display: table-cell;
    float: none;
    width: 65%;
    vertical-align: middle;
}

body.cast section.cast .inner .text-wrapper {
    position: relative;
    overflow: hidden;
    height: inherit;
}

body.cast section.cast .inner .actors {
    display: table;
    width: 200%;
    -webkit-transition: margin-left .3s ease;
       -moz-transition: margin-left .3s ease;
        -ms-transition: margin-left .3s ease;
         -o-transition: margin-left .3s ease;
            transition: margin-left .3s ease;
}

body.cast section.cast .inner:last-child .text-wrapper {
    padding: 2em;
}

body.cast section.cast .inner .actors.show {
    margin-left: -100%;
}

body.cast section.cast .inner .actors .p2 {
    opacity: 0;
}

body.cast section.cast .inner .actors.show .p1 {
    opacity: 0;
}

body.cast section.cast .inner .actors.show .p2 {
    opacity: 1;
}

body.cast section.cast .inner .actors .p2 .name,
body.cast section.cast .inner .actors .p2 .back {
    position: absolute;
}

body.cast section.cast .inner .actors .p2 .name {
    top: -1em;
    left: 2em;
}

body.cast section.cast .inner .actors .p2 .back {
    font-size: 1.2em;
    z-index: 2;
    top: -1.5em;
    right: 0;
}

body.cast section.cast .inner .actors .p2 .info {
    position: absolute;
    top: 4em;
    left: 0;
    display: table;
    width: 100%;
    vertical-align: top;
}

body.cast section.cast .inner .actors .p2 .info img,
body.cast section.cast .inner .actors .p2 .info .text {
    display: table-cell;
    vertical-align: top;
}

body.cast section.cast .inner .actors .p2 .info img {
    width: 18.5em;
}



body.cast section.cast .inner .actors .p2 .info .text p {
    font-size: 1.4em;
    margin-bottom: 3em;
}

body.cast section.cast .inner .actors .p2 .name {
    font-size: .8em;
}

body.cast section.cast .inner .actors .p2 .name h3,
body.cast section.cast .inner .actors .p2 .name h2 {
    font-weight: 300;
    display: inline-block;
    text-transform: uppercase;
}

body.cast section.cast .inner .actors .p2 .name h2 {
    margin-left: .3em;
    color: #fff;
}

body.cast section.cast .inner .actors .p2 .name h3 {
    
}

body.cast section.cast .inner .actors .page {
    position: relative;
    display: table-cell;
    width: 50%;
    -webkit-transition: opacity .3s ease, height 0.3s ease;
       -moz-transition: opacity .3s ease, height 0.3s ease;
        -ms-transition: opacity .3s ease, height 0.3s ease;
         -o-transition: opacity .3s ease, height 0.3s ease;
            transition: opacity .3s ease, height 0.3s ease;
}


body.cast section.cast .inner:first-child {
    width: 35%;
}

body.cast section.cast .inner .actors li .no-image,
body.cast section.cast .inner .actors li img {
    width: 100%;
    border: 0px solid #fff;
    -webkit-transition: border 0.2s cubic-bezier(.13,.68,.59,1.03), padding-bottom 0.2s cubic-bezier(.13,.68,.59,1.03);
       -moz-transition: border 0.2s cubic-bezier(.13,.68,.59,1.03), padding-bottom 0.2s cubic-bezier(.13,.68,.59,1.03);
        -ms-transition: border 0.2s cubic-bezier(.13,.68,.59,1.03), padding-bottom 0.2s cubic-bezier(.13,.68,.59,1.03);
         -o-transition: border 0.2s cubic-bezier(.13,.68,.59,1.03), padding-bottom 0.2s cubic-bezier(.13,.68,.59,1.03);
            transition: border 0.2s cubic-bezier(.13,.68,.59,1.03), padding-bottom 0.2s cubic-bezier(.13,.68,.59,1.03);
}

body.cast section.cast .inner .actors li {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 23%;
    max-width: 16.9em;
    margin: .1em;
    cursor: pointer;
}

body.cast section.cast .inner .actors li .no-image {
    background: #24324a;
    padding-bottom: 92%;
}

body.cast section.cast .inner .actors li:hover .no-image,
body.cast section.cast .inner .actors li:hover img{
    border: 4px solid #fff;
    
}

body.cast section.cast .inner .actors li:hover .no-image {
    padding-bottom:calc(92% - 8px);
}

body.cast section.cast .inner .actors .previews li h3 {
    font-size: 1.4em;
    position: absolute;
    z-index: 2;
    bottom: .5em;
    left: .5em;
    color: #fff;
}

body.cast section.cast .inner .actors .previews {
    margin-top: 2em;
}


@media screen and (max-width: 1100px) {
    body.cast section.cast .inner .actors li {
        width: 32%;
        margin: .1em;
    }
}


@media screen and (max-width: 900px) {
    body.cast section.cast .inner:first-child,
    body.cast section.cast .inner {
        display: block;
        width: 100%;
    }

    body.cast section.cast .inner:first-child {
        margin-bottom: 2em;
    }

    body.cast section.cast .pads {
        display: block;
    }
    body.cast section.cast .inner .actors li {
        width: 24%;
        margin: .1em;
    }

    body.cast section.cast .inner .actors .p2 .info .text,
    body.cast section.cast .inner .actors .p2 .info img {
        font-size: 1.5em;
    }
}


@media screen and (max-width: 767px) {
    body.cast section.cast .inner .actors li {
        width: 48%;
        max-width: 100%;
        margin: .5%;
    }

    body.cast section.cast .inner .actors .p2 .name {
        position: relative;
        top: 0;
        left: 0;
        text-align: left;
    }


    body.cast section.cast .inner .actors .p2 .back {
        top: auto;
        bottom: 0;
    }

    body.cast section.cast .inner .actors .p2 .info img,
    body.cast section.cast .inner .actors .p2 .info .text,
    body.cast section.cast .inner .actors .p2 .info {
        position: relative;
        display: block;
    }

    body.cast section.cast .inner .actors .p2 .info img {
        width: 100%;
    }

    body.cast section.cast .inner .actors {
        border-spacing: 0;
    }

    body.cast section.cast .inner .actors .p2 .info .text {
        margin-top: 2em;
    }

    body.cast section.cast .inner .actors .p2 .info {
        font-size: 10px !important;
        padding-bottom: 8em;
    }

    body.cast section.cast .inner .actors .p2 .info p {
        text-align: left;
    }

    body.cast section.cast .inner .actors .p2 .back {
        position: relative;
        top: 0;
        bottom: auto;
    }

    body.cast section.cast .inner .actors .p2 {
        text-align: center;
    }


    body.cast section.cast .inner .actors .p2 .name {
        margin-top: -700%;
        -webkit-transition: margin-top .5s ease;
           -moz-transition: margin-top .5s ease;
            -ms-transition: margin-top .5s ease;
             -o-transition: margin-top .5s ease;
                transition: margin-top .5s ease;
    }


    body.cast section.cast .inner .actors.show .p2 .name {
        margin-top: 0;
        -webkit-transition: margin-top .0s ease;
           -moz-transition: margin-top .0s ease;
            -ms-transition: margin-top .0s ease;
             -o-transition: margin-top .0s ease;
                transition: margin-top .0s ease;
    }

    body.cast section.cast .inner .actors {
        -webkit-transition: margin-left .3s ease ;
           -moz-transition: margin-left .3s ease ;
            -ms-transition: margin-left .3s ease ;
             -o-transition: margin-left .3s ease ;
                transition: margin-left .3s ease ;
    }

    body.cast section.cast .inner .actors.show {
        -webkit-transition: margin-left .3s ease;
           -moz-transition: margin-left .3s ease;
            -ms-transition: margin-left .3s ease;
             -o-transition: margin-left .3s ease;
                transition: margin-left .3s ease;
    }
}

@media screen and (max-width: 767px) {
    body.cast section.cast .inner .actors .p2 .info .text p {
        font-size: 1.0em;
    }
}

@media screen and (max-width: 400px) {
    body.cast section.cast .inner .actors .previews li h3 {
        font-size: 1.4em;
    }
}


@media screen and (max-width: 320px) {
    body.cast section.cast .inner .actors .previews li h3 {
        font-size: 1.1em;
    }

    body.cast .actors .flat-btn {
        font-size: 1.2em;
    }

    body.cast section.cast .inner .actors .p2 .info .text p {
        font-size: 1.2em;
    }
}