html{

  margin:0px;
  padding:0px;
  width:100%;
}

body{

  margin:0px;
  padding:0px;
  width:100%;
   
}

@media (max-width:900px){

  .history-top-text{

  color:#6494aa;

  font-family:inconsolata;
  font-size:6.5vw;
  margin-top:0px;
margin-right:20%;
margin-left:20%;
padding-top:calc(130px + 1vw);
padding-bottom:15%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:3vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #6494aa 1.5px;
}


/*yellow section*/

  .history_yellow_sec{

    background-color:#a63d40;
    color:#ffffff;
    width:100%;
    display:grid;
    grid-template-columns: 1.3fr 2.5fr;

  

  }

  .history_yellow_sec img{

   width:100%;
   height:100%;
   object-fit:cover;
   object-position:55% 0;
    
  }


   .history_yellow_text {

    padding-top:25%;
    margin-left:15%;
    margin-right:15%;
    margin-bottom:30%;
    font-family:Fira Sans;
    font-weight:300;
      font-size: 3.5vw;
   
   }

   /*accordian menu stuff*/


.dropdown_glossary {

  margin-right:15%;
  margin-left:15%;
  background-color: #e9b872;
  
}

.dropdown_glossary p{

  margin-right:0px;
  margin-left:0px;
}

.dropdown_glossary h2 {
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-size:5vw;
  color:#ffffff;

}

.dropdown_glossary h3{
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-weight:300;
  margin-bottom:10%;
  font-size:3.5vw;
  color:#ffffff;
}



.accordion {
  background-color: #e9b872;
  display:grid;
  grid-template-columns: 1fr .1fr;
  color: #ffffff;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-bottom:.5vw #ffffff solid;
}

.accordion.active {

  border-bottom:none;

}

.accordion p{

  font-weight:400;
  font-family:fira Sans;
  font-size:3.5vw;



}

.panel.active{

  border-bottom:.35vw #ffffff solid;
  color:#ffffff;
  background-color:#c99954;
  font-family:fira sans;
  font-weight:300;
  padding-top:20%;
  padding-bottom:10%;

  

}


.panel.active p{

  font-size:3.5vw;
  margin-bottom:0px;
  
  padding:5vw;
  padding-bottom:0px;
  background-color:#c99954;


}

.panel.active img{

  width:80%;
  margin-right:10%;
  margin-left:10%;
}

.plus {
    display: inline-block;  /* ensures it's visible */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}


/* Minus should be hidden by default */
.minus {
    display: none;  /* hide the minus sign by default */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}

/* When the accordion is active, hide the plus and show the minus */
.active.plus {
    display: none;  /* hide plus when active */
}

.active.minus {
    display: inline-block;  /* show minus when active */
}

.active, .accordion:hover {
  background-color: none; 
}

.panel {
  padding: 0 10%;
  display: none;
  background-color: #e9b872;
  overflow: hidden;
}

.whole {
  background-color:#e9b872;
  padding-top:20%;
  padding-bottom:30%;
}

.panel.active h2{

  font-size:4vw;
    padding:5vw;

}

.panel.active h2:hover{

  color:#151515;
}

.panel ul{

  font-size:3.5vw;
  font-family:fira sans;

}

}
@media (max-width:900px) and (min-width:450px){

  .history-top-text{

  color:#6494aa;

  font-family:inconsolata;
  font-size:4.5vw;
  margin-top:8%;
margin-right:20%;
margin-left:20%;
padding-top:calc(130px + 1vw);
padding-bottom:15%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:2vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #6494aa 1.5px;
}


/*yellow section*/

  .history_yellow_sec{

    background-color:#a63d40;
    color:#ffffff;
    width:100%;
    display:grid;
    grid-template-columns: 1.5fr 2.5fr;

  

  }

  .history_yellow_sec img{

   width:100%;
   height:100%;
   object-fit:cover;
   object-position:50% 0;
    
  }


   .history_yellow_text {

    padding-top:25%;
    margin-left:15%;
    margin-right:15%;
    margin-bottom:30%;
    font-family:Fira Sans;
    font-weight:300;
      font-size: 2.5vw;
   
   }

   /*accordian menu stuff*/


.dropdown_glossary {

  margin-right:20%;
  margin-left:20%;
  background-color: #e9b872;
  
}

.dropdown_glossary p{

  margin-right:0px;
  margin-left:0px;
}

.dropdown_glossary h2 {
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-size:4vw;
  color:#ffffff;

}

.dropdown_glossary h3{
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-weight:300;
  margin-bottom:10%;
  font-size:2.5vw;
  color:#ffffff;
}



.accordion {
  background-color: #e9b872;
  display:grid;
  grid-template-columns: 1fr .1fr;
  color: #ffffff;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-bottom:.25vw #ffffff solid;
}

.accordion.active {

  border-bottom:none;

}

.accordion p{

  font-weight:400;
  font-family:fira Sans;
  font-size:2.5vw;



}

.panel.active{

  border-bottom:.25vw #ffffff solid;
  color:#ffffff;
  background-color:#c99954;
  font-family:fira sans;
  font-weight:300;
  padding-top:20%;
  padding-bottom:10%;

  

}


.panel.active p{

  font-size:2vw;
  margin-bottom:0px;
  padding-bottom:0px;
  background-color:#c99954;


}

.panel.active img{

  width:80%;
  align-items:center;
  align-content:center;
}

.plus {
    display: inline-block;  /* ensures it's visible */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}


/* Minus should be hidden by default */
.minus {
    display: none;  /* hide the minus sign by default */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}

/* When the accordion is active, hide the plus and show the minus */
.active.plus {
    display: none;  /* hide plus when active */
}

.active.minus {
    display: inline-block;  /* show minus when active */
}

.active, .accordion:hover {
  background-color: none; 
}

.panel {
  padding: 0 15%;
  display: none;
  background-color: #e9b872;
  overflow: hidden;
}

.whole {
  background-color:#e9b872;
  padding-top:20%;
  padding-bottom:30%;
}

.panel.active h2{

  font-size:2.5vw;
    padding:5vw;

}

.panel.active h2:hover{

  color:#151515;
}

.panel ul{

  font-size:2vw;
  font-family:fira sans;
  margin-left:10%;

}

}
@media (min-width:900px) and (max-width:1920px){
.history-top-text{

  color:#6494aa;

  font-family:inconsolata;
  font-size:3.5vw;
  margin-top:8%;
margin-right:25%;
margin-left:25%;
padding-top:15%;
padding-bottom:20%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:2vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #6494aa 1.5px;
}


/*yellow section*/

  .history_yellow_sec{

    background-color:#a63d40;
    color:#ffffff;
    width:100%;
    display:grid;
    grid-template-columns: 3.5fr 4fr;

  

  }

  .history_yellow_sec img{

   width:100%;
   height:100%;
   object-fit:cover;
   object-position:50% 0;
    
  }


   .history_yellow_text {

    padding-top:20%;
    margin-left:20%;
    margin-right:20%;
    margin-bottom:30%;
    font-family:Fira Sans;
    font-weight:300;
      font-size: 1.5vw;
   
   }

   /*accordian menu stuff*/


.dropdown_glossary {

  margin-right:20%;
  margin-left:20%;
  background-color: #e9b872;
  
}

.dropdown_glossary p{

  margin-right:0px;
  margin-left:0px;
}

.dropdown_glossary h2 {
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-size:2vw;
  color:#ffffff;

}

.dropdown_glossary h3{
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-weight:300;
  margin-bottom:10%;
  font-size:1.5vw;
  color:#ffffff;
}



.accordion {
  background-color: #e9b872;
  display:grid;
  grid-template-columns: 1fr .1fr;
  color: #ffffff;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-bottom:.18vw #ffffff solid;
}

.accordion.active {

  border-bottom:none;

}

.accordion p{

  font-weight:400;
  font-family:fira Sans;
  font-size:1.5vw;



}

.panel.active{

  border-bottom:.18vw #ffffff solid;
  color:#ffffff;
  background-color:#c99954;
  font-family:fira sans;
  font-weight:300;
  padding-top:20%;
  padding-bottom:10%;

  

}


.panel.active p{

  font-size:1.25vw;
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top:10%;
  background-color:#c99954;


}

.panel.active img{

  width:50%;
  align-self:center;
  margin-left:25%;
  margin-bottom:5%;


}

.plus {
    display: inline-block;  /* ensures it's visible */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}


/* Minus should be hidden by default */
.minus {
    display: none;  /* hide the minus sign by default */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}

/* When the accordion is active, hide the plus and show the minus */
.active.plus {
    display: none;  /* hide plus when active */
}

.active.minus {
    display: inline-block;  /* show minus when active */
}

.active, .accordion:hover {
  background-color: none; 
}

.panel {
  padding: 0 20%;
  display: none;
  background-color: #e9b872;
  overflow: hidden;
}

.whole {
  background-color:#e9b872;
  padding-top:20%;
  padding-bottom:30%;
}

.panel.active h2{

  font-size:1.5vw;
  padding-top:5vw;

}

.panel.active h2:hover{

  color:#151515;
}

.panel ul{

  font-size:1.25vw;
  font-family:fira sans;
  margin-left:5%;
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top:5%;

}

  .arrow-container {
      display: flex;
      justify-content: center;  /* Horizontally center the arrow line */
      align-items: center;      /* Vertically center */
     
      margin: 0;
       margin-top:2%;
    
    }

      .arrow {
      width:75%;  /* Length of the line */
      height: 0;
      margin-left:-25%;
      max-width:1000px;
      border-top:  .15vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

    /* Arrowhead on the right side */
    .arrow::after {
      content: "";
      position: absolute;                                         
      right:-.7vw;                              
      top:-.4vw;
      border-top: .4vw solid transparent;  /* Transparent top */
      border-bottom: .4vw solid transparent; /* Transparent bottom */
      border-left: .8vw solid #ffffff;   /* Arrowhead pointing right */
    }
  
}
@media (min-width:1920px){
.history-top-text{

  color:#6494aa;

  font-family:inconsolata;
  font-size:3.5vw;
  margin-top:8%;
margin-right:25%;
margin-left:25%;
padding-top:15%;
padding-bottom:20%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:2vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #6494aa 1.5px;
}


/*yellow section*/

  .history_yellow_sec{

    background-color:#a63d40;
    color:#ffffff;
    width:100%;
    display:grid;
    grid-template-columns: 3.5fr 4fr;

  

  }

  .history_yellow_sec img{

   width:100%;
   height:100%;
   object-fit:cover;
   object-position:50% 0;
    
  }


   .history_yellow_text {

    padding-top:20%;
    margin-left:20%;
    margin-right:20%;
    margin-bottom:20%;
    font-family:Fira Sans;
    font-weight:300;
      font-size: 1vw;
   
   }

   /*accordian menu stuff*/


.dropdown_glossary {

  margin-right:20%;
  margin-left:20%;
  background-color: #e9b872;
  
}

.dropdown_glossary p{

  margin-right:0px;
  margin-left:0px;
}

.dropdown_glossary h2 {
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-size:1.5vw;
  color:#ffffff;

}

.dropdown_glossary h3{
  font-family:inconsolata;
  margin-right:0px;
  margin-left:0px;
  font-weight:300;
  margin-bottom:5%;
  font-size:1vw;
  color:#ffffff;
}



.accordion {
  background-color: #e9b872;
  display:grid;
  grid-template-columns: 1fr .1fr;
  color: #ffffff;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-bottom:.1vw #ffffff solid;
}

.accordion.active {

  border-bottom:none;

}

.accordion p{

  font-weight:400;
  font-family:fira Sans;
  font-size:1vw;



}

.panel.active{

  border-bottom:.18vw #ffffff solid;
  color:#ffffff;
  background-color:#c99954;
  font-family:fira sans;
  font-weight:300;
  padding-top:20%;
  padding-bottom:10%;

  

}


.panel.active p{

  font-size:1vw;
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top:10%;
  background-color:#c99954;


}

.panel.active img{

  width:50%;
  align-self:center;
  margin-left:25%;
  margin-bottom:5%;


}

.plus {
    display: inline-block;  /* ensures it's visible */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}


/* Minus should be hidden by default */
.minus {
    display: none;  /* hide the minus sign by default */
    text-align: right;
    margin-right: 15%;
    font-size: 3.5vw;
}

/* When the accordion is active, hide the plus and show the minus */
.active.plus {
    display: none;  /* hide plus when active */
}

.active.minus {
    display: inline-block;  /* show minus when active */
}

.active, .accordion:hover {
  background-color: none; 
}

.panel {
  padding: 0 20%;
  display: none;
  background-color: #e9b872;
  overflow: hidden;
}

.whole {
  background-color:#e9b872;
  padding-top:10%;
  padding-bottom:30%;
}

.panel.active h2{

  font-size:1.25vw;
  padding-top:5vw;

}

.panel.active h2:hover{

  color:#151515;
}

.panel ul{

  font-size:1vw;
  font-family:fira sans;
  margin-left:5%;
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top:5%;

}

  .arrow-container {
      display: flex;
      justify-content: center;  /* Horizontally center the arrow line */
      align-items: center;      /* Vertically center */
     
      margin: 0;
       margin-top:2%;
    
    }

      .arrow {
      width:75%;  /* Length of the line */
      height: 0;
      margin-left:-25%;
      max-width:1000px;
      border-top:  .15vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

    /* Arrowhead on the right side */
    .arrow::after {
      content: "";
      position: absolute;                                         
      right:-.7vw;                              
      top:-.4vw;
      border-top: .4vw solid transparent;  /* Transparent top */
      border-bottom: .4vw solid transparent; /* Transparent bottom */
      border-left: .8vw solid #ffffff;   /* Arrowhead pointing right */
    }
  
}