@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

body, html { height: 100%; }

img, fieldset, a img { border: none; }

input[type="text"], input[type="email"], input[type="tel"], textarea { -webkit-appearance: none; }

textarea { overflow: auto; }

input, button { margin: 0; padding: 0; border: 0; }

input[type="submit"], button { cursor: pointer; }

div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus { outline: none; }

ul, ol { list-style-type: none; }
table { border-spacing: 0; border-collapse: collapse; width: 100%; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; }

@font-face { font-family: "svgfont"; src: url("fonts/svgfont.eot"); src: url("fonts/svgfont.eot?#iefix") format("eot"), url("fonts/svgfont.woff") format("woff"), url("fonts/svgfont.woff2") format("woff2"), url("fonts/svgfont.ttf") format("truetype"); font-weight: normal; font-style: normal; }
.icon, [class^="icon-"], [class*=" icon-"] { font-family: "svgfont"; font-style: normal; font-weight: normal; text-rendering: auto; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon, [class^="icon-"], [class*=" icon-"] { display: inline-block; }

.icon-sepa:before { content: ""; }

.icon-skrill:before { content: ""; }

body { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.4; }

@font-face { font-family: Helvetica; src: url("fonts/HelveticaNeue.woff2") format("woff2"), url("fonts/HelveticaNeue.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: Helvetica_bold; src: url("fonts/HelveticaNeue-Bold.woff2") format("woff2"), url("fonts/HelveticaNeue-Bold.woff") format("woff"); font-weight: normal; font-style: normal; }
.out { position: relative; height: 100vh; background: #411617 url("../img/bg.png") no-repeat center; background-size: cover; overflow: hidden; }

.video { position: absolute; z-index: 1; width: 100%; height: 100%; }
.video video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; }

.overlay { position: absolute; z-index: 2; opacity: 0.9; height: 100%; width: 62%; background: #0c0c0c; }

.content { position: relative; z-index: 3; width: 100%; height: 100%; }

.doll { position: absolute; top: 8%; left: 5%; }

.logo { position: absolute; left: 5%; bottom: 8%; }

.title { position: absolute; margin-left: -4px; width: 100%; top: -webkit-calc(36.5vh - 6vw + 2px); top: calc(36.5vh - 6vw + 2px); font-family: Helvetica_bold, sans-serif; font-size: 8.33333vw; color: #fff; letter-spacing: -2px; line-height: 0.91; }
.title__top { position: absolute; left: 38%; }
.title__bottom { position: relative; left: 38%; }
.title__first-word { position: absolute; right: 100%; white-space: nowrap; }
.title:before { content: ""; position: absolute; top: 25%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 28%; width: 6.18055vw; height: 1.04166vw; background: #fff; }

.link a, .dsc { font-family: Helvetica, sans-serif; font-size: 16px; line-height: 2; letter-spacing: 0.4px; color: #fff; }

.link { position: absolute; white-space: nowrap; }
.link a { line-height: 1; vertical-align: bottom; text-decoration: none; }
.link_right { top: 36.5%; right: 5%; }
.link_right a { vertical-align: bottom; }
.link_bottom-first { left: 23.54167%; bottom: 8%; }
.link_bottom-last { left: 38%; bottom: 8%; margin-left: 2px; }
.link_bottom-last a { text-decoration: underline; }

.dsc { position: absolute; top: 59%; left: 38%; margin-left: 2px; margin-top: 2px; }
.play{ position: absolute; top: 77%; left: 35%; }



@media only screen and (max-width: 900px){
 .link a, .dsc{ font-size: 14px; }
 .link_right{ top: 8%; right: 25%; }
 .overlay { width: 62%; }
 }


 
 
 
 
 
@media only screen and (max-width: 768px){
 .title{ line-height: 1; }
 .dsc{ left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; }
 .link_bottom-last{ left: 50%; -webkit-transform: translateX(-75%); -ms-transform: translateX(-75%); transform: translateX(-75%); white-space: nowrap; }
 .overlay { width: 70.5%; }
 .play { left: 20.5%; }
 }


 
@media only screen and (max-width: 767px){
 .out{ background-image: url("../img/insta9.gif"); }
 .video{ display: none; }
 .overlay{ width: 85%; }
 .play { left: 35%; }
 }

@media only screen and (max-width: 767px) and (orientation: landscape) {
 .overlay { width: 85%; }
 .play { left: 35%; }
 }
 
@media only screen and (max-width: 480px){
 .doll{ top: 4%; }
 .doll img{ width: 15%; height: auto; }
 .logo{ bottom: 4%; }
 .logo img{ width: 75%; height: auto; }
 .title{ font-size: 32px; }
 .title__top{ left: 40%; }
 .title__bottom{ left: 40%; }
 .link_right{ top: 4%; }
 .link_bottom-first{ bottom: 4%; left: 18.5%; }
 .link_bottom-last{ bottom: 4%; }
 .dsc{ top: 50%; } }

@media only screen and (max-height: 415px){
 .doll{ top: 4%; }
 .doll img{ width: 15%; height: auto; }
 .logo{ bottom: 4%; }
 .logo img{ width: 75%; height: auto; }
 .title{ top: 15%; font-size: 48px; }
 .title__top{ left: 50%; }
 .title__bottom{ left: 50%; }
 .title:before{ left: 40%; }
 .link_right{ top: 4%; }
 .link_bottom-first{ bottom: 4%; left: 12%; }
 .link_bottom-last{ bottom: 4%; }
 .dsc{ top: 48%; }
 .overlay { width: 90%; }
 .play { left: 40%; }
 }

 @media only screen and (max-height: 376px){
 .overlay { width: 85%; }
 .play { left: 35%; }
 }

 
@media only screen and (max-height: 320px){
 .dsc{ top: 48%; line-height: 1.7; }
 }

 
@media only screen and (max-width: 321px) and (orientation: landscape){
 .dsc { font-size: 100px; }
 }
 
@media only screen and (max-height: 375px){
 .title{ font-size: 42px; } }

/*# Popup video */

.play {
  width: 70px;
  height: 70px;
  background: #3e3d3d;
  display: block;
  margin: 0 auto;
  /* Important for :after */
  position: relative;
  /* Makes a circle */
  border-radius: 50%;
}

.play:hover {
  background: #8E2F36;
  cursor: pointer;
}

.play:after {
  position: absolute;
  content: "";
  /* Centering */
  top: 50%;
  margin-top: -15px;
  left: 50%;
  margin-left:  -8px;
  /* CSS Triangle */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #ffffff;
}

/* Fullscreen Overlay */
.overlay2{
  width: 100%;
  height: 100vh;
  /* 50% opacity black */
  background: rgba(0,0,0,.5);
  /* Stays locked on scroll */
  position: fixed;
  /* On top of the rest*/
  z-index: 4;
  /* Hidden */
  opacity: 0;
  /* No interference */
  left: -100%;
  /* CSS3 Transition */
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
}

/* 90% width container */
.video-container {
  width: 90%;
  /* Centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.close {
  width: 20px;
  fill: white;
  position: absolute;
  right: 0;
  /* Bring above video */
  top: -30px;
}

.close:hover {
  /* 50% opacity white */
  fill: rgba(255,255,255,0.5);
  cursor: pointer;
}

/* Class to fade in overlay */
.show {
  opacity: 1;
}


/* Show popup video on mobile only */
@media only screen and (min-width: 768px){
 .play{ display: none; }
 .video-container{ display: none; }
 .overlay2{ display: none; }
 .close{ display: none; }
 .show{ display: none; }
}


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