/**
 * @license
 * MyFonts Webfont Build ID 3579467, 2018-05-14T10:38:25-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: UniversLT-Condensed by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/57-condensed/
 * Copyright:  Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted (c) 1987, 1991, 1994, 1998, 2004 Linotype Library GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype Libra
 * Licensed pageviews: 250,000
 * 
 * Webfont: CentGothWGL by Monotype 
 * URL: https://www.myfonts.com/fonts/mti/century-gothic/wgl-regular/
 * Copyright: Copyright The Monotype Corporation. All rights reserved. "Century Gothic" is a trademark of The Monotype Corporation in the United States and/or other countries.
 * Licensed pageviews: 20
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3579467
 * 
 * © 2018 MyFonts Inc
*/

  
/* Schriften
-----------------------------------------------------------*/
@font-face {font-family: 'UniversLT-Condensed';src: url('webfonts/369E4B_0_0.eot');src: url('webfonts/369E4B_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/369E4B_0_0.woff2') format('woff2'),url('webfonts/369E4B_0_0.woff') format('woff'),url('webfonts/369E4B_0_0.ttf') format('truetype');}
@font-face {font-family: 'CentGothWGL';src: url('webfonts/369E4B_1_0.eot');src: url('webfonts/369E4B_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/369E4B_1_0.woff2') format('woff2'),url('webfonts/369E4B_1_0.woff') format('woff'),url('webfonts/369E4B_1_0.ttf') format('truetype');}


button{box-shadow: 0px 0px 0px transparent;border: 0px solid transparent;text-shadow: 0px 0px 0px transparent;cursor: pointer;-webkit-appearance: none;}button:hover{box-shadow: 0px 0px 0px transparent;border: 0px solid transparent;text-shadow: 0px 0px 0px transparent;}button:active{outline: none;border: none;}button:focus{outline: 0;}

/* Grundgerüst
-----------------------------------------------------------*/
:root {
   --app-height: 100%;
}

body {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-family: "UniversLT-Condensed", "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #495f7f;
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	background: #e0e0e0;
}

.frame {
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
	text-align: center;
}

#home {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: url(../_img/lino-christoph-2.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}

#intro, #team, #adresse, #projekte {
	position: relative;
	padding-bottom: 10em;
}

#projekte {
	min-height: 100vh;
	height: 100dvh;
}

section {
	clear: both;
}

.bg-black {
	background: #000;
}


/* Allgemeine Formatierungen
-----------------------------------------------------------*/
img {
	max-width: 100%;
}

a {
	color: #7593B8;
	text-decoration: none;
	border-bottom: 1px solid #7593B8;
}

h1 {
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 1.1em;
	padding: 2em 0 1em 0;
}

.portfolio h1 {
	padding: 0 0 5em 0;
}

h2 {
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 1.1em;
	padding: 1em 0 1em 0;
}

h3 {
	padding: 0 0 1.2em 0;
	line-height: 1.2em;
}

p {
	line-height: 1.2em;
	padding: 0 0 0.6em 0;
	text-align: center;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}

.centerP {
	text-align: center;
}

p.singleabstandP {
	padding: 0 0 1.2em 0;
}

p.abstandP {
	padding: 0 0 2.4em 0;
}

.telLink {
	white-space: nowrap;
	color: inherit;
	border-bottom: none;
}


/* Header/Home
-----------------------------------------------------------*/
.zweGiele, .archDesign, .logo, .partner, .kuchenLogo, .aktuell, .insta-block, .home-nav {
	display: block;
	width: 15%;
	position: absolute;
	//max-width: 250px;
}

.zweGiele {
	left: 6%;
	top: 2.1em;
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #fff;
	font-size: 1.6vw;
	width: auto;
}

.archDesign {
	right: 6%;
	top: 2.1em;
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #fff;
	font-size: 1.6vw;
	text-align: right;
	line-height: 1.2em;
	width: auto;
}

.home-nav {
	right: 0;
	bottom: 0;
	padding-bottom: 6em;
	font-size: 1.6vw;
	text-align: right;
	line-height: 1.2em;
	width: auto;
	min-width: 20%;
	background: url('../_img/service-hand-home.png') no-repeat right bottom;
	background-size: 90% auto;
}

.home-nav li {
	margin-right: 30%;
}

.home-nav li:not(:last-child) {
	margin-bottom: 0.75em;
}

.home-nav a {
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #fff;
	border: none;
	font-size: 0.6em;
	line-height: 1.1em;
	text-align: center;
	display: block;
}



.logo {
	left: 6%;
	bottom: 0;
}

.partner {
	right: 6%;
}

.insta-block {
	right: 6%;
	top: 40%;
	transform: translateY(-50%);
}

.instaLogo {
	width: 50px;
	height: auto;
	display: block;
	border: none;
	float: right;
}

.kuchenLogo {
	margin-top: 1.5em;
	width: 25%;
	max-width: 400px;
	display: block;
	right: 6%;
	background: url(../_img/kuchenLogo.svg) no-repeat left top;
	background-size: 100% auto;
	text-indent: -99999em;
	border: none;
	height: 0;
	padding-bottom: 5%;
}

.kuchenLogo:hover {
	background: url(../_img/kuchenLogoA.svg) no-repeat left top;
	background-size: 100% auto;
}

.aktuell {
	right: 6%;
}

.labLogo {
	margin-top: 1.5em;
	width: 10%;
	max-width: 160px;
	display: block;
	margin-right: 4%;
	border: none;
	float: right;
}

.hftLogo {
	margin-top: 1.5em;
	width: 14.95%;
	max-width: 239px;
	display: block;
	margin-right: 6%;
	border: none;
	float: right;
}

.labLogo:hover {
	background: url(../_img/labLogoA.svg) no-repeat center center;
	background-size: 100% 100%;
}

.labLogo:hover img {
	opacity: 0;
}

.hftLogo:hover {
	background: url(../_img/hftLogoA.svg) no-repeat center center;
	background-size: 100% 100%;
}

.hftLogo:hover img {
	opacity: 0;
}

.thun-block {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 30%;
}

.thun-block a {
	border: none;
}






/* .labLogo img, .hftLogo img {
	--shadow-blur: 0px;
	--shadow-color: rgba(0,0,0,0);
	filter: drop-shadow(0 0 var(--shadow-blur) var(--shadow-color));
} */


/* .test {
	position: absolute;
	left: 20%;
	top: 20%;
	width: 10%;
	  --shadow-blur: 0px;
  --shadow-color: rgba(0,0,0,0);
  width: 300px;
  filter: drop-shadow(0px 0px var(--shadow-blur) var(--shadow-color));
 }

.test:hover {

} */

.partner-block {
	position: absolute;
	width: 100%;
	top: 30%;
}

.aktuelle-block {
	position: absolute;
	width: 100%;
	top: 55%;
}

/* Spezifische Formatierungen
-----------------------------------------------------------*/
.geoDreieck, .geoLink {
	width: 100px;
	height: 50px;
	background: url(../_img/geo-dreieck.png) no-repeat center center;
	background-size: 100% 100%;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: none;
}

.icon, .iconBig {
	width: 200px;
	margin: 0 auto;
	padding-top: 2.6em;
}

.iconBig {
	width: 220px;
}

.geoLink {
	background: url(../_img/geo-dreieck-gray.png) no-repeat center center;
	background-size: 100% 100%;
	bottom: 5em;
}

#impressumdetail {
	display: none;
}

.portfolio {
	margin: 0 auto;
	text-align: center;
	padding: 0 20px;
	margin-bottom: 5em;
}

.portfolio img {
	margin: 0 0 20px 0;
	max-width: 100%;
}

.box3 {
	max-width: 800px;
	margin: 0 auto;

}

.box3 > div {
	width: 33.333333%;
	float: left;
}

.box3 > div a {
	border-bottom: none;
	display: block;
}

.box3 > div a span {
	border-bottom: 1px solid #7593B8;
	text-transform: uppercase;
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
}

.box3 > div a span:before {
	display: block;
	clear: both;
	height: 1em;
	content: " ";
}

.google-maps {
	position: relative;
	padding-bottom: 60%; /* This is the aspect ratio */
	height: 0;
	overflow: hidden;
	margin: 0 0 1.3846153846em 0;
}

.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/* portfolioNav
-----------------------------------------------------------*/
.portfolioNav {
	margin: 2em 0 4em 0;
}

.portfolioNav li {
	float: left;
	width: 33.33333333%;
	text-align: center;
	background: url(../_img/geo-dreieck-gray-up.png) no-repeat center top;
	background-size: 100px auto;
	padding: 80px 0 0 0;
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
}



/* Thun und Bern
-----------------------------------------------------------*/

/* Thun und Bern Start
----------------------------------*/
.et-voila {
	position: absolute;
	width: 250px;
	top: 50%;
	transform: translateY(-50%);	
}

.virtuelle-tour {
	position: absolute;
	width: 240px;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);	
	background: url(../_img/arrow-next-slider-black.png) no-repeat right center;
	background-size: 50px 101px;
	line-height: 101px;
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
	border: none;
	color: #000;
	text-transform: uppercase;
	z-index: 10;
}

.mail-fuehrung {
	position: absolute;
	bottom: 1em;
	left: 320px;
	right: 320px;
	padding: 0 100px;
}

.mail-fuehrung a {
	color: #ff3d2e;
	border: none;
	font-family: "CentGothWGL", "Lucida Grande", Lucida, Verdana, sans-serif;
}

/* Thun und Bern Slider
----------------------------------*/
.slide, body.tourseite-index {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	height: var(--app-height);
	position: relative;
}

.slide-img, .tourseite-index-wrapper {
	top: 0;
	bottom: 100px;
	position: absolute;
	width: 100%;
	overflow: hidden;
}

.slide-img img {
	max-width: none;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* Thun und Bern Video
----------------------------------*/
.slide-img video {
	width: 100%    !important;
	height: 100%   !important;
	-o-object-fit: cover;
	object-fit: cover;
}

.video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	width: 140px;
	display: block;
	z-index: 5;
	border: none;
}

.tourseite-footer .show-info {
	position: absolute;
	bottom: 0;
	left: 200px;
	width: 170px;
	height: 91px;
	background-image: url("../_img/thun/service-hand.png"),  url("../_img/thun/service-hand-text.png");
	background-size: 100% 100%,  100% 100%;
	background-repeat: no-repeat,  no-repeat;
	background-position: center center,  center center;
	border: none;
}

/* Thun und Bern Slider Info
----------------------------------*/
.slide-info {
 	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.info-textbubble {
	position: absolute;
	top: 100px;
	right: 320px;
	left: 320px;
	height: calc(100vh - 300px);
	background: rgba(224, 224, 224, 0.95);
	color: #000;
}

.info-textbubble h2 {
	padding-top: 0;
}

.info-textbubble:after {
	position: absolute;
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 100px 100px 0 0px;
	border-color: rgba(224, 224, 224, 0.95) transparent transparent transparent;
	bottom: -100px;
	left: 0;
}

.slide-info .text-wrapper {
	position: absolute;
	top: 110px;
	right: 60px;
	bottom: 110px;
	left: 110px;
	padding-right: 50px;
	overflow-y: auto;
}

/* Thun und Bern Footer
----------------------------------*/
.tourseite-footer {
	position: absolute;
	height: 100px;
	bottom: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}

.tourseite-footer .logo-hfs, .tourseite-footer .logo-lab, .tourseite-footer .logo-lavie {
	position: absolute;
	width: auto;
	height: 60px;
	right: 210px;
	top: 15px;
}

.tourseite-footer .logo-hfs {
	right: 375px;
}

.tourseite-footer .show-info.active {
	background-image: url("../_img/thun/service-hand.png"),  url("../_img/thun/service-hand-x-2.png");
	background-size: 100% 100%,  100% 100%;
	background-repeat: no-repeat,  no-repeat;
	background-position: center center,  center center;
}

/* Thun und Bern Scrollbalken
----------------------------------*/
.slide-info ::-webkit-scrollbar {
	width: 18px;
}
 
/* Track */
.slide-info ::-webkit-scrollbar-track {
	border-radius: 0px;
	border: none;
}
 
/* Handle */
.slide-info ::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: #000;
}

.slide-info ::-webkit-scrollbar-thumb:window-inactive {
	border-radius: 0px;
	background-color: transparent;
}

.slide-info ::-webkit-scrollbar-track {
	background: transparent;
}

/* Thun und Bern Slider Arrow
----------------------------------*/
.slick-arrow {
	position: absolute;
	left: 50px;
	top: 50%;
	z-index: 10;
	background: url(../_img/arrow-prev-slider.png) no-repeat center center;
	background-size: 100% 100%;
	width: 50px;
	height: 101px;
	overflow: hidden;
	text-indent: -9999em;
	transform: translateY(-100%);
}

.slick-next {
	background: url(../_img/arrow-next-slider.png) no-repeat center center;
	background-size: 100% 100%;
	left: auto;
	right: 50px;
}

.slick-arrow:hover {
	background: url(../_img/arrow-prev-slider-red-2.png) no-repeat center center;
	background-size: 100% 100%;
}

.slick-next:hover {
	background: url(../_img/arrow-next-slider-red-2.png) no-repeat center center;
	background-size: 100% 100%;
}

/* Thun und Bern Index
----------------------------------*/
.tourseite-index .slide-info {
	display: block;
}

.tourseite-index .info-textbubble {
	background: #000;
	color: #fff;
}

.tourseite-index .slide-info ::-webkit-scrollbar-thumb {
	background-color: #d9d9d9;
}

.tourseite-index .tourseite-footer .show-info {
	background-image: url("../_img/thun/service-hand.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.tourseite-index .info-textbubble:after {
	border-color: #000 transparent transparent transparent;
}


/*-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
MediaQueries
-------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------*/
@media screen and (max-width: 1450px) {


.home-nav {
	/* right: 0;
	bottom: 0;
	padding-bottom: 6em;
	font-size: 1.6vw;
	text-align: right;
	line-height: 1.2em;
	width: auto;
	min-width: 20%;
	background: url('../_img/service-hand-home.png') no-repeat right bottom;
	background-size: 90% auto; */
	background-size: 120% auto;
	background-position: right -6vw bottom -3vw;
}

.home-nav li {
	margin-right: 5%;
}

.home-nav li:not(:last-child) {
	margin-bottom: 1em;
}

.home-nav a {
	font-size: 1em;
}


/* Thun und Bern Start
----------------------------------*/
.et-voila {
	position: absolute;
	width: 130px;
}

.virtuelle-tour {
	width: 220px;
	top: 0px;
	right: auto;
	left: 50%;
	transform: translate(-50%, 0);	
	background-size: 30px 60px;
	line-height: 101px;
}

.mail-fuehrung {
	left: 225px;
	right: 225px;
	padding: 0 50px;
	bottom: 0;
	text-align: left;
}

.info-textbubble {
	right: 160px;
	left: 160px;
}

.tourseite-footer .show-info {
	left: 40px;
}

.tourseite-footer .logo-hfs, .tourseite-footer .logo-lab {
	right: 60px;
}

.tourseite-footer .logo-hfs {
	right: 225px;
}

.slide-info .text-wrapper {
	top: 55px;
	right: 30px;
	bottom: 55px;
	left: 55px;
	padding-right: 25px;
	overflow-y: auto;
}





} /* Ende 1450 */



@media screen and (max-width: 1000px) {

/* Thun und Bern Start
----------------------------------*/
.et-voila {
	display: none;
}

.virtuelle-tour {
	width: auto;
	padding-right: 50px;
	top: auto;
	bottom: 100px;
	right: 50px;
	left: auto;
	background-size: 30px 60px;
	line-height: 60px;
	transform: translate(0);	
}

.mail-fuehrung {
	display: none;
}

.slide-img, .tourseite-index-wrapper {
	bottom: 75px;
}

.info-textbubble {
	right: 50px;
	left: 50px;
}

.tourseite-footer {
	height: 75px;
}

.tourseite-footer .show-info {
	left: -30px;
	width: 120px;
	height: 64px;
}

.tourseite-footer .logo-hfs, .tourseite-footer .logo-lab {
	right: 30px;
	height: 40px;
	top: 12px;
}

.tourseite-footer .logo-hfs {
	right: 125px;
}

.info-textbubble {
	position: absolute;
	top: 25px;
	right: 50px;
	left: 50px;
	height: calc(100vh - 275px);
}

.info-textbubble:after {
	border-width: 50px 50px 0 0px;
	bottom: -50px;
}

.slide-info .text-wrapper {
	top: 55px;
	right: 30px;
	bottom: 55px;
	left: 55px;
	padding-right: 25px;
}

/* .slick-prev */
.slick-arrow {
	left: 10px;
	width: 25px;
	height: 50px;
}

.slick-next {
	left: auto;
	right: 10px;
}

.slide-info ::-webkit-scrollbar {
	width: 12px;
}

.video-play-button {
	width: 90px;
}

} /* Ende 1000 */





@media screen and (max-width: 770px) {

body {
	font-size: 18px;
}

#home {
	background: url(../_img/lino-christoph-mobile.jpg) no-repeat center top;
	background-size: cover;
}


/* Thun und Bern
-----------------------------------------------------------*/
.virtuelle-tour {
	width: auto;
	padding-right: 50px;
	top: auto;
	bottom: 50px;
	right: 40px;
	left: auto;
	background-size: 30px 60px;
	line-height: 60px;
}

/* .slide-img {
	bottom: 75px;
} */

.info-textbubble {
	position: absolute;
	top: 25px;
	right: 40px;
	left: 40px;
}

.slide-info .text-wrapper {
	top: 25px;
	right: 10px;
	bottom: 20px;
	left: 20px;
	padding-right: 10px;
}

.slick-arrow {
	left: 5px;
	width: 20px;
	height: 40px;
}

.slick-next {
	left: auto;
	right: 5px;
}

.video-play-button {
	width: 70px;
}

body.tourseite-index .logo-hfs, body.tourseite-index .logo-lab {
	display: none;
}


/* Header
-----------------------------------------------------------*/
.home-nav {
	/* right: 6%;
	bottom: 2.1em; */
	//font-size: 2.5vw;
	/* text-align: right;
	line-height: 1.2em;
	width: auto; */
}

.zweGiele, .archDesign, .logo, .partner, .aktuell {
	width: 25%;
}

.zweGiele {
	left: 5%;
	top: 4%;
	font-size: 2.5vw;
}

.archDesign {
	right: 5%;
	top: 4%;
	font-size: 2.5vw;
}

.logo {
	right: 5%;
	bottom: 0;
}

.kuchenLogo {
	width: 40%;
	padding-bottom: 8%;
}

.labLogo {
	width: 16%;
}

.hftLogo {
	width: 23.92%;
}

.geoDreieck, .geoLink {
	width: 60px;
	height: 30px;
}

.partner-block {
	position: absolute;
	width: 100%;
	top: 42.5%;
}

.aktuelle-block {
	position: absolute;
	width: 100%;
	top: 62.5%;
}

.box3 > div {
	width: 100%;
	float: none;
}


/* portfolioNav
-----------------------------------------------------------*/
.portfolioNav {
	margin: 2em 0 2em 0;;
}

.portfolioNav li {
	background-size: 60px auto;
	padding: 40px 0 0 0;
	font-size: 3vw;
}

.portfolio {
	padding: 0 10px;
}

.portfolio img {
	margin: 0 0 10px 0;
} 


} /* Ende 770 */



@media screen and (max-width: 770px) and (max-height: 600px) and (orientation: landscape) {

body {
	font-size: 18px;
}

#home {
	background: url(../_img/lino-christoph-mobile-landscape.jpg) no-repeat center center;
	background-size: cover;
}

/* Header
-----------------------------------------------------------*/
.zweGiele, .archDesign, .logo, .partner {
	width: 20%;
}

.partner {
	top: 50%;
}

.kuchenLogo {
	top: 40%;
	width: 35%;
	padding-bottom: 7%;
}

} /* Ende 750 / 600 */



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

/* Header
-----------------------------------------------------------*/
.zweGiele, .archDesign, .logo, .partner, .aktuell {
	width: 28%;
}

.zweGiele {
	left: 5%;
	top: 4%;
}

.archDesign {
	right: 5%;
	top: 4%;
}

.logo {
	right: 5%;
	bottom: 0;
}

.kuchenLogo {
	width: 40%;
	padding-bottom: 8%;
}

.labLogo {
	width: 20%;
	padding-bottom: 12%;
}

.geoDreieck, .geoLink {
	width: 60px;
	height: 30px;
}

.partner-block {
	position: absolute;
	width: 100%;
	top: 45%;
}

.aktuelle-block {
	position: absolute;
	width: 100%;
	top: 65%;
}


}



/* Clearfix
-----------------------------------------------------------*/
.group:after {
  content: "";
  display: table;
  clear: both;
 }