@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: HeaderFont;
    src:url("../assets/LOVES.ttf");
}

@font-face {
	font-family: MainFont;
    src:url(../assets/GeosansLight.ttf);
}


html, body {
	height: 100%;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment: fixed;
	color:#f1f1f1;
	font-size:18px;
	background-color: #0a0a0a;
	overflow-x: hidden;
	font-family: MainFont;
}

a {color:inherit; text-decoration:none;}

h1{
  font-family: HeaderFont;
  font-size: 2vw;
  font-weight: normal;
}

h2{
  font-family: HeaderFont;
  font-size: 28px;
  font-weight: normal;
}

h3{
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 18px;
	margin: 0px;
	font-weight: normal;
}

.exlink{color:aqua;}

.headmenu{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  font-family: HeaderFont;
  text-shadow: 0px 0px 5px #0a0a0a;
}

.bg {
  background: #000;
  width: 100%;
  height: 100px;
  opacity: 0;
}

.show {
  opacity: 0.4;
}

.transition {    
  -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.headname{
	font-size:38px;
	padding:30px 0px 0px 200px;
	float: left;
}

.headbuttons{
	padding:30px 200px 0px 0px;
	float: right;
}

#myVideo {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
	background-color:#090909;
}

#videoDiv {width: 100%; height: 100%; position: relative; top:0px;}
#video1 { margin: auto; display: block; height: 100%;}

#videoMessage { 
position: absolute; top: 0; left: 0;
display: flex;
flex-direction: column; 
justify-content: center;
align-items: center;
text-shadow: 0px 0px 8px #0a0a0a;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;}

#videoMessage2 { 
position: absolute; bottom: 20px; left: 20px;
display: flex;
flex-direction: column; 
justify-content: right;
align-items: right; 
width: 220px;
height: 60px;
border: 1px solid #fff;
padding: 10px;
margin-left:200px;
font-size: 18px;}

#videoMessage3 { 
position: absolute; bottom: 20px; left:50%; right:50%;
display: flex;
flex-direction: column; 
justify-content: Center;
align-items: Center; 
width: 20px;
height: 20px;
font-size: 18px;}

.portfolio{	
  width: 100%;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

/*<!-asdasd ->*/
.container {
  position: relative;
  width: 100%;
  cursor:pointer;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background: rgba(0, 0, 0, 1);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position:relative;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


#words{
  position: absolute;
  top: -50%; 
  left: 0;
  width:100%;
  height: 123%;
  padding-top: 22%;/* alterar consoante o tamanho da letra */
  background: rgba(0, 0, 0, 0.5);
}

#videoBG {
    position:absolute;
    top: -50%;
    left: 0;
    right: 0;
    bottom: 0;
	z-index: -1;
	width: 100%;
}

/*<!-- asdads -->*/

p{width: 75%}

.vimeo {
  position: fixed;

  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
  cursor: pointer;
}

#content{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height:100%;
  overflow-y: scroll;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

.center{
  position: relative;
  margin: 0;
  width="50%";
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.showvideo{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  top: 1vw;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
}

.infovideo{
	width: 80%;
	padding-bottom: 1vw;
	text-align: left;
	margin-left: auto;
    margin-right:auto;
}

#footer{
	width: 100%;
	padding: 40px;
	text-align: center;
}

#footIcons{
	margin-left: auto;
	margin-right: auto;
	padding: 30px 0px 50px 0px;
	display: inline-block;
}

.circleBase {
	display: inline-block;
	min-width: 20px;
    padding:15px;
	margin: 2px;
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
	background-color:#222;
}