@charset "UTF-8";

:root {
  --color-tan: #B1A296;
  --color-lt-tan: #E3D0C1;
  --color-very-lt-tan: #FFEAD9;
  --color-taupe: #888389;
  --color-dk-taupe: #5D5C61;
  --color-dk-blue: #557A95;
  --color-dk-blue-rgba: rgb(85, 122, 149, .2);
  --color-lt-blue: #7395AE;
  --color-very-lt-blue: #97C5E6;
}

html {
  font-size: 62.5%;
  /* this is so 1rem = 10px and it makes the math easier. It is found by 10px/16px (default browser size) = 62.5%. This should be used from now on */
}

body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  line-height: 1.7rem;
  /*color: #5d5c61;*/
  color: #000;
}

.container {
  padding: 0;
/*
  padding-left: 0;
  padding-right: 0;
*/
}

.tanBar {
/*  max-width: 327px;*/
  background-color: var(--color-tan);
  height: 2.7rem;

  animation-name: moveDown;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/*
@media (min-width: 768px) {
  .tanBar {
    max-width: 725px;
    background-color: var(--color-tan);
    height: 2.7rem;
  }
}
*/


/* .tanBar.clearfix:after {
  content: "";
  display: block;
  clear: both;
} */

.header {
}

.header h1  {
  font-size: 5rem;
  letter-spacing: .1rem;
  color: #000000;
  margin-top: -1.7rem;

  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.header h1 a:link,
.header h1 a:visited {
  text-decoration: none;
  color: #000000;
}

.header h1 a:hover,
.header h1 a:active,
.header h1 a:focus {
/*  text-decoration: none;*/
  color: var(--color-dk-taupe);
}

.header h1 span.fname {
  color: var(--color-dk-blue);
}

.header h2 {
  font-family: "Nunito Sans";
  color: var(--color-tan);
}

.header .lightWeight {
  font-weight: 300;
}

.header .blackWeight {
  font-weight: 800;
}

.header h2.mediumSize {
  font-size: 1.4rem;
  font-weight: 400;
  margin-left: 16rem;
  margin-top: -1.5rem;
  margin-bottom: 1rem;

  animation-name: moveInRight;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.header h2.largeSize {
  display: none;
}

@media only screen and (min-width: 768px) {
  .header h2.largeSize  {
    font-size: 1.5em;
    font-weight: 400;
    margin-top: -1.5rem;
    margin-left: 16rem;
    margin-bottom: 1rem;
    display: block;

    animation-name: moveInRight;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }

  .header h2.mediumSize {
    display: none;
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }

  80% {
    transform: translateX(1rem);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }

  80% {
    transform: translateX(-1rem);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveDown {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/*** NAVBAR STYLES ***/

.bg-light .container {
  background-color: #FFFFFF;
  /*border-bottom: 2px solid var(--color-dk-blue);*/
}

.navbar-nav {
  font-size: 1.4rem;
  font-weight: 600;
}

.navbar .navbar-nav .nav-link {
  color: var(--color-taupe);
  margin-left: 1.5rem;
}

/*** I don't want the active link to show the hover color so I tried the :not() selector but it doesn't work correctly in chrome so I just commented it out ***/
/*** this goes after hover:not(.navbar .nav-item .active .nav-link) and this on focus not(.navbar .nav-item.active .nav-link)***/
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus {
  color: var(--color-lt-tan);
/*  background-color: var(--color-tan);*/ /* *** MOBILE DOESNT HAVE A HOVER STATE SO USING A BACKGROUND COLOR CHANGE ISNT USED ANYMORE *** */
}

.navbar .nav-item.active .nav-link {
  color: var(--color-tan);
  font-weight: 700;
}

.horizontal_break {
  margin: 0;
  padding: 0;
  background-color: var(--color-dk-blue);
  min-height: .5rem;
  width: 100%;
}

.horizontal_break-sm {
  margin: 0;
  padding: 0;
  background-color: var(--color-dk-blue);
  min-height: .3rem;
  width: 100%;
}

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

  .navbar-container {
    margin-left: 1rem;
  }
}

/* *** End Header and Navbar Styles *** */


/* *** INDEX PAGE *** */

/* *** Main Banner Video Styles *** */

section.banner {
  padding: 30px 0;
  background-color: var(--color-dk-blue);
}

.banner .container video {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  max-width: 100%;
}

.hero {
  position: relative;
  background-color: #000;
}

.hero video {
  height: auto;
  max-width: 100%;
  background-position: absolute;
  /*z-index: 10;*/
  object-fit: cover;
  margin: 0;
  padding: 0;
}

.hero-content {
  background: rgba(0,0,0,.2);
  /*-webkit-backdrop-filter: blur(3px);*/
  height: 100%;
  width: 100%;
  /*z-index: 20;*/
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.hero-content h3 {
  color: #ffffff;
  font-weight: 700;
  font-size: 4.5rem;
  text-transform: capitalize;
  text-shadow: 4px 4px 10px #000;
}

@media only screen and (max-width: 720px) {
  .hero-content h3 {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 414px) {
  .hero-content h3 {
    font-size: 1.2rem;
  }
}


/* *** End Main Banner Video Styles *** */

/* *** Disciplines cards *** */

.disciplines__card {
  margin-bottom: 3rem;
}

.header-container {
}

.disciplines__card-heading {
  position: relative;
  width: 35rem;
  height: 35rem;
}

.disciplines__card-heading img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.disciplines__card-heading h3 {
  position: absolute;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
  text-shadow: 4px 4px 8px #000;
}

.disciplines__card-heading h3 span {
  font-weight: 800;
}

.disciplines__icon-box {
  display: inline-block;
  text-align: center;
  margin: 2rem auto;
}

.disciplines__icon {
  height: 5rem;
  width: 5rem;
  fill: #000000;
}

.disciplines__card-text {
}

article.disciplines__card:not(:last-of-type):after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  width: auto;
  background-color: var(--color-dk-blue);
}

.disciplines__card-text p {
  font-size: 1.5rem;
  line-height: 2rem;
}

.disciplines__card-text li {
  font-size: 1.4rem;
  line-height: 2rem;
  font-style: italic;
}

.disciplines__card-button {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.disciplines__card-button a {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 3rem;
  background-color: var(--color-dk-blue);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}

.disciplines__card-button a:hover {
  border: 1px solid var(--color-tan);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .2);
}

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

  .disciplines__card-heading h3 {
    margin-left: -1rem;
    font-size: 1.9rem;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 768px) {
  .disciplines__card {

  }

  .disciplines__card-heading h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .disciplines__card-text p {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }

  .disciplines__card-text li {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .disciplines__card-button a {
    font-size: 1.1rem;
    padding: .8rem 1.5rem;
  }

  .disciplines__icon {
    width: 4rem;
    height: 4rem;
  }
}

@media only screen and (max-width: 500px) {
  .disciplines__card {
    /*border-top: 1px solid #000000;
    border-right: 0;
    border-bottom: 1px solid #000000;
    border-left: 0;*/
  }

  .disciplines__card-heading h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .disciplines__card-text p {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }

  .disciplines__card-text li {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .disciplines__card-button a {
    font-size: 1.1rem;
    padding: .8rem 1.5rem;
  }

  .disciplines__icon {
    width: 4rem;
    height: 4rem;
  }
}

/* *** End Disciplines cards *** */


/*** BRIEF BIO SECTION STYLES ***/
.briefBio {
  padding: 30px 0px;
  background-color: var(--color-dk-blue);
  color: #FFFFFF;
}

.briefBio__row {
  margin: 0;
  padding: 0;
}
.briefBio__heading {
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.briefBio__bio {
  font-size: 1.1rem;
  line-height: 1.6rem;

  padding-left: 3rem;
}

.quotesLeft {
  height: 3rem;
  width: 6rem;
  display: inline-block;
  fill: var(--color-tan);
  margin: .5rem auto 0px -2rem;
}

.quotesRight {
  height: 3rem;
  width: 6rem;
  display: inline-block;
  fill: var(--color-tan);
  margin-left: 25rem;
  margin-bottom: 1rem;
}

.briefBio__pullQuote {
  font-family: 'Noto Serif', serif;
  font-size: 1.1rem;
  line-height: 1.8rem;
  font-style: italic;
  padding-left: 4rem;
  margin-top: 3rem;
}
/*
.briefBio__pullQuote::before {
  content: "\201C";
  font-family: 'Yeseva One', cursive;
  font-style: normal;
  font-size: 7.5rem;
  color: var(--color-tan);
  display: block;
  margin-bottom: -4.5rem;
}

.briefBio__pullQuote::after {
  content: "\201D";
  font-family: 'Yeseva One', cursive;
  font-style: normal;
  font-size: 7.5rem;
  color: var(--color-tan);
  display: block;
  margin-top: 2.2rem;
  text-align: right;
  margin-right: 3rem;
}
*/

.briefBio__pullQuote span {
  font-weight: 700;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-tan);
}

@media only screen and (min-width: 500px) {
  .briefBio__pullQuote {
    padding-left: 8rem;
  }

  .quotesRight {
    margin-left: 26rem;
  }
}

@media only screen and (min-width: 576px) {
  .briefBio__heading {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }

  .briefBio__bio {
    font-size: 1.2rem;
    line-height: 1.7rem;
    padding-left: 4rem;
  }

  .briefBio__pullQuote {
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 2.1rem;
    font-style: italic;

    padding-left: 8rem;
  }

  .briefBio__pullQuote span {
    font-weight: 700;
    font-size: 1.8rem;
    font-style: italic;
  }

  .quotesRight {
    margin-left: 30rem;
  }
}

@media only screen and (min-width: 992px) {
  .briefBio__heading {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .briefBio__pullQuote {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.2rem;
    font-style: italic;

    padding-left: 6rem;
  }

  .briefBio__pullQuote span {
    font-weight: 700;
    font-size: 2rem;
    font-style: italic;
  }

  .quotesRight {
    margin-left: 34rem;
  }
}

@media only screen and (min-width: 1200px) {
  .briefBio__bio {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }

  .briefBio__pullQuote {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.6rem;
    font-style: italic;

    padding-left: 6rem;
  }

  .briefBio__pullQuote span {
    font-weight: 700;
    font-size: 2.5rem;
    font-style: italic;
  }

  .quotesRight {
    margin-left: 40rem;
  }
}


/*** PROJECTS PAGE STYLES ***/

/* *** Filter Buttons *** */

.projects {
  padding-top: 3rem;
}

.projects .buttonsContainer {
  padding: 1rem;
}

.filterItems p  {
  display: inline-block;
  width: 10rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: .6rem 1rem .4rem 1rem;
  margin: auto .5rem;
}

.filterItems p:not(:first-of-type) {
  text-transform: uppercase;
  cursor: pointer;
}

.filterItems p:first-of-type {
  font-weight: 400;
  font-size: 1.2rem;
  margin-right: 0px;
  padding-right: .5rem;
  color: var(--color-taupe);
  text-align: right;
}

.selectedButton {
  background-color: rgba(177, 162, 150, 0.1);
  border: 1px solid var(--color-tan);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .2);
}

.unselectedButton {
  border: 1px solid var(--color-dk-blue);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}

/* *** End Filter Buttons *** */

/* *** Projects cards *** */

.projects .project__card {
  position: relative;
  height: 56rem;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 3rem;
}

.projects .project__card::after {
  position: absolute;
  content: '';
  top: 1.5rem;
  left: calc(2rem + 15px);
  right: calc(2rem + 15px);
  bottom: 1.5rem;
  border: .15rem solid var(--color-dk-taupe);

  transition: all 2s ease;
}

.projects .project__card:hover::after {
  transform: translate(3rem, -2rem);
  opacity: .5;
}

.projects__top-half, .projects__bottom-half {
  min-height: 28rem;
  width: 100%;
}

.projects__half-tan {
  background-color: var(--color-tan);
}

.projects__half-beige {
  background-color: #C7BDAB;
}

.projects__half-lt-blue {
  background-color: var(--color-lt-blue);
}

.projects__half-dk-blue {
  background-color: var(--color-dk-blue);
}

.projects__half-grey {
  background-color: #EEEEEE;
}

.project__floating-center {
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
}

.floating-image {
  display: block;
  position: relative;
  max-width: 50%;
}

.floating-image-small {
  display: block;
  position: relative;
  max-width: 40%;
}

.floating-image-large {
  display: block;
  position: relative;
  max-width: 75%;
}

.floating-image-special {
  display: block;
  position: relative;
  max-width: 60%;

  background-color: pink;
}

.resp-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.resp-iframe {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%
}

/*.projects__iframe {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  padding-top: 56.25%;
}

.projects__iframe>iframe {
  border: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}*/

.projects__subhead1 {
  font-weight: 700;
  font-size: 1.8rem;
  color: #ffffff;
  margin-top: 2rem;
  margin-bottom: .5rem;
}

.projects__subhead1 span {
  font-style: italic;
}

.projects__subhead2 {
  font-weight: 400;
  font-size: 1.6rem;
  color: #ffffff;
  margin-top: .2rem;
  text-align: center;
}

.projects__description {
  font-weight: 400;
  font-size: 1.3rem;
  color: #ffffff;
  margin-top: .1rem;
  text-align: center;
}

@media only screen and (max-width: 1200px) {
  .projects .project__card {
    height: 44rem;
  }

  .projects__top-half, .projects__bottom-half {
    min-height: 22rem;
  }
}

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

  /*  */
  .projects .project__card {
    height: 36rem;
  }

  .projects__top-half, .projects__bottom-half {
    min-height: 18rem;
  }
  /*  */

  .projects__subhead1 {
    font-size: 1.5rem;
  }

  .projects__subhead2 {
    font-size: 1.3rem;
  }

  .projects__description {
    font-size: 1.1rem;
  }
}

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

  /*  */
  .projects .project__card {
    /*height: 56rem;*/
    height: 40rem;
  }

  .projects__top-half, .projects__bottom-half {
    /*min-height: 28rem;*/
    min-height: 20rem;
  }
  /*  */

  .projects__subhead1 {
    font-size: 1.5rem;
  }

  .projects__subhead2 {
    font-size: 1.3rem;
  }

  .projects__description {
    font-size: 1.1rem;
  }

}

@media only screen and (max-width: 768px) {
  .projects .project__card {
    height: 46rem;
  }

  .projects__top-half, .projects__bottom-half {
    min-height: 23rem;
  }
}

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

  .projects .buttonsContainer {
    margin-left: 1rem;
  }

  .projects .project__card {
    height: 46rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .projects__top-half, .projects__bottom-half {
    min-height: 23rem;
  }
}

@media only screen and (max-width: 456px) {
  .projects .project__card {
    height: 40rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .projects__top-half, .projects__bottom-half {
    min-height: 20rem;
  }
}

@media only screen and (max-width: 320px) {
  .projects .project__card {
    height: 32rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .projects__top-half, .projects__bottom-half {
    min-height: 16rem;
  }
}

/* *** End Projects cards *** */


/*** CONTACT PAGE AND FORM STYLES ***/
.contact {
  background-color: var(--color-dk-blue);
  padding: 30px 0px;
}

.contact .container {
  background-color: #ffffff;
  padding: 1.5rem 3rem;
}

.contact h1 {
  font-size: 2rem;
  color: var(--color-dk-blue);
  text-align: center;
}

.contact__hello {
  font-weight: 700;
  font-size: 3rem;
  color: var(--color-taupe);
  text-align: center;
}

.contact__cta {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.1rem;
  color: var(--color-taupe);
  text-align: center;
}

.contact__row-info {
  border-top: 1px solid var(--color-lt-blue);
  margin-top: 1rem;
}


@media only screen and (min-width: 992px) {
  .contact__row-info {
    border-top: none;
    border-left: 1px solid var(--color-lt-blue);
  }
}

.contact label {
  color: var(--color-lt-blue);
  font-size: 1.1rem;
}

.contact input, .form-group textarea {
  background: linear-gradient(rgba(177, 162, 150, .15), 20%, rgba(177, 162, 150, .05));
}

.contact input::placeholder, .contact textarea::placeholder {
  color: var(--color-tan);
  font-style: italic;
}

.btn-primary {
  background-color: var(--color-taupe);
  font-weight: 600;
}

.contHeader {
  font-size: 1.5rem;
  color: var(--color-dk-blue);
  margin-top: 1rem;
  text-align: center;
}

@media only screen and (min-width: 992px) {
  .contHeader {
    text-align: left !important;
    padding-left: 2rem;
  }
}

.contName, .contEmail {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.1rem;
  color: var(--color-taupe);
  text-align: center
}

@media only screen and (min-width: 992px) {
  .contName, .contEmail {
    text-align: left !important;
    padding-left: 2rem;
  }
}

.contEmail a {
  color: var(--color-lt-taupe);
}

.required {
  font-size: 1.1rem;
  color: red;
}

.naughty {
  font-size: 1.4rem;
  font-weight: 800;
  color: red;
}

#send {
  background-color: var(--color-tan);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .5px;
  padding: .7rem 1.5rem .4rem 1.5rem;
  border: none;
  border-radius: .3rem;
 }

 #send:hover, #send:active {
  background-color: var(--color-lt-tan);
 }


h2.successfulSend {
  margin-top: 2rem;
  text-align: center;
  font-size: 2rem;
  color: var(--color-dk-blue);
}

p.successfulSend {
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 600;
  text-align: center;
}

p.contact_message {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1rem;
}



/*** ABOUT STYLES ***/
main.about {
  background-color: var(--color-dk-blue);
  padding: 30px 0px;
}

main .container {
  background-color: #ffffff;
  padding: 15px 15px;
}

.infoHeader {
  font-size: 2rem;
  color: var(--color-dk-blue);
  font-weight: 600;
}

.aboutName {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.1rem;
  color: var(--color-taupe);
}

.inline-link {
  text-decoration: none;
  color: var(--color-tan);
  font-weight: 700;
}

.inline-link:hover, .inline-link:active {
  text-decoration: none;
  color: var(--color-lt-tan);
}

.aboutImage {
  background-color: pink;
}

.about img {
  display: block;
  width: auto;
  max-height: 20rem;
  margin: 0;
  padding: 0;
}

.aboutBio__statement {
  font-size: 1.3rem;
  line-height: 1.7rem;
}

.aboutBio__bio {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.about hr {
  height: 2px;
/*  width: 80%;*/
  text-align: center;
  color: var(--color-dk-blue);
  background-color: var(--color-dk-blue);
  margin: 3rem auto;
}

.skillSet {
  /*background-color: khaki;*/
}

.skillSet-subHead {
  margin-left: 2rem;
  /*background-color: orange;*/
  font-weight: 600;
  font-size: 1.7rem;
  list-style: none;


}

.skillSet-level1UL {
  margin-left: 4rem;
  /*background-color: pink;*/
}

.skillSet-level1LI {
  margin-top: .5rem;
  margin-left: -4rem;
  padding: .3rem 0 .1rem 1rem;
  font-size: 1.3rem;
  list-style: none;
  /*background-color: tan;*/
}

.skillSet-level2LI {
  margin-top: .5rem;
  margin-left: -4rem;
  /*background-color: olive;*/
  font-size: 1.3rem;
  list-style: none;

}

/*.skillSet-total {
  width: calc(100% - 4rem);
  margin-left: 4rem;
  background-color: #ddd;
  padding-left: 1rem;
  padding-top: 1rem;
  font-size: 1.3rem;
}

.skill-label {
  background-color: lime
}


.skillSet-confLevel {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.html {
  width: 60%;
  background-color: var(--color-lt-blue);
}*/

/*** BLOG STYLES ***/
main.blog {
}

.blog__article-img {
  background-image: url(../images/americana-1512910.png);
  background-size: cover;
  height: 20rem;
  margin-bottom: 1rem;
}

.blog__article-svg{
  height: 10rem;
  width: 10rem;
  fill: var(--color-dk-blue);
  display: block;
  opacity: 0.7;
}

.blog__article-date {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-lt-blue);
}

.blog__article-heading {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-dk-blue);
}

.blog__article-byLine {
  font-size: 1.1rem;
  color: var(--color-lt-blue);
}

.blog__article-byLine span {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-dk-taupe);
}

.blog__article-subhead {
  font-size: 1.4rem;
  line-height: 1.9rem;
  color: var(--color-dk-taupe);
}

.blog__article-readMore {
  font-size: 1.2rem;
  font-weight: 600;
}

.blog__article-readMore a {
  color: var(--color-taupe);
  padding: 1rem 2rem 1rem .5rem;
  text-decoration: none;
}
.blog__article-readMore a:hover, .blog__article-readMore a:focus {
  color: var(--color-dk-blue);
}

.blog__article-readMore a:visited {
  color: var(--color-tan);
}

article section h3 {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--color-dk-blue);
}

article section h4 {
  font-weight: 600;
  color: var(--color-dk-blue);
}

article section p {
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: #000000;
}

hr.blog__article-horizontalRule {
  height: 1px;
  color: var(--color-dk-blue);
  background-color: var(--color-dk-blue);
  margin: 1.5rem auto 3rem auto;
}


/*** FOOTER STYLES ***/
footer {
  background-color: #5D5C61;
}

footer .container {
}

.social {
  text-align: center;
}

.social__icon {
  height: 1.5rem;
  width: 1.5rem;
  fill: #ffffff;
}

.social__icon-linkedin {
  height: 1.6rem;
  width: 1.6rem
}

.social__icon-vimeo {
  height: 1.3rem;
  width: 1.3rem;
}

.social__icon-imdb {
  height: 1.8rem;
  width: 1.8rem;
}

.social__icon-behance {
  height: 1.8rem;
  width: 1.8rem;
}

.social__icon-box {
  display: inline-block;
  margin: .2rem;
}

.footerLinks-nav {
  text-align: center;
  line-height: .9rem;
  margin: 1rem auto;
}

.footerLinks-item {
  display: inline-block;
}

.footerLinks-link {
  font-size: 1.1rem;
  color: #ffffff;
  text-decoration: none;
}

.footerLinks-link:hover {
  color: var(--color-tan);
}

.copyright {
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
}

.logo {
  text-align: center;
  padding: 0px;
}

.orbiting__icon {
  height: 7rem;
}

.hiddenCards {
  display: none;
}


/*** INDIVIDUAL CASE STUDY PAGES THIS SHOULD WORK FOR ALL BECAUSE I'LL TREAT IT S A TEMPLATE AND ONLY CHANGE THE CONTENT IN THE HTML ***/


main.caseStudy {
  position: relative;
}

.caseStudy::before {
  content: "";
  position: absolute;
  /*top: 13.5rem;*/
  left: 0;
  width: 30rem;
  min-height: 100%;
  background-color: var(--color-dk-blue);
  z-index: -1;
}

.caseStudy::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30rem;
  min-height: 100%;
  /*background-color: var(--color-dk-blue);*/
  /*background-color: #ececec;*/
  background-color: #f6f5f6;
  z-index: -1;
}

@media only screen and (max-width: 768px) {
  .caseStudy::before, .caseStudy::after  {
    content: none;
  }
}

.caseStudy__img-dixieline {
  background-image: url(../images/case-studies/dixieline/windows-light.jpg);
  background-size: cover;
  background-position: center 30rem;
  height: 30rem;
  margin-bottom: 1rem;
  filter: drop-shadow(.2rem .5rem .6rem rgba(0, 0, 0, .6));
  position: relative;
  z-index: 10;
}

.caseStudy__img-whatsForDinner {
  background-image: url(../images/case-studies/whats-for-dinner/whats-for-dinner-casestudy-banner-1140x300.jpg);
  background-size: cover;
  background-position: center 30rem;
  height: 30rem;
  margin-bottom: 1rem;
  filter: drop-shadow(.2rem .5rem .6rem rgba(0, 0, 0, .6));
  position: relative;
  z-index: 10;
}

.caseStudy__img-wellscase {
  background-image: url(../images/case-studies/wells-case/wells-casestudy-header-1140x380.jpg);
  background-size: cover;
  /*background-position: center 30rem;*/
  height: 38rem;
  margin-bottom: 1rem;
  filter: drop-shadow(.2rem .5rem .6rem rgba(0, 0, 0, .6));
  position: relative;
  z-index: 10;
}

.caseStudy__img-curioCaseBanner {
  background-image: url(../images/case-studies/curiohome/curio-casestudy-banner-1140x300.jpg);
  background-size: cover;
  /*background-position: center 30rem;*/
  height: 30rem;
  margin-bottom: 1rem;
  filter: drop-shadow(.2rem .5rem .6rem rgba(0, 0, 0, .6));
  position: relative;
  z-index: 10;
}

.caseStudy__img-linMathewsCaseBanner {
  background-image: url(../images/case-studies/lin-mathews/lin-mathews-casestudy-banner-1140x300.jpg);
  background-size: cover;
  /*background-position: center 30rem;*/
  height: 30rem;
  margin-bottom: 1rem;
  filter: drop-shadow(.2rem .5rem .6rem rgba(0, 0, 0, .6));
  position: relative;
  z-index: 10;
}

.caseStudy__logo {
  height: 10rem;
}

.caseStudy__mainBlock {
  /*position: relative;*/  padding: auto 2rem;
}

.caseStudy__leftColumn {
  /*position: relative;*/
  /*top: -1rem;*/
  /*left: 0;*/
  /*min-height: 100%;*/
  margin-top: -1rem;
  padding-top: 3rem;
  background-color: var(--color-tan);
}

.caseStudy__leftColumn-TOC h3 {
  font-weight: 700;
  color: var(--color-dk-blue);
}

.caseStudy__leftColumn-TOC > ul {
  list-style-type: none;
  margin-top: 2rem;
}

.caseStudy__leftColumn-TOC li {
  margin-left: -3rem;
  margin-top: 1rem;
  font-size: 1.3rem;
}

.caseStudy__leftColumn-TOC a {
    color: #FFFFFF;

}

.caseStudy__leftColumn-TOC a:hover {
  color: var(--color-lt-tan);
  text-decoration: none;
}

.caseStudy__leftColumn-TOC > ul > li::before {
    position: relative;
    font-family: FontAwesome;
    content: '\f105';
    /*top: .1rem;*/
    left: -.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-dk-blue);
}

.caseStody__centerColumn {
  border: none;
  /*position: relative;*/
  margin-top: -1rem;
}

.caseStudy__heading {
  text-align: center;
  margin: 3rem auto;
}

.caseStudy__heading h1 {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--color-dk-blue);
  margin-bottom: 2rem;
}

.caseStudy__heading h3 {
  line-height: 2.5rem;
}

.caseStudy__heading h4>a {
  color: var(--color-taupe);
  font-weight: 600;
}

.caseStudy__heading h4>a:hover,
  .caseStudy__heading h4>a:focus{
  text-decoration: none;
  color: var(--color-lt-tan);
}

.caseStudy__mainArticle-TOC {
  /*background-color: var(--color-lt-tan);*/
  background-color: #f6f5f6;
  min-height: 100%;
  /*color: #ffffff;*/
}

.caseStudy__mainArticle-TOC > h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-dk-blue);
}

.caseStudy__mainArticle-TOC > ul > li::before, .TOC__subItem > li::before {
    position: relative;
    font-family: FontAwesome;
    content: '\f105';
    /*top: .1rem;*/
    left: -.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dk-blue);
}

.caseStudy__mainArticle-TOC > ul {
  list-style-type: none;
}

.caseStudy__mainArticle-TOC > ul > li {
  font-size: 1.1rem;
  line-height: 2rem;
  font-weight: 600;
  margin-left: -3rem;
  margin-bottom: .2rem;
}

.caseStudy__mainArticle-TOC a {
  color: var(--color-taupe);
  text-decoration: none;
}

.caseStudy__mainArticle-TOC a:hover {
  color: var(--color-lt-tan);
}

.TOC__subItem {
  list-style-type: none;
}

.TOC__subItem > li {
  font-size: 1.1rem;
  margin-left: -5rem;
  margin-bottom: .3rem;
}


.caseStudy__mainArticle {
  font-size: 1.3rem;
  line-height: 2.3rem;
  /*background-color: mistyrose;*/
}

.caseStudy__mainArticle h2{
  margin: 4rem auto .7rem;
  color: var(--color-dk-blue);
  font-size: 3rem;
  font-weight: 300;
}

.caseStudy__mainArticle h3 {
  margin: 2rem auto .7rem;
  color: var(--color-dk-blue);
  font-size: 2rem;
  font-weight: 300;
}

.caseStudy__mainArticle h4 {
  color: var(--color-dk-blue);
}

.boxShadow-lower, .dropShadow, .boxShadow-right {
  box-shadow: none;
}

@media only screen and (min-width: 768px) {
  .boxShadow-lower  {
    box-shadow: 0 2rem 3rem rgba(0, 2, 2, .3);
    z-index: 2;
  }
}

@media only screen and (min-width: 768px) {
  .dropShadow  {
    box-shadow: 0 0 2rem rgba(0, 0, 0, .4);
    z-index: 2;
  }
}

@media only screen and (min-width: 768px) {
  .boxShadow-right  {
    box-shadow: 1rem 2rem 2rem rgba(0, 0, 0, .3);
    z-index: 2;
  }
}

.caseStudy__mainArticle a {
  color: var(--color-taupe);
  text-decoration: none;
  font-weight: 600;
}

.caseStudy__mainArticle a:hover, .caseStudy__mainArticle a:focus {
  color: var(--color-lt-tan);
}

.backToTop {
  color: var(--color-taupe);
  font-size: 1rem;
}

.backToTop i {
  position: relative;
  font-size: 1.4rem;
  top: .2rem;
  left: .2rem;
}

.caseStudy__mainArticle-aside h3 {
  font-size: 1.4rem;
  margin-top: 1rem;
  color: var(--color-dk-blue);
}

.caseStudy__mainArticle-aside p {
  font-size: 1.2rem;
}

.caseStudy__mainArticle-aside li {
  font-size: 1rem;
  line-height: 2rem;
  margin-left: -2.5rem;
  margin-bottom: .5rem;
  padding: 0 .5rem .2rem 0;
}

.v-l-blue {
  background-color: var(--color-very-lt-blue);
  margin-bottom: 2rem;
}

.v-l-tan {
  background-color: var(--color-lt-tan);
}

.shifted-left {
  margin-left: auto;
  /*background-color: #FFFFFF;*/
  z-index: auto;
}

@media only screen and (min-width: 992px) {
  .shifted-left {
    margin-left: -5rem;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
  }
}

.shifted-right {
  transform: translateX(3rem);
  z-index: auto;
}

@media only screen and (min-width: 992px) {
  .shifted-right {
    /*position: relative;*/
    margin-right: -2rem;
    backdrop-filter blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
  }
}

.caseStudy__figure {
  background-color: rgba(85, 122, 149, 0.3);
}

.caseStudy__figure-wt {
  background-color: #ffffff;
}

.caseStudy__figure img {
  display: block;
  /*max-height: 100%;*/
  /*width: 100%;*/
  /*border: 1px solid red;*/
}

.caseStudy__figureCaption {
  /*display: block;*/
  /*margin-top: 5rem;*/
  /*border-top: thin solid #000;*/
}

.caseStudy__figureCaption-head {
  /*display: inherit;*/
  font-size: 1rem;
  border-top: 1px;
  font-weight: 700;
  font-style: italic;
  margin-top: 1.5rem;
}

.caseStudy__figureCaption-text {
  /*display: inherit;*/
  font-size: .9rem;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: italic;
}

.general-btn {

}

.general-btn > a {
  background-color: #ffffff;
  padding: 1rem 2rem;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-dk-taupe);
  border: 2pt solid var(--color-dk-taupe);
}

.general-btn > a:hover,
.general-btn > a:active {
  color: #ffffff;
  background-color: var(--color-tan);
  border-color: var(--color-tan);
}

 sup {
  font-size: .7rem;
}

.caseStudy__endnotes {
  font-size: .9rem;
  line-height: 1.3rem;
  color: var(--color-dk-blue);
}