.grid_slider {
    overflow: hidden;
    position: relative;
    background-color: transparent;
    font-family: Arial;
    box-shadow: none;
	margin: 0 auto;
}

.grid_slider.tooltip {
    overflow: visible;
}

.grid_slider.loading {
    background-image: url('img/loader.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.grid_slider > div {
    position: absolute;
    border: 1px solid #FFFFFF;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.grid_slider > div.hastooltip {
    cursor: pointer;
}

.grid_slider > div.category > img,
.grid_slider > div.category > div.desc {
    opacity: 0.2;
    filter:alpha(opacity=20);
    -webkit-transition: opacity 0.2s linear;
       -moz-transition: opacity 0.2s linear;
        -ms-transition: opacity 0.2s linear;
         -o-transition: opacity 0.2s linear;
            transition: opacity 0.2s linear;
}
.grid_slider > div.category_highlighted > img,
.grid_slider > div.category_highlighted > div.desc {
    opacity: 1;
    filter:alpha(opacity=100);
}

.grid_slider  > div > img {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.grid_slider > div > div.desc {
    line-height: 20px;
    font-size: 10px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid_slider_nav {

    text-align: center;
    -webkit-animation: fade-up 0.3s linear;
       -moz-animation: fade-up 0.3s linear;
        -ms-animation: fade-up 0.3s linear;
         -o-animation: fade-up 0.3s linear;
            animation: fade-up 0.3s linear;
	margin:10px auto;
}
.grid_slider_nav span {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
}
.grid_slider_nav span.prev {
    background: url('img/prev.png') no-repeat;
}
.grid_slider_nav span.next {
    background: url('img/next.png') no-repeat;
}
.grid_slider.fade > div {
    -webkit-animation: fade 0.3s linear;
       -moz-animation: fade 0.3s linear;
        -ms-animation: fade 0.3s linear;
         -o-animation: fade 0.3s linear;
            animation: fade 0.3s linear;
}
.grid_slider.flip {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
        -ms-perspective: 1000px;
         -o-perspective: 1000px;
            perspective: 1000px;
}
.grid_slider.flip > div {
    -webkit-animation: flip 0.3s linear;
       -moz-animation: flip 0.3s linear;
        -ms-animation: flip 0.3s linear;
         -o-animation: flip 0.3s linear;
            animation: flip 0.3s linear;
}
.grid_slider.rotate > div {
    -webkit-animation: rotate 0.3s linear;
       -moz-animation: rotate 0.3s linear;
        -ms-animation: rotate 0.3s linear;
         -o-animation: rotate 0.3s linear;
            animation: rotate 0.3s linear;
}
.grid_slider.blind.prev > div {
    -webkit-animation: blind-up 0.3s linear;
       -moz-animation: blind-up 0.3s linear;
        -ms-animation: blind-up 0.3s linear;
         -o-animation: blind-up 0.3s linear;
            animation: blind-up 0.3s linear;
}
.grid_slider.blind.next > div {
    -webkit-animation: blind-down 0.3s linear;
       -moz-animation: blind-down 0.3s linear;
        -ms-animation: blind-down 0.3s linear;
         -o-animation: blind-down 0.3s linear;
            animation: blind-down 0.3s linear;
}
.grid_slider.scale > div {
    -webkit-animation: scale 0.3s linear;
       -moz-animation: scale 0.3s linear;
        -ms-animation: scale 0.3s linear;
         -o-animation: scale 0.3s linear;
            animation: scale 0.3s linear;
}
.grid_slider.slide.prev > div {
    -webkit-animation: slide-right 0.2s linear;
       -moz-animation: slide-right 0.2s linear;
        -ms-animation: slide-right 0.2s linear;
         -o-animation: slide-right 0.2s linear;
            animation: slide-right 0.2s linear;
}
.grid_slider.slide.next > div {
    -webkit-animation: slide-left 0.2s linear;
       -moz-animation: slide-left 0.2s linear;
        -ms-animation: slide-left 0.2s linear;
         -o-animation: slide-left 0.2s linear;
            animation: slide-left 0.2s linear;
}
.grid_slider.drop.prev > div {
    -webkit-animation: drop-up 0.2s linear;
       -moz-animation: drop-up 0.2s linear;
        -ms-animation: drop-up 0.2s linear;
         -o-animation: drop-up 0.2s linear;
            animation: drop-up 0.2s linear;
}
.grid_slider.drop.next > div {
    -webkit-animation: drop-down 0.2s linear;
       -moz-animation: drop-down 0.2s linear;
        -ms-animation: drop-down 0.2s linear;
         -o-animation: drop-down 0.2s linear;
            animation: drop-down 0.2s linear;
}

.grid_slider > div > span.tooltip {
    position: absolute;
    cursor: default;
    z-index: 100;
    top: -10px;
    left: 40px;
    width: 300px;
    height: 400px;
    color: #000000;
    background-color: #FFFFFF;
    border: 4px solid #000000;
    margin-left: 14px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
    -webkit-animation: tooltip 0.2s linear;
       -moz-animation: tooltip 0.2s linear;
        -ms-animation: tooltip 0.2s linear;
         -o-animation: tooltip 0.2s linear;
            animation: tooltip 0.2s linear;
}
.grid_slider > div > span.tooltip:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid #000000;
    top: 10px;
    left: -22px;
}
.grid_slider > div > span.tooltip.closed {
    opacity: 0;
    -webkit-transform: translateX(100px);
       -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
         -o-transform: translateX(100px);
            transform: translateX(100px);
    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}

.grid_slider > div > span.tooltip > span.close {
    position: absolute;
    display: block;
    top: 10px;
    right: 10px;
    color: #999999;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
    width: 8px;
    height: 8px;
    opacity: 0.8;
    background: url('img/close.png') no-repeat;
}
.grid_slider > div > span.tooltip > span.close:hover {
    opacity: 1;
}

.grid_slider > div > span.tooltip > div.content {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    overflow: auto;
}
.grid_slider > div > span.tooltip > div.content p {
    text-align: justify;
    margin: 0px 0px 10px 0px;
}
.grid_slider > div > span.tooltip > div.content p:last-child {
    margin-bottom: 0px;
}
.grid_slider > div > span.tooltip > div.content a {
    color: #1272AE;
}


/* fade */
@-webkit-keyframes fade {
    from {opacity: 0;}
    to   {opacity: 1;}
}
@-moz-keyframes fade {
    from {opacity: 0;}
    to   {opacity: 1;}
}
@-ms-keyframes fade {
    from {opacity: 0;}
    to   {opacity: 1;}
}
@-o-keyframes fade {
    from {opacity: 0;}
    to   {opacity: 1;}
}
@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* flip */
@-webkit-keyframes flip {
    from {opacity: 0; -webkit-transform: rotateY(-180deg);}
    to   {opacity: 1; -webkit-transform: rotateY(0deg);}
}
@-moz-keyframes flip {
    from {opacity: 0; -moz-transform: rotateY(-180deg);}
    to   {opacity: 1; -moz-transform: rotateY(0deg);}
}
@-ms-keyframes flip {
    from {opacity: 0; -ms-transform: rotateY(-180deg);}
    to   {opacity: 1; -ms-transform: rotateY(0deg);}
}
@-o-keyframes flip {
    from {opacity: 0; -o-transform: rotateY(-180deg);}
    to   {opacity: 1; -o-transform: rotateY(0deg);}
}
@keyframes flip {
    from {opacity: 0; transform: rotateY(-180deg);}
    to {opacity: 1; transform: rotateY(0deg);}
}

/* rotate */
@-webkit-keyframes rotate {
    from {opacity: 0; -webkit-transform: rotateZ(-90deg);}
    to   {opacity: 1; -webkit-transform: rotateZ(0deg);}
}
@-moz-keyframes rotate {
    from {opacity: 0; -moz-transform: rotateZ(-90deg);}
    to   {opacity: 1; -moz-transform: rotateZ(0deg);}
}
@-ms-keyframes rotate {
    from {opacity: 0; -ms-transform: rotateZ(-90deg);}
    to   {opacity: 1; -ms-transform: rotateZ(0deg);}
}
@-o-keyframes rotate {
    from {opacity: 0; -o-transform: rotateZ(-90deg);}
    to   {opacity: 1; -o-transform: rotateZ(0deg);}
}
@keyframes rotate {
    from {opacity: 0; transform: rotateZ(-90deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

/* scale */
@-webkit-keyframes scale {
    from {opacity: 0; -webkit-transform: scale(0);}
}
@-moz-keyframes scale {
    from {opacity: 0; -moz-transform: scale(0);}
}
@-ms-keyframes scale {
    from {opacity: 0; -ms-transform: scale(0);}
}
@-o-keyframes scale {
    from {opacity: 0; -o-transform: scale(0);}
}
@keyframes scale {
    from {opacity: 0; transform: scale(0);}
}

/* blind-down */
@-webkit-keyframes blind-down {
    from {opacity: 0; -webkit-transform: translateY(-100%);}
    to   {opacity: 1; -webkit-transform: translateY(0%);}
}
@-moz-keyframes blind-down {
    from {opacity: 0; -moz-transform: translateY(-100%);}
    to   {opacity: 1; -moz-transform: translateY(0%);}
}
@-ms-keyframes blind-down {
    from {opacity: 0; -ms-transform: translateY(-100%);}
    to   {opacity: 1; -ms-transform: translateY(0%);}
}
@-o-keyframes blind-down {
    from {opacity: 0; -o-transform: translateY(-100%);}
    to   {opacity: 1; -o-transform: translateY(0%);}
}
@keyframes blind-down {
    from {opacity: 0; transform: translateY(-100%);}
    to {opacity: 1; transform: translateY(0%);}
}

/* blind-up */
@-webkit-keyframes blind-up {
    from {opacity: 0; -webkit-transform: translateY(100%);}
    to   {opacity: 1; -webkit-transform: translateY(0%);}
}
@-moz-keyframes blind-up {
    from {opacity: 0; -moz-transform: translateY(100%);}
    to   {opacity: 1; -moz-transform: translateY(0%);}
}
@-ms-keyframes blind-up {
    from {opacity: 0; -ms-transform: translateY(100%);}
    to   {opacity: 1; -ms-transform: translateY(0%);}
}
@-o-keyframes blind-up {
    from {opacity: 0; -o-transform: translateY(100%);}
    to   {opacity: 1; -o-transform: translateY(0%);}
}
@keyframes blind-up {
    from {opacity: 0; transform: translateY(100%);}
    to {opacity: 1; transform: translateY(0%);}
}

/* slide-left */
@-webkit-keyframes slide-left {
    from {opacity:0;left:100%;}
}
@-moz-keyframes slide-left {
    from {opacity:0;left:100%;}
}
@-ms-keyframes slide-left {
    from {opacity:0;left:100%;}
}
@-o-keyframes slide-left {
    from {opacity:0;left:100%;}
}
@keyframes slide-left {
    from {opacity:0;left:100%;}
}

/* slide-right */
@-webkit-keyframes slide-right {
    from {opacity:0;left:0;}
}
@-moz-keyframes slide-right {
    from {opacity:0;left:0;}
}
@-ms-keyframes slide-right {
    from {opacity:0;left:0;}
}
@-o-keyframes slide-right {
    from {opacity:0;left:0;}
}
@keyframes slide-right {
    from {opacity:0;left:0;}
}

/* drop-up */
@-webkit-keyframes drop-up {
    from {opacity:0;top:100%;}
}
@-moz-keyframes drop-up {
    from {opacity:0;top:100%;}
}
@-ms-keyframes drop-up {
    from {opacity:0;top:100%;}
}
@-o-keyframes drop-up {
    from {opacity:0;top:100%;}
}
@keyframes drop-up {
    from {opacity:0;top:100%;}
}

/* drop-down */
@-webkit-keyframes drop-down {
    from {opacity:0;top:0;}
}
@-moz-keyframes drop-down {
    from {opacity:0;top:0;}
}
@-ms-keyframes drop-down {
    from {opacity:0;top:0;}
}
@-o-keyframes drop-down {
    from {opacity:0;top:0;}
}
@keyframes drop-down {
    from {opacity:0;top:0;}
}


/* fade-up */
@-webkit-keyframes fade-up {
    from {opacity: 0; -webkit-transform: translateY(-10px);}
    to   {opacity: 1; -webkit-transform: translateY(0px);}
}
@-moz-keyframes fade-up {
    from {opacity: 0; -moz-transform: translateY(-10px);}
    to   {opacity: 1; -moz-transform: translateY(0px);}
}
@-ms-keyframes fade-up {
    from {opacity: 0; -ms-transform: translateY(-10px);}
    to   {opacity: 1; -ms-transform: translateY(0px);}
}
@-o-keyframes fade-up {
    from {opacity: 0; -o-transform: translateY(-10px);}
    to   {opacity: 1; -o-transform: translateY(0px);}
}
@keyframes fade-up {
    from {opacity: 0; transform: translateY(-10px);}
    to   {opacity: 1; transform: translateY(0px);}
}

/* tooltip */
@-webkit-keyframes tooltip {
    from {opacity: 0; -webkit-transform: translateX(100px);}
    to   {opacity: 1; -webkit-transform: translateX(0px);}
}
@-moz-keyframes tooltip {
    from {opacity: 0; -moz-transform: translateX(100px);}
    to   {opacity: 1; -moz-transform: translateX(0px);}
}
@-ms-keyframes tooltip {
    from {opacity: 0; -ms-transform: translateX(100px);}
    to   {opacity: 1; -ms-transform: translateX(0px);}
}
@-o-keyframes tooltip {
    from {opacity: 0; -o-transform: translateX(100px);}
    to   {opacity: 1; -o-transform: translateX(0px);}
}
@keyframes tooltip {
    from {opacity: 0; transform: translateX(100px);}
    to   {opacity: 1; transform: translateX(0px);}
}