@font-face {
  font-family: DisplayBold;
  src: url(../Mouser.otf);
}

@font-face {
  font-family: 'Noto Sans', sans-serif;
}

html {
  scroll-behavior: smooth;
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

.links {
  text-decoration:underline;
  text-decoration-color:#1c49dd;
  color: #1c49dd;
}

.links:hover {
  text-decoration:underline;
  text-decoration-color:#0092cc;
  color:#0092cc;
}

body {
    background-image: url(../images/home2bg_smooth.png);
    background-attachment: scroll;
    background-position: top;
    background-size: cover;
    background-repeat: repeat-y;
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    animation: fadeInAnimation ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


nav {
  position: sticky;
  top: 0px;
  display: flex;
  font-family: 'DisplayBold', sans-serif;
  margin: auto;
  justify-content: space-between;
  z-index: 10;
  max-width: 1100px;
  padding-top: 2vh;
  box-shadow: 1px 9px 177px -58px rgba(74,74,74,0.61);
-webkit-box-shadow: 1px 9px 177px -58px rgba(74,74,74,0.61);
-moz-box-shadow: 1px 9px 177px -58px rgba(74,74,74,0.61);
}

.scrolled {
  background-color: rgb(255 255 255);
  backdrop-filter: blur(5px);
  border: 2px solid #c60707;
  box-shadow: 0px 4px 22px rgb(0 0 0 / 10%), inset 0px 0px 10px rgb(0 0 0 / 5%);
  max-width: 1100px;
  justify-content: space-between;
  align-items: center;
  padding-right: 5%;
  padding-left: 5%;
  padding-top: unset;
  padding-block: 0.5em;
  top: 10px;
  border-radius: 0.5em;
}

.csScrolled {
  transition: .1s;
  border-bottom: 1px #454545;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: -1px -9px 15px 9px rgba(0,0,0,0.29);
  -webkit-box-shadow: -1px -9px 15px 9px rgba(0,0,0,0.29);
  -moz-box-shadow: -1px -9px 15px 9px rgba(0,0,0,0.29);
}

@keyframes drop {
    from {opacity: 0;}
    to {opacity: 100;}
}

.logo {
    cursor: pointer;
    width: auto;
    height: auto;
    margin-top: 2%;
}

.scrolledLogo {
  margin-top: 2%;
}

.navBar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 100;
    color: #2b2b2b;
    font-size: calc(1em + .5vh);
    cursor: pointer;
    line-height: 1;
}

#footerContainerScroll {
  position: relative;
  bottom: 2vh;
}

.csNavBar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: DisplayBold;
  font-weight: 100;
  color: white;
  font-size: calc(1em + .5vh);
  cursor: pointer;
  line-height: 1;
  margin-bottom: 1%;
}



.csScrolledTxt {
  font-size: .8em;
  font-weight: 400;
  color: #454545;
}

.scrolledTxt {
  font-weight: 200;
}

.subHeadOff {
  display: none;
}

.subHeadOn {
  display: flex;
  color: #656565;
  font-family: 'Noto Sans', sans-serif;
  line-height: 0; 
  align-items: center;
}

.navBarItems {
    margin: 0;
    display: flex;
}


.navBarItems li {
    margin-left: 3vw;
    transition-timing-function: ease-out;
}

.navBarItems li:hover {
    transition: .3s;
    color:#DD0000;
    transform: translateY(-1vh)
}

.csNavBarItems {
  margin: 0;
  display: flex;
}

.csNavBarItems li {
  margin-left: 3vw;
  color: white;
  transition-timing-function: ease-out;
}

.csNavBarItems li:hover {
  transition: .3s;
  color: white;
  transform: translateY(-1vh)
}

#csCase li {
  color: white;
}

#csCaseHover {
  color: white;
}

.csHoverUp {
  transition: .3s;
  color: white;
  transform: translateY(-1vh)
}

.csHoverDown {
  transition: .3s;
  color: inherit;
  transform: translateY(0vh)
}

.hoverUp {
  transition: .3s;
  transform: translateY(-1vh)
}

.hoverDown {
  transition: .3s;
  color: #454545;
  transform: translateY(0vh)
}

ul {
    list-style: none;
}

ol {
  font-size: 1em;
}

.csHeroContainer {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  justify-content: left;   
  min-height: 15vh;
  height: auto;
  width: 100%;
  background-color: #dd0000;
  background-image: linear-gradient(135deg, #dd0000 0%, #820000 100%);
  padding-top: 5%;
  padding-bottom: 2%;
}

#csButton {
  margin-top: 2vh;
}

#encoreHero {
  background: rgb(255,61,0);
  background: linear-gradient(175deg, rgba(255,61,0,1) 0%, rgba(255,153,0,1) 100%);
}

.roleScope h4 {
  color:#2b2b2b;
  line-height: 1.2;
}

#a3Hero {
  background: rgb(42,65,162);
  background: linear-gradient(45deg, rgba(42,65,162,1) 14%, rgb(110, 179, 121) 100%);
}

#ngHero {
  background: rgb(16, 38, 138);
  background: linear-gradient(45deg, rgb(16, 38, 138) 14%, rgb(214, 12, 66) 100%);
}

#rcHero {
  background: rgb(43, 43, 43);
  background: linear-gradient(45deg, rgb(43, 43, 43) 14%, rgb(0, 38, 108) 100%);
}

#gvHero {
  background: rgb(0, 71, 138);
  background: linear-gradient(175deg,#2B3668 0%, #4b5eb3 100%);
}

#gvHero > h1 {
  color:white;
  font-size: calc(1em + 3vw);
}

.csHeroItem {
  display: flex;
  flex-direction: column;
  justify-content: left;   
  height: 100%;
  width: 100%;
  max-width: 1100px;
  margin: auto;
}

.h1Time {
  font-family: DisplayBold;
  font-size: calc(1em + 8vw);
  line-height: 1;
  background: linear-gradient(76deg, rgba(255,45,45,1) 0%, rgba(91,0,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  overflow:hidden;
}

.h1TimeNav {
  font-family: DisplayBold;
  font-size: 2em;
  line-height: 1;
  background: linear-gradient(76deg, rgba(255,45,45,1) 0%, rgba(91,0,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  overflow:hidden;
}


.h1TimeAbout {
  font-family: DisplayBold;
  font-size: calc(1em + 4vw);
  line-height: 1;
  background: linear-gradient(76deg, rgba(255,45,45,1) 0%, rgba(91,0,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-bottom: 2vh;
}

.h1TimeContact {
  font-family: DisplayBold;
  font-size: calc(1em + 4vw);
  line-height: 1;
  background: linear-gradient(76deg, rgba(255,45,45,1) 0%, rgba(91,0,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 4vh;
}

.csHeroItem h1 {
  color: white;
  font-size: 3em;
}

.caseStudySub {
  color: white;
  font-weight: 200;
  font-size: calc(1em + 1vw);
  padding-top: 2vh;
}

.introContainer {
  display: grid;
  grid-template-columns:1fr 0.5fr;
  grid-template-rows: auto auto;
  padding-top: 15%;
  max-width: 1100px;
  margin: auto;
  row-gap: 10px;
  padding-bottom: 3%;
  grid-auto-flow: row;
  grid-template-areas:
    "projectOverview heroImage"
    "roleScope roleScope";
}

.projectOverview { 
  grid-area: projectOverview;
  padding-right: 3%;
 }

 .projectOverview h3 {
  Margin-bottom: 3vh;
 }

.heroImage { 
  grid-area: heroImage; 
  text-align: right;
  max-height: 275px;
}                           

.heroImage img {
  max-width: 100%;
  height: auto;
  max-height: 500px;
  position: relative;
  top: -20vh;
}

#encoreHeroImg {
  text-align: center;
}

.centerText {
  text-align: center;
}

.roleScope { 
  grid-area: roleScope; 
}

.caseStudyGrid {
  display: grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows: 15vh 1fr 1fr 1fr 1fr;
  padding-bottom: 3vh;
  max-width: 1100px;
  margin: auto;
  row-gap: 3vh;
  grid-auto-flow: row;
  grid-template-areas:
    "csHeader csHeader"
    "csItemA1 csItemA2"
    "csItemB1 csItemB2"
    "csItemC1 csItemC2"
    "csItemD1 csItemD2";
}

#csGrid3 {
  grid-template-rows: 15vh auto auto 1fr 1fr;
  grid-template-areas:
    "csHeader csHeader"
    "csItemA1 csItemA1"
    "csItemA2 csItemA2"
    "csItemB1 csItemB2"
    "csItemC1 csItemC2";
}

#csGrid5 {
  grid-template-rows: 15vh 1fr .5fr .5fr 1fr 1fr;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemB1 csItemB1"
  "csItemC1 csItemC2"
  "csItemD1 csItemD2"
  "csItemE1 csItemE2";
}

#csGrid5Encore {
  grid-template-rows: 15vh .2fr .2fr 1fr 1fr 1fr;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemB1 csItemB2"
  "csItemC1 csItemC2"
  "csItemD1 csItemD2"
  "csItemE1 csItemE2";
}

#csGrid5a3 {
  grid-template-rows: unset;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA1"
  "csItemB1 csItemB2";
}

#a3b1 {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  row-gap: 2vh;
}
.csItemA1 ul {
  list-style: circle;
  font-size: calc(1em + .5vh);
  color: #3f3f3f;
}

.csItemA1 > li {

}
#csGrid5a3Ideation {
  grid-template-rows: unset;
  grid-template-areas:
  "csItemA1 csItemA1"
  "csItemB1 csItemB1"
  "csItemC1 csItemC1";
}

.problemStatement {
  padding-top: 2vh;
  padding-bottom: 4vh;
  padding-right: 4vh;
  padding-left: 4vh;
  background-color: #d7e5ef;
  color:#2B3668;
  border-radius: 5px;
  margin-top: 5vh;
}

.additional {
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 4vh;
  padding-left: 4vh;
  background-color: rgb(39, 51, 97);
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5vh;
  max-width: 1100px;
}

.additional > h3 {
  text-align: center;
  color: white;
}

.additional > p {
  color: white;
}

.additional ul li {
  list-style:circle;
  font-size: calc(1em + .7vw);
  color: white;
}

.problemStatement > h3 {
  text-decoration:underline;
  text-decoration-thickness:3px;
}

.problemStatement > h3 {
  font-weight: 400;
  line-height: 1.5;
}

.problemStatement > p {
  font-weight: 500;
}

.caption {
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 4vh;
  padding-left: 4vh;
  background-color: #d7e5ef;
  color:#000000;
  border-radius: 5px;
}

.csItemB1 ol, li {
  font-size: calc(1em + .5vh);
  color: #3f3f3f;
}

.csItemA2 > ol {
    font-size: calc(1em + .3vw);
}

#csGrid5a3Prototyping {
  grid-template-rows: unset;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA2 csItemA2"
  "csItemB1 csItemB2"
  "csItemC1 csItemC2"
  "csItemD1 csItemD1"
  "csItemD2 csItemA1"
}

#csGrid5a3Testing {
  grid-template-rows: unset;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA1"
  "csItemA2 csItemA2"
}

#csGrid3Research {
  grid-template-rows: 15vh 1fr .3fr .6fr .5fr .5fr 1fr;
  grid-template-areas:
  "csHeader csHeader csHeader csHeader"
  ". csItemA1 csItemA2 ."
  ". csItemD1 csItemD1 ."
  ". csItemD2 csItemD2 ."
  ". csItemB1 csItemB1 ."
  ". csItemB2 csItemB2 ."
  ". csItemC1 csItemC2 ."
}

#csGrid3ResearchGV {
  grid-template-rows: 15vh 1fr .3fr .6fr .5fr .5fr 1fr;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemD1 csItemD1"
  "csItemD2 csItemD2"
  "csItemB1 csItemB1"
  "csItemB2 csItemB2"
  "csItemC1 csItemC2"
}

#csGrid5EncoreIdeation {
  grid-template-rows: 15vh 1fr 1fr .7fr auto auto;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemB1 csItemB2"
  "csItemC1 csItemC2"
  "csItemD1 csItemD1"
  "csItemD2 csItemD2";
}

#csGrid5gvIdeation {
  grid-template-rows: 15vh .5fr auto .7fr;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemB1 csItemB2"
  "csHeaderDup csHeaderDup";
}

#csGrid5EncorePrototyping {
  grid-template-rows: 15vh .5fr auto .5fr .2fr auto 1fr;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemB1 csItemB1"
  "csItemB2 csItemB2"
  "csItemC1 csItemC1"
  "csItemC2 csItemC2"
  "csItemD1 csItemD2";
}

#csGrid5GVPrototyping {
  grid-template-rows: 15vh auto .3fr .5fr auto 1fr;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA1"
  "csItemA2 csItemA2"
  "csItemB1 csItemB1"
  "csItemB2 csItemB2"
  "csItemC1 csItemC2";
}

#csGrid5GVBias {
  grid-template-rows: 15vh 1fr 1fr 1fr;
  padding-bottom: 2vh;
  grid-template-areas:
  "csHeader csHeader"
  "csItemA1 csItemA2"
  "csItemB1 csItemB2"
  "csItemC1 csItemC2";
}

#csGrid5GVBias ul {
  list-style: unset;
  font-size: 1.2em;
}

#csGrid5GVBias li {
  font-size: 1.8em;
}

.csG5img {
  width: 100%;
  height: auto;
}

.margin {
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.caseStudyGrid h2 {
  margin-bottom: 10px;
}

.caseStudyGrid img {
  max-width: 90%;
  height: auto;
}

#centerImg {
  margin-left: 5%;
}

.csFooterMoreWorkBucket{
  display: flex;
  column-gap: 3%;
}

.csGVcontainer {
  display: flex;
  column-gap: 2.5%;
  max-width: 1100px;
  margin: auto;
  padding-bottom: 3vh;
  padding-top: 3vh;
}

.csGVcontainer img {
  max-width: 80%;
  width: 50%;
  max-height: 231px;
  align-self: center;
}

.csGVcontainer h3 p {
  text-align: center;
}

.csGVitem {
  display: flex;
  flex-direction: column;
  row-gap: 2em;
  max-width: 33%;
}

.csHeader { 
  grid-area: csHeader;
  background-color: #dd0000;
  background-image: linear-gradient(135deg, #dd0000 0%, #820000 100%);
  padding-bottom: 1%;
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
  text-align: center;
  border-radius: 5px;
}

.csHeader > h1 {
  color: white;
  font-weight: 300;
  font-size: calc(1em + 2vw);
  line-height: 2;
}

.csHeaderDup { 
  grid-area: csHeaderDup;
  background-color: #dd0000;
  background-image: linear-gradient(135deg, #dd0000 0%, #820000 100%);
  padding-block: 3vh;
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  line-height: 1.5;
}

.maxHeight {
  max-height: 225px;
}

.maxHeight300 {
  max-height: 300px;
}

.maxHeight500 {
  max-height: 500px;
}


.otherWorkCard {
  width: 350px;
  background-color: none;
  border: 1px solid #c4c4c4;
  border-radius: .5em;
  Display: Flex;
  column-gap: 1em;
  padding-block: 1em;
  height: 70px;
}

.otherWorkCard:hover {
  background-color:#eaeaea50;
}

.otherWorkCard:hover  i {
  transition: .5s;
  color: rgb(233, 45, 45);
  transform: translateX(10px);
}

.flex > i {
  color:#727272;
}

.otherWorkCard:hover h3 {
  color:#000000;
} 

.otherWorkCard:hover .readMore {
  display: unset;
}

.readMore {
  display:none;
}

.otherWorkCardImg {
  margin: auto;
  max-width: 70px;
  height: auto;
}

.otherWorkCardText {
  color: #c4c4c4;
  width: 70%;
}

.otherWorkCardText p {
  font-size: .8em;
}

.otherWorkCardText > .genreChip {
  width: fit-content;
  justify-content: space-evenly;
  flex-wrap:wrap;
}

.chipContainer {
  display: flex;
  flex-wrap: wrap;
  row-gap: 5px;
  column-gap: 5px;
}

.otherWorkCard h3 {
  font-size: 1.5em;
  color:#505050;
  line-height: 1.5;
}

.song-card-created {
  background-color: #f6f6f6;
  border-radius: .5em;
  border: 1px solid #c4c4c4;
  width: 350px;
  height: auto;
  min-height: 200px;
  margin: 0;
  overflow: hidden;
  box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.148);
}

.song-card-created:hover {
  transition: 250ms;
  background-color: #ffffff;
  border: 1px solid #8d8d8d;
  box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.40), inset 2px -1px 15px 0px rgba(52, 52, 52, 0.061);
}

.song-card-created:hover h1 {
  transition: 250ms;
  transform: translateY(-5px);
}

.song-card-created:hover > .song-card-created-covercontainer {
  background: linear-gradient(360deg, #000000ca 0%, rgba(0, 0, 0, 0.491) 80.13%), url(../images/a3card.png);
  background-size: cover;
  background-position: center;
}

.song-card-created:hover > #rcHome {
  background: linear-gradient(360deg, #000000ca 0%, rgba(0, 0, 0, 0.491) 80.13%), url(../images/rchome.png);
  background-size: cover;
}

.song-card-created:hover > #connectHome {
  background: linear-gradient(360deg, #000000ca 0%, rgba(0, 0, 0, 0.491) 80.13%), url(../images/ngHero.png);
  background-size: cover;
}

#rcHome {
  background: linear-gradient(360deg, #000000ca 0%, rgba(0, 0, 0, 0.09) 80.13%), url(../images/rchome.png);
  background-size: cover;
}

#connectHome {
  background: linear-gradient(360deg, #000000ca 0%, rgba(0, 0, 0, 0.09) 80.13%), url(../images/ngHero.png);
  background-size:cover;
  background-repeat:no-repeat;
}

.song-card-created-covercontainer {
  height: 15vh;
  background: linear-gradient(360deg, #000000ca 0%, rgba(0, 0, 0, 0.09) 80.13%), url(../images/a3card.png);
  background-size:cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.076));
  background-position: center;
}

.song-card-created-covertextcontainer {
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 10px;
  align-items: center;
}

.song-card-created-covertext {
  color: white;
  margin: 0;
}

.song-card-created-covertext > p {
  line-height: 0;
}

.song-card-created-covertext > h1 {
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 1.8em;
  line-height: 2em;
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
}

.genreChip {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #e4e4e4;
  height: fit-content;
  border-radius: .6em;
}

.genreChip > p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: rgb(126, 118, 118);
  font-weight: 600;
}

.songcard-created-infocontainer {
  display: flex;
  padding-left: 10px;
  gap: 1em;
  color: #cecece;
  line-height: 0;
  padding-top:1vh;
}

.flex {
  display: flex;
  align-items:center;
  column-gap: 1vh;
}

.screenshot {
  max-width: 200px;
  height: auto;
}

.descriptionContainer {
  display: flex;
  flex-direction: column;
  row-gap: 2vh;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 2em;
  padding-block: 2vh;
}

.descriptionContainer > h5 {
  font-size: .8em;
  font-weight: 700;
  color:#9e9e9e;
  font-style: italic;
}

.descriptionContainer > p {
  font-size: 1em;
  font-weight: 500;
  color:#676767;
}

.csItemA1 { 
  grid-area: csItemA1;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.csItemA2 { 
  grid-area: csItemA2;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.csItemB1 { 
  grid-area: csItemB1;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
 }

.csItemB2 { 
  grid-area: csItemB2;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.csItemC1 { 
  grid-area: csItemC1;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.csItemC2 { 
  grid-area: csItemC2;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.csItemD1 { 
  grid-area: csItemD1;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
 }

.csItemD2 { 
  grid-area: csItemD2;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
 }

.csItemE1 { 
  grid-area: csItemE1;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
 }

.csItemE2 { 
  grid-area: csItemE2;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
 }

#csFlex {
  display: flex;
  justify-content: space-evenly;
}

#csFlexEncore {
  display: flex;
  justify-content: space-evenly;
}

.csCard {
  width: auto;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.csCardContainer {
  text-align: center;
  padding: 10px 10px;
}

.csCard img {
  height: auto;
  width: auto;
  max-height: 400px;
}

.finalDesign {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0px 0px;
  padding-bottom: 10vh;
  background-color: #000000;
  background-image: linear-gradient(180deg, #000000 23%, #181818 100%);
  grid-template-areas:
    "fdHeader"
    "fdImages";
}

.finalDesignEncore {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  
}

.fdContainer {
  display: flex;
  max-width: 1100px;
  margin: auto;
  justify-content: space-between
}

.fdContainera3 {
  display: flex;
  max-width: 1100px;
  margin: auto;
  justify-content: space-between
}

.fdCopyContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10%;
  width: 50%;
}

.fdCopyContainer h1 {
  color: white;
  margin-bottom: 2%;
}

.fdCopyContainer p {
  color: white;
  font-weight: 500;
  font-size: calc(1em + 1.5vw);
  line-height: 1.1;
}

.fdCopyContainerEncore {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.fdCopyContainerEncore h1 {
  color: white;
  margin-bottom: 2%;
  font-size: 3em;
}

.fdCopyContainerEncore p {
  color: white;
  font-weight: 500;
  font-size: calc(1em + 1vw);
  line-height: 1.1;
}

.fdHeader { 
  grid-area: fdHeader;
}

.fdHeader H1 {
  padding-top: 5vh;
  color: white;
  text-align: center;
  margin-bottom: 5vh;
}

.fdHeaderEncore {
  text-align: center;
  margin-bottom: 5vh;
  padding-top: 10px;
}

.fdHeaderEncore H1 {
  color: #FF3D00;
}

#blue {
  color: #2B3668;
}

#blue h1 {
  color: #2B3668;
}

.fdImages { 
  grid-area: fdImages;
  display: flex;
  justify-content: space-evenly;
  grid-column-gap: 2vw;
}

.fdImages img {
  width: auto;
  height: auto;
}

.fdImagesEncore {
  display: flex;
  justify-content: center;
  width: auto;
  max-height: 70vh;
}

#fdImagesa3 {
  padding-top: 3vh;
}

#fdImagesGV {
  padding-top: 2%;
  margin-right: 10%;
}

.fdImagesEncore img {
  height: 100%;
  width: auto;
}

.csFooter {
  display: flex;
  column-gap: 5%;
  flex-direction: row;
  max-width: 1100px;
  margin: auto;
  padding-bottom: 10vh;
}

.csFooterItem {
  display: flex;
  flex-direction: column;
  gap: 10px 10px;
  margin-top: 2vh;
}

.moreWorkCardContainerEncore {
  display: flex;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0)),
  url('../images/encore_city.png');
  width: 15vw;
  height: 30vh;
  margin-top: 3vh;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -webkit-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  border-radius: 6px;
  justify-content: center;
  align-items: flex-end;
  transition: .3s;
}

.moreWorkCardContainerEncore:hover {
  transform: translateY(-10px);
  box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -webkit-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -moz-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  box-shadow: none;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 60, 0)),
  url('../images/encore_city.png');
}

.moreWorkCardContainera3 {
  display: flex;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0)),
  url('../images/a3planningview.png');
  width: 15vw;
  height: 30vh;
  margin-top: 3vh;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -webkit-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  border-radius: 6px;
  justify-content: center;
  align-items: flex-end;
  transition: .3s;
}

.moreWorkCardContainera3:hover {
  transform: translateY(-10px);
  box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -webkit-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -moz-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  box-shadow: none;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(14, 26, 105)),
  url('../images/a3planningview.png');
}

.moreWorkCardContainerNasa {
  display: flex;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0)),
  url('../images/nasa_home.png');
  width: 15vw;
  height: 30vh;
  margin-top: 3vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 20%;
  box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -webkit-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  border-radius: 6px;
  justify-content: center;
  align-items: flex-end;
  transition: .3s;
}

.moreWorkCardContainerNasa:hover {
  transform: translateY(-10px);
  box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -webkit-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -moz-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  box-shadow: none;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(182, 0, 0)),
  url('../images/nasa_home.png');
}

.moreWorkCardContainerEncore h3 {
  color: white;
  padding-bottom: 10%;
}

.moreWorkCardContainerNasa h3 {
  color: white;
  padding-bottom: 10%;
}

.moreWorkCardContainera3 h3 {
  color: white;
  padding-bottom: 10%;
}

.moreWorkCardContainerGoVote {
  display: flex;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0)),
  url('../images/govote_home.png');
  width: 15vw;
  height: 30vh;
  margin-top: 3vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 15%;
  box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -webkit-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px -1px 38px 0px rgba(0,0,0,0.25);
  border-radius: 6px;
  justify-content: center;
  align-items: flex-end;
  transition: .3s;
}

.moreWorkCardContainerGoVote:hover {
  transform: translateY(-10px);
  box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -webkit-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  -moz-box-shadow: inset 2px -1px 38px 0px rgba(255, 255, 255, 0.746);
  box-shadow: none;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 76, 255)),
  url('../images/govote_home.png');
}

.moreWorkCardContainerGoVote h3 {
  color: white;
  padding-bottom: 10%;
}

.landingContainer {
  display: flex;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15vh;
  justify-content: space-between;
}

.heroContainer {
    width: 50%;
}

.heroNav {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.heroNavItem {
  width: 350px;
  padding-block: 1.5em;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #DBDBDB;
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.05), inset 0px 0px 12px rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  padding-left: 1.5em;
}

.heroNavItem:hover {
  transition: .5s;
  border: 1px solid rgb(233, 45, 45);
  transform: translateX(5px);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10), inset 0px 0px 15px rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.729);
}

.heroNavItem:hover i {
  transition: .5s;
  color: rgb(233, 45, 45);
  transform: translateX(10px);
}


.heroNavItem h3 {
  font-size: 2em;
  line-height: 1;
  background: linear-gradient(76deg, rgb(233, 45, 45) 0%, rgb(176, 22, 22) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none;
}

.heroNavItem p {
  font-size: 1em;
  line-height: 2;
  color: #757575;
}

.heroNavItemTitle {
  display: flex;
  align-items: center;
  column-gap: 20px;

}

.heroNavItemTitle i {
  color: #757575;
  font-size: 1.5em;
}

.heroNavItemTitle {}

#orangeDark {
  color: #FF3D00;
}

#orangeLight {
  color: #FF9900;
}

.screens {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: auto;
  row-gap: 5vh;
  justify-content: center;
  padding-bottom: 10vh;
}

.screensGV {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: auto;
  justify-content: space-between;
}

.screensGV img {
  border: 1px solid #2B3668;
}

.screens img {
  width: auto;
  max-height: 400px;
  padding-right: 5px;
  border-radius: 5px;
}

.fullSizeImg {
  width: unset;
  max-height: unset;
  padding-right: unset;
  border-radius: unset;
}

.workContainer {
    display: flex;
    flex-direction: column;
    row-gap: 15vh;
    margin: auto;
    max-width: 1100px;
    padding-bottom: 10vh;
}

.workItemsContainer {
  display: flex; /*MOBILE VALUE */
  width: 100%;
}

.workItem {

}

.workItem img {
  height: auto;
  max-width: 525px;
}

.selectedWorks {
  margin-top:10vh;
}

.scrollIcon {
    max-width: 10%;
    max-height: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    -webkit-animation: shake-vertical 3s linear 1s infinite both;
    animation: shake-vertical 3s linear infinite 1s both;
}

.scrollIcon img {
  max-height: 2em;
  max-width: 2em;
}


.redBar {
    margin-top: 1vh;
    margin-bottom: 1.5vh;
    width: 8vw;
    height: 1vh;
    background-color:#DD0000;
}

.aboutItems {
    display: flex;
    flex-direction: row;
    width: 100%;
}

h1 {
    font-family: DisplayBold;
    color: #DD0000;
    margin: 0;
    font-size: calc(1em + 5vw);
    line-height: 1;
}

h2 {
  font-size: calc(1em + 2vw);
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #2b2b2b;
}

h6 {
  font-size: calc(1em + 1vw);
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #2b2b2b;
}

h3 {
  font-size: calc(1em + 1.5vw);
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #2b2b2b;
}

h4 {
  font-size: calc(1em + .5vw);
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 500;
}

h5 {
  font-size: calc(1em + .2vw);
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 500;
}

p {
  font-size: calc(1em + .5vw);
  margin: 0;
  padding: 0;
  line-height: 1.1;
  color: #3f3f3f;
  font-weight: 400;
}

#subtitle {
  font-size: 2em;  
  margin-top: 4%;
    color: #454545;
    font-weight: 500;
    line-height: 1.3em;
}

#subtitleWork {
    font-size: 5vw;
    color: #DD0000;
    line-height: .8;
    font-weight: 700;
    margin-left: 10%;
}

.hero {
  max-width: 100%;
  height: auto;
	-webkit-animation: slide-in-bck-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	animation: slide-in-bck-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

.footerContainer {
  background-color: #ffffffd1;  
  bottom: 0px;
    width: 100%;
    text-align: center;
    position: absolute;
    padding-block: 2vh;
    border-top: 1px solid #75757532;
}

.footerContainerScroll {
  background-color: #ffffffd1;  
    width: 100%;
    text-align: center;
    padding-block: 2vh;
    border-top: 1px solid #75757532;
    margin-top: 3vh;
}

#workItemCopy {
    text-align: left;
    padding-left: 5vw;
    padding-bottom: 0;
}

#workItemCopy h1 {
  color: black;
}

#footer{
    padding: 0;
    margin: 0;
    text-align: center;
    color: #5a5a5a;
    font-weight: 200;
    font-size: 1em;
}

#red {
    color: #DD0000;
    font-weight: bolder;
}

a {
    text-decoration: none;
}

.button {
  background: none;
  border: .2em solid #DD0000;
  color: #DD0000;
  padding: 15px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: calc(1em + .5vw);
  margin-top: 0;
  font-weight: 700;
  cursor: pointer;
  border-radius: .2em;
}

#inactive {
  margin-top: 1em;
  background-color:#e1e1e1;
  border: .1em solid #757575;
  color: #4e4e4e;
}

#inactive:hover {
  color: none;
  transition: none;
}

.button:hover {
    background: #DD0000;
    color: white;
    transition: .3s;
}

.button:active {
    transform: scale(.8);
    transition: none;
}

.blackButton {
  background: none;
  border: .2em solid black;
  color: black;
  padding: 15px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: calc(1em + .5vw);
  margin-top: 0;
  font-weight: 700;
  width: 25vw;
}

.blackButton:hover {
  background: black;
  color: white;
  transition: .3s;
}



.workDesc {
  text-align: justify;
  margin-bottom: 3vh;
}

.csCurrentPage {
  color: white;
  font-weight: 600;
}

#currentPage {
    color:#DD0000;
}

.contactPage {
    display: flex; 
    max-width: 1100px;
    margin: auto;
    flex-direction: column;
    justify-content: space-between;
    height: 40vh;
}

#subHero {
    width: 20vw;
    height: auto;
    padding-top: 2%;
}

#subHeroAbout {
  width: 25vw;
  height: auto;
  padding-bottom: 5%;
}

.Contact-Copy { 
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
}

#contactButtonRight {
    margin-top: 5vh;
    width: 15em;
}

#contactButtonLeft {
  margin-top: 5vh;
  width: 15em;
}

.spacer {
     display: inline-block;
     width: 5vw;
}

#spacer {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.workPageContainer {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  row-gap: 2em;
}

.workPageItemContainer {
  display: flex;
  flex-direction: column;
  row-gap: 4vh;
}

.workPageItemContainer > h3 {
  color:#3f3f3f;
  font-weight: 700;
  font-size: 2em;
}

.workPageContainer > h4 {
  color:#6c6c6c;
  font-weight: 600;
  font-size: 1.5em;
}

.workPageItemList {
  display: flex;
  column-gap: 1vw;
}

.workPageItemListOther {
  display: flex;
  column-gap: 1vw;
  flex-wrap:wrap;
  row-gap: 2vh;
  margin-bottom:5vh;
}


@-webkit-keyframes slide-in-bck-bottom {
    0% {
      -webkit-transform: translateZ(700px) translateY(300px);
              transform: translateZ(700px) translateY(300px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0) translateY(0);
              transform: translateZ(0) translateY(0);
      opacity: 1;
    }
}

@keyframes slide-in-bck-bottom {
    0% {
      -webkit-transform: translateZ(700px) translateY(300px);
              transform: translateZ(700px) translateY(300px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0) translateY(0);
              transform: translateZ(0) translateY(0);
      opacity: 1;
    }
}

@-webkit-keyframes shake-vertical {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}
@keyframes shake-vertical {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}


.topnav {
  display: none;
}

.aboutContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.2fr 1fr;
    gap: 0px 0px;
    margin: auto;
    max-width: 1100px;
    margin-top: 6vh;
  }
  
  .aboutIntroContainer { grid-area: 1 / 1 / 2 / 3; }
  
  .aboutSkills { 
    grid-area: 1 / 2 / 2 / 3;
    justify-content: center;
    align-items: center;
    margin-bottom: 10vh;
    margin-top: 10vh;
  }

  .aboutSkills H3 {
    color:#a4a4a4;
    font-weight: 400;
    font-size: 1.5em;
  }
  
  .aboutCopy { 
    grid-area: 1 / 1 / 2 / 2;
    padding: 0% 10% 5% 0%;
  }

  .aboutCopy h1 {
    text-align: left;
  }

  .aboutCopy p {
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.2;
  }

  .Competancies { 
    grid-area: 2 / 1 / 3 / 3;
    margin-bottom: 5%;
    min-height: 400px;
  }
  
  .skillsContainer {
    display: flex;
    width: auto;
    justify-content: flex-start;
    row-gap: 2vw;
    column-gap: 2.5vh;
    flex-wrap: wrap;
    margin-top: 3vh;
    margin-bottom: 3vh;
  }
  
  .skillsItem {
    display: flex;
    height: 5vh;
  }
  .aboutSkillsItemCopy {
    display: flex;
    flex-direction: column;
    margin-left: .5vw;
    row-gap: .5vh;
    justify-content: center;
  }

  .aboutSkillsItemCopy h5 {
    color:#5a5a5a;
  }
  
  #skillHeader{
    font-weight: bold;
  }
  
  #heroText {
    color: white;
    font-size: 4em;
  }
  
  .CompetanciesSlider {
    margin-top: 3vh;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 3vh;
  }
  
  .competanciesSliderItems {
    display: flex;
    flex-direction: column;
    padding-bottom: 1vh;
    transition: 0.3s;
  }

  .definitionTab {

  }

  .ideationTab {

  }

  .prototypingTab {

  }

  .frontEndTab {

  }
  
  .selected {
    font-weight: bold;
    display: flex;
    border-bottom: 6px solid #DD0000;
  }
  
  .unselected {
    color: #aaaaaa;
    cursor: pointer;
  }
  
  .competanciesList {
    display: flex;
    height: auto;
    gap: 1vh;
    flex-wrap: wrap;
  }

  .competanciesList h4 {
    color: white;
  }

  .definition {

  }

  .ideation {
    display: none;
  }

  .prototyping {
    display: none;
  }

  .frontEnd {
    display: none;
  }

  .competancyBlock {
    padding: 3px 10px 5px 10px;
    background-color: rgb(225, 7, 7);
    border-radius: .3em;
    color: white;
  }

  .aboutHeroText {
    width: 100%;
    text-align: center;
    background: linear-gradient(76deg, rgba(255,45,45,1) 0%, rgba(91,0,0,1) 100%);
    padding-top: 3vh;
    padding-bottom: 4vh;
    margin-bottom: 10vh;
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;
    max-width: 1100px;
  }
  
  .timelineContainer {
    display: flex;
    flex-direction: column;
    width: auto;  
    padding-bottom: 5%;
    gap: 5vh;
    margin: auto;
    max-width: 1100px;
  }
  
  .timelineItem {
    display: flex;
  }
  
  .timelineCopy {
    display: flex;
    flex-direction: column;
    margin-left: 3vw;
    row-gap: 1vh;
  }

  .timelineBullet {
    max-width: 80px;
    max-height: 30px;
    height: auto;
    width: 100%;
    margin-top: 2vh;
  }

#contactFly {
  -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  color: #757575;
}

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px);
            transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px);
            transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@-webkit-keyframes scale-in-hor-right {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-right {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}
@media only screen and (max-width: 1200px) {
  .timelineContainer {
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .heroImage Img {
    top: -10vh;
  }

  .aboutContainer {
    margin-left: 10%;
    margin-right: 10%;
  }

  .heroContainer {
    margin-left: 10%;
    margin-right: 10%;
  }

  .workContainer {
    margin-left: 10%;
    margin-right: 10%;
  }

  .workItem img {
    max-width: 400px;
  }

  .introContainer {
    margin-left: 10%;
    margin-right: 10%;
  }


  .additional {
    margin-left: 10%;
    margin-right: 10%;
  }

  .csHeroItem {
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 4vh;
  }

  .caseStudyGrid {
    margin-left: 10%;
    margin-right: 10%;
  }

  .fdContainer {

  }

  .fdContainera3 {
    margin-left: 10%;
    margin-right: 10%;
  }
  

  .csFooter {
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .csGVcontainer {
    margin-left: 10%;
    margin-right: 10%;
  }

  .screensGV {
    margin-left: 10%;
    margin-right: 10%;
  }

  .contactPage {
    margin-left: 10%;
    margin-right: 10%;
  }
  nav {
    max-width: unset;
    padding-left: 10%;
    padding-right: 10%;
  }

  .workPageContainer {
    margin-left: 5%;
    max-width: unset;
  }

  .workPageItemContainer {
    max-width: unset;
    width: 100%;
  }

  .workPageItemList {
    flex-wrap:wrap;
    row-gap: 2vh;
  }

  .workPageListOther {
    width: 100%;
    margin-left: 10%;
    margin-right: 10%;
  }

}
@media only screen and (max-width: 800px) {
  nav {
    display: none;
  }

  .navLink {
    width: auto;
  }
  .logo {
    display: none;
  }
  
  .mobileLogo {
    width: 30px;
    height: 30px;
    margin-left: 5%;
  }

  .workItemsContainer {
    display: unset; 
  }
  /* Style the navigation menu */
.topnav {
  z-index: 5;
  display: unset;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  border-bottom: 3px solid #DD0000;
  background-color: rgb(255, 255, 255);
  box-shadow: -1px -9px 24px 18px rgba(0,0,0,0.29);
}

/* Hide the links inside the navigation menu (except for logo/home) */
#myLinks {
  display: none;
  background: #ffffff;
}

/* Style navigation menu links */
#mobileLN {
  padding: 8px;
}

.topnav a {
  color: #DD0000;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #dd0000;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  color: white;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: white;
  color: #DD0000;
}

.mobileNavLinkText {
  text-align: center;
  border-bottom: 1px solid rgba(142, 142, 142, 0.293);
}

.workContainer {
  margin-left: 0;
  margin-right: 5%;
  margin-top: 0;
  margin-bottom: 10%;
}
.workItem img {
  width: auto;
  height: auto;
  justify-content: center;
  max-width: 300px;
}

.redBar {
  margin: 5% auto 5% auto;
  width: 50%;
}

.workItem {
  text-align: center;
}

.fdContainer {
  margin-left: 5%;
  column-gap: 2vw;
}

.fdContainera3 {
  flex-direction: column;
}

#workItemCopy {
  text-align: center;
  margin-bottom: 10%;
  font-weight: 600;
}

#workItemCopy button {
  width: 100%;
}

.workDesc {
  text-align: justify;
  margin-bottom: 5%;
}

.heroContainer {
  padding-top: 10%;
  width: unset;
  margin-left: unset;
  margin-right: unset;
}

#subHero {
  min-width: 80%;
}

#subHeroAbout {
  width: 40%;
  padding-top: 20%;
}

.aboutContainer {
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20%;
}

.CompetanciesSlider {
  width: unset;
}
.competanciesSliderItems {
  font-size: .8em;
  margin-right: 5px;
}

.competanciesList {
  margin-right: 5%;
}

.timelineContainer {
  margin-left: 5%;
  margin-right: 5%;
  padding-bottom: unset;
}

.aboutSkills {
  margin-bottom: 5vh;
  margin-top: 2vh;
}

.contactPage {
  margin-top: 20%;
  text-align: center;
}

.Contact-Copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footerContainer {
  margin-top: 5%;
  margin-bottom: 0%;
  background-color: #f7f7f7d1;
}

#footer {
  font-size: 1em;
}

#subtitle {
  font-size: 1.2em;
}

.skillsItem {
  margin-left: 10px;
  margin-bottom: 30px;
}

.skillsItem img {
  display: flex;
  height: 100%;
  width: auto;
}

.skillsContainer {
  row-gap: 10px;
  column-gap: 10px;
}

.competancyBlock {
  margin-right: 5px;
  margin-bottom: 5px;
}

.aboutSkillsItemCopy {
  margin-left: 10px;
}

/* cs CASE STUDY MQ BELOW */

.maxHeight {
  max-height: 175px;
}

.fdImages {
  flex-direction: column;
  align-items: center;
}

.fdImages img {
  height: min-content;
  width: 50%;
  margin-bottom: 5vh;
}

#csGrid5a3 {
  grid-template-rows: unset;
  grid-template-areas: 
    "csHeader"
    "csItemA1"
    "csItemB1"
    "csItemB2"
}

#csGrid5a3Prototyping {
  grid-template-rows: unset;
  grid-template-areas:
  "csHeader"
  "csItemA2"
  "csItemB1"
  "csItemB2"
  "csItemC1"
  "csItemC2"
  "csItemD1"
  "csItemD2"
  "csItemA1"
}

.additional {
  margin-left: 5%;
  margin-right: 5%;
}

.caseStudyGrid > h6 {
  line-height: 2em;
}

.csItemA1 {

}

.csItemA2 {

}

.csItemB1 {

}

.csItemB2 {

}

.csItemC1 {

}

.csItemC2 {

}

.csItemD1 {

}

.csItemD2  {

}

.csItemE1  {

}

.csItemE2 {

}

.caseStudyGrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
  margin-right: 5%;
  margin-left: 5%;
  row-gap: 3vh;
  grid-auto-flow: column;
  grid-template-areas:
    "csHeader"
    "csItemA1"
    "csItemA2"
    "csItemB2"
    "csItemB1"
    "csItemC1"
    "csItemC2"
    "csItemD2"
    "csItemD1";
}

#csGrid3 {
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-areas:
    "csHeader"
    "csItemA1" 
    "csItemA2"
    "csItemB2"
    "csItemB1"
    "csItemC1"
    "csItemC2";
}

#csGrid5 {
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas:
  "csHeader"
  "csItemA2"
  "csItemA1"
  "csItemB1"
  "csItemC2"
  "csItemC1"
  "csItemD2"
  "csItemD1"
  "csItemE1"
  "csItemE2";
}

#csGrid3Research {
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas:
  "csHeader csHeader csHeader"
  "csItemA2"
  "csItemA1"
  "csItemB1"
  "csItemB2"
  "csItemC2"
  "csItemC1"
  "csItemD1"
  "csItemD2";
}

#csGrid3ResearchGV {
  grid-template-rows: auto 1fr 1fr auto auto 1fr auto auto;
  grid-template-areas:
  "csHeader"
  "csItemA2"
  "csItemA1"
  "csItemB1"
  "csItemB2"
  "csItemC2"
  "csItemC1"
  "csItemD1"
  "csItemD2";
}

#csGrid5gvIdeation {
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
  "csHeader"
  "csItemA2"
  "csItemA1"
  "csItemB1"
  "csItemB2"
  "csHeaderDup";
}

.csGVcontainer {
  flex-direction: column;
  row-gap: 3em;
  margin-left: 2.5%;
  margin-right: 2.5%;
}

.csHeaderDup h1 {
  font-size: 2em;
}


.csGVcontainer img {
  width: 40%;
}

.csGVitem {
  max-width: unset;
  width: 100%;
  margin: auto;
}

.csGVitem h3 {
  font-size: calc(1em + 6vw);
}

.csHeader {
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 5%;
  margin-top: 5%;
}

.csHeaderDup {
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 5%;
  margin-top: 5%;
}

.csHeaderDup h1 {
  color: white;
}

#csGrid5GVPrototyping {
  grid-template-rows: auto auto auto auto auto auto 1fr;
  grid-template-areas:
  "csHeader"
  "csItemA1"
  "csItemA2"
  "csItemB1"
  "csItemB2"
  "csItemC2"
  "csItemC1";
}

#csGrid5GVBias {
  grid-template-rows: auto auto auto auto auto auto 1fr;
  grid-template-areas:
  "csHeader"
  "csItemA2"
  "csItemA1"
  "csItemB2"
  "csItemB1"
  "csItemC1"
  "csItemC2"
}

#csGrid5GVBias li {
  font-size: 1.1em;
}

#fdImagesGV {
  margin-right: unset;
}

.csFooterMoreWorkBucket{
  display: flex;
  flex-direction: column;
  column-gap: 3%;
}

.csFooter {
  flex-direction: column;
  margin-right: 5%;
  margin-top: 2vh;
  row-gap: 2vh;
  margin-left: 5%;
}

.blackButton {
  width: 100%;
}

.moreWorkCardContainerEncore {
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 60, 0)),
  url('../images/encore_city.png');
  width: 100%;
  height: 200px;
  background-position: 0% 5%;
  justify-content: center;
  align-items: flex-end;
  box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -webkit-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
}


.moreWorkCardContainera3 {
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(14, 26, 105)),
  url('../images/a3planningview.png');
  width: 100%;
  height: 200px;
  background-position: 0% 5%;
  justify-content: center;
  align-items: flex-end;
  box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -webkit-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
}


.moreWorkCardContainerGoVote {
  width: 100%;
  height: 200px;
  justify-content: center;
  align-items: flex-end;
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 76, 255)),
  url('../images/govote_home.png');
  background-position: 0% 20%;
  box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -webkit-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
}

.finalDesign {
  padding-bottom: 3vh;
}

.scrolled {
  display: none;
}

#mwH3 {
  font-size: 2em;
  text-shadow: 2px 2px 2px #000000;
}

[class*="csItem"] {

}

[class*="csItem"] img {
  margin-left: 5%;
}

.csCardContainer {
  text-align: center;
  padding: 1px 1px;
}

.csCard img {
  height: auto;
  width: auto;
  max-height: 300px;
}

.csCard {
  width: auto;
  background-color: none;
  box-shadow: none;
}

.introContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto .6fr;
  padding-top: 3%;
  padding-bottom: 3%;
  gap: 10px 0px;
  margin-left: 5%;
  margin-right: 5%;
  grid-auto-flow: row;
  grid-template-areas:
    "heroImage"  
    "projectOverview"
    "roleScope";
}

.heroImage { 
  grid-area: heroImage; 
  text-align: right;
  max-height: 275px;
  margin-bottom: 3%;
}

.heroImage img {
  max-width: 100%;
  height: auto;
  max-height: 500px;
  position: relative;
  top: 0%;
}

.csHeroContainer {
  padding-top: 20%;
  position: unset;
}

.csHeroItem {
  padding-bottom: 7%;
}

.h1Time {
  font-size: 5em;
  margin-left: auto;
  display: block;
  padding-bottom: 5%;
}

.csFooterItem {
  gap: 5px;
  margin-bottom: 5px;
}

.csFooterItem H2 {
  margin-bottom: 5px;
}

.Competancies {
  height: 50vh;
}

/*Encore CS Values*/
#encoreHeroImg {
  text-align: center;
  margin-bottom: -5%;
}

#csGrid5Encore {
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas:
  "csHeader csHeader csHeader"
  ". csItemA1 ."
  ". csItemA2 ."
  ". csItemB2 ."
  ". csItemB1 ."
  ". csItemC1 ."
  ". csItemC2 ."
  ". csItemD2 ."
  ". csItemD1 ."
  ". csItemE1 ."
  ". csItemE2 .";
}

#csGrid5EncoreIdeation {
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
  grid-template-areas:
  "csHeader csHeader csHeader"
  ". csItemA1 ."
  ". csItemA2 ."
  ". csItemB2 ."
  ". csItemB1 ."
  ". csItemC1 ."
  ". csItemC2 ."
  ". csItemD1 ."
  ". csItemD2 .";
}

#csGrid5EncorePrototyping {
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
  grid-template-areas:
  "csHeader csHeader csHeader"
  ". csItemA2 ."
  ". csItemA1 ."
  ". csItemB1 ."
  ". csItemB2 ."
  ". csItemC1 ."
  ". csItemC2 ."
  ". csItemD2 ."
  ". csItemD1 .";
}

.screensGV {
  margin-left: 2.5%;
  margin-right: 2.5%;
  width: unset;
  justify-content: space-evenly;
}

.aboutHeroText {
  margin-left: 5%;
  margin-right: 5%;
  width: unset;
  margin-bottom: 10%;
  padding-bottom: 3vh;
}

.maxHeight500 {
  max-height: 300px;
}

#csFlexEncore {
  flex-direction: column;
}

.finalDesignEncore {
  flex-direction: column;
}

.fdCopyContainerEncore {
  padding-top: 5%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.fdImagesEncore img {
  max-height: 320px;
  align-self: center;
}

.fdHeaderEncore {
  font-size: calc(3em);
}

.screens {
  display: flex;
  justify-content: space-evenly;
  row-gap: 5px;
}

.screens img {
  max-height: 250px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); 
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); 
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding-right: 0; 
  margin-bottom: 10px;
}

.moreWorkCardContainerNasa {
  background-image:
  linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(182, 0, 0)),
  url('../images/nasa_home.png');
  width: 100%;
  height: 200px;
  background-position: 0% 5%;
  justify-content: center;
  align-items: flex-end;
  box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -webkit-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 2px -1px 16px 0px rgba(0,0,0,0.15);
}

.heroImage { 
  grid-area: heroImage; 
  text-align: right;
  max-height: unset;
  justify-self: center;
}                           

.heroImage img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  position: relative;
  top: unset;
}

p {
  font-weight: 400;
}

ol {
  font-weight: 500;
}

ul {
  font-weight: 500;
}

.landingContainer {
  all: unset;
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;
}

.heroNavItem {
  width: calc(100% - 1.5em);
  padding-block: 1em;
}

.heroNavItem h3 {
  font-size: 1.5em;
}

.heroNav {
  row-gap: 2vh;
  margin-top: 2vh;
}

.workPageContainer {
  max-width: unset;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10%;
}

.workPageItemList {
  flex-direction: column;
  row-gap: 4vh;
}

.workPageItemListOther {
  flex-wrap: unset;
  flex-direction: column;
}

.otherWorkCard {
  width: 100%;
}

.workPageContainer h4 {
  text-align: center;
}

.song-card-created {
  width: 100%;
}

#heroText {
  font-size: 2em;
}

.h1TimeNav {
  padding-left: 4%;
}

.csHeroContainer h1 {
  font-size: 2em;
  line-height: 1.5;
}

.footerContainerScroll {
  padding-block: unset;
  padding-bottom: 3em;
  padding-top: 1em;
}

@media only screen and (max-height: 668px) {
  .footerContainer {
    position: relative;
  }
}

}