/* The styles are structured in a way that is easy to read and maintain. 
    Below is the structure of the styles in the CSS file. 
    This allows us to easily find the styles we are looking for and 
    add new styles to the respective sections. */
/* Font Imports and Declarations */
/* Root Variables */
/* General Styles */
/* Typography Styles */
/* Navbar Styles */
/* Button Styles */
/* Main Section Styles */
/* Miscellaneous Styles */
/* Footer Styles */
/* Media Query Styles */

/* Font Imports and Declarations */
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i|Oswald:700|Roboto+Condensed');

/* Root Variables */
:root {
  --primary-color: #399FC5;
  --secondary-color: #399FC5;
  --tertiary-color: #FFFFFF;
  --headline-font: Oswald;
  --body-copy-font: Roboto;
  --button-corner: 4px;
}

/* General Styles */
body {
  padding-top: 0px;
  background-color: #ffffff !important;
}

/* Typography Styles */
p,
.survey-question {
  line-height: 1.5em !important;
  font-size: 14pt !important;
  font-weight: 400 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.top-priority,
legend {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: -0.63px;
  font-weight: 400;
  line-height: 1.05;
}

a {
  color: #dd9933;
  text-decoration: none;
  border-radius: 0px;
}

a:hover {
  color: #1e73be;
  text-decoration: none;
}

/* Navbar Styles */
nav.navbar-fixed-top {
  padding: 0px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 0px !important;
  position: relative;
}

nav.navbar-fixed-top .container {
  width: 100%;
  padding: 0px;
}

nav.navbar-fixed-top .navbar-header {
  display: block;
  float: none;
  text-align: center;
  padding: 13px 0px 17px 0px;
  margin-bottom: 20px;
}

.nav_btn {
  display: none;
}

nav.navbar-fixed-top .navbar-collapse {
  display: block;
  float: none;
  text-align: center;
  background-color: #399fc5 !important;
  line-height: 1.42857143;
}

nav.navbar-fixed-top .navbar-collapse ul {
  float: none !important;
  text-align: center;
  margin: auto;
}

nav.navbar-fixed-top .navbar-collapse ul>li {
  float: none;
  display: inline-block;
}

nav.navbar-fixed-top .navbar-collapse ul>li a {
  padding: 10px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  letter-spacing: normal;
  font-size: 14px;
}

nav.navbar-fixed-top .navbar-collapse ul>li a:hover {
  background-color: #fec00f !important;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: #fec00f !important;
}

.dropdown-menu {
  background-color: #f1f1f1;
}

.dropdown-menu li {
  width: 100%;
  text-align: left;
}

.nav-filter li a {
  font-size: 16.2px;
}

nav.navbar-fixed-top .navbar-collapse ul>li>ul>li a,
.dropdown-menu li a {
  color: #666 !important;
  text-transform: capitalize;
}

nav.navbar-fixed-top .navbar-collapse ul>li>ul>li a:hover,
.dropdown-menu li a:hover {
  background-color: #ddd !important;
}


header .logo-toggle {
  padding-bottom: 7px;
  padding-top: 15px;
}

header .container {
  flex-direction: column;
  width: 100%;
  padding: 0px;
}

header nav {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #399fc5;
}

nav ul li a,
nav ul li a:hover {
  color: #ffffff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

nav ul li a:hover {
  background-color: #fec00f;
}

.navbar-brand {
  margin-bottom: 20px;
  text-align: center;
  flex-basis: 100%;
}

header .navbar-brand img {
  max-height: 113.8px;
}

nav.navbar .container {
  max-width: 100%;
}

#navbarMainMenu {
  background-color: #399fc5;
  width: 100%;
  justify-content: center !important;
  margin: 0 -12px;
}

.navbar .navbar-toggler {
  border: 0;
  font-size: 1.5rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23399fc5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	position: absolute;
	left: 20px;
	top: 55px;
}

nav.navbar {
  height: auto;
  padding: 0;
}

nav.navbar .container-md {
  flex-direction: column;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Button Styles */
.btn,
.gallery img,
a,
button,
input:focus,
input[type=button],
input[type=reset],
input[type=submit],
textarea:focus {
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  border-radius: 4px;
}

.btn {
  background-color: #399fc5;
}

/* Main Section Styles */
main {
  padding-bottom: 20px;
}

/* Miscellaneous Styles */
.thumbnail {
  background-color: #e1e4eb !important;
}

.thumbnail:hover {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

.special-selector-fill-viewport.themed-content-page-container {
  flex-direction: column !important;
}

.form-section #action-item-form-submit {
	border-color: var(--tertiary-color); /* home page form */
}

/* Footer Styles */
footer {
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #ffffff;
  font-size: 13px;
  padding-top: 0px;
  line-height: 1.42857143;
  background-color: #399fc5;
  opacity: 1;
}

footer p {
  display: none;
}

footer a {
  color: #ffffff;
}

footer #footer-link-container a {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 17px;
}

footer #footer-link-container a:hover {
  color: #ffffff;
  text-decoration: none;
}

footer #footer-link-container {
  margin-bottom: 30px;
  margin-top: 30px;
}

footer .footer-link {
  display: inline-block;
  margin: 0px 7.5px;
}

footer #footer-social {
  text-align: right;
  font-size: 23px;
  margin: 0px auto;
  padding-right: 10%;
}

footer #footer-social a {
  color: #399fc5 !important;
  padding: 1em 1.1em;
  border-radius: 50px;
  background: #ffffff;
  line-height: 0.3em;
  position: relative;
  top: -18px;
  font-size: 23px;
}

footer #footer-social a:hover {
  background: #fec00f;
}

#footer-social .fa-facebook {
  padding: 0 3.93px;
}

/* Media Query Styles */
@media (max-width: 480px) {
  #logo img {
    width: 60%;
  }

  .navbar .navbar-toggler {
    top: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-header {
    padding-bottom: 0px !important;
  }

  .navbar-toggle:focus,
  .navbar-toggle:hover,
  .navbar-toggle:active {
    background-color: transparent !important;
  }

  .nav_btn,
  nav.navbar-fixed-top .navbar-header a {
    display: block !important;
  }

  .nav_btn {
    text-align: right;
    background: #399fc5;
    padding: 4px 15px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top: 15px;
    display: block;
  }

  .navbar-toggle {
    float: none !important;
    display: inline-block !important;
    border: 0px;
    margin: 0px;
    position: absolute;
    left: 0;
    padding: 5px 20px 20px 20px;
  }

  .icon-bar {
    background-color: #399fc5 !important;
    height: 3px !important;
  }

  nav.navbar-fixed-top .navbar-header a {
    margin: auto;
  }

  nav.navbar-fixed-top .navbar-collapse {
    display: none;
    border: 0px;
  }

  nav.navbar-fixed-top .navbar-collapse.in,
  nav.navbar-fixed-top .navbar-collapse.collapsing {
    display: block !important;
  }

  nav.navbar-fixed-top .navbar-collapse ul>li {
    display: block;
    text-align: left;
  }

  .navbar-right a {
    text-transform: capitalize;
  }

  nav.navbar-fixed-top .navbar-collapse ul>li a {
    padding: 10px 20px !important;
  }

  nav.navbar-fixed-top .navbar-collapse ul>li>ul>li a,
  .dropdown-menu li a {
    color: #ffffff !important;
  }

  nav.navbar-fixed-top .navbar-collapse ul>li>ul>li a:hover,
  .dropdown-menu li a:hover {
    background-color: #fec00f !important;
  }

  footer {
    margin-top: 60px !important;
  }

  #footer-social {
    text-align: center !important;
    padding: 0px !important;
  }

  .footer-link {
    display: block !important;
  }

  .footer-link+.footer-link {
    margin-top: 5px;
  }

  header .logo-toggle {
    justify-content: center;
  }

  #logo img {
    width: 80%;
  }

  .navbar-brand {
    margin: 0;
  }

  .volunteer-panel {
    margin-top: 0;
  }

  .logo-toggle a#logo {
    text-align: center;
  }
}

@media (min-width: 768px) {
  nav.navbar-fixed-top {
    box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
  }

  nav.navbar-fixed-top .navbar-header a img {
    max-height: 113.8px !important;
  }

  header .logo-toggle #logo img {
    height: 113.8px;
    width: 100%;
    padding: 0px;
  }
  
  /* Increasing the scroll margin top since the header for Libre Institute has more height than other clients  */
   .card-section {
        scroll-margin-top: 11.5rem !important;
    }
}

/* https://thelibreinstitute.actcentr.com/indexnew. For hidding the 'Attend Events' using the href Id unique . */
#actions-section-nav > div > a[href="#actiontab_2578-section"] {
  display: none;
}

/* https://thelibreinstitute.actcentr.com/indexnew. For hidding the 'Attend Events' section. */
#actiontab_2578-section{
  display: none;
}