main {
    margin-bottom: 0;
}

.main-header span {
    font-size: 1.5rem;
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
    content:url("/img/laivas-3.jpg") url("/img/koliazas-1.png") url("/img/koliazas-2.png") url("/img/koliazas-3.png");   
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 100vh;
}

main {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
}

footer {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.img-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 1em 0;
    width: 100%;
}

.main-img {
    height: 200px;
}

.main-text {
    text-transform: uppercase; 
    text-align: center; 
    font-size: 1.5rem;
}

.main-products {
    text-align: left;
    padding: 0.5em;
    font-size: 2rem;
}

.production-button {
    background-color: rgb(43, 56, 143);
    color: white;
    border:none;
    font-size: 1.5rem;
    font-family: Franklin, cursive;
    padding: 0.6em 0.75em;
    letter-spacing: 1px;
}

.main-img-text {
    text-align: center;
    margin:0;
    font-size: 1.5rem;
    padding: 0.25em;
    background-color: white;
    color: white
}

.header-secondary {
    background: rgb(67,101,174);
    background: -o-linear-gradient(left, rgba(67,101,174,1) 0%, rgba(70,130,195,1) 46%, rgba(70,167,223,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(67,101,174,1)), color-stop(46%, rgba(70,130,195,1)), to(rgba(70,167,223,1)));
    background: linear-gradient(90deg, rgba(67,101,174,1) 0%, rgba(70,130,195,1) 46%, rgba(70,167,223,1) 100%);
    display: block;
    text-align: left;
    padding-left: 30px;
    font-size: 2rem;
}

.secondary-box {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.secondary-text {
    color: white;
    font-size: 1.5rem;
    margin: 1em 1em 1em 30px;
    width: 100%;
}

.main-adv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;

    -webkit-box-pack: space-evenly;

        -ms-flex-pack: space-evenly;

            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    margin: 2em 0;
}

.img-adv {
    display: block;
    margin: auto;
    height: 170px;
}

.text-adv {
    margin-top: 0.5em;
    font-size: 2rem;
    text-align: center;
}

.wrapper-adv {
    width: 450px;
    margin: 0 auto;
}

.border-adv {
    height: 375px;
    border-right: 3px solid rgb(43, 56, 143);
    border-radius: 0.5rem;
}

.header-img-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
} 

.header-text {
    position: absolute;   
    left: 0;
    top: 60px; 

    font-family: Franklin Heavy, cursive; 
    width: 55%;
    margin-left: 1.25em;

    font-size: 3.4rem;
    color: white;
    -webkit-animation: 20s crossfade-color infinite;
            animation: 20s crossfade-color infinite;
}

.secondary-img {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    align-items: flex-start;
}

.slider-container {
    overflow: hidden;
}

.slider-wrapper {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: 20s crossfade infinite;
            animation: 20s crossfade infinite;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    background-size: contain;
}

@-webkit-keyframes crossfade {
    0% { 
        background-image: url("/img/zuvys-2.jpg");
    }

    28% {
        background-image: url("/img/zuvys-2.jpg");
    }

    33% {
        background-image: url("/img/laivas-3.jpg");
    }

    61% {
        background-image: url("/img/laivas-3.jpg");
    }

    66% {
        background-image: url("/img/koliazas-1.png");
    }

    95% {
        background-image: url("/img/koliazas-1.png");
    }

    100% {
        background-image: url("/img/zuvys-2.jpg");
    }
}

@keyframes crossfade {
    0% { 
        background-image: url("/img/zuvys-2.jpg");
    }

    28% {
        background-image: url("/img/zuvys-2.jpg");
    }

    33% {
        background-image: url("/img/laivas-3.jpg");
    }

    61% {
        background-image: url("/img/laivas-3.jpg");
    }

    66% {
        background-image: url("/img/koliazas-2.png");
    }

    95% {
        background-image: url("/img/koliazas-2.png");
    }

    100% {
        background-image: url("/img/zuvys-2.jpg");
    }
}

@-webkit-keyframes crossfade-color {
    0% { 
        color: white;
    }

    28% {
        color: white;
    }

    33% {
        color: rgb(43, 56, 143);
    }

    95% {
        color: rgb(43, 56, 143);
    }

    100% {
        color: white;  
    }
}

@keyframes crossfade-color {
    0% { 
        color: white;
    }

    28% {
        color: white;
    }

    33% {
        color: rgb(43, 56, 143);
    }

    95% {
        color: rgb(43, 56, 143);
    }

    100% {
        color: white;  
    }
}


.secondary-text {
    font-size: 1.25rem;
}

@media only screen and (max-width: 1148px){
    .main-adv {
        margin: 1em 0;
    }

    .secondary-text {
        font-size: 1rem;
    }

    .header-text {        
        top: 75px;
        font-size: 4.75vw;
    }
}

@media only screen and (max-width: 1000px){
    .img-adv {
        height: 235px;
    }

    .text-adv {
        font-size: 1.5rem;
    }

    .border-adv {
        height: 325px;
    }
}

@media only screen and (max-width: 872px) { 
    .secondary-text {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width: 786px) {
    .header-text {
        top: 40px;
        width: 70%;
    }

    .img-adv {
        height: 200px;
    }

    .header-secondary {
        font-size: 6vw;
    }

    .text-adv {
        font-size: 1.25rem;
    }

    .border-adv {
        height: 250px;
    }

    .secondary-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .secondary-img {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        width: 100%;
    }

    .secondary-text {
        width: auto;
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        font-size: 1.25rem;
    }

    .header-secondary {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 600px) {
    .main-adv {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    .border-adv {
        border-right: none;
        border-top: 3px solid rgb(43, 56, 143);
        width: 80%;
        height: 1px;
    }

    .img-adv {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }

    .text-adv {
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 475px) {
    .header-text {
        top: 35px;
        width: 70%;
    }
}