/*

Stylesheet for ezgal

*/

/* General */

* {
  box-sizing: border-box;
}

/* Fontydonty */

@font-face {
  font-family: Montserrat;
  src: url(../webfonts/Montserrat-Regular.ttf);
  font-weight: regular;
}

@font-face {
  font-family: Montserrat;
  src: url(../webfonts/Montserrat-Medium.ttf);
  font-weight: bold;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #4A4A4A;
}

h1,h2,h3,h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

a {
	text-decoration: none;
	transition: 0.3s;
}

/* Footer-Navbar */

#footer-container {
	position: fixed;
	bottom: -80px;
	width: 100%;
	height: 65px;
	transition: .3s ease all;
	display: flex;
    justify-content: center;
	z-index: 5;
}

#footer-navbar {
	height: 50px;
	background-color: #ffffff;
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 10px;
	border-radius: 8px;
	transition: .3s ease all;
}

#footer-navbar .fas, #footer-navbar .far {
	font-size: 23px;
	padding: 0 15px;
}

#footer-navbar .fas:hover, #footer-navbar .far:hover {
	color: #0C9;
	transition: .3s ease all;
}

#footer-navbar .fas:focus, #footer-navbar .far:focus {
	outline: none;
	color: #4A4A4A;
}

/* Image-Grid */

#gallery {
}

.gallerygroup3 {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.mediawrapper {
	display: table-cell;
	z-index: 1;
}

#gallery img {
	display: block;
    width: 100%;
    height: auto;
	padding: 1px;
}

#gallery video {
    display: block;
    width: 100%;
    height: auto;
	padding: 1px;
}

.monthsdivider {
    padding: 10px;
    margin: 2px 10px;
    max-width: max-content;
    font-weight: bold;
}

/* Filter overlay */

.gallery-filter {
	outline: none;
	cursor: pointer;
	color: #0C9;
	text-decoration: none;
	margin: 5px 10px;
	padding: 10px;
	background: none;
	transition: .3s ease all;
	border: 2px solid #0C9;
	border-radius: 6px;
	font-weight: 900;
	line-height: 1.2;
}

.gallery-filter:hover {
	color: #2c3739;
	background-color: #ebeded;
}

.gallery-filter.active-filter {
	background-color: #ebeded;
	border: 2px solid #0C9;
}

select {
    outline: none;
    cursor: pointer;
    color: #0C9;
    text-decoration: none;
    margin: 5px 10px;
    padding: 9px 6px;
    background: none;
    transition: .3s ease all;
    border: 2px solid #0C9;
    border-radius: 6px;
    font-weight: 900;
    line-height: 1.2;
}

/* Overlay */

.overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,1);
	z-index: 10;
}

.overlay-content {
	position: relative;
	top: 0;
	width: 100%;
	text-align: center;
	margin-top: 30px;
}

.overlay-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
	border-top-left-radius: 8px;
    padding: 0px;
    z-index: 21;
    background-color: rgba(0,0,0,.5);
	transition: .3s ease all;
}

.overlaybtn {
	color: #ffffff;
    font-size: 23px;
    bottom: 15px;
    right: 35px;
	z-index: 21;
}

.overlaybtn .fas, .overlaybtn .far {
	padding: 15px 20px 13px;
}

.overlaybtn .fas:hover, .overlaybtn .far:hover {
  color: #0C9;
  transition: .3s ease all;
}

.overlaybtn .fas:focus, .overlaybtn .far:focus {
	outline: none;
	color: #4A4A4A;
}

.overlay img {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    overflow: auto;
}

.overlay video {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    overflow: auto;
}

.overlay-table {
	max-width: 90%;
	margin: auto;
	border-collapse: collapse;
	word-break: break-all;
}

.overlay-table td {
    text-align: left;
    padding: 15px 10px;
	word-break: keep-all;
	line-height: 19px;
}

.overlay-table .fas, .overlay-table .far {
	font-size: 25px;
}

/* General Overlay for options, filters etc. */

.overlay-general {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #ffffff;
	z-index: 20;
	transition: .3s ease all;
}

/* General map styling */

.map {
	height: 400px;
	width: 100%;
	margin-top: 19px;
}


/*----------------------------------------*/
/* Responsive
/* Yes, everything wider than 720px is considered desktop
/*----------------------------------------*/

@media screen and (min-width: 720px) {
	
	.overlay-buttons a {
	}
	
	.overlay .closebtn, .overlay-info .closebtn {
	}

	#gallery {
	}
  
}