@font-face {
    font-family: "RobotoSlab Light";
    src: url("font/RobotoSlab-Light.ttf") format("truetype");
}

@font-face {
    font-family: "RobotoSlab Regular";
    src: url("font/RobotoSlab-Regular.ttf") format("truetype");
}

@color-green: #014131;
@color-green_hover: #026045;
@color-darkgreen: #013125;
@color-gray: #b2b2b2;

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
    font-family: "RobotoSlab Light";
    margin: 0;
    padding: 0;
	overflow-x: hidden;
	font-size: 1.2rem;
}

h1{display: none;}

.header{
	position: relative;
	img.bg{width: 100%;}
	img.logo{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27.5vw;}
	nav{
		position: absolute; top: 3rem; left: 50%; transform: translateX(-50%);
		a{position: relative; color: #fff; font-size: 1.2rem; text-decoration: none; text-transform: uppercase; margin-right: 1rem; padding-bottom: 1px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);}
		a:hover{border-bottom: 2px solid @color-green;}
		a.o-projektu::after{content:url('../img/lists.svg');	position:absolute; bottom: 100%; left: 50%; transform: translateX(-50%);}
		a.mam-zajem{position: absolute; right: 0; top: -.4rem; background: @color-green; margin-right: 0; padding: .4rem 1rem; font-family: "RobotoSlab Regular"; transition: .2s ease-in-out;}
		a.mam-zajem:hover{background: @color-green_hover; border: none;}
		.lang{
			position: absolute; right: 0; top: -2.5rem;
			a{font-size: .9rem; color: @color-green; font-family: "RobotoSlab Regular"; margin-right: .5rem; text-shadow: none;}
			
			a.active{color: #fff;}
		}
	}
	nav#mobile-nav{
		display: none; justify-content: flex-end; align-items: center; top: 15px; z-index: 1;
		i{background: #fff; color: @color-green; padding: .6rem .7rem; cursor: pointer;}
		.lang{position: relative; top: 0; margin-right: 1rem;}
		.menu{
			display: none; position: absolute; top: 100%; background: #fff; z-index: 1000;
			a{display: block; color: @color-green; text-align: center; font-size: 1rem; margin: 0; padding: .5rem 2rem; text-shadow: none; border-bottom: 1px solid #eee;}
			a:hover{background: #eee; border-bottom: 1px solid #eee;}
		}
	}
}

#o-projektu{
	position: relative; width: 100%; background: @color-green; color: #fff; padding: 4rem 0;
	.list-bg{
		position: absolute; left: 0; top: 0; height: 100%; opacity: 0.08; overflow: hidden;
		img{height: 105%; margin-top: -2.5%; margin-left: -35%;}
	}
	.separator{width: 50%; margin-top: 3rem;}
	.img svg{position: absolute; left: 50%; transform: translateX(-50%); bottom: -2rem; max-width: 100%; max-height: 135%;}
}

#lokalita{
	position: relative; padding: 6rem 0; color: @color-green;
	.list-bg{
		position: absolute; right: 0; top: 0; height: 100%; overflow: hidden;
		img{height: 160%; margin-top: -30%; margin-left: 72%;}
	}
	.img img{position: relative; width: 90%;}
	/*.img div::after{
		content: ""; position:absolute; top: -22%; left: 0; width: 90%; height: 100%; 
		background-image: url('../img/orb.svg'); background-size: 35% auto; background-position: center top; background-repeat: no-repeat;
	}*/	
	.text{padding-left: 4rem !important;}
	.address{color: #fff; background: @color-green; padding: .5rem 1rem;}
}

.map{width: 100%;}

#galerie{
	background: @color-green; padding: 4rem 0;
	img{max-width: 100%;}
	.miniatures-right{
		display: flex; flex-wrap: wrap; margin-top: -2rem;
		.miniature{width: 50%; height: 50%; padding: 2rem 0 0 2rem;}
		.miniature div{width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; transition: background-image 0.2s ease-in-out;}
	}
	.miniatures-left{
		display: flex; flex-wrap: wrap; margin-top: -2rem;
		.miniature{width: 50%; height: 50%; padding: 2rem 2rem 0 0;}
		.miniature div{width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; transition: background-image 0.2s ease-in-out;}
	}
	.bottom{margin-top: 2rem;}
	.col-7{flex: 0 0 55%; max-width: 55%;}
	.col-5{flex: 0 0 45%; max-width: 45%;}
	.arrow{
		position: absolute; top: 0; width: 50px; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); cursor: pointer;
		&:hover{color: #fff;}
		&.left{left: 15px;}
		&.right{right: 15px;}
	}
}

#nabidka{
	width: 100%; text-align: center; padding: 3rem 0;
	background: linear-gradient(0deg, rgba(223,223,223,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 90%, rgba(223,223,223,1) 100%);
	img{width: 250px; margin-bottom: 2rem;}
	img.orb-reverse{display: block; margin: 2rem auto; transform: rotate(180deg);}
	.content{
        position: relative;
		.row{margin: 0 !important;}
		h2{color: @color-green !important;}
		.nadpis{text-align: left; padding-right: 4rem;}
		.text{color: @color-gray;}
		.filtry{
			position: relative; right: 0; width: 300px;  padding-left: 1rem; display: flex; align-items: center;
			.left{padding-right: 4rem}
			.right{padding-left: 4rem; padding-right: 1rem;}
			.ui-slider-horizontal{height: .1rem;}
			.ui-widget.ui-widget-content{border-color: @color-gray; font-family: "RobotoSlab Light";}
			.ui-slider-horizontal .ui-slider-range{background: @color-green; height: 4px; top: -2px;}
			.ui-slider .ui-slider-handle{
				width: 1.2rem; height: 1.2rem; top: -.62rem; border-radius: 5rem; background: @color-green; border-color: @color-green;	
				&:active{background: #f6f6f6;}
				&:focus{border: 0 !important; outline: none !important; background: @color-green;}
			}
			.slider-name{position: absolute; left: 50%; transform: translateX(-50%); top: -2.5rem; color: @color-green; text-transform: uppercase;}
			.slider-name.left{padding-right: 3rem;}
			.range-from{position: absolute; left: -3rem; top: 1rem; color: @color-green; width: 6rem; text-align: center;}
			.range-to{position: absolute; right: -3rem; top: 1rem; color: @color-green; width: 6rem; text-align: center;}
		}
		table.byty{
			width: 100%; border-collapse: collapse;
			th, td{text-align: center; font-size: 1rem; font-weight: 100 !important; color: @color-green; padding: .5rem 1rem}
			th{background: @color-green; color: #fff; text-transform: uppercase; padding: 1rem 1rem;}

			tr:nth-child(2n-1){
				background: @color-gray;
				td{color: #fff;}
				a{color: #fff;}
			}
			a{color: @color-green; text-decoration: none; cursor: pointer;}
			a:hover{text-decoration: underline;}

		}
		button{margin: 4rem 0 2rem 0;}
    }
}

#ostatni{
	width: 100%; background: @color-green; padding: 3rem 0;
	h2{color: #fff; text-align: center;}
	.projekty{
		display: flex; position: relative; width: auto; overflow-x: scroll;
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
		&::-webkit-scrollbar {display: none;}
		.projekt{padding: 0 10px;}
		.projekt:first-of-type{padding: 0 10px 0 0;}
		.projekt:last-of-type{padding: 0 0 0 10px;}
		.projekt-inner{
			position: relative; background: #000;
			img{width: 100%;}
			.logo{display: none; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 50%; z-index: 1;}
			.name{background: @color-darkgreen; color: #fff; text-align: center; padding: 10px 0;}
			&:hover{
				img{opacity: 0.5;}
				.logo{display: block; opacity: 1;}
			}
		}
	}
	.arrow-right{position: absolute; display: flex; align-items: center; width: 20px; height: 100%; right: 15px; top: 0; font-size: 2rem; color: #fff; opacity: 1; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); cursor: pointer; z-index: 2;}
	.arrow-right:hover{opacity: 1;}
	.arrow-left{position: absolute; display: flex; align-items: center; width: 20px; height: 100%; left: 15px; top: 0; font-size: 2rem; color: #fff; opacity: 1; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); cursor: pointer; z-index: 2;}
	.arrow-left:hover{opacity: 1;}
}

#kontakt{
    width: 100%; height: auto; background: #fff;
    .content{
        display: flex; width: 100%; height: auto; margin: auto; padding: 4rem 0;
		h2{color: @color-gray;}
		.contact{
			display: flex; padding: 2rem 0 0 5rem; font-family: "RobotoSlab Regular";
			div{
				font-size: .9rem; color: @color-green;
				img{width: 220px; height: auto; margin-bottom: 2rem;}
			}
			.col-sm-6{
				display: flex; justify-content: center;
			}
		}
		
		.form{
			position: relative; width: 100%;
			table{width: 100%;}
			td{padding: 15px 15px 0 0;}
			input, textarea{
				color: @color-green; background: transparent; border: 1px solid @color-gray; padding: 14px 20px; font-family: "Roboto Regular"; font-size: 14px; outline: none !important;
				-webkit-transition: background-color 0.4s ease-out;
				-moz-transition: background-color 0.4s ease-out;
				-o-transition: background-color 0.4s ease-out;
				transition: background-color 0.4s ease-out;
				&:focus{background: #fff;}
			}
			input{width: 100%;}
			input[type="submit"]{
				width: auto; padding: .5rem 1rem;
				&:hover{background: @color-gray; color: #fff;}
			}
			textarea{width: 100%;}
		}
    }
}

#standardy{
    width: 100%; height: auto; background: #b2b2b2;
    .content{
        width: 100%; height: auto; margin: auto; padding: 4rem 0; color: #fff;
        p{margin: 2rem 0; color: #fff; padding-right: 3rem;}
		.img{margin: auto 0;}
        img{max-width: 100%; margin: 0 2rem 2rem 0;}
    }
}

#partneri{
    width: 100%; height: auto; background: #fff;
    .content{
        width: 100%; height: auto; margin: auto; padding: 3rem 0; display: flex; align-items: center;
		h2{display: flex; align-items: center; margin: 0; color: @color-gray;}
		.partneri-img{
			display: flex; width: 100%; padding-left: 3rem;
			div{text-align: center;}
			img{height: 80px; margin-right: 3rem;}
		}
	}
}

.footer{
	width: 100%; height: 40px; background: @color-green;
}

.separator{
  display: flex;
  flex-direction: row;
  &:before, &:after{
	content: "";
	flex: 1 1;
	border-bottom: 2px solid;
	margin: auto; 
  }
  *{margin: 0 5px;}
}

h2{font-family: "RobotoSlab Regular"; text-transform: uppercase; margin-bottom: 2rem;}

button{
	border: none; padding: .4rem 1.5rem; text-transform: uppercase; transition: .2s ease-in-out; outline: none !important;
	&.green{background: @color-green; color: #fff;}
	&.green:hover{background: @color-green_hover;}
	&.transparent{background: transparent; color: @color-green; border: 1px solid @color-green;}
	&.transparent:hover{background: @color-green; color: #fff;}
}

.checkbox_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 28px;
  vertical-align: middle;
  text-transform: uppercase;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid @color-gray;
}

/* On mouse-over, add a grey background color */
.checkbox_container:hover input ~ .checkmark {
  background-color: #eee;
}

/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked ~ .checkmark {
  background-color: @color-gray;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox_container .checkmark:after {
  left: 8px;
  top: 3px;
  width: 7px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.container{margin: auto; padding: 0;}
@media (max-width: 576px){
	#ostatni .projekty .projekt-inner{width: 250px;}
}
@media (min-width: 576px){
	#ostatni .projekty .projekt-inner{width: 260px;}
}
@media (min-width: 768px){
	#ostatni .projekty .projekt-inner{width: 350px;}
}
@media (min-width: 992px){
	#ostatni .projekty .projekt-inner{width: 306.6666666666667px;}
}
@media (min-width: 1200px){
	#ostatni .projekty .projekt-inner{width: 366.6666666666667px;}
}
@media (min-width: 1400px){
	.container{max-width: 1320px;}
	#ostatni .projekty .projekt-inner{width: 426.6666666666667px;}
}
@media (min-width: 1600px){
	.container{max-width: 1500px;}
	#ostatni .projekty .projekt-inner{width: 486.6666666666667px;}
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #666;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #666;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #666;
}

@media (max-width: 1600px){
	#lokalita .img div::after{top: -16%;}
}

@media (max-width: 1400px){
	#o-projektu .text{padding-right: 3rem !important;}
	
	#lokalita .img div::after{top: -13%;}
}


@media (max-width: 1200px){
	#lokalita .img div::after{top: -10%;}
	
	#partneri .content{display: block; padding: 3rem 0;}
	#partneri .content .partneri-img{padding-left: 0; margin-top: 2rem;}
	
	#nabidka .content .filtry .right{padding-left: 1rem; padding-right: 4rem;}
	
	#kontakt .content .contact{padding: 2rem 0;}
}

@media (max-width: 992px){
	#nav{display: none;}
	#mobile-nav{display: flex !important;}
	
	#o-projektu .text{padding-right: 0 !important;}
	
	#lokalita{padding: 2rem 0; text-align: justify;}
	#lokalita .address{text-align: left;}
	#lokalita .text{padding-left: 0 !important;}
	#lokalita .img{order: 2;}
	#lokalita .img img{width: 100%;}
	#lokalita .img div::after{top: -22%;}
	
	#standardy .content .img{padding-top: 2rem;}
}

@media (max-width: 768px){
	#lokalita .img div::after{top: -22%;}
	
	#partneri .content .partneri-img{flex-wrap: wrap;}
	#partneri .content .partneri-img div{width: 100%; margin-bottom: 2rem;}
	#partneri .content .partneri-img div:last-of-type{margin-bottom: 0;}
	
	#galerie{padding: 0;}
	#galerie .p-0{padding: 15px !important;}
	#galerie .bottom{display: none;}
	#galerie .miniatures-right{display: none;}
	
	#nabidka .content .nadpis{padding-right: 0;}
	#nabidka .content .filtry{padding: 3rem 0; width: 100%;}
	#nabidka .content .filtry .right{margin-top: 5rem;}
}

@media (max-width: 576px){
	body{font-size: 1rem;}
	.container{padding: 0 15px;}
	
	#o-projektu{padding: 2rem 0; text-align: justify;}
		
	#nabidka{padding: 2rem 0;}
	
	#kontakt .content{padding: 2rem 0 0 0;}
	
	#standardy .content{padding: 2rem 0 0 0;}
	
	#partneri .content{padding: 2rem 15px;}
	
	h2{font-size: 1.5rem;}
}