@font-face {
  font-family: Quicksand;
  src: url(Quicksand-VariableFont_wght.ttf);
}
@font-face {
  font-family: SourceSerifPro;
  src: url(SourceSerifPro-Regular.ttf);
}
*{
	box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body{
	font-size: .85vw;
	font-family: SourceSerifPro;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
a{
	text-decoration: none;
	color:#000;
	transition-duration: .3s;
}
a:hover{
	color:#027f41;
}

.swiper-container {
    width: 100vw;
    height: 100vh;
    position: fixed!important;
    top: 0;
    left: 0;

}
nav{
	position: absolute;
	top: 2vw;
	left: 0;
	width: 100%;
	padding-left: 10%;
	padding-right:10%;
	height: 4.5vw;
	background-color: rgba(255,255,255,.7);
	color:#000;
	z-index: 999;
	display: flex;
}
.sticky{
	position: fixed;
	top: 0;
}
nav img{
	max-height: 100%;
}
nav ul{
	list-style: none;
	display: flex;
	padding-left: 0;
}
nav ul li{
	margin-right: 1em;
	display: flex;
	flex-direction: column;
	padding-top: .85em;
    font-size: 1.1em;
    min-width: 5em;
    text-align: center;

}
nav ul li a{
	width: 100%;
	text-align: center;
}
nav ul li a::after{
	display: block;
	content: '';
	margin:auto;
	width: 0%;
	height: .2em;
	background-color: #027f41;
	transition-duration: .2s;
}
nav ul li a:hover::after{
	width: 100%;
}
.list-nav{
	width: 15em;
	cursor: pointer;
}
nav ul li ul{
	list-style: none;
	display: flex;
	flex-direction: column;
}
nav ul li ul li{
	background-color: rgba(2, 127, 65, .8);
	max-width: 15em;
	padding: .5em;
	display: none;
	height: 3.5em;
}
nav ul li ul li a{
	color: #FFF
}
nav ul li ul li a:hover{
	color: #FFF
}
nav ul li ul li a:hover::after{
	background-color: #FFF;
	height: .1em;
}
.scroll-box{
	height: 200vh;
}
main{
	position: absolute;
    top: 100vh;
    /* left: 0; */
    width: 100%;
    background-color: #FFF;
    z-index: 2;
}
.bg-lazy-load{
	background-color: #FFF;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999999;
}
.bg-lazy-load .box{
	width: 100vw;
	margin-top: 35vh;
}
.bg-lazy-load .box img{
	display: block;
	margin: auto;
}
.bg-lazy-load h1{
    font-size: 1.2em;
    font-weight: 300;
    width: 100%;
    background-color: #FFF;
    text-align: center;
}
.bg-lazy-load h1 span{
	color: #027f41;
}
.loading{
	width: 17em;
	height: .35em;
	margin: auto;
    background: linear-gradient(270deg, #00a754, #000000);
    background-size: 400% 400%;

    -webkit-animation: AnimationName .6s ease infinite;
    -moz-animation: AnimationName .6s ease infinite;
    animation: AnimationName .6s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}




.slider-text-bottomleft, .slider-text-center, .slider-text-bottomright{
	position: relative;
	width:25%;
	min-height: 20%;
	text-align: center;
	font-size: 1.2em;
	background-color: rgba(0,0,0,.4);
	color: #027f41;
	padding: 1em;
}
.slider-text-bottomleft{
	top: 60%;
	left: 10%;
}
.slider-text-center{
	top: 35%;
	left: 37.5%;
}
.slider-text-bottomright{
	top: 60%;
	left: 70%;
}
.swiper-container h2{
	color: #FFF;
	font-weight:500;
}



section{
	min-height: 100vh;
	padding: 1em;
	padding-left: 0;
	padding-right: 0;
}
#first{
	background: rgb(2,127,65);
	background: linear-gradient(48deg, rgba(2,127,65,1) 0%, rgba(0,221,111,1) 100%);
	color: #FFF;
	min-height:100vh;
}
section h2{
	font-weight: 500;
	text-align: center;
	font-size: 2em;
}
section h3{
	font-weight: 500;
	text-align: center;
	font-size: 1.4em;
}
.big-center{
	width: 85%;
	margin:auto;
	margin-top: 2em;
}
.flex-row{
	display: flex;
	flex-direction: row;
}
.service-list{
	width: 50%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.service-list .service{
	display: flex;
	flex-direction: column;
	border: solid #FFF .15em;
	padding: .5em;
	width: 18vw;
	height: 12vw;
	margin: 1%;
	transition-duration: .4s;
	cursor:pointer;
}
.service-list .service i{
	font-size: 3.5em;
	text-align: center;
	margin-top: .5em;
}
.service-list .service h3{
	margin-top: .5em;
	margin-bottom: .5em;
}
.service-list .service:hover{
	background-color: #FFF;
	color: #00a754
}
#first .info{
	width: 50%;
	padding-left: 7%;
	padding-right: 7%;
	line-height: 1.5em;
}
#first .info p{
	font-size: 1.2em;
	line-height: 1.6em;
	text-shadow: 0px 0px 10px rgba(150, 150, 150, 1);
}
#first .info li{
	font-size:1.1em;
	line-height: 1.4em;
	text-shadow: 0px 0px 10px rgba(150, 150, 150, 1);
}
#first .info h3{
	font-size: 1.6em;
	text-shadow: 0px 0px 10px rgba(150, 150, 150, 1);
}
.data-service{
	display: none;
}
#o-nas{
	background-image: url("../images/o_nas_bg.webp");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	min-height: 100vh;
	color: #FFF
}
#o-nas .content-box{
	position: relative;
	top: 20vh;
	left: 10vw;
	width: 35vw;
	background-color: rgba(0,0,0,.2);
	padding: 2.5em;
}
#o-nas .content-box p{
	font-size: 1em;
	line-height: 1.6em;
}


.container > a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
   grid-column: span 2;
  grid-row: span 2;
}

.container > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 2px 16px var(--shadow);
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
  width: 70vw;
  margin: auto;
}

.horizontal {
  grid-column: span 2;
}

.vertical {
  grid-row: span 2;
}

.big {
  grid-column: span 2;
  grid-row: span 2;
}

#kontakt{
	background-image: url(/images/bg_kontakt.webp);
	background-repeat: no-repeat;
	background-size: 35vh;
	background-position: 95% 50%;
	background-attachment: fixed;
	padding-top: 20vh;
	padding-bottom: 0px;
}
#kontakt .content{
	width: 65%;
	margin:auto;

	padding-bottom: 20vh;
	display: flex;
	margin-bottom: 5em;

}
#kontakt .content .left-box, #kontakt .content .right-box{
	width: 50%;
}
#kontakt h3{
	color: #027f41;
	font-size: 1.6em;
	margin-bottom: 1.5em;
}
#kontakt .content p{
	font-size: 1.3em;
	line-height: 1.9em;
}
#kontakt span{
	color: #027f41;
}
#kontakt .content i{
	margin-right: 1em;
	color:#027f41;
	font-size: 1.2em;
}
#kontakt form{
	width: 80%;
	display: flex;
	flex-direction: column;
	margin: auto;
}
#kontakt form input, #kontakt form textarea{
	font-size: 1.1em;
	padding: .7em;
	background-color: rgba(0,0,0,.1);
	border: none;
	margin-bottom: 1em;
	color:#FFF;
	font-family: SourceSerifPro;
}
#kontakt form input[type="submit"]{
	background-color: #027f41;
	color:#FFF;
	cursor: pointer;
}
#kontakt form textarea{
	min-width: 99.99%;
	max-width: 100%;
	min-height: 10em;
}
#map {
  height: 65vh;
  /* The height is 400 pixels */
  width: 100%;
  margin-bottom: 5px;
  /* The width is the width of the web page */
}

footer{
	position: absolute;
	width: 100%;
	min-height: 10vh;
	background-color: #333;
	color: #FFF;
	z-index: 9;
	padding: 4vh;
	padding-left: 10%;
	padding-right: 10%;
}
footer a{
	color: #027f41;
}
footer .right{
	float: right;
}
.scroll-top{
	position: fixed;
	bottom: 1em;
	right: 1em;
	font-size: 1.5em;
	cursor: pointer;
	padding: .7em;
	background-color: rgba(2, 127, 65, .5);
	color: #FFF;
	z-index:999;
	width: 2.5em;
	height: 2.5em;
	text-align: center;
	display: none;
}
.popup{
	position: fixed;
	top: 0;
	left:0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,.65);
	z-index: 1000;
	display: none;
}
.popup .content-popup{
	position:fixed;
	top: 10vh;
	left: 25vw;
	width: 50vw;
	background-color: #FFF;
	padding: 1.5em;
	height: 80vh;
	overflow-x: scroll;
}
.open-nav-mobile{
	display: none;
}

@media screen and (max-width: 991px) {
/* start of large tablet styles */
  body{
    font-size: 2.6vw;
  }
  nav{
  	position: fixed;
  	top: 0;
  	left: -45vw;
  	width: 45vw;
  	height: 120vh;
  	padding-left: .5em;
  	padding-right: .5em;
  	padding-top: 1.5em;
  	flex-direction: column;
  	transition-duration: .3s;
  }
  nav img{
  	max-width: 100%;
  }
  nav ul{
  	flex-direction: column;
  }
  nav ul li{
  	max-width: 100%;
  	margin-bottom: .7em;
  }
  nav ul li li{
  	margin-bottom: 0;
  }
  .open-nav-mobile{
  	position: fixed;
  	top: 1em;
  	right: 1em;
  	background-color: rgba(255,255,255,.7);
  	font-size: 1.5em;
  	display: block;
  	z-index: 99999;
  	width: 1.5em;
    height: 1.5em;
    text-align: center;
    padding-top: .25em;
  }
  .open-nav{
  	left: 0;
  }
  .slider-text-bottomleft, .slider-text-center, .slider-text-bottomright{
  	width: 40%;
  }
  .slider-text-bottomright{
  	left: 55%;
  }
  .slider-text-center{
  	left: 30%;
  }
  .swiper-slide{
  	background-position: center;
  }
  .flex-row{
  	flex-direction: column;
  }
  .service-list, #first .info, #kontakt .content .left-box, #kontakt .content .right-box{
  	width: 100%;
  }
  .service-list .service{
  	width: 47%;
  	height: 12em;
  }
  #o-nas .content-box{
  	top: 5em;
    left: 2em;
    width: 60vw;
  }
  #kontakt .content{
  	width: 90%;
  	flex-direction: column;
  }

}

@media screen and (max-width: 760px) {
/* start of phone styles */
  body{
    font-size: 4vw;
  }
  nav{
  	width: 60vw;
  	left: -60vw;
  	font-size: .9em;
  }
  nav ul li ul li{
  	height: auto;
  }
  .service-list .service, #kontakt form{
  	width: 100%;
  }
  .slider-text-bottomleft, .slider-text-center, .slider-text-bottomright{
  	top: 45vw;
  	left: 5%;
  	width: 90vw;
  }
  #o-nas .content-box{
  	top: 1.5em;
  	width: 75vw;
  }


}
@media screen and (min-width: 480px) and (max-width: 760px) and (orientation: landscape) {
  .mobile-orietation-block{
    display: block;
    background-color: #FFF;
    width: 100%;
    height: 100%;
    font-size: 3vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .mobile-orietation-block p{
    margin-top: 30vh;
    text-align: center;
  }
}