/* style */


/*FONT
Barlow condensed
Monserat
*/
/*mobilni verze*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*
    {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        scroll-behavior: smooth;
        font-family: 'Times New Roman', Times, serif;
        font-size: 17px;
    }
/*elementy*/
a
    {
        color: white;
    }
b
    {
        font-size: inherit;        
    }
i
    {
        all: inherit;
        display: inline;
        font-style: italic;
    }
body
    {
        display: flex;
        overflow-x: hidden;
        overflow-y: scroll;
        flex-direction: column;
        min-height: 100vh;        
        background-image: url('img/uvod.jpg');
        background-position: 50% 25%;
        background-size: cover;
        background-attachment: fixed;        
    }
h1
    {
        font-size: 2em;
        font-family: 'Open Sans';
        margin-bottom: 20px;        
    }
#menu_list > a
    {
        color: rgb(255,255,255);
        text-decoration: none;
    }

#menu_list > a:visited
    {
        color: rgb(255,255,255);
        text-decoration: none;
    }
ul > li
    {
        margin-left: 20px;
    }
select
    {
        padding: 10px;
        border-radius: 10px;
        font-family: 'Open Sans';
        cursor: pointer;
    }
option
    {
        height: 100px;
        font-family: 'Open Sans';
    }
input[type="text"], input[type="password"], input[type="number"]
    {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid black;
        outline: 0px;
        font-family: 'Open Sans';
    }
input[type="file"]
    {
        display: none;        
    }
input[type="color"] {
    border-radius: 5px;
    padding: 0;
    border: 0px solid #DDD;
    height: 1em;
    margin: 10px 0;
    }
    
input[type="color"]::-moz-color-swatch {
border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: 0;
}

input[type="color"]::-webkit-color-swatch {
border: none;
}
input[type="range"]
    {
        margin: 10px 0;
    }
input[type="submit"]
    {
        padding: 10px 25px;
        margin: 1em auto;
        border-radius: 10px;
        font-size: 1.2em;
        font-weight: bold;
        background-color: rgb(0,111,183);
        border: 0px;
        color: rgb(255,255,255);
        font-family: 'Open Sans';
        cursor: pointer;
        transition: .2s;
    }
input[type="submit"]:hover  
    {
        box-shadow: 0px 1px 3px .5px #333;
    }
textarea
    {
        width: 400px;
        height: 100px;
        border-radius: 20px;
        padding: 10px;
    }
/* IDs */
#header
    {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        min-height: 80vh;        
        /*background-image: url('img/vet01.jpg');*/
        /*background-image: url('img/uvod.jpg');
        background-position: 50% 25%;
        background-size: cover;*/
        color: white;
        text-shadow: 0px 0px 3px #000;
        font-size: 3.5em;
        text-align: center;
        padding: 5%;
        font-family: 'Open Sans';
        flex-direction: column;
        background-attachment: fixed;     
    }

#menu
    {
        display: block;
        position: fixed;
        top: 0px;
        width: 100%;
        background: rgba(0,111,183,1);        
        transition: .3s; 
        z-index: 10;        
        gap: 0px;
        opacity: .7 !important;
        box-shadow: 0px 2px 3px #444; 
        backdrop-filter: blur(5px) !important;        
    }
#menu_list > a
    {
        z-index: 12 !important;
        position:relative;
    }
#menu:hover
    {
        opacity: 1 !important;        
        backdrop-filter: blur(10px) !important;        
    }
    
#menu_top_bar
    {
        display: block;
        flex-basis: 100vw;
        width: 100vw;
        height: 10vh;
    }

#menu_list    
    {
        display: none;        
        list-style-type: none;        
        margin: 0px;
        padding: 0px;    
        z-index: 11 !important;
    }

#menu_btn
    {   
        display: inline-block;
        position: absolute;
        right: 10px;        
        font-size: 1.4em;
        top: calc(5vh - 0.7em);
        cursor: pointer;
    }

#content
    {
        display: block;
        width: 100vw;        
        padding-top: 20px;
        margin-bottom: 0px;
    }

#footer
    {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 10px;
        padding: 30px 10%;
        background-color: #222;
        color: white;       
        margin-top: auto; 
    }
#mapa
    {
        height: 50vw;
        width: 100%;  
    }
#down_arrow
    {
        display: none;
    }
#overlay
    {        
        top: 0px;
        position: fixed;
        z-index: 100 !important;
        background-color: rgba(0,0,0,0);
        display: flex;
        justify-content: center;
        transition: .5s;
        /*left: 50%;
        top: 50%;*/
    }
#overlay_img
    {
        position: relative;
        box-sizing: border-box;
        width: 0px;
        margin: 80px;                
        transition: width 1s;    
        object-fit: scale-down;
        justify-content: center;
    }

/*content specific IDs*/
/*#aktuality
    {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;        
        min-height: 60vh;
        align-items: flex-start;
        align-content: flex-start;
    }*/
#team
    {
        display: flex;
        flex-wrap: wrap;                
        gap: 10px;
        padding: 50px 20vw 20px 20vw;                
        justify-content: center;
    }

#gallery_grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, .33fr));
        grid-gap: 20px;
        justify-content: center;
    }
#pagionation
    {
        flex-basis: 90%;
        text-align: center;
    }

#sluzby
    {
        /*padding: 50px 5%;        
        background: rgba(255,255,255,.75);*/
        font-size: 1.1em;
        text-align: left !important;
        font-family: 'Open Sans';
    }
#sluzby li, #sluzby ul
    {
        font-family: 'Open Sans';
    }
#sluzby > ul > li
    {
        list-style-type: none;
        font-weight: bold;     
        line-height: 2em;   
    }
#sluzby > ul *
    {
        font-weight: 400;
        line-height: initial;
        margin-left: 15px;
    }
#add_news, #report, #report_result, #administrace, #aktuality, #sluzby, #gallery, #team, #colors, #stuff, #login, #staff_sent, #change_texts, #texts_sent, #add_new_employee, #change_staff_img, #staff_img_upload
    {
        width: 100%;
        padding: 50px 5%;  
        background: rgba(255,255,255,0.7);                
    }
#err404
    {
        padding: 20px;
    }
#upload_btn
    {
        cursor: pointer;
        margin: 1em auto;
        outline: 0px;
        border: 0px;
        padding: 10px 25px;
        font-weight: bold;
        color: white;
        background-color: rgb(2,97,160);       
        box-shadow: 0px 0px 0px 0px #777;
        transition: .2s;
        font-family: 'Arial';
        border-radius: 10px;
        font-family: 'Open Sans';
        font-size: 1.2em;
    }






/* classes */
.menu_item
    {
        display: block;
        text-align: center; 
        padding: 10px 5px;
        cursor: pointer;
        transition: 0.1s linear;
        font-family: 'Open Sans' !important;
        margin: 0px 0px;        
        border-bottom: 4px solid rgba(255,255,255,0);        
    }
.menu_item:hover
    {
        border-bottom: 4px solid #eee;
        text-shadow: 2px 1px 3px #000;
    }
.normal_font
    {
        font-size: 1em;
    }
.bold
    {
        font-weight: bold;
    }
.font_120_bold
    {
        font-size: 1.2em;
        font-weight: bold;
    }
.font_110_bold
    {
        font-size: 1.1em;
        font-weight: bold;
    }
.font_120
    {
        font-size: 1.2em;
    }
.font_110
    {
        font-size: 1.1em;
    }
.font_85
    {
        font-size: 0.85em;
    }
.text_line
    {
        display: inline-block;
    }
/* content specific classes */
/* content specific classes */
/* content specific classes */

.person_div 
    {
        flex-grow: 0;
        flex-basis: 60%;            
        box-shadow: 0px 1px 4px #000; 
        align-self: stretch;        
        align-content: space-around;        
        opacity: 0.9;
        transition: .3s;
    }
    .person_div:hover
    {
        box-shadow: 0px 1px 7px #000;    
    }
    .person_texts
    {
        width: 100%;
        text-align: center;      
        padding: 0 0 20px 0 ;   
        font-family: 'Open Sans';              
    }
    
.person_div_img
    {
        /*padding: 20px 10px;*/
        /*border-radius: 50%;*/
        width: 100%;            
        object-fit: cover;    
        background: linear-gradient(to left, rgba(210,200,180,.7), rgba(240,235,225,1));
    }
    
    .person_div_name
    {
        /*font-weight: bold;*/        
        font-size: 1.2em;
        padding: 20px 0 20px 0!important;   
        font-family: 'Open Sans';
    }

.person_div_contact
    {
        font-style: italic;
        color: gray;
    }

.gallery_img
    {/*
        height: 200px;
        flex-grow: 0;
        flex-basis: 15%;
        object-fit: cover;        
        border-radius: 20px;
        transition: .1s;*/                
       /* background-color: #ddd;
        margin: 0 3vw;*/
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
    }
.footer_block
    {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px 50px;            
    }

.news
    {            
        display: flex;
        flex-basis: 75%;    
        border: 1px solid #AAA;
        height: fit-content;        
        margin: 10px;
        /*cursor: pointer;*/
        /*padding: 2px;*/
        box-shadow: 0px 0px 5px 1px #000;      
        background: rgba(255,255,255, .75);       
    }
.news_img
    {        
        width: 150px;
        height: 100%;
        object-fit: cover;
        box-shadow: 0px 0px 3px 1px #333;
        cursor: pointer;
}
.news_text
    {        
        width: calc(100% - 150px);
        float: right;  
        display: flex;
        flex-direction: column;   
        height: 100%;                       
    }
.news_headline
    {
        display: block;
        font-weight: bold;
        font-size: 1.4em;
        padding: 10px 10px 5px 10px;
        font-family: 'Open Sans';
    }
.news_paragraph
    {
        /*height: 100%;*/
        width: 100%;
        display: inline-block;                
        padding: 5px 10px;        
    }
.news_date
    {
        color: #888;
        font-style: italic;
        font-size: .8em;
        padding: 5px 10px;   
        margin-top: auto;             
    }
.button_read_all, .delete_btn
    {
        float: right;
        margin: 10px;
        background-color: rgb(0, 111, 183);
        padding: 10px;
        box-shadow: 0px 0px 3px 1px #333;
        color: white;
        font-family: 'Open Sans';
        transition: 0.15s;
        cursor: pointer;
        width: 200px;
        align-self: flex-end;
        text-align: center;
    }
.button_read_all:hover, .delete_btn:hover, .pagination_btn:hover
    {
        background-color: rgb(24, 132, 204);
        box-shadow: 0px 0px 4px 1px #000;
        transition: .15s;
    }
.delete_btn
    {
        background-color: rgb(183, 0, 0) !important;
    }
.delete_btn:hover
    {
        background-color: rgb(220,0,0) !important;
    }

.pagination_btn, .pagination_btn_current
    {
        width: 2em;
        height: 2em;
        background: rgb(0,111,183);
        color: rgb(255,255,255);;
        text-align: center;
        padding-top: .25em;
        font-weight: bold;
        font-family:'Open Sans';
        position: relative;
        display: inline-block;
        margin: 10px 10px;
        cursor: pointer;
        box-shadow: none;
        border-radius: 5px;
    }
.pagination_btn_current
    {
        cursor:default;
    }
.headline
    {
        /*display: block;*/
        flex-basis: 100%;        
    }
.half_box
    {
        flex-basis: 45%;
        display: inline-block;
        overflow: hidden;
    }
.input_field, .news_textarea
    {        
        outline: 0px;       
        border: 0px;
        border: 1.5px solid #999;
        margin: 20px 10px;
        cursor: text;
        font-weight: bold;        
        transition: .35s;
        width: 30vw;
        background-color: white;
    }
.input_field:hover, .input_field:target
    {        
        transition: .35s;
    }
.input_field
    {
        font-size: 1.3em;
        text-align: center;
        padding: 20px;
    }
.news_textarea
    {
        font-size: 1.1em;
        font-weight: normal;
        transition: 0s !important;
        /*min-width: 450px;*/
        min-height: 250px;               
        padding: 5px;
    }
.break
    {
        flex-basis: 100%;
        height: 0px;
    }
.admin_link
    {
        font-size: 1.2em;
        color: red;
        text-decoration: none;
        transition: .15s;
        line-height: 160%;        
    }
.admin_link:hover
    {
        text-decoration: underline;
        text-shadow: 0px 0px 1px red;
    }
.questionmark
    {
        cursor: help;
    }
.change_texts_line
    {
        display: flex;
        justify-content: left;
        margin: 10px;
        /*box-shadow: 0px 0px 3px 1px #444;*/
        padding: 10px;                        
    }
.change_texts_title
    {
        width: 250px;
        display: inline-flex;
        justify-content: left;
        align-items: center;
        font-weight: bold;
        font-size: 1.1em;      
        margin-right: 3em;  
    }
.zoom
    {
        transform: scale(1);
        transition: .5s;    
        background-color: white;
        font-family: 'Open Sans';
    }
.drop_shadow:hover
    {
        transition: .3s;
        box-shadow: 0px 0px 3px 1px #444;
    }
.phone_ico_left::before
    {
        display: inline-block;
        content: url('img/phone.svg');
        position: relative;
        top: 1.5em;
        left: -2em;
        width: 1em;
        height: 1em;
    }
.address_ico_left::before
    {
        display: inline-block;
        content: url('img/address.svg');
        position: relative;
        top: 2.5em;
        left: -2.25em;
        width: 1em;
        height: 1em;
    }
.email_ico_left::before
    {
        display: inline-block;
        content: url('img/email.svg');
        position: relative;
        top: 1.5em;
        left: -2em;
        width: 1em;
        height: 1em;
    }
/* PC verze */

@media only screen and (min-width: 900px)
    {
        /*elements*/





        /*IDs*/

            #menu_list
                {
                    display: inline-block;
                    flex-basis: 100vw;
                    list-style-type: none;
                    align-items: center;
                    margin: 0px;
                    padding: 0px;
                    align-self: flex-end;
                }
            #menu_top_bar
                {
                    display: none;
                }
            #menu_btn
                {
                    display: none;
                }
            
            #content
                {
                    padding-top: 2vh;                    
                }
            #menu
                {
                    /*background: rgba(0,111,183,0.6); */
                    background: rgba(0,111,183,0);
                }


        /*content specific IDs */
            #mapa
                {
                    height: 15vw;
                    width: 100%;  
                }
           /* #down_arrow
                {
                    display: block;
                    position: absolute; 
                    bottom: 5%; 
                    border-radius: 20px; 
                    padding: 30px 40px;
                    background: rgba(0,0,0,.5);
                    transition: 0.3s;
                    cursor: pointer;
                }
            #down_arrow:hover   
                {
                    background: rgba(0,0,0,1);

                }*/

            #team
                {
                    gap: .5vw;
                    padding: 50px 5vw;                    
                }


        /*classes*/




        /*content specific classes */
            .person_div 
                {                                        
                    flex-grow: 0;
                    flex-basis: 15%;                                                    
                    box-shadow: 0px 1px 4px #000;                     
                    background-color: white;
                    margin: 3.5vw;
                }


            .menu_item
                {
                    display: inline-block;
                    font-weight: bold;
                    font-size: 1.5em;
                    text-align: center; 
                    padding: 20px 15px;
                    cursor: pointer;
                    transition: 0.3s;
                }
            .menu_item:hover
                {
                    font-weight: bold;                    
                }
            
            .footer_block
                {
                    flex-basis: 30%;
                    flex-grow: 1;
                    padding: 20px 0;
                    gap: 10px;
                }


    }
@keyframes shrink
    {
        0% {min-height: 80vh; max-height: 80vh;}
        100% {min-height: 10vh; max-height: 10vh;}
    }