@font-face {
	font-family: 'Swis721BT-Regular2';
	src: url("../font/Swis721BT-Regular2.eot");
	src: url("../font/Swis721BT-Regular2.eot?#iefix") format("embedded-opentype"),
	url("../font/Swis721BT-Regular2.woff") format("woff"),
	url("../font/Swis721BT-Regular2.ttf") format("truetype"),
	url("../font/Swis721BT-Regular2.svg#kimberley") format("svg");
}

@-webkit-keyframes hvr-buzz {
	50% {
		-webkit-transform: translateX(2px) rotate(2deg);
		transform: translateX(2px) rotate(2deg);
	}
	100% {
		-webkit-transform: translateX(-2px) rotate(-2deg);
		transform: translateX(-2px) rotate(-2deg);
	}
}
@keyframes hvr-buzz {
	50% {
		-webkit-transform: translateX(2px) rotate(2deg);
		transform: translateX(2px) rotate(2deg);
	}
	100% {
		-webkit-transform: translateX(-2px) rotate(-2deg);
		transform: translateX(-2px) rotate(-2deg);
	}
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


video {

  margin-bottom: 12vw;

}
::selection{
color:black;
	background-color: transparent;
}
:root {
  --text-color: #222222;
  --progress-color: #2ecc71;
  --progress-height: 10px;
}

body {
	display: none;
	margin:0;
	padding:0;
font-size: 1vw;
line-height: 1.3vw;
	font-family: 'Swis721BT-Regular2';
	-webkit-font-smoothing: antialiased;

}
* {
	box-sizing: border-box;

}

.fad {
left: 50%;
top:50%;
transform: translate(-50%, -50%);
font-size: 8vw;
  position: fixed;
z-index: 10000;
}

.menu {

  margin-top: 1.3vw;
width: 100%;
border-bottom: 1px solid;
  position: fixed;

}

.year{



}

a{

  color:black;
}
.row{

display: flex;
margin-right: 0px;

}


.menu:hover .code {
opacity: 1;

}
/* Style the navigation menu */
.navbar {

width: 30vw;
display: flex;



flex-direction: column;

}

/* Navigation links */
.navbar a {


transition:0s;
  color: black;
  text-decoration: none;
 background-color: transparent;

}


.navbar a:hover {
line-height: 2vw;
font-size: 1.8vw;
  background-color: #E0DEDE;
}


.navbar a.active {
  color:black;
line-height: 2vw;
font-size: 1.8vw;
  background-color: #E0DEDE;

}
.code{
opacity: 0;
	z-index: 100;
	position: absolute;



bottom:1px;
right: 0;

}

.code a{
  margin-left: 0.1vw;

}


.info:hover {
    background-color: #E0DEDE;
cursor: pointer;
line-height: 2vw;
font-size: 1.8vw;
}
.post-container {

  box-sizing: border-box;
  height: 100vh;
  overflow: scroll;
}
.progress-bar-container a {
  overflow: hidden;

color: white;
text-decoration: none;


}
.me{


}
.me a{
  margin-right: 0.5vw;
}
/* progress bar container */
.progress-bar-container {
  overflow: hidden;
z-index: 100;
color: white;
  position: fixed;
    display: flex;
top: 0;
  left: 0;
  width: 100%;

}

/* progress bar */
.progress-bar-container__progress {
display: flex;
  height: 1.3vw;
  background-color: blue;
  width: 0%;




}
.progress-bar-container__progress2 {
display: flex;
  height: 1.3vw;
  background-color: blue;
  width: 100%;




}
.contact {


}


.credits {
overflow: hidden;
white-space: nowrap;
  width: 100%;
text-overflow: clip;
display: flex;
font-size: 1vw;
line-height: 1.vw;
position: relative;
}

.main-container{
  max-width:50vw;

  margin-left:25vw;
z-index: 10;

  margin-top:0px;}

.menu:hover [hide]{

font-size: 1vw;
line-height: 1.3vw;
}

.content {
left:50%;
  top:50%;
  transform: translate(-50%,-50%);
position: fixed;
  background-color: #E0DEDE;
  width:30vw ;
  display: none;

}
.about {
left:50%;
  top:50%;
  transform: translate(-50%,-50%);
position: fixed;
  background-color: blue;
  width:50vw ;
  display: none;
line-height: 2vw;
font-size: 1.8vw;
color: white;
}

[about]{

  cursor: pointer;
}
.about .fill{
 width: 95%;

}
.content .fill {

   width: 95%;
}

 .close{
  cursor: pointer;
  top:0;
right: 0;
  position: absolute;
line-height:auto;
font-size: 1.8vw;
}
video {
	transition:0.5s;
  width:100%;
  margin-bottom: 12vw;


}
[hor]{

  width:100% ;
  margin-bottom: 12vw;}
[vert]{
	margin-left: 15%;
	width:70% ;
  margin-bottom: 12vw;

}

[hide]{
  font-size: 0px;
  line-height: 0px;
  display: flex;
  transition: 0.3s;
}


[menu]
{
  display: none;
}

/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 800px) {

.code{
display: none;

}

[vert]{
	margin-left: 0%;
	width:100% ;
  margin-bottom: 12vw;

}
.top {

  margin: 0;

  width: 100%;
  background-color: #aaa;

  opacity: 1;

  font-family: 'Swis721BT-Regular2';

bottom: 0px;



}

.title {
  position: absolute;
position:fixed;
bottom: 0px;
z-index: 10000;
}


.me a{
  margin-right: 2vw;
}
.im{

position: relative;
width: 100vw;
height: 100vh;
}

img {
  transform: translate(-50%,-50%);
  left: 50%;
top:50%;
  position: absolute;
  transition:0.5s;


}
.main-container{
  max-width:100vw;

position: inherit;
  margin-left:0vw;
z-index: 10;

  margin-top:0px;}

[menu]
{
  display: flex;
}

[hide]{

display: none;
}
.row{

}

body {
  display: none;
  margin:0;
  padding:0;

  font-family: 'Swis721BT-Regular2';
  -webkit-font-smoothing: antialiased;

}

*{

font-size: 4.2vw;
line-height: 4.8vw;
}
.progress-bar-container__progress {

  height: 5.2vw;
  background-color: blue;



}
.progress-bar-container__progress2 {

  height: 5.2vw;
  background-color: blue;



}
.post-container {

z-index: 10;
}
.credits {

font-size: 4.5vw;
line-height: 4.8vw;
}



.menu {
  margin-top: 5.2vw;
width: 100vw;
border-bottom: 1px solid;
  position: fixed;
  z-index: 100;

}
.year{
  width: 10vw;


}
.info:hover {
    background-color: #E0DEDE;

font-size: 5.4vw;
line-height: 5.6vw;
}

.info {
    background-color: #E0DEDE;
cursor: pointer;
font-size: 5.4vw;
line-height: 5.6vw;
}
.navbar {
width: 100vw;
display: flex;



flex-direction: column;

}



  .navbar a {


transition:0s;
  color: black;
  text-decoration: none;
 background-color: transparent;

}





.navbar a.active {

  color:black;
font-size: 5.4vw;
line-height: 5.6vw;
  background-color: #E0DEDE;

}
.navbar a:hover {
  color:black;
font-size: 5.4vw;
line-height: 5.6vw;
  background-color: #E0DEDE;
}

.about  {
left:50%;
  top:50%;
  transform: translate(-50%,-50%);
position: fixed;
  background-color: blue;
  width:100vw ;
  display: none;
color: white;
z-index: 1001;

}
.about .fill {
  font-size: 5.4vw;
line-height: 5.8vw;

}
.content {
left:0%;
  top:0%;
  bottom:0%;
  transform: translate(0%,0%);
position: fixed;
  background-color: #E0DEDE;
  width:100vw ;
  display: none;
z-index: 1000;
overflow-x: scroll;

}

.close{
  top:0;
right: 0;
  position: absolute;
font-size: 6vw;
line-height: 6vw;
}
}