@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,100italic,300italic&subset=latin,latin-ext);

body, html   { font-family:'Fira Sans', Calibri, Myriad, Arial, sans-serif; font-size: 100%; margin: 0px; font-weight: 200 }
body         { background:#fff; color: #494949 }

b            { font-weight: 400 }

.clear       { clear:both; height: 0px; width:100% }
.nobr        { white-space: nowrap }
.nowrap *    { white-space: nowrap }
.center      { text-align: center }
.hidden      { display: none }
.unvisible   { visibility: hidden }
.clickable   { cursor: pointer }
.desktop     { display: block }
.mobile      { display: none }


a img        { border: none; }
img[onclick] { cursor: pointer }
a            { color: #153d89; text-decoration: none; }
a:hover      { text-decoration: none }

.nnx-cms     { /* CMS generated content */ }

/*
	colors:	
	green: #93c01f
	blue: #153d89
	silver #999999 	
	blue light #f1f3fd	
	blue semilight #dee1ec		
*/	

.container { max-width: 1100px; margin: 0 auto; padding: 0 15px }


header, main, footer { width: 100% }

/* [ HEADER ] */
header { z-index: 9999; position: absolute; top:0 }
header { background: rgba(255, 255, 255, .97); width: 100%; border-bottom: 5px solid #93c01f; }
.departments { float: left}
.departments, .quick-contact { width: 45%; font-size: 80%; padding: 12px 0 0 0;}
.departments a {  color: #999999; margin-right: 8px; display: inline-block; font-size: 14px}
.departments a:hover, .departments a.current:hover { border-bottom: 1px solid  #153d89 }
.departments a img { vertical-align: middle; padding-right: 8px; }
.departments a.current {  color:#153d89; border-bottom: 1px dotted  #153d89 }
.quick-contact { text-align: right; color:#153d89;font-weight: 500; padding-right: 12px; float: right }

.fomei-logo { padding: 1.2em 0}

.logo { float: left; width: 30%; padding-top: 6px }
.logo img { max-width: 100% }
.h-menu { float: left; width: 50%; padding: 50px 0 5px 0 }
.h-menu a { color: #000; padding: 0 8px; font-weight: 200 }
.h-menu a.current { font-weight: 500;  } 
.h-menu a:hover { color:#153d89  }
.search { float: left; width: 20%; color: #999999; text-align: right }



/* CRUMB MENU */
/*http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css*/
#crumbs { text-align: center; padding: 10px 0px 10px 12px; margin-bottom: 25px; background: #f1f3fd }
#crumbs ul { list-style: none; margin: 0; padding: 0;}
#crumbs ul li {	display: inline; }	
#crumbs ul li a { display: block; float: left; height: 27px; box-sizing: border-box; background: #93c01f; text-align: center; font-weight: 500; text-transform: uppercase; padding: 3px 25px 0 20px; position: relative; margin: 0 20px 0 0; font-size: 100%; text-decoration: none; color: #fff; }
#crumbs ul li a:after { content: "";  border-top: 15px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #93c01f; position: absolute; right: -12px; top: 0; z-index: 1; }
#crumbs ul li a:hover { background: #153d89 !important }
#crumbs ul li a:hover:after { border-left-color: #153d89 !important }
#crumbs ul li a.gray { background: #999999 }
#crumbs ul li a.gray:after { border-left-color: #999999; }
#crumbs div.inquiry-button {float: right; height: 27px; box-sizing: border-box; background: #3486F8; text-align: center; font-weight: 500; padding: 3px 25px 0 20px; margin: 0 20px 0 0; font-size: 100%; color: #fff; cursor: pointer }



/* [ ASIDE.homepage ] */
aside.homepage { background:#f1f3fd  }
.hpbanner { position: relative; height: 0px; transition:height .5s ease-in; width: 100% }
.viewer { opacity:0; transition:opacity .9s ease-in-out; position: absolute; width: 100%; font-size: 300%; background-repeat: no-repeat; background-position: center center }
.claim { opacity:0; transition:opacity .8s ease-in-out; font-weight: 600; ; line-height: 120%; position: absolute; left: 25px; bottom: 25px; max-width: 80%; }
#ClaimA { color: #153d89 }
#ClaimB,#ClaimC { color:#153d89 }



#ViewerA { background:url(/img/homepage/screen2.jpg) }
#ViewerB { background:url(/img/homepage/screen1-1.jpg) }
#ViewerC { background:url(/img/homepage/screen3.jpg) }

#Shape { opacity:0; transition:opacity 1s ease-in-out; margin: 8px 0 -8px 0 }


/* [ MAIN ] */
div.main-part { margin-top:95px; }
main.homepage { background:#fff;  }
main { }
main article { float: right; width: 100%; background: #fff; padding: 25px 0 }

.get-interested { text-align: center; margin: 25px 0 0 0; text-align: center; font-size: 140%; padding: 50px 0 0 0 }
.inquiry-button-bottom { display: inline-block; background: #3486F8; text-align: center; font-weight: 500; padding: 8px 25px 5px 25px; border-radius:3px; margin: 16px auto; font-size: 100%; color: #fff; cursor: pointer }



/* [ FOOTER ] */
footer { margin-top: 50px }
footer .gray { background:#D7D7D7; color: #333333; padding: 20px 0; font-size: 80%; line-height: 140%  }
footer .navi { background:#AFAFAF; color: #000; padding: 15px 0 }
footer .navi a { color: #000; padding-right: 16px; line-height:140% }
footer .impressum { background:#a5a5a5; color: #6c6c6c; padding: 8px 0; font-size: 70%; line-height: 140%  }
footer .reference-loga img { margin: 0 10px 10px 0 }



/* MENU */
.big-square { float: left; width: 50%; height: 300px; margin-left: -1px; margin-bottom: -2px; margin-right: -1px;  }
.small-square { float: left; width: 25%; height: 150px; margin-left: -1px; margin-bottom: -1px;}
.small-square, .big-square { cursor: pointer; position: relative; background-color:#fff; font-weight: 500; background-position: right bottom; background-repeat: no-repeat;  box-sizing:border-box; border: 1px solid #efefef; display: inline-block; /*transition:all .2s ease*/ }
.big-square em { display: inline-block; padding: 15px; color: #153d89; font-size: 150%; font-style: normal; background: rgba(255, 255, 255, 0.7)  }
.small-square em { display: block; position: absolute; left: 0; top:0; right: 0; bottom: 0; padding: 15px; box-sizing: border-box; color: #153d89; font-size: 150%; font-style: normal; background: rgba(255, 255, 255, .1)  }
.small-square:hover, .big-square:hover { background-image: none !important; background-color:#93c01f; color: #fff; border-color:#93c01f }
.small-square:hover em, .big-square:hover em { color: #fff; background: none }



/* POP */
#popper  { display: none; position: fixed; left: 0; top:0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.7); font-size: 100%; z-index: 9999 }
#popper .pop-inside { max-width: 600px; margin: 50px auto 0 auto; background: #fff; border-radius: 8px; padding: 30px 15px ; text-align: center }
#popper .pop-inside button { font-size: 100%; color: black; cursor: pointer  }


/* FORM */
form.form { width: 90%; margin: 15px 5%; text-align: left }
form.form h1 { color: #153d89; font-weight: 200; font-size: 200%; padding-bottom: 25px}
form.form label { font-weight: 200 }
form.form input[type=text], form.form textarea { width: 97%; border-radius: 3px; font-size: 110%; color: #000; padding: 4px 6px; margin-bottom: 20px }
form.form p.disclaimer { border-top:1px solid #EAEAEA; margin: 15px 0 0 0; padding: 15px 0 0 0; font-size: 80% }
form.form button, form.tech-sup-form button { width: auto; float: none; position: relative; display: inline-block; padding: 8px 10px; font-size: 13px; font-weight: bold; color: #333;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);white-space: nowrap;background-repeat: repeat-x; border-radius: 3px; border: 1px solid #DDD; border-bottom-color: #C5C5C5; vertical-align: middle; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; margin: 0 5px 5px 0px;  }
form.form button.confirm, form.tech-sup-form button.confirm {
	background-color: #EAEAEA;
	background-image: -moz-linear-gradient(#FAFAFA, #EAEAEA);
	background-image: -webkit-linear-gradient(#FAFAFA, #EAEAEA);
	background-image: linear-gradient(#FAFAFA, #EAEAEA);
}
form.form button.cancel {
	background-color: #fff; 
	margin-left: 20px
}


form.tech-sup-form { width: 100%; padding: 15px; background:#f1f3fd; border-radius: 5px  }
form.tech-sup-form input[type="text"], form.tech-sup-form textarea { width: 70%; border-radius: 3px; font-size: 110%; color: #000; padding: 4px 6px; margin-bottom: 20px }
form.tech-sup-form table { width: 100% }
form.tech-sup-form table td { vertical-align: middle}



/* [CMS] -------------------------  */
	.nnx-cms    { /* CMS generated content in nnx.cms.css */ }
    form.search { width: 100%; padding: 30px 0 0 0;}
    form.search * { background: none; border: none; display: block }
    form.search input[type=text] { border-bottom: 1px solid #dddddd; width: 80%; float: left; font-size: 130%; padding: 2px }
    form.search input[type=text]:focus { background:#eaebf0 }
    form.search button { font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; color: #999999; width: 15%; float: right; font-size: 130% }


	/* [CMS] fulltext results */
	p.search-result { padding: 8px 0 8px 0; border-bottom: 1px dotted silver }
	p.search-result b { font-size: 125%; color:#153d89 }
	p.search-result span { color: gray; font-size: 90% }
	
	
	/* [CMS] form validator */
	.correct   { border: 1px solid #93c01f }
	.incorrect { border: 1px solid red }
	.preloader { width: 100%; text-align: center; padding: 100px 0 100px 0 }
	
	
	/* [CMS] download */
	.nnx-file { max-width: 100%;  border-radius: 8px; border: 1px solid #d6dcf9; padding: 5px 20px; display: block; margin: 4px 0  }
	.nnx-file:hover { background:#d6dcf9}
	.nnx-file a, .nnx-file a b { text-decoration: none !important }
	.nnx-file img { vertical-align: middle; margin-right: 15px}
	.nnx-file a small { font-size: 80%; padding-left: 8px }
	.nnx-file a.file-link b{ }
    
	
	
	/* [CMS] gallery */
	.gallery-list-box { position: relative; width: 250px; height: 200px; float: left; margin: 10px; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden }
	.gallery-list-box h2 { position: absolute; width: 100%; padding: 8px; background: rgba(255, 255, 255, 0.7); left: 0; bottom: 0; }
	.gallery-list-box h2 span { padding: 10px; display: inline-block; font-size: 80%; overflow: hidden }
	.gallery-list-box:hover h2 { background: rgba(0, 178, 243, 0.7); color: #fff;  }





@media screen and (max-width: 820px) {  
   .desktop{ display: none; visibility: hidden }
   .mobile { display: block; visibility: visible }
   .search { display: none }
   
   #MobileNav { overflow: hidden; max-height: 1px; transition:max-height .3s ease}
   #MobileNav a { display: block; padding: 8px 0; margin: none }
   #MobileNav a:hover { background:#153d89; color: #fff  }
  
   /* [CMS] gallery */
   .gallery-list-box { position: relative; width: 45%;}   
}   


@media screen and (max-width: 600px) {  	
   
   .departments { width: 100% }
   .quick-contact { width: 100% }
   .logo { width: 100% }      
   .inquiry-button { display: none}
   
   .big-square { float: left; width: 100%; height: 300px; margin-left: -1px; margin-bottom: -2px; margin-right: -1px;  }
   .small-square { float: left; width: 50%; height: 150px; margin-left: -1px; margin-bottom: -1px;}
   
   
   /* [CMS] gallery */
   .gallery-list-box { position: relative; width: 100%; margin: 0 0 20px 0  }
}


@media screen and (max-width: 500px) {  	   
   .departments a span { display: none }
   .departments a { font-weight: bold }
 }