@import url("../fonts/news_gothic.css");

/*
 color:
 red: #d4021d;
 gray:#676767
 lightgray:#CEC9C5
*/

.debugCon{
	font-size:0.6em;
}


body{
	font-family: news-gothic-std, sans-serif;
	overflow:hidden;
	
	letter-spacing:0.1em;
}

hr{
	width: 100%;
}

/*******************Scrollbar****************************/
/* width */
::-webkit-scrollbar {
  width: 1em;
  
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
   
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #444; 
  /*border-radius:0.3em;*/
  
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d4021d;
  
}

#swipebox-overlay {
    /*background: rgba(206,201,197,0.75) !important;*/
    background: rgba(0,0,0,0.95) !important;
}


/*******************Scrollbar****************************/

/*FOR EMO*/
.product_submenu .itemRow a:has(.insideBTN){
	display:none !important;
}

.insideBTN{
	display:none !important;
}
/*FOR EMO END*/


.wrapper{
	width:100%;
	height:100vh;
	overflow:hidden;
	
	background:url(../img/arno_startscreen13.jpg);
	background-size:cover;
}

.logo{
	position:absolute;
	top:2em;
	right:2em;
	width:15%;
	padding: 0.5em;
    background: rgba(255,255,255,0.85);
    border-radius: 0.25em;
}

.logo a{
	display:block;
}

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

.leftCorner{
	position:absolute;
	top:2em;
	left:0;
}

.langmenu{
	margin-left:2em;
}

.langmenu a{
	font-size:1.5em;
	color: #d4021d;
	border-right: 0.15em solid #d4021d;
	text-decoration:none;
	padding:0 0.5em 0 0.5em;
	font-weight:normal;
}

.langmenu .act{
	font-weight:bold;
}


.langmenu a:last-child{
	border:none;
}



.hmenuBTN{
	background:#d4021d;
	width:7em;
	margin-top:1em;
	
}

.hmenuBTN img{
	text-align: right;
    width: 35%;
    margin: 0.5em 0 0.5em 3em;

}

.claim{
	width:12%;
	position:absolute;
	bottom:2em;
	right:2em;
}

.content{
	position: absolute;
    top: 12vh;
    left: 15%;
    width: 70%;
    height: 72vh;
    transition: 0.5s;
    z-index:10;
    
}

.popOpenButton{
	color:white !important;
	background:#d4021d;
	border-radius:0.25em;
	border:3px solid #d4021d;
	text-align:center;
	padding:0.5em 1em 0.5em 1em;
	transition:0.5s;
}

.popOpenButton:hover{
	text-decoration:none !important;
	color:#d4021d !important;
	background:white;
}

.content li{
	margin:0.25em 0 0.25em 0;
}


.defaultpage.fullsizeCont,.content.fullsizeCont{
	margin-top:3vh;
}

.fullsizeCont{
	position: absolute;
    top: 0vh;
    left: 2%;
    width: 96%;
    height: 87vh !important;
}

.content td:first-child{
	border-left:1px solid #CEC9C5;
	
}

.content tr:last-child td{
	border-bottom:1px solid #CEC9C5;
}

.content td{
	vertical-align: top;
	border-top:1px solid #CEC9C5;
	padding:0.5em;
	border-right:1px solid #CEC9C5;
}

.elementBlock{
	float:left;
	width:100%;
}

.textBlock{
	float:left;
	width:50%;
}

.elementBlock .mediaBlock{
	float:left;
	width:49%;
	margin-left:1%;
	
}


.yt_frame{
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.yt_frame iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.content a{
	color:#d4021d;
	text-decoration:none;
}

.content a:hover{
	text-decoration:underline;	
}


.backBTN{
	position:absolute;
	bottom:2em;
	left:2em;
	width:2em;
	cursor:pointer;
}


.spaced{
	margin-top: 16em !important;
}
/***************Sidebarmenu**********************/
.sidemenu{
	position:absolute;
	top:20vh;
	left:0;
	max-height:70vh;
	
}

.sidebarElements{
	float:left;
}

.sidebarElements a{
	text-decoration:none;
}

.SideMenuTile{
	width:8em;
	height:8em;
	color:white;
	background:#d4021d;
	border:0.2em solid #d4021d;
	text-align:center;
	font-size:1.5em;
	margin:0 2em 2em 2em;
	padding-top:3em;
}

.SideMenuTile:hover{
	border:0.2em solid white;
}

.sidebarTile{
	float:left;
	background:#d4021d;
	height: 42em;
	padding-top:20em;
	cursor:pointer;
}

.sidebarTile img{
	width:2em;
	height:auto;
}

/***************Sidebarmenu END**********************/
/***************MainMENU**********************/
.mainMenu{
	display:none;
	position:absolute;
	top:0;
	left:0;
	background:white;
	color:black;
	border:0.2em solid #d4021d;
	width:100%;
	height:100vh;
	z-index:999;
	overflow-y: scroll;
    overflow-x: hidden;
    padding:2em 2em 1em 2em;
}

.mainMenu a{
	color:#d4021d;
	font-weight:bold;
	font-size:1.3em;
	text-decoration:none;
}

.mainMenu .subs a{
	color:black;
	text-decoration:none;
	font-weight:normal;
	font-size:1em;
	font-weight:bold;
}

.mainMenu .subs ul li a{
	font-weight:normal;
}


.chapter{
	margin-bottom:2em;
	padding:0 0.5em 0 0.5em;
	
}


.menuClose{
	position:absolute;
	top:1em;
	right:1em;
	width:2em;
	cursor:pointer;
}

.subs{
	
	list-style:none;
	border-top:2px solid #d4021d;
	padding:0;
}

.subs li{
	width:100%;
	float:left;
	margin:0.5em 0 0.5em 0;
}

.subs li ul{
	display:none;
	list-style-image: url('../img/icons/list-style.svg');
}

.subs li ul li{
	margin:0.3em 0 0.3em 0;
	width:100%;
}

/***************MainMENU END**********************/
.pdf_box{
	
	cursor:pointer;
}
.pdf_box img{
	width:100%;
	height:auto;
	border:2px solid lightgray;
}

.pdf_box a{
	display:block;
	text-decoration:none;
	color:black;
}

.pdf_box:hover  img{
	border:2px solid #d4021d;
}

.pdf_box:hover a{
	color:#d4021d;
}

.popup{
	display:none;
	position:absolute;
	top:5vh;
	left:5%;
	width:90%;
	height:90vh;
	background:white;
	border:0.2em solid #d4021d;
	overflow:hidden;
	z-index: 50;
	
}
.popupcontent a{
	color:#d4021d;
}
.popupClose{
	position:absolute;
	top:1em;
	right:1em;
	width:2em;
	cursor:pointer;
}

.popupcontent{
	width: 100%;
    height: 80vh;
    position: absolute;
    top: 6vh;
    overflow-y:scroll;
	overflow-x:hidden;
}

.pdfFrame{
	width:100%;
	height:80vh;
}
/***************TILE MENU**********************/

.tileMenu{
	/*
	position: absolute;
    top: 3vh;
    left: 0%;
    */
    width: 100%;
	display:flex;	
	align-items: center;
    justify-content: center;
    text-align:center;
    transition: 0.5s;
    
}

.tilerow{
	display:flex;	
	align-items: center;
    justify-content: center; 
    width:100%;
}

.tileItem {
	display:flex;	
	align-items: center;
    justify-content: center;
	width:11.1em;
	height:11.1em;
	text-align:center;
	vertical-align: middle;
	font-size:1.1em;
	background:#d4021d;
	border:0.2em solid #d4021d;
	transition: 0.25s;
	margin:1em;
}

.tileMenu_template .tileItem{
	-webkit-box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64); 
	box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64);
}

.tileMenu a{
	color:white;
	text-decoration:none;
	/*display:none;*/
	
}

.tileMenu a:hover{
	text-decoration:none;
}

.tileMenu a:hover .tileItem{
	border:0.2em solid white;
}

.tileMenu a:hover .arnopedia div{
	border:0.1em solid white;
}

.arnopedia{
	display:flex;	
	align-items: center;
    justify-content: center;
	text-align:center;
	transition: 0.25s;
	/*for full width
	margin-top: 1em;
	*/
	margin: 0 1em 0 1em;
}

.arnopedia div{
	width: 20.5em;
    height: 9.6em;
    margin: 0 auto;
    font-size: 1.3em;
    background: url(../img/button_arnopedia.jpg);
    background-position-x: center;
    background-size: cover;
    padding: 4em 50% 0 0;
    transition: 0.25s;
	/* for full width
	width:31.5em;
	height:10.1em;
	margin:0 auto;
	font-size: 1.3em;
	background:url(../img/button_arnopedia.jpg);
	background-size:cover;
	padding:4em 50% 0 0;
	transition: 0.25s;
	*/
}

/***************TILE MENU END**********************/
/***************Prod MENU**********************/
.productMenu{
	margin-top:5vh;
}
.prodMenuItem{
	margin-bottom:2em;
}

.prodMenuItem .inner{
	position:relative;
	background-size:cover;
	background-repeat:no-repeat;
	height:12em;
	border:0.2em solid #d4021d;
	
}

.prodMenuItem:hover .inner div{
	color:#d4021d;
}

.prodMenuItem .inner div{
	position:absolute;
	bottom:1em;
	left:1em;
	color:black;
	font-weight:bold;
	font-size:1.3em;
}

/***************Prod MENU**********************/
.product_submenu{
	position: absolute;
    top: 72vh;
    left: 13%;
    width: 74%;
    display:flex;	
	align-items: center;
    justify-content: center;
    text-align:center;
    
}

.product_submenu .itemRow{
	display:flex;	
	align-items: center;
    justify-content: center;
	
}
.product_submenu .prod_sub_item{
	display:flex;	
	align-items: center;
    justify-content: center;
	width:10.25vw;
	height:10.25vw;
	margin-top: 1em;
	/*
	width:11.1em;
	height:11.1em;
	
	*/
	text-align:center;
	vertical-align: middle;
	
	border: 0.2em solid #d4021d;
	background: #d4021d;
	font-size: 1.1em;
	transition: 0.25s;
}

.product_submenu a{
	color: white;
	text-decoration: none;
	margin:1em; 
	
}
.product_submenu a:hover .prod_sub_item{
	border: 0.2em solid white;
}



/***************product_submenu**********************/

/***************product_submenu END**********************/

/***************Login / Update form**********************/

.loginformfields, .downLoadfields{
	position: absolute;
    top: 40vh;
    width: 33%;
    margin: 0 33%;
	text-align:center;
	background:white;
	border-radius:0.5em;
	border:2px solid #d4021d;
	padding:1em;
	-webkit-box-shadow: 0px 3px 15px 2px rgba(0,0,0,0.64); 
	box-shadow: 0px 3px 15px 2px rgba(0,0,0,0.64);
}

.formInput{
	padding:0.5em 0 0.5em 0;
	font-size:1em;
}

.loginformfields label{
	width:6em;
	text-align:left;
}

.loginformfields input{
	border-radius:0.5em;
	border:1px solid #d4021d;
	padding:0.25em;
	font-size:1em;
}

.loginformfields input[type=Button],
.downLoadfields input[type=Button]{
	background:#d4021d;
	color:white;
	padding:0.25em 1em;
	font-weight:bold;
	border:2px solid #d4021d;
	margin:0 0.25em 0 0.25em;
	transition:0.5s;
}

.loginformfields input[type=Button]:hover,
.downLoadfields input[type=Button]:hover,
#axxella_updateLater{
	background:white;
	color:#d4021d;
}

.downLoadfields progress{
	width:80%;
	accent-color: #d4021d;
}

/***************Login / Update form END**********************/


/***************Product Page**********************/
.productpage{
	background: white;
    border: 0.2em solid #d4021d;
    margin-top: 1vh;
   
    height: 59vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1.5em 1.5em 1em 1.5em
}

.fullpage{
	height:75vh;
}

h1{
	color:#d4021d;
	font-size:1.5em;
	font-weight:bold;
	margin-bottom: 1em;
}

h2{
	font-size:1.3em;
	font-weight:bold;
}

h3{
	font-size:1em;
	font-weight:bold;
	margin-bottom: 1em;
}

.img_DESC{
	margin-bottom:2em;
}

.img_DESC .desc{
	font-size:0.85em;
	text-align:right;
}


/***************Product Page END**********************/
/***************Archiv Page**********************/

.archivMenu{
	width:60em;
	margin:0 auto;
	margin-top:20vh;
}

.archivMenu a{
	float:left;
	text-decoration:none;
	margin:1em;
}
.archivTile{
	width:8em;
	height:8em;
	color:white;
	background:#d4021d;
	text-align:center;
	font-size:1.5em;
	margin:0 2em 2em 2em;
	padding-top:3em;
}

/***************Archiv Page END**********************/

.defaultpage{
	background:white;
	border:0.2em solid #d4021d;
	margin-top:1vh;
	height:75vh;
	overflow-y:scroll;
	overflow-x:hidden;
	padding: 1.5em 1.5em 1em 1.5em;
}
/***************Kostenrechner**********************/

.kostenrechner{
	background:white;
	overflow-y:scroll;
	overflow-x:hidden;
	padding:1em;
	height: 77vh;
}

.kostenrechner h2{
	color:#d4021d;
	font-size:1.5em;
	margin:0.5em 0 0.5em 0.5em;
}

.tableCalc{
	display:table;
	display: table;
    padding-left: 1em;
    margin-top: 2em;
    font-size: 0.9em;
}

.tableRow{
	display: table-row;
	/*float:left;*/
	width:100%;
	
	
	font-size:1.2em;
	text-align:center;
}

.tableRow .field{
	display: table-cell;
	/*float:left;*/
	position:relative;
	padding:0em 0.5em 0.3em 0em;
	vertical-align: middle;
	font-weight:bold;
}

.tableRow .field input{
	width:100%;
	text-align: center;
	font-weight:bold;
}

.tableRow.ergebnis{
	color:#d4021d;
	font-weight:bold;
	margin-bottom:2em;
}

.tableRow.ergebnis .field{
	padding-bottom: 2em;
}

/*
.tableRow.ergebnis .field:first-child,
.tableRow.ergebnis .field:nth-child(2),
.tableRow.ergebnis .field:nth-child(3){
	border-bottom:2px solid #676767;
}
*/


.tableRow .filed_one{
	width:20%;
	text-align:left;
}

.tableRow .filed_two{
	width:22%;
}

.tableRow .filed_three{
	width:22%;
}

.tableRow .filed_four{
	width:14%;
	
}

.tableRow .filed_five{
	width:20%;
}

.tableRow .arrow{
	position:absolute;
	width:100%;
	height:auto;
	left: 0;
	display:none;
}

.tableRow .arrow1{
	top: -10.75em;
}
.tableRow .arrow2{
	top: 0em;
}
.tableRow .arrow3{
	top: -0.5em;
}

.tableRow .cross{
	color:#676767;
	font-weight:bold;
	text-align:center;
	width:100%;
	margin:1em 0 0em 0;
	font-size:1.5em;
}
.valuebubble{
	text-align:center;
	display:none;
}
.valuebubble span{
	font-size:1.5em;
	padding-left: 0.5em;
}

.valuebubble p{
	font-size:0.8em;
	text-align:center;
	
}

#einpsarung_kauf{
	position:absolute;
	top:-15.5em;
	left:0;
	background:url(../img/kostenrechner/pro_schneide_einsparung_im_einkauf.svg);
	background-size:100% 100%;
	width:11em;
	height:11em;
	color:white;
	padding:3em 2.75em 4em 1.5em;
	text-align:left;
}

#einpsarung_bauteil{
	position:absolute;
	top:-4.5em;
	left:0;
	background:url(../img/kostenrechner/einsparung_pro_bauteil.svg);
	background-size:100% 100%;
	width:11em;
	height:11em;
	color:white;
	padding:3em 2.75em 4em 1.5em;
	text-align:left;
}

#gesammt_ergebnis{
	position:absolute;
	top:-6em;
	left:0;
	background:url(../img/kostenrechner/einsparung_a_gesamt_pro_jahr.svg);
	background-size:100% 100%;
	width:13em;
	height:13em;
	color:white;
	padding:3.9em 2.75em 4em 1em;
	text-align:left;
}

#gesammt_ergebnis span{
	font-size:1.8em;
    padding-left: 0.5em;
}



.rechner_ctrl{
	position:absolute;
	bottom:3vh;
	left: 31%;
    width: 70%;
	
}

.fullsizeCalc .tableRow{
	font-size:1.3em;
}

.fullsizeCalc .tableRow .field{
	padding:0.5em 0.5em 0.3em 0.75em;
}

.fullsizeCalc .tableRow .filed_four {
    width:12%;
}
.fullsizeCalc .tableRow .arrow1 {
    top: -12.25em;
}

.fullsizeCalc .tableRow .arrow3 {
    top: -0.25em;
}

.fullsizeCalc #einpsarung_kauf{
	top: -16.5em;
}
.fullsizeCalc #gesammt_ergebnis{
	top: -5.5em;
}

.fullsizeCalc .tableRow.ergebnis .field{
	padding-bottom: 2em;
}

.formbutton{
	float:left;
	width:25%;
	height:3em;
	background:#d4021d;
	color:white;
	text-align:center;
	margin:0 3% 0 0;
	padding-top:0.75em;
	border:2px solid #d4021d;
	cursor:pointer;
}
.formbutton:hover{
	background:white;
	color:#d4021d;
}


.kostenrechner .screenCtrl, .kostenrechner_2 .screenCtrl,.screenCtrl{
	position:absolute;
	top:1em;
	right:1em;
	width:2em;
	height:2em;
	cursor:pointer;
}

.kostenrechner .screenCtrl a, .kostenrechner_2 .screenCtrl a,.screenCtrl a{
	width:2em;
	height:2em;
	display:block;
}


.kostenrechner .fullsize, .kostenrechner_2 .fullsize,.screenCtrl.fullsize{
	background:url(../img/icons/fullscreen.svg);
	background-size:100% 100%;
}
.kostenrechner .smallsize, .kostenrechner_2 .smallsize,.screenCtrl.smallsize{
	background:url(../img/icons/smallsize.svg);
	background-size:100% 100%;
}

.fullsizeCalc{
	width: 100%;
	top: 0vh !important;
    left: 0%;
    height: 90vh !important;
}


/***************Kostenrechner END**********************/
/***************Kostenrechner 2**********************/
.kostenrechner_2{
	background:white;
	overflow-y:scroll;
	top:12vh;
	height:78vh;
}

.kostenrechner_2 .tableCalc2{
	width:49%;
	float:left;
}

.kostenrechner_2 h2{
	color:#d4021d;
	font-size:1.5em;
	margin:0.5em 0 0.5em 0.5em;
}
.kostenrechner_2 .tableCalc2{
	display: table;
    padding-left: 1em;
    margin-top: 2em;
    font-size:1em;	
}

.kostenrechner_2 .halfwidth:first-child{
	margin-right:2%;
}

.kostenrechner_2 .halfwidth{
	width:49% !important;
	float:left;
	
}

.kostenrechner_2 .aktuell{
	background:#676767;
	color:white;
	border:none;
}

.kostenrechner_2 .nacher{
	background:#d4021d;
	color:white;
	border:none;
}

.kostenrechner_2 .filed_one select{
	width:90%;
}
.kostenrechner_2 select{
	width:100%;
	text-align:center;
}

.kostenrechner_2 .field{
	padding:0.25em 0 0.25em;
}

.kostenrechner_2 .arrow_black{
	height:1em;
	width:auto;
	float:left;
	margin-top: 0.2em;
}

.kostenrechner_2 .final{
	font-size:1.5em;
	color:#676767;
	padding-top:1em;
}


.kostenrechner_2 .zwischen .filed_two{
	display:none;
	border:2px solid #d4021d;	
	float: left;
    width: 100%;
}

.kostenrechner_2 .zwischen .value{
	float:left;
	width:39%;
}

.tableRow .ergebnis{
	position:relative;
}

.kostenrechner_2 #einsparung_jahr{
	display:none;
	font-size: 2em;
    position: absolute;
    left: 0em;
    top: 0.5em;
    width: 7.5em;
    height: 7.5em;
    background: url(../img/kostenrechner/kreis_jahr_an_materialkosten.svg);
    background-size: 100% 100%;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 2.4em 1em 0em 0;
}

.kostenrechner_2 #einsparung_bauteil{
	display:none;
	font-size: 1.75em;
    position: absolute;
    top: 2.5em;
    left: -8em;
    width: 7.6em;
    height: 7.6em;
    border-radius: 50%;
    background: #d4021d;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 1.8em 0 0em 0;
}



/***************Kostenrechner 2 END**********************/

/***************Teaser Page**********************/
.teaserItem{
	background:white;
	border:2px solid #d4021d;
	padding:0.5em;
}

.teaserItem img{
	width:100%;
	margin-bottom:1em;
}

.teaserItem h3{
	font-size:1.25em;
}

.teaserItem .teaserbtn{
	width:90%;
	text-align:center;
	color:white;
	background:#d4021d;
	font-size:1.3em;
	border:2px solid #d4021d;
	margin:1em 5% 0.5em 5%;
}

.teaserItem .teaserbtn:hover{
	background:white;
}

.teaserItem .teaserbtn:hover a{
	color:#d4021d;
}

.teaserItem .teaserbtn a{
	color:white;
	text-decoration:none;
	display:block;
}


/***************Teaser Page END**********************/
/***************ProductDetail Page**********************/

.product_detail #headline h1, .centered h1{
	text-align:center;
	color:black;
	text-transform: uppercase;
}



.popupcontent{
	padding:1em;
}

.popupcontent .pdf_box{
	float:left;
	width:15em;
	margin:1em 1em 1em 0;
}

.popupcontent .video_box{
	float:left;
	width:30em;
	margin:1em 1em 1em 0;
}
.video_box video{
	width:100%;
	height:auto;
	border:1px solid lightgray;
}



.popupcontent .img_element{
	width:31%;
	overflow:auto;
	float:left;
	margin:0 1% 1% 1%;
}

.popupcontent .img_element img{
	float:left;
	width:100%;
	/*margin:1em 1em 1em 0;*/
	margin-bottom:1em;
	border:1px solid lightgray;
}

svg text{
	font-weight:bold;
	
}

/***************ProductDetail Page END**********************/
/***************REST Products**********************/
.restProduct #headline h1{
	text-transform: uppercase;
	color:black;
	text-align:center;
	font-size: 2em;
}

.restProduct #headline h4{
	color:#707070;
	font-size:1em;
	text-align:center;
}

.restProduct h2{
	text-transform: uppercase;
	color:black;
}

.restProduct h4{
	font-size:1em;
	font-weight:bold;
	margin-bottom:1em;
}
.restProduct #headline h1 span{
	color:#d4021d;
}






.toolboxBTN{
	border:2px solid #d4021d;
	background:#d4021d;
	color:white;
	padding:1em;
	margin:0 0 1em 1em;
	cursor:pointer;
}

.toolboxBTN:hover , .toolbox .act{
	color:#d4021d;
	background:white;
}

.toolbox{
	padding-bottom:1em;
	border-bottom:2em solid #d4021d;
	margin-bottom:2em;
}

.noBorder{
	border-bottom:none;
}

.imageframe{
	position:relative;
}

.toolboxContent{
	display:none;
	position:absolute;
	top:0;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.63);
	width:100%;
	height:100%;
	padding:1em;
	overflow-y:scroll;
	overflow-x:hidden;
}

.toolboxContent p{
	margin:0 ;
}

.csBox{
	margin-top:1em;
}


.unityFrame{
	width: 96%;
    height: 90vh;
    /* top: 2vh; */
    margin-top: 2vh;
    margin-left: 2vh;
}

/***************REST Products END**********************/
/***************newsarea**********************/
.newsArea{
	position:absolute;
	bottom:0;
	left:2.5em;
	background:rgba(255,255,255,0.8);
	border-radius:0.25em 0.25em 0 0;
	border-top:2px solid #d4021d;
	border-left:2px solid #d4021d;
	border-right:2px solid #d4021d;
	width:20%;
	margin:2em 0 0em 0em;
	padding:1em;
	z-index:999;
	-webkit-box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64); 
	box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64);
}

.newsArea .newsClose{
	position:absolute;
	top:0.5em;
	right:0.5em;
	width:1.5em;
	cursor:pointer;
	display:block;
}

.newsArea .newsClose img{
	width:100%;
	height:auto;
}

.newsArea h2{
	font-size: 1.5em;
	margin:0.5em 0 1em 0;
}
.newsArea p{
	line-height:200%;
}
.newsArea a{
	color:#d4021d;
	text-decoration:none;
}

.newsArea a:hover{
	text-decoration:underline;
}

/***************newsarea end**********************/
/***************search**********************/
.searchbar{
	position:absolute;
	top:25vh;
	left:25%;
	width:50%;
}

.tileMenu_template .searchbar{
	position:relative;
	top:0;
	left:25%;
	width:48%;
	float:left;
	margin-top:1em;
	margin-bottom:1.25em;
}

.tileMenu_template .searchResults{
	position: relative;
	float:left;
	top: 0;
	height:62vh;
	overflow-y:scroll;
	left: 15%;
    width: 70%;
    margin:1em 0 1em 0;
}

.searcharea .searchbar{
	position:relative;
	top:0;
	left:0;
	width:100%;
	float:left;
	margin-top:1em;
}

.searcharea .searchResults{
	display:none;
	top: 30vh;
	height:62vh;
	overflow-y:scroll;
	left: 25%;
    width: 50%;
}



.searchClose img{
	width:100%;
	height:auto;
}

#searchField{
	float:left;
	width:80%;
	font-size:1.3em;
	border-radius:0.25em 0 0 0.25em;
	border:none;
	height:2em;
	padding:0.25em;
	-webkit-box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64); 
box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64);
}




.searchBTN{
	float:left;
	background:#d4021d;
	color:white;
	width:20%;
	height:2em;
	border:2px solid #d4021d;
	border-radius:0 0.25em 0.25em 0;
	padding: 0.25em;
	text-align:center;
	font-size:1.3em;
	transition: 0.25s;
	-webkit-box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64); 
box-shadow: 4px 2px 15px 2px rgba(0,0,0,0.64);
    cursor:pointer;
}

.searchBTN:hover{
	border:2px solid white;
}

.searchResults{
	display:none;
	top: 30vh;
	height:62vh;
	overflow-y:scroll;
	left: 25%;
    width: 50%;
}

.resultItem{
	background:white;
	border:2px solid white;
	margin:2em;
	padding:1em;
	
	cursor:pointer;
	transition: 0.5s;
	-webkit-box-shadow: 8px 5px 15px 5px #757575; 
    box-shadow: 8px 5px 15px 5px #757575;
}

.resultItem h3{
	font-size:1.75em;
}

.resultItem:hover{
	border:2px solid #d4021d;
}

.searchMore{
	background:#d4021d;
	padding:0.5em;
	color:white;
	width: 5em;
	text-align:center;
}

.resultItem a{
	display:block;
}

.resultItem:hover a, .resultItem a:hover{
	text-decoration:none;
}


/***************search END**********************/
/***************Accsess**********************/

.msgScreen .row div{
	margin-top:15vh;
	background:white;
	border-radius:1em;
	border:2px solid #d4021d;
	-webkit-box-shadow: 8px 5px 15px 5px #757575; 
    box-shadow: 8px 5px 15px 5px #757575;
}

.msgScreen img{
	width:33%;
	margin:2em 33% 2em 33%
 }

 .msgScreen h1{
	text-align:center;
 }

 .msgScreen a{
	text-align:center;
 }

.msgScreen p{
	font-size:1.5em;
	text-align: center;
}

 .msgScreen a img{
	height:1.3em;
	width:auto;
	margin:-0.15em 0 0 0;
 }

/***************Accsess END**********************/
@media only screen and (min-width:1921px) and (max-width: 2600px) {
	.tileMenu_template{
		font-size: 1.5em;
	}

}
@media only screen and (min-width: 1441px) and (max-width: 1680px) {
	.kostenrechner{
		font-size: 0.8em;
	}
	
	.tableRow .field{
		padding: 0.3em 0.5em 0.3em 0.5em;
	}
	
	.tableRow .arrow1{
	    top: -11.75em;
	}
	#einpsarung_kauf{
		top: -16em;
	}
	.fullsizeCalc .tableRow .arrow1 {
    top: -9.25em;
	}
	.fullsizeCalc .tableRow {
	    font-size: 1.6em;
	}
	
	.fullsizeCalc #einpsarung_kauf {
    	top: -14em;
	}
	
	.fullsizeCalc .tableRow .filed_four {
	    width: 11%;
	}
	
	.tileMenu_template .searchbar{
		left: 21%;
   		width: 56%;
	}
	
	
}
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
	body{
		font-size:0.8em;
	}
	.content h2{
		font-size:1.6em;
	}
	
	.content p, .content li, .content table, .content h3{
		font-size:1.3em;
	}
	
	.content li li{
		font-size:1em;
	}
	
	.logo {
	    width: 12.5%;
	}
	
	.langmenu a {
		font-size:1em;
	}
	
	.hmenuBTN{
		width:5em;
	}
	
	.hmenuBTN img{
		width:33%;
	}
	
	.tileItem div{
		font-size:1.3em;
	}
	.tileMenu {
   		 margin-top: 1.4em;
	}
	
	.prod_sub_item div{
		height: 10.5em;
		display:block;
	}
	
	.prod_sub_item div a{
		font-size: 1em;
		padding-top: 3.2em;
		display:block;
		/*font-size:0.8em;*/
	}
	
	.prodMenuItem .inner{
		/*font-size:0.8em;*/
	}
	.kostenrechner{
		font-size: 0.94em;
	}
}

/*media_w classes (MediaCols)*/
.media_w_1{
	float:left;
	width:100%;
	margin:1% 0% 1% 0;
}


.media_w_2{
	float:left;
	width:49%;
	margin:1% 1% 1% 0;
}

.media_w_3{
	float:left;
	width:32%;
	margin:1% 1% 1% 0;
}

.media_w_4{
	float:left;
	width:24%;
	margin:1% 1% 1% 0;
}

.media_w_5{
	float:left;
	width:19%;
	margin:1% 1% 1% 0;
}

.media_w_6{
	float:left;
	width:15.5%;
	margin:1% 1% 1% 0;
}

.media_w_7{
	float:left;
	width:13.2%;
	margin:1% 1% 1% 0;
}

.media_w_8{
	float:left;
	width:11.5%;
	margin:1% 1% 1% 0;
}

@media only screen and (min-width: 1300px) and (max-width: 1400px) {
	.tableRow .field{
		padding:0.3em 0.5em 0.3em 0.5em;
	}
	
	.tableRow .arrow1 {
    	top: -10em;
	}
	
	.tableRow .arrow2 {
	    top: 0.5em;
	}
	
	
	
	
	#einpsarung_bauteil{
		top: -4em;
	}
	
	.tableRow .arrow3 {
    	top: 0.5em;
	}
	
	#gesammt_ergebnis {
		top: -5em;
	}
	
	.fullsizeCalc .tableRow .arrow1 {
    	top: -11.5em;
	}
	
	.fullsizeCalc .tableRow .arrow2 {
    	top: 0em;
	}
	
	.kostenrechner_2{
		left: 8%;
    	width: 85%;
	}
	
	
	
	
}
@media only screen and (min-width: 1600px) and (max-width: 1670px) {
	
	.product_submenu .prod_sub_item{
		
		width:10.0vw;
		height:10.0vw;
	
	}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
	
	.product_submenu .prod_sub_item{
		
		width:9.8vw;
		height:9.8vw;
	
	}
}

@media only screen and (min-width: 1300px) and (max-width: 1470px) {
	
	.product_submenu .prod_sub_item{
		
		width:10vw;
		height:10vw;
	
	}
	
	.tileMenu_template .searchbar{
		left: 21%;
   		width: 55.5%;
	}
	
	
}


@media only screen and (min-width: 1025px) and (max-width: 1280px) {
	
	.kostenrechner{
		font-size: 0.666em;
		top: 20vh;
		height: 70vh;
	}
	
	.product_submenu{
		font-size:0.9em;
	}
	
	.product_submenu .prod_sub_item{
		display:table-cell;
		width:9.7vw;
		height:9.7vw;
		
	
	}
	
	.tileMenu_template{
		font-size: 0.75em;
	}
	
	.tileMenu_template .searchbar{
		left: 14%;
	    width: 68.5%;
	}
	.newsArea{
		width:25%;
	}
	
	
}

@media only screen and (min-width: 1025px) and (max-width: 1230px) {
	
	.product_submenu .prod_sub_item{
		display:table-cell;
		width:9.0vw;
		height:9.0vw;
		font-size:0.8em;
	}
	
	.mainMenu{
		font-size:0.8em;
	}
	.newsArea {
		width: 40%;
	}
	.tileMenu_template .searchbar {
		left: 19%;
		width: 59%;
	}

	.tileMenu_template, .productpage_template, .default_2row_template, .default_1row_template{
		font-size: 0.75em;
	}

}


@media only screen   and (max-width: 1024px) {
	.tileMenu_template, .productpage_template, .default_2row_template, .default_1row_template{
		font-size: 0.75em;
	}

.tileMenu_template .searchbar{
	left: 14%;
    width: 68.5%;
}

.mainMenu{
	font-size:0.8em;
}

.newsArea{
	width:70%;
}

.kostenrechner{
		font-size: 0.533em;
		top: 20vh;
		height: 70vh;
	}
.rechner_ctrl{
	padding-left:15%;
}
.formbutton{
	width: 35%;
	
}

.rechner_ctrl {
    
    left: 12%;
    
}

.product_submenu{
	border-spacing: 0.5em;
	
}
.product_submenu .prod_sub_item{
		
		width:10.2vw;
		height:10.2vw;
		font-size:0.8em;
	}

}