/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-top: 3rem;
  color: #5a5a5a;
  background-color: #e0f7f1;
}
footer{background-color: #131313;width:100%}
a{color:#ffcc00;text-decoration: none;}
a:hover{color:#ffeda7;text-decoration: none;}

.btn-primary {background-color: #ffcc00;color:black;border-color: #ffcc00;padding:10px 40px}
.btn-primary:active,.btn-primary:focus{background-color: #ffeda7;color:rgb(27, 27, 27);border-color: #ffcc00;}
.btn-primary:hover{background-color: #ffeda7;color:rgb(27, 27, 27);border-color: #ffcc00;}
.btn-block {width:20%}
.bg-brandgreen{background: #388257;background: linear-gradient(180deg,rgba(56, 130, 87, 1) 0%, rgba(70, 143, 98, 1) 50%);}
.color-brandyellow{color:#ffcc00;}
.navbar-brand {letter-spacing: 1px;}
.dropdown:hover .dropdown-menu {
  display: block;
  margin: 0;
}
.dropdown-menu{background-color: #e0f7f1;}
.dropdown-item{font-weight:600}
.dropdown-item.active{background-color: #ffcc00;color:#000}
.dropdown-item:hover{background-color: #ffcc00;}
.callus{color:#fff;padding:40px 0}

.page-header { background: url(../img/header-home.jpg)no-repeat; position: relative; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-about { background: url(../img/header-about.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-baddebt { background: url(../img/header-bad-debt.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-debtconsolidation { background: url(../img/header-debt-consolidation.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-mortgages { background: url(../img/header-mortgages.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-header-personalloans { background: url(../img/header-personal-loans.jpg)no-repeat; position: center; background-size: cover; text-shadow: 2px 2px 3px #000;}
.page-caption { padding-top: 170px; padding-bottom: 174px; }
.page-title { font-size: 46px; line-height: 1; color: #fff; font-weight: 600; text-align: center; }

.card-section { position: relative; bottom: 60px; }
.card-block { padding: 80px; border-radius: 10px;}
.section-title { margin-bottom: 60px; }

.form-control:focus{border-color:#388257;box-shadow: 0 0 0 .25rem rgba(56,130,87,0.25);}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.card{
  border: none;
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
 overflow:hidden;
 border-radius:20px;
 min-height:450px;
   box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);

 @media (max-width: 768px) {
  min-height:350px;
}

@media (max-width: 420px) {
  min-height:300px;
}

 &.card-has-bg{
 transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  background-size:120%;
  background-repeat:no-repeat;
  background-position: center center;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);}

  &:hover {
    transform: scale(0.98);
     box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
    background-size:130%;
     transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);

    .card-img-overlay {
      transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
      background: rgb(255,186,33);
     background: linear-gradient(0deg, rgba(10, 10, 10, 0.5) 0%, rgb(8, 211, 126) 100%);
     }
  }
}
 .card-footer{
  background: none;
   border-top: none;
    .media{
     img{
       border:solid 3px rgba(255,255,255,0.3);
     }
   }
 }
  .card-title{font-weight:800}

 .card-body{ 
   transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
 

  }
 &:hover {
   .card-body{
     margin-top:30px;
     transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
   }
 cursor: pointer;
 transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
 .card-img-overlay {
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
 background: rgb(255,186,33);
background: linear-gradient(0deg, rgba(18, 36, 31, 0.579) 0%, rgb(90, 141, 116) 100%);
}
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}




/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

@media only screen and (max-width: 600px) {
  .card-block{padding:20px}
}