@charset "utf-8";
/* CSS Document */
/***************************************/
/********** OVERLAY BOOTSTRAP **********/
/******** V 1.2 ********/
/************* MIT Licence *************/
/*********** 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;
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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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:#FFF;
-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{
-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:#FFF;
-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{
-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:#FFF;
-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{
-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;
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{
-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;
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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
-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;
-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;
-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{
-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;
-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{
-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;
-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{
-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;
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{
-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;
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{
-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;
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{
-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;
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{
-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;
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{
-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;
-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{
-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;
-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{
-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;
-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{
-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;
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{
-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;
-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{
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:      animation-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); 
}
.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); 		
}

  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;
  }
}