@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
	margin: 0px;
	padding: 0px;
	border: 0px;
	font-size: 100%;
	/*font: inherit;
	*/vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

* {   
 	padding: 0px; margin: 0px; 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html{
	height:100%; width:100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-content-zooming: none; 
	-ms-touch-action: none;
}
    
body { 
	height: 100%; width:100%; 
	-ms-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-content-zooming: none; 
	-ms-touch-action: none;
	font-size:10px; /* davon abgeleitet, werden alle anderen Fontgroeßen in % dargestellt */
	font-family: 'HelveticaNeueW01-45Ligh', HelveticaNeue, Helvetica, Arial, sansserif;
	/*font-family: Arial, sansserif;
	*/font-weight:normal;
	font-style: normal; 
	line-height:18px;

	overflow:hidden;
	
}
h1{
	font-weight:bold; font-size:280%; margin-bottom:14px; margin-top:20px; text-align:center;  
}

h2{
	font-weight:bold; font-size:180%; margin-bottom:10px;  
}

h3{
	color:#b90015;/*#e2001a; */
	font-weight:bold; 
	font-size:150%;
}
h4{/* nur testergebnisse.php */
	font-weight:normal; font-size:110%; /*font-size:300%;*/ margin-bottom:10px;  
}

ul{ padding-left:20px; }


/* ################################### Color Classes */


.fgWhite {	color:#FFFFFF;	}
.bgWhite {	background-color:#FFFFFF;	}
.bgBlack {		background-color:#000000;	}


.bgColor1{ background-color:#e2001a; }



/* ################################### Link Classes */

a {
	font-weight:normal; text-decoration:underline;
	color:#e2001a;
}

/* ################################### Font-size Classes */

.whtLink{ color:#FFFFFF; }
.whtLink:hover{ color:#FFFFFF; }

.textBlock{
	width:100%;
	padding:30px 40px 40px 30px; font-size:inherit;
}


.floater{
	float:left; 
	width:50%;
	padding:30px 40px 40px 30px; font-size:inherit;
}


.nigrinScreen .floater {
	float:left; 
	width:50%;
	padding:0px 40px 0px 0px; font-size:inherit;
}


.float3{
	float:left;
	width:33%;
	/*padding:20px 30px 30px 20px;
	*/
	padding:10px;
	text-align:center;
}


.textContent {
	font-size:180%;
	padding:0px; 	margin:0px;
	font-weight:normal;  font-style: normal; line-height:150%;
}

.alignLR{
    display: flex;
    justify-content: space-between;
}


/* ################################### Content & Startseite */

	
#logo {
	position:relative;
	top:5%;left:6%;
	width:32%; 
	height:14%;	max-height:160px; min-height:66px;
/*	background-image:url(../media/nigrin-logo.png); 
	background-repeat:no-repeat;
	background-size:contain;
*/	cursor:pointer;
} 

.fullSize{ width:100%; height:auto; }


#claim1Pic{
	position:relative;
	left:5%; 
	top:7%; width:62%; max-width:1000px; min-width:180px; 
	overflow:hidden;
}

	


		.cElem {
				position:relative;
				width:900px;
				left:50%;
    			margin-left:-450px;	
			}
	

#simpleProjMainPic{
			left:0px;
			top:0px;
			width:100%;
			height:100%; 
			background-size: cover;
			background-repeat: no-repeat;
			background-position: left top;
			cursor:pointer;
			overflow:hidden;
}
		

#imprint {
	position:absolute;
	right:0px;
	top:0px; padding:20px; 
	font-size:120%;
	font-weight:normal; text-decoration:none;
	color:#e2001a;
	z-index:10; cursor:pointer;
	
}		
	
	
	
.imprint2{/* loginSeite*/
	position:absolute;
	right:0px; 	top:0px; padding:0px 20px 30px 30px; 
	font-size:100%;
	font-weight:normal; 
	color:#e2001a;
	z-index:10; cursor:pointer;
}
	.imprint2 a{ text-decoration:none; color:#e2001a;}
	
	
#content {
			position:absolute;
			left:0px;
			top:0px;
			width:100%; min-width:240px;
			height:100%;
			z-index:1;		
			display:block;
			overflow-x:hidden;
				overflow-y:auto;
	-webkit-overflow-scrolling: touch; 
	-ms-overflow-style:-ms-autohiding-scrollbar;
}

		#content img{
			width:100%;
			height:auto;
		}
		

		#contentMain {
			position:relative; top:100%;
					height:auto; bottom:0px;
					width:100%;
					left:0px;
					background-color:#ffffff;
		}

		.contentBlock { padding:4% 0px 6% 0px; /*padding:14px 0px 26px 0px; (behebt das Pixel-Problem am untersten roten Rand - Desktop) */ 	}
		
		

		.contentWrapper{
			width:100%; 
			height:auto;
			overflow:hidden;
			padding:25px 0px 25px 0px;
		}

        .contentGalleryWrapperInner{
			position:relative; 
			top:0px;
			height:auto;			
			float:left;
		}
		

#pflegeTester{
	position:relative; margin:auto;
	width:40%; margin-bottom:6%;
	
}

.headImgWrapper{
	position:relative;
	width:100%; margin:auto;
	clear: both;
	
}

#bewerbungsAntwort{
	position:relative; width:100%; min-height:500px;
	display:none;
}


#bewerbungsFormular{
	display:none;
	width:90%;
	margin:auto;
	
}

#formHeader{ position:relative; top:22px; width:100%;}



.formBTNs{
	position:relative;
	width:90%; margin:auto;
}
	#loginBTN, .bewerbenBTNs{
		position:relative;
		border:3px solid #FFF;
		cursor:pointer;
		    max-width: 400px;
	}


.kontaktFloater{
	float:left; 
	width:50%; 
	padding:24px 1% 0px 1%;
}


.kontaktTab{
	position:relative; top:-2px;
	font-size:inherit; color:inherit; line-height:inherit;
	width:101%; min-height:50px;  
	
}
 	.eingabeText{
		font-family: inherit;
		font-size:150%; color:#c3c7c9; color:#666; font-weight:normal; 
		width:100%; height:50px; padding:5px;  
		outline: 0 none;
		border-radius:0px; 
		
		background-color:#FFF;
	}

	textarea { resize: none; }	
	.TextBoxWrapper{
		clear:both; padding-top:24px;
		width:100%; 
		padding:24px 1% 0px 1%;
	}
	.textBox{
		height:140px; font-family: inherit;
		padding-left:5px; width:100%;
	}
			
			
	#quadWrapper, .quadWrapper{
		position:relative;
		top:0px; left:0px;
		width:60%; min-width:260px; font-size:130%;
		height:auto; min-height:50px;
		line-height:200%;
	}
	
	#quadWrapper span, .quadWrapper span{
		position:relative; left:70px;
	}
		#image-upload, .image-upload{
			position:absolute;
			top:0px; left:0px;
			width:100%; height:100%;
			cursor:pointer; z-index:30;
			opacity:0;
		}
		
				
		
		#bigQuad, .bigQuad{
			position:absolute;
			top:0px; left:0px;
			height:50px; width:50px;  cursor:pointer;
			background-color:#FFF; margin-right:20px;
			float:left;
		}
			
		#smallQuad, .smallQuad{ 
			position:relative; top:5px; left:5px;
			width:40px; height:40px;
			border:3px solid #e2001a;
		}
		
		#thumbNailWrapper, .thumbNailWrapper{
			position:relative;
			top:10px;
			height:inherit; width:100%; 
		}	
		.thumbNailWrapper{
		}
		
			#content img#image_preview, #content img .image_preview{
				width:auto; height:auto;
				display:none;
					
			}
			#remove-image-upload, .remove-image-upload{
				position:absolute; left:160px; top:0px;
				width:30px; height:30px; display:none;
				background-color:#FFF; border:none;
				font-size:120%;
				-webkit-appearance:none; border-radius: 0px;
			}
			
			#content img.loadingImg{
				width:100px; 
				
			}
		
		
select {
	line-height: 46px;
	border: 0 !important;  /*Removes border*/
/*	-webkit-appearance: none;  /*Removes default chrome and safari style*/
/*	-moz-appearance: none; /* Removes Default Firefox style*/
	background: #F00; /*url(img/select-arrow.png) no-repeat 90% center;*/
/*	width: 100px; /*Width of select dropdown to give space for arrow image*/
/*	text-indent: 0.01px; /* Removes default arrow from firefox*/
/*	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	color: #FFF;
	border-radius: 0px;
/*	padding: 5px;*/
	height:50px;
/*	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
*/
}	
		
.empty { color:#a9a9a9; }
		
.regular-checkbox {
   display: none;

}
 
.regular-checkbox + label {
   	background-color: #FFF;
    border: 1px solid #cacece;
	padding: 20px;
    display: inline-block;
    position: relative;
	top:10px;
	margin-right:20px;

}
.regular-checkbox:checked + label:after {
	 content: '\2714';
    position: absolute;
    top: 0px;
    left: 0px;
    color: #F00;
	
	
    font-size: 34px;
	top:6px;
    left: 6px;
}
#chckBoxLabel{
	position:relative; top:-30px; left:50px;
	width:90%;
}
.chckBoxLabel{
	position:relative; top:-30px; left:50px;
	width:90%;
}


 
form a{ color:#FFF; }
form a:hover{color:#FFF; }

 .leer{
    color: #999; border:1px solid #0f0;
	color:#F00;
}

/*#content .prodPic { text-align:center; padding:0px; width:auto; max-width:100%; max-height:320px; border:1px solid #333; }
*/
#content .prodPicNeu { text-align:center; padding:0px; width:100%; /*max-width:120px;*/ max-width:200px; height:auto; border:0px solid #333; }

#content .prodPic {
	text-align: center;
	padding: 0px;
	width: auto;
	max-width: 100%;
	max-height: 260px;
}

.clearer{ clear:both; margin-top:10px; }

.testErgebnisse{	clear:both; display:none; /*font-size:16px; font-size:140%;*/ }

/**************************   ios Slider  */

#iosWrapper{
	position:absolute; 
	left:0px; top:0px;
	width: 100%;
	height:100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	overflow:hidden;

}
	
	.iosSlider, .iosSlider .slider{
		width: 100%;
		height:100%;
	}

	.iosSlider .slider .item {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		background: #ffffff;
		background-size: cover;
		-webkit-background-size: cover;
		background-repeat: no-repeat;
		background-position: left top;
	}


	.iosBtn{
		position:relative;	
		height:100%; float:left;  
		background-position:center;
		background-repeat:no-repeat;
		background-size:auto;
		cursor:pointer;
		width:150px;	
		
			
	}
			
.menusmall { 
	position:absolute; bottom:0px; 
	width:100%; height:5%; min-height:40px;
	z-index:5;
	overflow:hidden;
}

		
	#menueBtn{
		position:fixed; 
		left:0px; bottom:0px; height:5%; min-height:40px;
		width:9%; max-width:140px; min-width:120px;  
		
		background-image:url(../media/men_btn.gif); z-index:10;
	}
	#scrollDwnWrapper{ position:relative; top:0px; left:0px; width:50%; height:100%;
		float:none; margin:auto; z-index:100;	
	}
		
		#scrollDwnBtn {
			position:relative;
			margin:auto; float:none;
			
			height:100%;
			
			background-image:url(../media/scroll_dwn.gif);
		}
	#scrollRightBtn{
		float:right; top:0px;  
		
		background-image:url(../media/slide_btn.gif);
	}


#menuBig{
	position:absolute; bottom:-650px;
	height:650px; max-height:100%; 
	width:100%;
	z-index:10; display:none;
	
}
	#menuHG{
		position:absolute; width:100%; height:100%;
		background-color:#000; opacity:0.7;
	}
	#menuBig #closeBtn{position:absolute; top:10px; right:10px; cursor:pointer; width:39px; height:39px; }
	#auswahlPicWrapper{
		position:relative; margin:auto;
		width:100%; max-width:1400px; 
		height:100%; text-align:center;
		overflow:auto; overflow-x:hidden;
		
	}
	
	#auswahlPicWrapper img{ position:relative; top:30px; margin:20px 3% 0px 3%; cursor:pointer;  width:26%; max-width:280px; }

#content .btn{ position:relative; width:auto; border:3px solid #e2001a;}

.inMiddle{
	position:relative;
	width:100%; margin:auto;
}

/****************** Testergebnisse *************/
.tabAnswerLeft{ 
	text-align:right; vertical-align:middle; white-space: nowrap;
	/*width:auto;*/ width:130px;
}

.tabAnswerRight{
/*	width:80%; width:230px;*/ width:auto; vertical-align:bottom; vertical-align:middle;
	padding-left:8px; color:#9c9e9f; line-height:34px;  font-weight:bold;
		 
}

.balkenDiag{
	position:relative; height:30px;
	background-color:#9c9e9f; float:left; margin-right:3%;
}
	

.roterBalken1{ background-color:#af0917;}
.roterBalken2{ background-color:#e2001a;}

.textFarbe1{ color:#000}
.textFarbe2{ color:#4b4a4d}

.uList{
	position:relative; left:0px;
	text-align:left; margin-bottom:60px; 
}

#testergebnisseTab{ width:100%;  }

#sternText,#sternTextRot{ position:relative; width:100%; }
#sternText ul{ list-style:asterisks; list-style-image:url(../media/stern.gif); }
#sternTextRot ul{   background:url(../media/redstar.gif) no-repeat 9px 2px;
    list-style-type: none; font-size:80%; line-height:120%;
    margin: 0;
}

/*********************   Login  ****************/


#headLogin{
	position:relative;
	height:220px; 
}

.scale{ width:100%; }
 #contentMain .noScale{ width:auto; }

#screenFeedback{
	position:absolute;
	left:0px; top:0px;
	height:auto;
	z-index:50;
}


.zenter{
	text-align:center;
}


.products{
	position:relative;
	width:30%; margin:1%;
	height:auto;
	
}
.products img{

	bottom:0px; left:0px;
	/*width:100%; wg. login.html*/
	height:auto; 
	
}
.prod img{ width:100%; } /* muss bei neuen Produkten raus*/

/*temporär!*/
.productwrapper img{
	width: 200px;
	height: 257px;
}

/* Fragebogen auf iPad */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)  {
    .productwrapper > div {
        margin-bottom: 30px;
    }
    .productwrapper .prodInfo{
        min-height: 125px;
    }
}

.prodInfo{
	min-height: 94px;
}

#prodFragen0, #prodFragen1, #prodFragen2, #prodFragen3, #prodFragen4{
	display:none;
}
#logoSmll{
	cursor:default; margin-left:20px;
}

.prodBTN{
	position:relative; clear:both;
	margin:auto; width:90%; height:auto; text-align:center;
	color:#FFF; font-weight:bold; padding-top:20px; padding-bottom:20px;

}
	.fertig{ background-color:#2dc000;	}
	.unFertig{background-color:#e2001a; 
		cursor:pointer;	
	}
	.activ{
		color:#e2001a; 	background-image:url(../media/scroll_dwn.gif); background-position:center center;
		background-repeat:no-repeat;	
	}
	
	.prodInfo{ height:auto; padding:20px 0 20px 0; }
	
	.prodName{ height:90px; overflow:hidden; }
	
	
#prodTab{
	text-align:center; 
}
	
.tab_right{
	position:absolute; right:0px; bottom:0px;
	width:400px; height:40px;
}
	
.tab_right div{
	width:200px; 
	height:40px; 
	line-height:40px; 
	text-align:center;
	cursor:pointer; 
	
	/*color:#fff;
	background-color:#e2001a;*/
	
	color: #e2001a;
	background-color: #FFF ;
}

.tab_left{
	color: #e2001a;
	background-color: #FFF;
}

.tab_active{
	/*font-weight: bold;*/
	color:#fff !important;
	background-color:#e2001a !important;
}

/************  slider ***/
.sliderTab{
	width:100%;
}
.sliderTab td{padding:10px 0 10px 0; }


/***************  slider override  **************/

.ui-slider .ui-slider-handle { 	height:40px;}
.ui-slider-horizontal .ui-slider-handle {
  top: -15px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #cccccc;
/*	background: #646464 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
*/	background: #646464;
	color:#EEE;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #bdb2b2;
/*	background: #fdf5ce url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
*/	background: #646464;
		color:#bdb2b2;
}


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

	.tab_right div{
		width:160px; /*height:40px; color:#fff;
		line-height:40px; text-align:center;
		cursor:pointer; background-color:#e2001a;*/
	}
}



/*#logOut{
	position:absolute; right:0px; bottom:0px;
	width:200px; height:40px; color:#fff;
	line-height:50px; text-align:center;
	cursor:pointer; background-color:#e2001a;
}*/

#msgText{
	position:relative; top:0px; margin-top:0px;
}

#prodFormular a{ color:#FFF;	}


/* fragebogen */
.questionnaireProductBox{
    min-height: 470px;
}
@media screen and (min-width: 1400px){
    .questionnaireProductBox{
        min-height: 570px;
    }
}
@media screen and (min-width: 1600px){
    .questionnaireProductBox{
        min-height: 650px;
    }
}

/* -------------------------------------------------------------------------- */

@media screen and (max-width: 900px), screen and (orientation: portrait){
	
	#logo {	/*background-image:url(../media/nigrin-logo2.png);*/ top:0px; height:50%; width:45%; } 

	
 
	/*#claim1Pic{	width:90%; position:absolute; top:34%; }
	*/
	#pflegeTester{	width:60%; }
	
	.cElem{ width:90%; margin-left:-45%;	}
	
	.textContent {	line-height:140%; }
	
	
	.float3{ width:100%; text-align:center; padding:20px 10% 20px 10%; }
	.floater{
		text-align:center;
		width:100%;
		padding:20px 10% 20px 10%;
	}
	

	
	.kontaktFloater{ width:100%;}
	
	#prodTab{ font-size:60%; }
	
	.imprint2 {	font-size:60%; }

	#logoSmll{position:relative; left:50%; margin-left:-128px;}	
	
	.menusmall{height:150px; min-height:150px; max-height:150px;}
	#menueBtn{height:150px; width:150px;  max-width:150px; min-width:150px; }
	
	/*#msgText{ padding-top:60px; }*/
	
	.tabAnswerRight{ line-height:42px; }

}

@media screen and (max-width: 640px) and (orientation: landscape){
	#logo {	background-image:url(../media/nigrin-logo.png); width:32%; height:14%;}
/*	body { font-size:8px; }
*/	#pflegeTester{	width:40%; }
	
	.scrollDwnBtn { min-width:60px; background-size: 40% 54%; }
	
	.menusmall{height:150px; min-height:150px; max-height:150px;}
	#menueBtn{height:150px; width:150px;  max-width:150px; min-width:150px; }

}