/* =============================================================================
   Webfonts
   ========================================================================== */

/**
 * @license
 * MyFonts Webfont Build ID 3832644, 2019-11-01T17:56:00-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: Qualion-Regular by ROHH
 * URL: https://www.myfonts.com/fonts/rohh/qualion/regular/
 * 
 * Webfont: Qualion-ExtraBold by ROHH
 * URL: https://www.myfonts.com/fonts/rohh/qualion/extra-bold-regular/
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3832644
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright © 2018 by Roch Modrzejewski. All rights reserved.
 * 
 * © 2019 MyFonts Inc
*/


@font-face {
  	font-family: 'Qualion-Regular';
	src: url('fonts/Qualion-Regular.eot');
	src: url('fonts/Qualion-Regular.eot?#iefix') format('embedded-opentype'),url('fonts/Qualion-Regular.woff2') format('woff2'),
		 url('fonts/Qualion-Regular.woff') format('woff'),
		 url('fonts/Qualion-Regular.ttf') format('truetype');
	font-weight: lighter;
	font-style: lighter;
	font-display: swap;
}
@font-face {
  	font-family: 'Qualion-ExtraBold';
	src: url('fonts/Qualion-ExtraBold.eot');
	src: url('fonts/Qualion-ExtraBold.eot?#iefix') format('embedded-opentype'),url('fonts/Qualion-ExtraBold.woff2') format('woff2'),
		 url('fonts/Qualion-ExtraBold.woff') format('woff'),
		 url('fonts/Qualion-ExtraBold.ttf') format('truetype');
	font-weight: lighter;
	font-style: lighter;
	font-display: swap;
}


/* =============================================================================
   Base
   ========================================================================== */

html { 
	height: 					100%;
	margin:						0;	
	margin-top:					0;
	padding:					0; 
	list-style:					none; 
	/*cursor: 					url(../images/wief_cursor.png), auto;*/
	
	/* Prevent font scaling in landscape while allowing user zoom */
	font-size: 					100%; 
	-webkit-text-size-adjust: 	100%; 	
	-ms-text-size-adjust: 		100%; 
}
body{
	height: 					100%;
	width:						100%;
	position: 					relative;
	margin: 					0; 
	padding:					0;
	background-color:			#FFF;
	overflow-x:					hidden;
}

/* User - Farbe Textselektion */
::-moz-selection				{ text-shadow:none; background:	#00AFA5; color: #FFF; }
::selection						{ text-shadow:none; background:	#00AFA5; color: #FFF; }
img::selection					{ background: #00AFA5; }
img::-moz-selection				{ background: #00AFA5; }
body							{ webkit-tap-highlight-color: #00AFA5; }

/* Elemente im Div vertikal zentieren */
.v-align {
	position:			relative;
	top: 				50%;
	-webkit-transform: 	translateY(-50%);
	-ms-transform: 		translateY(-50%);
	transform:			translateY(-50%);
}

/* padding, margins, borderlines in Elementbreite */
div { box-sizing: border-box; }




/* =============================================================================
   Colors
   ========================================================================== */
   
:root {
	
	/* No Support: IE 11, Edge < 15, Safari < 9.1,  */
	--color1: 	#28357E;		/* Cobalt Blue */
	--color2: 	#00AFA5;		/* Mars Green */
	--color3: 	#FECD1A;		/* Yellow */
	--color4: 	#232323;		/* Black 98 */
	--color5: 	#EDEDED;		/* Black 10 */
	--color6: 	#888888;		/* Black 60 */
	

	
	/*
	color1: 	#EF4023;		/* Ziegelrot *
	color2: 	#FFFFFF;		/* Weiss 
	color3: 	#29363F;		/* Antrazit 
	color3-1: 	#989C9F;		/* 50% Antrazit 
	color3-2: 	#EAEBEB;		/* 10% Antrazit 
	*/
}




/* =============================================================================
   Typography
   ========================================================================== */
   
/* GENERAL */
body, 
button, 
input, 
select, 
textarea, 
a 			{ font-family: 'Qualion-Regular', Arial, sans-serif; color: var(--color1); font-weight: normal; font-style: normal;}

/* HEADLINES */
h1, h2, h3, h4, h5 	{ font-family: 'Qualion-ExtraBold', Arial, sans-serif; padding: 0; margin: 0; font-weight: normal; font-style: normal; }


/* TEXTE */
p					{ margin: 0; padding: 0 }
.ch_intro 			{ font-family: 'Qualion-Regular', Arial, sans-serif; }									/* Intro */
/*.ch_intro_title 	{ font-family: 'LotaGrotesqueAlt1-Bold', Arial, sans-serif; padding: 0; margin: 0; }	Intro Title */
.ch_text			{  }																					/* Fließtext */
.ch_text_small		{  }																					/* Marginaltexte */
.ch_rubric_title	{ font-family: 'Georgia'; color: var(--color1); text-transform: uppercase; }			/* Rubrikentitel */


/* DROPSHADOW */
.shadow			{ text-shadow: 20px 1px 80px rgba(0,0,0,0.5); }
.shadow-white	{ text-shadow: 20px 1px 80px #FFF; }



/* =============================================================================
   Links
   ========================================================================== */

/* BASIS 
a,a:hover,
a:focus,
a:active	{ outline:0; }*/
a			{ text-decoration: underline; outline:0; }
a:hover		{ color: var(--color2); }
a:focus		{  }
a:active	{  }

/* IMAGE */
a img 		{ border:0; }

/* NOTES */
.link_small			{ color: var(--color1); text-decoration: none;}
.link_small:hover	{ color: var(--color1); text-decoration: underline; }
.link_small:visited { color: var(--color1); }
.link_small:active	{ color: var(--color1); }
.link_small.active 	{ font-family: 'Qualion-ExtraBold', Arial, sans-serif; }

/* NAVIGATION */
.linknav			{ color: var(--color1); text-decoration: none; }
.linknav:hover		{ color: var(--color1); text-decoration: underline; }
.linknav:visited 	{ color: var(--color1); }
.linknav:active		{ color: var(--color1); text-decoration: underline; }
.linknav.active 	{ text-decoration: underline !important; }


/* FONT HIGHLIGHT */
/*.active		{ color: #EF4023; }					 						Ziegelrot */
.invers		{ color: #FFF !important; }										/* Weiss */
.grey		{ color: var(--color6); }										/* Black 60 */
.regular	{ font-family: 'Qualion-Regular', Arial, sans-serif; }			/* Regular */
strong		{ font-family: 'Qualion-ExtraBold', Arial, sans-serif; }		/* Bold (Tiny MCE) */

/* .positiv	{ color: #29363F; }					Antrazit */
.underlined	{ text-decoration: underline; }		/* Unterstichen */





/* =============================================================================
   Icons
   ========================================================================== */
   
i{
	position: 			relative;
	display: 			inline-block;
	width: 				45px;
	height: 			45px;
	margin-right:		10px;
	margin-bottom:		10px;
	
	mask-size: 			100%;
	-webkit-mask-size:	100%;
	
	background-color: 	var(--color1);
	
	transition: 		0.4s;
}
i.icon.invers { 
	background-color: 	#FFF;
} 
i.icon.last { 
	margin-right:		0;
} 
i.icon:hover { 
	background-color: var(--color6); 
}
i.icon.linkedin { 
    -webkit-mask-image: url(../images/icon_linkedin.svg);
    mask-image: 		url(../images/icon_linkedin.svg);
}  
i.icon.mail { 
    -webkit-mask-image: url(../images/icon_mail.svg);
    mask-image: 		url(../images/icon_mail.svg);
}  
i.icon.facebook { 
    -webkit-mask-image: url(../images/icon_facebook.svg);
    mask-image: 		url(../images/icon_facebook.svg);
}  
i.icon.instagram { 
    -webkit-mask-image: url(../images/icon_instagram.svg);
    mask-image: 		url(../images/icon_instagram.svg);
}  
i.icon.vienna { 
    -webkit-mask-image: url(../images/city_icons_vienna.svg);
    mask-image: 		url(../images/city_icons_vienna.svg);
} 
i.icon.lissabon { 
    -webkit-mask-image: url(../images/city_icons_lissabon.svg);
    mask-image: 		url(../images/city_icons_lissabon.svg);
} 
i.icon.rio { 
    -webkit-mask-image: url(../images/city_icons_rio.svg);
    mask-image: 		url(../images/city_icons_rio.svg);
} 
i.icon.sao-paulo { 
    -webkit-mask-image: url(../images/city_icons_sao-paulo.svg);
    mask-image: 		url(../images/city_icons_sao-paulo.svg);
} 



/* =============================================================================
   Image
   ========================================================================== */
   
.img-centered { margin:0 auto }




/* =============================================================================
   Lists
   ========================================================================== */

/* no default list elements */
ol, ul {
	list-style: 		none;
	list-style-image: 	none;
	margin: 			0;
	padding: 			20px 0 0 0;
}
/* custom style */
ul {
	list-style: 		outside;
	margin-left: 		0;
	padding-left: 		18px;
	text-align: 		left;
}
li {
	padding-bottom: 	10px;
}




/* =============================================================================
   Embedded content
   ========================================================================== */


/*-------------------------------*/
/*             PAGE              */
/*-------------------------------*/
#page{
	position:		relative;
	display:		inline-block;
	float:			left;
	width:		 	100%;
	/*border: 		solid 1px #0F6;*/
}

/* PADDING */
:root {
	--pagemargin: 	9vw;		/* padding left & right */
}

   
/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*-------------------------------*/

/* GRID + COLUMN */
.grid-4 { 																							/* Grundspalte mit Abstand */
	display:			inline-block;
	float:				left; 
	margin-right: 		4%;
	/*background-color: 	#F0F;*/
}
.grid-4-img	{ width: 100%; }


/* SPAN */
.grid-4.span-1	{ width: 22%; }																		/* 1 Spalte breit */
.grid-4.span-2	{ width: 48%; }																		/* 2 Spalten breit */
.grid-4.span-3	{ width: 74%; }																		/* 3 Spalten breit */
.grid-4.span-4	{ width: 100%; }																	/* 4 Spalten breit */


/* POSITION  */
.grid-4.span-2-space { width: 48%; margin-right: 48%; }												/* Block 2-spalten breit, rechts leer */
.grid-4.span-3-space { width: 74%; margin-right: 22%; }												/* Block 3-spalten breit, rechts leer */
.grid-4.last		 { float: right !important; margin-right: 0 !important; padding-right: 0 !important; }	/* Block letzter ohne padding */



/* SPACING */
.spacing1x{
	margin-bottom:			20px;
	display: 				inline-block;
}
.spacing2x{
	margin-bottom:			40px;
	display: 				inline-block;
}
.spacing3x{
	margin-bottom:			60px;
	display: 				inline-block;
}
.spacing4x{
	margin-bottom:			80px;
	display: 				inline-block;
}



/*-------------------------------*/
/*           BUTTONS             */
/*-------------------------------*/

.sim-button{
	line-height: 	50px;
	height: 		50px;
	width: 			180px;
	
	text-align: 	center;

	margin-right: 	auto;
	margin-left: 	auto;
	margin-top:		40px;

	cursor: 		pointer;
	float: 			left;
}
.button{
	color: 				var(--color1);
	-webkit-transition: all 0.5s;
	-moz-transition: 	all 0.5s;
	-o-transition: 		all 0.5s;
	transition: 		all 0.5s;
	border: 			2px solid var(--color1);
	position: 			relative;	
}
.button a{
	color: 				var(--color1);
	text-decoration:	none;
	display: 			block;
}
.button a:hover{
	color: 				#FFF;
}
.button span{
	z-index: 			2;	
	display:		 	block;
	position: 			absolute;
	width: 				100%;
	height: 			100%;	
}
.button::before{
	content: 			'';
	position: 			absolute;
	top: 				0;
	left: 				0;
	width: 				100%;
	height: 			100%;
	z-index: 			1;
	opacity: 			0;
	background-color: 	var(--color1);
	-webkit-transition: all 0.2s;
	-moz-transition: 	all 0.2s;
	-o-transition: 		all 0.2s;
	transition: 		all 0.2s;
	-webkit-transform: 	scale(0.5, 1);
	transform: 			scale(0.5, 1);
}
.button:hover::before{
	opacity: 			1;
	-webkit-transform: 	scale(1, 1);
	transform: 			scale(1, 1);
}


.button.invers {
	color: 				#FFF;
	border: 			2px solid #FFF;
}
.button.invers .bt_label:hover{
	color: 				var(--color1) !important;
}
.button.invers::before{
	background-color: 	#FFF;
}




/*-------------------------------*/
/*        DIVIDING LINE          */
/*-------------------------------*/

div.line { 
	border-top: solid 1px var(--color6); 
	height: 1px;
}
div.line.invers { 
	border-top: solid 1px #FFF; 
}



/*-------------------------------*/
/*         HOVER:EFFECTS         */
/*-------------------------------*/

/* multiply image on blue */
.multiply:hover,
.multiply:hover img{ 
	background-color: 		var(--color1) !important;
	background-blend-mode: 	multiply;
	mix-blend-mode: 		multiply;
	transition: 			0.5s;
}


/* animated underline */
.animateLink,
.animateLink-invers {
    display:		inline-block;
    /*color:			#FFF;*/
    text-decoration:none !important;
	/*border: solid 1px #F00;*/
}
.animateLink::after,
.animateLink-invers::after {
    content: 		'';
    display: 		block;
    width: 			0;
    height: 		2px;
    background: 	var(--color1) !important;
    transition: 	width .3s;
}
.animateLink-invers::after {
    background: 	#FFF !important;
}
.animateLink:hover::after,
.animateLink-invers:hover::after{
    width:			 100%;
}