/*----------------------------------------------------
  Device specific styles
 --------------------------------------------------- */

/* Extra Large devices (desktops, less than 75em) */
@media (min-width: 1200px) {
  .display-1 {
    font-size: 780%;
  }
  .display-2 {
    font-size: 230%;
  }

  .video {
    width: 710px;
    height: 533px;
  }
}

/* Large devices (desktops, less than 75em) */
@media (max-width: 1200px) {
  .beeware-logo {
    display: block;
    margin: 15px 0 35px;
    width: 30%;
  }

  .display-1 {
    font-size: 500%;
  }

  .display-2 {
    font-size: 148%;
  }

  .video {
    width: 576px;
    height: 432px;
  }
}

/* Medium devices (tablets, less than 62em) */
@media (max-width: 992px) {
  .beeware-logo {
    display: block;
    margin: 15px 0 35px;
    width: 25%;
  }

  .display-1 {
    font-size: 500%;
  }
  .display-2 {
    font-size: 148%;
  }

  .video {
    width: 430px;
    height: 322px;
  }
}

/* Small devices (landscape phones, less than 48em) */
@media (max-width: 768px) {

  .navbar-brand-block{
    position: absolute;
    margin-top: -40px;
    right: 10px;
  }

  .beeware-logo {
    display: block;
    margin: 15px 0 35px;
    width: 50%;
  }

  .display-1 {
    font-size: 400%;
  }
  .display-2 {
    font-size: 118%;
  }

  .jumbotron .btn-lg {
    font-size: 1rem;
  }

  .video {
    width: 500px;
    height: 375px;
  }
}
/* Extra small devices (portrait phones, less than 34em) */
@media (max-width: 544px) {

  .beeware-logo {
    display: block;
    margin: 15px auto 35px;
    width: 50%;
  }

  .content {
    margin-bottom: 7em !important;
  }

  .display-1 {
    font-size: 270%;
    /* TODO: Once Bootstrap is upgraded, instead use class text-xs-center */
    text-align: center;
  }
  .display-2 {
    font-size: 80%;
    /* TODO: Once Bootstrap is upgraded, instead use class text-xs-center */
    text-align: center;
  }

  .footer .copyright {
    margin-bottom: 0.5rem;
    text-align: center;
  }

  .footer-social {
    margin-bottom: 0.5rem;
  }

  .footer-social, .footer-sitemap {
    text-align: center;
  }

  .jumbotron {
    margin-bottom: 0;
  }

  .jumbotron .btn-lg {
    font-size: 1rem;
  }

  .jumbotron p {
    margin: 1.5rem 0;
  }

  .jumbotron-buttons a {
    width: 100%;
  }

  .navbar {
    padding: 0 !important;
  }

  .navbar-brand-block {
    position: absolute;
    margin-top: -40px;
    padding: 0 1em 0.2em;
    right: 10px;
  }

  .navbar-collapse {
    background-color: #343a40;
    padding-top: 0.75em;
  }

  .navbar-collapse li {
    border-bottom: 1px solid #666;
    padding: 0.5em 1em 0.4em;
  }

  .navbar-toggler {
    padding: 0.3em;
  }

  .nav-top {
    margin: 0.7em 1em;
  }

  .video {
    width: 300px;
    height: 225px;
  }
}

/*----------------------------------------------------
  Note styles
 --------------------------------------------------- */

p:has(+ .admonition.admonition-note), .admonition.admonition-note {
  background: #DDDDDD;
}

p:has(+ .admonition.admonition-note) {
  margin: 2em 0 0 0;
  padding: 0.5em 0 0 0.5em;
  font-weight: bold;
}

.admonition.admonition-note {
  padding: 1em 2px 2px 2em;
  margin-bottom: 1em;
  font-style: italic;
}

/*----------------------------------------------------
  Main styles
 --------------------------------------------------- */

.content {
  margin-top: -1em;
  margin-bottom: 5em;
}

h1 {
  font-family: 'Cutive', serif;
  margin-top: 1em;
}

.display-1 {
  font-weight: bold;
  margin-top: 0;
}

.display-2 {
  font-weight: bold;
  margin: 0;
}

h2 {
  font-family: 'Cutive', serif;
  font-size: 160%;
  margin: 1.8rem 0 0.8rem 0;
  line-height: 2rem;
}

h2:first-child {
  margin-top: 1.4rem;
}

h3 {
  font-family: 'Cutive', serif;
  font-size: 135%;
  margin: 1.8rem 0 0.8rem 0;
  line-height: 1.8rem;
}

h3:first-child {
  margin-top: 1.0rem;
}

h4 {
  font-family: 'Cutive', serif;
  margin: 1.8rem 0 0.8rem 0;
  font-size: 120%;
  line-height: 1.6rem;
}

h4:first-child {
  margin-top: 0.8rem;
}


h5 {
  font-family: 'Cutive', serif;
  font-size: 110%;
  margin: 1.8rem 0 0.8rem;
  line-height: 1.6rem;
}

h6:first-child {
  margin-top: 0.8rem;
}

h6 {
  font-family: 'Cutive', serif;
  margin: 1.8rem 0 0.8rem 0;
  font-size: 100%;
  line-height: 1.6rem;
}

h6:first-child {
  margin-top: 0.8rem;
}

a i {
  padding-right: 0.25em;
}

nav {
  font-family: 'Cutive', serif;
}

.banner {
  padding: 2rem 1rem;
  background-color: #eceeef;
  margin-bottom: 2rem;
}

.gutter {
  padding: .7rem;
  background-color: #eceeef;
  border-radius: 1rem;
}

.home-gutter {
  text-align: center;
}


.project-description h2, .project-description h3 {
  text-align: center;
  clear: both;
}

.incomplete {
  font-style: italic;
  border: 1px solid #666;
  background-color: #ffffcc;
  color: #666666;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.align-left {
  float: left;
  margin-right: 0.5em;
}

blockquote {
  padding: 0.5em 0.5em 0.1em 1em;
  font-weight: bold;
  background: #eeeeee;
  border-left: 0.5em solid #cccccc;
}


.sidebar-module-inset {
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: .25rem;
}


/*----------------------------------------------------
  Navigation menu styles
 --------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}

.navbar {
  padding-top: 1em;
}

.fixed-top {
	position: relative;
}

/* Fix for separators in header menu when display is 760px-and-smaller wide */
@media (max-width: 760px) {
  .navbar-collapse li {
    border-bottom: 1px solid #666;
  }
  .navbar-collapse .header-button li.nav-item {
    border-bottom: 0
  }
  .navbar-collapse .header-button {
    border-bottom: 1px solid #666;
  }
}

/*----------------------------------------------------
  Homepage styles
 --------------------------------------------------- */

.jumbotron .btn-lg {
  margin-bottom: 1rem;
}

.jumbotron {
  padding-bottom: 0;
}

.jumbotron p {
  margin: 2rem 0;
}

/*----------------------------------------------------
  Project Showcase and Important Category Styles
 --------------------------------------------------- */
.showcase {
  margin: 2vh;
  font-size: larger;
}

.important-category {
  margin: 2vh;
  padding-bottom: 1rem;
}

.important-description {
  margin-bottom: 1.2rem;
}

/*----------------------------------------------------
  Sticky footer styles
 --------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 10rem;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  /*height: 60px;*/
  padding-top: 1em;
  background-color: #f5f5f5;
}

.footer a {
  margin: 0 0.75em;
}


/*----------------------------------------------------
  Carousels in gutter
 --------------------------------------------------- */

.gutter h4, .gutter h5, .gutter h6 {
  margin: 0 0 1rem 0;
}

.gutter .carousel-control {
  background-image: none;
}

.gutter .carousel-indicators {
  bottom: 0;
  margin-bottom: 0;
}

.gutter .carousel-inner {
  padding: 0 0 1rem 0;
}

.icon {
  width: 25px;
}

/* carousel visual */

.gutter .carousel-indicators {
  position: absolute;
  right: 0;
  bottom: -5px;
}

.gutter .carousel-indicators li {
  width: 9px;
  height: 9px;
  border: 1px solid #333;
  background-color: transparent;
  border-radius: 50%;
}

.gutter .carousel-indicators .active {
  width: 10px;
  height: 10px;
  background-color: rgb(3,3,3, .5);
  border-radius: 50%;
}

/*----------------------------------------------------
  Projects
 --------------------------------------------------- */

.project-type h3 {
  font-weight: bold;
  text-align: center;
}

.projects-gutter h6 {
  text-align: center;
}

.projects-gutter ul {
  list-style-type: none;
  cursor: pointer;
}

.project-gutter li {
  text-align: left;
}

.project-gutter p {
  text-align: center;
}

.project-gutter img {
  margin-bottom: 1rem;
}

.project img {
  float: left;
  margin: 0rem 1rem;
  position: relative;
  top: -0.3rem;
}

.project.showcase img {
  margin: 0rem 1rem;
  top: -2.0rem;
}

/*----------------------------------------------------
  Team
 --------------------------------------------------- */

.row.team {
  margin-bottom: 1rem;
}

/*----------------------------------------------------
  Members
 --------------------------------------------------- */

.period {
  font-weight: bold;
  font-style: italic;
  font-size: 110%;
  margin-top: 0.6em;
}

/*----------------------------------------------------
  Donations
 --------------------------------------------------- */

.level {
  margin-bottom: 1rem;
}

.level div {
  border: 1px solid #373a3c;
  border-top: 0;
  border-radius: 0 0 0.5em 0.5em;
  padding: 0.5em;
  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}

.level h2 {
  color: white;
  border-radius: 0.5em 0.5em 0 0;
  font-size: 110%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}

.level div p {
  font-style: italic;
  text-align: center;
}

.level li.nope {
  font-style: italic;
  text-decoration: line-through;
  color: #eee;
}
.level.individual h2 {
  background: #65b20e;
}

.level.professional h2 {
  background: #b20e49;
}

.level.bronze h2 {
  background: #965A38;
}

.level.silver h2 {
  background: #A8A8A8;
}

.level.gold h2 {
  background: #C98910;
}

.level img {
  margin-bottom: 1rem;
}

/*----------------------------------------------------
  About
 --------------------------------------------------- */

.about {
  text-align: center;
}

.about img {
  margin-bottom: 1rem;
}

/*----------------------------------------------------
  Members
 --------------------------------------------------- */

.members h2 {
  clear: both;
}

.members li.professional {
  clear:both;
  list-style: none;
}

.members li.professional img {
  float: left;
  padding: 0 1em 1em 0em;
  margin-left: -1em;
}

/*----------------------------------------------------
  Upcoming Event on Homepage
 --------------------------------------------------- */
div#news-gutter {
  padding: 1rem;
}

.upcoming_event_info {
  margin-top: -1rem;
  margin-bottom: 1em;
}

.upcoming_event_info p {
  font-size: 110%;
  margin-bottom: .1em;
}