/* MOTYW - APPLE */

body.apple {
    background-color: black;
  }
  
  .apple.bttn {
    border-radius: 3em;
    font-size: 1em;
    font-family: poppins;
    background-color: #dfdfdf;
    margin: 0;
    padding: 0.6em 1.5em;
    width: auto;
    display: inline-block;
    font-weight: 600;
  }
  
  a, p.apple, h1.apple, h2.apple, h3.apple, ul, li {
    color: #dfdfdf;
    font-family: poppins;
    text-align: left;
  }
  
  p.apple.label {
    color: grey;
    font-weight: 500;
  }
  
  h1.apple, h2.apple, h3.apple {
    font-weight: 700;
    line-height: 1.1em;
  }

  a {
    color:#dfdfdf;
  }

  a.muted {
    font-size: 0.75em;
  }

  .column>a {
    padding: 0 0.6em;
  }
  
  .row {
    display: flex;
  }
  
  .mobile>.row {
    flex-direction:column;
  }
  
  .column {
    flex: 50%;
  }
  
  .textbox.apple {
    font-weight:700;
  }
  
  video {
    border-radius: 1.8em;
    max-width:100%;
  }
  
  .icon-frame.apple {
    border-radius: 1.2em;
    background-color: #101010;
  }
  
  .frame.apple {
    border-radius: 1.8em;
    background-color: #101010;
  }
  
  .top-menu.apple {
    z-index:2;
  }
  
  .dot-menu.apple {
    color:white;
    opacity:0.9;
  }
  
  .navitem.apple {
    font-weight: 400;
    font-size: 0.9em;
  }
  
  .top-menu.apple::after {
    z-index:-1;
    content: "";
    height: 3em;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: rgb(10 10 10 / 72%);
  }
  
  .mobile-menu.apple {
    background-color: black;
  }
  
  .mobile-menu>.hyperlink.apple {
    color: white;
  }
  
  select {
    background-color: black;
    font-size: 0.8em;
    opacity: 0.6;
    border: none;
    height: 2em;
    padding: 0 0.6em;
    border-radius: 3em;
    margin: auto 1em;
    color: white;
  }
  
  
  /* width */
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #2c2c2c;
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #dfdfdf;
    border-radius: 10px;
  }
  
  
  
  /* ---------------- */
  
  
  /* PORTFOLIO */
  
  #header-container {
    margin: 0 auto;
    overflow: hidden;
    background-color: black;
    min-height: 1525px;
  }
  
  #header-wrapper-2 {
    overflow-y: scroll;
    margin: 0 auto;
    height: 1525px;
    width: fit-content;
    position: relative;
  }
  
  #header {
    position: sticky;
    max-height: 80%;
    width: 1920px;
    top:150px;
  }
  
  #header-wrapper-2::-webkit-scrollbar {
    display:none;
  }
  
  #artist, #photo, #film {
    font-size: 1.1em;
    font-weight: 300;
    opacity: 0;
    color: #d3d3d3;
  }

  .mobile-skills {
    padding-top: 35em;
  }

  .mobile-intro {
    width: 80%;
    margin: 0 auto;
  }
  
  .mobile-header {
    background-image: url("img/mobile-header.jpg");
    width: auto;
    background-repeat: no-repeat;
    top: 70px;
    position: relative;
    z-index: 0;
    background-position-x: center;
  }
  
  .mobile-header>.intro {
    top: -25px;
  }
  
  .intro {
    pointer-events: none;
    max-width: 80%;
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:0;
  }

  .personal-label {
    font-size: 1em;
    font-weight: 400 !important;
  }
  
  
  
  #artist[header-scroll='22'] {
    opacity:0.1
 }
 #artist[header-scroll='23'] {
    opacity:0.2
 }
 #artist[header-scroll='24'] {
    opacity:0.3
 }
 #artist[header-scroll='25'] {
    opacity:0.4
 }
 #artist[header-scroll='26'] {
    opacity:0.5
 }
 #artist[header-scroll='27'] {
    opacity:0.6
 }
 #artist[header-scroll='28'] {
    opacity:0.7
 }
 #artist[header-scroll='29'] {
    opacity:0.8
 }
 #artist[header-scroll='30'] {
    opacity:0.9
 }
 #artist[header-scroll='31'],
 #artist[header-scroll='32'],
 #artist[header-scroll='33'],
 #artist[header-scroll='34'],
 #artist[header-scroll='35'],
 #artist[header-scroll='36'],
 #artist[header-scroll='37'],
 #artist[header-scroll='38'],
 #artist[header-scroll='39'],
 #artist[header-scroll='40'],
 #artist[header-scroll='41'],
 #artist[header-scroll='42'],
 #artist[header-scroll='43'],
 #artist[header-scroll='44'],
 #artist[header-scroll='45'],
 #artist[header-scroll='46'],
 #artist[header-scroll='47'],
 #artist[header-scroll='48'],
 #artist[header-scroll='49'],
 #artist[header-scroll='50'],
 #artist[header-scroll='51'],
 #artist[header-scroll='52'],
 #artist[header-scroll='53'],
 #artist[header-scroll='54'],
 #artist[header-scroll='55'],
 #artist[header-scroll='56'],
 #artist[header-scroll='57'],
 #artist[header-scroll='58'],
 #artist[header-scroll='59'],
 #artist[header-scroll='60'],
 #artist[header-scroll='61'],
 #artist[header-scroll='62'],
 #artist[header-scroll='63'],
 #artist[header-scroll='64'],
 #artist[header-scroll='65'],
 #artist[header-scroll='66'],
 #artist[header-scroll='67'],
 #artist[header-scroll='68'],
 #artist[header-scroll='69'],
 #artist[header-scroll='70'],
 #artist[header-scroll='71'],
 #artist[header-scroll='72'],
 #artist[header-scroll='73'],
 #artist[header-scroll='74'],
 #artist[header-scroll='75'],
 #artist[header-scroll='76'],
 #artist[header-scroll='77'],
 #artist[header-scroll='78'],
 #artist[header-scroll='79'],
 #artist[header-scroll='80'],
 #artist[header-scroll='81'],
 #artist[header-scroll='82']
 #artist[header-scroll='83'],
 #artist[header-scroll='84'] {
    opacity:1
 }
 
  
  
  
 #photo[header-scroll='27'] {
  opacity:0.1
}
#photo[header-scroll='28'] {
  opacity:0.2
}
#photo[header-scroll='29'] {
  opacity:0.3
}
#photo[header-scroll='30'] {
  opacity:0.4
}
#photo[header-scroll='31'] {
  opacity:0.5
}
#photo[header-scroll='32'] {
  opacity:0.6
}
#photo[header-scroll='33'] {
  opacity:0.7
}
#photo[header-scroll='34'] {
  opacity:0.8
}
#photo[header-scroll='35'] {
  opacity:0.9
}
#photo[header-scroll='36'],
#photo[header-scroll='37'],
#photo[header-scroll='38'],
#photo[header-scroll='39'],
#photo[header-scroll='40'],
#photo[header-scroll='41'],
#photo[header-scroll='42'],
#photo[header-scroll='43'],
#photo[header-scroll='44'],
#photo[header-scroll='45'],
#photo[header-scroll='46'],
#photo[header-scroll='47'],
#photo[header-scroll='48'],
#photo[header-scroll='49'],
#photo[header-scroll='50'],
#photo[header-scroll='51'],
#photo[header-scroll='52'],
#photo[header-scroll='53'],
#photo[header-scroll='54'],
#photo[header-scroll='55'],
#photo[header-scroll='56'],
#photo[header-scroll='57'],
#photo[header-scroll='58'],
#photo[header-scroll='59'],
#photo[header-scroll='60'],
#photo[header-scroll='61'],
#photo[header-scroll='62'],
#photo[header-scroll='63'],
#photo[header-scroll='64'],
#photo[header-scroll='65'],
#photo[header-scroll='66'],
#photo[header-scroll='67'],
#photo[header-scroll='68'],
#photo[header-scroll='69'],
#photo[header-scroll='70'],
#photo[header-scroll='71'],
#photo[header-scroll='72'],
#photo[header-scroll='73'],
#photo[header-scroll='74'],
#photo[header-scroll='75'],
#photo[header-scroll='76'],
#photo[header-scroll='77'],
#photo[header-scroll='78'],
#photo[header-scroll='79'],
#photo[header-scroll='80'],
#photo[header-scroll='81'],
#photo[header-scroll='82'] {
  opacity:1
}

  
  
  
#film[header-scroll='32'] {
  opacity:0.1
}
#film[header-scroll='33'] {
  opacity:0.2
}
#film[header-scroll='34'] {
  opacity:0.3
}
#film[header-scroll='35'] {
  opacity:0.4
}
#film[header-scroll='36'] {
  opacity:0.5
}
#film[header-scroll='37'] {
  opacity:0.6
}
#film[header-scroll='38'] {
  opacity:0.7
}
#film[header-scroll='39'] {
  opacity:0.8
}
#film[header-scroll='40'] {
  opacity:0.9
}
#film[header-scroll='41'],
#film[header-scroll='42'],
#film[header-scroll='43'],
#film[header-scroll='44'],
#film[header-scroll='45'],
#film[header-scroll='46'],
#film[header-scroll='47'],
#film[header-scroll='48'],
#film[header-scroll='49'],
#film[header-scroll='50'],
#film[header-scroll='51'],
#film[header-scroll='52'],
#film[header-scroll='53'],
#film[header-scroll='54'],
#film[header-scroll='55'],
#film[header-scroll='56'],
#film[header-scroll='57'],
#film[header-scroll='58'],
#film[header-scroll='59'],
#film[header-scroll='60'],
#film[header-scroll='61'],
#film[header-scroll='62'],
#film[header-scroll='63'],
#film[header-scroll='64'],
#film[header-scroll='65'],
#film[header-scroll='66'],
#film[header-scroll='67'],
#film[header-scroll='68'],
#film[header-scroll='69'],
#film[header-scroll='70'],
#film[header-scroll='71'],
#film[header-scroll='72'],
#film[header-scroll='73'],
#film[header-scroll='74'],
#film[header-scroll='75'],
#film[header-scroll='76'],
#film[header-scroll='77'],
#film[header-scroll='78'],
#film[header-scroll='79'],
#film[header-scroll='80'],
#film[header-scroll='81'],
#film[header-scroll='82'] {
  opacity:1
}
  
.skills {
  position: absolute;
  top: 800px;
  left:50%;
  transform:translateX(-50%);
  width: 100%;
}

.column>h3 {
  display: flex;
  flex-grow: 1;
  height: 2em;
  align-items: end;
}

#contact {
  pointer-events: all;
}
 
  
  .bio {
    pointer-events: none;
    position: absolute;
    text-align: center !important;
    margin: 0 auto;
    width: 700px;
    top: 700px;
    font-size: 2.9em;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 10px black;
  }

  h1.mobile-bio {
    text-align: center;
    position: relative;
    top: 286px;
    line-height: 1.6;
    width: 80vw;
    font-size: 1.6em;
    margin: 0 auto;
  }
  
  .vertical>.bio {
    width: 100%;
  }
  
  #section-1,
  #section-2,
  #section-3 {
    opacity:0;
    transition-duration: 1s;
  }
  
  
  
  /* Podstawowe style */
  
  html, body {
    position:relative;
    margin: 0;
    padding: 0;
  }

  body {
    overflow-x: clip;
  }

  .mobile {
    padding: 0 1em;
    width: auto;
  }
  
  .dot-menu.mobile {
    right: 0.3em;
  }
  
  .content {
    max-width: 900px;
    margin: auto;
    text-align:left;
  }
  
  .centered {
    text-align: center !important;
    margin: 1em auto !important;
  }
  
  .centered-bttn {
    text-align: center !important;
    margin: 0.2em auto !important;
    margin-top: 1em !important;
  }
  
  div, p, h1, h2, h3, section {
    box-sizing: border-box;
  }

  .section {
    margin:0 !important;
    padding:0 !important;
  }

  .section-divider {
    margin-top: 6em;
    margin-bottom: 1.5em;
  }

  hr {
    margin: 0;
  }
  
  img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: 1.8em;
    object-fit: contain;
  }
  
  /* Tekst */
  
  h1 {
    font-size: 5.5em;
    font-weight: 900;
    margin: 1em 0;
  }
  
  h2 {
    font-size: 3.5em;
    font-weight: 700;
    margin: 1em 0;
  }
  
  h3 {
    font-size: 2em;
    margin: 1em 0;
  }
  
  p {
    font-size: 1.05em;
    margin: 1em 0;
    padding-bottom: 0.5em;
  }
  
  .inline>p,
  .inline>.textbox,
  .frame>.textbox{
    max-width: 20em;
  }
  
  p.textbox {
    font-size: 1.2em;
    max-width: 25em;
    text-align: left;
  }
  
  p.label {
    font-size: 1.1em;
    font-weight: 100;
    color:rgba(0, 0, 0, 80%);
    margin: 1em 0;
  }
  
  .muted {
    opacity: 0.65 !important;
  }
  
  /* Menu górne */
  
  .top-menu-container {
    position: sticky;
    position: -webkit-sticky;
    top:0;
    z-index:10;
  }
  
  .top-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    top:0;
    max-width: 900px;
    height: 3em;
    margin-bottom: 1em;
    margin: auto;
    padding: 0.5em 0;
    z-index:1;
  }

  .mobile>.top-menu,
  .mobile>.top-menu.apple::after {
    height: 4em !important;
  }

  img.logo {
    height: 2em;
    width: 2em;
  }
  
  p.logo {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    font-size: 1.6em;
    font-weight: 600;
    opacity:0.95;
    padding: 0;
  }
  
  .hyperlink {
    margin: 0.25em;
    padding: 0.4em;
    text-align: center;
    flex-grow: 0;
    width: auto;
    transition-duration: 0.5s;
    cursor: pointer;
  }
  
  .dot-menu {
    height: 1em;
    position: absolute;
    top: 0.9em;
    right: 0;
    width: auto;
    background-size: cover;
    cursor: pointer;
  }

  .dot-menu.mobile {
    top: 1.5em;
  }
  
  .mobile-menu {
    position: fixed;
    padding: 7em 3em;
    text-align: left;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .mobile-menu>.hyperlink {
    font-size: 2.5em;
    font-weight: 700;
    text-align: left;
    margin: auto 0;
  }
  
  
  
  /* STANDARDOWE ELEMENTY */
  
  /* Elementy obok siebie */
  
  .inline {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:0;
  }
  
  .inline>.icon-frame {
    margin: 1em 0 1em 01em !important;
  }
  
  .inline>.icon-frame:first-of-type {
    margin-left:0 !important;
  }
  
  .inline>.bttn:first-of-type {
    margin-left: 0;
  }
  
  .inline>.frame:first-of-type {
    margin-left: 0;
  }
  
  .inline>.frame {
    margin: 1em 0 1em 1.1em;
  }
  
  .frame>video {
    max-width:40em;
  }
  
  .inline>img {
    margin: 1em 0;
    border-radius: 0.8em;
    max-width:450px;
  }
  
  .inline>.frame>img {
    max-width: 600px;
    border-radius: 0.8em;
  }
  
  .inline>video {
    max-width:450px;
  }
  
  /* Elementy pionowo */
  
  .vertical {
    display: flex;
    flex-direction: column;
  }
  
  .vertical>.bttn,
  .vertical>.frame {
    margin: 0.25em auto;
  }
  
  .vertical>.textbox,
  .vertical>.frame>.textbox {
    text-align: left;
    max-width: 100% !important;
  }
  
  .vertical>img,
  .mobile>img,
  .vertical>.frame>img {
    max-width: 100%;
    max-height: 50em;
    object-fit: contain;
  }
  
  .mobile>h1,
  .mobile>.frame>h1,
  .mobile.window>.frame>h1 {
    font-size: 2.3em !important; 
  }

  .mobile.window>.frame>img, 
  .mobile.window>.frame>video {
    margin-bottom: 1em !important;
  }
  
  .mobile>h2,
  .mobile>.frame>h2,
  .mobile.window>.frame>h2 {
    font-size: 1.7em !important; 
  }

  .mobile.window>.frame {
    margin-right: 1em !important;
  }


  /* Tło na całą szerokość */
  
  .section-bg {
    position:absolute;
    left: 50%;
    width: fit-content;
    transform: translateX(-50%);
    max-width: 1920px;
    z-index:-5;
  }
  
  .section-img {
    width: 100%;
    max-width: 1920px;
    z-index: -5;
  }
  
  .section-bgapper-2::-webkit-scrollbar {
      display: none;
  }
  
  /* Przyciski */
  
  .bttn {
    margin: 1em 0 1em 1em;
    padding: 0.4em;
    text-align: center;
    flex-grow: 1;
    transition-duration: 0.5s;
    min-width: 10em;
    cursor: pointer;
  }
  
  .bttn:active {
    scale: 0.985;
    transition-duration: 0.05s;
  }

  .bttn:first-of-type {
    margin-left: 0;
  }
  
  /* Ramka */
  
  .frame {
    flex-grow: 1;
    margin: 0.5em 0;
    transition-duration: 0.5s;
    padding: 3em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .frame>.inline {
    margin: 0.25em;
  }
  
  .frame>.inline>.icon-frame {
    margin:0.5em !important;
  }
  
  .frame>.inline>.icon-frame {
    margin-left:0.5em !important;
  }
  
  .vertical>.icon-frame {
    margin:0.5em 0 0.5em 0 !important;
  }
  
  .frame>.vertical>.icon-frame {
    margin:0.5em !important;
  }
  
  .frame>.inline>.bttn,
  .frame>.vertical>.bttn,
  .frame>.inline>a,
  .frame>.vertical>a,
  .frame>.inline>p,
  .frame>.vertical>p,
  .frame>.inline>img,
  .frame>.vertical>img,
  .frame>.inline>div,
  .frame>.vertical>div {
    margin: 0.5em;
  }
  
  /* Ikona */
  
  .icon-frame {
    display: flex;
    align-items: center;
    flex-direction: column; 
    flex-grow: 1;
    transition-duration: 0.5s;
    padding: 0.5em;
    padding-bottom: 0;
  }
  
  .icon-frame:first-of-type {
    margin-left: 0;
  }
  
  .icon-frame:active {
    scale: 0.985;
    transition-duration: 0.05s;
  }
  
  .icon-image {
    max-height: 3.5em;
    max-width: 3.5em;
    border-radius:0;
  }
  
  .icon-label {
    font-size: 0.85em;
    text-align: center;
  }
  
  .mobile>.frame {
    margin: 0.5em 0;
  }
  
  /* Inne */
  
  .empty-row {
    width: 50px;
    height: 50px;
  }
  
  .frame>.empty-row {
    width:400px;
  }
  
  .vertical>.empty-row,
  .vertical>.frame>.empty-row,
  .mobile>.empty-row,
  .mobile>.frame>.empty-row {
    height:0 !important;
  }
  
  .empty-col {
    width: 50px;
    height: 50px;
  }
  
  .vertical>.empty-col,
  .vertical>.frame>.empty-col
  .mobile>.empty-col,
  .mobile>.frame>.empty-col {
    width:0 !important;
  }
  
  /* Window pop up */
  
  .window {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: black;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    padding-left: 10%;
    transition-duration: 0.2s;
    opacity:0;
    z-index:10;
  }
  
  .window>.frame>p.textbox,
  .horizontal-scroll>.frame>p.textbox {
    margin:0;
  }
  
  .window.fade-in {
    opacity:1;
    transition-duration: 0.5s;
  }
  
  .fi-br-cross {
    color: white;
    font-size: 2em;
    position: fixed;
    right: 2em;
    top: 2em;
    cursor: pointer;
  }
  
  .window>p.textbox,
  .window>p,
  .window>h1,
  .window>h2,
  .window>.icon-frame {
    margin-right: 6em;
  }
  
  .window>.frame {
    margin-right: 6em;
  }
  
  .window>.frame>p {
    min-width: 15em;
  }
  
  .window>p {
    min-width: 15em;
    margin-right: 6em;
  }
  
  .window>.frame>img,
  .window>.frame>video,
  .window>.frame>p,
  .window>.frame>h1,
  .window>.frame>p.textbox {
    margin-right:0 !important;
  }
  
  .window>.frame>p.textbox {
    margin-bottom: 1em;
  }
  
  .window>.frame>img,
  .window>.frame>video {
    margin-bottom: 6em !important;
  }
  
  .mobile.window>.frame>img,
  .mobile.window>.frame>video {
    max-width: 25em;
  }
  
  .window>img,
  .window>.frame>img{
    max-width: 70em;
    height: auto;
    max-height: 90%;
    margin-right: 7em;
  }
  
  .window>video,
  .window>.frame>video {
    max-width: 70em;
    margin-right: 6em;
  }
  
  .window>.frame {
    background-color:black;
  }

  .window.mobile>img,
  .window.mobile>.frame>img,
  .window.mobile>video,
  .window.mobile>.frame>video {
    max-width: 25em;
  }

  .window.mobile {
    padding-left: 2% !important;
  }

  .window.mobile>p.textbox,
  .window.mobile>.frame>p.textbox {
    max-width: 10em;
  }

  .window.mobile>p {
    font-size: 1em;
  }
  
  /* Horizontal section */
  
  .horizontal-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    flex-direction: row;
    padding: 4em; 
    height: auto;
    margin: 0.5em 0;
    background-color: #101010;
    border-radius: 1.8em;
  }
  
  .horizontal-scroll>p.textbox,
  .horizontal-scroll>.frame>p.textbox,
  .horizontal-scroll>p,
  .horizontal-scroll>h1,
  .horizontal-scroll>.icon-frame {
    min-width: 15em;
    margin-right: 4em;
  }
  
  .horizontal-scroll>p {
    min-width: 20em;
    margin-right: 4em;
  }
  
  .horizontal-scroll>img {
    width: auto;
    height: 300px;
    margin-right: 4em;
  }
  
  .horizontal-scroll>video {
    width: auto;
    height: 300px;
    margin-right: 4em;
  }
  
  /* Animacje */
  
  .fade-in {
    opacity:1 !important;
    transition-duration: 1s;
  }