#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

@font-face {
	font-family: Adelle;
	src: url("../static/fonts/Adelle_Reg.otf") format("opentype");
}

@font-face {
	font-family: Adelle;
	font-weight: bold;
	src: url("../static/fonts/Adelle_Bold.otf") format("opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
	font-family: 'Open Sans';
}

.logotipo-puebla-dark {
	-webkit-filter: invert(1);
	filter: invert(1);
}

.logotipo-puebla-light {
	transition: .2s ease-in;
}

	.logotipo-puebla-light:hover {
		transition: .2s ease-out;
		transform: scale(.9);
	}

.titulo-portal {
	font-family: 'Open Sans';
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 1.5px;
}

.main-container {
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)), url(../static/img/background-alpha.png);
	background-size: 10%;
}

.main-header {
	background-color: #ece9e0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px 30px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.main-body {
	text-align: center;
	/*padding: 85px 25px;*/
	/*box-shadow: 2px 4px 20px 4px #e4e4e4;*/
	margin: 25px 45px;
}

.main-footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 50vh;
	background: #691c32;
	text-align: center;
}

.datos-contacto {
	color: #FFF;
	text-decoration: none;
	cursor: pointer;
}

	.datos-contacto h3 {
		margin-bottom: 15px;
	}

	.datos-contacto a {
		color: #FFF;
		text-decoration: none;
		cursor: pointer;
		letter-spacing: 1px;
	}

.fa-phone {
	transition: .1s ease-in;
	transform: rotate(0);
}

.datos-contacto a:hover .fa-phone {
	transition: .2s ease-out;
	transform: rotate(90deg);
}

.datos-contacto a:hover .fa-envelope {
	transition: .2s ease-out;
	transform: scale(1.1);
}

.datos-quejas-denuncias a {
	color: #FFF;
	text-decoration: none;
	cursor: pointer;
}

.datos-quejas-denuncias i {
	transition: .1s ease-in;
	color: #c2ba98;
}

	.datos-quejas-denuncias i:hover {
		transition: .2s ease-out;
		color: #FFF;
		cursor: pointer;
	}

.datos-quejas-denuncias a:hover .fa-envelope-open {
	transition: .2s ease-out;
	transform: scale(1.2);
}

.card-button img {
	width: 50%;
	margin: 25px;
}

.skew {
	width: 100%;
	height: 200px;
	position: absolute;
	bottom: 0;
	clip-path: polygon(100% 50%, 0 100%, 100% 100%);
	background: #FFF;
}

.back-to-top {
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: none;
	color: #FFF !important;
	padding: 8px 12px;
	background: #ffffff30;
	border-radius: 25px;
}

	.back-to-top::after hover {
		color: #691c32;
	}

a {
	cursor: pointer !important;
	text-decoration: none !important;
}

.beauty-label {
	font-size: 1.4em;
	color: #691c32;
	letter-spacing: 1.5px;
	margin-bottom: 15px;
}

.beauty-input {
	height: 45px !important;
	box-shadow: 2px 0px 10px -5px #555 !important;
	border-radius: 0 !important;
	text-align: center;
}

.btn-beauty {
	width: 100%;
	cursor: pointer;
	padding: 15px 0;
	padding-right: 0px;
	padding-left: 0px;
	border-radius: 2px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
}

.btn-pantone {
	transition: .2s ease-in;
	padding: 10px 15px;
	background: #691c32;
	border: 1px solid #691c32;
	color: #FFF;
}

	.btn-pantone:hover {
		transition: .2s ease-out;
		padding: 10px 15px;
		background: #581327;
		color: #FFF;
	}

.btn-outline-pantone {
	transition: .2s ease-in;
	padding: 10px 15px;
	background: #FFF;
	border: 1px solid #691c32;
	color: #691c32;
}

	.btn-outline-pantone:hover {
		transition: .2s ease-out;
		background: #691c32;
		color: #FFF;
	}

iframe {
	width: 100%;
	height: 100vh;
}

	iframe html body {
		overflow: hidden;
	}

		iframe html body #layout {
			height: 100vh;
		}

.espacio-sm {
	height: 25px;
}

.espacio-md {
	height: 50px;
}

.espacio-lg {
	height: 75px;
}

.espacio-xl {
	height: 100px;
}


@media all and (max-width: 950px) {
	.logotipo-puebla-light {
		display: none;
	}

	.main-header {
		height: 10vh;
		justify-content: space-between;
		padding: 25px 0;
	}



	.main-body {
		text-align: center;
		padding: 55px 20px;
		box-shadow: 2px 4px 20px 4px #e4e4e4;
		margin: 20px 15px;
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -20%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -20%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeIn {
	opacity: 0;
	-webkit-animation: fadeIn ease-in 1;
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 0.7s;
	-moz-animation-duration: 0.7s;
	animation-duration: 0.7s;
}

	.fadeIn.first {
		-webkit-animation-delay: 0.4s;
		-moz-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.fadeIn.second {
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}

	.fadeIn.third {
		-webkit-animation-delay: 0.8s;
		-moz-animation-delay: 0.8s;
		animation-delay: 0.8s;
	}

	.fadeIn.fourth {
		-webkit-animation-delay: 1s;
		-moz-animation-delay: 1s;
		animation-delay: 1s;
	}

.d-block {
	display: block !important;
	animation: fadeInDown 0.7s;
}

.d-none {
	display: none !important;
	animation: fadeInUp 0.7s;
}


/* FadeIn de arriba, hacia abajo */

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -20%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -20%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/* FadeIn de abajo, hacia arriba */

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 20%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 20%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}