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

.shapes{
	
	padding-top: 200px;
	padding-bottom: 30%;
	
}

.square{
	margin-top: -90px;
	text-align: center;
	z-index:10;
	position:relative;
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	margin-left: 7%;
 
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }  
	
}

.marg{
	margin: 10%;
	margin-top:10px;
}

.marg1{
	margin: 10%;
	margin-top:-60px;
}

.marg2{
	margin: 10%;
	margin-top:-40px;
}
.marg3{
	margin: 8%;
	margin-top:-60px;
}

.marg4{
	margin: 10%;
	margin-top:-50px;
	clear: both;
}


h1{
	
	color: white;
	font-family: "Lexend Giga", sans-serif;
	font-size: 40px;
}

h5{
	color: white;
	font-family: "Lexend Giga", sans-serif;
	line-height: 1.7;
  letter-spacing: 0.3px;
}


/*.decoration{
transition: 0.9s ease;
	overflow: hidden;
	 cursor:grab;
}

.decoration:active{
	cursor: grabbing;
}
.decoration:hover{
transform: scale(1.1);
transition: 0.9s ease;
	
}*/



.image-viewer{
  width: 70%;
  height: 10%;
  overflow: hidden;
  position: relative;
  cursor: grab;
  border-radius: 8px;
}

.image-viewer:active{
  cursor: grabbing;
}

.image-viewer img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transform-origin:center center;
}

.lupa{
	float:right;
	margin-top: -400px;
	margin-right: 90px;
}

#zoomImg1{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin:center center;
  user-select: none;
  pointer-events: none;
}


@media (max-width: 992px){
	
	.marg1{
	margin: 10%;
	margin-top:-70px;
}
	.marg4{
	margin: 10%;
	margin-top:-10px;
}
	
	.lupa{
	float:right;
	margin-top: -350px;
	margin-right: 90px;
}

}

@media (max-width: 768px){
	
	.marg1{
	margin: 10%;
	margin-top:-40px;
}
	.marg3{
		margin-top: 10px;
	}
		.marg4{
	margin: 10%;
	margin-top:-2px;
}
		.lupa{
	float:right;
	margin-top: -250px;
	margin-right: 90px;
}

}

@media (max-width: 576px){
	
	.marg4{
	margin: 10%;
	margin-top:2px;
}
	
	.lupa{
	float:right;
	margin-top: -200px;
	margin-right: 90px;
	}
}


.imgh{
transition: 0.9s ease;	
}

.imgh:hover{
	transform: scale(1.1);
transition: 0.9s ease;
}




.clickZoomImg{
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.clickZoomImg.zoomed{
  transform: scale(1.5); /* how big it zooms */
  cursor: zoom-out;
  position: relative;
  z-index: 10;

}


.zoom-overlay{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.2);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.3s ease;
  z-index:1;
}

.zoom-overlay.active{
  opacity:1;
}