/* Portrait layout (default) */

.content {
  overflow: hidden;
  margin-left: 4.6vw;
  /* scroll-behavior: smooth; */
  /* transition:  margin-top 0.3s; */
  transition: transform 250ms ease-out;
}

.content .title {
  font-size: 3vw;
  margin-top: 3vw;
  margin-left: 0.5vw;
  height: 3.8vw;
}

.content .movies {
  white-space: nowrap;
  width: 100%;
  /* transition: margin-left 0.3s; */
  /* display: flex; */
  /* padding-top: 1vw; */
  margin-top: 2.5vw;

  transition: transform 400ms ease-out;
  margin-left: 0.5vw;
  margin-bottom: 0.5vw;
}

.content .movies .movie {
  /* width: 15.4vw;
     height: 22.4vw;
     margin-right: 2vw;
     display: inline-block; */

  width: 15.5vw;
  height: 22.5vw;
  margin-right: 1.8vw;
  display: inline-block;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  margin-left: 0.3vw;
  /* margin-left: 0.26vw; */

  /* border: 0.3vw solid transparent;    */
  /* transition: border-color 300ms linear; */
}

.content .movies .movie:before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: url("../img/placeholders/show.png") no-repeat center;
  background-size: cover;
  z-index: -1;
  opacity: 0.2;
}

.content .movies .movie.podcast {
  width: 22.5vw;

}

.content .movies .movie.podcast:before {
  background-image: url("../img/placeholders/podcast.png");

}

/* .content .movies .movie .submovie{ */
/* width: 15vw;
     height: 22vw;
     display: inline-block;
     background-size: cover;
     position: relative;
  */

/* width: 15vw;
     height: 22vw;
     background-size: cover;
     position: relative;    */
/* transition:  border-width 0.3s;  */
/* } */

.content .movies .movie .langlogo {
  position: absolute;
  width: 3vw;
  height: 2.5vw;
  border-radius: 0vw;
  top: 0.5vw;
  right: 0.5vw;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 1.4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content .movies .movie .typeLogoCont {
  position: absolute;
  bottom: 0.5vw;
  left: 0.5vw;
}

.content .movies .movie .typeLogoCont .typelogo {
  width: 1.5vw;
  height: 1.5vw;
  border: inset 0.3vw transparent;
  border-radius: 0vw;
  background-repeat: no-repeat;
  background-size: 1.2vw auto;
  /*background-attachment: fixed;*/
  background-position: center;
  display: inline-block;
  margin-right: 0.5vw;
  background-color: rgba(0, 0, 0, 0.7);
}

.content .movies .movie .typelogo.audio {
  background-image: url("https://rtlplay.alteox.app/img/audio2.svg");
}

.content .movies .movie .typelogo.video {
  background-image: url("https://rtlplay.alteox.app/img/video2.svg");
}

.content .movies .movie:focus {
  outline: none;
}

.content .movies .movie .ramka {
  /* position: absolute;
     width: 16.02vw;
     height: 23.02vw;

     top: -0.26vw;
     left: -0.26vw; */
}

.content .movies .movie.podcast .ramka {
  /* position: absolute;
    width: 23.02vw;
    height: 23.02vw;

    top: -0.26vw;
    left: -0.26vw; */

  /* outline: 0.26vw solid rgba(255, 255, 255, 0); */
}

.content .movies .movie.selected {
  /* border: 0.3vw solid #676b75;    */

  outline: 0.2vw solid rgba(255, 255, 255, 1);
  outline-offset: 0vw;
  /* transition: outline-width 200ms linear; */
  /* transition: outline-color 700ms linear; */
  /* transition:  outline-width 0.3s; */

  /* box-shadow: inset -0.2vw 0.2vw 0 0 #676b75, inset 0.2vw -0.2vw 0 0 #676b75, inset 0 -0.2vw 0vw 0 #676b75 */
}

.content-wraper {
  overflow: hidden;
  position: fixed;
}