html{
	padding: 0;
	margin: 0;
  	scroll-behavior: smooth;
}
body{
	font-family: 'Arial', sans-serif;
	/*overflow-x: hidden;*/
}
img{
	max-width: 100%;
}
.wow {
   visibility: hidden;
}
#header{
	display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #000;
}
	#header h1 img{
		max-height: 40px;
	}

#formulario{
	position: relative;
	display: flex;
    width: 100%;
    padding: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    color: #FFF;
    background-image: url(../img/slide.avif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 700px;
}
	#formulario .info{
		position: relative;
		padding: 50px;
		width: 60%;
	}
		#formulario:before{
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgb(0 0 0 / 20%);
		}
		#formulario .info h3{
			position: relative;
			display: inline-block;
			font-weight: bold;
			color: #fff;
			text-transform: uppercase;
			border-radius: 5px;
			margin-bottom: 50px;
			text-align: center;
			font-size: 32px;
			font-weight: 800;
			text-shadow: 1px 1px #000;
		}
		#formulario .info p{
			position: relative;
		    display: inline-block;
		    width: 100%;
		    font-size: 20px;
		    line-height: 32px;
		    margin-bottom: 30px;
		    /*text-transform: uppercase;*/
		}

	#formulario .formulario{
		position: absolute;
		top: 20px;
		right: 100px;
		width: 30%;
		padding: 0;
		background-color: #FBFBFB;
	}
		#formulario .formulario{
			color: #000;
		}
			#formulario .formulario h3{
				display: inline-block;
				width: 100%;
				padding: 20px;
				font-size: 17px;
				font-weight: 600;
				text-align: center;
				text-transform: uppercase;
				color: #FFF;
				background-color: #000;
				margin-bottom: -10px;
			}
			.form-horizontal{
				padding: 25px;
				margin-block-end: 0px;
			}
				.form-horizontal label{
					font-size: 13px;
    				margin-bottom: 0;
				}
		#formulario > div.formulario > form > div{
			margin-bottom: 10px;
		}
		#formulario > div.formulario > form > div:nth-child(6){
			display: flex;
		    flex-wrap: wrap;
		    align-content: center;
		    flex-direction: row;
		    justify-content: center;
		}
			#formulario > div.formulario > form > div:nth-child(6) label{
				padding: 5px;
			}
		.button {
		    margin: 0 5px 0 0;
		    width: 15%;
		    height: 40px;
		    position: relative;
		}
			.button:last-child{
				width: 70%;
			}

		.button label,
		.button input {
		  display: block;
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  border: 2px solid #000;
		  border-radius: 4px;
		  background-color: #fff;
		  cursor: pointer;
		  font-weight: bold;
		  text-transform: uppercase;
		}

		.button input[type="radio"] {
		  opacity: 0.011;
		  z-index: 100;
		}

		.button input[type="radio"]:checked + label {
		  background: #000;
		  border-radius: 4px;
		  color: #FFF;
		}

		.button label {
		  cursor: pointer;
		  z-index: 90;
		  line-height: 1.8em;
		}
/*.btn-primary{
	width: 100%;
    padding: 10px;
    background-color: #000;
    border-color: #000;
    font-weight: bold;
}
	.btn-primary:hover{
		background-color: #000;
    	border-color: #000;
	}*/
.btn-primary{
	width: 100%;
    padding: 10px;
}
.sombra {
    background: #00000047;
    padding: 10px;
}
#formulario .info p:last-child {
    margin: 0;
}
#conoce{
	display: inline-block;
	width: 100%;
	padding: 2em 5em;
}
	 h2.h2{
		display: inline-block;
		width: 100%;
		font-weight: bold;
		color: #000;
		/*text-transform: uppercase;*/
		text-align: center;
	    padding: 10px;
	    /*background-color: #000;*/
	}
		.beneficios{
			display: flex;
		    align-items: stretch;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    justify-content: center;
		}
			.beneficio-box{
				display: flex;
				width: 33.33%;
				padding: 20px;
			}
				.beneficios .beneficio-box:first-child{
					padding-left: 0;
				}
				.beneficios .beneficio-box:last-child{
					padding-right: 0;
				}

				.beneficio{
					border-radius: 10px;
					padding: 20px;
					text-align: center;
					background-color: #FFF;
					box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
				}
					.beneficio h3{
						font-weight: bold;
					}
					.beneficio p{
						font-size: 15px;
					    line-height: 21px;
					    text-align: left;
					    margin-bottom: 0;
					}
#video{
	display: inline-block;
	width: 100%;
	padding: 2em 5em;
}
	#video iframe{
		width: 100%;
    	min-height: 500px;
	}

#facilidades{
	display: inline-block;
	width: 100%;
	padding: 2em 5em;
	text-align: center;
}
	#facilidades ul{
		display: flex;
	    list-style: none;
	    flex-direction: row;
	    flex-wrap: wrap;
	    align-items: center;
	    align-content: center;
	    justify-content: center;
	    padding: 0;
	    margin-top: 3rem;
	}
		#facilidades ul li{
			width: 20%;
			padding: 5px 15px;
		}
			.facilidad {
			    /*height: 300px;*/
			    border-radius: 10px;
			    overflow: hidden;
			    object-fit: cover;
			}
				.facilidad img{
					object-fit: cover;
					max-width: inherit;
					width: 100%;
					height: 100%;
				}
			#facilidades ul li span{
				display: inline-block;
				width: 100%;
				padding: 10px;
				/*background-color: #333;*/
				color: #333;
				text-align: center;
				font-weight: bold;
			}
			hr {
			    margin-top: 3rem;
			    margin-bottom: 3rem;
			}

#footer{
	display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #000;
}
	#redessociales{
		display: flex;
	    list-style: none;
	    flex-direction: row;
	    flex-wrap: wrap;
	    align-items: stretch;
	    align-content: center;
	    justify-content: center;
	    padding: 0;
	    margin: 0;
	}
		#redessociales li a{
		    font-size: 30px;
		    color: #FFF;
		    margin: 0 10px;
		    padding: 10px;
		}

.slick-arrow, #facilidades .slick-arrow{
	position: absolute;
	z-index: 9;
	border: 0;
	border-radius: 100%;
	width: 30px !important;
	height: 30px !important;
	line-height: 16px;
	font-family: cursive;
	font-size: 24px;
	color: #000;
	display: inline-block;
	cursor: pointer;
	outline: 0;
	transform: scale(1);
}
	.slick-prev{
		left: -30px;
	}

	.slick-next{
		right: -30px;
	}
@media only screen and (max-width: 767px) {
	body{
		overflow-x: hidden;
	}
	#formulario{
		flex-direction: column;
		background-size: auto;
	}
		#formulario .info{
			width: 100%;
		}
		#formulario .formulario{
			position: relative;
			width: 100%;
			right: 0;
		}
			.button:last-child{
				width: 100%;
			}
	#conoce, #video, #facilidades{
		padding: 2em;
	}
	h2.h2{
		font-size: 1.5rem;
	}
		.beneficios{
			flex-direction: column;
		}
			.beneficio-box, .beneficios .beneficio-box:first-child, .beneficios .beneficio-box:last-child{
				width: 100%;
				padding: 10px 0;
			}
		.beneficio h3{
			font-size: 1.5rem;
		}
	#facilidades ul li{
		width: 50%;
		padding: 5px;
	}
			.facilidad {
			    /*height: 350px;*/
			    border-radius: 10px;
			    overflow: hidden;
			    object-fit: cover;
			    text-align: center;
			}
	hr {
	    margin-top: 1rem;
	    margin-bottom: 1rem;
	}
	#formulario .info h3{
		display: flex;
		justify-content: center;
	}
		#formulario .info h3 img{
			margin: 15px !important;
    		margin-top: -15px !important;
		}
	.facilidad img{
		max-height: 500px;
    	/*max-width: 350px;*/
    	max-width: 100%;
    	object-fit: none;
    	border-radius: 10px;
	}
	.slick-arrow, #facilidades .slick-arrow{
		font-family: Arial;
		width: 30px !important;
    	height: 30px !important;
    	transform: scale(0.9, 1.1);
    	padding: 0;
    	top: 45%;
	}
}

@media only screen and (min-width: 767px) and (max-width: 992px) {
	.beneficio{
		padding: 10px;
	}
		.beneficio h3{
			font-size: 1.3rem;
		}
		.beneficio p {
		    font-size: 13px;
		    line-height: 15px;
		    text-align: center;
		}
	#conoce, #video, #facilidades{
		padding: 2em;
	}
	#formulario .formulario{
		top: -10px;
	   right: 20px;
	   width: 40%;
	   transform: scale(0.9);
	}
		#formulario .formulario .g-recaptcha{
			transform: scale(.75) translate(-20px, 0px);
		}
}