@font-face {
    font-family: 'Achiko';
    src: url('./fonts/achiko.otf');
}

@font-face {
	font-family: 'Mohr Rounded';
	src: url('./fonts/MohrRounded-SemiBold.ttf');
	font-weight: 600;
}

@font-face {
	font-family: 'Sink';
	src: url('./fonts/MohrRounded-Bold.otf');
}

.font-achiko {font-family: 'Achiko', sans-serif !important;}
.font-mohr-rounded {font-family: 'Mohr Rounded', sans-serif !important;}
.font-sink {font-family: 'Sink', sans-serif !important;}

#gonzagao .bg-red {background-color: #ff4800;}
#gonzagao .bg-yellow {background-color: #fff212;}
#gonzagao .bg-blue {background-color: #005aff;}

#gonzagao #gonzagao-menu {
	position: relative;
	z-index: 10;
}

#gonzagao #gonzagao-menu.page-navbar {
	background: url('./images/bg.png') no-repeat center/cover;
}

#gonzagao #gonzagao-menu .navbar {
	height: 100px;
}

#gonzagao #gonzagao-menu .navbar a.nav-link {
	font-size: 2rem;
	font-family: 'Sink', sans-serif !important;
	letter-spacing: 0.05em;
	background-color: #005aff;
	color: #fff;
	text-transform: uppercase;
	transition-duration: 0ms !important;
	transform: rotate(-2deg);
	border: 1px dashed #28012a;
	outline: 4px solid #005aff;
	padding: 0 12px;
}

#gonzagao #gonzagao-menu .navbar a:hover {
	background-color: #ff4800;
	color: #fff212;
	transform: rotate(2deg) scale(1.05);
	border: 1px dashed #fff212;
	outline: 4px solid #ff4800;
}

#gonzagao .menu-hamburger:not(.is-active) span,
#gonzagao .menu-hamburger:not(.is-active) span::before,
#gonzagao .menu-hamburger:not(.is-active) span::after {
	background-color: #ff4800;
}

#gonzagao #gonzagao-menu #navbar-logo {
	position: relative;
	z-index: 2;
}

#gonzagao #gonzagao-menu #navbar-logo img {
	width: 100%;
    height: 90px;
}

#gonzagao #gonzagao-menu #navbar-logo {
	display: none;
}

#gonzagao #gonzagao-menu #navbar-logo.page-logo {
	display: block;
}

#gonzagao #gonzagao-menu #navbar-logo.page-logo a {
	border: none;
	background: none;
	outline: none;
	transition-duration: 300ms !important;
	transform: scale(1.05);
}

#gonzagao #gonzagao-menu #navbar-logo.page-logo a:hover {
	transform: scale(1.05);
}

#gonzagao #front-media {
	width: 100%;
	display: none;
	background: url('./images/bg.png') no-repeat center/cover;
	padding: 100px 0;
	overflow: hidden;
	position: relative;
	margin-top: -100px;
}

#gonzagao #front-media::after {
	content: '';
	position: absolute;
	bottom: -50px;
	display: block;
	width: 100%;
	height: 100%;
	background-image: url('./images/elements.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
}

#gonzagao #front-media .logo-container img {
	width: 70vw;
	max-width: 400px;
	height: auto;
}

#gonzagao #front-media .date-container {
	margin-top: 20px;
	position: relative;
	z-index: 2;
}

#gonzagao #front-media .date-container img {
	width: 50vw;
	max-width: 200px;
	height: auto;
}

#gonzagao #front-media.show {
    display: block;
}

#gonzagao .video-border {
	border: 12px solid #ff4800;
	outline: 8px dashed #fff212;
}

#gonzagao .gallery-title {
	position: relative;
    text-align: center;
    top: calc(-8px - 0.75rem);
}

#gonzagao .gallery-title h3 {
	background-color: #fff212;
    color: #ff4800;
    display: inline-block;
    margin-bottom: 0;
    padding: 8px 16px;
	font-weight: bold;
	font-size: 1.5rem;
	transform: rotate(-2deg);
	border: 1px dashed #ff4800;
	outline: 4px solid #fff212;
}

#gonzagao .btn-gallery {
	background-color: #005aff;
    color: #fff;
	border: 1px dashed #28012a;
	display: block;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	transition-duration: 0 !important;
	width: 100%;
	transform: rotate(-2deg);
}

#gonzagao .bg-red .btn-gallery {
	background-color: #ff4800;
	border: 1px dashed #fff212;
	outline: 4px solid #ff4800;

}

#gonzagao .btn-gallery:hover {
	transform: rotate(2deg) scale(1.05);
}

#gonzagao .btn-gallery .img-container {
	background-color: #fff;
	border: 4px solid #fff;
	width: 100%;
    overflow: hidden;
    position: relative;
}

#gonzagao .btn-gallery .img-container::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

#gonzagao .btn-gallery .img-container img {
	object-fit: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#gonzagao footer {
    padding: 1.5rem 0;
	background: url('./images/bg.png') no-repeat center/cover;
}

#gonzagao footer img.logo {
	width: 100%;
	max-width: 250px;
	max-height: 150px;
	object-fit: contain;
}

#gonzagao footer .sjb img {
	width: 100%;
	max-width: 80vw;
	object-fit: contain;
	margin: 0 auto;
}

@media (max-width: 576px) {
	#gonzagao #front-media::after {
		bottom: 0;
	}
}