#accordion * {
        box-sizing: border-box;
}
#accordion {
        max-width: 1200px;
          margin: 0 auto;
          position: relative;
}
#accdiv {
        height: 360px;
        overflow: hidden;

        }
#accul {
        width: 5000px;
        margin: 0;
        padding: 0;
}
#accul.hover .accli,
#accul:hover .accli {
        width: 100px;
}
#accordion .accli {
        display: inline;
        float: left;
        width: 198.33333333333334px;
        height: 360px;
        -webkit-transition: all 0.7s ease;
                        transition: all 0.7s ease;
        box-shadow: -10px 0 15px 0 rgba(0,0,0,0.2);
        border-left: 2px solid rgba(255, 255, 255, 0.5);
        position: relative;
        box-sizing: content-box;
}
#accordion .accli.hover,
#accordion .accli:hover {
        width: 690px;
        cursor: pointer;
}
#accordion .accli:first-child {
        border-left: none;
}
#accordion .imgdiv {
        overflow: hidden;
        width: 692px;
}
/* CENTERED IMAGE EFFECT */
#accul.hover .accli .imgwrap,
#accul:hover .accli .imgwrap {
        left: -295px;
}
#accordion .accli .imgwrap {
        position: relative;
        left: -245px;
        -webkit-transition: all 0.7s ease;
                transition: all 0.7s ease;
}
#accordion .accli.hover .imgwrap,
#accordion .accli:hover .imgwrap {
        left: 0;
}


/* SHORT TEXT */
#accordion .short {
        position: absolute;
        top:340px;
        left: 20px;
        width: 360px;
        -webkit-transform: rotate(-90deg);
                      -ms-transform: rotate(-90deg);
                              transform: rotate(-90deg);
        -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
                transform-origin: left top;
        opacity: 1;
        -webkit-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;
}
#accordion .short p {margin:0;}
#accordion .short p span {
        background: rgba(0, 0, 0, 0.38);
        color: #3366FF;
        font-weight: lighter;
        font-family: Open Sans, Helvetica, Arial, sans-serif;
        font-size: 20px;
        padding: 10px 15px;
        text-shadow: 2px 2px 2px #000000, -2px -2px 2px #000000, -2px 2px 2px #000000, 2px -2px 2px #000000;
}

#accordion .accli.hover .short,
#accordion .accli:hover .short {
        opacity: 0;
}

/* LONG TEXT */
#accordion .text {
        position: absolute;
        top: 0;
        width: 690px;
        padding: 0 20px;
        text-align: left;
}
#accordion .text p {
        position: relative;
        opacity: 0;
        top: 0px;
        -webkit-transition: all 0.7s ease;
                transition: all 0.7s ease;
        margin: 0;
}
#accordion .accli.hover .text p,
#accordion .accli:hover .text p {
        opacity: 1;
        top: 20px;
}
#accordion .text p span {
        display: none;
        background: rgba(124, 57, 57, 0.52);
        color: #ffffff;
        font-weight: lighter;
        font-family: Open Sans, Helvetica, Arial, sans-serif;
        font-size: 27px;
          padding: 5px 10px;
          -webkit-transform: scale(1,1);
              -ms-transform: scale(1,1);
                  transform: scale(1,1);
        margin-bottom: 12px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2), -1px 1px 1px rgba(0, 0, 0, 0.2), 1px -1px 1px rgba(0, 0, 0, 0.2);
}
#accordion .text p:last-child span {
        margin-bottom: 0;
}
#accordion .accli.hover .text p span,
#accordion .accli:hover .text p span {
        display: inline-block;
}
#accordion .text p:nth-child(1) {        -webkit-transition-delay: 0.3s;        transition-delay: 0.3s; }
#accordion .text p:nth-child(2) {        -webkit-transition-delay: 0.5s;        transition-delay: 0.5s; }
#accordion .text p:nth-child(3) {        -webkit-transition-delay: 0.7s;        transition-delay: 0.7s; }
#accordion .text p:nth-child(4) {        -webkit-transition-delay: 0.9000000000000001s;        transition-delay: 0.9000000000000001s; }

#accordion .accli:hover .text p, #accordion .accli.hover .text p,
#accordion .accli:hover .top-left p, #accordion .accli.hover .top-left p {        top: 20px; }
#accordion .accli:hover .top-right p, #accordion .accli.hover .top-right p {        top: 20px; }
#accordion .accli:hover .bottom-left p, #accordion .accli.hover .bottom-left p {        top: -20px; }
#accordion .accli:hover .bottom-right p, #accordion .accli.hover .bottom-right p {        top: -20px; }

#accordion .accli .bottom-right { bottom: 0; top: auto; text-align: right; }
#accordion .accli .bottom-left { bottom: 0; top: auto; text-align: left; }
#accordion .accli .top-right { top: 0; bottom: auto; text-align: right; }
#accordion .accli .top-left { top: 0; bottom: auto; text-align: left; }

/* KEN BURNS EFFECT */
#accordion .accli.hover img,
#accordion .accli:hover img {
        -webkit-transition: all 5s ease-in-out;
                transition: all 5s ease-in-out;
        -webkit-transform: scale(1.07);
            -ms-transform: scale(1.07);
                transform: scale(1.07);
}
#accordion .accli img {
        -webkit-transition: all 0.7s ease-out;
                transition: all 0.7s ease-out;
        -webkit-transform-origin: 20% 20%;
            -ms-transform-origin: 20% 20%;
                transform-origin: 20% 20%;
        overflow: hidden;
}
#accordion .accli:nth-child(2n) img {-webkit-transform-origin: 80% 80%;-ms-transform-origin: 80% 80%;transform-origin: 80% 80%;}
#accordion .accli:nth-child(3n) img {-webkit-transform-origin: 20% 80%;-ms-transform-origin: 20% 80%;transform-origin: 20% 80%;}
#accordion .accli:nth-child(5n) img {-webkit-transform-origin: 80% 20%;-ms-transform-origin: 80% 20%;transform-origin: 80% 20%;}

.notransition {
        -webkit-transition: none !important;
        transition: none !important;
}

#accordion .Lightbox {
        display: block;
}

.Preloader {
        /*none - autoplay:false ; block - autoplay:true*/
        display: none;
}

                .Controller { z-index: 10000; position: absolute; top:0; margin-top: 380px; }
                #relativediv { position: relative; z-index:9998; }
                .Controller img { margin-right: 3px; position: relative; opacity: .6; cursor: pointer; }
                .Controller img:hover { opacity: 1; }
                #prev {-webkit-transform: scaleX(-1); transform: scaleX(-1);}

                #play { position: relative; }
                #pause-span { visibility: hidden; position: relative; }
                #pause { position: absolute; right: 100%; }
                .Preloader {
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        left: -32px;
                        top: 0px;
                        background-color: #aaa;
                        border: 3px solid #333;
                        -webkit-border-radius: 100%;
                        border-radius: 100%;
                        z-index: 9998;
                        opacity: 0;
                        visibility: hidden;
                        -webkit-transition: -webkit-transform 5s ease-in-out,
                                                opacity 5s ease-in-out;
                        transition: transform 5s ease-in-out,
                                                opacity 5s ease-in-out;
                }
                .modified { opacity: 1; -webkit-transform: scale(0); transform: scale(0); }.Controller{right: 0;left: auto;} #relativediv {left:auto;}