:root {
  --spectral: 'Spectral', serif;
  --source: 'Source Sans Pro', sans-serif;

  --purple: #89496b;
  --purple-light: #c3a2b8;
  --purple-dark: #401d31;
  --orange: #a04c3b;
  --orange-light: #e4a194;
  --orange-dark: #5f2014;
  --yellow: #BC8F57;
  --yellow-light: #eac597;
  --yellow-dark: #824d10;

  --mod1image: url(img/mod-1-img.jpg);
  --mod2image: url(img/mod-2-img.jpg);
  --mod3image: url(img/mod-3-img.jpg);


  --h1: 3rem;
  --h2: 2.5rem;
  --h3: 1.5rem;
  --h4: 1.25rem;
  --h5: 0.75rem;
 }

*, *:hover {
  transition: 0.1s linear all;
}

html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -ms-font-smoothing: antialiased !important;
}

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

html, body, input, textarea {
  font-size: 17px;
  line-height: 1.75em;
  font-family: var(--source);
  color: #552b42;
}

h1, h2, h3, h4, h5 {
  font-family: var(--spectral);
  font-weight: normal;
  line-height: 1.2em;
  margin: 0 0 0.2em;
  letter-spacing: -0.07rem;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

h5 {
  font-size: var(--h5);
}

p {
  margin: 0 0 1.5em;
}

header {
  background: url(img/header-banner.png) no-repeat top left;
  background-size: 85% 100%;
  height: 120px;
  padding: 10px calc(100% * 0.5 / 14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F3F3F3;
  z-index: 9999;
}

header img {
  height: 80%;
}

header nav a {
    text-decoration: none;
    margin-left: 2em;
    letter-spacing: 1px;  
    color: var(--purple);
}

header nav a:hover {
    color: var(--purple-dark);
}

section.mod {
  min-height: 700px;
  padding: 5em 0 0em;
  display: flex;
  background-position: top center;
  background-size: 100%;
  position: relative;
  background-blend-mode: multiply;
  color: #fff;
  flex-direction: column;
  justify-content: flex-end;
  background-repeat: no-repeat;
}

.mod::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mod:hover {
  background-size: 102%;
}

.mod-desc {
  position: relative;
  z-index: 997;
  color: #fff;
}

.mod .mod-desc {
  padding: 0 calc(100% * 0.5 / 14);
}

.mod-label {
  text-transform: uppercase;
  color: white;
  padding: 5px 20px;
  letter-spacing: 1px;  
  font-family: var(--source);
  display: inline-block;
  margin-bottom: 1.5em;
  text-decoration: none;
  font-size: 1em;
  line-height: 1.25em
}

#toTop {
  cursor: pointer;
  float: right;
  font-weight: normal !important;
}

.mod-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 5em;
  z-index: 9997;
  position: relative;
  padding-left: calc(100% * 0.5 / 14);
  padding-bottom: 3em;
}

.mod-slider::-webkit-scrollbar-track {
  background-color: transparent;
}

.mod-slider::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

  .mod-slider::-webkit-scrollbar-thumb {
    background-color: #ffffff6e;
}

.mod-slider a {
  width: calc(100% / 2.5);
  margin: 0.5em 0.5em 0.5em 0;
  padding: 3em 3em;
  border-radius: 4px;
}

.topic-card {
  padding: 1.5em;
  margin: 0em 0em 0.5em 0;
  border-radius: 4px 0 0 4px;
  min-height:  60px;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
  width: 100%;
}

.mod-slider a:last-child {
  margin: 0.5em 5em 0.5em 0;
}

.topic-card h5 {
  font-family: var(--source);
  letter-spacing: 1px
}

.topic-card h3,
.topic-card h4 {
  color: #fff;
}

.topic-card.active,
.topic-card.active h5,
.mod-slider .topic-card:hover,
.mod-slider .topic-card:hover h5 {
  background-color: #fff !important;  
}


#mod-1.mod {
  background-image: var(--mod1image);
  background-color: var(--purple-light);
}

  #mod-1 .mod-label,
  #mod-1 .topic-card,
  #mod-1 .topic-card h5,
  #mod-1 #topic-list .topic-card:not(.active):hover h3 {
    background-color: var(--purple-dark);
    color: var(--purple-light);
  }

  #mod-1.mod::before {
    background-image: linear-gradient(transparent 0%, var(--purple) 100%);
  }

  #mod-1.mod:hover, #mod-1 #topic-main,
  #mod-1 #toTop:hover {
    background-color: var(--purple) !important;
  }

  #mod-1 .topic-card.active h3,
  #mod-1 .topic-card:hover h3 {
    color: var(--purple-dark);
  }

  #mod-1 blockquote {
    border-bottom-color: var(--purple);
  }

#mod-2.mod {
  background-image: var(--mod2image);
  background-color: var(--orange-light);
}

  #mod-2 .mod-label,
  #mod-2 .topic-card,
  #mod-2 .topic-card h5,
  #mod-2 #topic-list .topic-card:not(.active):hover h3 {
    background-color: var(--orange-dark);
    color: var(--orange-light);
  }

  #mod-2.mod::before {
    background-image: linear-gradient(transparent 0%, var(--orange) 100%);
  }

  #mod-2.mod:hover, #mod-2 #topic-main {
    background-color: var(--orange) !important;
  }

  #mod-2 .topic-card.active h3,
  #mod-2 .topic-card:hover h3 {
    color: var(--orange-dark);
  }

  #mod-2 blockquote {
    border-bottom-color: var(--orange);
  }

#mod-3.mod {
  background-image: var(--mod3image);
  background-color: var(--yellow-light);
}

  #mod-3 .mod-label,
  #mod-3 .topic-card,
  #mod-3 .topic-card h5,
  #mod-3 #topic-list .topic-card:not(.active):hover h3 {
    background-color: var(--yellow-dark);
    color: var(--yellow-light);
  }

  #mod-3.mod::before {
    background-image: linear-gradient(transparent 0%, var(--yellow) 100%);
  }

  #mod-3.mod:hover, #mod-3 #topic-main {
    background-color: var(--yellow) !important;
  }

  #mod-3 .topic-card.active h3,
  #mod-3 .topic-card:hover h3 {
    color: var(--yellow-dark);
  }

  #mod-3 blockquote {
    border-bottom-color: var(--yellow);
  }

#topic-main {
  padding: 5em calc(100% * 1 / 14) 8em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

#topic-main .mod-desc {
  flex: none;
  width: 100%;
  margin-bottom: 3em;
}

#topic-main .mod-desc h1 {
  color: #fff;
  font-size: var(--h3);
}

#topic-list {
  width: 30%;
}

#topic-content {
  background-color: #fff;
  flex: 1;
  padding: 2em 4em 5em 3em;
  position: relative;
  width: 70%;
}

#topic-content h3 {
  font-family: var(--spectral);
  margin-top: 1.5em;
}

#topic-content h4 {
  font-family: var(--source);
  font-weight: bold;
  margin: 1.5em 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#topic-content h5 {
  font-family: var(--source);
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0 0 0.5em;
}

#topic-content iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0em 0 1em;
}

.reflect-box {
    padding: 0.5em 4em 1em 2em;
    position: relative;
    background: #efefef;
    margin: 0 0 3em;
    border-radius: 8px;
}

#topic-content img {
  max-width: 100%;
  margin: 1em 0 2em;
}

#mod-3 #topic-content img {
  max-height: 300px;
}

hr {
  margin: 2em 0 4em;
  background-color: var(--purple);
}

.img-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.img-grid > img {
  width: 49.5%;
  object-fit: cover;
}

.caption {
  font-family: var(--source);
  background: #f1f1f1;
  color: #828282;
  padding: 0.25em 0.5em;
  text-transform: uppercase;
  font-size: var(--h5);
  margin-top: -2.5em;
}

#topic-content video {
  width: 100%;
  height: auto;
  margin-bottom: 1.5em;
}

#topic-content a {
  color: var(--purple-dark);
}

.key {
    padding: 2em 3em;
    border-bottom: 1px solid #C89050;
    background: #fff7ee;
    margin-bottom: 5em;
}

blockquote {
    font-size: 1.75em;
    line-height: 1.4em;
    font-family: "Spectral";
    letter-spacing: -0.05em;
    padding: 1em 2em 1em 2em;
    position: relative;
    background: #efefef;
    margin: 1em 2em 1.5em 1em;
    border-radius: 8px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

blockquote:before {
    content: "\201C";
    position: absolute;
    left: 0.3em;
    font-size: 2em;
    top: 0.5em;
    font-family: Georgia;
}


#about-sinag-o {
  background-color: #EBEBEB;
  padding: 5em calc(100% * 1 / 14) 4em;
}  

#about-sinag-o span {
  font-size: var(--h3);
}

#about-sinag-o ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 1em 0;
}

#about-sinag-o li {
  padding: 0 2em 0 0;
  margin: 0;
  display: flex;
  align-items: center;
  color: var(--yellow);
  font-size: var(--h3);
}


#about-sinag-o li img {
  width: 80px;
  margin-right: 0.25em;
}

#testimonials {
  padding: 5em calc(100% * 1.5 / 14);
}

#testimonials .quote {
  font-family: var(--spectral);
  letter-spacing: -0.05em;
}

#testimonials p {
  text-transform: uppercase;
  margin: 0.5em 0;
  font-weight: bold;
  font-family: var(--source);
  letter-spacing: 0em;
}

.testi {
  display: flex;
  align-items: flex-start;
  margin: 0 0 5em;
}

.testi img {
  margin-right: 2em;
}

.comm {
  background: #eee;
}

.comm #topic-main img {
  width: 100%;
  margin-bottom: 2em;
  height: auto;
  object-fit: contain;
  object-position: center;
}

#years {
  width: 100%;
  text-align: center;
  margin: 1em 0 2em;
}

#years a {
  text-transform: uppercase;
  color: white;
  padding: 5px 10px;
  letter-spacing: 1px;  
  font-family: var(--source);
  display: inline-block;
  margin-bottom: 1.5em;
  text-decoration: none;
  background: #d69843;
  opacity: 0.6;
}

#years a.active, #years a:hover {
  opacity: 1;
}

footer {
  background-image: url(img/about-banner.png);
    background-position: top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position-x: right;
    background-color: #f3f3f3;
}

.inner {
padding: 1em 0 0em 0;
    margin: 0 auto;
    width: calc(100% - 6em);
}

.eighty {
width: 50%;
    padding: 3%;
    display: inline-block;
}

#quiz {
  margin: 0;
  padding: 0;
}

.prompt {
  display: block;
  font-size: 20px;
  padding-bottom: 3em;
  border-bottom: 1px solid var(--purple-light);
}

.prompt h3 {
  margin-bottom: 1.5em;
}

.btn {
  /*margin: 0 20px 0 20px;*/
  border: 0;
  padding: 0.5em 0.75em;
  cursor: pointer;
  color: var(--purple-dark);
  background: #eee;
  border-radius: 4px;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.btn-group-justified {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
}

.btn:hover {
  background-color: var(--purple-light);
}
.btn.active, #submit-btn:hover {
  background-color: var(--purple-dark);
  color: var(--purple-light);
}

#submit-btn {
  text-transform: uppercase;
  padding: 0.5em 1.25em;
}

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

.bottom {
  margin-bottom: 100px;
}

.hide {
  display: none;
}

.show {
  display: block;
}

/* RESULTS */
.results {
  margin-bottom: 40px;
  margin-top: 40px;
}

button {
  bottom:1px;
  cursor:pointer;
  margin-right:8px;
  position:relative;
  padding:4px 11px;
  border:1px solid var(--purple);
  background:none;
  border-radius:3px;
  color:var(--purple);
  font-size:0.5em;
  transition:all .3s ease-in-out;
}

button:hover {background:var(--purple); color:#fff;}

.comm #topic-main img {
  width: 100%;
  max-height: 650px;
}

.comm table {
  border-collapse: collapse;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.comm h2 {
  width: 100%;
}

.comm td,
.comm th {
  border: 1px solid black;
  padding: 0.75em;
}

.comm th {
  background-color: #e0e0e0;
  text-align: left;
  text-transform: uppercase;
  padding: 1em 0.75em;
}

.sort-table {
  width: 100%;
}

.region, .island {
  white-space: nowrap;
}

@media screen and (max-width: 1000px) {

  footer {
    background-image: none;
  }

  footer .eighty,
  #topic-list,
  #topic-content {
    width: 100%;
  }

  #topic-main .topic-card {
    display: none;
  }

  #topic-main .topic-card.active {
    display: block;
  }

  .comm #topic-main img {
    max-height: 430px ;
  }

}

@media screen and (max-width: 750px) {

header {
  flex-wrap: wrap;
  padding: 0;
  background-size: 120% 100%;
  position: fixed;
  width: 100%;
  top: 0;
}


header > a {
  padding: 10px calc(100% * 0.5 / 14);
}

header img {
  height: 42%;
}

header nav {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 10px 0;
}

header nav a {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.home #mod-1 {
  margin-top: 6em;
}

#topic-main {
  padding: 11em calc(100% * 1 / 14) 8em;
}

#topic-content {
  padding: 2em 2em 5em 2em;
}

blockquote {
  padding: 1em 1em 1em 2em;
}

.mod-slider a {
  width: calc(100% / 1.5);
}

#about-sinag-o ul, .testi {
  flex-wrap: wrap;
}

.btn-group-justified {
  flex-wrap: wrap-reverse;
}

.btn-group-justified {
  width: 100% !important;
}

.btn-group {
  width: 18%;
  margin: 0 1% 0.5em;
}

.btn-group button {
  width: 100%;
}

.testi .quote {
  margin-top: 1em;
}

section.mod, .mod:hover {
  background-size: auto 100%;
}


  .comm #topic-main img {
    max-height: 320px ;
  }


}

@media screen and (max-width: 500px) {
  .topic-card h3 {
    font-size: 6vw;
  }

  #toTop,
    a.mod-label {
    width: 100%;
    text-align: center;
  }

  #mod-3 #topic-content img {
    max-height: 175px;
  }

  .comm #topic-main img {
    max-height: 220px ;
  }

}