/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar {
margin-bottom: 0;
border-radius: 0;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}

/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}

.panel-body {
margin: -10px -10px -10px -10px;
}

/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}

.leftStuff{float:left;color:#999;padding:0 0 0 10px;font-size: 80%;}

.carousel-inner img {
width: 80%; /* Set width to 100% */
margin: auto;
min-height:150px;
}

/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none; 
}
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} 
}

.row-no-gutters{
margin-right:-10px;
margin-left:-10px
}.row-no-gutters [class*=col-]{
padding-right:3px;
padding-left:3px;
margin-bottom: 5px;
}

/* 5 columns grid */
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;    
}

.col-xs-5ths {
width: 20%;
float: left;
}

@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

.jumbotron{
padding-top:5px;
padding-bottom:5px;
margin-bottom:-15px;
color:inherit;
background-color:black;
color: white;
}

.thumbcontain {
border-style: solid;
border-color: grey;
border-width: 1px;
background-color: white;
padding: 1px;
width: 100%;
}

.thumbtxt{

}

.thumbbtm{
color: grey;
font-size: 80%;
}

.itemsContainer {

}

.itemsContainer:hover .play{display:block}

.play{
position: absolute;
display:none;
top:22%; 
width:65px;
margin:0 auto; left:0px;
right:0px;
z-index:100
} 

.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}

.affix + .container-fluid {
padding-top: 55px;
}

.videocontnr {
background-color: white;
padding: 0;
margin-top: 20px;
width: 100%;
border-style: solid;
border-width: 0px;
}

.zoom {
transition: transform .2s; /* Animation */
opacity: 0.9;
transition: 0.3s;
}

.zoom:hover {
transform: scale(1.03); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
position: absolute;
z-index: 1000;
opacity: 1;
}

.showme {
display: none;
}

.thumbcontain:hover .showme {
display: block;
}

.table-borderless td,
.table-borderless th {
border: 0 !important;
}

@media screen and (max-width: 768px) {
#leftsidebar {
display:none;
}
}

@media screen and (max-width: 768px) {
#desktopheader {
display:none;
}
}
