/*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.2s ease-in-out;

}



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

    

}





/*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;}

}











/*S E C T I O N*/

.display {

    height: 100vh;

    background: url("../img/pozadi/1.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    position: relative;

}



.shadowDisplay {

    height: 100%;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 50%, rgba(33, 33, 33, 0.4));

}





.table {

    width: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

}



.tablePopis h1 {

    color: rgba(255, 255, 255, 0.8);

    font-size: 120px;

    font-weight: 700;

    font-family: "Caveat", cursive;

}



.tablePopis h2 {

    color: rgba(255, 255, 255, 0.4);

    font-size: 60px;

    font-weight: 500;

    font-family: "Caveat", cursive;

}





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

    

}



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

    .tablePopis h1 {

        font-size: 16vw;

    }

    .tablePopis h2 {

        font-size: 10vw;

    }

}



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

    

}











/*S H O W   A N I M A T I O N*/

.showZoom {

    opacity: 0;

    transform: scale(0.4);

    transition-duration: 0.4s;

}

.showZoom.activeZoom {

    opacity: 1;

    transform: translateZ(0) scale(1);

}





.showZoomX {

    opacity: 0;

    transform: scale(0.4);

    transition-duration: 0.4s;

}

.showZoomX.activeZoomX {

    opacity: 1;

    transform: translateZ(0) scale(1);

}





.showNahoru {

    opacity: 0;

    transition: all 0.4s ease-in-out;

    transform: translateY(-40px);

}

.showNahoru.activeNahoru {

    opacity: 1;

    transform: translateY(0px);

}





.showNahoruX {

    opacity: 0;

    transition: all 0.4s ease-in-out;

    transform: translateY(-40px);

}

.showNahoruX.activeNahoruX {

    opacity: 1;

    transform: translateY(0px);

}





.showDolu {

    opacity: 0;

    transition: all 0.4s ease-in-out;

    transform: translateY(80px);

}

.showDolu.activeDolu {

    opacity: 1;

    transform: translateY(0px);

}





.showDoluX {

    opacity: 0;

    transition: all 0.4s ease-in-out;

    transform: translateY(80px);

}

.showDoluX.activeDoluX {

    opacity: 1;

    transform: translateY(0px);

}





.showDoprava {

    transition: all 0.4s ease-in-out;

    transform: translateX(60px);

}

.showDoprava.activeDoprava {

    opacity: 1;

    transform: translateX(0px);

}







.showDopravaX {

    opacity: 0;

    transition: all 0.4s ease-in-out;

    transform: translateX(60px);

}

.showDopravaX.activeDopravaX {

    opacity: 1;

    transform: translateX(0px);

}





.showDoleva {

    opacity: 0;

    transition: all 0.2s ease-in-out;

    transform: translateX(-100px);

}



.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.96;

    transition: all 0.4s ease-in-out;

    filter: blur(0px);

}

.showBlur.activeBlur {

    opacity: 1;

    filter: blur(0px);

}





.showBlurX {

    transition: all 0.4s 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;

    }

}