@font-face {
  font-family: "GothamBook";
  src: url("../fonts/Gotham-Book.woff") format("woff"), url("../fonts/Gotham-Book.ttf") format("truetype");
}

@font-face {
  font-family: NotoSerif;
  src: url("../fonts/NotoSerif-Regular.woff") format("woff"), url("../fonts/NotoSerif-Regular.ttf") format("truetype");
}

@font-face {
  font-family: DosisMedium;
  src: url("../fonts/Dosis-Medium.woff") format("woff"), url("../fonts/Dosis-Medium.ttf") format("truetype");
}

@font-face {
  font-family: Sriracha;
  src: url("../fonts/Sriracha-Regular.woff") format("woff"), url("../fonts/Sriracha-Regular.ttf") format("truetype");
}

@font-face {
  font-family: pixolde;
  src: url("../fonts/pixolde.woff") format("woff"), url("../fonts/pixolde.ttf") format("truetype");
}

@font-face {
  font-family: KozGoPr6N;
  src: url("../fonts/KozukaGothicPr6N/KozGoPr6N-Regular.otf") format("opentype"), url("../fonts/Roboto-Regular.ttf") format("truetype");
}

/* === MEDIA QUERIES === */
html,
body {
  height: 100%;
}

body {
  font-family: pixolde;
  color: #828282;
  background-color: #293237;
  -webkit-transition: background 0.5s ease;
  -moz-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  transition: background 0.5s ease;
  line-height: 1.2em;
  /*font-size:4vh;
	
	@include tablet {
		font-size: 25px;
	}
	@include phone {
		font-size: 20px;
	}*/
}

a:hover,
a:focus {
  text-decoration: none;
}

#app {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#app .top-content {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

nav#main-navbar {
  font-family: KozGoPr6N;
  font-weight: 900;
  padding-top: 25px;
  margin-bottom: 0;
  font-size: 18px;
  /*.navbar-brand {
		padding-left: 120px;

		@include tablet {
			padding-left: 100px;
		}
		@include phone {
			padding-left: 80px;
		}

		a {
			position: absolute;
			left: 90px;

			@include tablet {
				left: 75px;
			}
			@include phone {
				left: 60px;
			}
		}
	}*/
  /*.navbar-right{
		padding-right:90px;

		@include desktop {
			padding-right:70px;
		}

		@include desktop {
			padding-right:0px;
			margin-right: 21px;
			margin-left: 21px;
		}
	}*/
}

nav#main-navbar .navbar-brand {
  padding-left: 0;
}

nav#main-navbar .navbar-right {
  padding-right: 0;
}

nav#main-navbar .navbar-toggle .icon-bar {
  background-color: #828282;
}

nav#main-navbar li a::after {
  content: '|';
  color: #828282;
  right: -3px;
  position: absolute;
}

nav#main-navbar li a:hover, nav#main-navbar li a:focus {
  color: white;
  background-color: transparent;
}

@media only screen and (max-width: 768px) {
  nav#main-navbar li a {
    background-color: rgba(0, 0, 0, 0.3);
  }
  nav#main-navbar li a::after {
    content: none;
  }
  nav#main-navbar li a:hover, nav#main-navbar li a:focus {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

@media only screen and (max-width: 480px) {
  nav#main-navbar li a::after {
    content: none;
  }
  nav#main-navbar li a:hover, nav#main-navbar li a:focus {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

nav#main-navbar li:last-child a::after {
  content: none;
}

nav#main-navbar.hidden {
  display: none;
}

.link.backgroundAnimated {
  background-color: transparent !important;
}

.link {
  cursor: pointer;
  transition: background-color .5s ease;
}

.link:hover {
  color: white !important;
}

.link.black {
  color: #00f6ff;
}

.link.yellow {
  color: #f6ff00;
}

.link.green {
  color: #00ffba;
}

.link.black.background {
  background-color: transparent !important;
}

.link.yellow.background {
  background-color: transparent !important;
}

.link.green.background {
  background-color: transparent !important;
}

.videoContainer {
  display: none;
  position: absolute;
  z-index: -999;
  height: 100%;
  width: 100%;
}

.videoContainer .overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: #252625;
  opacity: 0.8;
}

.videoContainer #bgvid {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(../assets/images/video-poster.png) no-repeat;
  background-size: cover;
  /*-webkit-filter: brightness(20%);
		-moz-filter: brightness(20%);
		-ms-filter: brightness(20%);
		-o-filter: brightness(20%);
		filter: brightness(20%);*/
}

#content {
  /*position: relative;
	height: $container-height;*/
  /*@-moz-keyframes blink {
		0% { opacity: 0; }
		40% { opacity: 0; }
		50% { opacity: 1; }
		90% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-webkit-keyframes blink {
		0% { opacity: 0; }
		40% { opacity: 0; }
		50% { opacity: 1; }
		90% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-ms-keyframes blink {
		0% { opacity: 0; }
		40% { opacity: 0; }
		50% { opacity: 1; }
		90% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-o-keyframes blink {
		0% { opacity: 0; }
		40% { opacity: 0; }
		50% { opacity: 1; }
		90% { opacity: 1; }
		100% { opacity: 0; }
	}*/
}

#content .content-wrapper {
  display: flex;
  margin-bottom: 4em;
  margin-top: 4em;
  margin-left: 3em;
  /*margin-bottom: 120px;
    	margin-top: 120px;
		margin-left: 120px;

		@include tablet {
			margin-bottom: 100px;
    		margin-top: 100px;
			margin-left: 100px;
		}
		@include phone {
			margin-bottom: 80px;
    		margin-top: 80px;
			margin-left: 80px;
		}*/
}

#content .arrow-right {
  /*position: relative;
		width: 0;
		height: 0;
		bottom: 16px;*/
  border-style: solid;
  border-width: .3em 0 .3em .5em;
  border-color: transparent transparent transparent #ffffff;
  align-self: flex-end;
  margin-bottom: .35em;
}

#content .arrow-right.black {
  border-color: transparent transparent transparent #00f6ff;
}

#content .arrow-right.yellow {
  border-color: transparent transparent transparent #f6ff00;
}

#content .arrow-right.green {
  border-color: transparent transparent transparent #00ffba;
}

#content .cursor {
  width: .7em;
  height: .15em;
  background: #ffffff;
  display: inline-block;
  margin-left: .5em;
  margin-bottom: -.15em;
  /*-webkit-animation: blink 1s infinite;
		-moz-animation: blink 1s infinite;
		-ms-animation: blink 1s infinite;
		-o-animation: blink 1s infinite;*/
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#content .cursor.black {
  background: #00f6ff;
}

#content .cursor.yellow {
  background: #f6ff00;
}

#content .cursor.green {
  background: #00ffba;
}

#content .content {
  margin-left: .5em;
}

#content .content .typed {
  background-color: #fff;
  color: #fff;
  letter-spacing: -3px;
}

#content .content .typed.transparent {
  background-color: transparent;
  color: #ffffff;
}

#content .content .typed.black {
  background-color: #00f6ff;
  color: #00f6ff;
}

#content .content .typed.yellow {
  background-color: #f6ff00;
  color: #f6ff00;
}

#content .content .typed.green {
  background-color: #00ffba;
  color: #00ffba;
}

#content .content .color-menu,
#content .content .fonts-menu {
  display: none;
  letter-spacing: -1px;
}

#content .content .color-menu ul,
#content .content .fonts-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#content .content .color-menu ul li a,
#content .content .fonts-menu ul li a {
  text-decoration: none;
  color: #828282;
}

#content .content .color-menu .x,
#content .content .fonts-menu .x {
  color: white;
}

#content .content .color-menu .options,
#content .content .fonts-menu .options {
  cursor: pointer;
}

#content .content .color-menu .options .x,
#content .content .fonts-menu .options .x {
  visibility: hidden;
}

#content .content .color-menu .options:hover .x,
#content .content .color-menu .options.active .x,
#content .content .fonts-menu .options:hover .x,
#content .content .fonts-menu .options.active .x {
  visibility: visible;
}

#content .content .color-menu .options .empty,
#content .content .fonts-menu .options .empty {
  color: #293237;
}

#content .content .initialize {
  display: none;
}

#content .content #introduction {
  display: none;
}

#content .content #introduction p {
  margin: 1em 0 0 0;
}

#content .content #introduction p:first-child {
  margin: 0;
}

#content .content #introduction.serif {
  font-family: NotoSerif;
}

#content .content #introduction.sans-serif {
  font-family: DosisMedium;
}

#content .content #introduction.handwritten {
  font-family: Sriracha;
}

#content .content .black .empty {
  color: #14161c;
}

#content .content .mellow-yellow .empty {
  color: #2d2d2d;
}

#content .content .big-green-country .empty {
  color: #25272b;
}

#content .content p {
  margin: 0;
}