@font-face { font-family: AkzidenzGrotesk; src: url('AkzidenzGrotesk/AkzidenzGrotesk-Regular.otf'); } 
@font-face { font-family: AkzidenzGrotesk ; font-weight: bold; src: url('AkzidenzGrotesk/AkzidenzGrotesk-Bold.otf'); }
@font-face { font-family: AkzidenzGrotesk ; font-weight: italic; src: url('AkzidenzGrotesk/AkzidenzGrotesk-Italic.otf'); }

#fade{
-webkit-animation: fadein 3s; /* Safari and Chrome */
       -moz-animation: fadein 3s; /* Firefox */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera */
            animation: fadein 3s;
}
p {
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
}

.proj{
	left: 58px;
	top: 100px;
	position: absolute;
}

#mycanvas{
	z-index: -1;
	top: 0;
	top: 0;
	position: absolute;
}

#mycanvas2{
	z-index: -1;
	top: 0;
	top: 0;
	position: absolute;
}

#mycanvas3{
	z-index: -1;
	top: 0;
	top: 0;
	position: absolute;
}

.cit1{
	position: absolute;
	width: 300px;
	top: 55px;
	left: 670px;
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	font-style: italic;
	font-size: 12px;
	text-align: justify;
}

.cit2{
	position: absolute;
	width: 250px;
	top: 415px;
	left: 620px;
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	font-style: italic;
	font-size: 12px;
	text-align: justify;
}

.texto1{
	width: 290px;
	position: absolute;
	top: 480px; 
	left: 80px;
	text-align: justify;
}

.middle {
left: 500px;
top: 255px;
position: absolute;
}

.titulo1 {
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	color: black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1,5px;
	float: left;
	margin-right: 20px;
}

.titulo2 {
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	color: black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1,5px;
	float: left;
	margin-right: 20px;
}

.titulo3 {
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	color: black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1,5px;
	float: left;
	margin-right: 20px;

}

.titulo4 {
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	color: lightgray;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1,5px;
	float: left;
	

}

.titulo1:hover {
  background: black;
  color: white;
  cursor: pointer;
}
.titulo2:hover {
  background: black;
  color: white;
  cursor: pointer;
}
.titulo3:hover {
  background: black;
  color: white;
  cursor: pointer;
}

.r1{
	width: 100px;
	height: 100px;
	background: black;
	left: 1000px;
	top: 50px;
	position: absolute;
}

#texto2 {
	width: 300px;
	margin-left: 770px;
	margin-top: 370px;
	position: absolute;
}

#texto3 {
	width: 300px;
	margin-left: 850px;
	margin-top: 490px;
	position: absolute;
}

#texto4 {
	width: 300px;
	margin-left: 480px;
	margin-top: 710px;
	position: absolute;
}

#texto5 {
	width: 300px;
	margin-left: 800px;
	margin-top: 620px;
	position: absolute;
}

#texto6 {
	width: 400px;
	position: absolute;
}

.nomes{
	position: absolute;
	width: 200px;
	top: 510px;
	left: 530px;
	font-family: AkzidenzGrotesk, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-align: right;
}


.r2{
	width: 300px;
	height: 20px;
	background: black;
	left: 550px;
	top: 540px;
	position: absolute;
}

.r3{
	width: 300px;
	height: 1px;
	background: black;
	left: 550px;
	top: 565px;
	position: absolute;
}

.r4{
	width: 350px;
	height: 300px;
	background: black;
	left: 900px;
	top: 300px;
	position: absolute;
}