/**
* Fonts
*/
@font-face {
    font-family: "proxima-nova-bold";
    src: url("fonts/PremierInnSansWeb-Bold.woff2") format("woff2");
    font-display: auto;
    font-style: normal;
}
@font-face {
    font-family: "proxima-nova";
    src: url("fonts/PremierInnSansWeb-Regular.woff2") format("woff2");
    font-display: auto;
    font-style: normal;
}

/**
* Fonts
*/
html, body {
  text-align: center;
  color: #ffffff;
  margin: 0px;
  font-family: "proxima-nova", helvetica, arial, sans-serif;
}
h1 {
    font-family: "proxima-nova-bold", helvetica, arial, sans-serif;
    font-size: 3em;
    line-height: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
h3 {
    font-family: "proxima-nova", helvetica, arial, sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.4em;
}
button {
    border: 0;
    background: none;
    cursor: pointer;
}
video {
    width: 100%;
}

#nodflix-container {
  background: linear-gradient(177deg, rgba(82,30,89,1) 0%, rgba(50,19,54,1) 82%);
  display: flex;
  flex-direction: row;
}
#nodflix-container #col-1 {
}
#nodflix-container #col-2 {
    max-width: 780px;
}
#nodflix-container-single {
  display: none;
  background: linear-gradient(177deg, rgba(82,30,89,1) 0%, rgba(50,19,54,1) 82%);
  justify-content: center;
  align-items: center;
}

#nodflix-container,
#nodflix-container-single {
  max-width: 1200px;
  min-height: 700px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

#logo,
#header,
#content,
#footer {
  padding: 10px;
  z-index: 2;
  position: relative;
}
#logo {
  max-width: 400px;
  height: 100px;
  background: url("img/logo-nod-flix.png") center left no-repeat;
  background-size: 231px auto;
  background-position: 30px center;
}
#header {
  max-width: 340px;
  padding: 0px 30px 0px 30px;
}
#content {
  width: calc(100% - 60px);
  color: #000000;
  padding: 0px 30px 0px 30px;
}
#footer {
  max-width: 400px;
  height: 240px;
  background: url("img/footer-bed.png") bottom center no-repeat;
  background-size: auto 130px;
  background-position: center center;
}


.video-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.video-container .video-holder {
  width: 220px;
  min-width: 180px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-right: 20px;
}
.video-container .video {
  width: 100%;
  min-width: 180px;
  height: 120px;
}
.video-container .controls {
  width: 100%;
  height: 60px;
  background-color: #EBE9E5;
  padding-top: 10px;
}
.video-container .controls p {
  font-size: 12px;
    text-align: left;
    padding-left: 10px;
    padding-top: 2px;
    color: black;
    font-family: 'proxima-nova-bold';
}
.controls #button-start {
    float: right;
    margin-right: 10px;
    margin-top: 4px;
}
.controls #button-start button i {
    background-image: url(img/button-play-grey.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
.controls #button-start button:hover i {
  opacity: 0.7;
  cursor: pointer;
}

.closebutton:hover {
  opacity: 0.7;
  cursor: pointer;
}


#videozoomed {
  position: relative;
  display: flex;
  width: max-content;
  height: max-content;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
}
#videozoomed .video-holder {
  /* width: 750px; */
  /* height: 500px; */
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
    padding-left: 150px;
    padding-right: 150px;
}
#videozoomed .video {
  width: 100%;
  /* min-width: 500px; */
}

#videozoomed #videozoomedactual {
    /* width: 600px;
    height: 400px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: -60px;
}
#videozoomed .controls {
    position: absolute;
    width: calc(100% - 320px); 
    display: flex;
    justify-content: space-around;
    opacity: 1;
    transition: opacity 0.4s;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #8ACBBF;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-top: -4px;
}
/* #videozoomed:hover .controls {
    opacity: 1;
} */
#videozoomed .controls p {
    margin-left: 20px;
    margin-right: 80px;
    color: black;
    font-family: 'proxima-nova-bold';
}

#videozoomed .controls button {
    background: transparent;
    color: #fff;
    font-weight: bolder;
    text-shadow: 1px 0.5px 0.5px #000;
    border: none;
    cursor: pointer;
}
#videozoomed .controls .timeline {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    /* border-right: 3px solid #ccc;
    border-left: 3px solid #ccc; */
}
#videozoomed .controls .timeline .bar{
    background: rgb(1, 1, 65);
    height: 4px;
    flex: 1;
}
#videozoomed .controls .timeline .bar .inner{
    background: #ccc;
    width: 0%;
    height: 100%;
}


/* video buttons */
i#fa-play, 
i#fa-pause, 
i#fa-fast-backward, 
i#fa-fast-forward, 
i#fa-expand {
  display: block;
}
#videozoomed .controls button i#fa-play {
    background-image: url(img/button-play.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
#videozoomed .controls button i#fa-play:hover {
  opacity: 0.8;
  cursor: pointer;
}
#videozoomed .controls button i#fa-pause {
    background-image: url(img/button-pause.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
#videozoomed .controls button i#fa-pause:hover {
  opacity: 0.8;
  cursor: pointer;
}
#videozoomed .controls button i#fa-fast-backward {
    background-image: url(img/button-back.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
#videozoomed .controls button i#fa-fast-backward:hover {
  opacity: 0.8;
  cursor: pointer;
}
#videozoomed .controls button i#fa-fast-forward {
    background-image: url(img/button-forward.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
#videozoomed .controls button i#fa-fast-forward:hover {
  opacity: 0.8;
  cursor: pointer;
}
#videozoomed .controls button i#fa-expand {
    background-image: url(img/button-expand.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
#videozoomed .controls button i#fa-expand:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* progress bar */
#videozoomed .controls .timeline .bar {
  background-color: #ebebeb;
  height: 8px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 5px;
}
#videozoomed .controls .timeline .bar .inner {
  background-color: #222222;
  border-radius: 5px;
}



.closebutton:hover {
  opacity: 0.7;
  cursor: pointer;
}



.fa {
    font-size: 14px !important;
}
.closebutton {
  position: absolute;
  top: 15px;
  right: 15px;
  opacity: 1;
  margin-top: -90px;
  padding-right: 150px;
}
.closebutton i {
    background-image: url(img/button-close.png);
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}

.closebutton:hover {
  opacity: 0.7;
  cursor: pointer;
}

#disclaimer {
    text-align: right;
    font-size: 80%;
    color: #ebebeb;
    margin-right: 50px;
}



/* clouds and stars */
.cloud-overlay {
  width: 100%;
  position: absolute;
  max-width: 1200px;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  overflow: hidden;
}
.cloud {
  position: absolute;
  z-index: 1;
}
.cloud-partial {
  top: 50px;
  left: 0px;
  width: 392px;
  height: 153px;
  background: url("img/cloud-2.png") center center no-repeat;
  background-size: 276px 74px;
  animation: shake3 150s ease infinite;
}
.cloud1 {
  top: 10px;
  left: 100px;
  width: 276px;
  height: 64px;
  background: url("img/cloud-1.png") center center no-repeat;
  background-size: 276px 64px;
  animation: shake1 140s ease infinite;
}
.cloud2 {
  top: 140px;
  right: 50px;
  width: 206px;
  height: 84px;
  background: url("img/cloud-2.png") center center no-repeat;
  background-size: 206px 84px;
  animation: shake2 160s ease infinite;
}
.cloud3 {
  top: 425px;
  left: 100px;
  width: 276px;
  height: 74px;
  background: url("img/cloud-1.png") center center no-repeat;
  background-size: 246px 74px;
  animation: shake3 80s ease infinite forwards;
}
.cloud4 {
  top: 600px;
  left: 100px;
  width: 276px;
  height: 74px;
  background: url("img/cloud-2.png") center center no-repeat;
  background-size: 276px 74px;
  animation: shake4 140s ease infinite forwards;
}
@keyframes shake1 {
	0%, 100% {transform: translateX(300px);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(50px);}
	20%, 40%, 60%, 80% {transform: translateX(300px);}
}
@keyframes shake2 {
	0%, 100% {transform: translateX(-400px);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(100px);}
	20%, 40%, 60%, 80% {transform: translateX(-40px);}
}
@keyframes shake3 {
	0% {transform: translateX(-350px);}
	100% {transform: translateX(1000px);}
}
@keyframes shake4 {
	0% {transform: translateX(1000px);}
	100% {transform: translateX(-400px);}
}

.star {
  width: 30px;
  height: 30px;
  background: url("img/star.gif") center center no-repeat;
  background-size: 30px 30px;
  position: absolute;
}
#star1 {
  top: 45px;
  right: 30px;
  background-size: 15px 15px;
}
#star2 {
  top: 110px;
  left: 250px;
  background-size: 25px 25px;
}
#star3 {
  top: 610px;
  left: 401px;
  background-size: 10px 10px;
}
#star4 {
  top: 170px;
  left: 25px;
  background-size: 20px 20px;
}
#star5 {
  top: 455px;
  left: 250px;
  background-size: 15px 15px;
}
#star6 {
  top: 25px;
  left: 430px;
  background-size: 25px 25px;
  z-index: 3;
}
#star7 {
  top: 75px;
  left: 45px;
  background-size: 10px 10px;
}
#star8 {
  top: 445px;
  right: 70px;
  background-size: 25px 25px;
}
#star9 {
  top: 255px;
  right: 50px;
  background-size: 15px 15px;
}
#star10 {
  top: 425px;
  right: 70px;
  background-size: 25px 25px;
}
#star10 {
  top: 575px;
  left: 35px;
  background-size: 15px 15px;
}
#star11 {
  top: 75px;
  right: 305px;
  background-size: 15px 15px;
}
@media only screen and (max-width: 1150px) {
  #nodflix-container {
    align-items: baseline;
  }
}
@media only screen and (max-width: 979px) {
  #nodflix-container {
    align-items: baseline;
  }
  #nodflix-container-single {
  }
  #videozoomed .video-holder {
      padding-left: 50px;
      padding-right: 50px;
  }
  #videozoomed .controls {
      width: calc(100% - 120px); 
  }
  .closebutton {
      padding-right: 50px;
  }
@media only screen and (max-width: 580px) {

  #logo,
  #header,
  #content,
  #footer {
    padding: 10px 0px 10px 0px;
  }
  #content {
      width: calc(100% - 100px);
      padding: 10px 50px 10px 50px;
  }
  #nodflix-container {
    flex-direction: column;
    padding-bottom: 50px;
  }
  .video-container {
      justify-content: center;
  }
  #logo {
    background-position: center center;
    width: 100%;
  }
  #header {
    width: calc(100% - 60px);
    padding: 10px 30px 10px 30px;
  }
  #content {
  }
  #footer {
    width: 100%;
  }

  .video-container .video-holder {
    width: 100%;
    height: unset;
    margin-right: 0px;
  }
  .video-container .video {
    width: 100%;
    height: unset;
  }
  .video-container .controls {
      height: 50px;
      padding-top: 10px;
      margin-top: -4px;
  }

  #videozoomed .controls .timeline .bar {
    margin-left: 0px;
    margin-right: 0px;
  }
  #videozoomed .controls p#videozoomedtitle {
    /* display: none; */
  }
  #videozoomed .controls p {
      margin-left: 20px;
      margin-right: 10px;
  }
}