/* tento subor je alternativa k servis.css */


/* SARTO COLOR = rgb(255, 238, 0); */
*{
    margin: 0 ; 
    padding: 0;
}

body {
    margin: 0 ; 
    padding: 0 ; 
    min-width: 375px;
}


#blok1{
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto ;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
}

.white-div { 
    width: 80% ; 
    margin: auto ; 
    margin-top: 10% ;
    font-size: 1.6rem ; 
    height: auto ; 
    padding-bottom: 10% ;
}

.white-div h1  {
    width: 60% ;
    position: relative ;
    left: -105vw ;
    opacity: 0 ;
    transform: scale(0);
    transition: all 1s ease-out ; 
    font-size: 4rem;
}


h1:hover ,h2:hover ,p:hover { 
    cursor: default ; 
}

.white-div h1::after { 
    content: '' ; 
    position: absolute ; 
    width: 80%; 
    margin-left: 10% ; 
    height: 3px ; 
    background: linear-gradient(to right , rgb(255, 238, 0), rgb(138, 129, 0) , rgb(0, 0, 0) ) ; 
    left: 0 ; 
    bottom: 40px ; 
    transform: scale(0); 
    transition: all .3s ease-in ; 
}

.white-div h1:hover::after { 
    transform: scale(1);
    /* height: 3px ;  */
}

.white-div p { 
    padding: 5% 10% 5% 10%  ;
    transform: scale(0); 
    opacity: 0;
    transition: all 1s ease;
}

.font-bold { 
    font-size: 1.8rem ; 
}

.white-div h1 , .yellow-div h1{
    position: relative;
    margin: auto ;
    padding: 5vh 0 5vh 0 ; 
}

.yellow-div {
    margin:auto ; 
    display: flex ; 
    margin: 5% 0 0% 0 ;
    padding: 5% 0 3% 0  ; 
    width: 100% ;
    background: rgb(255, 238, 0);
    height: auto ; 
    flex-direction: column ;
}

.pokec {
    display: flex ;
    width: 100% ;
    flex-direction: column;
}

.pokec h1 { 
    margin-top: 5% ;
    font-size: 3rem ;
    width: 90%;
}

.pokec h2 { 
    margin: auto ; 
    padding: 0 20% 10% 20% ; 
}

.gallery-container { 
    padding-top: 10vh ; 
}

.gallery { 
    width: 100% ; 
    margin: 5% 0 8% 0 ; 
}

.gallery a { 
    text-decoration: none ; 
    color: black ; 
}

.gallery img { 
    position: relative;
    margin: 1.5%   ; 
    box-shadow: 0 0 10px black; 
    transition: all .3s ease ; 
    width: calc(100vw/3.5);
    height: calc(100vw/5) ; 
    min-width: 350px;
    min-height: 275px;
    filter: saturate(60%);
}

.gallery img:hover { 
    transform: scale(1.1); 
    filter: saturate(100%);
}

/* --------------------------------------------------------------------------------------- */
/* -------------------------------------HEIGHT >= 900 ------------------------------------ */
/* --------------------------------------------------------------------------------------- */
@media only screen and (min-height: 900px)
{


    @media only screen and (max-width: 1560px )
    {
        .gallery img { 
            width: calc(100vw/2.7); 
            height: calc(100vw/4);
            margin: 2% ;
        }
        .white-div h1 { 
            width: 80% ; 
        }
    }

    @media only screen and (max-width: 1281px )
    {
        .gallery img { 
            width: calc(100vw/2.6); 
            height: calc(100vw/4);
            margin: 1.5% ;
        }

        .white-div h1 { 
            font-size: 3.3rem ;
            width: 80% ; 
        }

        .white-div h1::after { 
            bottom: 20px ;
        }
    }

    @media only screen and (max-width: 1000px ){
        .gallery img { 
            width: calc(100vw/1.5); 
            height: calc(100vw/2.2);
            margin: 3% 0 3% 0 ;
        }

        .white-div h1 { 
            font-size: 2.7rem ;
            width: 90% ; 
        }
    }

    @media only screen and (max-width: 750px ){
        .pokec h1  {
            font-size: 2.4rem ;
        }

        .pokec h2 { 
            font-size: 1.5rem ; 
            padding: 0 10% 10% 10%  ;
        }
    }

    @media only screen and (max-width: 670px ){
        .gallery img { 
            width: calc(100vw/1.5); 
            height: calc(100vw/2.4);
            margin: 5% 0 5% 0 ;
        }

        .gallery img:hover { 
            transform:scale(1.05); 
        }

        .white-div h1 { 
            font-size: 2.3rem ;
            width: 100% ; 
        }

        .white-div h1::after { 
            bottom: 0px ;
        }

        .white-div p { 
            width: 100% ; 
            padding: 10% 2% 10% 2%  ;
            font-size: 1.3rem ; 
        }

    }

    
}


/* --------------------------------------------------------------------------------------- */
/* -------------------------------------HEIGHT < 900 ------------------------------------ */
/* --------------------------------------------------------------------------------------- */

@media only screen and (max-height: 899px){

    .white-div h1::after { 
        bottom: 20px ;
    }

    @media only screen and (max-width: 1560px )
    {
        .gallery img { 
            width: calc(100vw/2.7); 
            height: calc(100vw/4);
            margin: 2% ;
        }
        .white-div h1 { 
            width: 80% ; 
        }
    }

    @media only screen and (max-width: 1281px )
    {
        .gallery img { 
            width: calc(100vw/2.6); 
            height: calc(100vw/4);
            margin: 1.5% ;
        }

        .white-div h1 { 
            font-size: 3.3rem ;
            width: 80% ; 
        }

        
    }

    @media only screen and (max-width: 1000px ){
        .gallery img { 
            width: calc(100vw/1.5); 
            height: calc(100vw/2.2);
            margin: 3% 0 3% 0 ;
        }

        .white-div h1 { 
            font-size: 2.7rem ;
            width: 90% ; 
        }
    }


    @media only screen and (max-width: 750px ){
        .pokec h1  {
            font-size: 2.4rem ;
        }

        .pokec h2 { 
            font-size: 1.5rem ; 
            padding: 0 10% 10% 10%  ;
        }
    }

    @media only screen and (max-width: 670px ){
        .gallery img { 
            width: calc(100vw/1.5); 
            height: calc(100vw/2.4);
            margin: 5% 0 5% 0 ;
        }

        .gallery img:hover { 
            transform:scale(1.05); 
        }

        .white-div h1 { 
            font-size: 2.3rem ;
            width: 100% ; 
        }

        .white-div p { 
            width: 100% ; 
            padding: 10% 2% 10% 2%  ;
            font-size: 1.3rem ; 
        }
        
        .pokec h1  {
            font-size: 1.9rem ;
        }

        .pokec h2 { 
            font-size: 1.3rem ; 
            padding: 0 10% 10% 10%  ;
        }
    }

    @media only screen and (max-width: 670px ){
        .pokec { 
            padding: 10vh 0 10vh 0 ;
        }
    }
}