/* html {
    height: 100px;
    width: 100px;
    background-image: linear-gradient(to bottom right, rgb(57, 214, 247), rgb(108, 71, 202));
} */

body {
    background-attachment: fixed;
    background-image: linear-gradient(to bottom right, rgb(57, 214, 247),  rgb(108, 71, 202) 89.0%);
  }


  button.interest {
    background-color: transparent;
    border: none;
    background-position-x: 9px;
    color: transparent;
    height: 33px;
    width: 40px;
    background-size: 27px;
    position: relative;
    top: 5px;
    right: 308px;
}

.interest {
    background: #b2323200 url(../images/interest_icon@2x.png) 0 3px no-repeat;
  }


  button.tax {
    background-color: transparent;
    border: none;
    background-position-x: 9px;
    color: transparent;
    height: 33px;
    width: 40px;
    background-size: 27px;
    position: relative;
    top: 5px;
    right: 220px;
}

.tax {
    background: #b2323200 url(../images/tax_icon@2x.png) 0 3px no-repeat;
  }

  button.insurance {
    background-color: transparent;
    border: none;
    background-position-x: 9px;
    color: transparent;
    /* cursor: pointer; */
    height: 33px;
    width: 40px;
    background-size: 27px;
    position: relative;
    top: 5px;
    right: 369px;
}

.insurance {
    background: #b2323200 url(../images/insurance_icon@2x.png) 0 3px no-repeat;
  }

  h2 {
    margin: 10px;
  }

  ol {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: muli;
    font-weight: bold;
    position: relative;
    bottom: -48px;
    /* float: right; */
    width: 100%;
    margin: 3px;
    
}


  
  h1, p {
    text-align: center;
  }
  
  h1 {
    color: rgb(255, 255, 255);
    font-size: 70px;
    font-family: muli;
    margin: -12px;
   
  }

  p {
    color: rgb(255, 255, 255);
    font-size: 25px;
    padding-left: 220px;
    padding-right: 220px;
    margin-bottom: 170px;
    margin-top: 25px;
    font-family: muli;
}
  
  
  a {
    text-decoration: none;
  }
  
  .flag {
    width: 100px;
  }
  
  
  ul {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-family: muli;
    font-weight: bold;
    padding: 17px;
    padding-left: 86px;
    
     
  }

    


    li {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-family: muli;
    font-weight: bold;
    padding: 39px;
    padding-left: 86px;
    padding-right: 20px;
    padding-top: 37px;
    padding-bottom: 106px;
    background-position-x: 73px;
    background-position-y: 152px;
    list-style-type: none;
    width: 36%;
  }

  #mortgageCalc main button {
    background-color: transparent;
  border: none;
  color: #3f3f3f;
  cursor: pointer;
  display: inline-block;
  font: normal 20px "PT Sans", Helvetica, Arial, sans-serif;
  padding: 0;
  }

  button.arrow {
    background-color: transparent;
    border: none;
    background-position-x: 9px;
    color: transparent;
    cursor: pointer;
    height: 22px;
    width: 52px;
    background-size: 29px;
    position: relative;
    top: 29px;
    left: -8px;
    float: right;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .arrow {
    background: transparent url("../images/arrow-down@2x.png") 0 3px no-repeat;
  
  }

  button.arrow:hover {
    background-size: 32px;
  }

    button.arrow:focus {
    transform: rotate(0deg);
  }

  button.arrow.buttonAfter {
    transform: rotate(180deg);
  }

  

  .dropdown-content {
    display: none;
    position: absolute;
    /* right: -136px; */
    background-color: transparent;
    width: 32%;
    z-index: 1;
  }
  
   option  {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
    option:hover {
        background-image: linear-gradient(to left, transparent, rgb(134, 167, 228));
        border-radius: 15px;
        cursor: pointer;
}


.options {
    width: 100%;
    padding: 15px;
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
    display: block;
  }

  #Loan{
    position: relative;
    /*left: -238px;*/
    bottom: -40px;
  }

    .image {
    display: block;
    height: auto;
    position: relative;
    bottom: -42px;
    left: -10px;
    width: 100%;
  }

  .clickedImage {
    position: relative;
    bottom: -100px;
    left: -10px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
  }

  /* img.image {
    position: relative;
    bottom: -100px;
    left: -10px;
    -webkit-transition-duration: 0.4s; /* Safari */
    /*transition-duration: 0.4s};*/
   

/* .dropdown:hover ~ #Loan {
    color: transparent;
} */  


.loanTrans {
    color: transparent;
}
  

  .show {display: block;}

  .notShow {display:none;}
  


  .slidecontainer {
    width: 44%;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 1px;
    border-radius: 5px;
    position: relative;
    left: -7px;
    top: -4px;
    /* opacity: 0.7; */
    -webkit-transition: .2s;
    transition: opacity .2s;
    /* border: 1px solid; */
    /* padding: 10px; */
    box-shadow: 3px 3px 7px 0px #000000;
}
  


  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
  }

  
  .slider::-webkit-slider-thumb:hover {
    background: rgb(241, 241, 241);
    width: 28px;
    height: 28px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
  }

  .slider1::-webkit-slider-thumb:hover {
    background: rgb(241, 241, 241);
    width: 28px;
    height: 28px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
  }



  .slidecontainer2 {
    width: 44%;
  }
  
  .slider1 {
    -webkit-appearance: none;
    width: 100%;
    height: 1px;
    border-radius: 5px;
    position: relative;
    left: -7px;
    top: -4px;
    /* opacity: 0.7; */
    -webkit-transition: .2s;
    transition: opacity .2s;
    /* border: 1px solid; */
    /* padding: 10px; */
    box-shadow: 3px 3px 7px 0px #000000;
  }
  
  

  .slider1::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
  }
  
  .slider1::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
  }
  
  


  



@media screen and (max-width: 800px) {
    h1 {
        font-size: 40px;
        text-align: center;
    }
    p {
        font-size: 18px;
        text-align: center;

    }
  }

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

    p1 {
    font-size: 15px;
    top: -39px;
        
    }

    ul {
        font-size: 15px;
    }

    .slider {
        top: 5px;
    }

    .slider1 {
        top: 5px;
    }

    p {
        font-size: 18px;
        text-align: center;

    }

    div.chartBoard {
        max-width: 310px;
    }

    ol {
        font-size: 14px;
        margin: 1px;
    }

    li {
       font-size: 15px; 
    }

    #iconPrinc {
        width: 17px;
    }

    #iconTax {
        width: 17px;
    }

    #iconIns {
        width: 17px;
    }

    div.icon {
    position: relative;
    left: -30px;
    bottom: 18px;
    }

    p3 {
    
    top: 183px;
    }
}

@media screen and (max-width: 400px) {
    h1 {
       font-size: 35px; 
    }
}

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

   .slidecontainer {
    width: 100%;
}
    ul{
    padding-left:0px;
    padding-bottom: 26px;
    }

   .slidecontainer2 {
    width: 100%;
}
    div.chartBoard {
    margin-top: 350px;
    left: 23px;
        
    }

    p {
    margin-bottom: 1px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 14px;
    }

    li {
        width: 100%;
        padding-right: 86px;
        padding: 0px;
        padding-left: 0px;
        padding-right: 0px;
    
    }
}



  p1 {
    float: right;
    position: relative;
    bottom: 60px;
    left: -5px;
  }

  #demo2 {
    padding-right:74px;
  }

  .icon {
    position: relative;
    left: -33px;
    bottom: 22px;
  }

  p2 {
    /* float: right;
    position: relative;
    
    left: -108px; */

    float: right;
    position: relative;
    left: -57px;
  }

div.chartBoard {
    width: 370px;
    position: absolute;
    top: 122px;
    right: 86px;
    
}

p3 {
    position: relative;
    display: flex;
    justify-content: center;
    bottom: -206px;
    font-size: 21px;
    padding-bottom: 2px;
    color: white;
    font-family: muli;
    font-weight: bold;
}