/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* Base styles: opinionated defaults */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/*  site styles  */

/* allg */

::-webkit-scrollbar { 
    display: none; 
}

body {
	background: #ffffff;
	padding: 20px;
	font: 12px/16px 'Lato', sans-serif;
	font-weight: 400;  /* 300 */
	color: #484848;
	
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
	line-height: 1.5em;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}
img {
	height: auto;
	width: auto;
	max-height: 100%;
	max-width: 100%;
}

h2 {
	font: italic 1.3em/1.28em 'Merriweather', serif;
	color: #a39d84;
}
h2::after {
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	margin-top: 13px;
	margin-bottom: 10px;
	background-color: #a39d84;
}

/* mobile landscape Hinweis */
#landscape {
	display: none;
}
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	#landscape {
		display: block;
		width: 100%;
		height: 100%;
		background-color: #a39d84;
		color: #fff;
		z-index: 1000000000;
	}
	.landscape-text {
		font-size: 3em;
		line-height: 1.3em;
		text-align: center;
		padding: 0 3em;
		
	}
	.landscape-pic {
		display: block;
		width: 80px;
		margin: 0 auto;
		padding: 3.5em 0 1em;
	}
	.dev_link a,
	.core_link a {
		display: none;
		visibility: hidden;
	}
	#mobile {
		display: none;
	}
	#fullpage {
		display: none;
	}
	#header {
		display: none;
		visibility: hidden;
	}
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
	#landscape {
		display: block;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 1000000000;
	}
	.landscape-text {
		font-size: 3em;
		line-height: 1.3em;
		text-align: center;
		padding: 3em;
	}
	.dev_link a,
	.core_link a {
		display: none;
		visibility: hidden;
	}
	#mobile {
		display: none;
	}
	#fullpage {
		display: none;
	}
	#header {
		display: none;
		visibility: hidden;
	}
}
/* mobile landscape Hinweis END */

#fullpage {
	display: block;
}
#fullpage_mobile {
	display: none;
	visibility: hidden;
}
#mobile {
	display: none;
}
#mobilex {
	display: none;
}

#infobox {
	display: block;
	width: 300px;
	/*height: 400px;*/
	/*max-height: 50%;*/
	padding: 5px 20px 10px;
	position: absolute;
	top: 100px;
	right: 3em;
	background-color: rgba(255, 255, 255, 0.9);
	overflow: hidden;
	z-index: 2;
}
#infobox_mobile {
	display: block;
	/*width: 100%;
	height: 400px;
	max-height: 50%;*/
	padding: 15px;
	position: absolute;
	/*top: 100px;
	right: 3em;*/
	background-color: rgba(255, 255, 255, 0.9);
	overflow: hidden;
	z-index: 2;
}

#infobox ul,
#infobox_mobile ul {
	margin: 0 0 0 15px;
	padding: 0;
}
#infobox li,
#infobox_mobile li {
	list-style: square; /* disc */
	margin-bottom: 5px;
	margin-top: 5px;
	color: #a39d84;
}

#infobox a,
#infobox_mobile a {
	text-decoration: underline;
	color: #a39d84;
}
#infobox a:hover,
#infobox_mobile a:hover {
	text-decoration: none;
}

/* Header */

#header {
	position:fixed;
	top: 0;
	display: block;
	width: 100%;
	height: 60px;
	background-color: white;	
	display:block;
	background: #fff;		
	padding: 20px 0 0 0;
	z-index: 9000;	
}

.nav_logo {
	position: absolute;
	top: 5px;
	left: 50%;
	width: 110px;
	margin-left: -55px;	
}

/* Navigation */

#mainmenu {
	font-size: 1.05em;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.pos_left {
	position: absolute;
	top: 15px;
	left: 25%;
	margin-left: -80px;
}
.pos_right {
	position: absolute;
	top: 15px;
	right: 25%;
	margin-right: -80px;
}
#menu {
	margin-top: 16px;
}
.submenu {
	display: block;
	width: 580px;
	margin: 0 auto;
}
.submenu ul {
	margin: 0;
	padding: 0;
}

#mainmenu li,
#menu li {
	display:inline-block;
	color: #a39d84;
}
#mainmenu li.active,
#menu li.active{
	color: #484848;
	/*border-bottom: 2px solid #484848;*/
}
#mainmenu li {
	display: block;
	width: 160px;
	height: 25px;
	border: 1px solid #a39d84;
	border-radius: 5px;
	text-align: center;
}
#mainmenu li:hover {
	border: 1px solid #484848;
	
	transition: .3s; 
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}
#mainmenu li.active {
	border: 1px solid #484848;
	color: #484848;
}

#mainmenu li a,
#menu li a{
	text-decoration:none;
	color: #a39d84;
	
	transition: .3s; 
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}

#menu li.active a:hover{
	color: #484848;
}
#mainmenu li:hover,
#menu li:hover{
	color: #484848;
}
#mainmenu a:hover,
#menu a:hover{
	color: #484848;
}
#mainmenu li a,
#mainmenu li.active a,
#menu li a,
#menu li.active a{
	padding: 5px 10px;
	display:block;
}
#mainmenu li.active a,
#menu li.active a{
	color: #484848;
}

/* Start Page */

#building_box {
	height: 65vh;
	text-align: center;
	position: relative;
	margin-top: -35vh;
}

#building_box_mobile {
	display: none;
}

.svg-frame {
	width: 100%;
	position: absolute;
	top: -1px;
	left: 0;
}
.Ebene_1,
.Ebene_2 {
	width: 100%;
	max-height: 65vh;
}
.Ebene_1 a,
.Ebene_2 a {
	opacity: 0;
	transition: .5s;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
}
.Ebene_1 a:hover,
.Ebene_2 a:hover {
	opacity: 1;
}

#welcome-once {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: inline-block;
	background-color: #e0ded6;
	padding: 5px 5px 0;
	z-index: 99999;
}
 
#welcome-once .advert-button {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	background-color: transparent;
	cursor: pointer;
}

/*.logo_center {
	display: block;
	width: 30%;
	margin: 10% auto 0;
}*/
.logo_center {
	display: block;
	width: 30%;
	margin: 14% auto 0;
}
.logo_center img {
	width: 100%;
}

#home {
	display: block;
	background-color: #ffffff;	
	height: 21vh;
}

.home_logo {
	position: relative;
	top: 3vh;
	display: block;
	width: auto;
	height: auto;
	max-width: 200px;
	height: 15vh;
	text-align: center;
	margin: 0 auto;
	z-index: 100;
}
.dev_link,
.core_link {
	font-size: 1.15em;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.dev_link a,
.core_link a {
	text-decoration:none;
	color: #a39d84;
	display: block;
	width: 160px;
	border: 1px solid #a39d84;
	border-radius: 5px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	
	transition: .3s; 
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;

}
.dev_link a:hover,
.core_link a:hover {
	color: #484848;
	border: 1px solid #484848;
}
.dev_link,
.core_link {
	position: absolute;
	top: 9vh;
}
.dev_link {
	left: 20%;
	margin-left: -80px;
}
.core_link {
	right: 20%;
	margin-right: -80px;
}

/* TEST */

#impr {
    overflow: auto;
	/*width: 500px;
	height: 100px;*/
}

#impr {
	display: none;
}

/* Cards */

#section1 {
	background: url(../img/koe_dev_bg.jpg) center center no-repeat;
	padding: 0;
}
#section2 {
	background: url(../img/building2_bg.jpg) center center no-repeat;
	padding: 0;
}
#section3 {
	background: url(../img/enter2_bg.jpg) center center no-repeat;
	padding: 0;
}
#section4 {
	background: url(../img/ausstattung_bg.jpg) center center no-repeat;
	padding: 0;
}
#section5 {
	background: url(../img/buro_bg.jpg) center center no-repeat;
	padding: 0;
}
#section6 {
	background: url(../img/dachterrasse_bg.jpg) center center no-repeat;
	padding: 0;
}
#section7,
#section16 {
	background: url(../img/luftbild_bg.jpg) center center no-repeat;
	padding: 0;
}
#section8,
#section17 {
	background: url(../img/stadtplan_bg.jpg) center center no-repeat;
	padding: 0;
}
#section10 {
	background: #e0ded6 /*url(../img/gb_illu_bg.svg) center center no-repeat*/;
	padding: 0;
}
#section11 {
	background: url(../img/koe45_bg.jpg) center center no-repeat;
	padding: 0;
}
#section12 {
	background: url(../img/koe_47_bg.jpg) center center no-repeat;
	padding: 0;
}
#section13 {
	background: url(../img/koe_49-51_bg.jpg) center center no-repeat;
	padding: 0;
}
#section14 {
	background: url(../img/koe_53-55_bg.jpg) center center no-repeat;
	padding: 0;
}
#section15 {
	background: url(../img/bs_30-34_bg.jpg) center center no-repeat;
	padding: 0;
}

#section1,
#section2,
#section3,
#section4,
#section5,
#section6,
#section7,
#section8,
#section9,
#section10,
#section11,
#section12,
#section13,
#section14,
#section15,
#section16,
#section17,
#section18 {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#core_svg_box {
	display: block;
	width: 80%;
	position: absolute;
	top: 110px;
	left: 10px;
	background: url('../img/geb_illu.svg') no-repeat left top;
	z-index: 1;
}

/* Footer */

.footer {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 350px;
	background: #e0ded6;
	padding: 0;
}
.col-1-3 {
	display: block;
	float: left;
	width: 25%;
	margin-right: 20px;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 3em;
}
.footer_lg {
	display: block;
	width: 120px;
	margin-top: 25px;
	margin-bottom: 15px;
}
.footer_txt {
	margin-top: 75px;
}
.footer a {
	color: #484848;
	text-decoration: underline;
}
.footer a:hover {
	text-decoration: none;
}
.impressum-txt {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 45px 25px;
	clear: both;
	margin-bottom: 50px;
}

/* Comming SOON PAGE */

#sectionI {
	background: url(../img/bg2.jpg) center center no-repeat;
	padding: 30% 0 0 0;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.box {
	display: block;
	position: absolute;
	width: 160px;
	right: 3.5rem;
	top: 2.2rem;
	padding: 20px 15px 5px;
	border-top: 4px solid #ffffff;
	border-bottom: 4px solid #ffffff;
}

.box p {
	font: 14px/18px "Helvetica Neue", Arial, sans-serif;
	padding-top: 5px;
	color: #fff;
}
.logo {
	display: block;
	width: 180px;
	position: absolute;
	top: 2.2rem;
	left: 2.5rem;
}
.impressum {
	width: 100%;
	height: 320px;
	padding: 25px;
	background: #fff;
}
.imp {
	font-weight: bold;
}

#containerx {
	display: block;
	width: 86%;
	margin: 0 auto;
	height: 65%;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 7%;
}

@media handheld, only screen and (max-width: 568px) {
	.box {
		display: block;
		position: absolute;
		width: 145px;
		left: 2rem;
		top: 300px;
		padding: 20px 15px 5px;
	}
	.logo {
		display: block;
		position: absolute;
		top: 2rem;
		left: 2rem;
	}
	
}
@media handheld, only screen and (max-width: 330px) {
	.box {
		display: block;
		position: absolute;
		width: 145px;
		left: 1.5rem;
		top: 230px;
		padding: 20px 15px 5px;
	}
	.logo {
		display: block;
		width: 150px;
		position: absolute;
		top: 1.5rem;
		left: 1.5rem;
	}
	
}


/* INDEX PAGE END */


/* navigation */

#menu {
	position: fixed;
	z-index: 100;
}

/* pop up */


.info_modal {
	display: none;
	max-width: 300px;
	margin: 0 auto;
	padding: 10px 5px;
}
.info_modal ul {
	margin: 0 0 0 15px;
	padding: 0;
}
.info_modal li {
	list-style: square; /* disc */
	margin-bottom: 5px;
	margin-top: 5px;
	color: #a39d84;
}

.info_modal_special {
	display: none;
	width: 80vw;
	height: auto;
}
.info_modal_special img {
	width: 100%;
}
.modal_logo {
	display: block;
	width: 130px;
	margin: -10px auto 10px;
}

#images_gallery {
	position: absolute;
	left: 25px;
	bottom: 25px;
}

#images_gallery img {
	width: 150px;
}
#images_gallery img:hover {
	opacity: .8;
}
.button {
	text-decoration: underline;
	padding-bottom: 5px;
	color: #a39d84;
	text-transform: uppercase;
}
.button_lage {
	display: block;
	width: 150px;
	height: 108px;
	background-color: #a39d84;
	position: absolute;
	left: 25px;
	bottom: 25px;
}
.button:hover {
	text-decoration: none;
}

.gold_line {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #a39d84;
}
.gl_top {
	margin-top: 0;
	margin-bottom: 20px;
}
.gl_bottom {
	margin-top: 50px;
	margin-bottom: 5px;
}
.modal_head {
	text-transform: uppercase;
	font-size: 1.05em;
	color: #a39d84;
	padding: 0 0 35px;
}
.key_facts {
	text-transform: uppercase;
	font-size: 1.05em;
	color: #a39d84;
	padding: 15px 0;
}


/* @group TEST */

/*----- Tabs -----*/
.tabs {
   /* width:100%;*/
   height: 95%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
 		margin: 0;
    }
 	.tab-links {
 		padding: 0;
 		margin: 0 0 10px;
 	}
 	.tabs ul {
 		padding: 0;
 	}
 	
    .tab-links li {
        margin:0px 5px;
        float: right;
        list-style:none;
	}
 
        .tab-links a {
        	font-size: 1.3em;
            padding: 3px 10px;
            display:inline-block;
            transition:all linear 0.15s;
            color: #484848;
			border: 1px solid #484848;
		    border-radius: 3px;
		    
		    transition: all .3s;
		}
 
        .tab-links a:hover {
        	color: #a39d84;
            border: 1px solid #a39d84;
        }
 
    li.active a, li.active a:hover {
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }


/* @end */

/* Media Queries */


@media handheld, only screen and (max-width: 600px) {
	#header {
		height: 35px;
		z-index: 1200
	}
	
	/* start */
	
	#containerx {
		display: block;
		width: 86%;
		margin: 0 auto;
		height: 75%;
		text-align: center;
		position: absolute;
		top: 50px;
		left: 7%;
	}
	
	#home {
		display: block;
		background-color: #ffffff;	
		height: 35px;
		width: 100%;
		z-index: 1200
	}

	#mobilex {
		display: block;
	}
	
	.home_logo {
		position: relative;
		top: 3vh;
		display: block;
		width: auto;
		height: auto;
		max-width: 100px;
		height: 15vh;
		text-align: center;
		margin: 0 auto;
		z-index: 100;
	}
	.dev_link,
	.core_link {
		font-size: 0.75em;
		letter-spacing: 1px;
		text-transform: uppercase;
	}
	.dev_link a,
	.core_link a {
		text-decoration:none;
		color: #a39d84;
		display: block;
		width: 90px;
		border: 1px solid #a39d84;
		border-radius: 5px;
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
		
		transition: .3s; 
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-o-transition: .3s;
	
	}
	.dev_link a:hover,
	.core_link a:hover {
		color: #484848;
		border: 1px solid #484848;
	}
	.dev_link,
	.core_link {
		position: absolute;
		top: 5vh;
	}
	.dev_link {
		left: 20%;
		margin-left: -48px;
	}
	.core_link {
		right: 20%;
		margin-right: -48px;
	}
	
	/* start end */
	
	.nav_logo {
		position: absolute;
		top: 10px;
		left: 50%;
		width: 80px;
		margin-left: -40px;	
	}
	#fullpage {
		display: none;
	}
	#fullpage_mobile {
		display: block;
		visibility: visible;
		margin-top: 50%;
		padding: 0 15px;
	}
	#mobile {
		display: block;
		margin-top: 50px;
	}
	.mobile_section {
		display: block;
		float: none;
		clear: both;
		width: 100%;
	}
	.mobsec1 {
		height: 630px;
	}
	.mobsec2 {
		height: 680px;
	}
	.mobsec3 {
		height: 570px;
	}
	.mobsec4 {
		height: 760px;
	}
	.mobsec5 {
		height: 850px;
	}
	.mobsec6 {
		height: 550px;
	}
	.mobsec7 {
		height: 900px;
	}
	.mobsec8 {
		height: 630px;
	}
	.mobsec9 {
		height: 500px;
	}
	.mobsec10 {
		height: 700px;
	}
	.mobsec11 {
		height: 630px;
	}
	.mobsec12 {
		height: 580px;
	}
	.mobsec13 {
		height: 620px;
	}
	.mobsec14 {
		height: 660px;
	}
	
	.submenu {
		display: none;
	}
	#mainmenu {
		font-size: 75%;
	}
	#mainmenu li {
		display: block;
		width: 90px;
		height: 25px;
		border: 1px solid #a39d84;
		border-radius: 5px;
		text-align: center;
	}
	#mainmenu li a,
	#mainmenu li.active a,
	#menu li a,
	#menu li.active a{
		padding: 5px;
		display:block;
	}
	.pos_left {
		position: absolute;
		top: 15px;
		left: 25%;
		margin-left: -70px;
	}
	.pos_right {
		position: absolute;
		top: 15px;
		right: 25%;
		margin-right: -70px;
	}
	.footer_mobile {
		display: block;
		width: 100%;
/*		height: 100%;*/
		min-height: 900px;
		background: #e0ded6;
		padding: 0;
		margin: 0;
	}
	.col-1-3 {
		display: block;
		float: left;
		width: 95%;
		margin: 0;
		padding: 15px 0 0 15px;
	}
	.footer_txt {
		width: 95%;
		margin-top: 35px;
	}
	
	/* gallery */
	
	#images_gallery {
		position: relative;
		left: 0;
		top: 10px;
		bottom: 0;
		z-index: 10000;
	}
	
	#images_gallery img {
		width: 92px;
		padding-right: 2px;
	}
	#images_gallery img:hover {
		opacity: .8;
	}
	
}

@media handheld, only screen and (max-width: 340px) {
	#fullpage_mobile {
		display: block;
		visibility: visible;
		margin-top: 45%;
	}
}



@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}




/* TITELANI test */

/*#containerx {
	display: block;
	width: 86%;
	margin: 0 auto;
	height: 65%;
	text-align: center;
	position: absolute;
	top: 50px;
	left: 7%;
}*/

/* Tabelle */

table {
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
	color: #a39d84;
}

tr {
	padding-top: 2px;
	padding-bottom: 2px;
	border-bottom: 1px solid #a39d84;
}

.icon {
	display: block;
	width: 25px;
	height: 25px;
}

#meta{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:30px;
	background-color:#fff;
}
#meta .nav{
	display:block;
	text-align:center;
}

#meta .nav a{
	display:inline-block;
	color:#a39d84;
	text-decoration:none;
	margin: 8px;
}
#meta .nav a:hover,
#meta .nav a.active{
	color:#000;
}


.ds_imp{
	margin:0 auto 0 auto;
	width:30%;
}
@media handheld, only screen and (max-width: 600px) {
.ds_imp{
	margin-top:120px;
	width:80%;
}	
}
.ds_imp a{
	color:#000;
}

.dgnb {
	display: block;
	margin-top: 12px;
	width: 65%;
}
.dgnb img {
	
}