@font-face {
  font-family: 'SameGrotesk-Bold';
  src: url("../font/SameGrotesk-Bold.woff2") format("woff2"), url("../font/SameGrotesk-Bold.woff") format("woff"), url("../font/SameGrotesk-Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'SameGrotesk-Medium';
  src: url("../font/SameGrotesk-Medium.woff2") format("woff2"), url("../font/SameGrotesk-Medium.woff") format("woff"), url("../font/SameGrotesk-Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: 'SameGrotesk-Regular';
  src: url("../font/SameGrotesk-Regular.woff2") format("woff2"), url("../font/SameGrotesk-Regular.woff") format("woff"), url("../font/SameGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }
html, body {
  font-family: 'SameGrotesk-Medium', sans-serif;
  font-size: 16px;
  line-height: 1.1;
  background: #f7f7f7; }

/*.wrapper{
  max-width: 1400px;
  margin: 0 auto;
}*/
.container-fluid {
  padding: 0; }

.size-title {
  font-size: 35px; }

.size-text {
  font-size: 18px; }

.size-small {
  font-size: 14px; }

.bg-red {
  background: #ff0000; }

.bg-gray {
  background: #e6e6e6; }

.bg-white {
  background: #fff; }

.bg-blue {
  background: #0000ff; }

.bg-black {
  background: #000000; }

.fontBold {
  font-family: "SameGrotesk-Bold", sans-serif; }

.fontMedium {
  font-family: "SameGrotesk-Medium", sans-serif; }

.fontRegular {
  font-family: "SameGrotesk-Regular", sans-serif; }

.blue-color {
  color: #0000ff; }

.gray-color {
  color: #666666; }

.more-line {
  line-height: 1.4; }

.dev, .graph {
  width: 107px; }

.spacer {
  border: 1px solid #000000;
  height: 1px;
  display: block; }

.arrow {
  width: 30px;
  margin-left: 15px; }

header {
  position: relative;
  background: #e6e6e6; }
  header::before {
    content: '';
    height: 100%;
    width: 50%;
    background: #ff0000;
    display: block;
    position: absolute; }

#trailer {
  background: #000000; }

.btn-primary {
  border: 2px solid #fff;
  border-radius: 0;
  font-family: "SameGrotesk-Bold", sans-serif;
  background: transparent;
  width: 200px; }
  .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus {
    border-color: #0000ff;
    background: #0000ff; }
  .btn-primary .arrow {
    fill: #fff;
    width: 16px;
    margin-left: 6px; }

.linkBtn {
  color: #000000; }
  .linkBtn:hover {
    text-decoration: none;
    color: #0000ff; }
    .linkBtn:hover .arrow {
      fill: #0000ff;
      -webkit-animation: bounce-top 1s both;
      animation: bounce-top 1s both; }
  .linkBtn .arrow {
    margin-top: -10px; }

.btnVideo {
  background: #000000;
  color: gray;
  transition: all 1s;
  cursor: pointer; }
  .btnVideo .category {
    opacity: 0.5; }
  .btnVideo.select, .btnVideo:hover {
    background: #ff0000;
    color: #fff; }
    @media screen and (min-width: 992px) {
      .btnVideo.select .text-trailer, .btnVideo:hover .text-trailer {
        color: #fff; } }
  @media screen and (min-width: 992px) {
    .btnVideo .nr-trailer {
      color: #fff; }
    .btnVideo .text-trailer {
      color: #000000; } }

.link-trailer-desktop {
  display: none; }
  @media screen and (min-width: 768px) {
    .link-trailer-desktop {
      display: inline-block; } }

@media screen and (min-width: 768px) {
  .link-trailer-mobile {
    display: none; } }

.link {
  color: #fff; }
  .link:hover {
    color: #0000ff;
    text-decoration: none; }

#dnd_logo {
  height: 65px;
  width: 200px; }
  @media screen and (min-width: 992px) {
    #dnd_logo {
      height: auto;
      width: 100%; } }

.bottom-logo {
  display: none; }
  @media screen and (min-width: 992px) {
    .bottom-logo {
      display: initial; } }

.videoFrame {
  position: relative; }
  .videoFrame > img {
    position: absolute;
    top: 0;
    z-index: 1; }

.landing-trailer {
  position: absolute;
  z-index: 1;
  top: 0;
  cursor: pointer;
  transition: all 1s; }
  .landing-trailer .play {
    width: 60px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; }
    @media screen and (min-width: 992px) {
      .landing-trailer .play {
        width: 100px; } }
  .landing-trailer:hover .play path {
    fill: #fff; }
  .landing-trailer:hover img {
    filter: brightness(50%); }

@media (min-width: 768px) {
  header .spacer {
    display: none; } }
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1; }
  24% {
    opacity: 1; }
  40% {
    -webkit-transform: translateY(-14px);
    transform: translateY(-14px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  65% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  82% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  93% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; } }
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1; }
  24% {
    opacity: 1; }
  40% {
    -webkit-transform: translateY(-14px);
    transform: translateY(-14px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  65% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  82% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  93% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */