/* overlapping style */
html{
    scroll-behavior: smooth;

}

body{
  background-color: white;
  font-size: 18px;
  margin: 0;
  padding: 0;
}


.nav{
  vertical-align: middle;
  grid-column: 1 / -1;
  grid-row: 1 / span 1;

  font-size: 12px;
  background-color: #ffffff;
  padding: 20px 0;
  margin-left: 20px;
  text-align: left;
  font-family: 'Nunito Sans', sans-serif;
}

nav ul{
  list-style-type: none;
}

nav li{
  padding-right: 20px;
  display: inline-block;
}

nav a{
  color: #474A51;
  text-decoration: none;
}

nav a:hover{
  border-bottom: 1px solid #474A51;
}

nav a.active {
  border-bottom: 2px solid #474A51;
  background-color: transparent;
  font-weight: bold;

}


.skip a{
  background: white;
  left: 0;
  padding: 6px;
  position: absolute;
  top: -40px;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 1;
}

.skip a:focus{
  top:0px;
}

#footer {
  padding: 60px 0 40px;
  background-color: #474A51;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  width: 100%;
}

.fas, .fab {
    color: white !important;
    margin: 0px 20px 10px 20px;
    font-size: 30px;

}

.skip {
  font-family: 'Nunito Sans', sans-serif;
}

#about_page_h1, #portfolio_page_h1, #contact_page_h1, #resume_page_h1 {
  font-family: "Nunito Sans";
  font-size: 24px;
  margin-left: 50px;
  margin-top: 25px;
  margin-bottom: 25px;
}


/* index page styling */

#index_page_h1{
  font-size: 35px;
  font-weight: 500;
  line-height: 1;
  padding: 50px 50px 20px 50px;
  font-family: 'Nunito Sans', sans-serif;
  text-align: left;

}

#index_page_h2{
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  padding: 0px 50px 8px 50px;
  text-align: left;
  font-family: 'Nunito Sans', sans-serif;
}


#index_wrapper{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px auto auto auto auto auto;
  grid-row-gap: 10px;

}


#main{
  background-attachment: fixed;
  background-image: url(https://uploads-ssl.webflow.com/5bd0d79dac3abb16580e2a07/5c3e9063d822bf7e717e7a51_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #474A51;
  height: 400px;
  width: 100vw;
  padding-top: 100px;

  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

#main p{
  color: white;
  font-size: 24px;
  padding: 0 100px;
  text-align: center;
}

.project_link {
  text-decoration: none;
  color: #474A51;
}


.projects{
  grid-column: 1 / -1;
  grid-row: 4 / span 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  padding-bottom: 80px;
}

.folder1 {
    width: 90vw;
    height: 40vh;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    border-radius: 0 20px 20px 20px;

    grid-column: 1 / span 1;
    grid-row: 1/ span 1;
    background-color: #e6f4ef;
}

.folder2 {
    width: 90vw;
    height: 40vh;
    margin-top: 50px;
    position: relative;
    border-radius: 0 20px 20px 20px;

    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    background-color: #eef4e6;

}

.folder3 {
    width: 90vw;
    height: 40vh;
    margin-top: 50px;
    position: relative;
    border-radius: 0 20px 20px 20px;

    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    background-color: #feede2;
}


.folder4 {
    width: 90vw;
    height: 40vh;
    margin-top: 50px;
    position: relative;
    border-radius: 0 20px 20px 20px;

    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
    background-color: #fde8e7;
}

.folder5 {
    width: 90vw;
    height: 40vh;
    margin-top: 50px;
    position: relative;
    border-radius: 0 20px 20px 20px;

    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
    background-color: #eed3db;
}

.folder6 {
    width: 90vw;
    height: 40vh;
    margin-top: 50px;
    position: relative;
    border-radius: 0 20px 20px 20px;

    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
    background-color: #e1d6eb;
}

.folder1:before {
    content: '';
    width: 35%;
    height: 45px;
    border-radius: 0 20px 0 0;
    background-color: #d5ede4;
    position: absolute;
    top: -45px;
    left: 0px;
}


.folder1 .text{
  position:relative;
  top:170px;
  text-align: center;
  font-family: 'Dekko', sans-serif;
  font-size: 20px;
}


.folder2:before {
    content: '';
    width: 35%;
    height: 45px;
    border-radius: 0 20px 0 0;
    background-color: #e6efd9;
    position: absolute;
    top: -45px;
    left: 0px;
}


.folder2 .text{
  position:relative;
  top:170px;
  text-align: center;
  font-family: 'Dekko', sans-serif;
  font-size: 20px;
}



.folder3:before {
    content: '';
    width: 35%;
    height: 45px;
    border-radius: 0 20px 0 0;
    background-color: #fddcc4;
    position: absolute;
    top: -45px;
    left: 0px;
}



.folder3 .text{
  position:relative;
  top:170px;
  text-align: center;
  font-family: 'Dekko', sans-serif;
  font-size: 20px;
}



.folder4:before {
    content: '';
    width: 35%;
    height: 45px;
    border-radius: 0 20px 0 0;
    background-color: #fcd5d3;
    position: absolute;
    top: -45px;
    left: 0px;
}


.folder4 .text{
  position:relative;
  top:170px;
  text-align: center;
  font-family: 'Dekko', sans-serif;
  font-size: 20px;
}

.folder5:before {
    content: '';
    width: 35%;
    height: 45px;
    border-radius: 0 20px 0 0;
    background-color: #e5bdc9;
    position: absolute;
    top: -45px;
    left: 0px;
}


.folder5 .text{
  position:relative;
  top:170px;
  text-align: center;
  font-family: 'Dekko', sans-serif;
  font-size: 20px;
}

.folder6:before {
    content: '';
    width: 35%;
    height: 45px;
    border-radius: 0 20px 0 0;
    background-color: #d2c1e1;
    position: absolute;
    top: -45px;
    left: 0px;
}


.folder6 .text{
  position:relative;
  top:170px;
  text-align: center;
  font-family: 'Dekko', sans-serif;
  font-size: 20px;
}



.callout {
  margin-left: 20px;

}

.icon {
  padding-top: 220px;

}

/* about page styling */

#me {
  object-fit: contain;
  height: 90%;
  width: 90%;
  margin-bottom: 30px;


}

.about{
  grid-column: 1 / -1;
  grid-row: 1 / span 1;
  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: 30% 30% 30%;
  padding-top: 20px;
}


.about-image{
  display: block;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  margin-left: 40px;
  overflow: hidden;
  /* image is weird, cannot get it to resize correctly and fit where i want */

}

.note-1 {
  position: relative;
  overflow: hidden;

  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  background-color: #fff1bd;
}



.summary-header {
  margin: 40px 40px 0px 40px;
  text-align: left;
  font-family: 'Dekko', cursive;
  font-size: 18px;
  text-decoration: underline;
  color: #474A51;

}

.summary {
  margin: 20px 40px 20px 40px;
  text-align: left;
  font-family: 'Dekko', cursive;
  font-size: 15px;
  color: #474A51;
}


.note-2 {
  position: relative;
  overflow: hidden;

  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
  background-color: #fff1bd;

  display: grid;
  grid-template-columns: 25% 25% 25%;
  grid-template-rows: 1fr 3fr;
}


.skills-header {
  margin: 40px 50px 0px 50px;
  text-align: left;
  font-family: 'Dekko', cursive;
  font-size: 18px;
  color: #474A51;
  text-decoration: underline;

  grid-column: 1 / -1;
  grid-row: 1 / span 1;

}

.languages {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;

}

.tools {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}


.programming {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

.lang-header, .tools-header, .program-header {
  margin: 20px 50px 0px;
  text-align: left;
  font-family: 'Dekko', cursive;
  font-size: 17px;
  color: #474A51;
}

.lang-list, .tools-list, .program-list {
  margin: 10px 50px 10px 50px;
  text-align: left;
  font-family: 'Dekko', cursive;
  font-size: 15px;
  color: #474A51;

  list-style-type: circle;
  list-style-position: outside;
}



.callout-2 {
  margin: 30px;
}

.callout-3 {
  margin: 0px 30px 30px 30px;

}



/* portfolio page styling */


.gallery{
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-around;
  flex-flow: wrap;
  flex-direction: row;
}

figure{
  object-fit: cover;

  width: 450px;
  height: 550px;
  margin: 8px 8px;;
  padding: 25px;
  box-sizing: border-box;
  flex-shrink: 0;

}
figure img{
  width: 400px;
  height: 400px;
  object-fit: cover;
}

figure figcaption{
  text-align: center;
  padding: 8px 4px;
  font-family: "Dekko";
  font-size: 25px;
  padding-top: 30px;
  color: #474A51;
}

.gradient1 {
  background-color: #f0f0f0;

}

.gradient2 {
  background-color: #E7E7E7;

}

.gradient3 {
  background-color: #dbdbdb;
}

@-webkit-keyframes flash {
 0% { opacity: .2; }
 100% { opacity: 1; }
}
@keyframes flash {
 0% { opacity: .2; }
 100% { opacity: 1; }
}

.flash:hover {
  color: #ffffff;
  opacity: 1;
  -webkit-animation: flash 2s;
  animation: flash 2s;
}


/* individual project pages  */

#proj_page_h1{
  font-size: 30px;
  line-height: 1;
  padding-top: 35px;
  padding-bottom: 12px;
  text-align: center;
  font-family: 'Nunito Sans';
}

#proj_page_h2{
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  font-family: 'Nunito Sans';
}

h3{
  font-size: 18px;
  font-weight: 800;
  text-align: left;
  font-family: 'Nunito Sans';
  text-transform: uppercase;

}

h4 {
  font-size: 25px;
  font-style: italic;
  font-family: "Nunito Sans", sans-serif;
}



p, li, h5{
text-align: left;
}

.individual_p, .individual_li {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  color: #757575;
  line-height: 35px;

}


.individual_column {
  font-family: 'Source Sans Pro', sans-serif;
  color: #757575;
  font-size: 18px;

}

/* .function_li {

  color: #367d63;
  font-weight: bold;


} */

h5 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
}




.white_box {
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  max-width: 600px;
  background-color: white;
  height: 210px;
  border-radius: 25px;



}

.proj_page_header_datacatalog{
  background-attachment: fixed;
  background-image: url(../images/datacatalog-cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  height: 200px;
  width: 100%;
  padding-top:130px;


  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

.blue {
  color: #70c2a4;

}

.green {
  color: #9ec171;

}

.orange {
  color: #f99858;
}

.pink {
  color: #f47c76;

}

.magenta {
  color: #cc7b93;

}

.purple {
  color: #895eb0;

}

.proj_page_header_research{
  background-attachment: fixed;
  background-image: url(../images/research-cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  height: 200px;
  width: 100%;
  padding-top:130px;

  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

.proj_page_header_comparative{
  background-attachment: fixed;
  background-image: url(../images/comparative-cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  height: 200px;
  width: 100%;

  padding-top:130px;
  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

.proj_page_header_optimization{
  background-attachment: fixed;
  background-image: url(../images/optimization-cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  height: 200px;
  width: 100%;

  padding-top:130px;
  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

.proj_page_header_datareport{
  background-attachment: fixed;
  background-image: url(../images/datareport-cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  height: 200px;
  width: 100%;

  padding-top:130px;
  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

.proj_page_header_uxinterview{
  background-attachment: fixed;
  background-image: url(../images/uxinterview-cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  height: 200px;
  width: 100%;

  padding-top:130px;
  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}



.wireframe-image,.backend-image, .ideation-image, .workflow-image, .rstudio-image, .sql-image, .agedifference-image, .zellecallerage-image, .zellecallcount-image, .learned-image{
  display: block;
  width: 100%;

}


#proj_pg_image {
  width: 100%;
}


.text-block{
  justify-self: center;
  align-self: center;

  background-color: rgba(255, 255, 255, .8);
  border: 10px solid white;
  padding: 30px;
}

/* contact page styling */



/* resume page styling */
iframe {
  margin: auto;
  padding: 10px;
  display: block;
  width: 700px;
  height: 900px;
}

/* #resume_page_h1 {
  color: white;
  font-size: 25px;
  font-weight: bold;
  font-family: "Nunito Sans";
  text-shadow:
    0 1px 0 #b6b3cb,
    0 2px 0 #aba7c3,
    0 3px 0 #9995b7,
    0 4px 0 #8580a8,
    0 5px 0 #76709e,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
} */



/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

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

/* overlap styling */

  .nav{
    font-size: 18px;
    text-align: center;
  }

/* index page styling */

  #index_page_h1, #index_page_h2{
    text-align: center;

  }

  .folder1, .folder2, .folder3, .folder4, .folder5, .folder6{
    width: 90vw;
    height: 60vh;

  }

  .folder1 .text, .folder2 .text, .folder3 .text, .folder4 .text, .folder5 .text, .folder6 .text {

    font-size: 30px;


  }

  .callout {
    margin-left: 35px;

  }


/* about page styling */


  .about{
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

  }

  #me {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

  }

  .note-1 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    width: 40vw;
    height: 45vh;

  }

  .note-2 {
    grid-column: 1 / -1;
    grid-row: 2 / span 1;
    width: 90vw;
    height: 40vh;
  }

  .note-2:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-width: 0 90px 90px 0;
    border-style: solid;
    border-color: #ffd129 #ffd129 #fff #fff;
    background: #658E15;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    display: block; width: 0;
  }

  .callout-2 {
    margin: 10px;

  }


}

/*
  ##Device = Laptops, Desktops
*/

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

/* overlap styling */

  .nav{
    text-align: right;
    font-size: 20px;
  }

  #about_page_h1, #portfolio_page_h1, #contact_page_h1, #resume_page_h1 {
    font-size: 32px;
  }


/* index page styling */
  #index_page_h1{
    font-size: 40px;
    font-weight: 500;

  }


  #index_page_h2{
    font-size: 31px;
    font-weight: 500;
    line-height: 1;
    padding: 0px 50px 8px 50px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid black;
    width: 44ch;
    animation: type 3s steps(44), blink .5s step-end 3s infinite alternate;
  }


  @keyframes type {
    0% {
      width:0ch;
    }
    100% {
      width:41ch;

    }

  }

  @keyframes blink {

   50% { border-color: transparent;

   }
}



  .projects{
    grid-row: 4 / span 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

  }

  .folder1 {
    width: 600px;
    height: 400px;

  }

  .folder2 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;

    width: 600px;
    height: 400px;

  }

  .folder3 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;

    width: 600px;
    height: 400px;
  }


  .folder4 {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;

    width: 600px;
    height: 400px;
  }

  .folder5 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;

    width: 600px;
    height: 400px;
  }

  .folder6 {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;

    width: 600px;
    height: 400px;
  }

  .callout {
    margin: 50px;
  }

  .folder1:hover, .folder2:hover, .folder3:hover, .folder4:hover, .folder5:hover, .folder6:hover {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);

  }

  .folder1 .text, .folder2 .text, .folder3 .text, .folder4 .text, .folder5 .text, .folder6 .text{
    visibility:hidden;
    color: black;

  }

  .folder1:hover .text, .folder2:hover .text, .folder3:hover .text, .folder4:hover .text, .folder5:hover .text, .folder6:hover .text{
    visibility:visible;
  }


/* about page styling */

  #me {
    width: 95%;
    height: 100%;
    margin: 0;
  }

  .about{
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding-bottom: 80px;

  }


  .about-image{
    display: block;
    grid-column: 1 / span 1;
    grid-row: 1 / -1;
    width: 100%;

  }

  .note-1 {

    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    background-color: #fff1bd;
  }

  /* .note-1:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-width: 0 90px 90px 0;
    border-style: solid;
    border-color: #ffd129 #ffd129 #fff #fff;
    background: #658E15;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    display: block; width: 0;
  } */

  .note-2 {
    dislay: grid;

    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    background-color: #fff1bd;

    grid-template-columns: 30% 30% 30%;

  }

  .note-2:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-width: 0 90px 90px 0;
    border-style: solid;
    border-color: #ffd129 #ffd129 #fff #fff;
    background: #658E15;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    display: block; width: 0;
  }

  .summary {
    font-size: 20px;
  }

  .summary-header, .skills-header {
    font-size: 28px;
    margin: 60px 50px 0px 50px;


  }

  .lang-header, .tools-header, .program-header {
    margin: 20px 50px 10px 50px;
    text-align: left;
    font-family: 'Dekko', cursive;
    font-size: 23px;
    color: #474A51;
  }

  .lang-list, .tools-list, .program-list {
    margin: 10px 50px 10px 50px;
    text-align: left;
    font-family: 'Dekko', cursive;
    font-size: 20px;
    color: #474A51;
  }


  .callout-2 {
    margin: 0px 50px 0px 50px;
  }

  .callout-3 {
    margin: 50px 50px 0px 50px;
  }


/* portfolio page styling */

  .portfolio {
    padding-top: 80px;
    grid-column: 1 / -1;
    grid-row: 2 / -1;

  }

  figure{
    width: 450px;
    height: 550px;

  }
  figure img{
    width: 400px;
    height: 400px;
    object-fit: cover;
  }


  /* individual project pages styling */
  h3 {
    grid-row: 1 / span 1;
    grid-column: 1 / -1;

  }
  h4{
    text-align: center;
    grid-row: 1 / span 1;
    grid-column: 1 / -1;
  }

  li{
    margin-left: 20px;
  }

  .proposition {
    display: grid;
    grid-template-rows: 1fr 1fr;

  }

  .prop-top {
    grid-column: 1 / 4;

  }
  .prop-type {
    grid-row: 2/ span 1;

  }

  .enterprise {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }

  .sharepoint {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
  }

  .inhouse {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
  }

  .ideation, .learned {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;

  }

  .ideation-text, .learned-text {
    grid-column: 1 / span 1;
  }

  .ideation-image, .learned-image {
    grid-column: 2 / span 1;
  }


  .analysis-images, .persona-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .act140 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

  }

  .act160 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;

  }

  .ap-table {
    border-collapse: collapse;
    text-align: left;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
  }

  .ap-table thead tr {
    background-color: #dbdbdb;
    text-align: left;
    font-weight: bold;

  }

  .ap-table th,
  .ap-table td {
    padding: 12px 15px;

  }

  .ap-table tbody tr {
    border-bottom: 1px solid #dddddd;

   }

   .ap-table tbody tr:last-of-type {
     border-bottom: 2px solid #dbdbdb;

   }

   .analysis-images, .methodology-images, .persona-images {
     display: flex;
   }

   .act, .test, .distribution{
     flex: 50%;
     padding: 5px;
   }

   .ordered_classes {
     flex: 35%;
     padding: 30px;
     font-weight: bold;
     font-size: 20px;
   }

   .insights{
      background-color: #fff6d6;

   }

   .recommends {
     background-color: #feede2;

   }

   .text-block{
     padding-left: 220px;
     padding-right: 220px;
   }



}


@media screen and (prefers-reduced-motion: reduce){
  html{
      scroll-behavior: auto;
  }

  .skip a{
    background: white;
    left: 0;
    padding: 6px;
    position: absolute;
    top: -40px;
    -webkit-transition: none;
    transition: none;
    z-index: 1;
  }

  .skip a:focus{
    top:0px;
  }

  #index_page_h2{
    animation: none;
    border-right: none;
  }


  .flash:hover {
    animation: none;
  }
}