/*
main css page
*/


/* dont funk with this stuff */
*, *::after, *::before{
    box-sizing: border-box;
}



body {

  /*background-color: #e1ebee;*/

  background-color: #F2F9FD;

}


/*

consider: background colour #ebf2f4
#e4ecee
#e6edef

*/

body, html {
  /*height: 100%;*/
  margin: 0;

}


.maxwidth {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}



@font-face {
  font-family: volteMedium;
  src: url(../font/VolteMedium.woff);
  font-weight: normal;
}

@font-face {
  font-family: volteSemibold;
  src: url(../font/VolteSemibold.woff);
  font-weight: bold;
}

@font-face {
  font-family: volteBold;
  src: url(../font/VolteBold.woff);
  font-weight: bolder;
}







.ml11 {
  /*font-weight: 700;*/
  font-size: 4em;
  font-family: volteSemibold;
}

.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  /*padding-bottom: 0.15em;*/
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3.5px;
  background-color: #2FC5F4;
  transform-origin: 0 50%;
}

.ml11 .line1 {
  top: 0;
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
}



.newherocontainer{
  grid-column: 2 / span 8;

  display: grid;
  grid-template-rows: repeat(5, 5em);
  padding-top: 4rem;

}

.newherocontainer .content{
  grid-row: 2 / span 2;
}

.ml11 span{
  text-decoration: none;
}



.newherocontainer .content a {
  text-decoration: none;
  color: #2B2B2B;
  font-weight: bold;
}

.newherocontainer .content a:hover {
  color: #2FC5F4;
  font-weight: normal;
  /*
  text-decoration: underline;
  text-decoration-color: #59CEF3;
  text-decoration-thickness: 2px;*/
}



mark{
  background-color: #59cef354;
  /*background-color: #CCE6EF;*/
  border-radius: 3px;
}


#currently{
  padding: 0.5rem 0 0 0;
}

#atthemoment{
  padding: 0.5rem 0 0 0;
  color: #b2b2b2;
}

#topcurrent{
  padding: 2rem 0 0 0;
}


#currently a, #topcurrent a{
  /*color: #2FC5F4;*/
  text-decoration: underline;
  text-decoration-color: #59CEF3;
  text-decoration-thickness: 3px;
}


#currently img{
  width: 26px;
  height: auto;
}

#topcurrent img{
  width: 26px;
  height: auto;
}




/*font-weight: 400; //normal
font-weight: 500; //medium
font-weight: 700; //bold*/

/* typography housing etc */
p {
  /*color: #2B2B2B;*/
  color: #716C73;
  font-size: 1rem;
  line-height: 164.7%;
  font-family: volteMedium, "Roboto Mono", "Courier New", monospace;
}

#blurb{
  font-size: 1.08rem;
}


/* handles transitions for all links */
a {
  transition: 0.2s;
  text-decoration: none;
}


h1 {
  color: #202020;
  margin: 0;

  font-family: volte;
  font-size: 3rem;
}

h2 {
  font-family: volteSemibold;
  color: #202020;
  margin: 0;
}


h3{
  color: #202020;
  font-family: volteSemibold;
}

h4 {
  color: #202020;
  font-family: volteSemibold;
  margin: 0;
  font-size: 1.25rem;
}


::selection {
  background: white;
}

section{
    /*padding:2.5rem 18%;*/
}



/* ideation sketch full image */
.bg {
  background-image: url("../img/testsketchimage.jpg");
  height: 100%;

  /*opacity: 80%;*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.ideationtext {
  text-align: center;
  margin: 0;
  height: 28em;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* all nav menu code */
nav {
  margin: 2.5em 0 2.5em 0;
  text-align: right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
  font-family: volteSemibold;
  /*letter-spacing: 0.5px;*/

  color: #9da0a2;
  font-size: 1rem;
  margin-right: 1.5rem;
}

nav a:hover {
  color: #2FC5F4;
  text-decoration: none;
}

nav .nav__link.active  {
  color: #202020;
}

.active{
  border-bottom: 3px solid #202020;
}

nav .nav__link.active:hover  {
  color: #2FC5F4;
  border-bottom: 3px solid #2FC5F4;
}


nav #name {
  color: #2FC5F4;
}
nav #name:hover {
  /*color: #FFFFFF;*/
  color: #2FC5F4;
}
/* end of nav menu */




.inlinehighlight{
  color: #06BCF5;
}

.inlinehighlight:hover{
  color: #06BCF5;
  text-decoration: underline;
  text-decoration-color: #06BCF5;
  text-decoration-thickness: 2px;
}



/* main hero section where my name is highlighted */
#heroname {
  /*text-decoration: underline;*/
  text-decoration-color: #59CEF3;
  color: #59CEF3;
}

/* homepage hero text stuff */
.intro h1 {
  font-family: volte;
  font-size: 4rem;
  /*letter-spacing: -3px;*/
}

.intro a {
  text-decoration: none;
  color: #2B2B2B;
  font-weight: bold;
}

/*#ebf5ff*/
/*#57daff*/

.intro a:hover {
  color: #2FC5F4;
  /*
  text-decoration: underline;
  text-decoration-color: #59CEF3;
  text-decoration-thickness: 2px;*/
}








/* project thumbnail title headings*/
.projectlist h2 {
  font-size: 2rem;
}


.projectlist {
  padding-top: 3rem;
}



/* all project thumbnail images */
#trailmixthumbnail {
  /*width:450px;*/
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}


#trailmixthumbnail:hover {
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}

#cloverdalethumbnail {
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}

#cloverdalethumbnail:hover {
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}

#twitchthumbnail {
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}

#twitchthumbnail:hover {
  /*opacity: 100%;*/
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}

#fairviewimage {
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}

#fairviewimage:hover {
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}

#cliqthumbnail {
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}

#cliqthumbnail:hover {
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}



#sapthumbnail {
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}

#sapthumbnail:hover {
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}




#wwethumbnail {
  /*width:450px;*/
  width:100%;
  height:auto;
  transition: 0.6s;
  box-shadow: 5px 5px 10px #cccccc;
  border-radius: 10px;
}


#wwethumbnail:hover {
  cursor: pointer;
  box-shadow: 5px 5px 30px #999999;
}



#aboutmethumbnail {
  width:100%;
  height:auto;
}


#wwegmthumbnail {
  width:100%;
  height:auto;

  grid-column: 5 / span 6;
}


/* project section containers */
.project1trailmix {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.project2fairview {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.project3twitch {
  padding-top: 3rem;
  padding-bottom: 3rem;
}


.project5cliq {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.projectcloverdale {
  padding-top: 3rem;
  padding-bottom: 3rem;
}



.project7sap {
  padding-bottom: 3rem;
}

.project8wwe {
  padding-bottom: 3rem;
}



/* contact me section styling */
.uparrow {
  grid-column: 10 / span 1;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  padding-top: 3rem;
  padding-bottom: 3rem;
}

.uparrow a:hover{
  opacity: 60%;
}

.uparrow img {
  width: 40px;
  height: auto;
}

.contactme .row {
  justify-content: space-between;
}

.socials {
  padding-top: 0.5em;
  display: flex;
  flex-direction: row;

}

.socials a{
  padding-right: 1em;
  color: #2FC5F4;
}

.socials p a:hover {
  color: #2B2B2B;
  text-decoration: none;
}

.contactme .content{
  padding: 1em 0 0 0;
}

.footercontactme #email {
  color: #2B2B2B;
  font-weight: bold;
}

.footercontactme #email:hover {
  text-decoration: none;
}

/* image of me that appears on hover */
.meTest {
  width: 300px;
  height: auto;
  display: none;
  border-radius: 10px;
}

span {
  text-decoration: underline;
  text-decoration-color: #2FC5F4;
}

span.two{
  /*background-color: aqua;*/
  display: inline-block;

}

/*span.two:hover{
  cursor: default;

}*/

span.two:hover img{
  display: flex;
}

.cheers {
  display: flex;
  flex-direction: column;
}

.cheers p{
  padding-top: 0.25rem;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

#section3 a:hover {
  opacity: 60%;
}








/* top hero detail styling of project detail page */
.projectnum {
  font-size: 1.25em;
  /*padding-bottom: 0.5em;*/
  color: #2FC5F4;
}

.white-subheading {
  font-size: 1.5rem;
}


.team p {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.teamtools p{
  margin-bottom: 0;
}

.teamtools {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5em;

  padding: 2em 1.5em 2em 1.5em;
  margin: 2em 0 1em 0;

  /*border: 2px solid red;*/
  background-color: #E6F5FC;
  border-radius: 20px;
}


.teamcontainer{
  grid-column: 1 / span 4;
}
.toolscontainer{
  grid-column: 5 / span 4;
}
.myrolecontainer{
  grid-column: 9 / span 4;
}


.teamtools h2 {
  font-size: 1.25em;
}

.team {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}








#whytrailapp img {
  width: 60%;
  height: auto;
  align-self: center;
}

#whytrailapp .column {
  justify-content: center;
}


#trailmixideation img{
  width: 100%;
  height: auto;
}

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

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

.trailmixsketches #sketch2 {
  padding-top: 1.5rem;
}

.trailmixsketches #righttext {
  padding-right: 2rem;
}

.trailmixsketches #sketch1{
  padding-top: 1em;
}



/*.trailmixfinaldesign {
  padding-bottom: 0rem;
}*/
#trailMixMultiplePhones{
  width: 100%;
  height: auto;
}




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

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

.gifs .phones .column p{
  padding-left: 1em;
  padding-right: 1em;
}

/*.gifs .phones{
  display: grid;
  grid-template-columns: repeat(12, 1fr);

}*/


.gifs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5em;
}

.gifs .text{
  grid-column: 3 / span 8;
}

.gifs .phones{
  grid-column: 3 / span 8;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5em;
}

.gifs .phones .gif1{
  grid-column: 1 / span 4;
}

.gifs .phones .gif2{
  grid-column: 5 / span 4;
}
.gifs .phones .gif3{
  grid-column: 9 / span 4;
}



.gifs #trailmixtesting {
  text-align: left;
}

.gifs #trailmixtesting .column p{
  padding-left: 0;
  padding-right: 0;
}

.gifs #trailmixtesting ul{
  margin-left: 0.75em;
  padding-left: 0.75em;
}

.gifs #trailmixtesting li{
  color: #59CEF3;
}









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

.trailmixwireframes .column {
  margin-left: 0.5rem;
  margin-right: 0.5rem;

}



.cloverdalegraphiccontainer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1.5em;
  grid-row-gap: 0.5em;
  padding: 1.5rem 0 0 0;

}

.contractorcustomericon p{
  font-style: italic;
  padding: 0 1rem 0 1rem;
}

.contractorcustomericon{
  align-items: center;
  grid-column: 4 / span 7;
}


#cloverdalediscovery img{
  width: 60%;
  height: auto;
}


#cloverdalepersonas {
  padding: 2rem 0 2rem 0;
}



.cloverdaleuserresearchworkshop{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5em;
}

.cloverdaleuserresearchworkshop .text{
  grid-column: 1 / span 12;
}

.cloverdaleuserresearchworkshop .column.one{
  grid-column: 1 / span 4;
}

.cloverdaleuserresearchworkshop .column.two{
  grid-column: 5 / span 4;
}

.cloverdaleuserresearchworkshop .column.three{
  grid-column: 9 / span 4;
}

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

#cloverdaledesignfocus {
  padding: 2rem 0 2rem 0;
}

#prototype{
  text-align: center;
}











/* user research bulletted two column list sections */
.userresearch{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5em;
}

.userresearch .text{
  grid-column: 1 / span 12;
}

.userresearch .column.one{
  grid-column: 1 / span 6;
}

.userresearch .column.two{
  grid-column: 7 / span 6;
}

.userresearch ul {
  margin-top: 0;
  padding-top: 0;
  margin-left: 0.25em;
  padding-left: 0.25em;
}

.userresearch h3, .cloverdaleuserresearchworkshop h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  /*color: white;*/
  color: #2FC5F4;

  font-size: 1.2rem;
}

.userresearch li{
  color: #59CEF3;
}






#trailmixtesting img{
  width: 100%;
  height: auto;
}


#trailmixtesting p{
  font-size: 12px;
}



#cliqpersonas {
  padding: 2rem 0 2rem 0;
}

.cliqsketches{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1em;
}

.cliqsketch1container{
  grid-column: 1 / span 6;
}

.cliqsketch2container{
  grid-column: 7 / span 6;
}

.cliqsitemapcontainer{
  grid-column: 1 / span 12;
}

.description{
  text-align: center;
  font-style: italic;
  color: #939393;
  margin: 0.5rem 0 0.5rem 0;
}

.description.small{
  font-size: 12px;
}


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

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




















#morainetest {
  width: 100%;
  height: auto;
}

/* background colour content boxes */
.darkgrey-box {
  background-color: #444444;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.light-grey-box {
  background-color: #F2F2F2;
}

.white-box {
  background-color: #FFFFFF;
  width: 100%;
}



/* twitch persona section */
.drivingqs {
  padding-top: 0.25rem;
  padding-bottom: 2.5rem;
}

#persona img {
  width: 75%;
  height: auto;

}

#persona strong {
  color: #2FC5F4;
}

#persona .row {
  justify-content: center;
  align-content: center;
  align-items: center;
  /*padding-right: 5rem;
  padding-left: 5rem;*/
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#userflowscenario img {
  display: flex;
  flex-direction: row;
  justify-content:flex-end;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 0;
}

#twitchscenariouserflowimage {
  width: 100%;
  height: auto;
  /*vertical-align: bottom;*/
}


#brbscreenshot {
  width: 100%;
  height: auto;
}

#twitch1image img {
  width: 100%;
  height: auto;
  padding-bottom: 0;
  margin-bottom: 0;
  vertical-align: bottom;

  /*padding-left: 2.5rem;
  padding-right: 2.5rem;*/
}

#twitch1image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

#twitchwireframes {
  width: 100%;
  height: auto;
}


#sapbreakdownimg img{
  width: 100%;
  height: auto;
  padding-bottom: 0;
  margin-bottom: 0;
  vertical-align: bottom;
  border-radius: 10px;
}

.streamersviewers h2 {
  color: #2FC5F4;
}

.streamersviewers .row {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 5rem;
  padding-right: 5rem;
  /*background-color: pink;*/
}
.streamersviewers .column {
  padding-right: 1rem;

}





/* project detail */
.screens img {
  width: 100%;
  height: auto;
}

.projectpage .screens {
  padding-top: 0;
  padding-bottom: 0;
}

/* for playing around with different font weights on project pages*/
.projectpage p b{
  font-weight: bold;
}


/* for inline text links */
/*.projectpage p a{
    color: #2FC5F4;
}

.projectpage p a:hover{
    opacity: 60%;
}*/



/* handles styling of the link to specific irl projects */
.link {
  text-align: center;
}

.link a {
  /*color: #59CEF3;*/
  color: #2FC5F4;
}

.link a:hover{
  color: #2B2B2B;
}

.link p{
  margin: 0;
}



/* bottom of the project pages small navigation section */
.bottomnav {
  margin-top: 0;
  padding: 0;
  margin-bottom: 4rem;
  /*padding-bottom: 1rem;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bottomnav a {
  text-decoration: none;
  /*transition: 0s;*/
}

.bottomnav h2 {
  font-size: 1.5rem;
  font-family: volteSemibold;
  color: #2B2B2B;
}

.bottomnav a:hover {
  transition: 0s;
  text-decoration: underline;
  text-decoration-color: #59CEF3;
  text-decoration-thickness: 3px;

}


/* design process blue blurb and steps section */
.designprocess{
  grid-column: 2 / span 10;
  padding: 2em 1em 2em 1em;
  margin: 1em 0 1em 0;

  /*border: 2px solid red; debugging */
  background-color: #E6F5FC;
  border-radius: 20px;
}

.designprocess .designprocesstextcontainer{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 1.5em;
}

.designprocess .designprocesstextcontainer .text {
  grid-column: 2 / span 8;
}

.steps{
  /*display: flex;
  flex-direction: row;
  justify-content: space-between;*/
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 1.5em;
}


.steps .one, .steps .two, .steps .three, .steps .four, .steps .five{
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
  padding: 1.5rem 0 1.5rem 0;
}


.steps .one{
  grid-column: 1 / span 2;
}
.steps .two{
  grid-column: 3 / span 2;
}
.steps .three{
  grid-column: 5 / span 2;
}
.steps .four{
  grid-column: 7 / span 2;
}
.steps .five{
  grid-column: 9 / span 2;
}

/* interactive steps on design process bubble */
.steps h3 a{
  font-family: "Roboto Mono";

  display: flex;
  flex-direction: row;
  justify-content: center;

  font-weight: bolder;
  font-size: 4rem;
  -webkit-text-stroke: 2px #2B2B2B;
  letter-spacing: -1px;
  color: transparent;

}

.steps a:hover{
  -webkit-text-stroke: 1px #2FC5F4;
  color: #2FC5F4;
}

.steps h3, .steps p{
  margin: 0;
}





/* for when blue blob has content in it on a project page */
.projectpage .designprocess section{
  padding-top: 0.5em;
  padding-bottom: 0em;
  padding-left: 0.5em;
  padding-right: 0.5em

}



/* main page wrapper and big grid moves */
.page-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  grid-gap: 1.5em;

  width: 100%;
}


nav{
  grid-column: 2 / span 10;
}

.herocontainer{
  grid-column: 2 / span 10;

  display: grid;
  grid-template-rows: repeat(5, 5em);

}

.herocontainer .content{
  grid-row: 2 / span 2;
}


.projectlist {
  grid-column: 2 / span 10;

  display: grid;
  grid-template-columns: repeat(19, 1fr);
  grid-column-gap: 1em;
}


.contactme {
  grid-column: 3 / span 8;
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1.5em;
  padding-right: 1.5em;

  margin: 3em 0 3em 0;

  /*border: 2px solid red;*/
  background-color: #CCE6EF;
  border-radius: 20px;
}

.project5cliq, .projectlist .content{
  grid-column: 1 / span 9;
}

.project8wwe {
  grid-column: 1 / span 9;
}

.project7sap {
  grid-column: 11 / span 9;
}

.project1trailmix {
  grid-column: 11 / span 9;
}

.project2fairview {
  grid-column: 11 / span 9;
}



.projectcloverdale {
  grid-column: 1 / span 9;
}

.projectcontainer{
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column-gap: 0.5em;
}

.projectcontainer .thumbnailcontainer{
  grid-column: 1 / span 16;
}

.projectcontainer .projecttext{
  grid-column: 1 / span 14;
  margin-left: 1em;
}

.projecttext {
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
}






.projectlinkwrapper:hover{
  cursor: pointer;
}

.projecttext h2{
  font-family: volteSemibold;
  font-size: 3em;
}

.projecttype {
  /*color: #59CEF3;*/
  color: #2FC5F4;
  font-family: "Roboto Mono", monospace;
  margin-bottom: 0;
}

.projecthero {
  grid-column: 3 / span 8;
}

.projecthero h1, .projecthero h2{
  font-family: volteSemibold;
}


.projectaboutme {
  grid-column: 1 / span 19;

  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 1.5em;

  padding-bottom: 4rem;
}

.projectaboutme .abouttext {
  grid-column: 1 / span 3;
  padding-top: 3rem;
}

.projectaboutme .thumbnailcontainer {
  grid-column: 4 / span 7;
}












.screens {
  grid-column: 2 / span 10;
}

.span-fullgrid{
  grid-column: 3 / span 8;
}



.wwe{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 1.5em;

}


.wwe p{
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fullbleed {
  grid-column: 1/span 12;
  width: 100%;
}


.mixedspan{
  grid-column: 2 / span 10;
}

.mixedspan .textcontainer{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 1.5em;
}

.mixedspan .textcontainer .actualtext{
  grid-column: 2 / span 8;
}

.mixedspan .imagecontainer{
  padding: 1em 0 1em 0;
}






.projecttext a:hover{
  transition: 0s;
  text-decoration: underline;
  text-decoration-color: #59CEF3;

}





/* for the project heading title right chevron arrow */
i{
  vertical-align: middle;
}

/* janky fix but :D so that the trail mix chevron stops wrapping to a new line*/
/*#underlinebeforehovertest #trailmixoverflowtag{
  white-space: nowrap;
}*/


/* hover highlight animation on project thumbnail heading titles */
.underlinehover a h2{
  text-decoration: underline;
  text-decoration-color: #59CEF3;
  color: #2B2B2B;

  overflow: hidden;
  background: linear-gradient(to right, #59CEF3, #59CEF3 50%, #2B2B2B 50%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.3s ease;
}

.underlinehover a:hover h2{
  background-position: 0 100%;
  text-decoration: underline;
  text-decoration-color: #59CEF3;
}









/* styleguide styling */
.subnav {
  grid-column: 2 / span 3;
  margin: 0;
  padding: 0;

}

.subnav a{
  color: #2B2B2B;
}

.subnav a:hover{
  color: #2FC5F4;
}

.subnav div{
  padding-bottom: 1em;
}

.subnav li{
  list-style-type: none;
}

.projectlistcontentstyleguide {
  grid-column: 5 / span 8;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5em;
}

.styleguideelement {
  grid-column: 1 / span 8;
  margin-bottom: 3.5em;
}



.annotation{
  grid-column: 9 / span 3;
}
.annotation p{
  color: #2FC5F4;
}



.subnav #wireframesHeading a, .subnav #referencesHeading a{
  text-decoration: underline;
  text-decoration-color: #59CEF3;
  text-decoration-thickness: 2px;

}

.subnav #wireframesHeading, .subnav #referencesHeading{
  margin: 1em 0 1em 0;
}


.colourchips{
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 1.5em;
}

.colourchips .one, .colourchips .four{
  grid-column: 1 / span 3;
}
.colourchips .two, .colourchips .five{
  grid-column: 4 / span 3;
}
.colourchips .three{
  grid-column: 7 / span 3;
}

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

.chippy {
  /*box-shadow: 2px 2px 10px #bebebe;*/
}
.styleguideelement.wireframe img{
  width: 100%;
  height: auto;
}



.typesamplecontainer section{
  margin: 2.5em 0 2.5em 0;
}

#references a{
  color: #2FC5F4;
}

#references a:hover{
  opacity: 60%;
}









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

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






/* main fade in animation applied to all page wrapper tags */
.fade-in{
  animation: fadein 0.9s ease-in forwards;
}

@keyframes fadein {

  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }

}






/* project detail page section paddings (everything but the hero container) */
.projectpage .projecthero{
  padding: 0;
  margin: 0;
}

.projectpage section{
  padding: 3em 0 3em 0;

}




/* all footer styling code */
footer {
  grid-column: 1 / span 12;
  /*display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;*/
  margin: 0;
  padding: 0;
  padding-top: 5em;
  padding-bottom: 2em;
  width: 100%;
  height: 100%;

  /*background-color: #F2F2F2;*/
  bottom: 0;
  position: relative;

  /*background-color: #CCE6EF;*/
  background-color: #E6F5FC;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  grid-gap: 1.5em;

  width: 100%;


}



/*footer .projecttext{
  justify-content: flex-start;
}*/

.footercontactme{
  grid-column: 2 / span 6;
}

.footercontactme #email {
  color: #2B2B2B;
}

/*.footercontactme #email:hover {
  text-decoration: none;
}*/

footer .footerlinks{
  grid-column: 9 / span 2;
}

footer .copyright{
  grid-column: 2 / span 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;

  padding-top: 4rem;
}


footer p{
  font-size: 1.20rem;
}


footer a{
  /*color: #2FC5F4;*/
  font-family: volteSemibold;
  color: #06BCF5;
  font-size: 1.20rem;
}




footer a:hover{
  color: #2B2B2B;
}







footer .copyright p {
  margin: 0;
  font-size: 0.85rem;

  line-height: 164.7%;
  font-family: volteMedium, "Roboto Mono", "Courier New", monospace;

  /*color: #646464;*/
  color: #716C73;

}



.icon {
  width: 42px;
  height: auto;
  padding-right: 1rem;
}

.icon:hover{
  opacity: 65%;
}








/* mounresc page things */
#sitemap img {
  width: 100%;
  height: auto;
  padding-top: 1rem;
  /*padding-bottom: 3rem;*/
}

#wireframes img {
  width: 100%;
  height: auto;
  padding-bottom: 2rem;
}

#moodboard img {
  width: 100%;
  height: auto;
  padding-bottom: 2rem;
}


.container2 h2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* full page background image containers */
.container1 {
    background-image: url("img/organization.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    /*border: 2px dashed #333;*/
}


/* fairview page image styling */
#fairviewiterationsimage {
  width: 100%;
  height: auto;
}

#fairviewWiretestimage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

#fairviewWiretestimage img {
  width: 75%;
  height: auto;
}

#fairview2devicesimg {
  width: 100%;
  height: auto;

  padding-bottom: 0;
  margin-bottom: 0;
  /*vertical-align: bottom;*/
}

#userflowscenario2 p strong {
  color: #2FC5F4;
  font-weight: 400;
}






/* breakpoints */
/* if screen is smaller than xyz , then adjust accordingly */


/* bigboi */
/* if screen is huge aka bigger than 1500px, adjust for bigger screens*/
@media screen and (min-width: 1920px) {

  .newherocontainer{
    grid-column: 2 / span 8;
    display: grid;
    grid-template-rows: repeat(8, 5em);
  }

  .newherocontainer .content{
    grid-row: 2 / span 3;
  }

  .ml11 {
    font-weight: 700;
    font-size: 5em;
  }

  .intro h1 {
    font-size: 82px;
  }

  .intro p {
    font-size: 1.15em;
  }
  h1 {
    font-size: 68px;
  }

  h2 {
    font-size: 32px;
  }

  p {
    font-size: 1.15em;
  }

  nav a {
    font-size: 1.25rem;

  }
  footer p {
    font-size: 1.25rem;
  }

  .button {
    border: 3px solid;
  }
  .button h4{
    font-size: 18px;
  }
  .meTest {
    width: 300px;
    height: auto;
    display: none;
  }
}



/* medium */
/* when in between normal size and mobile */
@media screen and (max-width: 61em) and (min-width: 36em) {


  .newherocontainer{
    grid-column: 2 / span 10;
    display: grid;
    grid-template-rows: repeat(6, 4em);

  }

  .newherocontainer .content{
    grid-row: 2 / span 4;
  }


  .projectlist {
    grid-column: 2 / span 10;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 1em;
  }

  .contactme {
    grid-column: 2 / span 10;
  }



  .project1trailmix, .project2fairview, .project3twitch, .project5cliq, .project4mounresc, .projectcloverdale, .project7sap, .projectlist .content{
    grid-column: 1 / span 8;
  }

  .projectcontainer{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 0.5em;
  }

  .projectcontainer .thumbnailcontainer{
    grid-column: 1 / span 6;
  }

  .projectcontainer .projecttext{
    padding: 1rem 0 0 0;
    grid-column: 8 / span 5;
  }

  .projecttext {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .uparrow {
    grid-column: 11 / span 1;
  }


  .screens {
    grid-column: 1 / span 12;
  }

  .span-fullgrid{
    grid-column: 2 / span 10;
  }

  .projecthero {
    grid-column: 2 / span 10;
  }

  .link a{
    overflow-wrap: anywhere;
  }

}




/* small/mobile */
/* when screen size is of mobile resolution then */
@media screen and (max-width: 36.3em) {


  nav {
    /*padding: 0.75rem;*/
    padding-top: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

  }

  nav a {
    padding: 0.5rem;
    padding-right: 0;

  }

  .nav-main {
    display: flex;
    flex-direction: column;
  }

  .column .projecttext {
    padding-left: 0;
    padding-top: 1rem;
  }

  .column .projecttext p {
    padding: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0;

  }

  /*footer{
    flex-direction: column;
    padding:  2rem 10%;
  }

  footer div,footer div:last-child{
    width: 100%;
  }*/


  .newherocontainer{
    grid-column: 2 / span 10;

    display: grid;
    grid-template-rows: repeat(8, 4em);

  }

  .newherocontainer .content{
    grid-row: 2 / span 6;
  }

  .ml11 {
    font-weight: 700;
    font-size: 3em;
  }


  /* homepage grid mobile edits*/
  /*.herocontainer{
    grid-column: 2 / span 10;

    display: grid;
    grid-template-rows: repeat(5, 5em);
  }

  .herocontainer .content{
    grid-row: 2 / span 5;
  }*/



  .projectlist {
    grid-column: 2 / span 10;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 1em;
  }

  .contactme {
    grid-column: 2 / span 10;
  }



  .project1trailmix, .project2fairview, .project3twitch, .project5cliq, .project4mounresc, .project6cloverdale, .project7sap, .projectlist .content{
    grid-column: 1 / span 8;
  }

  .projectcontainer{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 0.5em;
  }

  .projectcontainer .thumbnailcontainer{
    grid-column: 1 / span 12;
  }

  .projectcontainer .projecttext{
    padding: 1rem 0 0 0;
    grid-column: 1 / span 12;
  }

  .projecttext {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }



  .screens {
    grid-column: 1 / span 12;
  }

  .span-fullgrid{
    grid-column: 2 / span 10;
  }

  .mixedspan .textcontainer .actualtext{
    grid-column: 1 / span 10;
  }

  .projecthero {
    grid-column: 2 / span 10;
  }


  .link a{
    overflow-wrap: anywhere;
  }


  .steps{
    display: flex;
    flex-direction: column;
  }

  .userresearch .column.one, .userresearch .column.two{
    grid-column: 1 / span 12;
  }



  .gifs .text{
    grid-column: 2 / span 10;
  }

  .gifs .phones{
    grid-column: 2 / span 10;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5em;
  }

  .gifs .phones .gif1, .gifs .phones .gif2, .gifs .phones .gif3{
    grid-column: 1 / span 12;
  }

  .teamcontainer, .toolscontainer, .myrolecontainer{
    grid-column: 1 / span 12;
  }


  .subnav {
    grid-column: 2 / span 10;
    margin: 0;
    padding: 0;
  }
  .projectlistcontentstyleguide {
    grid-column: 2 / span 10;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5em;
  }

  .styleguideelement {
    grid-column: 1 / span 12;
    margin-bottom: 3.5em;
  }
  .annotation{
    grid-column: 1 / span 12;
  }

}