@charset "utf-8";
/* Global Styles */

body {
	margin-left: auto;
	margin-right: auto;
	max-width: 1920px;
	padding-left: 2.275%;
	padding-right: 2.275%;
	width: 94%;
	background: #ecececff;
}
/* Header */
header {
	height: inherit;
	min-height: 600px;
	background-image: url("../img/banner-1.png");
	background-position: top;
 	background-repeat: no-repeat;
	background-size:cover;
	}
header .napis {
	text-align: right;
	display: block;
	float: left;
	clear: both;
	padding-left: 4%;
}
.slo {
	width: 5%;
	float: right;
	transition-duration: 0.4s;
}
nav {
  width: auto;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  -webkit-clip-path: circle(24px at 30px 24px);
  clip-path: circle(24px at 32px 24px);
  -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
  transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
    float: left;
    transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position:absolute;
}

nav:hover {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.75s;
  transition-duration: 0.75s;
  -webkit-clip-path: circle(390px at 225px 24px);
  clip-path: circle(390px at 150px 24px);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

c {
  display: block;
  line-height: auto;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

c:hover { background: #C9BFBF; }

c:active { background: #C9BFBF; }

.navicon {
  padding: 23px 20px;
  cursor: pointer;
  -webkit-transform-origin: 32px 24px;
  -ms-transform-origin: 32px 24px;
  transform-origin: 32px 24px;
    transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.navicon div {
  position: relative;
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
}

.navicon div:before,
.navicon div:after {
  display: block;
  content: "";
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
  position: absolute;
}

.navicon div:before { top: -7px; }

.navicon div:after { top: 7px; }

h1 {
	font-family: Tahoma; 
	color: rgba(46, 38,26,0.90);
	font-size: 60px;
	font-weight: bolder;
	text-align: end;
	padding-top: 20%;
}
h2 {
	font-family: Tahoma; 
	color: rgba(46, 38,26,0.90);
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
	text-align: left;
}
h3 {
	margin: 10% 0;
	font-family: Tahoma;
	color: rgba(46, 38,26,1.00);
	font-size: 20px;
	font-weight: 300;
	line-height: 24px;
}
h4 {
	margin: 10% 0;
	font-family: Tahoma;
	color: rgba(128,128,128,0.98);
	font-size: 20px;
	font-weight: 300;
	line-height: 24px;
}
h5 {
	margin: 10% 0;
	font-family: Tahoma;
	color: rgba(128,128,128,0.98);
	font-size: 15px;
	font-weight: 300;
	line-height: 24px;
    width: 30px;
}
p {
	font-family: Tahoma;
	color: rgba(46, 38,26,1.00);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.8;
	overflow-y: auto;
	text-align: left;
}

/* Body */

main{
	text-align: center;
	display: block;
	margin-top: -5%;
	clear: both;
	float: left;
}
.main{
	display: block;
	clear: both;
	float: left;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
}
.shema{
	display: block;
	clear: both;
	float: left;
	width: 100%;
	margin: 3% 0;
}
.column{
	float: left;
	width: 23%;
	height: 200px;
	margin: 1%;
	clear: right;
}
.row.after{
	content: "";
	display: table;
	clear: both;
}
.divide{
	width: 100%;
	margin: 0 auto;
}
.button {
  background-color: #ffffff; /* bela */
  border: 1px;
  color: black;
  padding: 3%;
  width: 50%;
  height: 40%;
  display: inline-block;
  border-radius: 20% 0;
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  align-items: stretch;
  align-content: stretch;
}
.button1 {
  background-color: #ffffff; /* bela */
  border: 1px;
  color: black;
  padding: 1%;
  text-align: center;
  border-radius: 20% 0;
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  display: inline-block;
}
.button2 {
  background-color: #ffffff; /* bela */
  width: 40%;
  border: 1px;
    text-align: center;
  color: black;
  padding: 2%;
  border-radius: 20% 0;
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  display: block;
  margin: 0px auto;
}
.button:hover {
  background-color: #d9d7d7; /* temneje kot barva ozadja */
}
.snowflake{
	width: 80%;
	display: block;
	clear: both;	
	float: left;
	margin-left: auto;
	margin-right: auto;
}
ul{
	font-family: Tahoma;
	color: rgba(46, 38,26,1.00);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.8;
	overflow-y: auto;
	text-align: left;
	list-style-position: outside;
	list-style: circle;
}
div.gallery {
  margin: 10px;
  float: left;
  width: 14%;
}
div.gallery:hover {
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
div.gallery img {
  width: 100%;
  height: auto;

}
div.gallery1 {
  margin: 10px;
  float: right;
  width: 18%;
}
div.gallery1:hover {
   transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
div.gallery1 img {
  width: 100%;
  height: auto;
}
div.gallery2 {
  margin: 2% 2% 2% 0;
  float: left;
  width: 18%;
}
div.gallery1:hover {
   transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
div.gallery1 img {
  width: 100%;
  height: auto;
}
.about_me{
	padding: 3%;
	width: 80%;
	display: block;
	clear: both;	
	float: left;
	margin-left: auto;
	margin-right: auto;
}
.gallery_4{
	float: left;
    width: 25%;
}

/* Footer */
footer {
	height: inherit;
	min-height: 600px;
	background-image: url("../img/banner-2.png");
	background-position: top;
 	background-repeat: no-repeat;
	background-size:cover;
	}
footer .napis {
	text-align: right;
	display: block;
	float: right;
	clear: both;
	padding-left: 10%;
	padding-top: 6%;
}


/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
.slo {
	width: 15%;
	float: right;
}
	header {
	width: 100%;
}
h1 {
	font-size: 40px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	padding-top: 190%;
	padding-left: 10%;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
	text-align: center;
}
p {
	font-size: 18px;
}
li {
	font-size: 18px;
}
.column{
	clear: both;
	width: 100%;
}	
div.gallery {
  float: left;
  width: 80%;
}
div.gallery1 {
  margin: 0;
	float: left;
  width: 80%;
}
.about_me{
	width: 100%;
}
div.gallery2 {
	float: left;
  width: 40%;
	clear: both;
}
    .gallery_4{
	float: left;
    width: 25%;
        clear: both;
}
footer {
	background-image: none;
	min-height: inherit;
	}
	
}

/* Media Query for Tablets */
@media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
.slo {
	width: 8%;
	float: right;
}
header {
	width: 100%;
}
h1 {
	font-size: 40px;
	font-weight: bold;
	line-height: 50px;
	text-align: left;
	padding-top: 150%;
}
h2 {
	font-size: 18px;
	text-align: center;
}
h3 {
	font-size: 18px;
	text-align: center;
}
h4 {
	font-size: 16px;
	text-align: center;
}
p {
	font-size: 18px;
	text-align: center;
}
li {
	font-size: 18px;
}
.column{
	width: 100%;
	height: inherit;
	margin: 0;
}
.column1{
	width: 100%;
	height: inherit;
	margin: 0;
}
.button {
  width: 20%;
  height: 20%;
  align-items: center;
  align-content: center;
}
div.gallery {
  float: left;
  width: 80%;
}
div.gallery1 {
  margin: 0;
	float: left;
  width: 80%;
}
.about_me{
	width: 100%;
}
div.gallery2 {
	float: left;
  width: 40%;
	clear: both;
}
    .gallery_4{
	float: left;
    width: 25%;
        clear: both;
}
footer {
	background-image: none;
	min-height: inherit;
	}
		
	
}

	
	
	
	
	
	
	
	
	
	
	
	
	
	
/* Desktops and laptops  */
@media only screen and (min-width:1025px) {
/* Header */

	header {
	width: 100%;
}

.about_me{
	width: 100%;
}

	
	
	}