@import url('https://fonts.googleapis.com/css2?family=Acme&family=Lato:ital,wght@0,700;1,400;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?&family=Lobster&family=Niconne');
@import url('https://fonts.googleapis.com/css2?&family=Poppins:ital,wght@0,400;0,500;0,800;1,400;1,500;1,800;1,900');
@import url('https://fonts.googleapis.com/css2?&family=Raleway:ital,wght@0,400;0,600;0,900;1,400;1,500;1,900');
@import url('https://fonts.googleapis.com/css2?&family=Righteous&family=Roboto+Condensed:ital,wght@0,400;1,700');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;700');
@import url('https://fonts.googleapis.com/css2?&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
/*
    font-family: 'Acme', sans-serif;
    font-family: 'Lato', sans-serif; font-weight: 400; font-style: italic;
    font-family: 'Lato', sans-serif; font-weight: 700;
    font-family: 'Lato', sans-serif; font-weight: 900; font-style: italic;
    font-family: 'Lobster', cursive;
    font-family: 'Niconne', cursive;

    font-family: 'Poppins', sans-serif; font-weight: 400;
	font-family: 'Poppins', sans-serif;	font-weight: 400; font-style: italic;
	font-family: 'Poppins', sans-serif; font-weight: 500;
	font-family: 'Poppins', sans-serif;	font-weight: 500; font-style: italic;
	font-family: 'Poppins', sans-serif; font-weight: 800;
	font-family: 'Poppins', sans-serif;	font-weight: 800; font-style: italic;
	font-family: 'Poppins', sans-serif; font-weight: 900; font-style: italic;


	'Raleway', sans-serif; font-weight: 400;
	'Raleway', sans-serif; font-weight: 400; font-style: italic;
	'Raleway', sans-serif; font-weight: 500; font-style: italic;
	'Raleway', sans-serif; font-weight: 600;
	'Raleway', sans-serif; font-weight: 900;
	'Raleway', sans-serif; font-weight: 900; font-style: italic;

    font-family: 'Righteous', cursive;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-style: italic;
    font-family: 'Teko', sans-serif;
    font-family: 'Teko', sans-serif; font-weight: 700;

    font-family: 'Ubuntu', sans-serif;
	font-family: 'Ubuntu', sans-serif; font-style: italic;
	font-family: 'Ubuntu', sans-serif; font-weight: 700;
	font-family: 'Ubuntu', sans-serif; font-weight: 700; font-style: italic;

	font-family: 'Fredoka One', cursive;
*/

.home{
	background: linear-gradient(90deg, rgba(18,29,57,.95), rgba(18,29,57,.65)),
				url("../images/header-bg.jpg") center no-repeat;
	
}

 .navbar_top{
	background: linear-gradient(90deg, rgba(18,29,57,.95), rgba(18,29,57,.65));
}

.top-bar{
	font-size: .9rem;
	padding: 5px 0 5px 5px;
	color: #EBEBEB;
}

.navbar-nav .nav-link{
	font-family: 'Acme', sans-serif;
	color: white !important;
	font-size: 14px;
	margin: 6px;
	font-weight: 800px;
	text-transform: uppercase;
}

.navbar-nav .nav-link:hover{
	color: #007bff !important;
}

 
.animateContainer{
	height: 720px;
	position: relative;
	margin-bottom: 10px;
}

.animateContainer iframe{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}


/*---------------------------PART 02 SLIDER-AREA --------------------------------------------------*/
.single-slider{
	background: url("../images/fondo.png");
}

.slider-height{
	/*ALTURA DE LA IMAGEN*/
	min-height:500px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-height
	{
		min-height:420px
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-height
	{
		min-height:400px
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-height
	{
		min-height:400px
	}
}

@media (max-width: 575px)
{
	.slider-height
	{
		min-height:300px
	}
}

.slider-area{
	margin-top:-1px
}

.slider-area .hero__caption{
	margin-left:27px;
	padding-top: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-area .hero__caption
	{
		padding-top:30px
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-area .hero__caption
	{
		padding-top:30px
	}
}

@media (max-width: 575px)
{
	.slider-area .hero__caption
	{
		padding-top:30px
	}
}

.slider-area .hero__caption h1
{
	/*ARENADOS*/
	font-size:140px;
	font-family: 'Raleway', sans-serif; font-weight: 900; font-style: italic;
	line-height:1;
	text-transform:uppercase;
	color:#4AD8E3;
	margin:0;
	padding:0
}

@media only screen and (min-width: 992px) and (max-width: 1200px)
{
	.slider-area .hero__caption h1
	{
		font-size:135px
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-area .hero__caption h1
	{
		font-size:110px
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-area .hero__caption h1
	{
		font-size:72px
	}
}

@media (max-width: 575px)
{
	.slider-area .hero__caption h1
	{
		font-size:42px}
	}
.slider-area .hero__caption .stock-text{
	position:relative;
	left:59px;
	top:-38px
}

@media only screen and (min-width: 992px) and (max-width: 1200px)
{
	.slider-area .hero__caption .stock-text
	{
		top:-29px
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-area .hero__caption .stock-text
	{
		top:-19px
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-area .hero__caption .stock-text
	{
		top:-12px;
		left:40px
	}
}

@media (max-width: 575px)
{
	.slider-area .hero__caption .stock-text
	{
		top:-12px;
		left:40px;
		top:0;
		left:0
	}
}

.slider-area .hero__caption .stock-text h2
{
	/*Funte del Título PRINCIPAL FRONTARL*/
	font-size:140px;
	font-family: 'Raleway', sans-serif; font-weight: 900; font-style: italic;
	margin:0;
	line-height:1;
	text-transform:uppercase;
	position:absolute;
	color:#fff
}

@media only screen and (min-width: 992px) and (max-width: 1200px)
{
	.slider-area .hero__caption .stock-text h2
	{
		font-size:110px
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-area .hero__caption .stock-text h2
	{
		font-size:60px
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-area .hero__caption .stock-text h2
	{
		font-size:52px
	}
}

@media (max-width: 575px)
{
	.slider-area .hero__caption .stock-text h2
	{
		font-size:27px;
		margin-bottom:25px
	}
}

.slider-area .hero__caption .stock-text h2:nth-child(1)
{
	color:transparent;
	-webkit-text-stroke:1px #fff;
	-webkit-text-fill-color:transparent
}

.slider-area .hero__caption .stock-text h2:nth-child(2)
{
	/*Funte del Título PRINCIPAL SOMBRA*/
	font-family: 'Raleway', sans-serif; font-weight: 900; font-style: italic;
	color:#4AD8E3;
	-webkit-animation:animate 4s ease-in-out infinite;
	animation:animate 4s ease-in-out infinite
}


@keyframes animate
{
	0%,100%
	{
		clip-path:polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 69%, 100% 52%, 100% 100%, 0% 100%)
	}
	50%
	{
		clip-path:polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%)
	}
}


.slider-area .hero__caption .hero-text1 span, .slider-area .hero__caption .hero-text1 a,
.slider-area .hero__caption .hero-text2 span, .slider-area .hero__caption .hero-text2 a{
	position:relative;
	color:
	#fff;
	font-size:18px;
	text-transform:uppercase;
	font-weight:400;
	letter-spacing:0.03em;
	display:block
}

.slider-area .hero__caption .hero-text1 span::before,
.slider-area .hero__caption .hero-text1 a::before,
.slider-area .hero__caption .hero-text2 span::before,
.slider-area .hero__caption .hero-text2 a::before
{
position:absolute;
content:"";
width:25px;
height:2px;
top:0;
left:-30px;
top:50%;
transform:translateY(-50%);
background:#4AD8E3;
}

@media (max-width: 575px)
{
	.slider-area .hero__caption .hero-text1 span,
	.slider-area .hero__caption .hero-text1 a,.slider-area .hero__caption .hero-text2 span,.slider-area .hero__caption .hero-text2 a
	{
	margin-bottom:20px
	}
}

@media only screen and (min-width: 992px) and (max-width: 1200px)
{
	.slider-area .hero__caption .hero-text2
	{
		margin-top:50px
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
	.slider-area .hero__caption .hero-text2
	{
		margin-top:50px
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-area .hero__caption .hero-text2
	{
		margin-top:50px
	}
}

@media (max-width: 575px)
{
	.slider-area .hero__caption .hero-text2
	{
		margin-top:50px
	}
}

.hero-overly{
	position:relative;
	z-index:1
}

.hero-overly::before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	left:0;
	top:0;
	bottom:0;
	right:0;
	z-index:0;
	background-repeat:no-repeat
}

.slider-area h2{
	color:#fff;
	font-size:70px;
	font-weight:900;
	text-transform:uppercase
}

@media only screen and (min-width: 576px) and (max-width: 767px)
{
	.slider-area h2
	{
		font-size:50px
	}
}

/*COLOR DE FONDO TRANSPARENTE*/
.hero-overly::before{
	background-image:-moz-linear-gradient(0deg, rgba(2,8,52,0.74902) 0%,
	rgba(2,8,52,0.14902) 100%);
	background-image:-webkit-linear-gradient(0deg, rgba(2,8,52,0.74902) 0%, rgba(2,8,52,0.14902) 100%);
	background-image:-ms-linear-gradient(0deg, rgba(2,8,52,0.74902) 0%, rgba(2,8,52,0.14902) 100%)
}

.mt-110{
	margin-top:110px
}


/*---------------------------PART 02 FIN SLIDER-AREA --------------------------------------------------*/

/*---------------------------PART 03 Our Services --------------------------------------------------*/
.servicio{
	padding: 3rem;
	/*background: red*/
}
.section-heading h1{
	text-transform: uppercase;
	padding: 1rem;
	font-family: 'Fredoka One', cursive;
}

.single-blog{
	box-shadow: 0 0 20px 1px rgba(0,0,0,0.2);
	padding: 10px;
	margin-top: 30px;
	background-color: #fff; /* White */
	height: 95%;
}

.single-blog img{
	width: 100%;

}

.blog-meta{
	font-size: 14px;
	margin-bottom: 2px;
}

.single-blog span{
	float: right; /* Posicion del SPAN Izquierda */
	font-size: 12px;
	color: cornflowerblue;
}

.blog-text{
	font-size: 14px;
	text-align: justify;
}

.single-blog h2{
	font-family: 'Fredoka One', cursive;
	text-transform: uppercase;
	margin-top: 10px;
	font-size: 1.5rem;
	color: #007bff; /* Celeste */
}

.single-blog h2 a{
	text-decoration: none;
}

.read-more-btn{
	background-image: linear-gradient(to right, #1c03b5, #5c8bef); /* Azul oscuro, Azul claro */
	padding: 5px 12px 8px;
	border-radius: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #fff; /* White */
	border: none !important;
}

.read-more-btn:hover{
	background-image: linear-gradient(to right, #006417, #00B128); /* Verde oscuro, Verde claro */
	text-decoration: none;
	color: #fff; /* White */
}



/*---------------------------PART 04 Quienes somos --------------------------------------------------*/
.about{

	padding: 3rem 0 3rem 0;
	/*fondo azul*/
	background-color: #002858;
}

.section-heading-2 h4{
	text-transform: uppercase;
	color: #101D2C; /*Celeste Oscuro*/
	line-height: 0;
	font-family: 'Teko', sans-serif;
	letter-spacing: 1px;
	color: #f3f3f3;
}

.section-heading-2 h1{
	text-transform: uppercase;
	padding: 1rem;
	font-family: 'Fredoka One', cursive;
	color: #f3f3f3;

}

.about a{
	background: tomato; /*FF6347 Orange*/
}

.about p{
	color: #f3f3f3; /*White*/
}

.about .btn{
	/*Color text*/
	width: 250px;
	color: #fff887 !important;  /*Amarillo*/
	transition: background-color 650ms;
	text-transform: uppercase;
}

.about .btn:hover{
	color: #fff !important;
	background-color: #009bdb;  /*Celeste*/
}



/*--------------- EFECTO BOTON --------------*/
.btn{
	width: 100px;
	padding: 5px 0 !important;
	border: 1px solid #c69963; /*Marrón*/;
	position: relative;
	overflow: hidden;
}
.btn::before{
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255.3), transparent);
	transition: all 650ms;
}
.btn:hover::before{
	left: 100%;
}
/*--------------- END EFECTO BOTON --------------*/


/*---------------------------PART 05 Portafolio --------------------------------------------------*/
.portafolio-menu{
	text-align: center;
}
.portafolio-menu ul li{
	display: inline-block;
	margin 0;
	list-style: none;
	padding: 10px 15px;
	border: 1px solid tomato;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.portafolio-menu ul li:hover{
	background: tomato;
	color: #fff;
}
.portafolio-item{
	width: 100%;
    position:absolute;
    /*background: red;*/
    /*ALINEAMIENTO*/
    left:15%;
    margin-left:-50px;
}
.portafolio-item .item{
	width: 303px;
	float: left;
	margin-bottom: 10px;
}
.portafolio-item .item img{ /*Adicionado por mi*/
	width: 290px;
}
/*Color Menu inicio*/
li.active{
	background: tomato;
	color: #fff;
}


/*----------------------------------------END PART 05 Portafolio-------------------------*/


/*-------------------------------- Menu Footer --------------------------------*/

footer
{
	background-color: #000;
	padding-top: 0px;
	/*height: 100vh;*/
	display: grid;
	align-items: center;
	font-family: 'Poppins', sans-serif;
}

.contact-wrap
{
	width: 85%;
	height: auto;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
}

.contact-in
{
	padding: 25px 15px;
}

.contact-in:nth-child(1){
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	flex: 30%;

	color: #fff;
	background: url(../images/footer.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.contact-in:nth-child(2){
	flex: 35%;
	background: #c31432;
}

.contact-in:nth-child(3){
	flex: 30%;
	padding: 0;
}

.contact-in h1{
	text-align: center;
	font-size: 1.5rem;
	color: #fff;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 1.2rem;
}

.contact-in h2{
	font-size: 1.2rem;
	font-weight: 400;
	margin-bottom: 1rem;
}

.contact-in h2 i{
	font-size: 1rem;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	background: #F5F5F5;
	color: #000;
	border-radius: 50px;
	line-height: 40px;
	text-align: center;
}

.contact-in p{
	font-size: .9rem;
	font-weight: 300;
	margin-bottom: 1rem;
}

.contact-in ul{
	padding: 0;
	margin: 0;
}

.contact-in ul li{
	list-style: none;
	display: inline-block;
	margin-right: 5px;
	margin-top: 5px;
}

.contact-in ul li a{
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	background: #fff;
	border-radius: 50px;
}

.contact-in ul li a i{
	font-size: 14px;
	line-height: 30px;
	color: #000;
}

.contact-in form{
	width: 100%;
	height: auto;
}

.contact-in-input{
	width: 100%;
	height: 30px;
	margin-bottom: 15px;
	border: 1px solid #fff;
	outline: none;
	padding-left: 5px;
	background: transparent;
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	font-family: 'Poppins', sans-serif;
}

.contact-in-input::placeholder{
	color: #fff;
}

.contact-in-textarea{
	width: 100%;
	height: 80px;
	margin-bottom: 20px;
	border: 1px solid #fff;
	outline: none;
	padding-left: 5px;
	padding-top: 5px;
	background: transparent;
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	font-family: 'Poppins', sans-serif;
}

.contact-in-textarea::placeholder{
	color: #fff;
}

.contact-in-btn{
	width: 100%;
	height: 40px;
	border: 1px solid #fff;
	outline: none;
	background: transparent;
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	font-family: 'Poppins', sans-serif;
	cursor: pointer;
}

.contact-in iframe{
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 480px)
{
	.contact-in:nth-child(1){

	flex: 50%;
	}

	.contact-in:nth-child(2){
		flex: 50%;
	}

	.contact-in:nth-child(3){
		flex: 100%;
	}
}


/*
#footer-area{
	padding: 90px 0 60px 0;
	background: #002858; /*Azul Oscuro FONDO*/
/*
	color: #fff;
}
.footer-social{
	margin-top:20px;
}
.single-footer h3{
	font-weight: 500;
	margin-bottom: 25px;
	color: #fafafa;
	font-family: Merienda;
}
.link-area-li{
	padding: 5px 5px 5px 0;
	list-style: none;
}
.link-area li a{
	color: #ddd;
	font-family: Merienda;
}
.link-area li a i{
	margin-right: 10px;
	color: #888;
}
.link-area{
	padding: 0;
}
.single-footer p{
	font-family: merienda;
}
.footer-social{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer-social li{
	list-style: none;
	margin: 0 15px;
}
.footer-social li a i{
	color: #777;
	font-size: 1.5em;
	transition: 0.5s;
}
.widget li{
	float: left;
	width: 50%;
}
.widget li a img{
	margin-bottom: -10px;
	width: 100%;
	height: 100%;
}
*/

.copyright-area{
	background: #00577a; /*Azul Claro*/
	padding: 30px 0;
	margin-top: 30px;
	border-radius: 15px;
}



















/*CARROUSEL*/
.carouselprin .carousel-item{
	min-height: 90vh;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 1;
}

.carouselprin .carousel-item:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: -1;
}

.carouselprin .carousel-item .container{
	/*
	background: #75ad74;
	border-radius: 50px;
	padding: 10px;
	margin: 10px;
	*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.carouselprin .carousel-item h2{
	font-family: 'Poppins', sans-serif; font-weight: 900; font-style: italic;
	text-shadow: 3px 3px 3px rgba(11, 74, 55, 1);
	text-transform: uppercase;
	font-size: 5rem;
	color: #f1fa00;
	margin: 0 0 10px;
	font-weight: 600;
}

.carouselprin .carousel-item p{
	font-family: 'Ubuntu', sans-serif; font-style: italic;
	text-shadow: 3px 3px 3px rgba(11, 74, 55, 1);
	font-size: 1.9rem;
	margin: 0;
	color: #fff;
	font-weight: 600;
}

.carouselprin .carousel-item.active h2{
	animation: fadeInLeft 0.5s ease forwards;
}
.carouselprin .carousel-item.active p{
	animation: fadeInRight 0.5s ease forwards;	
}

@keyframes fadeInLeft{
	0%{
		opacity: 0;
		transform: translate(-30px);
	}

	100%{
		opacity: 1;
		transform: translate(0px);
	}
}

@keyframes fadeInRight{
	0%{
		opacity: 0;
		transform: translate(30px);
	}

	100%{
		opacity: 1;
		transform: translate(0px);
	}
}

.carouselprin .carousel-controls{

	position: absolute;
	left: 50%;
	bottom: 40px;
	z-index: 10;
	transform: translateX(-50%);
}

.carouselprin .carousel-indicators{
	position: relative;
	margin: 0;
}

.carouselprin .carousel-indicators li{
	height: 70px;
	width: 70px;
	margin: 0 5px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	border: 3px solid transparent;
	transition: all 0.3s ease;
}

.carouselprin .carousel-indicators li.active{
	border-color: #fff;
	transform: scale(1.2);
}

.carouselprin .carousel-control-prev,
.carouselprin .carousel-control-next{
	height: 60px;
	width: 60px;
	opacity: 1;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.carouselprin .carousel-control-prev:hover,
.carouselprin .carousel-control-next:hover{
	box-shadow: 0 0 10px #fff;
}

.carouselprin .carousel-control-prev i,
.carouselprin .carousel-control-next i{
	font-size: 30px;

}

.carouselprin .carousel-control-next{
	right: -90px;
}
.carouselprin .carousel-control-prev{
	left: -90px;
}

/*-------RESPONSIVE------*/
@media(max-width: 767px){
	.carouselprin .carousel-control-prev,
	.carouselprin .carousel-control-next
	{
		display: none;
	}

	.carouselprin .carousel-indicators li{
		height: 60px;
		width: 60px;
	}

	.carouselprin .carousel-item{
		font-size: 45px;
	}

	.carouselprin .carousel-item p{
		font-size: 22px;
	}
}