body {
    background-color: black;
    color: white;
}

/* Navigation Bar */

.navigation-bar {
    position: absolute;
    top: 0;
    left: 0;    
    width: 100%;
    z-index: 1;
    padding-bottom: 2rem;
    padding-top: 2rem;
    padding-left: 2rem;
}

.navigation-bar-logo {
    height: 4rem;
    vertical-align: top;
    margin-right: 1rem;
    cursor: pointer;
}

.navigation-bar-logo:hover {
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: wave-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-timing-function: linear;
    /* Standard syntax */
    animation-name: wave-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-timing-function: linear;
}

.navigation-bar-button {
    background: none;
    border: none;
    font-family: 'Amatic SC', cursive;
    font-size: 3rem;
    padding: 0;
    margin: 0 1rem;
    display: none;
}

.navigation-bar-button:hover {
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: wave-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-timing-function: linear;
    /* Standard syntax */
    animation-name: wave-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-timing-function: linear;
}

.navigation-bar-button:focus {
    outline: none;
}

/* Pages */

section {
    display: flex;
    overflow: hidden;
    text-align: center;
}

.onepage-pagination li a.active:before {
    border: 1px solid white;
}

.onepage-pagination li a:before  {
    background: white;
}

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

.bottom-container  {
    bottom: 0;
    left: 0;
    width: 100%;
    position: absolute;
    z-index: 10;
}

.down {
    font-family: 'Amatic SC', cursive;
    background: none;
    border: none;
    font-size: 3rem;
    margin-bottom: 2rem;
}

.comeback {
    font-family: 'Amatic SC', cursive;
    background: none;
    border: none;
    font-size: 3rem;
    margin-bottom: 2rem;
}

.comeback:focus {
    outline: none;
}

.comeback:hover {
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: wave-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-timing-function: linear;
    /* Standard syntax */
    animation-name: wave-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-timing-function: linear;
}

.down:focus {
    outline: none;
}

.down:hover {
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: wave-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-timing-function: linear;
    /* Standard syntax */
    animation-name: wave-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-timing-function: linear;
}

.arrows {
    font-size: 2.5rem;
}

.up {
    height: 2rem;
}

.page-content {
    position: relative;
    margin: 8rem auto 0 auto;
    width: 95%;
    height: 90%;
    /* bottom: 7rem;
    top: 8.5rem;
    left: 4rem;
    right: 4rem; */
}

.row {
    position: relative;
}

.page-header {
    border: none;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 6rem;
    margin-bottom: 7rem;
    font-weight: 900;
}

/* .page-sub-header {
    font-size: 2rem;
    margin-top: -8rem;
} */

/* 1st Page - Title */

.title-container {    
    margin: 20rem auto;    
    position: relative;
    text-align: center;
}

.title {
    font-family: 'Pacifico', cursive;
    font-size: 12rem;
    font-weight: 900;
}

.sub-title {
    font-family: 'Livvic', sans-serif;
    font-size: 4rem;
    margin-top: -2rem;
    margin-left: 12rem;
    letter-spacing: .45rem;
}

/* 2nd Page - O jachtach */

.page2 {
    background: url(media/moviebackgrounds/9frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.sub-row-right {
    position: relative;
    text-align: right;
}

.sub-header {
    font-family: 'Montserrat', 'sans-serif';
    font-size: 4rem;
    margin-bottom: 1rem;
    font-weight: 900;
    position: relative;
}

.sub-paragraph {
    font-family: 'Montserrat', 'sans-serif';
    font-weight: 700;
    font-size: 1.8rem;
    position: relative;
    margin-bottom: 2rem;
    width: 40%;
    display: inline-block;
}

.sub-left {
    margin-left: 12rem;
    text-align: left;
}

.sub-right {
    margin-right: 12rem;
    text-align: right;
}

.sub-gallery-link {
    color: white;
    font-weight: 900;;
}

.sub-gallery-link:hover {
    text-decoration: none;
    color: rgb(189, 189, 189);
}

/* 3nd Page - Dlaczego */

.page3 {
    background: url(media/moviebackgrounds/1frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.feature {
    font-family: 'Montserrat', 'sans-serif';
    font-weight: 700;
    font-size: 1.6rem;
    padding: 3rem 0rem;
}

.feature:hover {
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: wave-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-timing-function: linear;
    /* Standard syntax */
    animation-name: wave-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-timing-function: linear;
}

.feature-icon {
    height: 6rem;
    margin-bottom: 1rem;
    margin-top: -3rem;
}

.feature-row {
    margin-top: -2rem;
}

/* 4rd Page - Wyposazenie */

.right {
    text-align: right;
    padding-right: 5rem;
}

.left {
    text-align: left;
    padding-left: 5rem;
}

.equipment {
    font-family: 'Montserrat', 'sans-serif';
    font-weight: 700;
    font-size: 1.8rem;
    margin-top: 0.8rem;
}

/* 5th Page - Topaz */

.page5 {
    background: url(media/moviebackgrounds/8frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.thumbnail {
    transition: 1s;
    width: 10rem;
    height: 10rem;
    margin: 0 auto 2rem auto;
    outline: none;
    border: solid 1px #afafaf;
    background-color: transparent;
}


.thumbnail:hover {
    filter: grayscale(100%);
    transform: scale(1.1);
}

.thumbnail-row {
    text-align: center;
    width: 45%;
    margin: 0 auto;
}

/* 6th Page - Onyx */

.page6 {
    background: url(media/moviebackgrounds/8frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.thumbnail {
    transition: 1s;
    width: 10rem;
    height: 10rem;
    margin: 0 auto 2rem auto;
    outline: none;
    border: solid 1px #afafaf;
    background-color: transparent;
}


.thumbnail:hover {
    filter: grayscale(100%);
    transform: scale(1.1);
}

.thumbnail-row {
    text-align: center;
    width: 45%;
    margin: 0 auto;
}

/* 7th Page - Movie */

.film-frame {
    margin: 0 auto;
    /* border-radius: 5rem; */
    display: block;
    height: 40rem;
    width: 70rem;
}

.page7 {
    background: url(media/moviebackgrounds/2frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

/* 8th Page - Wynajem */

.page8 {
    background: url(media/moviebackgrounds/3frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.page9 {
    background: url(media/moviebackgrounds/4frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.page10 {
    background: url(media/moviebackgrounds/5frame.jpg); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 120%;
}

.rent-icon {
    font-size: 6rem;
}

.rent-title {
    font-family: 'Anton', sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.rent-paragraph {
    font-family: 'Montserrat', 'sans-serif';
    font-weight: 400;
    font-size: 1.8rem;
    padding: 0 4rem;
}

.rent-contact {
    font-family: 'Montserrat', 'sans-serif';
    font-weight: 400;
    font-size: 2rem;
    margin-top: 10rem;
    display: inline-block;
}

.rent-contact-link{
    font-family: 'Montserrat', 'sans-serif';
    font-size: 2rem;
    margin-top: 10rem;
    margin-left: .7rem;
    display: inline-block;
}

.rent-contact-link:hover{
    text-decoration: none;
    font-size: 2.1rem;
    color: white;
    font-weight: 400;
    cursor: pointer;
}

.rent-download-link {
    color: white;
}

.rent-download-link:hover {
    text-decoration: none;
    color: white;
    font-weight: 400;
}

/* 9th Page - Sprzedaz */

.sell-text {
    font-family: 'Livvic', sans-serif;
    font-size: 3rem;
    padding: 0 25rem;
}

.sell-image {
    width: 40rem;
    margin-top: 8rem;
}
.sell-image:hover {
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: wave-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-timing-function: linear;
    /* Standard syntax */
    animation-name: wave-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-timing-function: linear;
}

/* 10th Page - Contact */

.contact-icon {
    font-size: 6rem;
}

.contact-title {
    font-family: 'Indie Flower', cursive;
    font-size: 5rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.contact-paragraph {
    font-family: 'Montserrat', 'sans-serif';
    font-weight: 400;
    font-size: 1.8rem;
}

.contact-link {
    color: white;
}

.contact-link:hover {
    color: white;
    text-decoration: none;
    font-weight: 700;
}

/* Animations */
 /* Safari 4.0 - 8.0 */
 @-webkit-keyframes wave-animation {
    0% {transform: rotate(5deg);} 
    25% { transform: rotate(-10deg);}
    50% { transform: rotate(10deg);}
    75% { transform: rotate(-5deg);  }
    100% { transform: rotate(0deg);  }
}

/* Standard syntax */
@keyframes wave-animation {
   0% {transform: rotate(5deg);} 
   25% { transform: rotate(-10deg);}
   50% { transform: rotate(10deg);}
   75% { transform: rotate(-5deg);  }
   100% { transform: rotate(0deg);  }
}

/* Media */

@media (max-width: 481px) {

    .video-background {
        display: none;
    }

    .page1 {
        background: url(media/moviebackgrounds/6frame.jpg); 
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 120%;
    }
    
    .page4 {
        background: url(media/moviebackgrounds/7frame.jpg); 
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 120%;
    }

    .page9 {
        background: url(media/moviebackgrounds/5frame.jpg); 
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 120%;
    }

    .page10 {
        background: url(media/moviebackgrounds/4frame.jpg); 
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 120%;
    }
}

@media (max-width: 1500px) {
    .column-frame iframe{
        max-width: 55rem;
    }
}

@media (max-width: 1200px) {
    .column-frame iframe{
        max-height: 20rem;
        width: auto;
        margin-bottom: 1rem;
    }
}



@media (max-width:800px) {

    .page-content {
        width: 80%;
        margin: 5rem auto 0 auto;
    }

    .title {
        font-size: 5rem;
    }
    .sub-title {
        font-size: 1.8rem;
        letter-spacing: .2rem;
        margin-left: 5rem;
        margin-top: -1rem;
    }

    .navigation-bar-button {
        font-size: 2rem;
        margin: 0 .5rem;
    }
    
    .navigation-bar-logo {
        height: 2rem;
    }

    .page-header {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .contact-icon {
        margin-top: 1.5rem;
        font-size: 4rem;
    }

    .contact-title {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .contact-paragraph {
        font-size: 1rem;
    }

    .film-frame {
        margin-top: 7rem;
        width: 100%;
        height: 23.5rem;
        /* border-radius: 3rem; */
    }

    .column-frame iframe{
        max-height: 20rem;
        width: auto;
        margin-bottom: 5rem;
    }

    .feature {
        font-size: 1rem;
    }

    .feature-icon {
        height: 4rem;
    }

    .right {
        padding-right: 1rem;
    }
    
    .left {
        padding-left: 1rem;
    }

    .equipment {
        font-size: 1rem; 
    }
    
    .rent-icon {
        font-size: 3rem;
    }

    .rent-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .rent-paragraph {
        font-size: 1rem;
        padding: 0;
    }

    .rent-contact {
        margin-top: 5rem;
        font-size: 1.3rem;
    }

    .rent-contact-link {
        margin-top: 5rem;
        font-size: 1.5rem;
    }

    .rent-contact-link:hover {
        margin-top: 5rem;
        font-size: 1.5rem;
    }

    .sell-text {
        font-size: 1.7rem;
        padding: 0;
    }

    .sell-image {
        width: 25rem;
    }

    .rent-column {
        margin-top: 4rem;
    }

    .thumbnail {
        height: 6rem;
        width: 6rem;
        margin: 0 auto 2rem auto;
    }

    .thumbnail-row {
        width: 90%;
        padding-top: 2rem;
    }

    .sub-paragraph {
        font-size: 1.2rem;
        width: 90%;
        margin-bottom: 0;
    }

    .sub-header {
        font-size: 3rem;
        margin-top: 5rem;
    }

    .sub-left {
        margin-left: 2rem;
    }

    .sub-right {
        margin-right: 2rem;
    }

}