/*XXXXXXXXXXXXXXXXXXXXXXXXX
 				GENERAL
XXXXXXXXXXXXXXXXXXXXXXXXX*/

h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }
body { font-family: 'Rokkitt', serif; }

body,
p,
.planner-radio span {
	font-size: 16px;
}

p strong {
	font-weight: 700;
}

.btn-sm {
	max-width: 300px;
}

#kontaktBtn {
	max-width: 330px;
}

#kontaktBtn:hover {
	border-color: #0a8492;
}

.expandTel,
.expandEmail {
	cursor: pointer;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
			IMAGE BLOCK
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.image-block {
	padding: 80px 0;
}

@media all and (max-width: 767px) {
	.image-block {
		padding-bottom: 0;
	}
}

.image-block ul {
	text-align: left;
	padding-left: 20px;
	list-style-type: disc;
	list-style: outside;
}

.image-block li {
	margin-bottom: 20px;
}
/*
.image-block li:last-of-type {
	margin-bottom: 0;
}
*/

/*XXXXXXXXXXXXXXXXXXXXXXXXX
				FOOTER
XXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (max-width: 767px) {
	/* prevent delete of breaks in footer */
	footer br {
		display: block;
	}
}

@media all and (max-width: 991px) {
	h5.m-top {
		margin-top: 80px;
	}
}

.footer-2 .logo {
	margin-bottom: 24px;
}

.footer-2 .copyright {
	font-size: 14px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
				PROJECTS
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.contained-projects {
	padding: 80px 0;
}

/* "Diese exklusiven Immobilien koennten ihnen auch gefallen..." */
/* fix: not working as expected, because of the one <a> for the thumbnail (which is no button) */
.contained-projects .btn {
    margin-left: 12px;
}

.contained-projects .btn:nth-of-type(2) {
    margin-left: 0;
}

.contained-projects .project .background-image-holder {
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-color: #fff !important;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 			IMAGE SLIDER
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.image-slider ul.slides li,
.image-slider .flex-active-slide,
.image-slider .flex-control-nav {
	text-align: center;
}

/* nav like hero slider */
.image-slider .flex-control-nav li a {
    border: 1px solid #fff;
}

.image-slider .flex-control-nav li a.flex-active {
    background: #fff;
}

.image-slider .flex-control-nav li a:hover {
    background: #fff;
    background: rgba(255, 255, 255, .7);
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 				PRICING
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.pricing-table-1 h5 {
	top: 0;
	float: right;
	margin-bottom: 10px;
}

.pricing-table-1 .dollar {
	bottom: 0;
	font-style: normal;
}

.pricing-table-1 .alt-font {
	text-transform: none;
}

.pricing-details ul {
	border-bottom: 0;
	margin-bottom: 0;
}

.pricing-details ul li:last-child {
    margin-bottom: 0;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 					MAPS
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.map-holder,
.map-holder #map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 				SKILLS
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.skills-wrapper .skill .unit {
    font-size: 24px;
	color: #0a8492;
}

.skills-wrapper .skill {
	padding-left: 0;
	padding-right: 0;
}

@media all and (max-width: 991px) {
	.skills-wrapper .skill br {
		display: none;
	}
	.skills-wrapper {
    	margin-top: 32px;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 			HERO SLIDER
XXXXXXXXXXXXXXXXXXXXXXXXX*/

/* bg of hero slider (visible during image loading) */
.hero-slider,
.hero-slider .slides li {
	background-color: #fff;
}

/* compensate for menu */
.hero-slider .vertical-align {
	margin-top:40px;	/* 80px/2 */
}

.hero-slider .flex-control-nav {
	text-align: center;
	padding-right: 0;
}

.hero-slider .overlay::before {
	opacity: 0.3;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 	IMAGE HOVER (UNUSED)
XXXXXXXXXXXXXXXXXXXXXXXXX*/

/* hover over image (eg. plan) */
.hover-state {
	background: rgba(10, 132, 146, 0.4);
}

.hover-state .vertical-align {
	text-align: center;
	top: 45%;	/* instead of 50% */
}

.hover-state > a {
	width:100%;
	height:100%
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 					NAV
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.nav-1,
.nav-1:hover {
	background: rgba(255, 255, 255, 0.75);
}

.nav-1 .logo {
	max-height: 60px;
	margin-top: 12px;
	margin-bottom: 12px;
}

/* fix jumping caret, because of too long submenu items */
.has-dropdown {
	min-width: 150px;
}

.has-dropdown::before {
	top: 30px;
	color: black;
}

@media all and (max-width: 1023px) {
	.nav-1 .logo {
		max-height: 40px;
	}
	
	.has-dropdown::before {
		top: 10px;
	}
	
	/* fix "ein projekt von..." too long hitting logo */
	.nav-1 .menu {
		margin-top: 12px;
	}
	
	.nav-1 .nav-functions {
		display: inline-block;
		float: right;
		position: relative;
		right: 20px;
	}
	
	.nav-1 .nav-functions ul.menu li a {
		padding-left: 20px !important;
	}
}

@media all and (min-width: 1024px) {
	/* "ein projekt von..." */
	.nav-1 .nav-functions ul.menu li a {
		padding-right: 0;
	}
}

/* "ein projekt von..." */
.nav-1 .nav-functions {
	top: 0;
}

.nav-1 ul li,
.nav-1 ul li:first-child,
.nav-1 ul > li:hover {
	border: 0;
}

.nav-1 ul li a {
	padding: 28px 24px;
	color: black;
/*	opacity: 1;*/
}

/* hamburger */
.bar-1, .bar-2, .bar-3 {
	background-color: black;
}

@media all and (max-width: 1023px) {
	/* "ein projekt von..." fix jumping on submenu item hover */
	.has-dropdown:hover .subnav li:last-child {
		margin-bottom: 0;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 				CONTACT
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.contact-2 .text-block {
	margin-bottom: 80px;
}

/* "Folgende Projekt(e) interessieren..." text above radio buttons */
.contact-2 span.title {
	margin-bottom: 18px;
}

.contact-2 textarea {
	resize: vertical;
}

.contact-2 .radio-group {
	margin-bottom: 24px;
}

@media all and (max-width: 991px) {
	.contact-2 .radio-group {
		margin-top: 80px;
	}
	
	#kontaktForm h5 {
		margin-top: 80px;
	}
	
	/* space between two contact persons */
	.contact-2 .m_top {
		margin-top: 80px;
	}
}

/* DEL AFTER DEV */
.contact-2 .planner-radio input {
	/* show "real" radio buttons */
	/*opacity: 1;*/
}

.contact-2 .planner-radio {
	width: 49%;
	margin-right: 0;
	margin-bottom: 12px;
}

@media all and (max-width: 991px) {
	.contact-2 .planner-radio {
		width: 100%;
	}
}

.contact-2 .planner-radio .mock-radio {
	float: left;
	margin-right: 12px;
}

.contact-2 .contact-method {
	margin-bottom: 24px;
}

.contact-2 .contact-method:first-of-type {
	padding-top: 40px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 				FEATURES
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.fullwidth-feature .top {
  padding-left: 10px;
  padding-right: 10px;
}

/* show preview of hidden text */
.fullwidth-feature p:first-of-type {
  position:absolute;
  top:auto;
  left:0;
  width:100%;
  max-height: 500px;
  opacity: 1;
  padding-top: 12px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}

.fullwidth-feature:hover p:first-of-type {
  top:52%;
  transition: all 0.0s ease;
  -webkit-transition: all 0.0s ease;
  -moz-transition: all 0.0s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

/* special logos instead of icons*/
.fullwidth-feature .top .logo_nobg {
	/*margin-bottom: 8px;*/
	margin-top: -16px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 5px;
}

/* special logos instead of icons*/
.fullwidth-feature .top .logo_bg {
	margin-top: -16px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 5px;
	background-color: white;
	border: 0px solid transparent;
	border-radius: 5px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXX
 				SPINNER
XXXXXXXXXXXXXXXXXXXXXXXXX*/

.spinner {
	margin: 0 auto;
	width: 70px;
	text-align: center;
	
	/* custom */
	float: right;
	margin-top: 10px;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #0a8492;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}