@charset "utf-8";
/* CSS Document */
/***************************************/
/********** OVERLAY BOOTSTRAP **********/
/******** V 1.2 @Copyright 2014 ********/
/************* Open Source *************/
/*********** Aymeric Aveline ***********/


.panel-body
{
    position: relative;
    overflow: hidden;
    clear: both;
}
/***************************************/
/************ PANEL DEFAULT ************/
/***************************************/
/* Panel Up */
.panel-default-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-default-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Panel Down */
.panel-default-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-default-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Panel Left */
.panel-default-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-default-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Panel Right */
.panel-default-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-default-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/************ PANEL PRIMARY ************/
/***************************************/
/* Panel Up */
.panel-primary-overlay-up
{
    font-size: inherit;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #337ab7;
    color: #FFF;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-primary-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Panel Down */
.panel-primary-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #337ab7;
    color: white;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-primary-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Panel Left */
.panel-primary-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #337ab7;
    color: white;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-primary-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Panel Right */
.panel-primary-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #337ab7;
    color: white;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-primary-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/************ PANEL SUCCESS ************/
/***************************************/
/* Panel Up */
.panel-success-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dff0d8;
    visibility: hidden;
    opacity: 0;
    color: #3c763d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-success-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Panel Down */
.panel-success-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dff0d8;
    visibility: hidden;
    opacity: 0;
    color: #3c763d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-success-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Panel Left */
.panel-success-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #dff0d8;
    color: #3c763d;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-success-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Panel Right */
.panel-success-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #dff0d8;
    color: #3c763d;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-success-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/************ PANEL WARNING ************/
/***************************************/
/* Panel Up */
.panel-warning-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fcf8e3;
    color: #8a6d3b;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-warning-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Panel Down */
.panel-warning-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fcf8e3;
    color: #8a6d3b;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-warning-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Panel Left */
.panel-warning-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #fcf8e3;
    color: #8a6d3b;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-warning-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Panel Right */
.panel-warning-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #fcf8e3;
    color: #8a6d3b;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-warning-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/************ PANEL DANGER ************/
/***************************************/
/* Panel Up */
.panel-danger-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2dede;
    color: #a94442;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-danger-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Panel Down */
.panel-danger-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2dede;
    color: #a94442;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-danger-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Panel Left */
.panel-danger-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f2dede;
    color: #a94442;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-danger-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Panel Right */
.panel-danger-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #f2dede;
    color: #a94442;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-danger-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/************ PANEL INFO ************/
/***************************************/
/* Panel Up */
.panel-info-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d9edf7;
    color: #31708f;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-info-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Panel Down */
.panel-info-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d9edf7;
    color: #31708f;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-info-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Panel Left */
.panel-info-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #d9edf7;
    color: #31708f;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-info-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Panel Right */
.panel-info-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #d9edf7;
    color: #31708f;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.panel-body:hover .panel-info-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/**********************************************/
/** JUMBOTRONS FOR jumbotron-overlay-* CLASS **/
/**********************************************/
.jumbotron
{
    position: relative;
    overflow: hidden;
    clear: both;
}

.jumbotron-overlay-down *, .jumbotron-overlay-up *, .jumbotron-overlay-left *, .jumbotron-overlay-right *
{
    padding: 30px 15px;
    margin-bottom: 30px;
    clear: both;
}
/* Jumbotron Up */
.jumbotron-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #22334d;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.jumbotron:hover .jumbotron-overlay-up
{
    z-index: 1;
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* Jumbotron Down */
.jumbotron-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #22334d;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.jumbotron:hover .jumbotron-overlay-down
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* Jumbotron Left */
.jumbotron-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #22334d;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.jumbotron:hover .jumbotron-overlay-left
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* Jumbotron Right */
.jumbotron-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #22334d;
    color: #333;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.jumbotron:hover .jumbotron-overlay-right
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/******************************************************/
/** List Groups FOR .list-group-item-overlay-* CLASS **/
/******************************************************/
.list-group
{
    position: relative;
}

.list-group-item
{
    position: relative;
    overflow: hidden;
    clear: both;
}

.list-group-item-overlay-up *, .list-group-item-overlay-down *, .list-group-item-overlay-left *, .list-group-item-overlay-right *
{
    /*clear:  both;*/ 
    margin-right: auto;
    margin-top: auto;
}
/* List Group Up */
.list-group-item-overlay-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    padding: 10px 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.list-group-item:hover .list-group-item-overlay-up
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* List Group Down */
.list-group-item-overlay-down
{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    padding: 10px 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.list-group-item:hover .list-group-item-overlay-down
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* List Group Left */
.list-group-item-overlay-left
{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    padding: 10px 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.list-group-item:hover .list-group-item-overlay-left
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* List Group Right */
.list-group-item-overlay-right
{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #333;
    visibility: hidden;
    opacity: 0;
    padding: 10px 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.list-group-item:hover .list-group-item-overlay-right
{
    visibility: visible;
    opacity: 1;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/**** CAPTIONS FOR thumbnail CLASS *****/
/***************************************/
/***************************************/
/******** GLOBAL CAPTION STYLES ********/
/***************************************/
.thumbnail
{
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

#caption-up h1, #caption-up h2, #caption-up h3, #caption-up h4, #caption-up h5, #caption-up h6, #caption-up p
{
    color: #FFF;
}

#caption-down > h1, #caption-down > h2, #caption-down > h3, #caption-down h4, #caption-down h5, #caption-down h6, #caption-down p
{
    color: #FFF;
}

#caption-left h1, #caption-left h2, #caption-left h3, #caption-left h4, #caption-left h5, #caption-left h6, #caption-left p
{
    color: #FFF;
}

#caption-right h1, #caption-right h2, #caption-right h3, #caption-right h4, #caption-right h5, #caption-right h6, #caption-right p
{
    color: #FFF;
}

#caption-half-down h1, #caption-half-down h2, #caption-half-down h3, #caption-half-down h4, #caption-half-down h5, #caption-half-down h6, #caption-half-down p
{
    color: #FFF;
}

#caption-half-up h1, #caption-half-up h2, #caption-half-up h3, #caption-half-up h4, #caption-half-up h5, #caption-half-up h6, #caption-half-up p
{
    color: #FFF;
    margin-top: 5%;
}

#caption-half-up a, #caption-half-up button
{
    margin-top: 5%;
}
/***************************************/
/************** CAPTION UP *************/
/***************************************/
#caption-up
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #22334d;
    visibility: hidden;
    opacity: 0;
    margin-left: -4px;
    margin-top: 4px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.thumbnail:hover #caption-up
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/***************************************/
/************* CAPTION DOWN ************/
/***************************************/
#caption-down
{
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #22334d;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.thumbnail:hover #caption-down
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/***************************************/
/************* CAPTION LEFT ************/
/***************************************/
#caption-left
{
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 100%;
    height: auto;
    background-color: #22334d;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.thumbnail:hover #caption-left
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/***************************************/
/************ CAPTION RIGHT ************/
/***************************************/
#caption-right
{
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: auto;
    background-color: #22334d;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.thumbnail:hover #caption-right
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/***************************************/
/********** CAPTION HALF DOWN **********/
/***************************************/
#caption-half-down
{
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #22334d;
    visibility: hidden;
    opacity: 0;
    border-bottom: ridge grey 1px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    text-align: center;
}

.thumbnail:hover #caption-half-down
{
    visibility: visible;
    opacity: 0.9;
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    height: 50%;
}
/***************************************/
/*********** CAPTION HALF UP ***********/
/***************************************/
#caption-half-up
{
    position: absolute;
    top: 100%;
    left: 0px;
    margin-left: -4px;
    margin-top: 4px;
    border-top: ridge grey 1px;
    width: 100%;
    height: auto;
    background-color: #22334d;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    text-align: center;
}

.thumbnail:hover #caption-half-up
{
    visibility: visible;
    opacity: 0.9;
    height: 50%;
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

/***************************************/
/************ PROGRESS BARS ************/
/***************************************/

.progress-bar
{
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    background-color: transparent;
}

.progress-bar-overlay-primary, .progress-bar-overlay-success, .progress-bar-overlay-danger, .progress-bar-overlay-warning, .progress-bar-overlay-info
{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-animation: animation-one 2s;
    -moz-animation: animation-one 2s;
    -o-animation: Nanimation-one 2s;
    animation: animation-one 2s;
    -webkit-transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
    -moz-transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
    -o-transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
    transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
    -webkit-transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
    -moz-transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
    -o-transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
    transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
}

.progress-bar-success
{
    background-color: #5cb85c;
}

.progress-bar-info
{
    background-color: #5bc0de;
}

.progress-bar-warning
{
    background-color: #f0ad4e;
}

.progress-bar-danger
{
    background-color: #d9534f;
}


.progress-bar-overlay-primary
{
    background-color: #337ab7;
}

.progress-bar-overlay-success
{
    background-color: #5cb85c;
}

.progress-bar-overlay-danger
{
    background-color: #d9534f;
}

.progress-bar-overlay-warning
{
    background-color: #f0ad4e;
}

.progress-bar-overlay-info
{
    background-color: #5bc0de;
}


.progress-striped .progress-bar-overlay-primary, .progress-striped .progress-bar-overlay-warning, .progress-striped .progress-bar-overlay-danger, .progress-striped .progress-bar-overlay-info, .progress-striped .progress-bar-overlay-success
{
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

    .progress-striped .progress-bar-overlay-primary.active, .progress-striped .progress-bar-overlay-warning.active, .progress-striped .progress-bar-overlay-danger.active, .progress-striped .progress-bar-overlay-info.active, .progress-striped .progress-bar-overlay-success.active
    {
        -webkit-animation: progress-bar-stripes 2s linear infinite;
        -o-animation: progress-bar-stripes 2s linear infinite;
        animation: animation-one 2s, progress-bar-stripes 2s linear infinite;
    }

@-webkit-keyframes animation-one
{
    0%, 100%
    {
        -webkit-transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
        -moz-transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
        -o-transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
        transition: all 200ms cubic-bezier(0.865, 0.095, 0.625, 0.780);
        -webkit-transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
        -moz-transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
        -o-transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
        transition-timing-function: cubic-bezier(0.865, 0.095, 0.625, 0.780);
    }

    0%
    {
        width: 0%;
    }

    100%
    {
        width: 100%;
    }
}

@-moz-keyframes animation-one
{
    0%
    {
        width: 0%;
    }

    100%
    {
        width: 100%;
    }
}

@-o-keyframes animation-one
{
    0%
    {
        width: 0%;
    }

    100%
    {
        width: 100%;
    }
}

@keyframes animation-one
{
    0%
    {
        width: 0%;
    }

    100%
    {
        width: 100%;
    }
}


@-webkit-keyframes progress-bar-stripes
{
    from
    {
        background-position: 40px 0;
    }

    to
    {
        background-position: 0 0;
    }
}

@-o-keyframes progress-bar-stripes
{
    from
    {
        background-position: 40px 0;
    }

    to
    {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes
{
    from
    {
        background-position: 40px 0;
    }

    to
    {
        background-position: 0px 0;
    }
}