* {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, Sans Serif;
    line-height: 1;
}
ol, ul {
    list-style: none;
}

body {
	/*background: #fefefe;*/
			
			background: -webkit-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
			background: linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
			background-position: -1px -1px;
			-webkit-background-origin: padding-box;
			background-origin: padding-box;
			-webkit-background-clip: border-box;
			background-clip: border-box;
			-webkit-background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
			background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
			-webkit-box-shadow: none;
			
			-webkit-transition: none;
			transition: none;
			-webkit-transform: none;
			-o-transform: none;
			transform: none;
			-webkit-transform-origin: 50% 50% 0;
			-o-transform-origin: 50% 50% 0;
			transform-origin: 50% 50% 0;
			background-attachment: fixed;
    /*background: #8f8d05;*/
    margin: 0;
    padding: 0;
}
.header {
    background: #fefefe;
    width: auto;
    max-width: 960px;
    min-width: 600px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0;
    padding-right: auto;
    padding-bottom: 25px;
    padding-left: auto;
}
#logo {
	width: 30%;
    max-width: 230px;
    float: left;
    padding-top: 12px;
    padding-right: 0;
    padding-bottom: 23px;
    padding-left: 0;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 10px;
}

.niagara_logo{
	float: right;
    padding-top: 35px;
    padding-right: 0;
    padding-bottom: 23px;
    padding-left: 0;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 10px;
}

.tagline {
    display: inline-block;
    width: 30%;
    max-width: 320px;
    padding-top: 36px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 33px;

}
.tagline p {
    font-family: "Arial",serif;
    font-weight: inherit;
    color: #3A5467;
    font-size: 16px;
    line-height: 16px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.tema {
    /*background: #045BA8;*/
	background: #4B5F6E none repeat scroll 0% 0%;
	/*border-bottom: 4px solid #FFF800;*/
    width: auto;
    max-width: 960px;
    min-width: 546px;
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    padding-top: 10px;
    padding-right: auto;
    padding-bottom: 10px;
    padding-left: auto;
    font-family: "Arial",serif;
    color: #fefefe;
    font-size: 28px;
	font-weight: bold;
}
.karkas{
	/*background: #fefefe;*/
				background: rgba(255,255,255,0.6);
    width: auto;
    max-width: 960px;
    min-width: 600px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 10px;
    padding-right: 27px;
    padding-bottom: 15px;
    padding-left: 27px;
	box-sizing: border-box;
	box-shadow: 0px 0px 3px 0px #92A1AC;
}

	/* *001*   ЗАГОЛОВОК  калькулятора  */
	.razdel_2 {
		background: #fefefe;
		
		width: auto;
		max-width: 960px;
		min-width: 600px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		padding-top: 10px;
		padding-right: auto;
		padding-bottom: 10px;
		padding-left: auto;
		font-family: "Arial",serif;
		color: #0b0b0b;
		font-size: 24px;
}
	/* *002*    РАЗДЕЛ 	*/
    .razdel_opacity{
      border: none;
		width: 100%;
        
		overflow: hidden;
		background: none;  
    
    }
	.razdel_wrapper {
		/*margin: 0;*/
		/*padding: 0;*/
		border: none;
		width: 100%;
		overflow: hidden;
		background: #fefefe;
		
	}

		.razdel {
			font: bold 24px "arial";
			overflow: hidden;
			margin-left: auto;
			border-top: 5px solid #4B5F6E;
			color: #4B5F6E;
		}
				.num_razdel{
					background: #4B5F6E;
					font-family: "Arial",serif;
					color: #fefefe;
					font-size: 32px;
				}
				.razdel p{
					float: left;
				}
				
	/* *003*   Иконки типов кровли */		
	.block_type_roof_wrapper {
		background: #fefefe;
	}		
		.block_type_roof{
			overflow: hidden;
	        
			padding-top:25px;
			padding-bottom:50px;
		}
		
				.block_type_roof  img{
					cursor: pointer;
					display: block;
				    width: 15%;
					float: left;
					margin: 0 0.1%;
					border: 4px solid #fefefe;
					border-radius: 50%;
				}
				
				#ico1 {
					border: 4px solid red;
				}


	/* *004*  Меню выбора размера водосточной системы */	
	.sys_niagara_wrapper{
		background: #fefefe;
		}
			.sys_niagara{
			width:95%;
			margin: 0 auto;
			padding-top:25px;
			padding-bottom:40px;
			font-size: 22px;
			}
				.sys_niagara ul{
						overflow: hidden;
				}
						.sys_niagara ul li{
								cursor: pointer;
								display: block;
								float: left;
								margin: 0 0 10px 10px;
								padding:5px 5px;
								border: 4px solid #fefefe;
								background: #fefefe;
								color: #4B5F6E;
                                border-radius: 8px;
						}
						/*.sys_niagara ul li:hover{
								display: block;
								position: absolute;
								top: -10px;
						}*/
						#niagara1 {
								border: 4px solid red;
						}
	/*  *005*  Ввод необходимых размеров для расчета  */					
	.razmer_wrapper{
		background: #fefefe;
		overflow: hidden;
		width: 100%;
		padding-top:25px;
		padding-bottom:40px;
		
	}
			
			#img_tz12 {
				width: 40%;
			}
			.img {
			 text-align: center;
			}
            .razmer_input{
					overflow: hidden;
					/*background: #045BA8;*/
					background: #fefefe;
					width:48%;
					float: left;
            }
                    .razmer_input p{
							overflow: hidden;
					        font-family: "Arial", serif;
                            font-weight: bold; 
					        color: #4B5F6E;
					        font-size: 20px;
					
			        }
                    .razmer_input label{
                            display: block;
                            float: left;
                            width: 50px;
                            padding:6px 5px 6px 30px;
                           
    
                    }
                    .razmer_input input{
                            width: 66px;
                            padding: 6px 15px;
                            background: #A8C1D7;
							border: 2px solid #fff;
							border-radius: 8px;
                            color: #4B5F6E;
    
                    }
                    input:focus{
                            background: #4B5F6E;
                            color: #fff;
							border: 2px solid red;
                    }

                    #c_f1, #c_f2{
                    /*for WebKit*/
                     -webkit-appearance: none;
                     /* for FF */
                      -moz-appearance: none;
                      text-indent: 0.01px; 
                     text-overflow: '';
                      /* for IE */
                      -ms-appearance: none;
                      appearance: none!important;
                        
                            width: 100px;
                            padding: 6px 15px;
                            background: #A8C1D7;
							border: 2px solid #fff;
							border-radius: 8px;
                            color: #4B5F6E;
  
                    }
                    #c_f1:focus, #c_f2:focus{
                            background: #4B5F6E;
                            color: #fff;
							border: 2px solid red;
                    }


					#z3	{
							width: 20px; 
							margin: 0px 10px 0px 45px;
					}		
					#z4	{
							width: 20px; 
							margin: 0px 10px 0px 45px;
					}	
							
					.razmer_input img{
					        width:95%;
			        }
			
			.razmer_img{
					/*background: #909090;*/
					width:50%;
					float: right;
			}
					.razmer_img img{
							width:95%;
							
					}
			
	/*  *006*  Спецификация  */
	.spec_wrapper{
		background: #fefefe;
		overflow: hidden;
		width: 100%;
		padding-top:25px;
		padding-bottom:40px;
	}
			.spec_input {
					width:auto;
					float: left;
                    
			}
					
					.text_tabl{
                        display: block;
                            overflow: hidden;
							border: 2px solid #fefefe;
                            border-radius: 8px;
                            font-family: "Arial", serif;
                            color: #4B5F6E;
				            font-size: 12px;
                            font-weight: bold; 
					}
                    .text_tabl:hover{
                        display: block;
                            overflow: hidden;
                            border: 2px solid red;
                            border-radius: 8px;
                           /* font-family: "Arial", serif;*/
                            color: #fff;
                            background: #4B5F6E;
                            font-weight: bold; 
                    }
                    .txt_calc {
                        cursor: default;
                            display: block;
							width: 205px;
							float: left;
                            margin: 7px 5px 7px 5px;
    
                    }
                    .txt2_calc {
                        cursor: default;
                            display: block;
							width: 25px;
							float: left;
                            margin: 7px 0px 7px 0px;
    
                    }
                    .num_calc {
                        cursor: default;
                            display: block;
                            width: 30px;
                            float: left;
                            margin: 7px 5px 7px 5px;
    
                    }

					/*.rezult_tabl{
							width: 25%;
							float: rigth;
							overflow: hidden;
					}
					
							.spec_input div p{
									display: block;
									margin: 10px 10px 10px 10px;
									font-family: "Arial",serif;
									color: #0b0b0b;
									font-size: 12px;
									float: left;
							}*/
			
			.spec_img{
					/*background: #045BA8;*/
					width:47%;
					float: right;
			}
					.spec_img img{
					width:95%;
					padding-top: 50px;
					/*margin: 15px 15px 15px 15px;*/
					}

/* Стили для печати */
 @page :first {
    margin: 0.5cm 1cm 0.5cm 1cm; /* Отступы для первой страницы */ 
   }
   @page :left {
    margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */ 
   }
   @page :right {
    margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */ 
   }
 
 
 
 * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
	background: transparent !important;
	color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}


 
 .razdel_opacity{display: none;}
 .block_type_roof{display: none;}
 .print{display: none;}
 .hidden_print{display: none;}
 #logo {
	width: 30%;
    max-width: 230px;
    float: left;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 23px;
    padding-left: 0;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 10px;
}
#logo  img{
	width: 100px;
}
#img_tz12 {
				width: 35%;
			}
#img_tz11 {
				width: 60%;
			}
#img_niagara {
				width: 70%;
			}
.karkas{
	box-shadow: 0px 0px 0px 0px #92A1AC;
}
.niagara_logo{
	float: right;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 23px;
    padding-left: 0;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 10px;
}
.niagara_logo img{
	width: 100px;
}
.tagline {
    display: inline-block;
    width: 30%;
    max-width: 320px;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 33px;

}
.tagline p {
    font-family: "Arial",serif;
    font-weight: inherit;
    color: #3A5467;
    font-size: 10px;
    line-height: 10px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.tema {
    
    width: auto;
    max-width: 960px;
    min-width: 546px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: auto;
    padding-bottom: 10px;
    padding-left: auto;
    font-family: "Arial",serif;
    color: #fefefe;
    font-size: 14px;
	font-weight: bold;
}
 .razdel {
			font: bold 12px "arial";
			overflow: hidden;
			margin-left: auto;
			border-top: 0px solid #4B5F6E;
			color: #4B5F6E;
		}
				.num_razdel{
					display: none;
				}
				.razdel p{
					float: left;
				}
 
 .sys_niagara{
			width:95%;
			margin: 0 auto;
			padding-top:5px;
			padding-bottom:2px;
			font-size: 10px;
			}
					.razmer_input p{
					        font-family: "Arial", serif;
                            font-weight: bold; 
					        color: #4B5F6E;
					        font-size: 12px;
					
			        }
					.razmer_input label{
                            display: block;
                            float: left;
                            width: 30px;
                            padding:6px 5px 6px 5px;
                           	overflow: hidden;
    
                    }
                    .razmer_input input{
                            width: 15px;
                            padding: 6px 5px;
                          
							
    
                    }
					 #c_f1, #c_f2{
                                           
                            width: 35px;
                            padding: 1px 5px;
                            background: #A8C1D7;
							border: 2px solid #fff;
							border-radius: 8px;
                            color: #4B5F6E;
  
                    }
					#z3	{
							width: 20px; 
							margin: 0px 1px 0px 20px;
					}		
					#z4	{
							width: 20px; 
							margin: 0px 1px 0px 20px;
					}
			
	.spec_wrapper{
		background: #fefefe;
		overflow: hidden;
		width: 100%;
		padding-top:25px;
		padding-bottom:5px;
	}
			.spec_input {
					width:auto;
					float: left;
                    
			}
					
					.text_tabl{
                        display: block;
                            overflow: hidden;
                            font-family: "Arial", serif;
                            color: #4B5F6E;
				            font-size: 10px;
                            font-weight: bold; 
					}
                  
                    .txt_calc {
                        cursor: default;
                            display: block;
							width: 205px;
							float: left;
                            margin: 1px 5px 1px 5px;
    
                    }
                    .txt2_calc {
                        cursor: default;
                            display: block;
							width: 25px;
							float: left;
                            margin: 1px 0px 1px 0px;
    
                    }
                    .num_calc {
                        cursor: default;
                            display: block;
                            width: 30px;
                            float: left;
                            margin: 1px 5px 1px 5px;
    
                    }
					.spec_img img{
					padding-top: 10px;
					
					}