@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yatra+One&display=swap');
header {
    width: 100vw;
    height: 100vh;
    margin: 0%;
    color:rgb(255, 255, 255);
    margin-bottom: 10vh;
    background-color:rgb(12 12 12);
    display:flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background-image: url("obrazky/mobilPozadi.jpg");
    background-position: center top;
    background-size: cover;
}

#sipecka {
    width:10%;
}

div.mujDiv {
    padding-bottom: 25%;
}

h1 {
    font-size: 25pt;
    font-optical-sizing: auto;
    font-style: normal;
    font-family: "Yatra One", system-ui;
    font-weight: 450;
    line-height: 1.2;
}


section {
    padding-right: 10%;
    padding-left: 10%;
    text-align: center;
    padding-bottom: 30vh;
    padding-top: 5%;
    margin: 5%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 15vh;
}

body {
    align-items:center;
    font-size: 15pt;
    text-align: center;
    background-color: rgb(24 45 40);
    font-size: 12pt;
    color:rgb(202, 210, 205);
    margin: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "slnt" 0;

}

footer {
    height: 20vh;
    align-content: center;
    background-color:rgb(12, 12, 12);
    margin-top: 15%;
}

a {
    text-decoration: none;
    color:#000000;
}

#oprojektu {
    color:#b1cf6e;
}
#oprojektu a:hover {
    color: white;
}

#logo {
    width: 200px;
}

#ikona {
    height: 200px;
    width: 200px;
}

#mimik {
    height:30vh;
}

#navLogo {
    height:7vh;
    margin-top: 3vh;
}

#navLogo:hover {
    filter:brightness(200%);
}

#stazeni {
    display: none;
    border-radius: 5px;
}

#stazeni:hover {
    background-color: rgb(255, 255, 255);
}

nav {
    height: 12vh;
    background-color: rgb(12, 12, 12);
    width: 100%;
    height: 13vh;
    top:0;
    position: sticky;
}

article {
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 10%;
    padding-top: 10%;
    text-align:left;
    display: flex;
    flex-direction: column;
}

#karta {
    padding: 4%;
    width:30%;
}

#screen {
    padding-bottom: 10%;
    width:100%;
}

figure {
    width: 100%;
    margin:auto;
}

#articleCast2 {
    display:none;
}

.cardGallery {
    display:none;
}

@media only screen and (min-width: 768px) {
    /* For desktop */ 

#oprojektu {
padding-top: 30%;
}

#sipecka {
    display: none;
}
#stazeni {
    display:block;
    margin-right: 9.5vw;
    margin-left: 10vw;
    background-color: #b1cf6e;
    height: 40px;
    width: 180px;
    font-size: 15pt;
    font-weight: 550;
    border: none;
    /*margin-bottom: 25px;;*/
}
header {
    width:100%;
    height: 90vh;
    margin-bottom: 0%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-image: url("obrazky/pozadi_ikrojeni.jpg");
    background-size:contain;
    background-repeat: repeat-x;
    flex-direction: row-reverse;
    background-color: rgb(24 45 40);
    background-position: top left;
}

#logo {
    width: 400px;
}

#mimik {
    content: url("obrazky/navrhDesk.png");
    width: 50vw;
    height:auto;
    position: relative;
}

section {
    width: 330px;
    height: 550px;
    min-height:500px;
    min-width: 250px;
    padding: 0;
    text-align: center;
    margin: auto;
    margin-left: 2%;
    margin-right: 2%;
    background-color: rgb(34, 57, 41);
    border-color: rgb(12, 12, 12);
    border-style:solid;
    border-radius: 10px;
    border-width: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
} 

p {
    max-width: 70%;
    margin-top:0%;
    margin-bottom: 50px;
}

#podtitul {
    font-size: 25px;
}

main {
    display: flex;
    justify-content: center;
    margin-bottom: 10vh;
    margin-top: 20vh;
    padding-left: 8%;
    padding-right: 8%;
}

footer {
    margin-top: 20vh;
}

div.mujDiv{
    margin-left: 10%;
    margin-top: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    position:static;
    /*background-image: url("obrazky/01_pozadi_utok_v2.jpg");
    background-size: cover; */
    /*align-items: flex-end;*/
}

#navLogo {
height:65px;
margin-left: 9vw;
margin-bottom: 6px;
margin-top: 10px;
}

#chcesVice {
    margin: auto;
}

#screen {
    width: 45%;
    padding-top: 0%;
    padding-left: 10%;
    padding-bottom: 0%;
}


figure {
    display:flex;
    align-items: center;
    flex-direction: row;
    margin-top: 5%;
}

#ukazka {
    width: 35%;
    margin-left: 10%;
    margin-right: 10%;
    display: none;
}

#articleCast {
    display:none;
}

#articleCast2 {
    display:block;
}

#karta {
    display: none;
}

article {
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 5%;
    width: 40%;
}

#downloadA {
    color: black;
    text-decoration: none;
}

#p1 {
    max-width: 100%;
}

/* FLIP GALERIE */


/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 260px;
	height: 450px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 213.5px; /* half of height */
	}

	.vertical.flip-container:hover .flipper {
		transform: rotateX(-180deg);
	}

    .karticka {
        width: 80%;
    }

    .cardGallery {
        margin-top: 10vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

    }

}