@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Hide scrollbar for Safari and Opera */
html::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome */
::-webkit-scrollbar {
    display: none;
}




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'Fira Sans', sans-serif;

    -ms-overflow-style: none;
    scrollbar-width: none;

}

html{     /* update after all */

}

body{
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


/*
.nav{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
    position: absolute;
    top: 0;

    border: 1px solid white;
    height: 5vh;
    width: 100vw;

}

*/



/* ### CSS max-width: 1599px && min-width: 1025px ### */
/* ### LAP (Large): 1025px - 1599px ### */

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
   
}

.page{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo{
    height: 3.5em;
}


.page:nth-child(1){
    background-color: #0088c2;
    height: 35vh;
}

.page:nth-child(2){
    background-color: #ffffff;
    height: 65vh;
    justify-content: space-evenly;

}

.page:nth-child(3){
    background-color: #ffffff;
    height: 25vh;

}

.page:nth-child(4){
    background-color: #ffffff;
    height: calc(330px / 2);
}


.page:nth-child(5){ /*footer section*/
    background-color: #0088c2;
    height: calc(330px / 2);
    align-items: flex-end;

}

.banner{
    width: 20em;
    height: 80%;


    
    display: flex;
    flex-direction: column;
    /*justify-content: space-evenly; */
    align-items: center;
}

.banner .back-img{
    height: 10em;
    width: 10em;
    background-image: url(/imgs/web&app2.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0088c2;
    border-radius: 50%;
    flex-shrink: 0; /*není dobře*/

}

.banner:nth-child(2) .back-img{
    background-image: url(/imgs/it-support5.png);
}

.banner:nth-child(3) .back-img{
    background-image: url(/imgs/wifi4.png);
}

.banner:nth-child(4) .back-img{
    background-image: url(/imgs/cctv-camera2.png);
}

.banner h2 {
    font-size: 2.2em;
    text-align: center;
    margin: .5em 0;
}

.banner p {
    padding: 0.5em;
    font-size: 1.1em;
    color: #333333;
    text-align: center;
    line-height: 1.4em;
}


.contact{
    width: 100vw;
    height: 15vh;
    display: flex;
    justify-content: space-around;


    
    align-items: center;
    flex-direction: row;
    background-color: #0088c2;
    color: #ffffff;
}

.contact-info .contact-back-img{
    display: inline-flex;
    height: 2em;
    width: 2em;
    margin-right: .5em;
}

.contact-info .contact-text{
    display: inline-flex;
}

.contact-info .contact-text a {
    color: inherit;
    text-decoration: none;
}



.contact-info:nth-child(1) .contact-back-img{
    background-image: url(/imgs/telephone.png);
    background-size: 100%;
    vertical-align: middle;
}

.contact-info:nth-child(2) .contact-back-img{
    background-image: url(/imgs/mail.png);
    background-size: 100%;
    vertical-align: middle;
}

.contact-info:nth-child(3) .contact-back-img{
    background-image: url(/imgs/location2.png);
    background-size: 100%;
    vertical-align: middle;
}

.contact-info:nth-child(4) .contact-back-img{
    background-image: url(/imgs/information.png);
    background-size: 100%;
    vertical-align: middle;
}

.drop-shadow{
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);  
}

.google-maps-iframe{
    width: 1440px;
    height: 330px;
    border: none;
}






/* ### CSS for whateverBigDevice ### */
/* @media only screen and (min-width: 1600px)  {} */

/* ### CSS for small desktop / halfPageBrowsers ### */
@media only screen and (min-width: 764px) and (max-width: 1023px) {

    .page:nth-child(2){
        flex-basis: 50%;
        flex-wrap: wrap;
        align-items: normal;
        height: auto;
        margin: 1em 0em;
    }

    .page:nth-child(2) .banner{
        margin: 1em;
    }

    .page:nth-child(3){
        height: 20vh;
    }
    
    .google-maps-iframe {
        width: 95vw;
    }

    .contact {
        flex-basis: 50%;
        flex-wrap: wrap;
        align-items: center;
        
    }

    .contact .contact-info{
        margin: 1em;
    }
    



}


/* ### CSS for bigPhone or tablet ### */
@media only screen and (min-width: 481px) and (max-width: 765px)  {

    .logo{
        height: 2.5em;
    }

    .page:nth-child(2){
        flex-basis: 50%;
        flex-wrap: wrap;
        align-items: normal;
        height: auto;
        margin: 1em 0em;
    }

    .page:nth-child(2) .banner{
        margin: 1em;
    }

    .page:nth-child(3){
        height: 20vh;
    }
    
    .google-maps-iframe {
        width: 95vw;
    }

    .contact {
        flex-direction: column;
        flex-basis: 50%;
        flex-wrap: wrap;
        align-items: center;
        
    }

    .contact .contact-info{
        margin: 1em;
    }
    
}



/* ### CSS for most mobile phones ### */
@media only screen and (min-width: 320px) and (max-width: 480px)  {

    .logo{
        height: 1.5em;
    }

    .page:nth-child(2){
        flex-basis: 50%;
        flex-wrap: wrap;
        align-items: normal;
        height: auto;
        margin: 1em 0em;
    }

    .page:nth-child(2) .banner{
        margin: 1em;
    }

    .page:nth-child(3){
        height: 20vh;
    }
    
    .google-maps-iframe {
        width: 95vw;
    }

    .contact {
        flex-direction: row;
        flex-basis: 50%;
        flex-wrap: wrap;
        align-items: center;
        padding: .3em 0em;
        
    }

    .contact .contact-info{
        margin: .5em;
    }
    
}





/* ### CSS for small mobiles ### 
@media only screen and (min-width: 320px) and (max-width: 374px)  {...}