html {
  scroll-behavior: smooth;
}

.disabled {
  opacity: .5;
}

.pageFade, #body-right {
  -webkit-animation: fadein 750ms; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 750ms; /* Firefox < 16 */
          -ms-animation: fadein 750ms; /* Internet Explorer */
           -o-animation: fadein 750ms; /* Opera < 12.1 */
              animation: fadein 750ms;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */
#intro-left {
  background: #2E384B;
  color: #C1BCCD;
  position:relative;
  overflow-y:scroll;
  overflow-x:hidden;
}

#intro-left-info {
  padding: 3em 3em 0 3em;
}

#intro-header {
  border-top: 1px solid #C1BCCD;
  border-bottom: 1px solid #C1BCCD;
}
.intro-header {
  color: #C1BCCD;
  text-align: center;
  margin: 1em 0em;
}
#intro-body a {
  padding:0;
  color: #C1BCCD;
}

#menu p{
  cursor: pointer;
  line-height: 0px;
  padding-top: .75em;
  font-size: .8em;
}


#body-right {
  padding: 1em 3em 0 3em;
  overflow-y: scroll;
  animation-name: backgroundColorPalette;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes backgroundColorPalette {
	0% {
		background: #F1F0F4;
	}
	25% {
		background: #C1BCCD;
	}
	50% {
		background: #AF8DAC;
	}
	75% {
		background: #5972B6;
	}
	100% {
		background: #2E384B;
	}
}



#headerbg {
  background: linear-gradient(45deg, #FFF5FF, #F6FAFE, #F5FFFB, #FFF8F5);
  background-size: 400% 400%;
  animation: gradient 9s ease infinite;
  border-bottom: 1px solid rgba(247,247,247,1);
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#logo-name {
  max-height: 117px;
  max-width: 100%;
  vertical-align: bottom;
}

#img-headshot {
  max-width: 375px;
}

.case-study {
    position: relative;
    opacity: 1;
    transition: .50s ease;
}


.case-container {
    border: 1px solid #F1F0F4;
    border-radius: 8px;
    position: relative;
    opacity: 1;
    transition: .50s ease;
    margin-bottom: 3em;
    background-color: #FCFCFD;
    padding: 2em;
}
.case-container-highlight:hover{
    opacity: 1;
    transition: .3s ease;
    background-color: #FCFCFD;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: scale(1.01);
}

.case-container button {
  border: none;
  background-color: transparent;
}

.case-paragraph {
  padding: 2.6em;
}


/* ==========================================================================
   Homepage end
   ========================================================================== */


/* ==========================================================================
   About Me
   ========================================================================== */
#about-btns {
  position: sticky;
  top: 2em;
}

.illustration-img {
  max-height: 200px;
  width: 100%;
  margin: 1em 0;
}

.illustration-img-mini {
  max-height: 100px;
  width: 100%;
  margin: 0 0 1.5em .5em;
}

/* ul.aboutlist {
  padding: 0em 1em;
}
ul.aboutlist li {
  list-style-type: circle;
} */

ul {
  padding: 0em 1em;
  display: inline-flex;
}
li {
  list-style-type: none;
  margin: 1em;
  font-weight: 200;
  padding: 1em;
}
li:hover {
  background-color: #333333;
  color: #ffffff;
  border-radius: 50% 20% / 10% 40%;
}

.li-number {
  list-style-type: decimal;
}

/* ==========================================================================
   End About Me
   ========================================================================== */

/* ==========================================================================
   Portfolio Page
   ========================================================================== */
/* .case-header-img,
.case-img {
 width: 50%;
}

.case-header-img-half,
.case-img-half {
 width: 50%;
}

.case-section-title {
  font-family: 'merriweather';
  color: #73707A;
  margin: 2em 0em;
} */


/* ==========================================================================
   End Portfolio Page
   ========================================================================== */

/* ==========================================================================
   Fonts & Backgrounds
   ========================================================================== */
#conclusion {
  background-color: #8757E3;
}
#headerbg-grey {
  background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(235,235,235,0) 100%);
}
#portfolio {
  background: linear-gradient(0deg, rgba(247,247,247,1) 0%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(247,247,247,1);
}

.grey-bg {
  background: linear-gradient(0deg, rgba(247,247,247,1) 0%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(247,247,247,1);
  border-top: 1px solid rgba(247,247,247,1);
}
.bg1 {
  background-color: #F1F0F4;
}
.bg2 {
  background-color: #C1BCCD;
}
.bg3 {
  background-color: #F5FFFB;
}
.bg4 {
  background-color: #F6FAFE;
}
.bg-blue-blob1 {
  background-image: url(../assets/amplify/blob1.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-blue-blob2 {
    background-image: url(../assets/amplify/blob2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

/* ==========================================================================
   End Fonts & Backgrounds
   ========================================================================== */

/* ==========================================================================
   Borders
   ========================================================================== */
.border-all {
    border: 1px solid #F1F0F4;
}
.border-top {
  border-top: 1px solid #F1F0F4;
}
.border-btm {
  border-bottom: 1px solid #F1F0F4;
}
.border-device {
  border: 2em solid #eeeeee;
  border-radius: 16px;
}
.border-device-sm {
  border: .5em solid #eeeeee;
  border-radius: 16px;
}
.border-radius {
  border-radius: 8px;
}
/* ==========================================================================
   End Borders
   ========================================================================== */

.shadow {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */
 @media (max-width: 457px) {
   .intro-header {
     font-size: .87em;
   }
 }

@media (max-width: 600px) {
 /* .navbar .navbar-nav {
   float: none;
   margin-top: 2em;
   margin-bottom: 0px;
   display: inline-flex;
   border-bottom: 1px solid #8757E3;
 } */
   #body-right {
     padding: 1em 1em 0 1em;
   }
   #menu-md {
     display: none;
   }
   #menu-sm {
     display: block;
   }
   .border-device {
     border: 1em solid #eeeeee;
  }
  .case-paragraph {
      padding: 1em 0;
  }
}

@media (min-width: 600px) {
  #menu-sm {
    display: none;
  }
}

@media (max-width: 768px) {
  #img-headshot {
    width: 100%;
  }
  .case-container {
    padding: 1em;
  }
  .case-paragraph {
    padding: 1em;
  }
}

@media (max-width: 991px) {
  .sm-text-center {
    text-align: center;
  }
  #logo-name {
    width: 50%;
  }
  #menu {
    padding: 1em 0;
  }
  #menu button {
    margin: 0 1em;
  }
  .menu-list {
    margin-bottom: 1em;
  }
  .md-hide {
    display: none;
  }
}

@media (min-width: 992px) {
  /* body {
    display: flex;
  } */
  #header {
    position: relative;
  }
  #header-img {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  #menu-md {
    margin-top: 2em;
  }
  .md-text-center {
    text-align: center;
  }
  .md-img{
    max-height: 300px;
    width: auto;
    float: right;
  }
  .cap-blurb {
    margin: 0em 2em;
    padding: 0px 6em;
  }

}

@media (min-width: 992px) and (min-height: 720px) {
  #header-photos {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

@media (min-width: 992px) and (max-width: 1097px) {
  .intro-header {
    font-size: .87em;
  }
}

@media (min-width: 1200px) {

}

@media (min-device-width: 320px) {
  .navbar-brand img {
    max-height: 50px;
  }
}


/* ==========================================================================
   End Media Queries
   ========================================================================== */

/* ==========================================================================
   FOOTER
   ========================================================================== */


/* ==========================================================================
   END FOOTER
   ========================================================================== */