/*ZÁKLADNÍ NASTAVENÍ PROJEKTŮ*/
body {
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-family: 'Saira', sans-serif;
}

.container {
    width: 1200px;
    margin: auto;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}


p, ul, ol, li, body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}


a, input {
    transition: 0.3s ease-in-out;
}

@media screen and (max-width: 1200px) {
    
}


li::marker {
    
}


.posledniP {
    padding-bottom: 0 !important;
}
.posledniLI {
    padding-bottom: 0 !important;
}
.posledniA {
    border-bottom: none !important;
}



/*ZÁKLADNÍ NASTAVENÍ RESPONSIVU*/
/*do 479px ... MOBIL na výšku*/
@media screen and (max-width: 479px) {
    .container {width: 84%;}
}
/*480px + ... MOBIL na šířku*/
@media screen and (min-width: 480px) {
    .container {width: 88%;}
}
/*740px + ... TABLET na výšku*/
@media screen and (min-width: 740px) {
    .container {width: 92%;}
}
/*960px + ... TABLET na šířku*/
@media screen and (min-width: 960px) {
    .container {width: 92%;}
}
/*1200px + ... ZOBRAZENÍ NA POČÍTAČI*/
@media screen and (min-width: 1300px) {
    .container {width: 1200px;}
}





/*O D K A Z Y*/
.menuLine {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0 20px 0;
    margin: auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 100;
}


.odkazyBox {
    flex: 0 1 50%;
    text-align: center;
}

.odkazyBoxElne {
    flex: 0 1 280px;
    text-align: center;
}


.kontaktAutoservis {
    display: inline-flex;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid rgb(255, 197, 19);
    border-radius: 20px;
    padding: 10px 24px;
    transition: 0.3s ease-in-out;
}

.kontaktAutoservis:hover {
    border-radius: 0;
}


.kontaktDDD {
    display: inline-flex;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    background: rgb(236, 53, 66);
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 10px 24px;
    transition: 0.3s ease-in-out;
}

.kontaktDDD:hover {
    color: rgb(0, 0, 0);
}


@media screen and (max-width: 1200px) {
    .menuLine {
        width: 100%;
    }
}

@media screen and (max-width: 960px) {
    .kontaktAutoservis {
        font-size: 15px;
        padding: 10px 24px;
    }
    .kontaktDDD {
        font-size: 15px;
        padding: 12px 24px;
    }
}

@media screen and (max-width: 740px) {
    .menuLine {
        display: none;
    }
}





/*S E C T I O N*/
.elneDisplay {
    display: flex;
    height: 100vh;
    position: relative;
}

.autoservis {
    width: 50%;
    background: url("../img/pozadi/1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-position-x: 90%;
    position: relative;
}


.autoservisShadow {
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 50%, rgba(255, 197, 19, 0.2));
}


.autoservisNadpis {
    width: 100%;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.autoservisNadpis h1 {
    color: rgba(255, 197, 19, 0.8);
    font-size: 4vw;
    font-weight: 900;
    line-height: 5vw;
}

.autoservisNadpis i {
    color: rgba(255, 197, 19, 0.8);
    font-size: 30px;
    margin: 0 20px;
}



.dddSluzby {
    width: 50%;
    background: url("../img/pozadi/2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}


.dddSluzbyShadow {
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 50%, rgba(236, 53, 66, 0.2));
}


.dddSluzbyNadpis {
    width: 100%;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dddSluzbyNadpis h1 {
    color: rgba(236, 53, 66, 0.8);
    font-size: 4vw;
    font-weight: 900;
    line-height: 5vw;
}

.dddSluzbyNadpis i {
    color: rgba(236, 53, 66, 0.8);
    font-size: 30px;
    margin: 0 20px;
}


@media screen and (max-width: 1200px) {
    .autoservisNadpis h1 {
        font-size: 6vw;
        line-height: 9vw;
    }
    .dddSluzbyNadpis h1 {
        font-size: 6vw;
        line-height: 9vw;
    }
}

@media screen and (max-width: 740px) {
    .elneDisplay {
        flex-direction: column;
    }
    .autoservis {
        width: 100%;
        height: 50%;
    }
    .autoservisShadow {
        width: 100%;
    }
    .dddSluzby {
        width: 100%;
        height: 50%;
    }
    .dddSluzbyShadow {
        width: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 50%, rgba(236, 53, 66, 0.2));
    }
    .autoservisNadpis {
        top: 35%;
    }
    .dddSluzbyNadpis {
        top: 65%;
    }
}

@media screen and (max-width: 480px) {
    .autoservis {
        background-position-x: 90%;
    }
    .autoservisNadpis h1 {
        font-size: 6vw;
        line-height: 10vw;
    }
    .dddSluzbyNadpis h1 {
        font-size: 6vw;
        line-height: 10vw;
    }
}



/*L O G O*/
.tabulkaElne {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.logo2 {
    background: rgb(11, 11, 11);
    padding: 20px;
    margin: 50px 0;
}

@media screen and (min-width: 740px) {
    .tabulkaElne {
        display: none;
    }
}


.elneLogo {
    background: rgb(11, 11, 11);
    padding: 40px 80px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 100;
}


.logoCara {
    width: 280px;
    display: flex;
}


.LN img {
    display: flex;
    width: auto;
    height: 65px;
}


.caraLeft {
    flex: 0 1 120px;
}

.caraL {
    height: 15px;
    background: rgb(255, 197, 19);
    margin-bottom: 10px;
    position: relative;
}

.caraL1 {
    width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%);
}

.caraL2 {
    width: 92%;
    clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 0% 100%);
}

.caraL3 {
    width: 84%;
    clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 0% 100%);
    margin-bottom: 0 !important;
}


.caraRight {
    flex: 0 1 120px;
}

.caraR {
    height: 15px;
    background: rgb(236, 53, 66);
    margin-bottom: 10px;
    position: relative;
}

.caraR1 {
    width: 84%;
    right: -16%;
    clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.caraR2 {
    width: 92%;
    right: -8%;
    clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.caraR3 {
    width: 100%;
    clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
    margin-bottom: 0 !important;
}


@media only screen and (max-width: 1200px) {
    .logoCara {
        width: 220px;
    }
    .LN img {
        height: 52px;
    }
    .caraL {
        height: 12px;
        margin-bottom: 8px;
    }
    .caraR {
        height: 12px;
        margin-bottom: 8px;
    }
}





/*F O O T E R*/





/*S H O W   A N I M A T I O N*/
.showBackground {
    opacity: 1;
    transition: all 0.6s ease-in-out;
    background: unset;
}
.showBackground.activeBackground {
    opacity: 1;
    background-image: linear-gradient(180deg,rgb(226, 230, 234),rgb(241, 243, 245));
}


.showZoom {
    opacity: 0;
    transform: scale(0.4);
    transition-duration: 0.3s;
}
.showZoom.activeZoom {
    opacity: 1;
    transform: translateZ(0) scale(1);
}


.showZoomX {
    opacity: 0;
    transform: scale(0.4);
    transition-duration: 0.3s;
}
.showZoomX.activeZoomX {
    opacity: 1;
    transform: translateZ(0) scale(1);
}


.showNahoru {
    opacity: 0;
    transition: all 1s ease-in-out;
    transform: translateY(-20px);
}
.showNahoru.activeNahoru {
    opacity: 1;
    transform: translateY(0px);
}


.showNahoruX {
    opacity: 0;
    transition: all 0.1s ease-in-out;
    transform: translateY(-20px);
}
.showNahoruX.activeNahoruX {
    opacity: 1;
    transform: translateY(0px);
}


.showDolu {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: translateY(80px);
}
.showDolu.activeDolu {
    opacity: 1;
    transform: translateY(0px);
}


.showDoluX {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: translateY(80px);
}
.showDoluX.activeDoluX {
    opacity: 1;
    transform: translateY(0px);
}


.showDoprava {
    opacity: 0;
    transition: all 1s ease-in-out;
    transform: translateX(60px);
}
.showDoprava.activeDoprava {
    opacity: 1;
    transform: translateX(0px);
}



.showDopravaX {
    opacity: 0;
    transition: all 1s ease-in-out;
    transform: translateX(60px);
}
.showDopravaX.activeDopravaX {
    opacity: 1;
    transform: translateX(0px);
}


.showDoleva {
    opacity: 0;
    transition: all 1s ease-in-out;
    transform: translateX(-60px);
}

.showDoleva.activeDoleva {
    opacity: 1;
    transform: translateX(0px);
}


.showDolevaX {
    opacity: 0;
    transition: all 1s ease-in-out;
    transform: translateX(-60px);
}
.showDolevaX.activeDolevaX {
    opacity: 1;
    transform: translateX(0px);
}


.showBlur {
    opacity: 0;
    transition: all 1s ease-in-out;
    filter: blur(4px);
}
.showBlur.activeBlur {
    opacity: 1;
    filter: blur(0px);
}


.showBlurX {
    transition: all 1s ease-in-out;
    filter: blur(20px);
}
.showBlurX.activeBlurX {
    filter: blur(0px);
}


@media screen and (max-width: 1400px) {
    .showDoprava {
        transform: translateX(20px);
    }
    .showDoleva {
        transform: translateX(-20px);
    }
    .showDopravaX {
        transform: translateX(20px);
    }
    .showDolevaX {
        transform: translateX(-20px);
    }
}



.d025 {
    transition-delay: 0.25s;
}
.d05 {
    transition-delay: 0.5s;
}
.d075 {
    transition-delay: 0.75s;
}
.d1 {
    transition-delay: 1s;
}
.d125 {
    transition-delay: 1.25s;
}
.d15 {
    transition-delay: 1.5s;
}
.d175 {
    transition-delay: 1.75s;
}
.d2 {
    transition-delay: 2s;
}
.d25 {
    transition-delay: 2.5s;
}
.d3 {
    transition-delay: 3s;
}


@media screen and (max-width: 1200px) {
    .d0 {
        transition-delay: 0s;
    }
}