@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Playfair+Display');

/****************************************************************
 * COLORS
 * 
 * Charcoal - #3B3C3E
 * Gold - #D3BE86
 * Navy - #141B23
 * Linen - #FAF0E6
 ****************************************************************/

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
}

h1 {
  font-family: 'Montserrat', serif;
  color: #D3BE86;
}

h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', serif;
}

h4 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 3.2em;
  }
}

.subtitle {
  color: #737373;
}

.invisible {
  display: none;
}

/****************************************************************
 * Preloader 
 ****************************************************************/
.preloader-background {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #141B23;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.9;
}

.preloader-wrapper.huge {
  width: 96px;
  height: 96px; }

.spinner-gold,
.spinner-gold-only {
  border-color: #C1B283; }

/****************************************************************
 * Navbar 
 ****************************************************************/
 nav {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

nav:focus, div:focus, button:focus {
  outline: none;
}

.nav-wrapper > ul > li > a {
  color: #FAF0E6;
  padding: 15px 15px;
  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

.menu.afterScroll > .nav-wrapper > ul > li > a {
  padding: 0px 12px;
}

nav .brand-logo {
  padding: 15px 35px;
  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

.menu.afterScroll > .nav-wrapper > .brand-logo {
  padding: 0px 35px;
}

.navbar-fixed {
  position: absolute;
}

ul .sidenav {
  font-family: 'Montserrat', sans-serif;
}

nav ul li {
  transition: background-color 0.2s;
}

nav ul li:hover {
  background-color: rgba(255,255,255,0.1);
}

/****************************************************************
 * Scroll 
 ****************************************************************/
@media only screen and (min-width: 993px) {
  .menu.afterScroll {
    background-color: #141B23 !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !important;
  }
}

@media only screen and (max-width: 992px) {
  .menu.afterScroll {
    background: transparent;
  }
}

/****************************************************************
 * Banner
 ****************************************************************/
#banner {
  margin: 0;
}

 #banner-name, #banner-logo {
  z-index: 5;
}

.full-page {
  height: 100vh;
}

.banner-padding {
  padding-top: 25vh;
}

.simple-banner {
  padding-top: 25vh;
  padding-bottom: 10vh;
  background-color: #141B23;
}

@media only screen and (max-width: 992px) {
  .banner-padding {
    padding-top: 15vh;
  }

  .banner-padding-portfolio {
    padding-top: 25vh;
  }  
}

/****************************************************************
 * Image 
 ****************************************************************/
img.circle {
  border-radius: 50%;
}

.icon-link {
  margin: 0.2em;
  color: #141B23;
}

.icon-link:hover{
  color: #3B3C3E;
}

.icon-link-inv {
  margin: 0.2em;
  color: #FAF0E6;
}

.icon-link-inv:hover{
  color: #C1B283;
}

.enlarge {
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.enlarge.fast {
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.enlarge:hover {
  transform: scale(1.05);
}

.parallax-container.thin{
  height: 50vh;
}

.parallax-container.thick{
  height: 75vh;
}

.extra-top-padding{
  padding-top: 15vh;
}

.image-container {
  position: relative;
  -moz-transition: all .5s ease-in;
  -o-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
  cursor: pointer;
}

.image-container:hover {
  opacity: 0.5;
  transform: scale(1.02);
  border: 5px solid #fff;
  outline: 5px double #fff;
  outline-offset: -25px;
  color: none;
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

@media only screen and (max-width: 992px) and (min-width: 601px) {
  .image-text {
    font-size: 1.6em;
  }
}


/****************************************************************
 * Containers 
 ****************************************************************/
.row.vcenter {
  display: flex;
  align-items: center;
}

.row {
  margin-bottom: 0;
}

@media only screen and (max-width: 600px) {
  .row.vcenter {
    display: inline;
  }
}

.section {
  padding: 15vh 12vw;
}

@media only screen and (max-width: 992px) {
  .section {
    padding: 6vh 8vw;
  }
}

.section-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8vh;
}

.section-title {
  border-bottom-style: solid;
  border-width: 5px;
  padding: 12px 36px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
}

.button-row {
  margin: 3vh 0;
}

.button {
  display: inline-block;
  border-style: solid;
  border-width: 4px;
  padding: 5px 15px;
  margin: 3px 10px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.button.light, .section-title.light {
  border-color: #FAF0E6;
  color: #FAF0E6;
}

.button.dark, .section-title.dark {
  border-color: #141B23;
  color: #141B23;
}

.button.light:hover {
  border-color: #859BA6;
  color: #859BA6;
}

.button.dark:hover {
  border-color: #859BA6;
  color: #859BA6;
}

.button.clicked {
  border-color: #D3BE86;
  color: #D3BE86;
}

.section-image {
  width: 600px;
  margin-left: 2vw;
  margin-right: 2vw;
}

.section-content {
  margin-left: 2vw;
  margin-right: 2vw;
  text-align: justify;
}

.justify {
  text-align: justify;
}

.padded {
  padding-left: 3vw !important;
  padding-right: 3vw !important;
}

.padded-left {
  padding-left: 3vw !important;
}

.padded-right {
  padding-right: 3vw !important;
}

/****************************************************************
 * OTHER 
 ****************************************************************/
 .info-table > tbody > tr > td:first-child {
   color: #737373;
 }

 .info-table > tbody > tr > td:first-child + td {
   font-size: 1.2em;
   font-weight: 700;
  }

 #coursework-list {
  margin-top: 20px;
  padding: 0px 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

#coursework-list > .col > h6 {
  padding-bottom: 5px;
  border-bottom: 1px solid #3B3C3E;
}

#coursework-list > .col > ul > li {
  padding: 5px;
  border-bottom: 1px solid #FAF0E6;
  transition: background-color 0.1s ease;
}

#non-technical-list {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.4s ease-out;
}

#non-technical-list > li {
  max-height: calc(1em + 15px);
  overflow: hidden;
}

.footnote {
  font-size: 0.8em;
  color: #737373;
}

.skill-type {
  font-size: 2.4em;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}

@media only screen and (max-width: 992px) {
  .skill-type {
    font-size: 1.6em;
    text-align: center;
    transform: rotate(90deg);
  }

  .skill-type.left {
    transform: rotate(270deg);
  }
}

.skill-type.left {
  text-align: right;
}

.skill-list.left {
  border-right: 8px dotted #3B3C3E;
}

.skill-list.right {
  border-left: 3px solid #3B3C3E;
}

.skill-list > ul {
  margin-top: 0;
  margin-bottom: 0;
}

.skill-list > ul > li {
  margin: 5px 3px;
  padding: 5px 15px;
  background-color: #FAF0E6;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 700;
}

.skill-list.left > ul > li {
  text-align: right;
}

.right-aligned-list > li {
  float: right;
}

#footer {
  border-top: 1px solid #dddddd;
  padding-top: 5vh;
  padding-bottom: 10vh;
}

/****************************************************************
 * PORTFOLIO PAGE 
 ****************************************************************/
.portfolio-title {
  font-family: "Playfair Display", serif;
  margin-top: 0;
}

 nav.portfolio-nav {
  background-color: white;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  box-shadow: none;
  color: #3B3C3E;
}
.portfolio-navitems { text-align: center; }
.portfolio-navitems li {
  display: inline;
  float: none;
  padding-left: 15px;
  padding-right: 15px;
}
.portfolio-navitems li a {
  display: inline-block;
  color: #3B3C3E;
}
.portfolio-navitems li a:hover {
  text-decoration: underline;
}
.portfolio-image {
  margin-bottom: 20px;
}