@font-face {
	font-family: 'Unitropico';
	src: url('../font/noah-bold.otf');
}

@font-face {
	font-family: 'Textos';
	src: url('../font/Montserrat-Regular.ttf');
}

/* Hr -- Shine */
.hrshine {
  height: 20px;
  width: 60%;
  background-image: radial-gradient(
    farthest-side at 50% -50%,
    hsla(0, 0%, 0%, 0.5),
    hsla(0, 0%, 0%, 0));
  position: relative; 
}

.hrshine::before {
  height: 1px;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0.75) 50%,
    hsla(0, 0%, 0%, 0));
}
/**/

hr {
  
    border: 1px;
    height: 1px;
    color: #fff;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}


.izq{
    width:30%;
    float: left;
}


.der{
    width:30%;
    float: right;
}

.btnUnitropico{
    
    	background-color: #B5A160;
    	color: #fff;
}

.btnUnitropico:hover {
      background-color:#ccbe92;
      transition: 0.7s;
  }


p {
	font-family: 'Textos';
	text-align: justify;
}


h1 {
	font-family: 'Unitropico';
	color: #B5A160;
}

h2 {
	font-family: 'Unitropico';
	color: #B5A160;
}

h2 {
	font-family: 'Unitropico';
	color: #B5A160;
}

h3 {
	font-family: 'Unitropico';
	color: #B5A160;
}

h4 {
	font-family: 'Unitropico';
	color: #B5A160;
}

h5 {
	font-family: 'Unitropico';
	color: #B5A160;
}

.unitropico {
	font-family: 'Unitropico';
	color: #00594E;
}


.verde {
	color: #00594E;
}

.bgVerde {
	background-color: #00594E;
}

.bgDorado {
	background-color: #B5A160;
}

.dorado {
	color: #B5A160;
}

.sistemas {
	color: #36BCEE;
}

.centrado {
	text-align: center;
	vertical-align: middle;
}


form {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 10px;
}

.form-label {
	font-family: 'Textos';
	color: #00594E;
}

.form-control {
	font-family: 'Textos';
	border-color: #00594E;
}

.btn-primary {
	background-color: #00594E;
	border-color: #00594E;
}

.btn-primary:hover {
	background-color: #004d42;
	border-color: #004d42;
}

.boton-imagen {
	width: 400px;
	height: 400px;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.boton-imagen img {
	max-width: 100%;
	height: auto;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.boton-imagen {
	margin: 10px;
}

.button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	transition: transform 0.3s ease-out;
	width: 200px;
	/* Ajusta el tamaño del botón */
	height: auto;
	margin: 0 10px;
	/* Ajusta el espaciado entre los botones */
	text-align: center;
	/* Para centrar el texto */
	text-decoration: none;
}

.button-group {
	display: flex;
	justify-content: center;
	/* Alinear los button-groups al centro horizontalmente */
	margin-bottom: 20px;
	/* Ajusta el espacio entre los grupos de botones */
}

.button-group>a {
	margin: 0 10px;
	/* Ajusta el espacio entre los botones dentro de cada grupo */
}

.button:hover {
	transform: scale(0.8);
	/* Hace que los botones se hagan más pequeños al pasar el cursor */
}

.button img {
	width: 100%;
	height: auto;
	transition: transform 0.3s ease-out;
	border-radius: 50px;
	/* Agrega un borde redondeado a la imagen */
}
				                .button {
				                	display: inline-block;
				                	overflow: hidden;
				                	position: relative;
				                	transition: transform 0.3s ease-out;
				                	width: 200px;
				                	/* ajusta el tamaño del botón */
				                	height: auto;
				                	margin: 0 10px;
				                	/* ajusta el espaciado entre los botones */
				                	text-align: center;
				                	/* para centrar el texto */
				                	text-decoration: none;
				                }
				
				                .button-group {
				                	display: flex;
				                	justify-content: center;
				                	/* Alinear los button-groups al centro horizontalmente */
				                	margin-bottom: 20px;
				                	/* Ajusta el espacio entre los grupos de botones */
				                }
				
				                .button-group>a {
				                	margin: 0 10px;
				                	/* Ajusta el espacio entre los botones dentro de cada grupo */
				                }
				
				                .button:hover {
				                	transform: scale(0.8);
				                	/* hace que los botones se hagan más pequeños al pasar el cursor */
				                }
				
				                .button img {
				                	width: 100%;
				                	height: auto;
				                	transition: transform 0.3s ease-out;
				                	border-radius: 50px;
				                	/* Agrega un borde redondeado a la imagen */
				
							}