/******************************************  MORTGAGE CALCULATOR  ********************************************************************/
body { padding: 0;  height: 100%; position: relative; margin:0;  -webkit-font-smoothing: antialiased; font-family: 'PT Sans', sans-serif;}
body.contentpane{margin: 0px;}

.clear{ clear:both;}

.mc-wrap{ position: relative; /*width: 860px;*/ width: 100%; background-color: #1f4d87; z-index: 21; }
.mc-wrap::after {  content: "";  display: table;  clear: both;}

.mc-left{ float: left; width: 70%; padding: 28px 32px 32px 32px; min-height: 100px;  background-color: #fff;
/**/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  box-sizing: border-box; /**/}
  .mc-converter .mc-left h3{ font-family: 'Arsenal'; margin: 0 0 0 0; font-weight: 500; font-size: 26px; line-height: 26px; color: #000; }
   
  .mc-inp-line{ margin: 19px 0 0 0; }
    .mc-inp-line label{display: block; font-size: 14px; line-height: 14px; font-weight: 700; color: #000;}
    .mc-inp-line input{display: block; float: left; width: 44%; height: 32px; padding: 0 3% 0 3%; margin: 5px 0 0 0; border: 1px solid #1f60a6; color: #000;
  border-radius: 3px; font-size: 17px; line-height: 32px; font-family: 'PT Sans', sans-serif;}
    .mc-inp-line p{ float: left; margin: 12px 0 0 16px; font-size: 18px; line-height: 18px; }
  .mc-inp-line.mc-line-first{ margin: 32px 0 0 0; }


button.mc-button-calculate{ width: 200px; height: 40px; margin: 31px 0 0 0; background-color: #ff6600; color: #fff; font-weight: bold; font-size: 14px; line-height: 40px;
text-transform: uppercase; border: none; border-radius: 3px; font-family: 'PT Sans', sans-serif; cursor: pointer;}


.mc-right{ float: left; width: 30%; padding: 16px 21px 0px 27px; /**/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  box-sizing: border-box; /**/}
.mc-close-button{ display: block; float: right; width: 22px; height: 22px; background-image: url(../img/mc-close-icon.png); background-repeat: no-repeat;
 background-size: 22px 22px; }
.mc-info{ margin: 37px 0 0 0; padding: 52px 0 0 0; background-image: url(../img/mc-question-icon.png); background-size: 36px 35px; 
  background-repeat: no-repeat; font-size: 14px; line-height: 20px; color: #fff;}

/* Currency Converter */
.mc-wrap.mc-converter .mc-info{font-size: 20px; line-height: 24px;}
.mc-wrap.mc-converter .mc-inp-line input{ width: 38%; padding: 0 1% 0 1%; }

.mc-from-to{ width: 100%; margin: 21px 0 0 0; }
.mc-from-to .mc-inp-line{ float: left; width: 40%; margin: 0 0 0 0;}
.mc-inp-line.mc-currency-one{margin: 0 2% 0 0;}
.mc-wrap.mc-converter .mc-from-to .mc-inp-line input{width: 94%; padding: 0 3% 0 3%; }

/*select */
.mc-from-to .mc-inp-line select{height: 34px; width:100%; padding: 0 1% 0 1%;  margin: 5px 0 0 0;   text-align:left; border-radius: 3px;
     background-color:#FFF; border: 1px solid #1f60a6;  color:#424242; font-size:15px; line-height: 34px;   font-family: 'PT Sans', sans-serif; 
  -webkit-appearance: none;   background-position: right 8px center;   background-repeat: no-repeat; background-image:url(../img/hm-select-arrow.png);  
  background-size: 11px 7px;
  /* for FF */  -moz-appearance: none;  text-indent: 0.01px;   text-overflow: '';
  /* for IE */  -ms-appearance: none;  appearance: none!important;}
    .mc-from-to .mc-inp-line select option{ color:#424242; background-color:#ffffff; border:none; height:24px; line-height:24px; }
    .mc-from-to .mc-inp-line select::-ms-expand {display: none;}
/*select */
.mc-calculator-result{margin: 23px 0 0 0; font-family: 'Arsenal'; font-weight: 700; font-size: 28px; line-height: 25px; color: #000;}



@media screen and (min-width: 1020px) {
.mc-from-to .mc-inp-line{width: 49%; }
.mc-calculator-result{ font-size: 26px; line-height: 26px;}
}



@media screen and (min-width: 767px) {
.mc-wrap{ width: 100%; /*width: 94%;  margin: 0 3% 0 3%; */  }
.mc-wrap.mc-converter .mc-inp-line input{ width: 71%; padding: 0 1% 0 1%; }
.mc-from-to .mc-inp-line{ float: none; width: 73%; margin: 0 0 0 0;}
.mc-inp-line.mc-currency-two{ margin: 12px 0 0 0; }
.mc-calculator-result{ font-size: 22px; line-height: 25px;}

}



@media screen and (max-width: 640px) {
.mc-info{ font-size: 12px; line-height:16px;}
.mc-calculator-result{ font-size: 19px; line-height: 25px;}


}



@media screen and (max-width: 550px) {
.mc-left{  width: 82%; padding: 28px 22px 32px 22px; }
.mc-right{ width: 18%; padding: 16px 10px 0px 10px;}
.mc-info{display: none;}
.mc-calculator-result{ font-size: 19px; line-height: 25px;}

}



@media screen and (max-width: 450px) {
.mc-left{  width: 100%; padding: 28px 22px 32px 22px; }
.mc-right{ width: 0%; padding: 0;}
.mc-close-button{ position: absolute; top: 10px; right: 10px;  background-image: url(../img/mc-close-icon-blue.png);  }
.mc-wrap.mc-converter .mc-inp-line input{ width: 91%; }
.mc-from-to .mc-inp-line{ width: 93%;}

}