/* ### COLOURS ###
 _______  _______  _        _______           _______  _______
(  ____ \(  ___  )( \      (  ___  )|\     /|(  ____ )(  ____ \
| (    \/| (   ) || (      | (   ) || )   ( || (    )|| (    \/
| |      | |   | || |      | |   | || |   | || (____)|| (_____
| |      | |   | || |      | |   | || |   | ||     __)(_____  )
| |      | |   | || |      | |   | || |   | || (\ (         ) |
| (____/\| (___) || (____/\| (___) || (___) || ) \ \__/\____) |
(_______/(_______)(_______/(_______)(_______)|/   \__/\_______)

*/
/* ### CORE
 _______  _______  _______  _______
(  ____ \(  ___  )(  ____ )(  ____ \
| (    \/| (   ) || (    )|| (    \/
| |      | |   | || (____)|| (__
| |      | |   | ||     __)|  __)
| |      | |   | || (\ (   | (
| (____/\| (___) || ) \ \__| (____/\
(_______/(_______)|/   \__/(_______/

 */
@import url("https://fonts.googleapis.com/css?family=Titillium+Web&display=swap");
* {
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  color: white;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
}

html,
body {
  background-color: #02050c;
}

.centered {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.centered > * {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

img {
  max-width: 100%;
}

/* ### Background Squares and Loading

 ___ ___                _                     _ _
|  _|_  |       ___    | |                   | (_)
| |   | |___   ( _ )   | |     ___   __ _  __| |_ _ __   __ _
| |   | / __|  / _ \/\ | |    / _ \ / _` |/ _` | | '_ \ / _` |
| |   | \__ \ | (_>  < | |___| (_) | (_| | (_| | | | | | (_| |
| |_ _| |___/  \___/\/ \_____/\___/ \__,_|\__,_|_|_| |_|\__, |
|___|___|                                                __/ |
                                                        |___/
*/
#backingAnimationContainer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-size: 0;
}
#backingAnimationContainer .backSquareContainer {
  position: relative;
  display: inline-block;
  width: 7.6923076923vw;
  height: 7.6923076923vh;
  font-size: 0;
}
#backingAnimationContainer .backSquareContainer .backSquare {
  position: relative;
  display: inline-block;
  background-color: #000;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 1000;
}

#loading {
  z-index: 1001;
  font-size: 40px;
  color: #FFF;
  animation: glitchText 20s forwards infinite;
}

@keyframes glitchText {
  0% {
    text-shadow: 1px -2px #1046A9;
  }
  1% {
    text-shadow: 0 0 #1046A9;
  }
  23.5% {
    text-shadow: 0 0 #FEA500;
  }
  24% {
    text-shadow: -10px 7px #FEA500;
  }
  24.2% {
    text-shadow: -10px 7px #FEA500;
  }
  24.3% {
    text-shadow: 14px 0 #FEA500;
  }
  24.7% {
    text-shadow: 14px 0 #FEA500;
  }
  24.8% {
    text-shadow: 0 0 #FEA500;
  }
  49.5% {
    text-shadow: 0 0 #FEA500;
  }
  50% {
    text-shadow: -5px -6px #1046A9;
  }
  50.2% {
    text-shadow: -5px -6px #1046A9;
  }
  50.3% {
    text-shadow: 3px -1px #1046A9;
  }
  50.7% {
    text-shadow: 3px -1px #1046A9;
  }
  50.8% {
    text-shadow: 0 0 #FEA500;
  }
  74.5% {
    text-shadow: 0 0 #FEA500;
  }
  75% {
    text-shadow: -80px 20px #FEA500;
  }
  75.2% {
    text-shadow: -80px 20px #FEA500;
  }
  75.3% {
    text-shadow: 30px -20px #FEA500;
  }
  75.7% {
    text-shadow: 30px -20px #FEA500;
  }
  75.8% {
    text-shadow: 0 0 #FEA500;
  }
}
/* ### SIDEBAR
 _____ _     _      _
/  ___(_)   | |    | |
\ `--. _  __| | ___| |__   __ _ _ __
 `--. \ |/ _` |/ _ \ '_ \ / _` | '__|
/\__/ / | (_| |  __/ |_) | (_| | |
\____/|_|\__,_|\___|_.__/ \__,_|_|

 */
.sidebar {
  height: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
}

.sidebar-item {
  margin: 5vh 1vw;
  color: #FFF;
  font-size: 36.8px;
  transition: 0.3s;
  position: relative;
  text-decoration: none;
}
.sidebar-item:hover {
  color: #FEA500;
  text-decoration: none;
}
.sidebar-item:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.sidebar-item:before {
  content: "";
  position: absolute;
  width: 3px;
  height: 105%;
  top: -5px;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.vertical-text {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
}

/* ### FOOTER
______          _
|  ___|        | |
| |_ ___   ___ | |_ ___ _ __
|  _/ _ \ / _ \| __/ _ \ '__|
| || (_) | (_) | ||  __/ |
\_| \___/ \___/ \__\___|_|

 */
.bottom-right-socials {
  bottom: 0;
  z-index: 4;
  text-align: right;
}
.bottom-right-socials .socials-link {
  font-size: 19.2px;
  margin-left: 15px;
  color: #FFF;
  opacity: 0.5;
}
.bottom-right-socials .socials-link:hover {
  opacity: 1;
}

.footer {
  color: #FFF;
  padding-left: 1vw;
  position: fixed;
  bottom: 0.2vh;
  left: 0;
  width: 100%;
  z-index: 5;
}
.footer .copyright {
  margin-bottom: 0;
  margin-left: 10px;
  opacity: 0.2;
}

/* ### HOME / HERO
 _   _                            __  _   _
| | | |                          / / | | | |
| |_| | ___  _ __ ___   ___     / /  | |_| | ___ _ __ ___
|  _  |/ _ \| '_ ` _ \ / _ \   / /   |  _  |/ _ \ '__/ _ \
| | | | (_) | | | | | |  __/  / /    | | | |  __/ | | (_) |
\_| |_/\___/|_| |_| |_|\___| /_/     \_| |_/\___|_|  \___/

 */
.vignette {
  background-image: radial-gradient(transparent, black);
  z-index: 1;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.full-view {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 50px 0 black;
}

.video-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-attachment: fixed;
  background-position: bottom;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.video-container video {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  min-width: 100%;
}

.centerbutton {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.centerbutton div {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  vertical-align: center;
}
.centerbutton div button, .centerbutton div a {
  padding: 5px 20px;
  border: 5px double #FFF;
  color: #FFF;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 19.2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.centerbutton div button:not([disabled]), .centerbutton div a:not([disabled]) {
  cursor: pointer;
}
.centerbutton div button:focus, .centerbutton div a:focus {
  outline: none;
}

.navbar-main {
  width: 100%;
  position: absolute;
  z-index: 997;
}

.navbar-brand {
  font-size: 44.8px;
  color: #FFF;
  margin: 0;
}
.navbar-brand a {
  font-size: inherit;
  color: #FFF;
  text-decoration: none;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  transition: 0.2s;
}

/* ### OVERLAYS
 _______           _______  _______  _        _______           _______
(  ___  )|\     /|(  ____ \(  ____ )( \      (  ___  )|\     /|(  ____ \
| (   ) || )   ( || (    \/| (    )|| (      | (   ) |( \   / )| (    \/
| |   | || |   | || (__    | (____)|| |      | (___) | \ (_) / | (_____
| |   | |( (   ) )|  __)   |     __)| |      |  ___  |  \   /  (_____  )
| |   | | \ \_/ / | (      | (\ (   | |      | (   ) |   ) (         ) |
| (___) |  \   /  | (____/\| ) \ \__| (____/\| )   ( |   | |   /\____) |
(_______)   \_/   (_______/|/   \__/(_______/|/     \|   \_/   \_______)

 */
.overlay-screen {
  background-color: transparent;
  position: absolute;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  padding-left: calc(36.8px + 1vw + 1vw);
  padding-top: calc(44.8px + 8px + 5px + 1.5vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2vw;
}

.o-0 {
  opacity: 0;
}

.closeButton {
  position: fixed;
  z-index: 998;
  padding: 0 calc(2vw + 15px ) 0 0;
  right: 0;
  top: 1vh;
  height: calc(44.8px + 8px + 5px + 1.5vh);
  font-size: 32px;
  background: transparent;
  color: white;
  border: none;
}
.closeButton:focus {
  border: none;
  box-shadow: none;
}

/* ### Colours & Text
 _____       _                                 _____         _
/  __ \     | |                        ___    |_   _|       | |
| /  \/ ___ | | ___  _   _ _ __ ___   ( _ )     | | _____  _| |_
| |    / _ \| |/ _ \| | | | '__/ __|  / _ \/\   | |/ _ \ \/ / __|
| \__/\ (_) | | (_) | |_| | |  \__ \ | (_>  <   | |  __/>  <| |_
 \____/\___/|_|\___/ \__,_|_|  |___/  \___/\/   \_/\___/_/\_\\__|

 */
.color-primary {
  color: #FEA500 !important;
}

.highlight {
  position: relative;
  display: inline;
}
.highlight::after {
  content: "";
  width: 100%;
  height: 3px;
  bottom: 18px;
  left: 0;
  background: #FEA500;
  position: absolute;
}

.fs-inherit {
  font-size: inherit;
}

.home-divider {
  width: 100%;
  height: 5px;
  background-color: #FEA500;
}

.text-large-underlined {
  font-size: 4rem;
  margin-bottom: 20px;
}
.text-large-underlined::after {
  content: "";
  left: 20%;
  right: 20%;
  background: #FEA500;
  height: 2px;
  position: absolute;
  bottom: 9px;
}

.aspect-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.aspect-16-9 > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.full-overlay-height {
  max-width: 100%;
  height: calc(100vh - (44.8px + 8px + 5px + 1.5vh));
}

/* ### ABOUT PAGE
  ___  _                 _
 / _ \| |               | |
/ /_\ \ |__   ___  _   _| |_
|  _  | '_ \ / _ \| | | | __|
| | | | |_) | (_) | |_| | |_
\_| |_/_.__/ \___/ \__,_|\__|

 */
/*
  Bar List
 */
.bar {
  list-style: none;
}
.bar > li {
  position: relative;
  font-size: 48px;
  color: #FFF;
  padding: 5vh 15px 0;
}
.bar > li::before {
  content: "";
  border-radius: 50%;
  border: 20px solid #FFC353;
  position: absolute;
  margin-left: -44px;
  top: 50%;
  transform: translate(0, -50%);
}
.bar > li::after {
  position: absolute;
  left: -13px;
  top: 0;
  content: "";
  border-left: 8px solid #FFC353;
  height: 100%;
}
.bar > li:first-of-type::after {
  top: 50%;
  bottom: 0;
}
.bar > li:last-of-type {
  margin: 0;
}
.bar > li:last-of-type::after {
  height: 50%;
}

.bar-title {
  font-size: 2.6vh;
}

.bar-text {
  font-size: 3.4vh;
  margin-bottom: 0;
}

.portrait-title {
  color: #FFF;
  font-size: 80px;
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1.2;
}

.self-portrait {
  height: 100%;
  max-width: 100%;
}

/* ### PROJECTS PAGE
______          _           _
| ___ \        (_)         | |
| |_/ / __ ___  _  ___  ___| |_ ___
|  __/ '__/ _ \| |/ _ \/ __| __/ __|
| |  | | | (_) | |  __/ (__| |_\__ \
\_|  |_|  \___/| |\___|\___|\__|___/
              _/ |
             |__/
 */
/*
Thumbnails for Projects
 */
.project-thumbnail {
  color: #FFF;
  text-decoration: none;
}
.project-thumbnail .thumbnail-container {
  position: relative;
}
.project-thumbnail .thumbnail-container .thumbnail-back {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  transition: 1s;
  transform: translate(0, -50%);
}
.project-thumbnail .thumbnail-container .thumbnail-back:hover {
  height: 100%;
}
.project-thumbnail .thumbnail-container .thumbnail-back > .thumbnail-text {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  height: 300px;
  transform: translate(0, -50%);
  opacity: 0;
  transition: 1s;
}
.project-thumbnail .thumbnail-container .thumbnail-back > .thumbnail-text:hover {
  opacity: 1;
}
.project-thumbnail .thumbnail-container .thumbnail-back > .thumbnail-text > div {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
  padding: 25px;
}
.project-thumbnail .thumbnail-container .thumbnail-back > .thumbnail-text > div > h3 {
  margin-bottom: 15px;
}
.project-thumbnail .thumbnail-container .thumbnail-back > .thumbnail-text > div > p {
  margin-bottom: 0;
}
.project-thumbnail .thumbnail-container .thumbnail-front > img {
  width: 100%;
  background-color: #FEA500;
  height: 300px;
  object-fit: cover;
}
.project-thumbnail .thumbnail-container .thumbnail-front > .thumbnail-front-overlay {
  overflow: hidden;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.project-thumbnail .thumbnail-container .thumbnail-front > .thumbnail-front-overlay .thumbnail-date {
  font-size: 12px;
  padding: 4px 10px 2px;
  margin: 7px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.9);
  vertical-align: middle;
}

.tags {
  display: flex;
  padding: 2px;
  margin: 5px;
}
.tags .tag {
  white-space: nowrap;
  padding: 0 10px 2px;
  border-radius: 15px;
  margin-right: 5px;
}
.tags .tag > img {
  width: 16px;
  height: 20px;
  padding: 2px 1px;
}
.tags .tag > p {
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  margin: 0 0 0 2px;
}

/* ### CAROUSELS
 _____                                _
/  __ \                              | |
| /  \/ __ _ _ __ ___  _   _ ___  ___| |___
| |    / _` | '__/ _ \| | | / __|/ _ \ / __|
| \__/\ (_| | | | (_) | |_| \__ \  __/ \__ \
 \____/\__,_|_|  \___/ \__,_|___/\___|_|___/

 */
.carousel-inner {
  height: 100%;
  overflow: auto;
}

.carousel-item {
  height: 100%;
}

/*
Flip animation for project thumbnails
 */
.card-animate {
  width: 100px;
  height: 100px;
}
.card-animate .card-animate-container {
  width: 100%;
  height: 100%;
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
}
.card-animate .card-animate-container:hover {
  transform: rotateX(180deg);
}
.card-animate .card-animate-container > div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.card-animate .card-animate-container .card-front {
  background: red;
}
.card-animate .card-animate-container .card-back {
  background: blue;
  transform: rotateX(180deg);
}

/* ### MEDIA QUERIES
        ___  ___         _ _             _____                 _
   ____ |  \/  |        | (_)           |  _  |               (_)
  / __ \| .  . | ___  __| |_  __ _      | | | |_   _  ___ _ __ _  ___  ___
 / / _` | |\/| |/ _ \/ _` | |/ _` |     | | | | | | |/ _ \ '__| |/ _ \/ __|
| | (_| | |  | |  __/ (_| | | (_| |     \ \/' / |_| |  __/ |  | |  __/\__ \
 \ \__,_\_|  |_/\___|\__,_|_|\__,_|      \_/\_\\__,_|\___|_|  |_|\___||___/
  \____/

 */
@media (max-width: 991px) {
  .portrait-title {
    font-size: 16vw;
  }
}
@media (max-width: 439px) {
  .bar > li::before {
    border: 15px solid #FFC353;
    margin-left: -44px;
  }

  .bar > li::after {
    border-left: 7px solid #FFC353;
    left: -18px;
  }

  .bar-title {
    font-size: 2.2vh;
  }

  .bar-text {
    font-size: 2.8vh;
  }
}
@media (max-width: 380px) {
  .bar > li::before {
    border: 12px solid #FFC353;
    margin-left: -44px;
  }

  .bar > li::after {
    border-left: 6px solid #FFC353;
    left: -20px;
  }

  .bar-title {
    font-size: 1.8vh;
  }

  .bar-text {
    font-size: 2.4vh;
  }
}
/* ### BROWSER SPECIFIC FIXES
______                                  ______     _       _
| ___ \                                 | ___ \   | |     | |
| |_/ /_ __ _____      _____  ___ _ __  | |_/ /_ _| |_ ___| |__   ___  ___
| ___ \ '__/ _ \ \ /\ / / __|/ _ \ '__| |  __/ _` | __/ __| '_ \ / _ \/ __|
| |_/ / | | (_) \ V  V /\__ \  __/ |    | | | (_| | || (__| | | |  __/\__ \
\____/|_|  \___/ \_/\_/ |___/\___|_|    \_|  \__,_|\__\___|_| |_|\___||___/

 */
/* Browser Fixes */
button::-moz-focus-inner, a::-moz-focus-inner {
  border: 0;
}
button:focus, a:focus {
  outline: none !important;
}

/*# sourceMappingURL=custom.css.map */