//$main-bg-color: #4bc7fa;
$main-bg-color: #4bc7fa;
$back-bg-color: #ffffff;
$main-color: #ffffff;
$back-color: #000000;

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


a, a:active, a:focus {outline: none;}
:focus {outline:none;}
::-moz-focus-inner {border:0;}
button::-moz-focus-inner {border: 0;}

body {
  padding-top: 55px;
  padding-bottom: 20px;
  /*font-family:  "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;*/
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-light {
  background: #FFFFFF;
}

.video-thumb-container {
  min-height: 150px;
  text-align: justify;
  text-align: center;


  border-radius: 3px;
  background: white;
  padding: 7px;
  margin: 10px 19px;

  -webkit-box-shadow: 2px 2px 5px 1px rgba(192,192,192,1);
  -moz-box-shadow: 2px 2px 5px 1px rgba(192,192,192,1);
  box-shadow: 2px 2px 5px 1px rgba(192,192,192,1);
}

.video-thumb-container.saved {
  -webkit-box-shadow: 2px 2px 5px 1px rgba(193,46,42,1);
  -moz-box-shadow: 2px 2px 5px 1px rgba(193,46,42,1);
  box-shadow: 2px 2px 5px 1px rgba(193,46,42,1);
}

.video-thumb-container.saved,
.video-thumb-container.saved * {
  background: rgba(193,46,42,1);
  color: rgb(255,255,255) !important;
}

.video-thumb-container.visited {
  -webkit-box-shadow: 2px 2px 5px 1px rgba(75,199,250,1);
  -moz-box-shadow: 2px 2px 5px 1px rgba(75,199,250,1);
  box-shadow: 2px 2px 5px 1px rgba(75,199,250,1);
}

.video-thumb-container.visited,
.video-thumb-container.visited * {
  background: rgba(75,199,250,1);
  color: rgb(255,255,255) !important;
}

.video-thumb-container img {
  margin: 0 auto;
}
.video-thumb-container a {
  display: block;
}


.video-player-jumbotron {
  background: $main-bg-color;
  padding: 0;
  border-bottom: 3px solid #000;

    /*background: #000;*/
    /*background-color: rgb(35, 72, 88);
    background-image: url('../img/bg-default-video-container.jpg');*/
    /*background-size: cover;*/
    /*border-color: $main-bg-color;*/
    background: $back-bg-color;
    color: $back-color;
    margin-bottom: 0;
  }

.video-list-jumbotron {
  background: #000000;
  margin: 0;
}

  .video-player-container {
  max-height: 510px;
  margin: 0px 0;

}

.video-player-container iframe {
  max-height: 510px;
  display: block;
}

.video-player-loading-container p {
  color: #FFFFFF;
  font-size: 2em;
  position: absolute;
  top: 50%;
  margin-top: -1em;
  text-align: center;
  width: 100%;
}

/*.video-player-loading-container,
.video-question-container,
.video-text-container {*/
/*.jumbotron > .container > div {*/
.video-jumbotron-item:not(.video-player-container) {
  min-height: 510px;
  display: block;
  padding: 10px 0;
  position: relative;
}

.video-player-container {
  padding: 0 !important;
}

.video-text-container,
.video-text-container p {
  color: $back-color;
  font-size: 1.2em;
}

.video-question-container,
.video-question-container p {
  color: $back-color;
  font-size: 14px;
}


form .checkbox.size-half,
form .radio.size-half {
  width: 49%;
  display: inline-block;
}

form label {
  display: block;
}

.video-question-form-submit-container {
  position: absolute;
  width: 100%;
  bottom: 10px;
  height: 35px;
}

.video-question-container {
  position: relative;
  padding-bottom: 35px;
}

.video-question-form-submit-container button {
  width: 100%;
  overflow: hidden;
}

i.glyphicon {
  margin-right: 3px;
}


@-webkit-keyframes fadeVideoToText {
  0%   { background-color: $back-bg-color; border-color: $main-bg-color; }
  100% { background-color: $main-bg-color; border-color: $back-bg-color; }
}
@-moz-keyframes fadeVideoToText {
  0%   { background-color: $back-bg-color; border-color: $main-bg-color; }
  100% { background-color: $main-bg-color; border-color: $back-bg-color; }
}
@-o-keyframes fadeVideoToText {
  0%   { background-color: $back-bg-color; border-color: $main-bg-color; }
  100% { background-color: $main-bg-color; border-color: $back-bg-color; }
}
@keyframes fadeVideoToText {
  0%   { background-color: $back-bg-color; border-color: $main-bg-color; }
  100% { background-color: $main-bg-color; border-color: $back-bg-color; }
}

@-webkit-keyframes fadeVideoToTextBorder {
  0%   { border-color: $main-bg-color; }
  100% { border-color: $back-bg-color; }
}
@-moz-keyframes fadeVideoToTextBorder {
  0%   { border-color: $main-bg-color; }
  100% { border-color: $back-bg-color; }
}
@-o-keyframes fadeVideoToTextBorder {
  0%   { border-color: $main-bg-color; }
  100% { border-color: $back-bg-color; }
}
@keyframes fadeVideoToTextBorder {
  0%   { border-color: $main-bg-color; }
  100% { border-color: $back-bg-color; }
}

.backgroundVideoToText .video-player-jumbotron {
  background-image:none !important;
  -webkit-animation: fadeVideoToText 1s ease-in, fadeVideoToTextBorder 1s ease-in;
  -moz-animation: fadeVideoToText 1s ease-in, fadeVideoToTextBorder 1s ease-in;
  -o-animation: fadeVideoToText 1s ease-in, fadeVideoToTextBorder 1s ease-in;
  animation: fadeVideoToText 1s ease-in, fadeVideoToTextBorder 1s ease-in;

  background-color: $main-bg-color;
  border-color: $back-bg-color;
  /*background-image: url('../img/bg-default-video-container.jpg');*/
  background-size: cover;
}

.backgroundVideoToText .navbar {
  background-image:none !important;
  -webkit-animation: fadeVideoToTextBorder 1s ease-in;
  -moz-animation: fadeVideoToTextBorder 1s ease-in;
  -o-animation: fadeVideoToTextBorder 1s ease-in;
  animation: fadeVideoToTextBorder 1s ease-in;

  border-color: $back-bg-color;
}


@-webkit-keyframes fadeTextToVideo {
  0%   { background-color: $main-bg-color; border-color: $back-bg-color; }
  100% { background-color: $back-bg-color; border-color: $main-bg-color; }
}
@-moz-keyframes fadeTextToVideo {
  0%   { background-color: $main-bg-color; border-color: $back-bg-color; }
  100% { background-color: $back-bg-color; border-color: $main-bg-color; }
}
@-o-keyframes fadeTextToVideo {
  0%   { background-color: $main-bg-color; border-color: $back-bg-color; }
  100% { background-color: $back-bg-color; border-color: $main-bg-color; }
}
@keyframes fadeTextToVideo {
  0%   { background-color: $main-bg-color; border-color: $back-bg-color; }
  100% { background-color: $back-bg-color; border-color: $main-bg-color; }
}

@-webkit-keyframes fadeTextToVideoBorder {
  0%   { border-color: $back-bg-color; }
  100% { border-color: $main-bg-color; }
}
@-moz-keyframes fadeTextToVideoBorder {
  0%   { border-color: $back-bg-color; }
  100% { border-color: $main-bg-color; }
}
@-o-keyframes fadeTextToVideoBorder {
  0%   { border-color: $back-bg-color; }
  100% { border-color: $main-bg-color; }
}
@keyframes fadeTextToVideoBorder {
  0%   { border-color: $back-bg-color; }
  100% { border-color: $main-bg-color; }
}

.backgroundTextToVideo .video-player-jumbotron {
  background-image:none !important;
  -webkit-animation: fadeTextToVideo 1s ease-in, fadeTextToVideoBorder 1s ease-in;
  -moz-animation: fadeTextToVideo 1s ease-in, fadeTextToVideoBorder 1s ease-in;
  -o-animation: fadeTextToVideo 1s ease-in, fadeTextToVideoBorder 1s ease-in;
  animation: fadeTextToVideo 1s ease-in, fadeTextToVideoBorder 1s ease-in;

  background-color: $back-bg-color;
  border-color: $main-bg-color;
}

.backgroundTextToVideo .navbar {
  -webkit-animation: fadeTextToVideoBorder 1s ease-in;
  -moz-animation: fadeTextToVideoBorder 1s ease-in;
  -o-animation: fadeTextToVideoBorder 1s ease-in;
  animation: fadeTextToVideoBorder 1s ease-in;

  border-color: $main-bg-color;
}

.img-logo {
  max-height:100%;
}

.navbar {
  border-bottom: 3px solid;
  /*border-color: $main-bg-color;*/
  min-height: 60px;
  padding-top: 2px;
}

hr {
  border: 2px solid transparent;
  margin-top: 0;
}

.navbar-toggle {
  background: $main-bg-color;
}

.navbar-toggle .icon-bar {
  background: #000000;
}

button {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.navbar-form.navbar-right {
  padding-top: 3px;
}

.navbar-brand {
  padding-top: 5px;
  padding-bottom: 5px;
}


.video-list-jumbotron {
  padding-top: 10px;
  padding-bottom: 10px;
}

.jumbotron.video-player-jumbotron {
  background-image: url('/img/bg-text-pattern.jpg');
  background-image: url('/img/bg-pattern-lakat.jpg') !important;
  background-size: 100%;
  background-position-y: -170px;
}

.video-jumbotron-item.video-text-container,
.video-question-container,
.video-registration-container {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  padding: 10px !important;
}

.jumbotron.video-player-jumbotron * {
  color: black;
}

.video-jumbotron-item.video-text-container {

}

.jumbotron-margin {
  margin-top: 15px;
  margin-bottom: 15px;
}

.jumbotron, .jumbotron * {
  font-weight: bold;
}

.btn-success, .btn-success:hover, .btn-success:focus {
  background-color: #4bc7fa;
  background-image: none;
  color: #000 !important;
}

.btn-success i {
  color: #000 !important;
}
.btn-primary i {
  color: #fff !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus {
  background-color: #000;
  background-image: none;
  color: #fff !important;
}

.alert {
  margin: 20px 0px 5px 0px;
}

.alert.alert-danger {
  background-image: none !important;
  background-color: #f00;
}

.alert.alert-success {
  background-image: none;
  background-color: #0f0;
  margin: 20px 0px 5px 0px;
}

.navbar-brand {
  padding: 2px 0px 0px 10px;
}

.glyphicon-refresh-animate {
  -animation: spin .7s infinite linear;
  -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}

.video-player-container {
  position: relative;
}

#video-kerdesek-button {
  position: absolute;
  z-index: 1000;
  left: 10px;
  top: 5px;
}

#video-ajanlom-button {
  position: absolute;
  z-index: 1000;
  right: 10px;
  top: 5px;

}
#video-kollega-button {
  position: absolute;
  z-index: 1000;
  right: 10px;
  top: 5px;
}

#video-eloado-button {
  position: absolute;
  z-index: 1000;
  right: 10px;
  top: 43px;
}

h3 {
  margin-top: 0;
}

#video-kollega-modal-text {
  font-weight: bold;
  margin-top: 10px;
}


body {
  font-weight: normal !important;
  font-size: 62.5%/1.5;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

tr, td, p {
  font-weight: normal !important;
}



body, html {
	min-height: 100%;
	height: 100%;
	padding-bottom: 0px !important;
}

.jumbotron {
min-height: calc(100%);
}

.jumbotron.video-player-jumbotron {
    background-attachment: fixed;
    background-position: center -100px;
    background-repeat: no-repeat;
}

html {
overflow-y: scroll;
}


.alert a, .alert a:hover, .alert a:visited {

    text-shadow: 0px 0px 1px #000;
    color: #4bc7fa !important;

}

.alert-success.alert-success {
margin-top: 20px;
background-color: #4bc7fa;
border-color: #000000;
}