body, html {
  height: 100%;
  font-size: 16px;
  background: var(--main-bg-color);
  transition: background-color 1s 0s;
  transition-timing-function: ease-in-out;
  font-variant-numeric: lining-nums;
} 

html {
  --main-bg-color: #f4f2f0;
  --main-bg-gradient: radial-gradient(circle, rgba(184,200,238,1) 0%, rgba(255,255,255,1) 100%);
  --theme-primary-color:#ae670a;
  --theme-secondary-color:#bd5a03;
  --theme-tertiary-color:#f5ede2;
  --text-color-primary: #18171b;
  --text-color-secondary: #454545;
  --font-family-primary: 'loos-wide-1', 'loos-wide-2', sans-serif; 
  --font-family-primary-weight: 500;
  --font-family-primary-style: normal;
  --font-family-secondary: 'loos-wide-1', 'loos-wide-2', sans-serif; 
  --font-family-secondary-weight: 400;
  --font-family-secondary-style: normal;

} 

body, div, h1, a {

font-style: normal;
}

a {
color: var(--theme-primary-color);
text-decoration: none;
}

a:hover {
color: var(--theme-secondary-color);
text-decoration: none;
}

h1 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-family-primary-weight);
  color: var(--text-color-primary);
  font-size: 4rem;
  line-height: 3rem;
}

h2 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-family-primary-weight);
  color: var(--text-color-primary);
}

h3 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-family-primary-weight);
  color: var(--text-color-primary);
}

h4 {
font-family: var(--font-family-primary);
font-weight: var(--font-family-primary-weight);
color: var(--text-color-primary);
  font-size: 1.2rem;
}

p { font-family: var(--font-family-secondary);
  font-weight: var(--font-family-secondary-weight);
  font-style:var(--font-family-secondary-style);
  color: var(--text-color-secondary);
  font-size: 1rem;
}

.gallery-item {
width:100%;
position: relative;
cursor: pointer;
overflow-y: hidden;
}

.gallery-image {
width: inherit;
max-width: 100%;
margin: 0;
padding:0;
transition: filter .5s ease-in-out;
filter:contrast(90%);
}

.gallery-figure {
margin: 0;
}

.gallery-project-name {
  display:block;
  position:absolute;
  left:0px;
  right:0px;
  bottom:0;
  transition: transform .5s ease-in-out;
  transform: translateY(100%);
  color: #000;
  font-family: var(--font-family-primary);
  font-weight: var(--font-family-primary-weight);
  border-top: 1px solid #000;
  padding:1rem;
  background-color: var(--theme-tertiary-color);
}

.gallery-item:hover .gallery-project-name {
  transition: transform .2s ease-in-out;
  transform: translateY(0%);
}

.gallery-item:hover .gallery-image {
  transition: filter .2s ease-in-out;
  filter: contrast(110%);
}


.gallery-caption {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
padding: 1rem;

}

.gallery-caption p {
color: #ffffff;
filter: drop-shadow(0px 0px 5px #000000);
font-weight:700;
margin:0;
}

p {
  font-weight: 400;
}

.year-label {
  font-weight: 700;
  color: var(--text-color-primary);
  position: sticky;
  top:2rem;
}

.bottom-pad {
padding-bottom: 4rem;
}

.upper-line {
  border-top-width: 1px;
  border-top-color: var(--text-color-secondary);
  border-top-style: solid;
}

.tworem-vertical-padding {
padding: 2rem 0;
}

.title-bar {
  font-family: var(--font-family-primary);
  font-weight: var(--font-family-primary-weight);
}

.top-bar {
font-family: var(--font-family-primary);
font-weight: 700;
}

menu.ptc-menu { padding:1.5rem; position:sticky;}
menu.ptc-menu li {list-style-type: none; display:inline-block; }
menu.ptc-menu li a {display:inline-block; color:white; background-color:blue; padding:.5rem 1rem; border: 3px solid blue; color:white; margin-right:.5rem; border-radius: 2rem; min-width: 6rem; text-align: center;}
menu.ptc-menu li a:hover {color:black; background-color: white;border: 3px solid black;}



footer { background-color: var(--theme-primary-color); padding:2rem; margin:0 auto;}
footer menu.footer-menu {list-style-type: none;}
.footer-logo {
  text-align: center;
  margin:0 auto;
  padding: 1rem;
  position: relative;
  width:8rem;

}


.modes {padding:0; margin:0; display: inline-block; font-size: 1rem; right:0;}
.modes li { width:2rem; display: inline-block; list-style-type:none; margin:0 1rem 0 0; }
.mode_icon {stroke-width: 0px; fill:#999999;}
.mode_icon:hover {fill:black;}

.button {
  font-family: var(--font-family-primary);
  font-weight: 700;
  background-color: black;
  font-size:1.2rem;
  
}

.button:hover {
background-color: var(--theme-secondary-color);
}

.button a {
  color:#ffffff;
}

.button a:hover {
text-decoration: none;
}

.ptc-caption-hero {
  padding: 1rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  margin-top: 0.8rem;
  margin-bottom: 4rem;
  text-align: center;
}


.ptc-caption-hero h2 {
  color: #ffffff;
  filter: drop-shadow(0px 0px 8px #000000);
}

.ptc-caption-hero p {
  color: #ffffff;
  filter: drop-shadow(0px 0px 20px #000000);
  font-size: 1.5rem;
}

.nav-logo {
  max-width: 10rem;
}

.top-bar {
  position: absolute;
  top:10px;
  left:10px;
  z-index: 2;
}

.sub-nav .top-bar a {
  color: var(--theme-primary-color);
}

.sub-nav .top-bar a:hover {
color: var(--theme-secondary-color);
}

.sub-nav .top-bar, .sub-nav .title-bar, .sub-nav #responsive-menu  {
position: sticky;
border-width: 0 0 1px 0 ;
border-color:  #000000;
border-style: solid;
background-color: var(--theme-tertiary-color);
margin:0;
top:0;
left:0;
width:100%;
}

.index-nav .top-bar, .index-nav .title-bar, .index-nav #responsive-menu  {
width:98%;
}


.index-nav .top-bar a {
filter: drop-shadow(0px 0px 5px #000000);
color:#ffffff;
}

.sub-nav .top-bar a {
filter: none;
}

.sidebar {
position:relative;
padding-left:1rem;
}



.gallery-detail-img {
width:100%;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #000000;
}

.gallery-detail-img:last-of-type { 
border-width:0 1px;
border-style: solid;
border-color: #000000;
}

.arrow {
  width: 2rem;
  max-width: 2rem;
  display: block;
}

/*Large screens*/
@media print, screen and (min-width: 64em) {
  .arrow {
    width: 2rem;
    max-width: 2rem;
    display: block;
  }

.header {
  padding: 6rem 0 1rem 0;
}

.sidebar {
  padding-top:2rem;
  position: relative;
}
.sidebar h3 {
  font-size:1.6rem;
}
.sidebar p {
  font-size:1rem;
}
/*archive page*/
.gallery {
border-color:#000000;
border-style:solid;
border-width:1px 0 0 1px;
}
.gallery-item:nth-of-type(n) {
border-width: 0 1px 1px 0;
border-style: solid;
border-color:#000000;
}

.gallery-item:nth-of-type(n+77) {
border-width: 0 1px 0 0;
border-style: solid;
border-color:#000000;
}
}
/*Medium screens*/
@media print, screen and (min-width: 40em) and (max-width:64em) {
  .arrow {
    width: 1.5rem;
    max-width: 1.5rem;
    display: block;
  } 
  
.header {
  padding: 4rem 0 0.5rem 0;
} 
.sidebar {
padding-top:2rem;
position: relative;
}
.sidebar h3 {
font-size:1.4rem;
}
.sidebar p {
font-size:1rem;
}
/*archive page*/
.gallery {
border-color:#000000;
border-style:solid;
border-width:1px 0 0 1px;
}
.gallery-item:nth-of-type(n) {
border-width: 0 1px 1px 0;
border-style: solid;
border-color:#000000;
}

.gallery-item:nth-of-type(n+76) {
border-width: 0 1px 0 0;
border-style: solid;
border-color:#000000;
}

}
/*Small screens*/
@media print, screen and (max-width: 40em) {

  .arrow {
    width: 1.5rem;
    max-width: 1.5rem;
    display: block;
  } 

  .nav-logo {
    max-width:6rem;
  }

.index-nav #responsive-menu {
  width:95%;
  text-align:right;
}

.index-nav #responsive-menu .top-bar-right li {
  padding-right:2rem;
}

.index-nav .top-bar-right .menu, .sub-nav .top-bar-right .menu  {
  text-align:right;
}


.top-bar {
  -webkit-flex-wrap: nowrap !important;
      -ms-flex-wrap: nowrap !important;
          flex-wrap: nowrap !important;
}
.top-bar .top-bar-left {
  -webkit-box-flex: 1 !important;
  -webkit-flex: 1 1 auto !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
  margin-right: auto !important;
}
.top-bar .top-bar-right {
  -webkit-box-flex: 0 !important;
  -webkit-flex: 0 1 auto !important;
      -ms-flex: 0 1 auto !important;
          flex: 0 1 auto !important;
  margin-left: auto !important;
}

.index-nav .top-bar-right ul {
margin-left:5rem;
}

.sub-nav .top-bar-right ul {
margin-left:0;
}

.index-nav ul, .index-nav li {
display:inline-block;



}
.menu a {
  display:inline-block !important;
}

.ptc-caption-hero h2 {
  font-size: 1.8rem;
}

.ptc-caption-hero {
  padding: 1rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-top: 0.8rem;
  margin-bottom: 4rem;
  text-align: center;
}

.header {
  padding: 2rem 0 0 0;
}  
.sidebar {
  padding-top:2rem;
  padding-bottom:1rem;
  position: relative;
}
.sidebar h3 {
  font-size:1.6em;
}
.sidebar p {
  font-size:inherit;
}
/*detail page*/
.gallery-detail-img:nth-last-child(-n + 1){
  border-width:0 1px 1px 1px;
}
/*archive page*/
.gallery {
  border-color:#000000;
  border-style:solid;
  border-width:1px 0 0 1px;
}
.gallery-item:nth-of-type(n) {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color:#000000;
}

.gallery-item:nth-of-type(77n) {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color:#000000;
}

}

/* Splash for Giant screens */
@media screen and (min-width:64rem) {
.orbit-wrapper {
  width:100%;
  height:100%;

}
.orbit-container { 
  li {
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  &:nth-child(1n) {
  background-image:url('../img/PTC_GreatestHits_heroes_1.png');
  background-color: #00c792;
  }
  &:nth-child(2n) {
    background-image:url('../img/PTC_GreatestHits_heroes_2.png');
    background-color: #fd8423;
  }
  &:nth-child(3n) {
    background-image:url('../img/PTC_GreatestHits_heroes_3.png');
    background-color: #e9477f;
  }
  &:nth-child(4n) {
    background-image:url('../img/PTC_GreatestHits_heroes_4.png');
    background-color: #e4ce52;
  }
  &:nth-child(5n) {
    background-image:url('../img/PTC_GreatestHits_heroes_5.png');
    background-color: #00ba85;
  }
  &:nth-child(6n) {
    background-image:url('../img/PTC_GreatestHits_heroes_6.png');
    background-color: #45becf;
  }
  &:nth-child(7n) {
    background-image:url('../img/PTC_GreatestHits_heroes_7.png');
    background-color: #ff9535;
  }
  &:nth-child(8n) {
    background-image:url('../img/PTC_GreatestHits_heroes_8.png');
    background-color: #f05d89;
  }
}
}
}

@media screen and (max-width:64rem) {
  .orbit-container { 
      li {
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      &:nth-child(1n) {
      background-image:url('../img/PTC_GreatestHits_heroes_1.png');
      }
      &:nth-child(2n) {
        background-image:url('../img/PTC_GreatestHits_heroes_2.png');
      }
      &:nth-child(3n) {
        background-image:url('../img/PTC_GreatestHits_heroes_3.png');
      }
      &:nth-child(4n) {
        background-image:url('../img/PTC_GreatestHits_heroes_4.png');
      }
      &:nth-child(5n) {
        background-image:url('../img/PTC_GreatestHits_heroes_5.png');
      }
      &:nth-child(6n) {
        background-image:url('../img/PTC_GreatestHits_heroes_6.png');
      }
      &:nth-child(7n) {
        background-image:url('../img/PTC_GreatestHits_heroes_7.png');
      }
      &:nth-child(8n) {
        background-image:url('../img/PTC_GreatestHits_heroes_8.png');
      }
  }
  }
    }  
  @media screen and (max-width:40rem) {
      .orbit-container { 
          li {
          width: 100vw;
          height: 100svh;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          &:nth-child(1n) {
          background-image:url('../img/PTC_GreatestHits_heroes_1.png');
          }
          &:nth-child(2n) {
            background-image:url('../img/PTC_GreatestHits_heroes_2.png');
          }
          &:nth-child(3n) {
            background-image:url('../img/PTC_GreatestHits_heroes_3.png');
          }
          &:nth-child(4n) {
            background-image:url('../img/PTC_GreatestHits_heroes_4.png');
          }
          &:nth-child(5n) {
            background-image:url('../img/PTC_GreatestHits_heroes_5.png');
          }
          &:nth-child(6n) {
            background-image:url('../img/PTC_GreatestHits_heroes_6.png');
          }
          &:nth-child(7n) {
            background-image:url('../img/PTC_GreatestHits_heroes_7.png');
          }
          &:nth-child(8n) {
            background-image:url('../img/PTC_GreatestHits_heroes_8.png');
          }
      }
      }
        }  

.info-category {
font-weight: 700;
}

.sorter a {
padding-right:2rem;
}

/* BEGIN MODAL STYLES */

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}

/* Modal Content */
.modal-content {
position: relative;
top: 0;
background-color: #fefefe;
width: 100%;
height:100vh;
overflow: hidden;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
}

/* The Close Button */
.close {
color: var(--text-color-secondary);
float: right;
font-size: 48px;
font-weight: 250;
line-height: 80px;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 0 16px;
background-color: none;
color: black;
position:relative;
top:0;
right:0;

margin:0;
padding:0;
}

.modal-body {
z-index: 5;
padding: 0;
height: 100vh;

margin:0;
}

.modal-img {
width:100%;
padding: 2rem 2rem 0 2rem;
}

.modal-img:nth-last-child(-n + 1){
padding: 2rem;
margin-bottom: 2rem;
}


/* Add Animation */
@-webkit-keyframes slideIn {
from {top: -100px; opacity: 0} 
to {top: 0; opacity: 1}
}

@keyframes slideIn {
from {top: -100px; opacity: 0}
to {top: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}

@keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}

/* END MODAL STYLES */


/* COLLAPSIBLE SORTING BUTTON STUFF */

.collapsible-button {
background-color: #eee;
color: var(--theme-primary-color);
font-family: var(--font-family-primary);
font-weight: var(--font-family-primary-weight);
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 1.2rem;
margin-bottom:1rem;
}

.collapse-active, .collapsible-button:hover {
background-color: #d3e2ff;
}

.collapse-categories {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}

/* END COLLAPSIBLE SORTING BUTTON STUFF */