body, html, .main-page{
	width: 100%;
	height: 100%;
	font-family: 'Pontano Sans', sans-serif;
}

.localization{
	position: absolute;
	top:5px;
	left: 5px;
	z-index: 10;
	font-size :14pt;
	color: white;
	text-shadow: 0px 0px 2px #555555;
}

.localization > p{
	display: inline;
}

.localization p.selected ,.localization p:hover{
	color:#777777;
}

.light{
	background: white;
}

.dark{
	background-color: #252424;
	color : white;
}

.view-placeholder,.unsuporterd-wrapper{
	width: 100%;
	height: 100%;
}


.unsuporterd-wrapper{
	position: fixed;
	top: 0;
	left:0;
	background-color: #252424;
	overflow-y:hidden;

}

.unsuporterd-wrapper>div{
	position: absolute;
	color:#FFFFFF;
	top:45%;
	left:50%;
	width: 350px;
	margin-left:-175px;
}

.main-page .header{
	position: relative;
	width: 100%;
	background-image: url('../img/cover.jpg');
	background-size: 100% auto;
	background-position: center;
	padding: 0px;
}

.logo{
	width: 80px;
	margin: auto;
	display: block;
}

.title{
	font-size: 20pt;
	text-align: center;
	padding: 7px;
	display: block;
}

.description{
	padding: 12px 0px 0px 0px;
	text-align: justify;
}

.header .title{
	color:#FFFFFF;
	font-size: 25pt;
	text-shadow: 0px 0px 2px #555555;
}

.subtitle{
	font-size: 13pt;
	text-align: center;
	display: block;	
}

.navigation{
	position: absolute;
	display: block;
	margin: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}

.navigation-wrapper{
	width: 100%;
	z-index: 100;
	color : white;
}

.navigation-wrapper li, .navigation-wrapper li:active {
	display: inline-block;
	cursor: pointer;
}

.navigation-wrapper li a{
	display: block;
	color : inherit;
	background: inherit; 
	text-decoration: none;
}

.image-blocker{
	display: block;
    width: 100%;
    height: 100%;
}

.main-content{
	padding: 15px 15px;
}

.content-image-small{
	display: block;
	margin: 30px auto;
	width: 100px;
}

.content-image-medium{
	display: block;
	margin: 30px auto;
	width: 200px;
}

.content{
	font-size: 14pt;
}

.image-square{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

.image-cropper{
	overflow: hidden;
	position: relative;
}

@keyframes imageselect{
	0% {transform: scale(1.0);} 
	100% {transform: scale(1.05);}
}

.project-image{
	width: 100%;
    transition-property : transform;
    transition-duration: 2s; 
}

.image-cropper:hover .project-image{
	transform : scale(1.05);
}

.image-dimmer{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: rgb(0,0,0);
	opacity: 0;
	transition-property : opacity;
    transition-duration: 0.5s; 
}

.image-cropper:hover .image-dimmer{
	opacity: 0.4;
}

.project-title{
	position: absolute;
	width: 100%;
	bottom: 30px;
	left: 0;
	font-size: 15pt;
	color: #FFFFFF;
	opacity: 0;
	text-align: center;
	transition-property : opacity;
    transition-duration: 0.5s; 
}

.image-cropper:hover .project-title{
	opacity: 1;
}

.contact .title, .contact .subtitle{
	font-weight: normal;
	padding: 2px;
	margin: 2px;
	font-size: 17pt;
}

.contact .subtitle{
	font-size: 13pt;
}

.vertical-space-small{
	height: 20px;
}

.no-margin{
	margin: 0px;
}

.no-padding{
	padding: 0px;
}

/*
 * MAIN PAGE
 */
.navigation, .navigation-wrapper{
	height: 48px;
	line-height: 48px;
}

.navigation-wrapper{
	color : white;
	font-size: 12pt;
}

.navigation-wrapper li{
	padding: 0px 5px;
}

.main-content{
	padding: 15px 0px;
}

.main-content div:not(:first-child) .image-padder{
	padding: 15px 0px 0px 0px;
}

.header .center-content-wrapper{
	position: relative;
	top: 40%;
	margin: auto;
}

.center-content-wrapper{
	margin: 20px;
}

.content-fullheight{
	padding: 40px 20px;
}

.main-page .header{
	height: 100%;
}

.project-image{
	clear: both;
}

@media (min-width: 768px){
	.navigation-wrapper ul{
		float: right;
	}

	.navigation-wrapper{
		font-size: 15pt;
	}

	.navigation-wrapper li{
		padding: 0px 20px;
	}

	.navigation-wrapper li:hover{
		background-color: #FFFFFF;
		color:black;
	}

	.navigation-wrapper.fixed li:hover{
		background-color: #252424;
		color:white;
	}

	.main-content{
		padding: 15px;
	}

	.main-content .image-padder{
		padding: 15px !important;
	}

	.center-content-wrapper{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.content-fullheight{
		clear: both;
		position: relative;
		height: 100%;
	}

	.main-page .header{
		height: 100%;
	}
}

/*
 * LOADING
 */

.loading{
	position: fixed;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background: white;
}

.loading img{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin: -50px -50px 0px 0px;
}

/*
PROJECT PAGE
*/


.project-preview{
	width: 100%;
	background: #FFFFFF;
	color:black;
}

.project-preview-wrapper{
	height: 100%;
	overflow-y: auto;
}

.project-preview .header{
	position: relative;
	width: 100%;
	height: 170px;
}

.project-preview .header .logo{
	position: absolute;
	left:50%;
	top: 50%;
	margin: -40px 0px 0px -40px;
}

.project-preview .title{
	text-align: left;
	padding: 0px;
	margin: 0px;
}

.project-preview .subtitle{
	padding: 20px 0px;
	text-align: left;
}

.project-preview .images{
	padding: 30px 0px;
}

.project-preview .project-details{
	padding: 0px 35px;
}

.slick-slider{
	margin: 0px;
}

.carousel-image{
	width: 100%;
	height: 100%;
}

.dots-placeholder{
	width: 100%;
}

.project-preview .project-image{
	position: relative;
	width: 100%;
}

.project-preview .project-details{
	position: relative;
	width: 100%;
}

.dots-placeholder{
	position: relative;
	width: 100%;
	height: 50px;
	bottom: initial;
}

.project-preview .floorplan{
	display: block;
	margin: auto;
	width: 100%;
}

.backbutton{
	position: absolute;
	top:50%;
	left: 5%;
	height: 30px;
	margin: -15px 0px 0px 0px;
	color: black;
}

.backbutton:hover{
	font-weight: bold;
	color: black;
}

.backbutton div{
	float: left;
	line-height: 30px;
}

.backbutton img{
	vertical-align: middle;
	float: left;
	height: 30px;
}

.carousel-frame ul{
	list-style: none;
}

.slick-dots{
	bottom: initial;
}

.slick-dots li button:before{
	font-size: 25px;
}

.videoWrapper{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
}

.videoWrapper iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 1300px) and (min-aspect-ratio: 15/10){
	.project-preview{
		height : 100%;
	}

	.project-preview .row-content{
		position: relative;
		height: auto;
	}

	.project-preview .project-image{
		width: 66%;
	}

	.project-preview .project-details{
		float: none;
		position: absolute;
		top : 0;
		right: 0;
		height: 100%;
		width: 34%;
	}

	.project-preview .floorplan-wrapper{
	    height: 50%;
	}

	.project-preview .floorplan{
		height: 100%;
		width: auto;
	}

	.dots-placeholder{
		position: absolute;
		bottom: 0;
		height: auto;

	}
}

@media (min-width: 1500px) and (min-aspect-ratio: 15/10){
	.project-preview .floorplan-wrapper{
		position: absolute;
	    bottom: 0px;
	}
}

@media all and (orientation: portrait) {
	.navigation{
		display: inline;
	}
}

@media all and (max-aspect-ratio: 1000/602){
	.header{
		background-size: auto 100% !important;
		background-position: center;
	}
}