@font-face {
    font-family: napo;
    src: url(../fonts/Napo-Regular_TRIAL.ttf);
  }

  @font-face {
    font-family: steelfish;
    src: url(../fonts/steelfish\ rg.otf);
  }
  @font-face {
    font-family: steelfish2;
    src: url(../fonts/steelfish\ bd.otf);
  }
  @font-face {
    font-family: steelfish3;
    src: url(../fonts/steelfish\ eb.otf);
  }

	html,body{
		height:100%;
		overflow:hidden;
		position:relative;
		background:rgba(252,237,214,1);
	}

.d1{
	position:absolute;
	left:0;
	bottom:0;
	width:400px;
	z-index:1;

}

.d2{
	position:absolute;
	right:0;
	top:0;
	width:300px;
	z-index:1;
}

.rels{
	position:relative;
	overflow:hidden;
	max-height:100vh;
}
.rels:after{
	content:'';
	height:100%;
	width:100%;
	left:0;
	top:0;
	position:absolute;
	background:rgba(252,237,214,0.8);
	transition: all 0.3s ease;

}

.rels:hover:after{
	background:rgba(252,237,214,0.4);
}



.imgs{
	min-height:100vh;
	width:100%;
	transition: all 0.3s ease;
}
.rels:hover .imgs{
	
	  transform: scale(1.2);

}
.text{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	width:300px;
	z-index:1;
}
.logo{
	position:absolute;
		left:50%;
		top:5%;
		transform: translate(-50%, 0);
		z-index:1;
		width:260px;
}
.mttt{
    margin-top:35px;
}
@media only screen and (max-width: 600px) {
 .d1, .d2{
	 display:none;
 }
 .mttt{
    margin-top:0;
}

 .rels, .imgs{
		height:50svh;
		min-height:auto;
 }	
 .text{
	width:190px;
 }
 
 .logo{
	
		left:50%;
		top:50%;
		transform: translate(-50%, -50%);
	
		width:150px;
}


}