/* Main Stylesheet */


/* Set Variables */
/* Declare variables */
:root{
    --light-green: #77b42b;
    --dark-green: #008037;
    --turquoise: #03989e;
    --yellow: #ffde59;
    --orange: #f7b200;
    --brown: #9c9068;
    --light-blue: #B4DADF;
    }




#site_logo{

    max-height: 150px;

}

.general_link{

    color: var(--dark-green) !important;
    text-decoration: underline !important;

}

.general_link:hover{

    color: var(--orange) !important;
    text-decoration: underline !important;
}

#homepage_jumbotron{

    background-image: url("/images/river-wansbeck.webp") !important;
    background-repeat: no-repeat !important;
    background-color: #cccccc;
    background-size: cover;
    background-position: center; 
    min-height: 700px;
    border-bottom: 1px solid var(--dark-green) !important;
}


#jumbotron_content{

    background-color:rgba(255,255,255,0.7) !important;

}



.site_button{

    background-color: var(--dark-green) !important;
    color: #fff !important;
    border: 1px solid var(--dark-green) !important;
}

.site_button:hover{

    background-color: white !important;
    color: var(--dark-green) !important;
    border: 1px solid var(--dark-green) !important;    
}


.navbar{

    background-color: white !important;

}

a.nav-link{
    color: var(--dark-green) !important;
    padding: 10px !important;
    margin-left: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important;
    font-size: 17px;
}

a.nav-link:hover,
a.nav-link.active{
    background-color: var(--dark-green) !important;
    color: #fff !important;
}

.navbar-toggler{

    background-color: var(--dark-green) !important;
    border: var(--dark-green) !important;

}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}


/* 
.navbar-toggler-icon {
    fill: none !important;
    stroke-width: 2 !important;
    stroke: #491EC4 !important;
  } */

.generic_page_title{

    color: var(--dark-green);
    border-left: 10px var(--orange) solid;
    border-bottom: 10px var(--orange) solid;
    border-radius: 5px !important;

}

.generic_page_title_secondary{

    color: white !important;
    background-color: var(--dark-green);
    border-bottom: 5px var(--orange) solid;
    border-left: 5px var(--orange) solid;    
    border-radius: 5px !important;

}


#home_section_1{


    
}


#home_section_1 h2,
#home_section_3 h2{

    color: var(--dark-green);
    border-left: 10px var(--orange) solid;
    border-bottom: 10px var(--orange) solid;
    border-radius: 5px !important;

}

#home_section_2 h2,
#home_section_4 h2{

    border-left: 10px var(--orange) solid;
    border-bottom: 10px var(--orange) solid;
    border-radius: 5px !important;
    
}
#home_section_1 .card{



}

#home_section_2{

    background-color: var(--dark-green) !important;
    color: white !important;

}

#home_section_3{


    
}

#home_section_4{

    background-color: var(--dark-green) !important;
    color: white !important;

}

#home_section_4 a{

    color: white !important;

}

#home_section_4 a:hover{

    color: var(--orange) !important;

}

#home_section_5 .card{

    border: 10px var(--orange) solid;
    background-color: var(--dark-green);
    color: white !important;

}

#home_section_5 cite{

    color: white !important;

}

#newsletter_iframe{

    width: 100% !important;
    height: 700px !important;

}


#projects_iframe,
#tips_iframe,
#local_groups_iframe{

    width: 100% !important;
    min-height: 700px !important;


}

#eventbrite_iframe{

    width: 100% !important;
    height: 100% !important;

}

#eventbrite_iframe{

    width: 100% !important;
    height: 700px !important;

}


/*Style social kit data*/
.social_kit_hosted_by_link a,
.social_kit_hosted_by_link a:hover{

    color: var(--dark-green) !important;
    font-weight: 700 !important;
}


.social_kit_date{

    background-color: var(--dark-green) !important;

}

.social_kit_month{

    background-color: var(--orange) !important;
    color: black !important;

}

.bio_card{

    border: var(--dark-green) 3px solid !important;

}

.bio_card img{

    border: var(--dark-green) 1px solid !important;

}

.bio_card .card-header{

    background-color:  var(--dark-green) !important;
    color: white !important;
    border-radius: 0px !important;

}




#footer_container{

    background-color: var(--dark-green) !important;
    color: #fff !important;


}


.support_us_card img{

    background-color: var(--light-blue) !important;

}



#footer_newsletter_container,
#footer_newsletter_container .card{

    background-color: var(--turquoise) !important;
    color: #fff !important;
    border: none;


}

#footer_newsletter_container .card h2{

    border-left: 10px var(--orange) solid;
    border-bottom: 10px var(--orange) solid;
    border-radius: 5px !important;

}


#footer_signup_button{

    border: 10px orange solid !important;

}

.web_credit a{

    color: white !important;

}

#krystal{

    color: white !important;

}

#krystal:hover{

    color: var(--orange) !important;

}

#scroll_to_top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--dark-green); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border: solid 5px black; /*Set Border */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #scroll_to_top:hover {
    background-color: black; /* Add a dark-grey background on hover */
  }





  /* Assistance for styling Google document
  https://forum.squarespace.com/topic/64949-i-cant-get-my-google-sheet-to-be-responsive-what-am-i-doing-wrong/ */
  .Iframe-Liason-Sheet {
    max-width: 550px;
    max-height: 2000px;
    overflow: hidden;
   }
   /* inner wrapper: make responsive */
   .responsive-wrapper {
    position: relative;
    height: 0;  /* gets height from padding-bottom setting */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
   }
   .responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
   }
   /* padding-bottom = h/w as a % */
   .responsive-wrapper-wxh-550x2000 {
    padding-bottom: 363.6364%;
    
   }
   .iframe-border {
    /* border: 1px solid #000; */
   }
   .center-block-horiz {
    margin-left: auto !important;
    margin-right: auto !important;
   }