@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


*{-webkit-transition: all 0.4s ease-out!important;-moz-transition:  all 0.4s ease-out!important;-ms-transition: all 0.4s ease-out!important;-o-transition:  all 0.4s ease-out!important;
transition: all 0.4s ease-out!important;}

/* MANSONRY */

.gal
{
	margin-top:3rem;
	-webkit-column-count: 4;
	/* Chrome, Safari, Opera */
	-moz-column-count: 4;
	/* Firefox */
	column-count: 4;
}

.gal img
{
	height:auto;
}

@media (max-width: 769px)
{
	.gal
	{
		-webkit-column-count: 1;
		/* Chrome, Safari, Opera */
		-moz-column-count: 1;
		/* Firefox */
		column-count: 1;
	}
}

/* DESIGN */
html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
   font-family: "Roboto Condensed", serif;
	font-size:18px;
	color:white;
}

.overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: -2;
	mix-blend-mode: hard-light;
}

.bg
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -3;
	background-image:url(foto/ocean/foto_26.webp);
	background-repeat:no-repeat;
	background-size: cover;
	
}

h2
{
	  font-family: "Roboto Condensed", serif;
	font-size:2.6rem;
}

.gal-h-title
{
	text-align:center;
}

.gal img , .img-hover-zoom
{
	border-radius: 25px;
}

.nav-gallery .nav-link
{
	color:white;
	padding:10px 20px;
	text-transform:uppercase;
}

.nav-gallery .nav-link.active, 
.nav-gallery .show > .nav-link, 
.nav-gallery .nav-link.active:hover {
    background: #FF8C00; /* Hauptorange */
    background: linear-gradient(135deg, #FF6A00, #FFA500);
    border-radius: 100px;
}

.nav-gallery .nav-link:hover {
    background: #FF8C00;
    background: linear-gradient(135deg, #FF6A008C, #FFA5006E);
    border-radius: 100px;
}



/* ZOOM IN EFFECT */
/* The tutorial I used : https://w3bits.com/css-image-hover-zoom/ */
/* [1] The container */
.img-hover-zoom
{
  padding:10px 0;
	overflow: hidden;
	/* [1.2] Hide the overflowing of child elements */
}

/* Transition property for smooth transformation of images */
.img-hover-zoom img
{
	transition: transform .5s ease;
}

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img
{
	transition: transform .5s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img
{
	transform: scale(1.6) rotate(25deg);
}