//Background Colors
@background-color1:#fff;
@background-color2:rgb(65,170,85);
@background-color2-opacity:rgba(65,170,85, .8);
@background-color3:#000;
@background-color-transparent:transparent;

//Font colors and styles
@color1:#fff;
@color2:#ebc826;
@text-align-center:center;
@fontfamily1: 'Kaushan Script', cursive;

//Width property
@width-100-percentage:100%;

//Transitions
@constant-transition-1:0.3s;

/*****************
General Styles
*****************/
body{
    background-color: @background-color1;
}
a {
    text-decoration: none;
    &:hover {
        color: @background-color2;
    }
}
section {
    padding:60px;
}
header{
    background: url('../images/car_1.jpg');
    background-size: cover;
    height:80vh;
}
.cta_button {
    background:@background-color2;
    color: #fff;
    border: 2px solid @background-color2;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 11px 20px;
}
.cta_button:hover{
    background-color:@background-color-transparent;
    color: @background-color2;
    border-color: @background-color2;
    cursor: pointer !important;
}

/*****************
Navigation + Home Section
*****************/

.header_caption{
    bottom: 50% !important;
    padding: 0px 10px;
}
.full_width_inner_image {
    width:@width-100-percentage;
}

.yellow_color{
    color:@color2;
}
.navbar{
  position:fixed;
  width:@width-100-percentage;
  background-color:@background-color-transparent;
  color: @color1;
  z-index:10;
  border-radius:0;
  border-color:@background-color-transparent;
}
.nav-link {
    color:@color1 !important;
    transition: @constant-transition-1;
}
.nav-link:hover{
    color: @background-color2 !important;
    transition: @constant-transition-1;
}
.navbar-toggler{
    border-color: @background-color1 !important;
}
.section_header {
    font-family: @fontfamily1;
    text-align:@text-align-center;
    font-size:2.5em;
}
.main_logo {
    width: 100px;
}
.scrolled{
  background-color: @background-color2-opacity;
  transition: @constant-transition-1;
}
.scrolled_out{
  background-color: transparent;
  transition: @constant-transition-1;
}
/*****************
Join
*****************/
.question_wrapper {
    text-align: center;
}

.question_list{
    list-style-type: none;
    padding-left: 0px;
}
.question_image {
    width: @width-100-percentage;
}
.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;

    label {
      padding: 12px 30px;
      width: 100%;
      display: block;
      text-align: left;
      color: #3C454C;
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: color 200ms ease-in;
      overflow: hidden;

      &:before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        content: '';
        background-color: @background-color2;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale3d(1, 1, 1);
        transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
        z-index: -1;
      }

      &:after {
        width: 32px;
        height: 32px;
        content: '';
        border: 2px solid #D1D7DC;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
        background-repeat: no-repeat;
        background-position: 2px 3px;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        transition: all 200ms ease-in;
      }
    }

    input:checked ~ label {
      color: @background-color1;

      &:before {
        transform: translate(-50%, -50%) scale3d(56, 56, 1);
        opacity: 1;
      }

      &:after {
        background-color: @background-color2;
        border-color: @background-color2;
      }
    }

    input {
      width: 32px;
      height: 32px;
      order: 1;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      visibility: hidden;
    }
  }
/*****************
About
*****************/
.section_hr{
    background-color: @background-color2;
    width:70px;
}
.section_small_header{
    font-family: @fontfamily1;
}
.about_inner_wrap {
    padding-top:8vh;
}
.about_inner_wrap div{
    padding:10px 0px;
}
/*****************
Recipes
*****************/
.img-thumbnail {
    border: 0px;
}

.caption {
    bottom:0;
    color: @background-color1;
    left:0;
    position: absolute;
    text-align: @text-align-center;
    width: @width-100-percentage;

}
.individiual_recipe {
    padding: 0px;
}
/*****************
Bottom CTA
*****************/
.bottom_cta{
    color: @background-color1;
    padding:60px; 
    background: url('../images/food_4.jpg'); 
    background-size: cover;
}
/*****************
Footer
*****************/
.page-footer {
    background-color: #2d2d2d;
}
.footer-link {
    color: @background-color1;
}
.footer-link:hover{
    color: @background-color2;
    transition: @constant-transition-1;
    text-decoration: none;
}
.footer-copyright {
    color: @background-color1;
}
.footer_col {
    text-align: @text-align-center;
}



@media screen and (max-width: 450px) {
  section {
    padding: 20px;
  }
    .header_caption {
        bottom: 35% !important;
    }
    .section_header{
        font-size: 2em;
    }
}