body {
    background-image: url("../images/rainsBackground.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-position: center;
  
}

/*Mobile Nav*/

.mobile-List {
    display: none;
}
.mobileNav {
    display: none;
}

/*-----------*/

/*Browser Nav*/

.nav-link {
    color: black;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
     z-index: 1;
}
#greenNav {
    color: limegreen;
}

.nav-link:hover {
    color: limegreen;
      z-index: 1;
}


.navbar-custom {
  
    border-radius:0;
    zoom: 1;
    filter: alpha(opacity=80);
    background-color: rgba(194, 217, 245, 1);
    /*background-color: rgba(255, 255, 255, 0.65);*/
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
    z-index: 1;

 }


/*Main Content*/



.card-title {
    color: #00ab6b;
    font-family: Arial, Helvetica, sans-serif;
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    z-index: 1;
    width: 85%;
}


 .card {
    animation: fadeInAnimation ease 3s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    box-shadow: 0 16px 26px 0 rgba(0,0,0,0.8);
    border-radius: 5px;
    width: 75%;
    z-index: 1;
    margin: 7%;
    overflow: auto;
    
} 

#hidden{
    display:none;
}

#images {
   
    max-height:400px;
    max-width: 300px;
}


#card {
      background-color: rgba(255, 255, 255, 0.87);
}



#last-row {
    margin-bottom: 5%;
   
}


.text-center { 
font-size: 1.75em;
}





/*Animation */

@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    70% { 
        opacity: .8; 
    } 
}

/*Fonts + Colors*/

h1 {
  
    font-family: Arial, Helvetica, sans-serif;
}

p {
    font-family: Arial, Helvetica, sans-serif;
}

.light-green {
    color: #39f077;
}

.ms-green-text {
    color: #00ab6b;
}





/* =============== */
/* === Footer === */
/* =============== */



#spacing{
  margin-right: 10px;
  margin-left: -5px;
}




#textBlock {
    text-align:center;
    margin-top: 5px;
    
}

#number {
    font-size: 18px;
    display:inline;
    margin-right: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

#number:hover {
    color: green;
}


#csavings {
    font-size: 19px;
    margin-left: 15px;
    color: black;
    display:inline;
    font-weight: bold;
}
#amount {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    display:inline;
    font-weight: bold;
}


.footerText {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(194, 217, 245, 1);
    /*background-color: rgba(208, 211, 214, .9);*/
    box-shadow: 0 35px 16px 45px rgba(0,0,0,0.8);
    color: black;
    filter: alpha(opacity=80);
    bottom: 0;
    position: fixed;
    width: 100%;
    height: 35px;
    z-index: 10;

}


/* =============== */
/* Mobile Friendly */
/* =============== */



 @media (max-width: 1020px)  {
     
     
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../images/rainsBackground.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
     
     
     #browserNav {
    display: none;
}
 
    .mobile-List {
    display: inline;
    color: white;
    list-style: none;

   
}
.mobileNav {
        display: inline;
        z-index: 2;
    }
    



    .footerImage
    {
        display: none;

    }

    .footerText {
    
    display: none; 

    }

  


    .logo {
       display: inline;
    }

    
} 

@media (max-width: 820px) {
    

      #header-title {
    margin-top: 20%;
   
    
}
}

@media (max-width: 430px) {
    
        .card {
        width: 93%;
    }
    .rainsLogo {
        margin-left: 35%;
    }
    
  #header-title {
    margin-top: 25%;
     
}

}


@media (max-width: 1430px) {
  #images{
    width: 250px;

  } 
}

@media (max-width: 1230px) {
  #images{
    width: 200px;

  } 
}

@media (max-width: 1050px) {
    
.card {
        width: 95%;
    }
  #images {
    width: 150px;
  }
}

@media (max-width: 800px) {
  #images {
    width: 130px;
  }
}

@media (max-width: 730px) {
  #images {
    width: 100px;
  }
}

@media(max-width: 575px) {
  #images {
    width: 100%;

  }
}