@import "fonts.css";

@color-gold: #aa9767;
@color-green: #003b4a;

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

body{
    margin: 0;
    padding: 80px 0 0 0;
    font-family: "Proxima Nova Light";
	font-size: 1rem;
	color: @color-gold;
	overflow-x: hidden;
}

.top-panel{
	position: fixed; left: 0; top: 0; width: 100%; height: 80px; padding: 0 2.5%; background: @color-green; display: flex; align-items: center; z-index: 99;
	-webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
	box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.25);
	i#menu-button{
		font-size: 1.75rem; color: @color-gold; padding: .4rem; cursor: pointer;
		&.open{background: #fff;}
	}
	ul{margin-bottom: 0;}
	li{display: inline-block; text-align: center; margin-left: 1.5rem; font-size: 0;}
	li a{position: relative; display:inline-block; font-family: "Proxima Nova Light"; font-size: 1rem; text-transform: uppercase; color: #fff; text-decoration: none; transition: .4s ease;}
	li a:hover, li a.active{font-family: "Proxima Nova Bold"; &:not(.gold){color: @color-gold;}}
	li a:not(.gold):hover::after, li a.active:not(.gold)::after{width: 100%;}
	a::before{display: block; content: attr(title);	font-family: "Proxima Nova Bold"; height: 0; overflow: hidden; visibility: hidden;}
	a::after{content: ""; position: absolute; left: 0; top: 100%; width: 0; height: 2px; background: @color-gold; transition: .4s ease;}
	li a.gold{background: @color-gold; padding: .5rem 1rem;}
	
	.langs{
		display: flex; align-items: center;
		li{margin-left: 0; margin-right: .5rem;}
		a.active{font-family: "Proxima Nova Bold"; color: @color-gold;}
	}
}

#introCarousel{
	position: relative;
	.logo{
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; display: flex; align-items: center; justify-content: center;
		background-image: url("../img/bg-logo.png"); background-size: 100% auto; background-position: center; background-repeat: no-repeat;
		img{width: 50%; transform: translateY(-20%);}
	}
	.carousel-item{width: 100%; height: 600px; /*aspect-ratio: 2.4;*/ background-size: cover; background-position: center;}
	&::after{
		content: ""; position: absolute; left: 45%; bottom: 0; width: 50%; height: 105%; mix-blend-mode: multiply;
		background-image: url("../img/pattern.png"); background-size: auto 100%; background-position: left; background-repeat: no-repeat;
	}
}

.about-project{
	h2{color: @color-gold;}
}

.location{
	background: @color-green; color: @color-gold;
	.address{color: #fff; margin-bottom: 2rem; text-transform: none!important;}
}

#galleryCarousel{
	img{width: 100%; height: 90vh; object-fit: cover; object-position: center;}
}

.offer{
	position: relative;
	h2{margin-bottom: 1rem;}
	h4{margin-bottom: 3rem; font-size: 1rem; text-transform: uppercase;}
	
	.ui-slider{max-width: 250px; margin: auto;}
	.ui-widget.ui-widget-content{background: @color-green; color: @color-gold; font-size: .9rem; border: 0; border-radius: 0;}
	.ui-slider-horizontal{height: 2px;}
	.ui-slider-horizontal .ui-slider-range{background: @color-green;}
	.ui-slider-horizontal .ui-slider-handle{top: -10px;}
	.ui-slider .ui-slider-handle{width: 20px; height: 20px;}
	.ui-state-default{background: @color-green; border: 0; border-radius: 100%; cursor: grab; outline: none !important;}
	.ui-state-default:active{cursor: grabbing;}
	
	.state-from{position: absolute; left: 0; top: 12px; transform: translateX(-50%);}
	.state-to{position: absolute; left: 100%; top: 12px; transform: translateX(-50%);}
	
	table{
		width: 100%; margin: 8rem 0 4rem 0; color: @color-green;
		a{color: @color-gold !important;}
		//tbody tr{position: relative;}
		tr{position: relative;}
		tr td:first-of-type, tr th:first-of-type{padding-left: 0 !important;}
		tr td:last-of-type, tr th:first-of-type{padding-right: 0 !important;;}
		
		tr th{padding: .75rem 1rem; font-family: "Proxima Nova Bold"; font-style: normal; text-transform: uppercase; color: @color-gold;}
		tr::before{content: ""; position: absolute; left: -50vw; width: 150vw; height: 1px; background: @color-gold;}
		thead tr::before{background: #fff;}
		tbody tr td{padding: .5rem 1rem;}
	}
}

.contact{
	background: @color-green; color: @color-gold;
	a{color: @color-gold;}
	h2{margin-bottom: 1rem; color: #fff;}
	h3{color: #fff;}
	.tight{margin-top: 4rem;}
	
	input{display: block; width: 100%; border: none; border-bottom: 1px solid @color-gold; padding: .5rem 0; text-align: center; background: transparent; color: #fff; outline: none!important;}
	textarea{display: block; width: 100%; border: 1px solid @color-gold; padding: .5rem 0; text-align: center; background: transparent; color: #fff; outline: none!important;}
	label{text-transform: uppercase; margin: .5rem 0 3rem 0;}
	button{display: block; margin: 0 auto;}
	button:hover{color: @color-green;}
	.gdpr{font-size: .8rem; margin: 1rem 0 4rem 0; font-style: italic;}
	
	.contact-form{
		position: relative;
		&::after{
			content: "Your request has been sent successfully."; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
			justify-content: center; align-items: center; background: rgba(4,59,73,0.7); color: #fff; font-family: "Proxima Nova Bold"; font-size: 1.5rem; z-index: 1;
		}
		&.cs::after{content: "Váš dotaz byl úspěšně odeslán.";}
		&.sent::after{display: flex;}
	}
}

.standards{
	a{color: @color-green; text-decoration: underline; text-transform: uppercase; font-family: "Proxima Nova Bold";}
}

.other-projects{
	background: @color-green;
	h2{margin-bottom: 3rem;}
	.arrow-left{position: absolute; left: 2%; top: 50%; transform: translateY(-50%); width: 30px; height: 50px; background-image: url('https://www.millenniumpalace.cz/img/arrow-left.svg'); background-repeat: no-repeat; cursor: pointer; z-index: 2;}
	.arrow-right{position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: 30px; height: 50px; background-image: url('https://www.millenniumpalace.cz/img/arrow-right.svg'); background-repeat: no-repeat; cursor: pointer; z-index: 2;}
	.projects{
		display: flex; justify-content: center; width: 100%; padding-top: 10px; overflow-x: auto;
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
		&::-webkit-scrollbar {display: none;}
		a{
			display: inline-flex; margin-right: 2rem; border: 8px solid @color-gold; transition: .2s ease;
			&:last-of-type{margin-right: 0;}
			.project{position: relative;}
			img.project-preview{display: inline-flex; width: 375px; height: 225px; object-fit: cover; object-position: center; transition: .2s ease;}
			img.project-logo{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 80%; width: auto; opacity: 0;}
			&:hover{
				img.project-preview{opacity: 0.5;}
				img.project-logo{opacity: 1;}
				transform: translateY(-10px);
				-webkit-box-shadow: 0px 15px 5px -5px rgba(0,0,0,0.15);
				-moz-box-shadow: 0px 15px 5px -5px rgba(0,0,0,0.15);
				box-shadow: 0px 15px 5px -5px rgba(0,0,0,0.15);
			}
		}
	}
}

.partners{
	a{display: inline-block; margin: 0 1rem 0 3rem;}
	img{height: 50px;}
}

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

.carousel-item{
	-webkit-transition: 1.2s ease-in-out;
    -moz-transition: 1.2s ease-in-out;
    -o-transition: 1.2s ease-in-out;
    transition: 1.2s ease-in-out;
}
.carousel-control-next, .carousel-control-prev{opacity: 1;}
.carousel-control-next-icon, .carousel-control-prev-icon{width: 45px; height: 45px;}
.carousel-control-prev-icon{background-image: url("../img/icon-prev.svg");}
.carousel-control-next-icon{background-image: url("../img/icon-next.svg");}

section{
	padding: 4rem 0; text-align: center;
	h3{margin-bottom: 1rem; font-size: 1rem; color: #000; text-transform: uppercase;}
}

a.anchor {display: block; position: relative; top: -80px; visibility: hidden;}

.hook{
	position: relative;
	&::before{content: "ˇ"; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);}
}

h2{
	font-family: "MinionVariableConcept"; font-weight: bold; font-size: 3rem; text-align: center; color: #000; margin-bottom: 2rem;
	&.gold{color: @color-gold;}
}

b, strong, .strong{font-family: "Proxima Nova Bold";}

button{
	font-family: "Proxima Nova Bold"; font-size: 1.1rem; background: transparent; color: @color-gold; border: 1px solid @color-gold; text-transform: uppercase; padding: .35rem 1.5rem .25rem 1.5rem; outline: none !important; transition: .2s ease;
	&:hover{background: @color-gold; color: #fff;}
}


@keyframes zoom_out {
  100% {transform:  scale(1);}
}

@keyframes zoom_in {
  100% {transform:  scale(1.1);}
}

@keyframes pulse {
  0% { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(-50%,-50%) scale(1.1); opacity: 0;}
}

@keyframes big_pulse {
  0% { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0;}
}

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

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

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff !important;
}

.checkbox_container {
  display: inline-block;
  position: relative;
  font-size: .9rem;
  padding-left: 28px;
  margin: 5px 0;
  margin-right: .75em;
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  -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;
}

.checkbox_container.inactive{pointer-events: none; opacity: .3;}

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

/* On mouse-over, add a grey background color */
.checkbox_container:hover input ~ .checkmark {
  background-color: rgba(255,255,255,0.25);
}

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

/* 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: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



.container{margin: auto; padding: 0;}
/*@media (min-width: 1400px){
	.container{max-width: 1320px;}
}
@media (min-width: 1600px){
	.container{max-width: 1500px;}
}*/

@media (min-width: 1200px){
    
}

@media (min-width: 992px){
   .tight{width: 70%; margin: auto;}
}

@media (max-height: 700px){
    
}

////////////////////////////

@media (max-width: 1200px){
	.top-panel ul.menu{display: none; position: absolute; right: 0;}
	.top-panel ul.menu li{display: block; background: #fff; margin-left: 0;}
	.top-panel ul.menu li a{display: block; color: @color-gold; padding: .35rem 1.25rem; border-bottom: 1px solid #ccc;}
	.top-panel ul.menu li a:hover{background: #eee;}
	.top-panel ul.menu li a::after{display: none;}
	.top-panel ul.menu li a.gold{color: #fff; border-bottom-color: @color-gold;}
	.top-panel ul.menu li a.gold:hover{background: @color-gold;}
	
	#galleryCarousel img{height: 650px;}
	
	.offer h4{margin-bottom: 1.5rem; margin-top: 2rem;}
	.offer .table-layout{width: 100%; overflow-x: auto;}
	.offer table{margin: 4rem 0 0 0;}
	.offer table tr::before{display: none;}
	.offer table tr{border-bottom: 1px solid @color-gold;}
	.offer button{margin-top: 2rem;}
}

@media (max-width: 992px){
	#introCarousel .carousel-item{height: 500px;}
	#introCarousel .logo{width: 300px; height: 300px;}
	
	#galleryCarousel img{height: 550px;}
	
	.standards img{max-width: 300px;}
}

@media (max-width: 768px){
	#galleryCarousel img{height: 450px;}
	
	.contact label{margin: 0.5rem 0 2rem 0;}
	.contact .tight{margin-top: 2rem;}
}

@media (max-width: 576px){
	.container{padding-left: 15px !important; padding-right: 15px !important;}	
	
	h2{font-size: 2rem;}
	section{padding: 2rem 0;}
	
	#introCarousel .carousel-item{height: 300px;}
	#introCarousel .logo{width: 250px; height: 250px;}
	
	#galleryCarousel img{height: 300px;}
	
	.other-projects .projects{width: calc(100% - 30px); margin: auto;}
	.other-projects .projects a img.project-preview{width: 100%; height: auto;}
	
	.partners a{display: block; margin: 2rem 0;}
}