@font-face {
font-family: 'BoschSans-Regular';
src: url(../fonts/BoschSans-Regular.ttf);
}
@font-face {
font-family: 'BoschSans-Medium';
src: url(../fonts/BoschSans-Medium.ttf);
}
@font-face {
font-family: 'BoschSans-Bold';
src: url(../fonts/BoschSans-Bold.ttf);
}
@font-face {
font-family: 'BoschSans-light';
src: url(../fonts/BoschSans-Light.ttf);
}

html, body {
height: 100vh;
color: #000;

}
body{
padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
padding-top: env(safe-area-inset-top); /* iOS 11.2 */
font-family: 'BoschSans-Regular', sans-serif;
background-color: #fff;
webkit-text-size-adjust: auto;


}
.main{
  background: url("../img/bg2.jpg")  #000 bottom no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   background-position: 100% 0;

}
header{
  background: url("../img/bar.png") no-repeat #fff;
  background-size: 100% 10px;
  position: relative;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
font-weight: 400;
}
h1{
	font-family: 'BoschSans-light';
	font-size: 40px;
	font-weight: normal;
	text-align: center;
  margin-left: -50px
}
h2{
	font-family: 'BoschSans-Regular';
	font-size: 23px;
	font-weight: normal;

}
h3{color: rgba(0,86,145,1);}

a {
outline: none !important;
cursor: pointer;
text-decoration: none !important;
color: #00649f;
}

a:hover {
text-decoration: none !important;}
ul {
margin-left: 0;
padding-left: 0;
}
.logo img {
    width: 200px;
    padding-bottom: 10px;
}

.logo {
    padding-top: 45px;
margin-left: 50px
  
}


 .text-center{text-align: center;}

    .calculator-screen {
      width: 100%;
      height: 80px;
      border: none;
      background-color: #252525;
      color: #fff;
      text-align: right;
      padding-right: 20px;
      padding-left: 10px;
      font-size: 4rem;
    }

    .calculator-keys button {
      
      font-size:24px ;
      background:rgba(0,86,145,0.6);
      border: 0;
      color: #fff;
      height: 46px
    }
    .calculator-keys button:hover {
      
      
      background:rgba(0,86,145,1);
      border: 0;
      color: #fff;
    }
   
    .calculator-keys {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 2px;
     
    }

    #errorText{color: red; margin-bottom: 10px; font-size: 13px; height: 20px;}
   .first, .second, .third{float: left;} 
    .first{width: 35%;}
    .second{width: 20%; }
    .third{width: 45%}
   .first p{font-size: 12px !important; text-align: right; padding-right: 10px; margin-bottom: 0}
     .first{text-align: right;}
.form-group{margin-bottom: 10px;position: relative;}

 .calculator-forms  input{ border-radius: 0 !important; -webkit-border-radius: 0px;  -moz-border-radius: 0px; }
    .calculator-forms .form-group input{ border-radius: 0 !important; -webkit-border-radius: 0px;  -moz-border-radius: 0px; 
 text-align: right; width: 100%; border:2px solid transparent; background-color:#a8afb7; padding: 6px 20px 5px 0}
   
.calculator-forms .form-group input:hover, .calculator-forms .form-group input:focus, .calculator-forms .form-group input:active{
  
    border:2px solid #000;

}

.calculator-forms .form-group input:hover::-webkit-input-placeholder, input:focus::-webkit-input-placeholder{
    opacity: 0;
    
}
 ::-webkit-input-placeholder {
  color: #000;
  opacity: 1;
    vertical-align: bottom;
    line-height: 2em;
}
 ::-moz-placeholder { /* Firefox 19+ */
  color:  #000;
  opacity: 1;
  vertical-align: bottom;
}
 :-ms-input-placeholder {
  color:  #000;
  opacity: 1;
}
 :-moz-placeholder { /* Firefox 18- */
  color:  #000;
  opacity: 1;
  vertical-align: bottom;
  line-height: revert;
}
input::-ms-clear {
    display: none;
    height: 0;
    width: 0;
}
.calculator-forms .form-group input::placeholder {
  font-size: 9px;
  vertical-align: bottom;
  line-height: revert;

}
 .unit { position: absolute;  left: 5px; top: 8px; z-index: 9; display: none}
 .unit-2{ position: absolute;  right: 5px; top: 8px; z-index: 9; display: none}
  .calculator-forms .form-group input:required:valid ~ .unit{display: block;}
    .calculator-forms .form-group input:required:valid ~ .unit-2{display: block;}
.calculator-forms .form-group input:hover ~ .unit, .calculator-forms .form-group input:focus ~ .unit, .calculator-forms .form-group input:active ~ .unit{
    display: block;
}
.calculator-forms .form-group input:hover ~ .unit-2, .calculator-forms .form-group input:focus ~ .unit-2, .calculator-forms .form-group input:active ~ .unit-2{
    display: block;
}
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
.submit{background-color:#005691; border:0; color: #fff; width: 100%; text-align: center;margin: 10px 0;padding:6px;}
.submit:hover{background-color:rgba(0,86,145,0.6);}
.submit.calc-again{width: 50%; margin:0 auto; display: block;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.submit.hoods-btn{ color: #fff}
.submit.hoods-btn:hover{  color: #fff !important}
.result-row{ background:rgba(0,86,145,0.6); width: 100%; min-height: 75px; color: #fff; padding: 10px; margin: 10px 0; font-size: 20px;}
.result-row span{font-size: 25px;font-family: 'BoschSans-Medium' sans-serif !important; }
.result-row p span{display: inline-block; float:left;  font-size: 12px; font-family: 'BoschSans-light' sans-serif!important; font-weight: normal;  }

footer{ background: url("../img/bar.png") bottom no-repeat #fff;     
		background-size: 100% 19px;
		padding-bottom: 8px;background-color: #fff}

		.mobile-show{display: none;}
    
    @media (min-width: 980px) and (max-width: 1025px){
  .main{background: none;}
}

@media (min-width: 781px) and (max-width: 1200px){.result-row{font-size: 16px;}.result-row span{font-size: 24px;}.result-row p span{font-size: 8px} 
   .first p{font-size: 8px !important}
       .first{  padding-top: 5px}
    .second{ padding-top: 5px}
}
@media (min-width: 781px) and (max-width: 1025px){ 
  .calc-bg{
  background: rgba(255, 255, 255, 0.8);
  /* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; 
} 
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	body{

background: url("../img/mobile-bg.jpg") no-repeat fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

} }
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {body{

background: url("../img/bg.jpg") no-repeat bottom: ;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}
.main{background: none}
}


@media (min-width: 980px) and (max-width: 1201px){
 
	.responsive{width: 50% !important}
	.calculator-keys button{font-size: 16px}
	.calculator-forms .form-group input::placeholder {
  font-size: 11px
}
}
@media (max-width: 780px){

  input::-webkit-input-placeholder {
     line-height:normal!important;
     padding-top: 5px
}
   .unit { position: absolute;  left: 5px; top: 8px; z-index: 9; display: block;}
 .unit-2{ position: absolute;  right: 5px; top: 8px; z-index: 9; display: block;}
  .calculator-forms .form-group input::placeholder {
  font-size: 10px
}
    body{

background: url("../img/mobile-bg.jpg") no-repeat;

  background-size: 100%;
  background-position:bottom;
}
  .main{background:none;}
  .calc-bg{
  background: rgba(255, 255, 255, 0.8);
  /* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; 
}
.form-group{margin-bottom: 10px;}
footer,header{background-size: 100% 10px;}	

.mobile-show{display: block;}


.result-row{font-size: 14px; min-height: auto}
.result-row span { font-size: 15px;}
.result-row p span{font-size: 9px;}
.first p.text-right{font-size: 9px !important;margin-top: 2px; padding-right: 8px;}
.submit.calc-again{ width: 100%!important}
.result-alert p{font-size: 13px}
.mb-4.result-page{margin-bottom: 0px !important}
 h1{font-size: 30px;}
}



@media (min-width: 780px){
  .first{  padding-top: 5px}
    .second{ padding-top: 5px}
    .first p.text-right{margin-top: 2px}
 
  .mb-4.mgr-btm{margin-bottom: 0px !important}
.container.main-row{
	min-height: 460px;
	max-height: 100%;
  max-width: 95.4%;
  height: calc(100vh - 275px);
}
footer .container{max-width: 95.4%; padding-bottom: 10px}
.col-md-4{padding: 0}
h2.mt-5 {margin-top: 2rem !important}
}
hr{display: none;}
@media (min-width: 1025px){
.p-4{padding: 0 !important}
  h1{margin-left: -50px !important}
hr{margin:20px 0; background-color: #a7aeb6;height: 1px; display: block;}
h3{
  font-size: 23px;
 }
.text-big{font-size: 20px;}
}

@media (min-width: 322px) and (max-width: 589px){

h3{font-size: 13px;font-weight: bold;}
h2 {
    font-size: 18px;
    margin: 0 -15px 15px -15px !important;
    padding: 10px 15px;
}
.mb-4.mobile-show.result-page{margin-bottom: 5px !important}
}

@media (max-width: 580px){
  #errorText{font-size: 10px !important}
  h1{font-size: 20px; margin-left: -15px}
  body{

background: url("../img/mobile-small-bg.jpg") no-repeat;

  background-size: 100%;
  background-position:bottom;
}
.result-row{  padding: 5px; margin: 10px 0; }
.logo {
    padding-top: 20px;
margin-left: 15px  
}
.page-result{width: 100% !important}
.col-md-5{padding: 15px !important}
h2.mt-5{margin-top: 1rem!important;line-height: 1.3em !important}
h2 br{display: none;}
 .logo img{width: 100px; margin-top: 8px; margin-left: 7px}

.col-md-7.mobile {
  width: 75% ;
  padding: 15px !important
}
.col-md-7.page-result {
  width: 100% ;
}
.result-alert p{font-size: 12px; line-height: 1.3em}

.mobile-show.result-page{font-size: 13px; line-height: 1.3em !important}
.mobile-show{font-size: 14px;line-height: 1.3em !important; margin-bottom: 0 !important }

footer {background-color: #fff; background-size: 100% 10px; font-size: 13px } 
.calculator-forms .form-group input{padding: 1px 20px 1px 0}
.unit-2{top: 2px}
.unit{top: 2px}

}

@media (min-width: 322px) and (max-width: 480px){
  .first p{font-size: 9px !important}

  .result-row p span {
    text-align: left;
    
}
.result-row p span+span {
    text-align: left;
    
}
}
@media (max-width: 321px){
    .first p{font-size: 9px !important}
  .result-row p span {
    text-align: left;
  
}
  .mobile-show{font-size: 12px; }
  h1 {
    font-size: 18px;
}
h2 {
    font-size: 16px;}
h3{font-size: 14px;font-weight: bold;}
.result-row p span{font-size: 9px}
footer{font-size: 12px}
.mb-4.mobile-show{margin-bottom: 10px !important}
.mb-4.mobile-show.result-page{margin-bottom: 0px !important}

}

@media all and (orientation:landscape) {  
  body{

background:none ;

} 
.main{
  background: url("../img/bg2.jpg")  #fff bottom no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   background-position: 100% 0;

}
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {


  body{

background: url("../img/bg2.jpg")  #fff bottom no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   background-position: 100% 0;
}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .first{  padding-top: 5px}
    .second{ padding-top: 5px}
  .calculator-forms .form-group input{padding: 6px 20px 5px 0}
  .calc-bg,main{overflow: hidden;}

  .calculator-forms .form-group input::placeholder {
  font-size: 8px
}
.result-row p span{text-align: left; }
.result-row p span+span{text-align: left;}
  .inter-net{width: 50%;}
  .inter-net .calculator .calculator-keys button{width: 31%; height: auto; !important; margin-bottom: 6px;}
  button.clear-text{padding: 1px 0;font-size: 23px }
  button.clear-text:hover{padding: 1px 0;font-size: 23px}
  footer,header{background-size: 100% 10px;}  
  .submit.hoods-btn{ color: #fff}
.submit.hoods-btn:hover{  color: #fff !important}
}