@import "vars";
@import "global";
@import "mixins";
@import "reset";


// Zakladni layout

body {
	background: @bodyBg;
	overflow-x: hidden;
}


#main {
	max-width: 1920px;
	margin: 0 auto;
	min-height: 100%;
	text-align: center;
	position: relative;
	overflow-x: hidden;

	#header {
		background: @brand url('../images/main-bg.jpg') 50% 50% no-repeat;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;

		@media @tablet {
			padding: 20px 50px;
			justify-content: space-between;        
		}

		h1 {
			.font-size(30);
			margin: 0;
			display: table-cell;
			vertical-align: middle;

			a {
				color: #fff;
				overflow: hidden;

				img {
					margin: 0 20px 0 0;
					display: inline-block;
					width: 62px;
					height: 62px;
				}
			}
		}

		.back {
			margin: 0;
			display: none;

			@media @tablet {
				display: block;	        
		    }

			a {
				color: #fff;
				text-decoration: underline;
				padding-left: 30px;
				font-weight: 300;
				text-transform: uppercase;
				.font-size(14);
				background: url('../images/back.png') 0 50% no-repeat;

				&:hover {
					@media @desktop {
						padding-right: 5px;
					}
				}
			}
		}
	}

	#anotation {
		height: 100vh;
		background: @brand url('../images/main-bg.jpg') 50% 50% no-repeat;
		background-size: cover;
		display: flex;
		align-items: center;
		position: relative;

		h1 {
			color: #fff;
			width: 100%;
			position: absolute;
			top: 50%;
			.translate(0, -50%);

			@media @tablet {
				top: 35%;	        
		    }
		}

		.scroll {
			position: absolute;
			left: 50%;
			.translate(-50%, 0);
			bottom: 3%;
			width: 100%;
			display: none;

			@media @tablet {
				display: block;
				bottom: 7%;		        
		    }

			a {
				color: #fff;
				.font-size(14);
				text-transform: uppercase;
				font-weight: 300;
				padding-top: 60px;
				background: url('../images/scroll.png') 50% 0 no-repeat;
				display: inline-block;

				&:hover {
					background-position: 50% 5px;
					text-decoration: underline;
				}
			}
		}
	}

	#reference {
		overflow: hidden;

		.reference_box {
			width: 50%;
			float: left;

			@media @desktop {
				width: 25%;	        
		    }

			.inner {
				width: 100%;
				padding-top: 100%;
				background: red;
				position: relative;
				overflow: hidden;
				z-index: 1;
				background: @brandSecond;

				&:after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 150%;
					.horizontal-gradient;
					z-index: 1;
					.transition;
          
          @media @tablet {  
						height: 50%;    
				    }

					@media @desktop {
						bottom: -50%;
						.opacity(0);     
				    }
				}

				&_center {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
				}

				img {
					.transition;
					width: 100%;
					object-fit: cover;
				}

				&:hover {
					&:after {
						bottom: 0;
						.opacity(1);
					}

					img:not(.nolink) {
						.scale(1.05);
					}

					h2 {
						.opacity(1);
						bottom: 10px;

						@media @tablet {
							bottom: 20px;
					    }
					}
				}

				h2 {
					color: #fff;
					.font-size(20);
					position: absolute;
					left: 0;
					bottom: 10px;
					padding: 0 20px;
					width: 100%;
					z-index: 2;
					.transition;

					@media @tablet {
						text-align: left;
						.font-size(32);
						padding: 0 40px;
						bottom: 20px;
				    }

				    @media @desktop {
						bottom: -50px;
						.opacity(0);
				    }

					a {
						color: #fff;
						padding: 1000px;
						margin: -1000px;
						display: block;

						small {
							display: inline-block;
							width: 12px;
							height: 12px;
							margin: 0 0 0 8px;
							background: url('../images/external.png') 0 0 no-repeat;
							background-size: 12px;

							@media @tablet {
								width: 17px;
								height: 17px;
								margin: 0 0 2px 15px;
								background-size: 17px;
						    }
						}
					}

					span {
						font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	        			text-transform: none;
	        			letter-spacing: 0;
	        			display: block;
	        			margin-top: 4px;
	        			.font-size(12);
	        			line-height: 1.3;
	        			color: #fff;

	        			@media @tablet {
							.font-size(15); 
					    }
					}
				}
			}
		}
	}

	#usp {
		padding: 50px 0 20px;
		background: #dff4f8 url('../images/usp-bg.jpg') 50% 0 no-repeat;
		background-size: cover;

		@media @tablet {
			padding: 80px 0;
	    }

		@media @desktop {
			padding: 132px 0 153px;
	    }

		.usp_inner {
			max-width: 1170px;
			margin: 0 auto;
			padding: 0 20px;

			@media @desktop {
				padding: 0 50px;
		    }

			ul {
				margin: 0;
				padding-top: 15px;

				@media @tablet {
					display: flex;
					justify-content: space-between;
					padding-top: 30px;
			    }

			    @media @desktop {
					padding-top: 67px;
			    }

				li {
					max-width: 300px;
					padding: 0;
					margin: 0 auto 30px;

					@media @tablet {
						margin: 0;
				    }

					> span {
						display: block;
						.font-size(35);
						line-height: 0.9;
						text-transform: uppercase;
						font-family: 'Teko', Arial, Helvetica, sans-serif;
		    			letter-spacing: 0.01em;
		    			color: @brand;

		    			@media @tablet {
							.font-size(45);
					    }

		    			@media @desktop {
							.font-size(70);
					    }

					    span {
					    	@media @tablet {
					    		display: block;
					    	}
					    }
					}
				}
			}
		}
	}

	#kontakt {
		background: #fff;
		padding: 50px 0 70px;

		@media @desktop {
			padding: 132px 0 81px;
	    }

		h2 {
			margin-bottom: 30px;

			@media @desktop {
				margin-bottom: 70px;
		    }
		}

		p {
			.font-size(23);
			line-height: 1.6;
			margin: 0;

			a {
				@media @mobile {
					display: block;
					padding: 10px 20px;
					background: @brand;
					.font-size(18);
					color: #fff;
					text-decoration: none !important;
					margin: 0 20px 10px;
			    }
			}

			.email {
				text-decoration: underline;
			}

			&.notice {
				.font-size(11);
				line-height: 1.692;
				color: @colorNotice;
				margin-top: 30px;

				@media @desktop {
					.font-size(13);
					margin-top: 73px;
			    }
			}
		}
	}

	.reference_img {
		margin: 0 -7%;
		width: 114%;

		@media @desktop {
			margin: 0;
			width: 100%;
	    }
	}

	.scrollup {
		position: fixed;
		right: 0;
		bottom: 0;
		background: fade(@brand, 80%);
		.font-size(14);
		text-transform: uppercase;
		font-weight: 300;
		color: #fff;
		padding: 13px 20px;
		display: none;
		z-index: 10;
		width: 100%;

		@media @desktop {
			width: auto;
	    }

	    &:before {
	    	content: '';
	    	display: inline-block;
	    	width: 20px;
	    	height: 20px;
	    	margin: 0 10px -5px 0;
	    	background:  url('../images/top.png') 50% 0 no-repeat;
	    }

		&:hover {
			background: @brand;
		}
	}

	.error404 {
		position: absolute;
		left: 50%;
		top: 50%;
		.translate(-50%, -50%);
		width: 100%;
		margin: 0;
	}
}