/*hack bootstrap default*/
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important;
}
.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-toggle {
    z-index:3;
}
/* The header of the navbar */
.navbar-header {
    text-align: center;
    
    float: none !important;
}

.margin-bottom-0{margin-bottom:0;}


.navbar { 
    min-height: 70px;   
}
.navbar.top-bar {
    height: 40px;
    background: white;
    min-height: 40px;
}
.primary-bg{background-color:#ffffff}
.primary-color{color:#0253a5}
.white-bg{background-color:#fff}
.secondary-bg{background-color:#2b8dc6}
.seconday-color{color:#2b8dc6}
.grey{color:#f2f2f2;}
.grey-bg{background:#F2F2F2;}
.light-grey{color:#666766;}
.light-grey-bg{background:#666766;}
.grey2{color:#949494;}
.grey1{color:#666766}
.small{font-size:85%;}
.pink{color:#f3ac33;}
.pink-bg{background:#ed1a39;}
.red{color:#df1f26;}
.red-bg{background:#df1f26;}
.yellow{color:#f8f6bd;}
.yellow-bg{background:#f8f6bd;}
.dark-yellow{color:#fdc923;}
.dark-yellow-bg{background:#fdc923;}
.orange{color:#f79025;}
.orange-bg{background:#f89c3f;}
.no-padding{padding:0;}
.aqua-bg {
    background-color: #00bbd8;
}
.text-center{text-align:center;}
a:focus, a:hover {    color: #f4ac32;}
a {    color: #f3ac33;}
a.orange:focus, a.orange:hover {    color: #FFAD5A;}
a.orange {    color: #f89c3f;;}
input.input-comment[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    min-height:140px;
}
.line-height-11{line-height:1.1;}

.btn.btn-export {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    font-size: 16px;
    padding: 4px 12px;
    font-weight: 400;
}
.btn.btn-export:hover,.btn.btn-export:focus,.btn.btn-export:active:hover   {
    
    background: #fff;
    color: #333;
}
.btn-primary { background-color:#ffd078; border : none;}
.btn-primary:hover { background-color:#f4ac32;}

.btn-secondary {   background-color:rgba(43,141,198,1)}
.btn-secondary:hover {    background-color:rgba(43,141,198,0.95)}

.btn-pink {  background-color:rgba(237,26,57,1)}
.btn-pink:hover{     background-color:rgba(237,26,57,0.95)}

.btn-orange {   background-color:rgba(248,156,63,1)}
.btn-orange:hover{    background-color:rgba(248,156,63,0.95)}

.btn-yellow {  background-color:rgba(240,246,189,1)}
.btn-yellow:hover{     background-color:rgba(240,246,189,0.95)}

.btn-red {  background-color:rgba(223,31,38,1)}
.btn-red:hover{     background-color:rgba(223,31,38,0.95)}

.btn-gray {  background-color:rgba(210,207,191,1)}
.btn-gray:hover{     background-color:rgba(210,207,191,0.95)}

.btn-comment {
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    color: white;
    border: none;
    float: right;
    padding: 3px 25px;
}

.btn-cta {
    font-weight:600;
    font-size:18px;
    border-radius: 10px;
    color:white;
    border:none;
    min-width: 190px;
    padding: 5px 28px;
}
.btn-navigation {
    font-weight: 600;
    font-size: 18px;
    border-radius: 10px;
    color: white;
    border: none;
    
    padding: 5px 15px;
    
    
}

.btn-arrow-left {
    background: url(../../images/arrow-left.png) center no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 15px;
    background-size: 15px;
}
.btn.focus, .btn:focus, .btn:hover {
    
    color:white;
}
.media-subheading{font-size:18px; font-weight:600;}
.media-object {
    display: block;
    min-width: 65px;
}
.media-heading{
    
    margin-bottom: 2px;
}

.media-heading.heading-uppercase {
    
    text-transform: uppercase;
    font-weight: 600;
}
.media-heading.heading-link >a {
    color:#f89c3f;
    font-weight: 600;
    text-decoration:underline;
}
.media-heading.heading-link-small {
    margin-bottom:15px;
}
.media-heading.heading-link-small >a {
    
    font-weight: 600;
    text-decoration: underline;
    font-size: 16px;
}
.logo img{    margin-top: 10px;}
.no-boder{ 
    border: 0px;
}
.no-boder-bottom{ 
    border-bottom: 0px;
}
.margin-top-10{margin-top:10px;}
.margin-top-20{margin-top:20px;}
.margin-top-30{margin-top:30px;}
.margin-top-40{margin-top:40px;}
.margin-bottom-0{margin-bottom:0px;}
.margin-bottom-5{margin-bottom:5px;}
.margin-bottom-10{margin-bottom:10px;}
.margin-bottom-15{margin-bottom:15px;}
.margin-bottom-20{margin-bottom:20px;}
.margin-bottom-30{margin-bottom:30px;}
.margin-bottom-40{margin-bottom:40px;}
.margin-bottom-50{margin-bottom:50px;}
.margin-bottom-60{margin-bottom:60px;}
.margin-bottom-70{margin-bottom:70px;}
.padding-right-10{padding-right:10px;}
.padding-top-10{padding-top:10px;}
.red-bg{background-color:#df1f26}
.red-color{color:#df1f26}


@media (min-width: 768px){
    .navbar {
        border-radius: 0px;
    }
}
.media{border-bottom:2px solid #f2f2f2}
.panel-red .media {
    border-bottom: 2px solid #fad194;
}
.media:last-child {
    border-bottom:none;
}
.panel {
    margin-bottom: 40px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.05);
    box-shadow: 0 0px 0px rgba(0,0,0,.05);
}
.panel-heading{text-align:center;font-size:14px;font-weight:600;}
.panel {
    border:none;
}
.panel-body {
    /*padding: 15px;*/
    border: 1px solid #f7f8f8;
}
.panel-primary >.panel-heading {
	text-transform : uppercase;
    color: #3c3c3b;
    background-color: #f7f8f8;
    border-color: #f7f8f8;
}
.panel-secondary {
    border-color: #2b8dc6;
}
.panel-secondary >.panel-heading {
    color: #fff;
    background-color: #2b8dc6;
    border-color: #2b8dc6;
}
.panel-red {
    border-color: #df1f26;
}


.panel-red >.panel-heading {
    color: #fff;
    background-color: #df1f26;
    border-color: #df1f26;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 0px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.panel-secondary {
    border-color: #337ab7;
}
.panel-footer.panel-footer-button {
    padding: 10px 15px;
    background-color: #f7f8f8;
    border-top: none;
}

.default-content{margin-top:90px;margin-bottom:90px}
.type1-content{margin-top:30px;margin-bottom:30px}
.type1-content-inner{margin-top:40px;margin-bottom:40px}

@media (min-width: 768px){
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
        
    }
}



.hamburger {
    position: absolute;
    top: 0;
    display: block;
    z-index: 100;
}
.hamburger div {
    display: none;
    z-index:102;
}
.hamburger button {
    position: absolute;
    top: 5px;
    left: 5px;
    border: 0;
    text-indent: 200%;
    overflow: hidden;
    background: transparent url('../../images/icon-hamburger.png') center no-repeat;
    //border: 1px solid #ddd;
    border-radius: 50%;
    background-size: 75%;
    width: 60px;
    height: 60px;
    outline: none;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}
.hamburger button:focus,.hamburger button:hover {
    border-color: #1fc08e;
    color: #1fc08e;
}
.hamburger button.expanded {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background-color: transparent;
    border: 0;
}
.hamburger a {
    display: block;
}

.pure-drawer {
    width:auto;
    border-radius: 4px;
}

.nav-primary {
    list-style: none;
    margin: 0;
    padding: 75px 0 12px 0; 
}



ul, ol, dl { 
    line-height: 1.6;
    margin-bottom: 1.25rem;
    list-style-position: outside;
    font-family: inherit;
    font-size: 1.2rem;
}

.nav-primary li {
    
    background-color:#0253a5;
}
.nav-primary li a {  /*  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    display: block;
    color: #f0f0f0;
    padding: 3px 20px;
    font-size: 18px;  
    text-decoration: none;
}

.top-avatarname >.dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    
}
.top-avatarname .dropdown-menu>li>a {
    
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    font-size:18px;
    
}

.pure-container {
    position: relative;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
.nav-primary li a:hover {
    background-color:#2b8dc6;
}

.navbar-toggle.toggle-avatar {
    
    margin-left: 15px;
}

.brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}

.brand {
    padding: 0px;
}
.brand >img {
    height: auto;
    width: auto;
    padding: 10px 0px;
}

.brand {
    position: absolute;
    left: 50%;
    display: block;
}

.topbar{background:#f7f8f8;}
.no-border{border:none;}
.img-caret{  
    position: relative;
    float: right;
    margin-left: 15px;
    top: 2px;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #eee;
    
}

@media (min-width: 768px){
    .navbar-nav>li.top-avatarname {
        
        height: 70px;
        display: table;
    }
    .navbar-nav>li.top-avatarname > a {
        vertical-align:middle;
        display: table-cell;
        font-size:18px;
        
    }
    
}


.nav-avatar{
    
    
    top: 70px;
    /* float: right;
     text-align: right;*/
    padding-right: 15px;
}

.nav-avatar .navbar-nav.nav-avatar >.open>a, .navbar-default .navbar-nav.nav-avatar >.open>a:focus, .navbar-default .navbar-nav.nav-avatar >.open>a:hover {
    color: white;
    background-color:transparent;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: white;
    background-color: transparent;
}

#profile-menu{
    border: none;
    
    margin-top: 70px;
}
.navbar-toggle.toggle-avatar
{border:none;
 
 padding: 0; }

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color:transparent;
}


.globus {
    position: fixed;
    top: 5px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: block;
    cursor: pointer;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    z-index: 100;
    opacity:0.9;
}
.globus:hover {
    opacity: 1;
}
.globus span {
    display: block;
    float: left;
    clear: both;
    height: 4px;
    width: 40px;
    border-radius: 40px;
    background-color: #fff;
    position: absolute;
    right: 3px;
    top: 3px;
    overflow: hidden;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.globus span:nth-child(1) {
    margin-top: 10px;
    z-index: 9;
}
.globus span:nth-child(2) {
    margin-top: 25px;
}
.globus span:nth-child(3) {
    margin-top: 40px;
}

.sub-menu {
    -webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    height: 0;
    width: 0;
    right: 0;
    top: 0;
    position: absolute;
    /*background-color: rgba(38, 84, 133, 1);*/
    background-color: rgba(43,141,198,1);
    border-radius: 50%;
    z-index: 18;
    overflow: hidden;
}
.sub-menu li {
    display: block;
    float: right;
    clear: both;
    height: auto;
    margin-right: -160px;
    -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sub-menu li:first-child {
    margin-top: 200px;
}
.sub-menu li:nth-child(1) {
    -webkit-transition-delay: 0.05s;
}
.sub-menu li:nth-child(2) {
    -webkit-transition-delay: 0.10s;
}
.sub-menu li:nth-child(3) {
    -webkit-transition-delay: 0.15s;
}
.sub-menu li:nth-child(4) {
    -webkit-transition-delay: 0.20s;
}
.sub-menu li:nth-child(5) {
    -webkit-transition-delay: 0.25s;
}
.sub-menu li a {
    color: #fff;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 16px;
    width: 100%;
    display: block;
    float: left;
    line-height: 40px;
}

.oppenned .sub-menu {
    opacity: 1;
    height: 400px;
    width: 400px;
}
.oppenned span:nth-child(2) {
    overflow: visible;
}
.oppenned span:nth-child(1), .oppenned span:nth-child(3) {
    z-index: 100;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.oppenned span:nth-child(1) {
    -webkit-transform: rotate(45deg) translateY(12px) translateX(12px);
    transform: rotate(45deg) translateY(12px) translateX(12px);
}
.oppenned span:nth-child(2) {
    height: 400px;
    width: 400px;
    right: -160px;
    top: -160px;
    border-radius: 50%;
    background-color: rgba(38, 84, 133, 1);
}
.oppenned span:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateY(-10px) translateX(10px);
    transform: rotate(-45deg) translateY(-10px) translateX(10px);
}
.oppenned li {
    margin-right: 168px;
}

.button {
    display: block;
    float: left;
    clear: both;
    padding: 20px 40px;
    background: #fff;
    border-radius: 3px;
    border: 2px solid #10a1ea;
    overflow: hidden;
    position: relative;
}
.button:after {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    content: "";
    position: absolute;
    height: 200px;
    width: 400px;
    -webkit-transform: rotate(45deg) translateX(-540px) translateY(-100px);
    transform: rotate(45deg) translateX(-540px) translateY(-100px);
    background: #10a1ea;
    z-index: 1;
}
.button:before {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 2;
    text-align: center;
    padding: 20px 40px;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
}
.button:hover {
    text-decoration: none;
}
.button:hover:after {
    -webkit-transform: translateX(-300px) translateY(-100px);
    transform: translateX(-300px) translateY(-100px);
}
.button:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.topbar .topbar-ul  >li:nth-child(1) {
    border-left:1px solid #eee;
}
.topbar .topbar-ul  >li {
    border-right:1px solid #eee;
}

.topbar-ul>li {
    float: left;
    padding:0;
}
.topbar-ul{
    float: left;
    margin: 0;
}

.topbar-ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.topbar-ul .visible-xs {
	display : inline!important;
}

@media (min-width: 768px){
	.topbar-ul {
		margin-right : -15px;
	}
	
    .topbar .topbar-ul >li>a {
        padding:5px 25px;
    }
    
    .topbar .topbar-ul >li>a>span {
        padding-left:3px;    
    }
    
    .topbar-ul .visible-xs {
		display : none!important;
	}
}

@media (min-width: 769px) and (max-width: 1180px)  { 
    
    .topbar .topbar-ul >li>a {
        padding: 5px 12px;
    }
}


@media (max-width: 768px){
    .brand >img {
        height: auto;
        width: auto;
        padding: 10px 0px;
        /*max-width: 50px;*/
    }
    .topbar .container {
        padding-right: 0px;
        padding-left: 0px;   
    }
    .topbar-ul {   
        width: 100%;
    }
    .topbar .topbar-ul >li { 
        width: 50%;
        text-align: center;
    } 
}



/* ---------- LIVE-CHAT ---------- */

#live-chat {
    bottom: 0;
    font-size: 12px;
    right: 24px;
    position: fixed;
    width: 300px;
}

#live-chat header {
    border-radius: 10px 10px 0 0;
    color: #fff;
    cursor: pointer;
    padding: 5px 15px;
}
#live-chat h4:before {
    
}
#live-chat h4:after {
    
}

#live-chat h4 {
    
}

#live-chat h5 {
    font-size: 10px;
}

#live-chat form {
    padding: 24px;
}

#live-chat input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 8px;
    outline: none;
    width: 234px;
}

.chat-message-counter {
    background: #54bd60;
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    left: 0;
    line-height: 28px;
    margin: -15px 0 0 -15px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 28px;
}
.chat-close {
    background: #1b2126;
    border-radius: 50%;
    color: #fff;
    display: block;
    float: right;
    font-size: 10px;
    height: 16px;
    line-height: 16px;
    margin: 2px 0 0 0;
    text-align: center;
    width: 16px;
}
.chat {
    background: #fff;
}
.chat-history {
    height: 252px;
    padding: 8px 24px;
    overflow-y: scroll;
}
.chat-message {
    margin: 16px 0;
}
.chat-message img {
    border-radius: 50%;
    float: left;
}

.chat-message-content {
    margin-left: 56px;
}
.chat-time {
    float: right;
    font-size: 10px;
}
.chat-feedback {
    font-style: italic; 
    margin: 0 0 0 80px;
}
.chat-light {
    background: #54bd60;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 11px;
    margin: 7px 0;
    width: 11px;
    position: relative;
    float: right;
}
.chat-header{
    font-size: 1.5em;
    vertical-align: bottom;
    margin-left: 16px;
}



.panel-footer { text-align: center;}




.modules-view h1{
    border-bottom: 2px solid #0253a5;
    color: #0253a5;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 500;
    
}

.btn-group.btn-group-filter > .btn{
    border-radius:0!important;
    
    font-weight: 600;
    font-size: 18px;
    border-radius: 10px;
    color: white;
    
    min-width: 10px;
    padding: 5px 28px;
    color:#7d7b7c;
}
.btn-group.btn-group-filter{
    border: 1px solid #e7e6e5;
    
}
.btn-group.btn-group-filter .btn{
    
}
.btn-group.btn-group-filter .btn:first-child{
    
    
}

.btn-group.btn-group-filter .btn-default.focus, .btn-default:focus,

.btn-group.btn-group-filter .btn-default:active:focus,
.btn-group.btn-group-filter .btn-default:active:hover{
    background-color: #f2f2f2;
    
    
}
.btn-group.btn-group-filter .btn-default:hover {
    
    background-color: #f2f2f2;
    
}
/*Liste des rubrique*/
.rubrique-title{color:#0253a5;text-align:center;font-weight:600;}

.list-group.list-group-rubrique p,.list-group.list-group-rubrique>a {
    font-size:16px;
    text-transform:uppercase;
}

.list-group.list-group-rubrique>a {
    color:white;
}
.list-group-item.list-group-rubrique.active,
.list-group-item.list-group-rubrique.active:focus,
.list-group-item.list-group-rubrique.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.list-group-rubrique > .list-group-item{
    margin-bottom: 2px;
    background-color: #0253a5;
    border:0px solid #f2f2f2;
}

.list-group-rubrique .list-group-item.active, 
.list-group-rubrique .list-group-item.active:focus, 
.list-group-rubrique .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #241f5c;
    border-color: #241f5c;
}

.list-group-rubrique a.list-group-item:focus,.list-group-rubrique  a.list-group-item:hover,

.list-group-rubrique  button.list-group-item:focus,.list-group-rubrique  button.list-group-item:hover {
    color:white;
    text-decoration: none;
    background-color: #241f5c;
}


/*Liste des équipements*/
.equipement-title{color:#0253a5;text-align:center;   font-size:16px;
                  text-transform:uppercase;font-weight:600;}

ul.list-group-equipement {text-align:center;    max-width: 70px;    margin: 0 auto;}
ul.list-group-with-footer {
    text-align: center;
    max-width: 90px;
    margin: 0;
    float: left;
    background:white;
    padding:10px;
}

ul.list-group-equipement>li  {  
    background-color: #cdcccb;
    margin-bottom: 5px;
    width: 65px;
    padding-top: 7px;
    padding-bottom: 7px;
}
ul.list-group-equipement>li  {  
    background-color: #cdcccb;
    margin-bottom: 5px;
    width: 65px;
    padding-top: 7px;
    padding-bottom: 7px;
}
ul.list-group-equipement.list-group-with-footer>li:last-child {background:white;
                                                               padding:0;}

ul.list-group-equipement>li {
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}

ul.list-group-equipement>li.active,ul.list-group-equipement>li:hover, ul.list-group-equipement>li:focus  {
    background-color:#fdc923;
}

ul.list-group-equipement>li  > img {
    vertical-align: middle;
    width: 50px;
    height: 50px;
}
@media (max-width: 768px){
    ul.list-group-equipement {
        
        max-width: 100%;
        
        width: 100%;
        float: none;
        background: white;
        padding: 10px;
        display: inline-block;
    }
    ul.list-group-equipement>li {
        background-color: #cdcccb;
        
        width: auto;
        padding: 10px;
        
        display: inline-block;
    }
}




.panel-modules .panel-footer {
    
    
    padding: 0;
    background-color: white;
    border-top: none;
    border-top: 1px solid #f2f2f2;
    height:45px
        
        
}
.panel-modules .panel-footer>ul{
    
    margin-left:0;
    
}
.panel-modules .panel-footer>ul> li{
    
    padding: 9px 10px;
    
    border-left:1px solid #f2f2f2;
    
}

.panel-modules .panel-body {
    padding: 20px 30px;
    border: 0px solid #a6a2a3;
}

.panel-modules  {
    border: 1px solid #a6a2a3;
    
}

.panel-modules .panel-footer>ul> li img{
    height:26px;
    
}

.panel-modules .panel-footer>ul.pull-right> li>img{
    
    padding-right: 4px;
    padding-left: 4px;
    
}
.panel-modules .panel-footer>ul.pull-left> li>img{
    
    margin-left:0;
    margin-right:0;
    
}

video[poster]{
    height:100%;
    width:100%;
}

video{
    object-fit: inherit;
}

#video-controls {
    text-align: center;
}
#video-controls input[type=range] {
    
    display: block;
    background: red;
    width: 50%;
    height: 10px;
    margin: 10px 25%;
    
    
    -webkit-appearance: none;
    -moz-appearance: none;
    
    cursor: pointer;
    
    height: 100%;
    overflow: hidden;
    
    
}
.panel.panel-video{padding-bottom:15px;}
#video-controls button {
    outline:0;
    border: none;
    width: auto;
    
    display: inline-block;
    padding: 0 6px;
    text-align: center;
    background: none;
    margin: 0 0px;
}


#video-controls input:focus {
    box-shadow: none;
    outline: none;
}


#video-controls input::-webkit-slider-runnable-track {
    background: #e33d44;
    content: '';
    height: 2px;
    pointer-events: none;
}
#video-controls input::-webkit-slider-thumb {
    height: 18px;
    width: 28px;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 5px 0 0 -8px #c7c7c7, 6px 0 0 -8px #c7c7c7, 7px 0 0 -8px #c7c7c7, 8px 0 0 -8px #c7c7c7, 9px 0 0 -8px #c7c7c7, 10px 0 0 -8px #c7c7c7, 11px 0 0 -8px #c7c7c7, 12px 0 0 -8px #c7c7c7, 13px 0 0 -8px #c7c7c7, 14px 0 0 -8px #c7c7c7, 15px 0 0 -8px #c7c7c7, 16px 0 0 -8px #c7c7c7, 17px 0 0 -8px #c7c7c7, 18px 0 0 -8px #c7c7c7, 19px 0 0 -8px #c7c7c7, 20px 0 0 -8px #c7c7c7, 21px 0 0 -8px #c7c7c7, 22px 0 0 -8px #c7c7c7, 23px 0 0 -8px #c7c7c7, 24px 0 0 -8px #c7c7c7, 25px 0 0 -8px #c7c7c7, 26px 0 0 -8px #c7c7c7, 27px 0 0 -8px #c7c7c7, 28px 0 0 -8px #c7c7c7, 29px 0 0 -8px #c7c7c7, 30px 0 0 -8px #c7c7c7, 31px 0 0 -8px #c7c7c7, 32px 0 0 -8px #c7c7c7, 33px 0 0 -8px #c7c7c7, 34px 0 0 -8px #c7c7c7, 35px 0 0 -8px #c7c7c7, 36px 0 0 -8px #c7c7c7, 37px 0 0 -8px #c7c7c7, 38px 0 0 -8px #c7c7c7, 39px 0 0 -8px #c7c7c7, 40px 0 0 -8px #c7c7c7, 41px 0 0 -8px #c7c7c7, 42px 0 0 -8px #c7c7c7, 43px 0 0 -8px #c7c7c7, 44px 0 0 -8px #c7c7c7, 45px 0 0 -8px #c7c7c7, 46px 0 0 -8px #c7c7c7, 47px 0 0 -8px #c7c7c7, 48px 0 0 -8px #c7c7c7, 49px 0 0 -8px #c7c7c7, 50px 0 0 -8px #c7c7c7, 51px 0 0 -8px #c7c7c7, 52px 0 0 -8px #c7c7c7, 53px 0 0 -8px #c7c7c7, 54px 0 0 -8px #c7c7c7, 55px 0 0 -8px #c7c7c7, 56px 0 0 -8px #c7c7c7, 57px 0 0 -8px #c7c7c7, 58px 0 0 -8px #c7c7c7, 59px 0 0 -8px #c7c7c7, 60px 0 0 -8px #c7c7c7, 61px 0 0 -8px #c7c7c7, 62px 0 0 -8px #c7c7c7, 63px 0 0 -8px #c7c7c7, 64px 0 0 -8px #c7c7c7, 65px 0 0 -8px #c7c7c7, 66px 0 0 -8px #c7c7c7, 67px 0 0 -8px #c7c7c7, 68px 0 0 -8px #c7c7c7, 69px 0 0 -8px #c7c7c7, 70px 0 0 -8px #c7c7c7, 71px 0 0 -8px #c7c7c7, 72px 0 0 -8px #c7c7c7, 73px 0 0 -8px #c7c7c7, 74px 0 0 -8px #c7c7c7, 75px 0 0 -8px #c7c7c7, 76px 0 0 -8px #c7c7c7, 77px 0 0 -8px #c7c7c7, 78px 0 0 -8px #c7c7c7, 79px 0 0 -8px #c7c7c7, 80px 0 0 -8px #c7c7c7, 81px 0 0 -8px #c7c7c7, 82px 0 0 -8px #c7c7c7, 83px 0 0 -8px #c7c7c7, 84px 0 0 -8px #c7c7c7, 85px 0 0 -8px #c7c7c7, 86px 0 0 -8px #c7c7c7, 87px 0 0 -8px #c7c7c7, 88px 0 0 -8px #c7c7c7, 89px 0 0 -8px #c7c7c7, 90px 0 0 -8px #c7c7c7, 91px 0 0 -8px #c7c7c7, 92px 0 0 -8px #c7c7c7, 93px 0 0 -8px #c7c7c7, 94px 0 0 -8px #c7c7c7, 95px 0 0 -8px #c7c7c7, 96px 0 0 -8px #c7c7c7, 97px 0 0 -8px #c7c7c7, 98px 0 0 -8px #c7c7c7, 99px 0 0 -8px #c7c7c7, 100px 0 0 -8px #c7c7c7, 101px 0 0 -8px #c7c7c7, 102px 0 0 -8px #c7c7c7, 103px 0 0 -8px #c7c7c7, 104px 0 0 -8px #c7c7c7, 105px 0 0 -8px #c7c7c7, 106px 0 0 -8px #c7c7c7, 107px 0 0 -8px #c7c7c7, 108px 0 0 -8px #c7c7c7, 109px 0 0 -8px #c7c7c7, 110px 0 0 -8px #c7c7c7, 111px 0 0 -8px #c7c7c7, 112px 0 0 -8px #c7c7c7, 113px 0 0 -8px #c7c7c7, 114px 0 0 -8px #c7c7c7, 115px 0 0 -8px #c7c7c7, 116px 0 0 -8px #c7c7c7, 117px 0 0 -8px #c7c7c7, 118px 0 0 -8px #c7c7c7, 119px 0 0 -8px #c7c7c7, 120px 0 0 -8px #c7c7c7, 121px 0 0 -8px #c7c7c7, 122px 0 0 -8px #c7c7c7, 123px 0 0 -8px #c7c7c7, 124px 0 0 -8px #c7c7c7, 125px 0 0 -8px #c7c7c7, 126px 0 0 -8px #c7c7c7, 127px 0 0 -8px #c7c7c7, 128px 0 0 -8px #c7c7c7, 129px 0 0 -8px #c7c7c7, 130px 0 0 -8px #c7c7c7, 131px 0 0 -8px #c7c7c7, 132px 0 0 -8px #c7c7c7, 133px 0 0 -8px #c7c7c7, 134px 0 0 -8px #c7c7c7, 135px 0 0 -8px #c7c7c7, 136px 0 0 -8px #c7c7c7, 137px 0 0 -8px #c7c7c7, 138px 0 0 -8px #c7c7c7, 139px 0 0 -8px #c7c7c7, 140px 0 0 -8px #c7c7c7, 141px 0 0 -8px #c7c7c7, 142px 0 0 -8px #c7c7c7, 143px 0 0 -8px #c7c7c7, 144px 0 0 -8px #c7c7c7, 145px 0 0 -8px #c7c7c7, 146px 0 0 -8px #c7c7c7, 147px 0 0 -8px #c7c7c7, 148px 0 0 -8px #c7c7c7, 149px 0 0 -8px #c7c7c7, 150px 0 0 -8px #c7c7c7, 151px 0 0 -8px #c7c7c7, 152px 0 0 -8px #c7c7c7, 153px 0 0 -8px #c7c7c7, 154px 0 0 -8px #c7c7c7, 155px 0 0 -8px #c7c7c7, 156px 0 0 -8px #c7c7c7, 157px 0 0 -8px #c7c7c7, 158px 0 0 -8px #c7c7c7, 159px 0 0 -8px #c7c7c7, 160px 0 0 -8px #c7c7c7, 161px 0 0 -8px #c7c7c7, 162px 0 0 -8px #c7c7c7, 163px 0 0 -8px #c7c7c7, 164px 0 0 -8px #c7c7c7, 165px 0 0 -8px #c7c7c7, 166px 0 0 -8px #c7c7c7, 167px 0 0 -8px #c7c7c7, 168px 0 0 -8px #c7c7c7, 169px 0 0 -8px #c7c7c7, 170px 0 0 -8px #c7c7c7, 171px 0 0 -8px #c7c7c7, 172px 0 0 -8px #c7c7c7, 173px 0 0 -8px #c7c7c7, 174px 0 0 -8px #c7c7c7, 175px 0 0 -8px #c7c7c7, 176px 0 0 -8px #c7c7c7, 177px 0 0 -8px #c7c7c7, 178px 0 0 -8px #c7c7c7, 179px 0 0 -8px #c7c7c7, 180px 0 0 -8px #c7c7c7, 181px 0 0 -8px #c7c7c7, 182px 0 0 -8px #c7c7c7, 183px 0 0 -8px #c7c7c7, 184px 0 0 -8px #c7c7c7, 185px 0 0 -8px #c7c7c7, 186px 0 0 -8px #c7c7c7, 187px 0 0 -8px #c7c7c7, 188px 0 0 -8px #c7c7c7, 189px 0 0 -8px #c7c7c7, 190px 0 0 -8px #c7c7c7, 191px 0 0 -8px #c7c7c7, 192px 0 0 -8px #c7c7c7, 193px 0 0 -8px #c7c7c7, 194px 0 0 -8px #c7c7c7, 195px 0 0 -8px #c7c7c7, 196px 0 0 -8px #c7c7c7, 197px 0 0 -8px #c7c7c7, 198px 0 0 -8px #c7c7c7, 199px 0 0 -8px #c7c7c7, 200px 0 0 -8px #c7c7c7, 201px 0 0 -8px #c7c7c7, 202px 0 0 -8px #c7c7c7, 203px 0 0 -8px #c7c7c7, 204px 0 0 -8px #c7c7c7, 205px 0 0 -8px #c7c7c7, 206px 0 0 -8px #c7c7c7, 207px 0 0 -8px #c7c7c7, 208px 0 0 -8px #c7c7c7, 209px 0 0 -8px #c7c7c7, 210px 0 0 -8px #c7c7c7, 211px 0 0 -8px #c7c7c7, 212px 0 0 -8px #c7c7c7, 213px 0 0 -8px #c7c7c7, 214px 0 0 -8px #c7c7c7, 215px 0 0 -8px #c7c7c7, 216px 0 0 -8px #c7c7c7, 217px 0 0 -8px #c7c7c7, 218px 0 0 -8px #c7c7c7, 219px 0 0 -8px #c7c7c7, 220px 0 0 -8px #c7c7c7, 221px 0 0 -8px #c7c7c7, 222px 0 0 -8px #c7c7c7, 223px 0 0 -8px #c7c7c7, 224px 0 0 -8px #c7c7c7, 225px 0 0 -8px #c7c7c7, 226px 0 0 -8px #c7c7c7, 227px 0 0 -8px #c7c7c7, 228px 0 0 -8px #c7c7c7, 229px 0 0 -8px #c7c7c7, 230px 0 0 -8px #c7c7c7, 231px 0 0 -8px #c7c7c7, 232px 0 0 -8px #c7c7c7, 233px 0 0 -8px #c7c7c7, 234px 0 0 -8px #c7c7c7, 235px 0 0 -8px #c7c7c7, 236px 0 0 -8px #c7c7c7, 237px 0 0 -8px #c7c7c7, 238px 0 0 -8px #c7c7c7, 239px 0 0 -8px #c7c7c7, 240px 0 0 -8px #c7c7c7;
    margin-top: -8px;
    border: 1px solid #777;
}
#video-controls input::-moz-range-track {
    width: 240px;
    height: 2px;
}
#video-controls input::-moz-range-thumb {
    height: 18px;
    width: 28px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #777;
    position: relative;
}
#video-controls input::-moz-range-progress {
    height: 2px;
    background: #e33d44;
    border: 0;
    margin-top: 0;
}
#video-controls input::-ms-track {
    background: transparent;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    border-width: 0;
    color: transparent;
    height: 2px;
    margin-top: 10px;
    width: 240px;
}
#video-controls input::-ms-thumb {
    height: 18px;
    width: 28px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #777;
}
#video-controls input::-ms-fill-lower {
    background: #e33d44;
    border-radius: 0;
}
#video-controls input::-ms-fill-upper {
    background: #c7c7c7;
    border-radius: 0;
}
#video-controls input::-ms-tooltip {
    display: none;
}

/*video player*/
#playlist {
    
    background:white;
    padding:5px;
}
#playlist li{
    cursor:pointer;
    padding:8px;
    background:#cdcccb;
    margin-bottom:5px;
    font-size: 16px;
    font-weight: 600;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
}
#playlist li:focus , #playlist li:hover, #playlist li.active{     
    background-color: #fdc923; 
}
#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    
    
    border:1px solid silver;
}



.label {
    
    padding: 2px 8px;
}
.rounded {
    border-radius: 4px !important;
}


.label {
    display: inline;
    font-size: 15px;
    
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label-control {
    
    font-weight: normal;
}



ul.document-list p{ margin:0;
                    
}
.document-list li {
    margin: 5px;
    display: inline-block;
    
    max-width:150px;
    text-align:center;
}

.document-list li a{
    padding: 5px 10px;
    display: inline-block;
    text-align:center; 
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;  
    -webkit-border-radius :2px;
    border-radius:2px;
    
}

.document-list li a:hover{
    background: #fcfcfc;
    
    box-shadow:rgba(0, 0, 0, 0.3) 0 4px 4px 0;
    -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 4px 4px 0;
    -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 4px 4px 0;
    
}
.document-list li p{
    font-size: 13px;
    
}

.panel-wrapper {
	max-width : 400px;
	margin : 60px auto 20px auto;
}

.footer {
	position : fixed;
	width : 100%;
	height : 30px;
	line-height : 30px;
	font-size : 11px;
	color : #333333;
	left : 0;
	bottom : 0;
	background-color: #F7F8F8;
}