html,
body {
  height: 100%;
  background: #F6F8F8;
  /* background-color: #ECF0F1; */
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height + footer margin-top */
  margin: 0 auto -80px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
  margin-top: 20px;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (min-width: 767px) {
    #forgotpsw {
        margin-top: 5px;
    }
    #login-dialog {
    width: inherit;
    }
}
@media (max-width: 767px) {
  #footer {
    /*margin-left: -20px;*/
    /*margin-right: -20px;*/
    /*padding-left: 20px;*/
    /*padding-bottom: -30px;*/
  }
  .bottom-menu {
    padding-bottom: 0px;
    padding-top: 10px;
  }
}

@media (max-width: 480px) {
 h2{
    font-size: 30px;
 }
 h3{
    font-size: 26px;
 }
 h4
 {
    font-size: 22px;
 }
 h5
 {
    font-size: 18px;
 }
 h6
 {
    font-size: 20px
 }
}

.hid {
  display: none;
}

.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.login {
  position: relative;
  top: 5px;
  right: 0px;
}

#user-avatar {
  /* margin: 2px 8px 50px 0px; */
  border-radius: 2px;
  box-shadow: 0 0px 0 #fff;
}


.user-btn {
  width: 160px;
}

.no-style {
  list-style: none;
}

.video-thumbnail {
  position: relative;
  width: 200px;
}

.playable-thumbnail-image {
  cursor: pointer;
  width: 100%;
}

.play-overlay {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  cursor: pointer;
  /*display: none;*/
}

#yt-player-container {
  display: none;
  cursor: pointer;
  position: fixed;
  z-index:99999;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: gray;
  /* filter: alpha(opacity=90); */
  /* opacity: 0.9; */
  background: rgba(0,0,0,0.7);

}

#yt-player {
  position: fixed;
  height: 390px;
  margin-top: -195px;
  width: 640px;
  margin-left: -320px;
  top: 50%;
  left: 50%;
}


#vm-player-container {
  display: none;
  cursor: pointer;
  position: fixed;
  z-index:99999;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: gray;
  /* filter: alpha(opacity=90); */
  /* opacity: 0.9; */
  background: rgba(0,0,0,0.7);

}

#vm-player {
  position: fixed;
  height: 390px;
  margin-top: -195px;
  width: 640px;
  margin-left: -320px;
  top: 50%;
  left: 50%;
}

.boxsizingBorder {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.outline {
  outline-color: #1abc9c;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 0px;
  transition:all 0.1s;
  -webkit-transition:all 0.1s;
}

.outline:hover {
  outline-offset: 3px;
}

hr {
  margin: 44px 0 44px 0;
  height: 1px;
  background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
  background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
  background: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
  background: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.30), rgba(0,0,0,0));
}

.col-centered {
  margin: 0 auto;
  float: none;
}

.rounded {
  border-radius: 4px;
}

.text-justify {
  text-align: justify;
}

.text-padding {
  padding: 0px 14px;
}

.select-fix .btn {
  width: 400px !important;
}

.tooltip-inner {
    width: 400px;
}

.inverted {
  background-color: #1ABC9C;
}

body { padding-top: 70px; }

.banner-text {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.banner {
  position:relative;
}