/* WEB FONT */

@charset "UTF-8";
/* CSS Document */


@font-face 
{		
	font-family: 'AvenirNext';
	src: url('/fonts/AvenirNext-Regular.eot') format('eot');
	src: url('/fonts/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
		url('/fonts/AvenirNext-Regular.woff2') format('woff2'),
		url('/fonts/AvenirNext-Regular.woff') format('woff'),
		url('/fonts/AvenirNext-Regular.ttf') format('truetype'),
		url('/fonts/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
	font-display: swap;
	font-weight: normal;
	font-style: normal;
 	line-height: 1.0em;
}

@font-face 
{		
	font-family: 'AgencyFB';
	src: url('/fonts/AgencyFB-Bold.eot') format('eot');
	src: url('/fonts/AgencyFB-Bold.eot?#iefix') format('embedded-opentype'),
		url('/fonts/AgencyFB-Bold.woff2') format('woff2'),
		url('/fonts/AgencyFB-Bold.woff') format('woff'),
		url('/fonts/AgencyFB-Bold.ttf') format('truetype'),
		url('/fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg');
	font-display: swap;		
	font-weight: normal;
	font-style: normal;
 	line-height: 1.0em;
}

			
/* RESET */
* {
	margin: 						0;
  	padding: 						0;
  	border: 						0;
}


/* BASIC */

html, body 
{
	background:						#000;	
    margin: 						0;
    padding: 						0;
    width: 							100vw;
    height: 						100vh; /* Dynamic Viewport Height */
/*    display: 						flex;
    justify-content: 				center;/**/
	scrollbar-width: 				none;  /* Für Firefox */
	-webkit-scrollbar: 				none;
	overscroll-behavior: 			none;
	overflow-X:						hidden;/**/
}


/* Notch-Bereich aktivieren */
body 
{
	position:						relative;
    padding-top: 					env(safe-area-inset-top);
    padding-bottom: 				env(safe-area-inset-bottom);
    padding-left: 					env(safe-area-inset-left);
    padding-right: 					env(safe-area-inset-right);
	padding-top: 					var(--ion-safe-area-top, 0);
	margin: 						0;	
	background:						#0f0f0f;
	
	overflow-x: 					hidden;
/*	overflow-y: hidden; /**/
	-webkit-overflow-scrolling: 	touch; /* Sanftes Scrollen auf iOS */
	overflow-y: 					scroll;
}

body ::-webkit-scrollbar 
{
    display: 						none;  /* Für Chrome, Safari, Edge */
	background: 					transparent;
}

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

 @media screen and (min-width: 1400px) 
{
body
{
    background: 					#000;
}
}

h1 
{
/*	font:	 						normal 5.0em "AvenirNext";/**/
	font:							bold 2.0em "AvenirNext";
	line-height: 					0.9em;
	color: 							#fff;
	text-decoration: 				none;
	text-transform: 				uppercase;
	text-align: 					left;
	margin-top: 					0px;
	padding: 						0px;
	padding-bottom: 				0px;
   -moz-hyphens: 					manual;
   -o-hyphens: 						manual;
   -webkit-hyphens: 				manual;
   -ms-hyphens: 					manual;
   hyphens: 						manual;
}

 @media screen and (min-width: 800px) and (min-height: 440px)
{
h1 
{
	font:							bold 4.0em "AvenirNext";
	line-height: 					0.9em;
}
}

h2
{
	font: 							normal 1.8em "AvenirNext";
	line-height: 					1.2em;
	color: 							#fff; 	
  	text-decoration:				none;
	text-transform:					uppercase;
	text-align:						left;	
}

h3
{
	font: 							normal 1.4em "AvenirNext";
	line-height: 					0.9em;
	color: 							#fff; 	
  	text-decoration:				none;
	text-transform:					uppercase;
	text-align:						left;	
}

h4
{
	font: 							normal 1.0em "AvenirNext";
	line-height: 					0.9em;
	color: 							#fff; 	
  	text-decoration:				none;
	text-transform:					uppercase;
	text-align:						left;	
}

 @media screen and (min-width: 800px)
{
h4
{
	font: 							normal 1.4em "AvenirNext";
	line-height: 					0.9em;
}	
}

h5
{
	font: 							normal 1.4em "AvenirNext";
	line-height: 					0.9em;
	color: 							#fff; 	
  	text-decoration:				none;
	text-transform:					uppercase;
	text-align:						left;	
}


a, p {
  	font: 							normal 1.2em "AvenirNext";
  	color:							#706c6c; 
  	text-decoration: 				none;
	text-align: 					left;	
	margin-top:						0px;
}

.text_color_cyan
{
  	color:							#00baff;	
}

.highlight
{
	color: 			#00AEEF;
	font-family: "AvenirNext";
}

/* BASIC STRUCTURE */

header
{
	background-color:				#0f0f0f; /*0d0d0d; /**/
	position:						relative;
	float:							left;
	width:							100vw;
	height:							100%; 
	background-image:				url(/images/background/cio_dark.jpg);
	background-size:				cover;
	background-position:			center;/**/
}

main
{
	background-color:				#0f0f0f; /*0d0d0d; /**/
	position:						relative;
	float:							left;	
	width:							100vw;
	height:							auto;
	margin-left:					auto;
	margin-right:					auto;	
}

footer
{
	background-color:				#0f0f0f; /*0d0d0d; /**/
	position:						relative;
	float:							left;	
	width:							100vw;
	height:							auto; 
	margin-left:					auto;
	margin-right:					auto;	
}

 @media screen and (min-width: 1400px)
{

body
{
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;
	width:							100%;
	height:							auto;
}

header
{
	background-color:				#0f0f0f; /*0d0d0d; /**/
	width:							1000px;
	height:							550px;
	margin-left:					auto;
	margin-right:					auto;	
/*	background-image:				url(/images/background/berlonia_coast_home.png);/**/
	background-size:				cover;/**/
}

main
{
	background-color:				#0f0f0f; /*0d0d0d; /**/
	width:							1000px;
	height:							auto;
	margin-left:					auto;
	margin-right:					auto;	
}

footer
{
	background-color:				##0f0f0f; /*0d0d0d; /**/
	width:							1000px;
	height:							auto;
	margin-left:					auto;
	margin-right:					auto;	
}
}



/* LAYOUTING */

nav
{
/*	background-color:				#ddd; /*0d0d0d; /**/
	position:						relative;
	width:							100%;
	height:							70px;	
}

.header_pic_cio
{
/*	background-image:				url(/images/background/cio_dark.jpg);
	background-size:				cover;	/**/
}

.header_pic_coast
{
/*	background-image:				url(/images/background/coast_dark.jpg);
	background-size:				cover;/**/
}



.header_title_01, .header_title_02, .header_title_03, .header_title_04, .header_title_05, .header_title_06, .header_title_07 
{
	position:						absolute;
	width:							auto;
	height:							auto;	
	bottom:							48%;
	left:							40px;
/*	background:						#bbb;/**/	
}


.header_knx
{
	background-image:				url(/images/logo/knx_white.png);
	background-size:				cover;
	position:						absolute;
	width:							50px;
	height:							50px;	
	top:							10px; 
	right:							30px;
	opacity: 						50%;
/*	background:						#bbb;/**/	
}

/*
section
{
	width: 							100%;
	position: 						relative;
}

article
{
  	position: 						relative;
	margin-left:					auto;
	margin-right:					auto;	
}
/**/
div
{
	-webkit-box-shadow: 		 	none;
	-moz-box-shadow: 				none;
	box-shadow: 					none;
}


/* --- HEADER LOGO --- */

.header_logo 
{
	display: 				block;
	background-image: 		url('/images/logo/berlonia_logo_w.svg');
    background-repeat: 		no-repeat;
	background-size: 		100% 30px;		
	margin-top:				30px;
	margin-left:			20px;
	height:					30px;
	width:					120px;	
	position: 				relative;
	float:					left;
	opacity:				1.0;
}

 @media screen and (min-width: 800px)
{

.header_logo 
{
	margin-left:			40px;
	height:					30px;
	width:					140px;	
}

}

/* --------- SECTION - TITLES --------- /**/

.title
{
	position:				relative;
	height:					80px;
	padding:				100px 0px 10px 0px;
}

.title_box
{
    display: 				flex;
    flex-direction: 		row;
	height:					auto;
	padding-left:			20px;	
}

.bluebar
{
	position:				flex;	
	height:					80px;
	width:					5px;
	background:				#00baff;	
}

.titletext
{
	height:					auto;
	width:					auto;	
	padding-left:			15px;
}



/* --------- SLIDER HEADER PICTURE --------- /**/

.impressum
{
	height:							auto;
	display: 						flex;
	flex-direction:					column-reverse;
	justify-content: 				left;	
}

/* --------- SECTION - INTEGRATION --------- /**/

.integrator
{
	height:							540px;
	display: 						flex;
	flex-direction:					column-reverse;
	justify-content: 				left;	
}

.integrator_box_left
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;
}

.integrator_box_right
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;	
}


 @media screen and (min-width: 1000px)
{
	
.integrator
{
	height:							300px;
	display: 						flex;
	flex-direction:					row;
	justify-content: 				left;	
}	
	
	
.integrator_box_left
{
	height:							100%;
	width:							50%;
	display: 						flex;
	flex-direction:					row;
	justify-content: 				center;
}

.integrator_box_right
{
	height:							100%;
	width:							50%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;	
}

.impressum_box_right
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;	
}

}



.integrator_text
{
    display: flex;
    flex-direction: column;
    font-family: AgentFB, sans-serif;
	font-size: 16px;
    color: #aaa;
/*  text-transform:					 uppercase; /**/
	padding-top: 						25px;
	padding-right: 						100px;
	margin-left:						80px;
}


.banner {
    position: relative;
    width: 400px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
	margin:					auto;
}

/* Inhalt */
.content 
{
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Große blaue Zahl */
.number {
    font-size: 100px;
    font-weight: bold;
    color: #00AEEF;
    font-family: AgencyFB;
}

/* Text rechts daneben */
.text {
    display: flex;
    flex-direction: column;
    font-family: AgentFB, sans-serif;
    color: #aaa;
    font-size: 14px;
    text-transform: uppercase;
}

/* Ecken */
.corner 
{
    position: 				absolute;
    width: 					20px;
    height: 				20px;
    border: 				7px solid white;
}

.top-left 
{
    top: 					5px;
    left: 					5px;
    border-right: 			none;
    border-bottom: 			none;
}

.top-right 
{
    top: 					5px;
    right: 					5px;
    border-left: 			none;
    border-bottom: 			none;
}

.bottom-left 
{
    bottom: 				5px;
    left: 					5px;
    border-right: 			none;
    border-top:				none;
}

.bottom-right 
{
    bottom: 				5px;
    right: 					5px;
    border-left: 			none;
    border-top: 			none;
}

/* --------- SECTION - INTEGRATION --------- /**/

.int_container {
	padding: 					0px 20px 30px 25px;
    border-left: 				5px solid #00baff; /* Blaue Linie */
	margin-top:					30px;
	margin-left:				20px;
}

 @media screen and (min-width: 1000px)
{
	
.int_container 
{
	margin-left:				50px;
}	

}




/* --------- SECTION - PROFESSION --------- /**/


.profession 
{
	flex-direction:				row;
	position:					relative;	
	display: 						flex; /* Flexbox für die gleichmäßige Verteilung der Articles */
	justify-content: 				center; /* Platz zwischen den Articles */
	max-width: 					1000px; /* Maximalbreite der Section */
	 width: 						100%; /* Volle Breite der Seite */
	height: 						420px; /* Höhe der Section */
	margin: 						0 auto; /* Zentriert die Section */
}

/* Einstellungen für die einzelnen Articles */
.profession_box {
	flex: 						1; /* Alle Articles sind gleich breit */
	height: 						100%; /* Höhe auf 100% setzen */
	background-size: 				cover; /* Hintergrundbild deckt das gesamte Article ab */
	background-position: 			center; /* Hintergrundbild ist zentriert */
	border-radius: 				0px; /* Optional: abgerundete Ecken */
}

.smart
{
	background-image: 			url('/images/background/smart.jpg');
    background-repeat: 			no-repeat;
	background-size: 			100% auto;	
	background-position:		60% 50%
}


.light
{
	background-image: 			url('/images/background/light.jpg');
    background-repeat: 			no-repeat;
	background-size: 			100% auto;	
	background-position:		60% 50%	
}


.media
{
	background-image: 			url('/images/background/media.jpg');
    background-repeat: 			no-repeat;
	background-size: 			100% auto;
	background-position:		60% 50%		
}


@media screen and (max-height: 720px){
.profession 
{
	flex-direction:				row;
	height: 						420px; /* Höhe der Section */
}	
	
.smart
{
	background-size: 			100% auto;	
	background-position:		60% 50%
}


.light
{
	background-size: 			100% auto;	
	background-position:		60% 50%	
}


.media
{
	background-size: 			100% auto;
	background-position:		60% 50%		
}

}

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

.profession 
{
  flex-direction:				column;
  height: 						1400px; /* Höhe der Section */
  width:						90%;
  max-width:					300px;
}

.profession_box {
  height: 						100%; /* Höhe auf 100% setzen */
}
	
	
.smart
{
	background-size: 			auto 100%;	
	background-position:		60% 50%
}


.light
{
	background-size: 			auto 100%;	
	background-position:		60% 50%	
}


.media
{
	background-size: 			auto 100%;
	background-position:		60% 50%		
}
}



.title_overlay {
    position: 					absolute;
    left: 						0;
    width: 						70%;
    height: 					100px;
    background-color: 			#000	;
    display: 					flex;
    flex-direction: 			row;
    justify-content: 			flex-start;
    align-items: 				center;
    opacity: 					0.8;
    transition: 				all 0.3s ease-in-out;
}

.overlay_smart
{
	position:					relative;	
    top: 						67%;
}

.overlay_light
{
	position:					relative;	
    top: 						67%;
}

.overlay_media
{
	position:					relative;
    top: 						67%;
}

.pro_title {
    color: 						#00baff;
  	font: 						normal 1.6em "AvenirNext";
	line-height: 				0.9em;	
    transition: 				transform 0.3s ease-in-out;
	padding-left:				20px;
}





/* --------- SECTION - SERVICES --------- /**/



.sector-container 
{
    display: 				flex;
    justify-content: 		space-evenly;
    align-items: 			center;
	flex-direction:			column;
    height: 				auto;
}

 @media screen and (min-width: 720px){

.sector-container 
{
	flex-direction:			row;
}

}
.sector-item {
    text-align: center;
    margin: 0 20px;
}

.sector-item h2 {
    font-size: 24px;
    margin-top: 10px;
	text-align:				center;
}

.sector-item p {
    font-size: 14px;
    margin-top: 5px;
	margin-bottom: 20px;
    opacity: 0.8;
}

/* Styling der Pfeile als Hintergrundbilder */
.arrow {
    width: 					100px;
    height: 				100px;
    background-size: 		cover;
    background-position: 	center;
    background-repeat: 		no-repeat;
    margin: 				0 auto;
    border-radius: 			50%;
}

/* Jeweils das richtige Hintergrundbild für jeden Pfeil setzen */
.arrow.right {
    background-image: url('/images/icons/icon_arrow_1.png'); /* Ersetze mit deinem Dateinamen */
}

.arrow.down {
    background-image: url('/images/icons/icon_arrow_2.png'); /* Ersetze mit deinem Dateinamen */
}

.arrow.up {
    background-image: url('/images/icons/icon_arrow_3.png'); /* Ersetze mit deinem Dateinamen */
}



/* --------- SECTION - ABOUT ME --------- /**/

.profile-section {
    display: flex;
	flex-direction: column;
    align-items: center;
    max-width: 1000px;
    width: 100%;
}

 @media screen and (min-width: 800px)
{
.profile-section {
	flex-direction: row;
}	
}

.profile-image {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-image img {
    width: 80%;
    max-width: 200px;
    height: auto;
    border-radius: 50%;
    border: 0px solid #fff;
}

.social-icons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.social-icons img {
    width: 36px;
    height: 36px;
	padding:4px;
}

.profile-text {
    width: 80%;
    padding: 10%;
}

 @media screen and (min-width: 800px)
{
.profile-text {
    width: 50%;
    padding: 10%;
}
}

.profile-text h2 {
    color: ##706c6c;
    margin-bottom: 10px;
}

.profile-text p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.profile-text a {
    color: #00aaff;
    text-decoration: none;
/*    font-weight: bold;/**/
}

.profile-text a:hover {
    text-decoration: underline;
}





/* --------- SECTION - EUROPE --------- /**/

.europe
{
	position:				relative;
	height:					400px;
	width:					100%;	
}

 @media screen and (min-width: 1400px)
{
.europe
{
	height:					780px;	
}
}
.europe_box
{
	background-image: 		url('/images/content/europe.png');
    background-repeat: 		no-repeat;
	background-size: 		cover;
	background-size:		contain;
	background-position:	center;
	height:					100%;
	width:					100%;
}

.europe_text
{
	position:						absolute;
	width:							auto;
	height:							auto;	
	top:							120px; 
	right:							40px;
/*	background:						#bbb;/**/	
}

.europe_text h3
{
	font: 							normal 1.4em "AvenirNext";
	line-height: 					1.0em;
	color: 							#fff; 	
  	text-decoration:				none;
	text-transform:					uppercase;
	text-align:						right;	
}

/* --------- SECTION - DESIGN --------- /**/

.design
{
	position:				relative;
	height:					200px;
	width:					100%;	
}

 @media screen and (min-width: 1400px)
{
.design
{
	position:				relative;
	height:					400px;	
}
}

.design_box
{
	background-image: 		url('/images/content/techdesign.png');
    background-repeat: 		no-repeat;
	background-size:		contain;
	background-position:	center;
	height:					100%;
	width:					100%;
}

.design_text
{
	position: 				absolute;
    bottom: 				0px;
    right: 					0px;
	height:					auto;
	width:					160px;	
}

@media screen and (min-width: 800px)
{
.design_text
{
	position: 				absolute;
    top: 					50%;
    right: 					10%;
    transform: 				translateY(-50%);
	height:					60px;
	width:					160px;	
}	
}



/* --------- SECTION - FOOTER --------- /**/


.footer-content {
    max-width: 				600px;
	padding-top:			150px;
	padding-left:			20px;
	padding-bottom:			70px;	
}

.footer-bottom-links
{
	margin-bottom: 			20px;
}

.footer-bottom-copyright
{
	margin-bottom: 			50px;
}

footer h2 {
    color: #706c6c;
    font-size: 16px;
    font-weight: bold;
}

footer p {
    margin: 0px 0;
    font-size: 14px;
}

footer a {
    color: #706c6c;
    text-decoration: none;
    font-size: 14px;
}

footer a:hover {
    color: #00baff;
}

.footer-contact {
    margin-bottom: 10px;
}

.footer-contact a {
    display: block;
    color: #706c6c;
}

.footer-contact a:hover {
    color: #00baff;
}

.footer-links {
    position: absolute;
    right: 20px;
    top: 50px;
    text-align: right;
	padding-top:	150px;
}

.footer-links a {
    display: block;
    margin-bottom: 5px;
	text-align:	right;
}

.footer-social {
    position: absolute;
    right: 20px;
    top: 0px;
	padding-top:	150px;
}

.footer-social a {
    display: inline-block;
    margin: 0 7px;
	text-align: right;
}

.footer-social img {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1);
}

.footer-social a:hover img {
    filter: brightness(0) invert(0.6);
}

.footer-bottom {
    font-size: 				12px;
    color: 					#050505;
    margin-top: 			20px;
	padding-left:			20px;
	padding-bottom:			70px;		
}

.footer-bottom p {
    font-size: 				12px;
    color: 					#595959;
}



/* --------- SECTION - FOOTER --------- /**/


.smartbus
{
	display:						flex;
	position:					relative;
	height:							auto; 
	width:							100%;
/*	background:						url(/images/background/smartbuilding_01s.png) no-repeat left top,
									url(/images/background/smartbuilding_02s.png) no-repeat right top;
	background: 					#fff;		/**/
}	

@media screen and (min-width: 720px)
{
.smartbus
{
	height:							auto;
	width:							100%;
/*	background:						url(/images/background/smartbuilding_03s.png) no-repeat center top;
	background-color: 				#fff; /**/
}	
}

.smartbus_light
{
	position:						relative;
	float:							left;	
	height:							auto;
	width:							100%;
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/
}

.smartbus_light img
{
	width:							150px;
}

.smartbus_light div
{
	width:							150px;	
	margin-left:					auto;
	margin-right:					auto;
}

@media screen and (min-width: 580px)
{
.smartbus_light img
{
	width:							200px;
}

.smartbus_light div
{
	width:							200px;	
}
}




.smartbus_komfort
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-top:						0px;
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/
}

.smartbus_komfort div
{
	width:							60%;
	margin-left:					20%;	
	margin-right:					20%;
}

.smartbus_komfort h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					center;
	padding:						0;
	padding-top:					40px;
	padding-bottom:					10px;							
}

.smartbus_komfort p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					center;	
	padding-bottom:					30px;
}



@media screen and (min-width: 720px)
{
.smartbus_komfort
{	
	position:						relative;
	width:							100%;	
}

.smartbus_komfort div
{
	width:							100%;
	max-width:						300px;
	margin-left:					8%;	
	margin-right:					0%;
}

.smartbus_komfort h5
{
	font: 							normal 1.1em "AvenirNext";
	text-align: 					left;
}

.smartbus_komfort p
{
	font: 							normal 0.9em "AvenirNext";	
	text-align: 					left;	
}
}


@media screen and (min-width: 920px)
{
	
.smartbus_komfort div
{
	float:							right;
	margin-right:					55%;	
}

.smartbus_komfort h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					left;
	padding:						0;
	padding-top:					40px;
	padding-bottom:					10px;							
}

.smartbus_komfort p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					left;	
	padding-bottom:					40px;
}	
}







.smartbus_amp
{	
	position:						relative;
	float:							left;
	width:							100%;
	margin-left:					0px;	
	margin-top:						0px;

}

.smartbus_amp div
{
	width:							260px;
	margin-left:					auto;	
	margin-right:					auto;			
}

.smartbus_amp img
{
	width:							260px;
	margin-top:						0px;	
}


@media screen and (min-width: 720px)
{
.smartbus_amp div
{
	width:							260px;
	margin-left:					auto;	
	margin-right:					5%;		
}

.smartbus_amp img
{
	width:							260px;
	padding:						0px;
	margin:							0px;	
}		
}

@media screen and (min-width: 920px)
{
.smartbus_amp div
{
	margin-right:					12%;		
}		
}






.smartbus_switch
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-left:					0;	

}

.smartbus_switch div
{
	width:							120px;
	margin-left:					auto;	
	margin-right:					auto;
	margin-top:						20px; 
	margin-bottom:					30px;				
}

.smartbus_switch img
{
	width:							120px;
	margin-top:						0px;	
}

@media screen and (min-width: 320px)
{
.smartbus_switch div
{
	width:							140px;
	margin-left:					auto;	
	margin-right:					auto;
	margin-top:						20px; 			
}

.smartbus_switch img
{
	width:							140px;
	margin-top:						0px;	
}

}

@media screen and (min-width: 720px)
{
.smartbus_switch div
{
	width:							140px;
	margin-left:					27%;	
	margin-right:					auto;
	margin-top:						0px;			
}

.smartbus_switch img
{
	width:							140px;
	margin-top:						0px;	
}
	
}




.smartbus_flexibel
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-top:						30px;	
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/
}

.smartbus_flexibel div
{
	width:							60%;
	margin-left:					20%;	
	margin-right:					20%;
	margin-top:						0px;			
}

.smartbus_flexibel h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					center;
	padding:						0;
	padding-top:					40px;
	padding-bottom:					10px;							
}

.smartbus_flexibel p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					center;	
	padding-bottom:					30px;
}



@media screen and (min-width: 720px)
{
.smartbus_flexibel
{	
	position:						relative;
	width:							100%;	
}

.smartbus_flexibel div
{
	width:							50%;
	max-width:						300px;
	margin-left:					55%;	
	margin-right:					0%;
}

.smartbus_flexibel h5
{
	font: 							normal 1.1em "AvenirNext";
	text-align: 					left;
	padding:						0px;	
	padding-top:					80px;
}

.smartbus_flexibel p
{
	font: 							normal 0.9em "AvenirNext";	
	text-align: 					left;	
}
}


@media screen and (min-width: 920px)
{
	
.smartbus_flexibel div
{
	margin-left:					55%;
	margin-top:						30px;	
}

.smartbus_flexibel h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					left;
	padding:						0;
	padding-top:					40px;
	padding-bottom:					10px;							
}

.smartbus_flexibel p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					left;	
	padding-bottom:					40px;
}	
}




.smartbus_effizienz
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-top:						0px;
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/
}

.smartbus_effizienz div
{
	width:							60%;
	margin-left:					20%;	
	margin-right:					20%;
}

.smartbus_effizienz h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					center;
	padding:						0;
	padding-top:					30px;
	padding-bottom:					10px;							
}

.smartbus_effizienz p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					center;	
	padding-bottom:					30px;
}



@media screen and (min-width: 720px)
{
.smartbus_effizienz
{	
	position:						relative;
	width:							100%;
	margin-top:						40px;		
}

.smartbus_effizienz div
{
	width:							100%;
	max-width:						300px;
	margin-left:					5%;	
	margin-right:					0%;
}

.smartbus_effizienz h5
{
	font: 							normal 1.1em "AvenirNext";
	text-align: 					left;
}

.smartbus_effizienz p
{
	font: 							normal 0.9em "AvenirNext";	
	text-align: 					left;	
}
}


@media screen and (min-width: 920px)
{
	
.smartbus_effizienz div
{
	float:							right;
	margin-right:					60%;	
}

.smartbus_effizienz h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					left;
	padding:						0;
	padding-top:					0px;
	padding-bottom:					10px;							
}

.smartbus_effizienz p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					left;	
	padding-bottom:					0px;
}	
}





.smartbus_auro
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-left:					0;	

}

.smartbus_auro div
{
	width:							140px;
	margin-left:					auto;	
	margin-right:					auto;
	margin-top:						20px; 			
}

.smartbus_auro img
{
	width:							140px;
	margin-top:						0px;	
}


@media screen and (min-width: 720px)
{
.smartbus_auro div
{
	width:							140px;
	float:							right;
	margin-left:					auto;	
	margin-right:					22%;
	margin-top:						-120px;			
}

.smartbus_auro img
{
	width:							140px;
	margin-top:						0px;	
}
	
}





.smartbus_eve
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-left:					0;	

}

.smartbus_eve div
{
	width:							140px;
	margin-left:					auto;	
	margin-right:					auto;
	margin-top:						40px; 			
}

.smartbus_eve img
{
	width:							140px;
	margin-top:						0px;	
}


@media screen and (min-width: 720px)
{
.smartbus_eve
{
	position:						relative;
	float:							left;		
	width:							50%;
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/	
}	
	
	
.smartbus_eve div
{
	width:							140px;
	float:							right;
	padding-right:					30%;	
	margin-top:						170px;			
}

.smartbus_eve img
{
	width:							140px;
	margin-top:						0px;	
}
	
}




.smartbus_sicherheit
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-top:						0px;
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/
}

.smartbus_sicherheit div
{
	width:							60%;
	margin-left:					20%;	
	margin-right:					20%;
}

.smartbus_sicherheit h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					center;
	padding:						0;
	padding-top:					50px;
	padding-bottom:					10px;							
}

.smartbus_sicherheit p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					center;	
	padding-bottom:					30px;
}



@media screen and (min-width: 720px)
{
.smartbus_sicherheit
{	
	position:						relative;
	width:							50%;
	margin-top:						100px;		
}

.smartbus_sicherheit div
{
	width:							100%;
	max-width:						300px;
	margin-left:					5%;	
	margin-right:					0%;
}

.smartbus_sicherheit h5
{
	font: 							normal 1.1em "AvenirNext";
	text-align: 					left;
}

.smartbus_sicherheit p
{
	font: 							normal 0.9em "AvenirNext";	
	text-align: 					left;	
}
}


@media screen and (min-width: 920px)
{
	
.smartbus_sicherheit div
{
	float:							right;
	margin-right:					35%;
}

.smartbus_sicherheit h5
{
	font: 							normal 1.2em "AvenirNext";
	text-align: 					left;
	padding:						0;
	padding-top:					40px;
	padding-bottom:					10px;							
}

.smartbus_sicherheit p
{
	font: 							normal 1.0em "AvenirNext";	
	text-align: 					left;	
	padding-bottom:					0px;
}	
}





.smartbus_2n
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-left:					0;	
	margin-top:						30px; 
}

.smartbus_2n div
{
	width:							100px;
	margin-left:					auto;	
	margin-right:					auto;			
}

.smartbus_2n img
{
	width:							100px;
	margin-top:						10px;	
	margin-bottom: 					-10px;	
}


@media screen and (min-width: 720px)
{
.smartbus_2n
{
	position:						relative;
	float:							left;		
	width:							100%;
	margin-top:						180px;		
/*	border: 						1px solid rgba(0,0,0,1.0);		/**/	
}	
	
	
.smartbus_2n div
{
	width:							300px;	
	margin-left:					auto;
	margin-right:					auto;	
}

.smartbus_2n img
{
	width:							120px;
	margin-left:					90px;
	margin-bottom: 					-10px;		
}
	
}


/* --------- SECTION - BENEFIT --------- /**/

.objects
{
    display: 				flex;
    justify-content: 		space-evenly;
    align-items: 			center;
	flex-direction:			column;
    height: 				auto;	
}

@media screen and (min-width: 1250px)
{
.objects
{
	padding:							80px 0 0px 0;		
}
}

.objects_box
{
	position:						relative;
	padding:						0;
	margin:							0;
	top:							0;
	bottom:							0;
	height:							px;
	width:							100%;		
}

.objects_pic
{
	position:						relative;
	float:							left;
	padding:						0;
	margin:							0;	
	height:							auto;
	width:							50%;		
}

.objects_pic img
{
	position:						relative;
	float:							left;
	height:							auto;
	width:							100%;
	padding:						0;
	margin:							0;	
}

.hide_pic
{
	display:						display;
}

@media screen and (min-width: 720px)
{
.objects_pic
{
	width:							33.3%;		
}

.hide_pic
{
	display:						display;
}
}

@media screen and (min-width: 1000px)
{
.objects_pic
{
	width:							33.3%;		
}
}




/* --------- SECTION - EXPERTISE & CONTACT --------- /**/

.expertise
{
	position:					relative;
/*	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;/**/
/*	height:							580px;/**/
	width:							100%;	
}

.contact
{
	position:					relative;
/*	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;/**/
/*	height:							780px; /**/
	width:							100%;	
}

.expertise_text p
.contact_text p
{
	font: 							bold 1.4em "AvenirNext";	
	text-align: 					center;
}

.expertise_icon
{
	background-image: 		url('/images/icons/icon_download.png');
    background-repeat: 		no-repeat;
	background-size:		contain;
	background-position:	center;
	height:					120px;
	width:					100%;
}

.contact_picture
{
	background-image: 		url('/images/background/coast_dark.jpg');
    background-repeat: 		no-repeat;
	background-size:		cover;
	background-position:	center;
    padding-top: 			56.25%;
    position: 				relative;
	width:					100%;
}

.contact_quote
{
	position:						absolute;
	width:							auto;
	height:							auto;	
	top:							0px;
	right:							0px;
	left:							0px;
	padding-left:					50px;
	padding-right:					50px;
	padding-top:						60px;
}

.contact_quote h2
{
	font: 							bold 1.4em "AvenirNext";	
  	color:							#fff;/*#706c6c; /**/
  	text-decoration: 				none;
	text-transform: 				none;	
	background-color: 				rgba(0, 0, 0, 0.5);	
	padding:						20px;	
}

@media screen and (min-width: 720px)
{
.contact_quote h2
{
	font: 							bold italic 1.6em "AvenirNext";	
  	color:							#fff;/*#706c6c; /**/
  	text-decoration: 				none;
	text-transform: 				none;	
	background-color: 				rgba(0, 0, 0, 0.7);	
	padding:						20px;	
}
}
.align-right
{
	text-align: 					right;
}

@media screen and (min-width: 720px)
{
.expertise_icon
{
	height:					150px;
}

.contact_picture	
{
	height:					200px;
}
}
.expertise_text,
.projects_text,
.contact_text
{
	height:					auto;
	width:					auto;
	padding-left:					10%;
	padding-right:					10%;
}

.expertise_text
{
	margin-top:				50px;	
}

.projects_text
{
	margin-top:				50px;	
}

.contact_text
{
	margin-top:				240px;	
}

@media screen and (min-width: 720px)
{
.contact_text
{
	margin-top:				100px;	
}
}
.expertise_text p,
.projects_text p,
.contact_text p
{
	font: 							bold 1.2em "AvenirNext";	
	text-align: 					center;
}

.expertise_button,
.projects_button, 
.contact_button
{
	position:				relative;
	height:					240px;
	width:					100%;
	left:					0;
	right:					0;	
}


.dnbtn,
.pfbtn,
.ctbtn 
{
	  border: 					3px solid #00baff;
	  border-radius: 			20px;
	  position: 				absolute;
	  top: 						50%;
	  left: 					50%;
	  transform: 				translate(-50%, -50%);
	  padding: 					25px 0 0 0;
	  width: 					200px;
	  height: 					25px;
	  text-decoration: 			none;
	  transition: 				.3s;
}


.dnbtn:after,
.pfbtn:after,
.ctbtn:after
{
	font: 						bold 1.0em "AvenirNext";
  	color: 						#fff;
  	position: 					absolute;
}
.dnbtn:after
{
  	content: 					'BOOKLET';
  	transform: 					translate(55%, -45%);	
}

.pfbtn:after 
{
  content: 						'PROJECTS';
  transform: 					translate(50%, -45%);
}

.ctbtn:after 
{
  content: 						'CONTACT';
  transform: 					translate(55%, -45%);
}


.dnbtn:hover:after,
.pfbtn:hover:after,
.ctbtn:hover:after
 {
	font: 						bold 1.0em "AvenirNext";;
  	color: 						#fff;
  	position: 					absolute;
}

.dnbtn:hover:after
 {
  	content: 					'DOWNLOAD';
  	transform: 					translate(33%, -45%);
}

.ctbtn:hover:after
 {
  	content: 					'NOW';
  	transform: 					translate(150%, -45%);
}

.pfbtn:hover:after
 {
  	content: 					'LOOK';
  	transform: 					translate(130%, -45%);
}


@media screen and (min-width: 720px)
{
	
.dnbtn,
.pfbtn,
.ctbtn 
{
  	transform: 					translate(-50%, -50%);
  	width: 						300px;
  	height: 					36px;
}

.dnbtn:after,
.pfbtn:after,
.ctbtn:after
{
	font: 						bold 1.2em "AvenirNext";
  	color: 						#fff;
  	position: 					absolute;
}
.dnbtn:after
{
  	content: 					'BOOKLET';
  	transform: 					translate(85%, -35%);	
}

.pfbtn:after 
{
  content: 						'PROJECTS';
  transform: 					translate(75%, -35%);
}

.ctbtn:after 
{
  content: 						'CONTACT';
  transform: 					translate(80%, -35%);
}


.dnbtn:hover:after,
.pfbtn:hover:after,
.ctbtn:hover:after
 {
	font: 						bold 1.2em "AvenirNext";;
  	color: 						#fff;
  	position: 					absolute;
}

.dnbtn:hover:after
 {
  	content: 					'DOWNLOAD';
  	transform: 					translate(55%, -35%);
}

.pfbtn:hover:after
 {
  	content: 					'LOOK';
  	transform: 					translate(170%, -35%);
}

.ctbtn:hover:after
 {
  	content: 					'NOW';
  	transform: 					translate(190%, -35%);
}

}


/* --------- SECTION - FAQ --------- /**/

.faq
{
	height:							540px;
	display: 						flex;
	flex-direction:					column-reverse;
	justify-content: 				left;	
}

.faq_box_left
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;
}

.faq_box_right
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;	
}


 @media screen and (min-width: 1000px)
{
	
.faq
{
	height:							300px;
	display: 						flex;
	flex-direction:					row;
	justify-content: 				left;	
}	
	
	
.faq_box_left
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					row;
	justify-content: 				center;
}

.faq_box_right
{
	height:							100%;
	width:							100%;
	display: 						flex;
	flex-direction:					column;
	justify-content: 				center;	
}
}



.faq_text
{
    display: flex;
    flex-direction: column;
    font-family: AgentFB, sans-serif;
	font-size: 16px;
    color: #aaa;
/*  text-transform:					 uppercase; /**/
	padding-top: 						25px;
	padding-right: 						100px;
	margin-left:						80px;
}

.faq_title
{
    display: flex;
    flex-direction: column;
    font-family: AgentFB, sans-serif;
	font-size: 20px;
    color: #fff;
}


/*
.dnbtn:before {
  font-family: 'ionicons';
  content: '\f2dd';
  font-size: 26px;
  color: #0ff;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: .3s;
}

.dnbtn:hover:before {
  display: none;
}

.dnbtn:hover:after {
  font-family: Prompt;
  content: 'DOWNLOAD';
  color: #0ff;
  font-size: 18px;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: .3s;
  animation: fadein .3s;
}

.dnbtn:hover {
  width: 160px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}/**/