/* buttony */
.section .bottom {position: absolute; bottom: 9.8vh; padding-bottom: 3.1vh; border-bottom: 2px solid #FFBFB3;}
.section .button, .section .button.more::after {text-transform: uppercase; text-align: center; position: absolute; max-width: 280px; max-height: 50px; width: 28vh; border-radius: 26px; text-decoration: none; display: block; height: 5.2vh; cursor: pointer; margin: 2vh 0 0; background-color: #FFBFB3; border: 2px solid #FFBFB3; color: white; left: 0; transform: translateX(0); overflow: hidden;}
.section .button:nth-child(1) {bottom: 3.8vh;}
.section .button:nth-child(2) {bottom: 10.5vh;}
body:not(.disable) .section .button {transition: left 650ms cubic-bezier(0.860, 0.000, 0.070, 1.000), transform 650ms cubic-bezier(0.860, 0.000, 0.070, 1.000);}

/* tekst na buttonie */
.section .button .bb-tekst {font-family: 'mob', sans-serif; display: block; font-size: 1.67vh; letter-spacing: 0.2vh; left: 0; transition: all 400ms cubic-bezier(0.640, 0.040, 0.350, 1.000); line-height: 5.2vh;}
.section button.button .bb-tekst {top: -1px;}
.section .button:hover .bb-tekst {left: -1.6vh;}
.section.show-more .button.more:hover::after {left: -1.6vh;}

/* czarny button */
.section .button.black {color: black; border: 2px solid black; left: 0; background-color: transparent;}
.section .button.black .arrow, .section .button.black .arrow::after, .section .button.black .arrow::before {background-color: black;}

/* more klikniete */
.section.show-more .button.more {left: 100%; transform: translateX(-100%);}
.section .button.more::after {content:"ZAMKNIJ"; top: 0; left: 0; border: none; opacity: 0; margin:1px; font-family: 'mob', sans-serif; font-size: 1.67vh; letter-spacing: 0.2vh; line-height: 5.2vh;}
.section.show-more .button.more::after {opacity: 1;}
body:not(.disable) .section .button.more::after {transition: opacity 500ms ease-in-out, left 650ms cubic-bezier(0.860, 0.000, 0.070, 1.000);}


/* button strzalki */
.section .button .arrow {width: 1.5vh; height: 2px; background-color: white; position: absolute; z-index: 1; top: 50%; margin-top: -1px; right: -0.5vh; transform: translateX(100%);}
.section .button .arrow::after, .section .button .arrow::before {content: ""; width: 1vh; height: 2px; background-color: white; top: 0; right: 0; display: block; position: absolute;}
.section .button .arrow::after {transform: rotate(45deg); transform-origin: bottom right;}
.section .button .arrow::before {transform: rotate(-45deg); transform-origin: top right;}
.button.powrot .arrow {transform: rotate(180deg); left: 2vh; right: unset;}
.button.powrot:hover .arrow {transform: rotate(180deg); left: 1vh; right: unset;}

/*button animacje */
.section:not(.show-more) .button.more.ba-me .arrow, .section .button.ba-me:not(.more) .arrow {
    animation: me-notmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000)forwards;
    -webkit-animation: me-notmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes me-notmore {
    from {right: -0.5vh; transform: translateX(100%);}
    to {right: 1.2vh; transform: translateX(0%);}
}


.section:not(.show-more) .button.powrot.ba-ml .arrow, .section .button.powrot.ba-ml .arrow {
    animation: back-notmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: back-notmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes back-notmore {
    from {right: 1.2vh; transform: translateX(0%) rotate(180deg); }
    to {right: -0.5vh; transform: translateX(100%) rotate(180deg);} 
}


.section.show-more .button.powrot.ba-me .arrow, .section .button.powrot.ba-me:not(.more) .arrow {
    animation: back-notmore2 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: back-notmore2 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes back-notmore2 {
    from {right: -0.5vh; transform: translateX(100%) rotate(180deg);}
    to {right: 1.2vh; transform: translateX(0%) rotate(180deg);}
}


.section:not(.show-more) .button.more.ba-ml .arrow, .section .button.ba-ml:not(.more) .arrow {
    animation: ml-notmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: ml-notmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes ml-notmore {
    from {right: 1.2vh; transform: translateX(0%);}
    to {right: -0.5vh; transform: translateX(100%);} 
}

.section.show-more .button.more.ba-me .arrow {
    animation: me-showmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: me-showmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes me-showmore {
    from {transform: translateX(100%); right: calc(100% - 1.2vh);}
    to {transform: translateX(100%); right: calc(100% - 0.5vh);}
}

.section.show-more .button.more.ba-ml .arrow {
    animation: ml-showmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: ml-showmore 230ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes ml-showmore {
    from {transform: translateX(100%); right: calc(100% - 0.5vh);}
    to {transform: translateX(100%); right: calc(100% - 1.2vh);}
}

.section .button.more.ba-sm .arrow {
    animation: sm 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: sm 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}


@keyframes sm {
    0% {right: 1.2vh; transform: translateX(0%);}
    49% {transform: translateX(100%); right: -0.5vh;}
    50% {transform: translateX(100%); right: -0.5vh; opacity: 0;}
    51% {transform: translateX(0%); right: calc(100% + 0.5vh); opacity: 0;}
    52% {transform: translateX(0%); right: calc(100% + 0.5vh); opacity: 1;}
    100% {transform: translateX(100%); right: calc(100% - 1.2vh);}
  }

.section.show-more .button.ba-sm.more .arrow::after{
    animation: prparrowshow-af 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: prparrowshow-af 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards; 
}
.section.show-more .button.ba-sm.more .arrow::before {
    animation: prparrowshow-be 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: prparrowshow-be 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes prparrowshow-af {
    0% {transform: rotate(45deg); transform-origin: bottom right;}
    49% {transform: rotate(45deg); transform-origin: bottom right;}
    50% {transform: rotate(45deg); transform-origin: bottom right;}
    51% {transform: rotate(-45deg); transform-origin: bottom left; right: unset; left: 0;}
    52% {transform: rotate(-45deg); transform-origin: bottom left; right: unset; left: 0;}
    100% {transform: rotate(-45deg); transform-origin: bottom left; right: unset; left: 0;}
  }

  @keyframes prparrowshow-be {
    0% {transform: rotate(-45deg); transform-origin: top right;}
    49% {transform: rotate(-45deg); transform-origin: top right;}
    50% {transform: rotate(-45deg); transform-origin: top right;}
    51% {transform: rotate(45deg); transform-origin: top left; right: unset; left: 0;}
    52% {transform: rotate(45deg); transform-origin: top left; right: unset; left: 0;}
    100% {transform: rotate(45deg); transform-origin: top left; right: unset; left: 0;}
  }

  .section .button.more.ba-hm .arrow {
    animation: hm 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: hm 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes hm {
    0% {transform: translateX(100%); right: calc(100% - 1.2vh);}
    49% {transform: translateX(0%); right: calc(100% + 0.5vh); opacity: 1;}
    50% {transform: translateX(0%); right: calc(100% + 0.5vh); opacity: 0;}
    99% {right: 1.2vh; transform: translateX(0%); opacity: 0;}
    100% {right: 1.2vh; transform: translateX(0%); opacity: 1;}#toTop
  }

  .section .button.ba-hm.more .arrow::after{
    animation: prparrowhide-af 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: prparrowhide-af 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards; 
}
.section .button.ba-hm.more .arrow::before {
    animation: prparrowhide-be 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
    -webkit-animation: prparrowhide-be 600ms cubic-bezier(0.640, 0.040, 0.350, 1.000) forwards;
}

@keyframes prparrowhide-af {
    0% {transform: rotate(-45deg); transform-origin: bottom left; right: unset; left: 0;}
    49% {transform: rotate(-45deg); transform-origin: bottom left; right: unset; left: 0;}
    100% {transform: rotate(45deg); transform-origin: bottom right;}
  }

  @keyframes prparrowhide-be {
    0% {transform: rotate(45deg); transform-origin: top left; right: unset; left: 0;}
    49% {transform: rotate(45deg); transform-origin: top left; right: unset; left: 0;}
    100% {transform: rotate(-45deg); transform-origin: top right;}
  }


/* mobile */
@media screen and (max-width: 1400px) and (min-width: 980px) {
    @media screen and (min-height: 670px) {
        .section .button .bb-tekst, .section .button.more::after {font-size: 13px;}
    }
}

@media screen and (min-height: 961px) {
    .section .button .bb-tekst, .section .button.more::after {line-height: 50px;}
}

@media screen and (min-height: 870px) {
    .section .button .bb-tekst, .section .button.more::after {font-size: 15px;}
}

@media screen and (max-width: 980px) {
  
    /* buttony */
        .section .bottom {position: relative; padding-bottom: 0; bottom: 0; padding: 0 0 25px;}
        .section .button, .section .button.more::after {position: relative; bottom: 0 !important; height: 45px; line-height: 45px; width: 60%; min-width: 220px;}
        .section .button:nth-child(1) {margin-top: 0;}
        .section .button .bb-tekst {height: 45px; line-height: 45px;}
        .section .button .arrow {display: none;}
        .section .button:hover .bb-tekst {left: 0;}

    /* more */
        .section.show-more .button.more {
            left: 0;
            transform: translateX(0);
        }

}