@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body
{
font-family: 'Poppins', sans-serif;
margin:0px;
z-index:-1;
}
.dropdown {
	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top: 0;
	transform: translate(30px,25px);
	float:left;
	display: block;
	z-index: 1;
}
.bar {
	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top: 0;
	display: block;
	background-color: black;
  	border-bottom: 0.5px solid white;
	z-index: 1;
	padding-bottom:5px;
	box-shadow: 0px 1px 10px white;
	margin-bottom: 50px;
}
.barBottom {
	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	bottom: 0;
  	height:110px;
	display: block;
	background-color: black;
  	border-top: 0.5px solid white;
	z-index: 2;
	padding-top:5px;
	box-shadow: 0px -1px 10px white;
}
.bottomMenu {
 width:200px;
 padding: 5px 0;
 font-size:16px;
 text-align: center;
 border: 1px solid white;
 border-radius: 15px;
 cursor: pointer;
 margin:20px 60px 20px 60px;
}

.loaded #czarnaGora
{
left:0;
top:0;
margin:0px;
width:100%;
height:140px;
border:0px;
padding:0px;
position:absolute;
z-index:10;
}



.loaded #czarnyDol
{
width:100%;
height:140px;
position:absolute;
z-index:2;
left:0;
bottom:0;
}
.loaded #main-video
{
left:0;
width:100%;
position:fixed;
}
.loaded .gif
{
right:0;
z-index:-1;
min-height:100%;
position: fixed;
}
.loaded .video-mobile
{
z-index:-1;
height:0%;
position: fixed;
left:0;
}
#content
{
opacity:0;
}
.loaded #content
{
opacity:1;
}
#loader-wrapper{

	position:relative;
	overflow:hidden;
	transform: translate(0%, 200%);
    background-color: black;
    z-index: 1000;
   
}
@keyframes mryganie
{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
#loader {
    z-index: 1001; /* anything higher than z-index: 1000 of .loader-section */
 	animation-name: mryganie;
  	animation-duration: 2s;
  	animation-iteration-count: infinite;
  	animation-timing-function: ease-in-out;
  
}


.loaded #loader-wrapper {
        position: absolute;
  		left: -9999px;
}



.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out;
}
.bgImage::before
{
  opacity: 0.6;
  position: fixed;
  content: "";
  display: block;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index:-10;
  width: 100%;
  height: 100%;
  background-position: center !important;
  background-image: url('produkcja filmowa.webp') !important;
  background-repeat: no-repeat !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover;
  background-size: cover !important;
}
.stronka {
 color: white;
 margin-left:auto;
 margin-right:auto; 
 width:85%;
}
.box {

border-radius:15px;
padding-top:5px;
padding-bottom:5px;
background-color: black;
box-shadow: 0px 0px 5px white;
margin: 20px;
}
#teksty
{
font-size:24px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom:15px;
max-width:80%;
}
h2 {
text-align:center;
}
#tekst
{
margin:8px;
}


ul
{
list-style-type: disc;
}
li
{
font-size:18px;
display: inline;
}
#cytat
{

}
.kontener
{
position: fixed;
width:100%;
height:100%;
top: 25%;
}


.podzial2
{
float: left;
width: 50%;
color: white;
font-size: 150%;
margin-top:10px;
}


a
{
color:white;
}
#zdjecie
{
z-index:1;
margin: 10px;
width:30%;
padding:0px;
margin-bottom:70px;
box-shadow: 0px 0px 10px white;
cursor: pointer;
}

#film
{
margin: 50px;
box-shadow: 0px 0px 10px white;
}




@media only screen and (min-aspect-ratio: 1/1)
{

#menu
{
width:50px;
}

#menuGlowne
{
}

#logo
{
 width: 20%;
 opacity:0;
 margin-bottom:40px;
}
.loaded .podzial3
{
float: left;
width: 33.3%;
color: white;
font-size: 35px;
font-weight:lighter;
transition: font-size .2s;
}
.loaded .podzial3:hover
{
font-size: 40px;
}
#kontakt
{
float:left;
}
#portfolio
{
float:right;
}

#logoMale
{
 width: 100px;
 padding: 20px 0;
 margin-right:auto;
 margin-left:auto;
 z-index: 1;
}
.ipad #logoMale
{

 width: 100px;
 padding: 10px 0;
 margin-right:auto;
 margin-left:auto;
 z-index: 1;
 
}

.dropdown-content {
  display: table-row;
  position: absolute;
  background-color: black;
  width: 160px;
  box-shadow: 0px 8px 16px 0px white;
  padding: 12px 16px;
  z-index: 1;
  font-size:28px;
}


}





@media only screen and (max-aspect-ratio: 1/1)
{

#menu
{
width:65px;
}

#logo
{
margin-bottom:100px;
 width: 30%;
 opacity:0;
}
.podzial3
{
float: left;
width: 100%;
color: white;
font-size: 45px;
font-weight:lighter;
}
#kontakt
{
clear:both;
margin-left:auto;
margin-right:auto;
margin-bottom:25px;
font-size: 40px;
}
#portfolio
{
clear:both;
margin-left:auto;
margin-right:auto;
margin-bottom:25px;
font-size: 40px;
}
#onas
{
font-size: 40px;
margin-bottom:25px;
}
.ipad #logo
{
margin-bottom: 40px;
}
.ipad .podzial3
{
float: left;
width: 33.3%;
color: white;
font-size: 32px;
font-weight:lighter;
transition: font-size .2s;
}



#logoMale
{
	width: 130px;
	padding: 10px 0;
	margin-right:auto;
	margin-left:auto;
 	z-index: 1;
 
}
.dropdown {
transform: translate(30px,40px);

}
.dropdown-content {
  display: table-row;
  position: absolute;
  background-color: black;
  width: 300px;
  box-shadow: 0px 8px 16px 0px white;
  padding: 22px 22px;
  z-index: 1;
  font-size:50px;
}
.ipad .dropdown-content {
  font-size:30px;
  width:200px;
}
#zdjecie
{
clear:both;
width:90%;
margin-left: auto;
margin-right: auto;
}

}

/* Galeria   */
/* The Modal (background) */
.tlo {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 0px;
  margin:0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0,0.8);
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 0px;
  margin:0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0,0.3);
}
@media only screen and (max-aspect-ratio: 12/1)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 8%;
  z-index: 2;
}
}
@media only screen and (max-aspect-ratio: 12/1)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 10%;
  z-index: 2;
}
}
@media only screen and (max-aspect-ratio: 12/2)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 20%;
  z-index: 2;
}
}
@media only screen and (max-aspect-ratio: 12/3)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 35%;
  z-index: 2;
}
}
@media only screen and (max-aspect-ratio: 12/4)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 45%;
  z-index: 2;
  top:-60px;
}
}
@media only screen and (max-aspect-ratio: 12/5)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 70%;
  z-index: 2;
}
}
@media only screen and (max-aspect-ratio: 12/8)
{
/* Modal Content */
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 80%;
  z-index: 2;
}

}

@media only screen and (max-aspect-ratio: 12/9)
{
.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top:10px;
  width: 90%;
  padding: 0;
  z-index: 2;
}
.video-mobile
{
left:0;
z-index:0;
min-height:100%;
position: fixed;
}
.gif
{
display:none;
}

}

/* The Close Button */
.close {
  color: white;
  position: relative;
  top: 0px;
  right:-45%;
  font-size: 70px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  padding: 0px;
  margin:0px;
  border: 0px;
  background-color: rgb(0,0,0,0);
  display: none;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  z-index: 3;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 100px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a white background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
input {
  padding:6px 6px;
  font-size: 24px;
  border-radius: 5px;
  outline: none !important;
}
input:focus {
box-shadow: 0px 0px 10px white;
}
textarea {
outline: none !important;
font-size: 18px;
padding:10px;
border-radius: 10px;
}
textarea:focus {
box-shadow: 0px 0px 10px white;
}
.inputLabel {
font-size: 24px;
width: 100%;
}
.input{
width: 100%;
margin:20px 0px;
}
.inputInput {
width:100%;
margin-top:auto;
margin-bottom:auto;
}

.submit {
margin-left:auto;
margin-right:auto;
width: 20%;
height:60px;
min-width:200px;
background-color: black;
border-style: solid;
border-width:1px;
border-color:white;
border-radius:15px;
color:white;
font-size: 24px;
box-shadow: 0px 0px 10px white;
cursor: pointer;
}
.form {
margin-left:auto;
margin-right:auto;
width: 60%;
margin-bottom:60px;
}
.line {
background-color: white;
margin-left:auto;
margin-right:auto;
height:1px;
width:70%
margin-top:60px;
margin-bottom:60px;
}
.icon-mail  {
margin-top:60px;
}