/* Globalni styly */

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

strong, h1 {
    font-weight: bold;
}

em {
    font-style: italic;
}

body {
    background-image: url('vzhled/pozadi.png');
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    letter-spacing: -0.3px
}

.obsah {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
}

header {
    height: 3vw;
    padding: 0.5vw;    
}

nav,
header .vlajky {
    float: left;
    width: 30%;
}

main,
header .slogan {
    float: right;
    width: 70%;
}

footer {
    clear: both;
}

/* hlavicka */
.vlajky a {
    display: block;
    float: left;
    width: 4vw;
    height: 1.5vw;
    background-repeat: no-repeat;
    background-size: contain;
    padding-right: 0.7vw;      
}

.vlajky a.cz {
    background-image: url('vzhled/vlajkaCZ.png');
} 

.vlajky a.au {
    background-image: url('vzhled/vlajkaAU.png');
}

.vlajky a.ru {
    background-image: url('vzhled/vlajkaRU.png');
}

.slogan {
    height: 3vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center; 
}

/* panel vlevo = navigace, kontakt, logo */
.kontaktBox {
    background: #5f6290;
    padding: 10px 15px 10px 15px;
    text-align: center;
    color: #ffffff;
    font-family: 'Bookman Old Style', monospace;    
}

.logo {
    background-image: url('vzhled/logo20200709.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #b5b5b5;
    background-position: center center;
    width: 100%;
    height: 11vw;
    display: block;
    text-decoration: none;
}

.kontaktBox p {
    margin-bottom: 10px;
}

.kontaktBox strong {
    font-size: 30px; 
    font-style: italic;
}

menu {
    background: #909090;
    padding: 30px 0px 30px 0px;
}

menu li {
    display: block;
    padding: 8px;
    margin: 0px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

menu li a {
    color: #ffffff;
    text-decoration: none;
}

menu li a:hover {
    text-decoration: underline;
}

.podpis .podpisObsah,
.podpis2 .podpisObsah {
    width: 50%;
    color: #000000;
    margin: 1vw auto 0px auto;
    font-size: 12px;
}

.podpis2 {
    display: none;
}

/* panel obsah - text */
.textBox {
    color: #36217b;
    padding: 2%;
}

.textBox h1 {
    font-size: 25px;
}

/* panel obsah - animace na uvodni strance */
#animaceBox {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
}
#animaceBox img {
    opacity: 1;
    width: 100%;
}

.puntikObal {
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 225px;
    height: 25px;
    padding-bottom: 2vw;
}

.puntikObal .puntikObsah {
    position: relative;
    top: 0px; 
    left: -112px;
}

.puntikObal .puntik {
    width: 25px;
    height: 25px;
    margin-left: 25px;
    background: url('vzhled/animacePuntik.png') no-repeat;
    background-size: contain;
    float: left;
    cursor: pointer;
}

.puntikObal .puntik:first-child {
    margin-left: 0px;
}

.puntikObal .puntik.zobrazeny {
    background:  url('vzhled/animacePuntikZobrazeny.png') no-repeat; 
    background-size: contain;
}

.sipkaVlevo, .sipkaVpravo {
    width: 50px;
    height: 80px;
    background: #d1d1d2;
    position: absolute;
    top: 50%;
    cursor: pointer;
}

.sipkaVlevo {
    left: 1vw;
    background:  url('vzhled/animaceSipkaVlevo.png') no-repeat;
    background-size: contain;
} 

.sipkaVpravo {
    right: 1vw;
    background:  url('vzhled/animaceSipkaVpravo.png') no-repeat;
    background-size: contain;
}

/* fotky v galerii */
.galerie img.velkyObr {
    display: block;
    padding: 0px;
}

.galerie img:not(.velkyObr) {
    display: block;
    float: left;
    padding: 0px;
}

.galerie:after {
    content: '';
    display: block;
    clear: both;
}


/* 1. WIDTH > 2000px ... maximalni sirka */

@media
only screen and (min-width: 2000px),
only screen and (min-device-width:2000px) { 
    .obsah {
        width: 2000px;
        margin: 0px auto 0px auto;
    }
}  


/* 2. WIDTH < 1620px ... uprava nadpisu v navigaci  */

@media
only screen and (max-width: 1600px),
only screen and (max-device-width:1600px) { 
    .galerie img.velkyObr {
        width: 100%;
    }     
    .galerie img:not(.velkyObr) {
        width: 50%;
    }
}  


/* 3. WIDTH < 1420px ... uprava nadpisu v navigaci  */

@media
only screen and (max-width: 1400px),
only screen and (max-device-width:1400px) {     
    .kontaktBox strong {
        font-size: 25px;
    }
}


/* 4. WIDTH < 1220px ... uprava pospisu  */

@media
only screen and (max-width: 1200px),
only screen and (max-device-width:1200px) { 
    .podpis .podpisObsah {
        width: 80%;
    }
    
    .sipkaVlevo, .sipkaVpravo {
        width: 38px;
        height: 60px;
    }  
    
    .kontaktBox strong {
        font-size: 22px;
    }
}


/* 5. WIDTH < 1050px ... uprava nadpisu v navigaci  */

@media
only screen and (max-width: 1030px),
only screen and (max-device-width:1030px) {     
    .kontaktBox strong {
        font-size: 18px;
    }
}


/* 6. WIDTH < 900px ... tablet vzhled */

@media
only screen and (max-width:880px),
only screen and (max-device-width:880px) {

.obsah {
    min-width: 300px;
} 

header {
    height: 50px;
}

header .vlajky,
header .slogan {
    height: 25px;
}

header .vlajky a {
    width: 43px;
    height: 25px;
}

nav,
header .vlajky,
main,
header .slogan {
    float: none;
    display: block;
    width: 100%;
}

.podpis {
    display: none;
}

.podpis2 {
    display: block;
}     

.kontaktBox strong {
    font-size: 30px;
}

} 


/* 7. WIDTH < 500px ... uprava pospisu  */

@media
only screen and (max-width: 520px),
only screen and (max-device-width:520px) { 
    .podpis2 .podpisObsah {
        width: 80%;
    } 

.puntikObal {
    position: absolute;
    bottom: 0px;
    left: 5%;
    width: 95%;
    height: 25px;
    padding-bottom: 2vw;
}

.puntikObal .puntikObsah {
    position: relative;
    top: 0px; 
    left: 0px;
}      

.kontaktBox strong {
    font-size: 25px;
}

.galerie img:not(.velkyObr) { 
    float: none;
    display: block;
    width: 100%;
}

} 

/* 8. WIDTH < 400px ... uprava nadpisu v navigaci  */

@media
only screen and (max-width: 420px),
only screen and (max-device-width:420px) {     
    .kontaktBox strong {
        font-size: 20px;
    }
}