/* ========================
   Übergreifend
========================= */


html, body {
	height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
    margin: 0;
    padding: 0;
}
a { text-decoration: none; }

em {
	font-style: italic;
}
.clearfix {
	float: none;
	clear: both;
}
.nomargin {
	margin: 0 !important;
}
.blocksatz {
	text-align: justify!important;
}
.left {
	float: left;
}
.right {
	float: right;
}
.disabled {
	display: none!important;
}

img {
	width: 100%;
}



/* ==================================================
Font-Face MetaPro
================================================== */

    @import url("https://fast.fonts.net/lt/1.css?apiType=css&c=e290b274-f8c3-409a-aa3e-9671256f014a&fontids=1401287,1401335,1401359,1401371,1401431");
    @font-face{
        font-family:"MetaCompPro-CondBold W01 Rg";
        src:url("../../_include/fonts/1401287/e1fb7824-7775-481a-8f63-deb6b70d2631.woff2") format("woff2"),url("../../_include/fonts/1401287/febdb597-4f08-4997-8cef-79a046a2fd50.woff") format("woff");
    }
    @font-face{
        font-family:"MetaCompPro-CondMedium W01 Rg";
        src:url("../../_include/fonts/1401335/540eceef-110d-4cac-9990-7a8be83834f0.woff2") format("woff2"),url("../../_include/fonts/1401335/cdc1b1be-2d56-4ae7-b72b-8a977e738986.woff") format("woff");
    }
    @font-face{
        font-family:"MetaCompPro-CondNormal W01 Rg";
        src:url("../../_include/fonts/1401359/0d3cf69a-2894-4d5c-abde-ceceed035f75.woff2") format("woff2"),url("../../_include/fonts/1401359/509912e6-0468-4522-847b-5966b7458a84.woff") format("woff");
    }
    @font-face{
        font-family:"MetaCompPro-CondNormalI1401371";
        src:url("../../_include/fonts/1401371/0d6667b8-336f-4a80-a681-2c5c03f1958b.woff2") format("woff2"),url("../../_include/fonts/1401371/a59a997d-0308-4dc8-a564-3d7a1dfa12c4.woff") format("woff");
    }
    @font-face{
        font-family:"MetaCompPro-Light W01 Regular";
        src:url("../../_include/fonts/1401431/e85c1140-f73f-4fed-bde3-783fef0f4497.woff2") format("woff2"),url("../../_include/fonts/1401431/ec9d5d4e-00fb-4dda-9b6b-1b6b211c4099.woff") format("woff");
    }




/* ========================
   Basic Styles
========================= */


html, hmtl a{
	width:100%;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

body{
	background:#fff;
	color: #7F8289;
	font-family: 'MetaCompPro-CondNormal W01 Rg', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 28px;
}
.off {
	display: none!important;
}


a {
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: color 0.1s linear 0s;
	-moz-transition: color 0.1s linear 0s;
	-o-transition: color 0.1s linear 0s;
	transition: color 0.1s linear 0s;
}

a:hover,
a:active,
a:focus {
	outline: 0;
	text-decoration:none;
}

a img {
	border: none;
}

a > img {
	vertical-align: bottom;	
}


strong {
  	font-weight: 500;
}


input, button, select, textarea {
	font-weight: 300;
	font-family: 'Titillium Web', sans-serif;
	outline: 0;
}

input:focus, 
textarea:focus,
input[type="text"]:focus {
	outline: 0;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #7F8289;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #7F8289;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #7F8289;
}
.contact-submit {
	padding-top: 6%;
}



/* ========================
   TRANSITIONS
========================= */

a {
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
}

a:hover { 
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
}

/* ========================
   Code and Pre
========================= */

code,
pre {
  	padding: 0 3px 2px;
  	-webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
  	color: #232527;
  	font-size: 12px;
  	font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}

code {
  	padding: 2px 4px;
  	border: 1px solid #dde4e9;
  	background-color: #F6F6F6;
  	color: #232527;
  	white-space: nowrap;
}

pre {
  	display: block;
  	margin: 70px 50px;
  	padding: 30px;
  	border: 1px solid #dde4e9;
  	-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  	background-color: #FCFCFC;
  	white-space: pre;
  	white-space: pre-wrap;
  	word-wrap: break-word;
  	word-break: break-all;
  	font-size: 12px;
  	line-height: 20px;
}

pre code {
  	padding: 0;
  	border: 0;
  	background-color: transparent;
  	color: inherit;
  	white-space: pre;
  	white-space: pre-wrap;
}

.pre-scrollable {
  	overflow-y: scroll;
  	max-height: 340px;
}

/* ========================
	HEADER
========================= */

.header {
	/*box-shadow: 0 0 5px 0 rgb(0 0 0 / 70%);*/
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
	display: block;
	margin-bottom: 5px;
	z-index: 10;
	
}
.head-row {
	display: block;
	width: 100%
}

.meta-nav {
	height: 46px;
	z-index: 20;
}

.main-nav {
	background-color: #e3e3e3;
	height: 50px;
}
.brand {
    background: url(../img/img-brand-mf-portal-230.png) 0 0 no-repeat;
    display: block;
    float: left;
    height: 50px;
	overflow: hidden;
	text-indent: -999px;
    width: 280px;	
}


/* ========================
	BACKGROUND IMG
========================= */

.shell, a.shell {
	-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			-o-border-radius: 8px;
			border-radius: 8px;
	background-color:#000;
	color:#fff;
	display:block;
	margin-bottom: 25px;
	text-align: center;
	line-height: -20px;
	width: 100%;
}

.img-kim,
.img-rewo,
.img-onlearned,
.img-igf,
.img-onboard,
.img-ontelligence,
.img-rds,
.img-igfwin {
	background-repeat: no-repeat;
		-webkit-filter: brightness(1.0);
    		filter: brightness(1.0);
	display: block;
	
}
.img-igf {
	background-size: 1170px 536px;
		-webkit-background-size: 1170px 536px;
			-moz-background-size: 1170px 536px;
			-o-background-size: 1170px 536px;
	height: 400px;
	max-width: 1170px;
	
}

.img-rewo,
.img-onlearned,
.img-kim {
	background-size: 370px 170px;
		-webkit-background-size: 370px 170px;
			-moz-background-size: 370px 170px;
			-o-background-size: 370px 170px;
	height: 170px;
	max-width: 370px;
	
}

.img-onboard,
.img-ontelligence,
.img-rds,
.img-igfwin {
	background-size: 270px 124px;
		-webkit-background-size: 270px 124px;
			-moz-background-size: 3270px 124px;
			-o-background-size: 270px 124px;
	height: 124px;
	max-width: 270px;
	
}

.img-kim {
	background-image: url(../../media/img/img-kim.jpg);
	background-position: 50% 50%;
}
.img-rewo {
	background-image: url(../../media/img/img-rewo.jpg);
	background-position: 50% 50%;
}
.img-onlearned {
	background-image: url(../../media/img/img-onlearned.jpg);
	background-position: 50% 50%;
}
.img-igf {
	background-image: url(../../media/img/img-igfselfservice.jpg);
	background-position: 50% 50%;
}
.img-onboard {
	background-image: url(../../media/img/img-onboard.jpg);
	background-position: 50% 50%;
}
.img-ontelligence {
	background-image: url(../../media/img/img-ontelligence.jpg);
	background-position: 50% 50%;
}
.img-rds {
	background-image: url(../../media/img/img-remotedesktop.jpg);
	background-position: 50% 50%;
}
.img-igfwin {
	background-image: url(../../media/img/img-igf.jpg);
	background-position: 50% 50%;
}

a.img-kim:hover,
a.img-rewo:hover,
a.img-onlearned:hover,
a.img-igf:hover,
a.img-onboard:hover,
a.img-ontelligence:hover,
a.img-rds:hover,
a.img-igfwin:hover {
	-webkit-filter: brightness(0.7);
    		filter: brightness(0.7);
}

a.img-igf:hover {
	background-size: 1200px 550px;
		-webkit-background-size: 1200px 550px;
			-moz-background-size: 1200px 550px;
			-o-background-size: 1200px 550px;
}
a.img-rewo:hover,
a.img-onlearned:hover,
a.img-kim:hover {
	background-size: 400px 183px;
		-webkit-background-size: 400px 183px;
			-moz-background-size: 400px 183px;
			-o-background-size: 400px 1183px;
}

a.img-onboard:hover,
a.img-ontelligence:hover,
a.img-rds:hover,
a.img-igfwin:hover {
	background-size: 300px 138px;
		-webkit-background-size: 300px 138px;
			-moz-background-size: 300px 138px;
			-o-background-size: 4300px 138px;
}



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


h1, h2, h6, .label {
	font-family: 'MetaCompPro-CondNormal W01 Rg', sans-serif; 
	font-weight: normal;
	font-style: normal;
}

/* ========================
   Typography
========================= */


h1,
h2,
h6,
p,
a {
	/*font-family: 'RoyalRomain', 'Times New Roman', serif!important;*/
	font-weight: normal;
	font-style: normal;
}


strong {
	/*font-family: 'Roboto Condensed', sans-serif;*/
	font-style: bold;
	font-weight: 400;
}



/* FONT SETTINGS */
h1,
h2,
h3,
h4,
h5,
h6,
.teaser p,
.teaser em {
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height:1.3em;
}

h1,
h2,
h3,
h4,
h5 {
	letter-spacing: 1px;
}
p {
	letter-spacing: 0.03em;
}



/* FONT COLOURS */

p, h1, h2, h3 {
	color: #000;
}

h6 {
	color: #fff;
}



/* FONT SIZE */

h1 {
	font-size: 50px;
}
h2 {
	font-size: 35px;
}
h3 {
	font-size: 26px;
}
h4 {
	font-size:20px;
}
h5 {
	font-size:17px;
}
h6 {
	font-size:14px;
}
p {
	font-size: 18px;
	line-height: 27px;
}
.label {
	font-size:15px;
}

.uppercase {
	text-transform: uppercase;
}
.center {
	text-align: center!important;
}



/* ========================
   Section Page
========================= */

.page {
	/*background: #2F3238;*/
	background: #fff;
	padding: 60px 0;
	position: relative;
	z-index: 99;
}


.title-page {
	text-align: center;
	margin-bottom: 80px;	
}

.title-page .title {
	font-size: 48px;
	margin: 0 0 10px 0
}

.title-page .title-description {
	font-size: 24px;
	font-weight: 200;
	margin: 0;
}
.centerall {
	text-align: center;
	margin: 0 auto;
	padding: 3% 0 6% 0;
}

/* ========================
   SECTIONS
========================= */

#intro {
	display: block;
	z-index: 1000;
}


/* ========================
   Footer
========================= */

.footer {
	background: #353f46;
	height: 50px;
	position: relative;
	width: 100%;
}
.copyright {
	background: #0ea983;
	height: auto;
	padding: 5px 0;
	position: relative;
	text-align: center;
	width: 100%;
}
.holder {
	display: block;
	margin: 0 auto;
	max-width: 1170px;
	width: 100%;
}



/* ========================
   Isotope Filtering
========================= */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}