html {
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol {
	padding: 0;
	margin: 0;
    font-family: 'Georgia', sans-serif;
}

h1, h2, h3 {
    font-family: "Quicksand", sans-serif;
}

p, ul {
	line-height: 1.75em;
}

ul {
	margin-left: 2em;
}

#materialy, #workshop {
    display: none;
}

#intro {
	height: calc(100vh - 100px);
	padding: 50px 0%;
	background-color: rgba(0, 0, 0, 0);
}

	#intro-background-dim {
		position: absolute;
		width: 100%;
		height: 100vh;
		background-image: url("backgound02.jpg");
		background-position: 50% 40%;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -200;
		
	}

header {
    position: relative;
	margin: 0 auto;
	max-width: 1200px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
}

    #header-wrap {
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    header h1 {
        color: white;
        font-size: 1.42em;
        word-spacing: 0.3em;
    }

    #header-owner-wrap {
        position: relative;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        display: flex;
        bottom: 0;
        top: 0;
    }

    #header-owner-wrap h2 {
        color: rgba(255, 255, 255, 1);
        font-size: 1em;
    }

    #header-owner-wrap p {
        color: white;
        font-size: 0.8em;
    }

nav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	justify-content: space-around;
	color: #ffd966;
	font-weight: 600;
	background-color: rgba(0, 0, 0, 0.6);
}

nav a {
	color: #ffd966;
	font-weight: 600;
	text-decoration: none;
    font-size: 1.075em;
    font-family: "Quicksand", sans-serif;
}

#slogan {
	width: 85%;
	display: flex;
	flex-flow: row-reverse;
	margin-top: 10vh;
	font-weight: 400;
	font-style: normal;
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	padding: 10px;
}

#slogan p {
    font-family: "Merienda", cursive;
}

section {
	background-color: aliceblue;
	max-width: 1200px;
	margin: 40px auto;
	border-left: 1px solid deepskyblue;
	padding: 40px;
}

section h2 {
	font-family: "Quicksand", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2em;
	color: steelblue;
	padding: 0 0 25px 0;
}

section h3 {
	font-family: "Quicksand", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.5em;
	color: steelblue;
	padding-bottom: 10px;
    margin-top: 30px;
}

section h3:first-of-type {
    margin-top: 0;
}

section p {
    margin-bottom: 10px;
    text-align: justify;
}

section ul {
    margin-bottom: 10px;
}


/* ********************************************************************************/
/* O-MNE */
/* ********************************************************************************/

#o-mne p {
    text-indent: 3em;
}

#o-mne-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

    .image-blurred-edge {
        background-image: url('fotka_osobna.jpg');
        position: relative;
        float: left;
        background-size: contain	;
        background-repeat: no-repeat;
        width: auto;
        box-shadow: 0 0 8px 8px aliceblue inset;
    }

    .image-blurred-edge > img {
        visibility: hidden;
        height: 300px;
    }

    #o-mne-text {
        text-align: justify;
    }

    #o-mne-text p {
        margin-bottom: 10px;
    }

    #o-mne-text p:last-of-type {
        margin-bottom: 0px;
    }

/* ********************************************************************************/
/* PRIESTOR */
/* ********************************************************************************/

#priestor-content {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}

#priestor-content img {
    max-height: 300px;
    border-radius: 10px;
}

/* ********************************************************************************/
/* SLUZBY */
/* ********************************************************************************/

#sluzby p {
    text-indent: 3em;
}

#sluzby ul {
    margin-left: 6em;
}

.image-in-row-wrapper {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    width: 100%;
    margin: 3em 0;
}

.image-in-row {
    max-height: 300px;
    max-width: 100%;
    border-radius: 10px;
    height: auto;
}

/* ********************************************************************************/
/* KONTAKT */
/* ********************************************************************************/

#contact-content-wrapper {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    width: 100%;
}

#contact-content-wrapper p {
    display: block;
    min-width: 360px;
}

#contact-images {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    gap: 20px;
}

#contact-images img {
    max-height: 300px;
    max-width: 100%;
    border-radius: 10px;
    height: auto; 
}

/* ********************************************************************************/


.clearfix {
	clear: both;
}

#cennik table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 20px;
}
	
	#cennik table th, #cennik table td {
		padding: 20px;
		border-bottom: 1px solid black;
	}

	#cennik table tr:nth-child(even) {
		background-color: white;
	}

	#cennik table tr td:nth-child(2) {
		text-align: center;
	}

	#cennik p {
		text-align: justify;
	}


.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  transform-origin: bottom center;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom center;
}

 #myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: steelblue;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 1.1em;
}

#myBtn:hover {
  background-color: red;
}

#map {
    width: 100%;
}


@media only screen and (max-width: 1000px) {
    #priestor-content img {
        max-height: 150px;
    }

    .image-in-row {
        max-height: 150px;
    }
}

@media only screen and (max-width: 850px) {
   #o-mne-content {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    header {
        flex-direction: column;
        gap: 20px;
    }

        header h1 {
            text-align: center;
        }

    nav {
        flex-direction: column;
    }

    nav a {
        text-align: center;
        display: block;
        margin: 5px auto;
    }

    #contact-content-wrapper {
        flex-direction: column;
    }       
    
}

@media only screen and (max-width: 600px) {

    section p {
        text-align: left;
    }

    #priestor-content {
        flex-direction: column;
    }

    #priestor-content img {
        max-height: none;
    }

    .image-in-row-wrapper {
        flex-direction: column;
    }

    .image-in-row {
        max-height: none;
        max-width: 100%;
    }

    #sluzby ul {
        margin-left: 3em;
    }

    #intro {
        height: calc(100vh - 50px);
        padding: 25px 0%;
    }

    #slogan {
        position: absolute;
        bottom: 0;
        width: calc(100vw - 20px);
    }

    #contact-content-wrapper p {
        min-width: 0;
    }

    #contact-images {
        flex-direction: column;
    }

    #contact-images img {
        max-height: none;
        max-width: 100%;    
    }

    @media only screen and (max-height: 555px) {
        #slogan {
            display: none;
        }
    }

}