/* ======================================================================================================= */
/* Farbboxen zur besseren Einrichtung des Bausteins */
/* ------------------------------------------------------------------------------------------------------- */
/* Diese Einstellungen werden angewendet wenn der Setupmodus aktiv ist */
/* ======================================================================================================= */

.setup.nh2 .nh2_pic,
.setup.nh2 .nh2_pos .add_pos2,
.setup.nh2 .nh2_pos .add_pos5,
.setup.nh2 .nh2_pos .content,
.setup.nh2 .nh2_text-headline,
.setup.nh2 .nh2_text-description,
.setup.nh2 .nh2_text-price,
.setup.nh2 .nh2_text-counter,
.setup.nh2 .nh2_text-number						{ background-color: rgba(250,150,0,1) !important; box-shadow: 0px 0px 20px rgba(0,0,0,0.5) inset !important; }
.setup.nh2 .nh2_pos 							{ background-color: rgba(200,0,0,1) !important; box-shadow: 0px 0px 20px rgba(0,0,0,0.5) inset !important; }
.setup.nh2 .nh2_box_link,
.setup.nh2 .nh2_linkbutton,
.setup.nh2 .nh2_b-pause,
.setup.nh2 .nh2_b-play,
.setup.nh2 .nh2_b-prev,
.setup.nh2 .nh2_b-next							{ background-color: rgba(0,0,200,1) !important; box-shadow: 0px 0px 20px rgba(0,0,0,0.5) inset !important; }

.setup.nh2 .nh2_mask_simple,
.setup.nh2 .nh2_mask_label,
.setup.nh2 .nh2_mask_label > div,
.setup.nh2 .nh2_mask_edge > div,
.setup.nh2 .nh2_mask_stretchx > div > div,
.setup.nh2 .nh2_mask_stretchy > div > div,
.setup.nh2 .nh2_mask_border > div > div > div	{ background-color: rgba(0,200,100,1) !important; box-shadow: 0px 0px 20px rgba(0,0,0,0.5) inset !important; } 





/* ----- Grundeinstellung ----- */

.nh2 {
	position: relative;
	font-size: 0px;
	/* line-height: 0px; */
}


.nh2_main {
	width: 100%;
	height: 100%;
	position: absolute;
}

.nh2_area {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	background-image: url(../../pic/bgr01.png);
}

.nh2_container {
	position: absolute;
	left: 0%;
	top: 0%;
}



/* ----- Dimensionstyp - Full ----- */

.nh2.full {
	width: 100%;
	height: 100%;
	position: absolute;
}



/* ----- Dimensionstyp - Ratio ----- */

.nh2.ratio {
	width: 100%;
	height: auto;
	/* line-height: 0px; */
}

.nh2.ratio .ratio_1,
.nh2.ratio .ratio_2,
.nh2.ratio .ratio_3,
.nh2.ratio .ratio_4,
.nh2.ratio .ratio_5,
.nh2.ratio .ratio_6 {
	width: 100%;
	height: auto;
}

.nh2.ratio .ratio_1 { display: inline-block; }
.nh2.ratio .ratio_2 { display: none; }
.nh2.ratio .ratio_3 { display: none; }
.nh2.ratio .ratio_4 { display: none; }
.nh2.ratio .ratio_5 { display: none; }
.nh2.ratio .ratio_6 { display: none; }



/* ----- Fall 1 - Horizontal Scrollen ----- */

.nh2.horizontal .nh2_container {
	display: table;
	table-layout: fixed;
	height: 100%;
}

.nh2.horizontal .nh2_box_row {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100%;
}

.nh2.horizontal .nh2_box {
	display: table-cell;
	overflow: hidden;
	height: 100%;
	position: relative;
}



/* ----- Fall 2 - Vertikal Scrollen ----- */

.nh2.vertical .nh2_container {
	display: block;
	width: 100%;
	height: 100%;
}

.nh2.vertical .nh2_box_row {
	display: block;
	width: 100%;
	height: 100%;
}

.nh2.vertical .nh2_box {
	display: block;
	overflow: hidden;
	height: 100%;
	position: relative;
}

.nh2_fix {							/* Behebt einen Fehler des aktuellen Microsoft Internet Explorers - Tabellen Zelle wird aufgedrückt und "Positioin:Absolute" kann verwendet werden. */
	display: inline-block;
	width: 100%;
	height: 100%;
}



/* ----- Positionierungsbereich für das Bild ----- */

.nh2_pic_box {						/* Dieses Element stellt die Möglichkeit bereit, das Bild (nh2_pic) an der Textbox (nh2_pos) zu orientieren */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}



/* ----- Inhalte - Bild ----- */

.nh2_pic_bgr {
	position: absolute;
	background-image: url(../../pic/bgr02.png);
}

.nh2_pic {
	position: absolute;
}



/* ----- Positionierungsbereich für die Inhalte ----- */

.nh2_pos {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.nh2_pos .add_pos1 {
	width: 100%;
	height: 100%;
	position: relative;
}

.nh2_pos .add_pos2 {
	box-sizing: border-box;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	width: 100%;
}

.nh2_pos .add_pos3 {
	height: 100%;
}

.nh2_pos .add_pos4 {
	width: 100%;
	height: 100%;
}

.nh2_pos .add_pos5 {
	display: inline-table;
	box-sizing: border-box;
	height: 100%;
}

.nh2_pos .add_pos6 {
	display: table-cell;
	height: 100%;
}

.nh2_pos .content {
	box-sizing: border-box;
	position: relative;
}



/* ----- Positionierungsbereich für die Steuerung (muss in config aktiviert sein) ----- */

.nh2 .button_pos {
	position: absolute;
}

.nh2 .button_pos .button_pos_width {
	box-sizing: border-box;
	position: relative;
}

.nh2 .button_pos .button_pos_area {
	position: relative;
}



/* ----- Inhalte - Überschrift ----- */

.nh2_text-headline {					
	position: relative;
}

.nh2_text-headline > div {					
	overflow: hidden;
}



/* ----- Inhalte - Beschreibungstext ----- */

.nh2_text-description > div {
	overflow: hidden;
}



/* ----- Inhalte - Preis ----- */

.nh2_text-price > div {
	white-space: nowrap;
	overflow: hidden;
}



/* ----- Inhalte - Nummerierung ----- */

.nh2_box > .nh2_text-number {
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.nh2_text-number {
	position: relative;
}

.nh2_text-number > div {
	position: relative;
	width: 100%;
	height: 100%;
}

.nh2_text-number > div > span {
	position: absolute;
}



/* ----- Zähler ----- */

.nh2_text-counter {
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* ----- Zähler - Horizontale Präsentation ----- */

/* ----- Zähler - Vertikale Präsentation ----- */



/* ----- Inhalte - Link (Schaltfläche und Gesamtfläche) ----- */

.nh2_link {
	display: block;
	position: absolute;
}

.nh2_link_position .link {						/* Link-Schaltfläche */
	cursor: pointer;
}

.nh2_link_position .link .label {
	position: relative;
	display: block;
}

.nh2_link_position .link .normal,
.nh2_link_position .link .over {
	display: table;
	width: 100%;
	height: 100%;
}

.nh2_link_position .link .normal .stretch,
.nh2_link_position .link .normal .icon1,
.nh2_link_position .link .normal .icon2,
.nh2_link_position .link .over .stretch,
.nh2_link_position .link .over .icon1,
.nh2_link_position .link .over .icon2 {
	display: table-cell;
	background-repeat: repeat-x;
}

.nh2_link_position .link .normal .stretch,
.nh2_link_position .link .normal .icon1,
.nh2_link_position .link .normal .icon2 {
	background-image: url(../../pic/button_normal.png);
}

.nh2_link_position .link .over .stretch,
.nh2_link_position .link .over .icon1,
.nh2_link_position .link .over .icon2 {
	background-image: url(../../pic/button_over.png);
}

.nh2_link_position .link .normal .stretch,
.nh2_link_position .link .over .stretch {
	background-position: left bottom;
}

.nh2_link_position .link .normal .icon1,
.nh2_link_position .link .over .icon1 {
	background-position: left top;
}

.nh2_link_position .link .normal .icon2,
.nh2_link_position .link .over .icon2 {
	background-position: right top;
}

.nh2_link_position .link .normal { opacity: 1; }
.nh2_link_position .link .over { opacity: 0; }

.nh2_link_position .link:hover .normal { opacity: 0; }
.nh2_link_position .link:hover .over { opacity: 1; }

 
 
 
/* ----- Steuerung Allgemein ----- */

.nh2_b-prev,
.nh2_b-next,
.nh2_b-pause,
.nh2_b-play {
	position: absolute;
	cursor: pointer;
}

.nh2_b-prev .mobil,
.nh2_b-next .mobil,
.nh2_b-pause .mobil,
.nh2_b-play .mobil {
	display: none;
}

.nh2_b-status div {
	background-repeat: no-repeat;
	background-image: url(../../pic/buttons01.png);
}

.nh2_b-pause .normal { background-position: -720px 0px; }
.nh2_b-pause .area_over { background-position: -720px -250px; }
.nh2_b-pause .button_over { background-position: -720px -500px; }
.nh2_b-pause .mobil { background-position: -720px -750px; }

.nh2_b-play .normal { background-position: -900px 0px; }
.nh2_b-play .area_over { background-position: -900px -250px; }
.nh2_b-play .button_over { background-position: -900px -500px; }
.nh2_b-play .mobil { background-position: -900px -750px; }

.nh2_b-prev .normal { background-position: 0px 0px; }
.nh2_b-prev .area_over { background-position: 0px -250px; }
.nh2_b-prev .button_over { background-position: 0px -500px; }
.nh2_b-prev .mobil { background-position: 0px -750px; }

.nh2_b-next .normal { background-position: -180px 0px; }
.nh2_b-next .area_over { background-position: -180px -250px; }
.nh2_b-next .button_over { background-position: -180px -500px; }
.nh2_b-next .mobil { background-position: -180px -750px; }

/* Vertikale Schaltflächen (abweichende Einstellungen) */
.nh2.b_option2 .nh2_b-prev .normal { background-position: -360px 0px; }
.nh2.b_option2 .nh2_b-prev .area_over { background-position: -360px -250px; }
.nh2.b_option2 .nh2_b-prev .button_over { background-position: -360px -500px; }
.nh2.b_option2 .nh2_b-prev .mobil { background-position: -360px -750px; }

.nh2.b_option2 .nh2_b-next .normal { background-position: -540px 0px; }
.nh2.b_option2 .nh2_b-next .area_over { background-position: -540px -250px; }
.nh2.b_option2 .nh2_b-next .button_over { background-position: -540px -500px; }
.nh2.b_option2 .nh2_b-next .mobil { background-position: -540px -750px; }

.nh2 .nh2_b-status .normal,
.nh2 .nh2_b-status .area_over,
.nh2 .nh2_b-status .button_over,
.nh2 .nh2_b-status .mobil {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}
 
/* ----- Steuerungszustände bei MouseOver ----- */

.nh2 .nh2_b-status .normal { opacity: 1; }
.nh2 .nh2_b-status .area_over { opacity: 0; }
.nh2 .nh2_b-status .button_over { opacity: 0;}

.nh2:hover .nh2_b-status .normal { opacity: 0; }
.nh2:hover .nh2_b-status .area_over { opacity: 1; }
.nh2:hover .nh2_b-status .button_over { opacity: 0; }

.nh2:hover .nh2_b-status:hover .normal { opacity: 0; }
.nh2:hover .nh2_b-status:hover .area_over { opacity: 0; }
.nh2:hover .nh2_b-status:hover .button_over { opacity: 1; }




/* ----- Steuerung - Allgemeine Definitionen ----- */

.nh2_noaction .nh2_b-pause,
.nh2_noaction .nh2_b-play,
.nh2_noaction .nh2_b-prev,
.nh2_noaction .nh2_b-next {
	display: none;
}

.nh2_b-play, .nh2_b-pause { display: none; }
.nh2_b-active { display: block; }








/* ----- Einstellungen für responisives Layout ----- */
/* ----- Der folgende Teil sollte so eingestellt werden, ----- */
/* ----- wie das Layout es am besten unterstützt. ----- */


/* ----- Responsive Einstellungen ----- */

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

	/* ----- Schaltflächen für mobile Anzeige ----- */	
	.nh2_b-prev .mobil,
	.nh2_b-next .mobil,
	.nh2_b-pause .mobil,
	.nh2_b-play .mobil {
		display: block;
	}
	
	.nh2_b-status .normal { display: none; }
	.nh2_b-status .area_over { display: none; }
	.nh2_b-status .button_over { display: none; }

}











/* --- Allgemein Maske --- */
.nh2_mask { line-height: 0px; position: absolute; }



/* --- Simple / Allgemein / Einfache Maske --- */
.nh2_mask.nh2_mask_simple { background: repeat left top; }

/* --- Simple 1 --- */
.nh2_mask_1.nh2_mask_simple { background-image: url(../../pic/mask01_simple.png); }

/* --- Simple 2 --- */
.nh2_mask_2.nh2_mask_simple { background-image: url(../../pic/mask02_simple.png); }

/* --- Simple 3 --- */
.nh2_mask_3.nh2_mask_simple { background-image: url(../../pic/mask03_simple.png); }

/* --- Simple 4 --- */
.nh2_mask_4.nh2_mask_simple { background-image: url(../../pic/mask04_simple.png); }





/* --- Label / Allgemein / Etikettenmaske --- */
.nh2_mask.nh2_mask_label { position: absolute; background: repeat left top; }
.nh2_mask.nh2_mask_label > div { position: absolute; background: no-repeat right center; }

/* --- Label 1 --- */
.nh2_mask_1.nh2_mask_label { background-image: url(../../pic/mask01_label1.png); }
.nh2_mask_1.nh2_mask_label > div { background-image: url(../../pic/mask01_label2.png); }

/* --- Label 2 --- */
.nh2_mask_2.nh2_mask_label { background-image: url(../../pic/mask02_label1.png); }
.nh2_mask_2.nh2_mask_label > div { background-image: url(../../pic/mask02_label2.png); }

/* --- Label 3 --- */
.nh2_mask_3.nh2_mask_label { background-image: url(../../pic/mask03_label1.png); }
.nh2_mask_3.nh2_mask_label > div { background-image: url(../../pic/mask03_label2.png); }

/* --- Label 4 --- */
.nh2_mask_4.nh2_mask_label { background-image: url(../../pic/mask04_label1.png); }
.nh2_mask_4.nh2_mask_label > div { background-image: url(../../pic/mask04_label2.png); }





/* --- Edge / Allgemein / Kantenmaske --- */
.nh2_mask.nh2_mask_edge { position: static; }
.nh2_mask.nh2_mask_edge > div { position: absolute; }
.nh2_mask.nh2_mask_edge > .top { position: absolute; background: repeat left top; top: 0px; left: 0px; right: 0px; }
.nh2_mask.nh2_mask_edge > .bottom { position: absolute; background: repeat left bottom; bottom: 0px; left: 0px; right: 0px; }
.nh2_mask.nh2_mask_edge > .left { position: absolute; background: repeat left top; top: 0px; bottom: 0px; left: 0px; }
.nh2_mask.nh2_mask_edge > .right { position: absolute; background: repeat right top; top: 0px; bottom: 0px; right: 0px; }

/* --- Edge 1 --- */
.nh2_mask_1.nh2_mask_edge > .top { background-image: url(../../pic/mask01_edge1.png); }
.nh2_mask_1.nh2_mask_edge > .bottom { background-image: url(../../pic/mask01_edge2.png); }
.nh2_mask_1.nh2_mask_edge > .left { background-image: url(../../pic/mask01_edge3.png); }
.nh2_mask_1.nh2_mask_edge > .right { background-image: url(../../pic/mask01_edge4.png); }

/* --- Edge 2 --- */
.nh2_mask_2.nh2_mask_edge > .top { background-image: url(../../pic/mask02_edge1.png); }
.nh2_mask_2.nh2_mask_edge > .bottom { background-image: url(../../pic/mask02_edge2.png); }
.nh2_mask_2.nh2_mask_edge > .left { background-image: url(../../pic/mask02_edge3.png); }
.nh2_mask_2.nh2_mask_edge > .right { background-image: url(../../pic/mask02_edge4.png); }

/* --- Edge 3 --- */
.nh2_mask_3.nh2_mask_edge > .top { background-image: url(../../pic/mask03_edge1.png); }
.nh2_mask_3.nh2_mask_edge > .bottom { background-image: url(../../pic/mask03_edge2.png); }
.nh2_mask_3.nh2_mask_edge > .left { background-image: url(../../pic/mask03_edge3.png); }
.nh2_mask_3.nh2_mask_edge > .right { background-image: url(../../pic/mask03_edge4.png); }

/* --- Edge 4 --- */
.nh2_mask_4.nh2_mask_edge > .top { background-image: url(../../pic/mask04_edge1.png); }
.nh2_mask_4.nh2_mask_edge > .bottom { background-image: url(../../pic/mask04_edge2.png); }
.nh2_mask_4.nh2_mask_edge > .left { background-image: url(../../pic/mask04_edge3.png); }
.nh2_mask_4.nh2_mask_edge > .right { background-image: url(../../pic/mask04_edge4.png); }





/* --- StretchX / Allgemein / Horizontal gestreckte Maske --- */
.nh2_mask.nh2_mask_stretchx > div { display: table; table-layout: fixed; width: 100%; }
.nh2_mask.nh2_mask_stretchx > div > div { display: table-cell; }
.nh2_mask.nh2_mask_stretchx .cell1 { background: no-repeat left top; }
.nh2_mask.nh2_mask_stretchx .cell2 { background: repeat left top; }
.nh2_mask.nh2_mask_stretchx .cell3 { background: no-repeat center top; }
.nh2_mask.nh2_mask_stretchx .cell4 { background: repeat right top; }
.nh2_mask.nh2_mask_stretchx .cell5 { background: no-repeat right top; }

/* --- StretchX 1 --- */
.nh2_mask_1.nh2_mask_stretchx .cell1 { background-image: url(../../pic/mask01_stretchx1.png); }
.nh2_mask_1.nh2_mask_stretchx .cell2 { background-image: url(../../pic/mask01_stretchx2.png); }
.nh2_mask_1.nh2_mask_stretchx .cell3 { background-image: url(../../pic/mask01_stretchx3.png); }
.nh2_mask_1.nh2_mask_stretchx .cell4 { background-image: url(../../pic/mask01_stretchx4.png); }
.nh2_mask_1.nh2_mask_stretchx .cell5 { background-image: url(../../pic/mask01_stretchx5.png); }

/* --- StretchX 2 --- */
.nh2_mask_2.nh2_mask_stretchx .cell1 { background-image: url(../../pic/mask02_stretchx1.png); }
.nh2_mask_2.nh2_mask_stretchx .cell2 { background-image: url(../../pic/mask02_stretchx2.png); }
.nh2_mask_2.nh2_mask_stretchx .cell3 { background-image: url(../../pic/mask02_stretchx3.png); }
.nh2_mask_2.nh2_mask_stretchx .cell4 { background-image: url(../../pic/mask02_stretchx4.png); }
.nh2_mask_2.nh2_mask_stretchx .cell5 { background-image: url(../../pic/mask02_stretchx5.png); }

/* --- StretchX 3 --- */
.nh2_mask_3.nh2_mask_stretchx .cell1 { background-image: url(../../pic/mask03_stretchx1.png); }
.nh2_mask_3.nh2_mask_stretchx .cell2 { background-image: url(../../pic/mask03_stretchx2.png); }
.nh2_mask_3.nh2_mask_stretchx .cell3 { background-image: url(../../pic/mask03_stretchx3.png); }
.nh2_mask_3.nh2_mask_stretchx .cell4 { background-image: url(../../pic/mask03_stretchx4.png); }
.nh2_mask_3.nh2_mask_stretchx .cell5 { background-image: url(../../pic/mask03_stretchx5.png); }

/* --- StretchX 4 --- */
.nh2_mask_4.nh2_mask_stretchx .cell1 { background-image: url(../../pic/mask04_stretchx1.png); }
.nh2_mask_4.nh2_mask_stretchx .cell2 { background-image: url(../../pic/mask04_stretchx2.png); }
.nh2_mask_4.nh2_mask_stretchx .cell3 { background-image: url(../../pic/mask04_stretchx3.png); }
.nh2_mask_4.nh2_mask_stretchx .cell4 { background-image: url(../../pic/mask04_stretchx4.png); }
.nh2_mask_4.nh2_mask_stretchx .cell5 { background-image: url(../../pic/mask04_stretchx5.png); }



/* --- StretchY / Allgemein / Vertikal gestreckte Maske --- */
.nh2_mask.nh2_mask_stretchy > div { display: table; table-layout: fixed; height: 100%; }
.nh2_mask.nh2_mask_stretchy > div > div { display: table-row; empty-cells: show; }
.nh2_mask.nh2_mask_stretchy .row1 { background: no-repeat left top; }
.nh2_mask.nh2_mask_stretchy .row2 { background: repeat left top; }
.nh2_mask.nh2_mask_stretchy .row3 { background: no-repeat left center; }
.nh2_mask.nh2_mask_stretchy .row4 { background: repeat left bottom; }
.nh2_mask.nh2_mask_stretchy .row5 { background: no-repeat left bottom; }

/* --- StretchY 1 --- */
.nh2_mask_1.nh2_mask_stretchy .row1 { background-image: url(../../pic/mask01_stretchy1.png); }
.nh2_mask_1.nh2_mask_stretchy .row2 { background-image: url(../../pic/mask01_stretchy2.png); }
.nh2_mask_1.nh2_mask_stretchy .row3 { background-image: url(../../pic/mask01_stretchy3.png); }
.nh2_mask_1.nh2_mask_stretchy .row4 { background-image: url(../../pic/mask01_stretchy4.png); }
.nh2_mask_1.nh2_mask_stretchy .row5 { background-image: url(../../pic/mask01_stretchy5.png); }

/* --- StretchY 2 --- */
.nh2_mask_2.nh2_mask_stretchy .row1 { background-image: url(../../pic/mask02_stretchy1.png); }
.nh2_mask_2.nh2_mask_stretchy .row2 { background-image: url(../../pic/mask02_stretchy2.png); }
.nh2_mask_2.nh2_mask_stretchy .row3 { background-image: url(../../pic/mask02_stretchy3.png); }
.nh2_mask_2.nh2_mask_stretchy .row4 { background-image: url(../../pic/mask02_stretchy4.png); }
.nh2_mask_2.nh2_mask_stretchy .row5 { background-image: url(../../pic/mask02_stretchy5.png); }

/* --- StretchY 3 --- */
.nh2_mask_3.nh2_mask_stretchy .row1 { background-image: url(../../pic/mask03_stretchy1.png); }
.nh2_mask_3.nh2_mask_stretchy .row2 { background-image: url(../../pic/mask03_stretchy2.png); }
.nh2_mask_3.nh2_mask_stretchy .row3 { background-image: url(../../pic/mask03_stretchy3.png); }
.nh2_mask_3.nh2_mask_stretchy .row4 { background-image: url(../../pic/mask03_stretchy4.png); }
.nh2_mask_3.nh2_mask_stretchy .row5 { background-image: url(../../pic/mask03_stretchy5.png); }

/* --- StretchY 4 --- */
.nh2_mask_4.nh2_mask_stretchy .row1 { background-image: url(../../pic/mask04_stretchy1.png); }
.nh2_mask_4.nh2_mask_stretchy .row2 { background-image: url(../../pic/mask04_stretchy2.png); }
.nh2_mask_4.nh2_mask_stretchy .row3 { background-image: url(../../pic/mask04_stretchy3.png); }
.nh2_mask_4.nh2_mask_stretchy .row4 { background-image: url(../../pic/mask04_stretchy4.png); }
.nh2_mask_4.nh2_mask_stretchy .row5 { background-image: url(../../pic/mask04_stretchy5.png); }



/* --- Border / Allgemein / Rahmenmaske --- */
.nh2_mask.nh2_mask_border > div { display: table; table-layout: fixed; width: 100%; height: 100%; }
.nh2_mask.nh2_mask_border > div > div { display: table-row; }
.nh2_mask.nh2_mask_border > div > div > div { display: table-cell; }
.nh2_mask.nh2_mask_border .row1 .cell1 { background: no-repeat left top; }
.nh2_mask.nh2_mask_border .row1 .cell2 { background: repeat-x left top; }
.nh2_mask.nh2_mask_border .row1 .cell3 { background: no-repeat right top; }
.nh2_mask.nh2_mask_border .row2 .cell1 { background: repeat-y left top; }
.nh2_mask.nh2_mask_border .row2 .cell2 { background: repeat left top; }
.nh2_mask.nh2_mask_border .row2 .cell3 { background: repeat-y right top; }
.nh2_mask.nh2_mask_border .row3 .cell1 { background: no-repeat left bottom; }
.nh2_mask.nh2_mask_border .row3 .cell2 { background: repeat-x left bottom; }
.nh2_mask.nh2_mask_border .row3 .cell3 { background: no-repeat right bottom; }

/* --- Border 1 --- */
.nh2_mask_1.nh2_mask_border .row1 .cell1 { background-image: url(../../pic/mask01_border1.png); }
.nh2_mask_1.nh2_mask_border .row1 .cell2 { background-image: url(../../pic/mask01_border2.png); }
.nh2_mask_1.nh2_mask_border .row1 .cell3 { background-image: url(../../pic/mask01_border3.png); }
.nh2_mask_1.nh2_mask_border .row2 .cell1 { background-image: url(../../pic/mask01_border4.png); }
.nh2_mask_1.nh2_mask_border .row2 .cell2 { background-image: url(../../pic/mask01_border5.png); }
.nh2_mask_1.nh2_mask_border .row2 .cell3 { background-image: url(../../pic/mask01_border6.png); }
.nh2_mask_1.nh2_mask_border .row3 .cell1 { background-image: url(../../pic/mask01_border7.png); }
.nh2_mask_1.nh2_mask_border .row3 .cell2 { background-image: url(../../pic/mask01_border8.png); }
.nh2_mask_1.nh2_mask_border .row3 .cell3 { background-image: url(../../pic/mask01_border9.png); }

/* --- Border 2 --- */
.nh2_mask_2.nh2_mask_border .row1 .cell1 { background-image: url(../../pic/mask02_border1.png); }
.nh2_mask_2.nh2_mask_border .row1 .cell2 { background-image: url(../../pic/mask02_border2.png); }
.nh2_mask_2.nh2_mask_border .row1 .cell3 { background-image: url(../../pic/mask02_border3.png); }
.nh2_mask_2.nh2_mask_border .row2 .cell1 { background-image: url(../../pic/mask02_border4.png); }
.nh2_mask_2.nh2_mask_border .row2 .cell2 { background-image: url(../../pic/mask02_border5.png); }
.nh2_mask_2.nh2_mask_border .row2 .cell3 { background-image: url(../../pic/mask02_border6.png); }
.nh2_mask_2.nh2_mask_border .row3 .cell1 { background-image: url(../../pic/mask02_border7.png); }
.nh2_mask_2.nh2_mask_border .row3 .cell2 { background-image: url(../../pic/mask02_border8.png); }
.nh2_mask_2.nh2_mask_border .row3 .cell3 { background-image: url(../../pic/mask02_border9.png); }

/* --- Border 3 --- */
.nh2_mask_3.nh2_mask_border .row1 .cell1 { background-image: url(../../pic/mask03_border1.png); }
.nh2_mask_3.nh2_mask_border .row1 .cell2 { background-image: url(../../pic/mask03_border2.png); }
.nh2_mask_3.nh2_mask_border .row1 .cell3 { background-image: url(../../pic/mask03_border3.png); }
.nh2_mask_3.nh2_mask_border .row2 .cell1 { background-image: url(../../pic/mask03_border4.png); }
.nh2_mask_3.nh2_mask_border .row2 .cell2 { background-image: url(../../pic/mask03_border5.png); }
.nh2_mask_3.nh2_mask_border .row2 .cell3 { background-image: url(../../pic/mask03_border6.png); }
.nh2_mask_3.nh2_mask_border .row3 .cell1 { background-image: url(../../pic/mask03_border7.png); }
.nh2_mask_3.nh2_mask_border .row3 .cell2 { background-image: url(../../pic/mask03_border8.png); }
.nh2_mask_3.nh2_mask_border .row3 .cell3 { background-image: url(../../pic/mask03_border9.png); }

/* --- Border 4 --- */
.nh2_mask_4.nh2_mask_border .row1 .cell1 { background-image: url(../../pic/mask04_border1.png); }
.nh2_mask_4.nh2_mask_border .row1 .cell2 { background-image: url(../../pic/mask04_border2.png); }
.nh2_mask_4.nh2_mask_border .row1 .cell3 { background-image: url(../../pic/mask04_border3.png); }
.nh2_mask_4.nh2_mask_border .row2 .cell1 { background-image: url(../../pic/mask04_border4.png); }
.nh2_mask_4.nh2_mask_border .row2 .cell2 { background-image: url(../../pic/mask04_border5.png); }
.nh2_mask_4.nh2_mask_border .row2 .cell3 { background-image: url(../../pic/mask04_border6.png); }
.nh2_mask_4.nh2_mask_border .row3 .cell1 { background-image: url(../../pic/mask04_border7.png); }
.nh2_mask_4.nh2_mask_border .row3 .cell2 { background-image: url(../../pic/mask04_border8.png); }
.nh2_mask_4.nh2_mask_border .row3 .cell3 { background-image: url(../../pic/mask04_border9.png); }