/**
 * @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 {
	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;
	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;
}

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 {
	display: block;
	width: 15%;
	position: absolute;
	max-width: 250px;
}

.zweGiele {
	left: 6%;
	top: 2.5em;
}

.archDesign {
	right: 6%;
	top: 2.5em;
}

.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
-----------------------------------------------------------*/

/* Thun 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 Slider
----------------------------------*/
.slide, body.thun-index {
	width: 100%;
	height: 100vh;
    height: var(--app-height);
	position: relative;
}

.slide-img, .thun-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 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;
}

.thun-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 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 Footer
----------------------------------*/
.thun-footer {
	position: absolute;
	height: 100px;
	bottom: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}

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

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

.thun-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 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;
/* 	height: 125px; */
/* 	background-image: url("../_img/thun/scroll-stift.png");
	background-size: auto 90%;
	background-repeat: no-repeat;
	background-position: center top 5px; */
}

.slide-info ::-webkit-scrollbar-thumb:window-inactive {
	border-radius: 0px;
	background-color: transparent;
/* 	background-image: url("../_img/thun/scroll-stift.png");
	background-size: 50% auto;
	background-repeat: no-repeat;
	background-position: center top 5px; */
}

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

/* Thun 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 Index
----------------------------------*/
.thun-index .slide-info {
	display: block;
}

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

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

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

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


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

/* Thun 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;
}

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

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

.thun-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 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, .thun-index-wrapper {
	bottom: 75px;
}

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

.thun-footer {
	height: 75px;
}

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

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

.thun-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
-----------------------------------------------------------*/
.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.thun-index .logo-hfs, body.thun-index .logo-lab {
	display: none;
}


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

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

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

.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;
 }