/*getting rid of margins and paddings*/
* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*Move navigation bar to the right*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    float: right;
}

/*aligning nav bar horizontally*/
.navbar-links ul {
    margin: 0;
    padding: 50px;
    display: flex; 
}

/*remove dots from the list/navbar*/
.navbar-links li { 
    list-style: none;
}

.navbar-links li a {
    text-decoration: none; /*remove underline from the list*/
    color: #ed1f24;
    padding: 1rem;
    display: block; /*it allows space around*/
    font-size: 14px;
}

.navbar-links li a:hover {
  background-color: #808080;
  color: #000000;
}

.navbar-links li a.active {
  background-color: #808080;
}

/*Making image banners of pages fit the screen*/
.pages {
  width: 100%;
  height: auto;
}

h1, h3, h4, h5 {
  text-align: center;
  color: #ed1f24;
}

.other-lists {
  display: flex;
  text-align: center;
  margin-left: 25px;
}

.other-lists li{
  display: block;
  padding: 35px;
}

p {
  padding: auto;
  text-align: center;
  text-align: justify;
  margin-left: 15px;
  margin-right: 15px;
}

/*Gallery CSS*/
.gallery-container {
  max-width: 1200px;
  margin: auto;
  /*background: #808080;*/
  overflow: auto;
}

.gallery {
  margin: 5px;
  /*border: 1px solid #808080;*/
  float: left;
  width: 390px;
  height: 390px;
}

.gallery-image {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
  color: #ed1f24;
}
/*
footer {
  padding: 10px;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  background: #808080;
  color: #ed1f24;
}
*/

/*Aligning image and text side by side*/
.box {
  position: relative;
  padding: 20px;
  display: flex;
}

.box .content {
  padding-left: 20px;
  padding-right: 20px;
}

.box .content h2{
  margin: 0;
  padding-left: 0;
  color: #ed1f24;
  text-align: center;
}

.box .content p {
  margin: 0;
  padding: 10px 0 0;
  text-align: justify;
}

/*Contact us*/
address {
  margin-left: 10px;
  margin-right: 20px;
}

.column {
  margin-left: 15px;
  margin-right: 15px;
}

/*partner CSS*/
.partner-container {
  max-width: 1200px;
  margin: auto;
  /*background: #808080;*/
  overflow: auto;
}

.partner {
  margin: 5px;
  /*border: 1px solid #808080;*/
  float: left;
  width: 150px;
  height: 1500px;
}

.partner-logo {
  width: 100%;
  height: auto;
}

/*Responsiveness*/
.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: #808080;
  border-radius: 10px;
}

/*tablet Responsiveness*/
@media (max-width: 1024px) {
  .toggle-button {
      display: flex;
  }
  .navbar-links {
      display: none;
  }

.navbar {
  flex-direction: column;
  align-items: flex-start;
}

.navbar-links ul {
  width: 100%;
  flex-direction: column;
}

.navbar-links li a {
  padding: .5rem 1rem;
}

.navbar-links.active {
  display: flex;
  color: black;
  background-color: #808080;
}

h3 {
  text-align: center;
}
.other-lists {
  flex-direction: column;
  align-content: center;
}

.box {
  flex-direction: column;
  align-content: center;
}

.img-text {
  width: 100%;
  height: auto;
}

.img-omit {
  display: none;
}

.gallery-container {
  flex-direction: column;
}

.gallery {
  float: none;
  margin: auto;
}

.gallery-image {
  width: 100%;
  height: auto;
}
}



/*Cellphone Responsiveness*/
@media (max-width: 600px) {
  .toggle-button {
      display: flex;
  }
  .navbar-links {
      display: none;
  }

.navbar {
  flex-direction: column;
  align-items: flex-start;
}

.navbar-links ul {
  width: 100%;
  flex-direction: column;
}

.navbar-links li a {
  padding: .5rem 1rem;
}

.navbar-links.active {
  display: flex;
  color: black;
  background-color: #808080;
}

.other-lists {
  flex-direction: column;
  align-content: center;
}

.box {
  flex-direction: column;
  align-content: center;
}

.img-fluid {
  width: 100%;
  height: auto;
}  

.img-text {
  width: 100%;
  height: auto;
}

.img-omit {
  display: none;
}

.gallery-container {
  flex-direction: column;
}

.gallery {
  float: none;
  margin: auto;
}

.gallery-image {
  width: 100%;
  height: auto;
}

.row {
  flex-direction: column;
  align-content: center;
  text-align: center;
}

iframe {
  width: 100%;
  height: auto;
}
}