html{
  height: 100%;
  width: 100%;
  font-family:'NeuzeitS';
}
@font-face {
  font-family: NeuzeitS-Book;
  src: url(font/NeuzeitS/NeuzeitS-Book.ttf) format("truetype");
}
@font-face {
  font-family: NeuzeitS-Heavy;
  font-weight: bold;
  src: url(font/NeuzeitS/NeuzeitS-Heavy.ttf) format("truetype");
}
body{
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0px 20px;
  overflow-y: hidden;
  font-family:'NeuzeitS';
}
*{box-sizing: border-box;}
.row{
  width: 3500px;
  height: 100%;
  padding-top:45px;
}
.about_text{
position: fixed;
padding: 70px 30px 30px 30px;
font: normal 13px 'NeuzeitS-Book';
color: #3e62cc;
background-color: #fff;
border-left: 2px solid #3e62cc;
right:0;
top:0;
right: -40%;
height: 100%;
width: 34%;
z-index: 100;
overflow: scroll;
-webkit-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
-moz-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
}

.road_7{
  position: fixed;
  top:0;
  left:0;
  background-color: #fff;
  border-bottom: 2px solid #3e62cc;
  height: 45px;
  width: 100%;
  color: #3e62cc;
  z-index: 110;
  -webkit-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
  -moz-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
  box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
}
.btn_about{
  float:left;
  padding-top:10px;
  padding-left:10px;
  font: normal 18px 'NeuzeitS', sans-serif;
}
.btn_year:hover{
  text-decoration: underline;
  cursor: pointer;
}
.btn_year{
  float:right;
  padding-top:10px;
  padding-right:20px;
  font: normal 18px 'NeuzeitS', sans-serif;
}
.container{
position: relative;
width: 360px;
height: 100%;
float: left;
overflow: hidden;
}
.project{
  display: block;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: scroll;
}

.project_item{
  padding-top: 30px;
  padding-bottom: 50px;

}
.hovered{
  background-color: #3e62cc;
}

.project img{
margin: auto;
display: block;
width: 66%;
cursor: pointer;
}
.name{
position: absolute;
bottom: 0;
height:35px;
width: 100%;
border-top: 2px solid #3e62cc;
padding-top:5px;
background-color: white;
color: #3e62cc;
font: normal 18px 'NeuzeitS', sans-serif;
z-index: 99;
-webkit-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
-moz-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
}



h1{
  width: 100%;
  font-family:'NeuzeitS';
  margin:10px 10px 10px 20px;
}
.item img{
  margin:10px 10px 10px 20px;
  width: 80%;
}



.modal{
	display: block;
  position: fixed;
  top: 5%;
  left: 10%;
  width: 80%;
  height: 90%;
  z-index: 80;
  background: white;
  border: 2px solid #3e62cc;
  -webkit-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
  -moz-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
  box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
}
.content{
  width: 30%;
  height: 100%;
  float: left;
  padding: 20px 30px 20px 20px;
  font: normal 14px 'NeuzeitS', sans-serif;
  overflow: scroll;
  z-index: 90;
}

h4{
    font: bold 16px 'NeuzeitS-Heavy';
    color: #3e62cc;
    margin: auto;
}
h5{
    font: normal 14px 'NeuzeitS', sans-serif;
    color: #3e62cc;
    margin-top: 10px;
    line-height: 17px;
}
h6{
    font: bold 13px 'NeuzeitS-Heavy', sans-serif;
    color: #3e62cc;
    margin: 10px;
}

.content_pict{
  text-align: center;
  float: left;
  width: 70%;
  height: 100%;
  z-index: 90;
  background-color: #3e62cc;
}

.hide{
	display: none;
}


.close{
  background: url(img/cross.png) no-repeat;
  background-size: contain;
  position: absolute;
  top:0;
  right: 0;
  margin: 10px;
  height: 25px;
  width: 25px;
  cursor: pointer;
  z-index: 200px;
}
.overlay{
  position: fixed;
  top:0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 150;
  background: rgba(255,255, 255, 0.8);
}
.go-prev{
  position: absolute;
  	top: 35px;
  	bottom: 0;
  	width: 36%;
    cursor: url(img/arrow2.png)0 100, auto;
}
.go-next
{ position: absolute;
	right: 0;
	top: 35px;
	bottom: 0;
	width: 36%;
  cursor: url(img/arrow1.png)0 100, auto;
}
.scroll-right{
  background: url(img/arrow_next.png) no-repeat;
  background-size: contain;
  height: 70px;
  width: 25px;
  position: fixed;
  right: 10px;
  top:45%;
  cursor: pointer;
}
.short_note{
  position: fixed;
  margin-bottom: 20px;
  bottom: 0;
  left: calc(50% - 125px);
  height: 60px;
  width: 250px;
  color: white;
  background-color: #3e62cc;
  -webkit-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
  -moz-box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
  box-shadow: 4px 4px 23px -1px rgba(0,0,0,0.39);
}
.scroll-left{
  background: url(img/arrow_prev.png) no-repeat;
  background-size: contain;
  height: 70px;
  width: 25px;
  position: fixed;
  left:10px;
  top: 45%;
  cursor: pointer;
}
.preload{
  position: fixed;
  top: 45%;
  left: 60%;
  height: 50px;
  width: 50px;
  background: url(img/image.gif) no-repeat;
  background-size: contain;
  z-index: 300;
}