@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap&subset=latin-ext');


#rwd {
   background: #000 none repeat scroll 0 0;    
   left: 0;
   padding: 15px 30px;
   position: fixed;
   top: 0;
   z-index: 9999;
   display: none;
   }
#rwd div {color: #fff;font-weight: 700;
   display: none;
   z-index: 9999;}

      #rwd .lg {display: block;} 


@media screen and (max-width: 1499px) {
    #rwd .lg {display: none;}
    #rwd .lg2 {display: block;}
}
@media screen and (max-width: 1199px) {
        #rwd .lg {display: none;}
    #rwd .lg2 {display: none;}
    #rwd .md {display: block;}

}
@media screen and (max-width: 991px) {
    #rwd .lg {display: none;}
    #rwd .lg2 {display: none;}
    #rwd .md {display: none;}
    #rwd .sm {display: block;}

}
@media screen and (max-width: 767px) {
    #rwd .lg {display: none;}
    #rwd .lg2 {display: none;}
    #rwd .md {display: none;}
    #rwd .sm {display: none;}
    #rwd .xs {display: block;}

}

.nav > li > a:focus, .nav > li > a:hover {background: none;}


a, a:hover {
    text-decoration: none !important;
}


body {}

* {font-family:'montserrat',sans-serif;color:#202022;box-sizing: border-box;}

ol, ul {list-style: none outside none;padding: 0;}
.visible {opacity: 1;}
.hiddenen {opacity: 0;}
.clear {clear: both;}
.showw {opacity: 1}
.no-pad {padding-left: 0 !important; padding-right: 0 !important;}
.no-marg {margin-left: 0 !important; margin-right: 0 !important;}

a:active, a:focus, a:hover {text-decoration: none;}


/*jaaazda*/
#sek11 {margin-top: 0px;   padding-top: 100px;}
#sek12 {margin-top: 0px;  padding-bottom: 100px; padding-top: 100px;}

.linki {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-height: 100vh;
  z-index: 9999999;
}
.prod.txtt {
	color: red;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 5vw;
	text-align: center;
	font-family: CeraPRO-Bold;
	padding-top: 8vw;
	animation-duration: 2s;
}
.linki a {
  color: #5769f5;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 60px;
  position: absolute;
  top: 100px;
  left: 30px;
  font-family: CeraPRO-Bold;
}
.linki a:hover {color: #ec008c}

.linki a#av0 {transform: rotate(-90deg);}
.linki a#av1 {
  left: unset;
  right: 100px;
  top: 28px;
}
.linki a#av2 {
  top: unset;
  bottom: 37px;
  left: 109px;
}
.linki a#av3 {
  left: unset;
  right: -31px;
  top: unset;
  bottom: 145px;
  transform: rotate(90deg);
}

.sek.imag {padding-top: 100px; padding-bottom: 50px;}

.imag img {max-width: 100%;height: auto;}

.sek2 video{
	max-width: 100%;
right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}
.sek2 {background: #003d45;position: relative;}
.sek .prod {
	display: block;
	text-align: center;
}
.sek .prod video {max-width: 100%;
  transition: all 0.1s ease 0s;
}

.sek .prod video:hover {
    box-shadow: 0 0 60px rgba(0,0,0,0.15);
}


.sek.vt .prod video:hover {
    box-shadow: 0 0 60px rgba(0,0,0,0);
}

.pageContainer {
  -webkit-font-smoothing: antialiased;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 1;
  z-index: 1;
  visibility: visible;
  background: #000;
  -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s;
  -ms-transition: opacity 0.3s 0s, visibility 0.3s 0s;
  -o-transition: opacity 0.3s 0s, visibility 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0.3s 0s;
}
.pageContainer .backgroundVideoContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.pageContainer .mainVideoContainer {
  width: 50vh;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: calc(100% - 80px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}





.pageContainer .mainVideoContainer #mainVideo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pageContainer .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 15.5vh;
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.pageContainer .logo img {
  height: 100%;
  width: auto;
}

.sek1 {
  background: #fff;
  padding-top: 100px;
  z-index: 99999;
  margin-top: 100vh;
  height: auto;
  padding-bottom: 0px;
}
.sek.vt, .sek.imag {  background: #fff;}

.sek.vt video {
  filter: brightness(1.2);
}


.sek {width: 100%;}

.top {background: url("page/bg.jpg") repeat 0 0;
height: 100vh;
    overflow: hidden;
    position: fixed !important;
 }

.logo {background: url("page/logo.png") no-repeat 0 0;
width: 265px;
height: 249px;
display: block;

}

.typo-wrap {
	position: relative;
	width: 957px;
	height: 15.8vw;
	z-index: 999999;
}

.typo {background: url("page/typo.png") no-repeat 0 0 / 100% auto;
width: 100%;
height: inherit;
display: block;
margin-top: -30px;

}
.klip-wrap {
	position: absolute;
	bottom: 0;
	animation-delay: 1s;
	left: 3.1vw;
}
.klipik {
    height: 240px;
    width: 410px;
    background: #ec008c;
}
.ico-wrap {width: 90px; float: right;}

.a-ico {
  background: url("page/youtube.png") no-repeat center center;
  width: 90px;
  height: 60px;
  display: block;
}
.a-ico#i2 {
  background: url("page/spotify.png") no-repeat center center;
}
.a-ico#i3 {
  background: url("page/apple.png") no-repeat center center;
}
.a-ico#i4 {
  background: url("page/tidal.png") no-repeat center center;
}

.a-ico:hover {
filter: opacity(0.5);
}

.shirts {position:relative;}
.shirts img {
    position: absolute;
    max-width: 100%;
    margin-top: -240px;
    margin-right: 0;
    margin-left: 79px;
    animation-delay: 0.5s;
    	transition: filter 5s ease 0s;
}
.shirts img.pad-top {margin-top: 4vw;z-index: 99999;}

.shirts img:hover {  filter: hue-rotate(180deg);}

.shirts img.toper {
    z-index: 9999;
    max-width: 130%;
    top: 40px;
    right: -260px;
}


.butn-wrap {
	position: absolute;
	right: 3.2vw;
	padding: 3px;
	background: linear-gradient(to right, #88fec5, #608bf0);
	width: 220px;
	height: 58px;
	transition: filter 0.5s ease 0s;
	bottom: -10px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.butn {
  width: 100%;
  height: 100%;
  display: block;
  background: #fff  url("page/arrow.svg") no-repeat center right 20px / 10% auto;
  padding: 16px 30px;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
 transition: all 0.6s ease 0s;
}

.butn-wrap:hover {
  filter: hue-rotate(180deg) invert(1);
}

.butn-wrap:hover > .butn {color: #000;}

/*poniżej ocean i rwd*/

.ocean {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: -25rem;
    -webkit-transform: translateX(100);
    transform: translateX(100);
    opacity: 0;
    filter: hue-rotate(217deg) brightness(1.5);
}
.wave {
 top:-18.75rem;
 opacity:.7
}
.wave, .wave2 {
  position: absolute;
  right: 0;
  height: 400rem;
  width: 58rem;
  -webkit-animation: wave 10s cubic-bezier(.36,.45,.63,.53) infinite;
  animation: wave 10s cubic-bezier(.36,.45,.63,.53) infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background-size: 58rem 400rem;
}
.wave2 {
  top: 0;
}
@-webkit-keyframes wave {
 0% {
  margin-top:-100rem
 }
 to {
  margin-top:0
 }
}
@keyframes wave {
 0% {
  margin-top:-100rem
 }
 to {
  margin-top:0
 }
}
@-webkit-keyframes wave2 {
 0% {
  margin-top:100rem
 }
 to {
  margin-top:0
 }
}
@keyframes wave2 {
 0% {
  margin-top:100rem
 }
 to {
  margin-top:0
 }
}






@media screen and (max-width: 1919px){
}
@media screen and (max-width: 1499px){
	.shirts img.toper {
	z-index: 9999;
	max-width: 80%;
	top: 40px;
	right: -280px;
	}
	.shirts img {
	position: absolute;
	max-width: 100%;
	margin-top: -240px;
	margin-right: 0;
	margin-left: -21px;
	animation-delay: 0.5s;
	max-width: 33.3%;
}
.typo {
	background: url("page/typo.png") no-repeat 0 0 / 100% auto;
	width: 100%;
	height: inherit;
	display: block;
	margin-top: -50px;
}
}
@media screen and (max-width: 1199px){
	.klipik {display: none;}
}
@media screen and (max-width: 991px){

.txtt, .vt2 {display: none !important;}

.ocean {display: none;}

.sek.vt, .sek.imag {
	background: #fff;
	overflow: hidden;
}

.shirts {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 1000px;
	top: 0;
	right: 0;
	z-index: 1;
}
.shirts img {
	position: absolute;
	margin-top: 0;
	margin-right: 0;
	margin-left: 394px;
	animation-delay: 0.5s;
	max-width: 33.3%;
}
.shirts img.toper {
	z-index: 9999;
	max-width: 80%;
	top: 40px;
	right: -170px;
}

.linki a {
	font-size: 40px;
	top: 9vw;
	left: -2vw;
}

.linki a#av1 {
	left: unset;
	right: 3vw;
	top: 28px;
}


.linki a#av2 {
	top: unset;
	bottom: 37px;
	left: 4vw;
}

.linki a#av3 {
	left: unset;
	right: -31px;
	top: unset;
	bottom: 13vw;
	transform: rotate(90deg);
}

.linki a#av3 {
	left: unset;
	right: -7vw;
	top: unset;
	bottom: 13vw;
	transform: rotate(90deg);
}
.top {
	height: 100vh;
	max-height: 550px;
	overflow: unset;
	position: relative !important;
	z-index: 99999;
}
.sek1 {
	background: #fff;
	padding-top: 0;
	z-index: 1;
	margin-top: 0;
	height: auto;
	padding-bottom: 0px;
}

}
@media screen and (max-width: 767px){

.shirts img.toper {
	z-index: 9999;
	max-width: 110%;
	top: 10px;
	right: -120px;
}

.shirts img.toper {
	z-index: 9999;
	max-width: 110%;
	top: 10px;
	right: -120px;
}
.shirts img {
	margin-top: 30px;
	margin-right: 0;
	margin-left: 110px;
	animation-delay: 0.5s;
	max-width: 43.3%;
}
.linki a {
	font-size: 6vw;
	top: 9vw;
	left: -2vw;
}
.linki a#av1 {
	left: unset;
	right: 6vw;
	top: 10px;
}
.linki a#av2 {
	top: unset;
	bottom: 15px;
	left: 6vw;
}
.linki a#av3 {
	left: unset;
	right: -7vw;
	top: unset;
	bottom: 16vw;
	transform: rotate(90deg);
}

.top {
	height: 127vw;
	max-height: unset;
	overflow: hidden;
	position: relative !important;
	z-index: 99999;
		background: url("page/bg.jpg") no-repeat center center / 300% auto;
}
.typo-wrap {
	width: 90vw;
	height: 40.8vw;
	margin-top: 61vw;
}
.typo {margin-top: 90px}


.klip-wrap {
	position: absolute;
	bottom: 0;
	animation-delay: 1s;
	left:0;
	max-width: 100%;
	z-index: 99999;
}
.butn-wrap {
	width: 194px;
	height: 46px;
	bottom: -10px;
	display: none !important;
}
.butn {
	padding: 11px 18px;
}
.logo {
	background: url("page/logo.png") repeat 0 0 / 100% auto;
	width: 30vw;
	height: 26vw;
	display: block;
}
#sek11, #sek12 {padding-top: 0px;}
.sek .prod {
  margin-bottom: 20px;
}
.shirts img.pad-top {margin-top: 38vw;}

}