/*
Template Name: COAGEX - Creative Agency Template
Author URL: https://themeforest.net/user/enventer
Website: www.enventer.com
 *********************************************/

/* TABLE OF CONTENTS:
----------------------------------------------------------------

--------------------------------------------------------------

1. Default Theme CSS
    1.1 Preloader
    1.2 Section Heading
    1.3 Section Button
    1.4 Section Pattern Animation

2. Menu Area CSS
    2.1 Menu CSS
    2.2 Drop Down Menu CSS
    2.3 Sticy Menu CSS
    2.4 Fullscreen Search CSS

3. Header Area CSS
	3.1 Header Pattern Image
	3.2 Header ArtWork Animation
	3.3 Intro Text
	3.4 Header Button

4. Home About Area CSS
	4.1 Home About Content

5. Service Area CSS
	5.1 Curve SVG
	5.2 Single Service Pattern
	5.3 Single Service Animation
	5.4 Single Service Text

6. Portfolio Area CSS
	6.1 Portfolio Pattern
	6.2 Portfolio Item
	6.3 Portfolio Item Arrow

7. Expertise Area CSS

8. Counter Area CSS
	8.1 Single Counter

9. Testimonial Area CSS
	9.1 Left Content
	9.2 Right Content
	9.3 Testimonial Arrow

10. Pricing Area CSS
	10.1 Single Price
	10.2 Single Price Button
	10.3 Price Pattern Animation

11. Blog Area CSS	
	11.1 Single Blog Image
	11.2 Single Blog PostDate
	11.3 Single Blog Content

12. Footer Area CSS
	12.1 Footer Social
	12.2 Footer Content
	12.3 Copyright Text


++++++OTHER PAGES++++++


13. Blog Details Page
	13.1 Blog Banner
	13.2 Blog Side
	13.3 Blog Search
	13.4 Blog Social Share
	13.5 Blog Author
	13.6 Blog Category
	13.7 Blog Tags
	13.8 Blog Comments
	13.9 Blog Comments Reply

14. Blog List Area CSS
	14.1 Blog Pagination

15. Team Area CSS
	15.1 Team Banner
	15.2 Team Content
	15.3 Team Social

16. Contact Us Area CSS
	16.1 Contact Us Banner
	16.2 Contact Pattern
	16.2 Contact Pattern
	16.3 Single Contact Info
	16.4 Contact Form
	16.5 Contact Form Button

17. Portfolio Area CSS
	17.1 Portfolio Banner
	17.2 Portfolio Content
	17.3 Portfolio Filtering

18. Portfolio Details Area CSS
	18.1 Project  Description
	18.2 Project  Technology
	18.3 Project  Slider

19. About Us Area CSS
	19.1 About Us Banner
	19.2 About Hero Text
	19.3 About Video
	19.4 About Video Icon
	19.5 About Counter
	19.6 About Section Content

20. 404 Area CSS

21. Call to Action
--------------------------------------------------------------

--------------------------------------------------------------*/

/*================ 1. Default Theme CSS ===================*/

/*================ Inicio sombra busqueda =================*/
.resaltar {
	background-color: #ff0;
}

/*==================== Inicio whatsapp ===================*/

.whatsapp {
	position: fixed;
	cursor: pointer;
	width: 59px;
	height: 59px;
	bottom: 8px;
	right: 5px;
	color: #fff !important;
	/* background: linear-gradient(238.45deg, #42d2ff 3.32%, #49e513 98.6%); */
	background: linear-gradient(238.45deg, #49d7f1 15.32%, #78f9d6 72.6%);
	border-radius: 70px;
	text-align: center;
	font-size: 40px;
	z-index: 9999999;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.whatsapp_hover {
	text-decoration: none;
	color: white !important;
	background-color: #25d366;
}

.whatsapp-icon {
	margin-top: 10px;
}

/*==================== fin whatsapp ===================*/
html,
body {
	height: 100%;
	font-family: 'Nunito', sans-serif;
	margin: 0px;
	padding: 0px;
}

::-moz-selection {
	background: #3ed60e;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #80ffd2;
	color: #fff;
	text-shadow: none;
}

a:focus {
	outline: 0px solid;
}

img {
	width: auto;
	height: auto;
}

p {
	margin: 0;
	font-size: 18px;
	line-height: 25px;
	color: #363636;
	text-align: justify;
	font-family: 'Nunito' !important;
	font-weight: 300 !important;
	width: 100%;
}

.p_fondoAzul {
	color: #ffffff !important;
}

.pcontacto {
	text-align: center;
}

.servicio_centrado {
	text-align: justify !important;
	width: auto;
	font-size: 15px;
}

.h4_fondoAzul {
	color: #ffffff !important;
}

.h3_fondoAzul {
	color: #80ffd1 !important;
}

h2 {
	color: #425d9d;
	font-size: 22px;
	font-weight: 600;
}

.h3_titWork {
	text-align: right !important;
	display: block !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 10px;
}

a {
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	text-decoration: none;
}

a:hover {
	color: #6b6fff;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0 none;
}

ul {
	list-style: outside none none;
	margin: 0;
	padding: 0;
}

.container {
	max-width: 1300px;
}

.default-margin-mt {
	margin-top: 30px;
}

#scrollUp {
	bottom: 58px;
	/* background: linear-gradient(238.45deg, #42d2ff 3.32%, #49e513 98.6%); */
	background: linear-gradient(238.45deg, #49d7f1 15.32%, #78f9d6 72.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	right: 5px;
	text-align: center;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	font-size: 59px;
}

/* 1.1 Preloader*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f7f7f7;
	z-index: 99999999999999;
	height: 100%;
}

#status {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 99999999999999;
}

#status img {
	height: 150px;
	width: 150px;
}

/*1.2 Section Heading*/

.section-heading-1 h4 {
	font-size: 23px;
	text-transform: capitalize;
	font-weight: 200;
}

.section-heading-1 h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block;
}

.section-heading-1 h3:before {
	position: absolute;
	content: '';
	right: 0;
	bottom: -15px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
}

.section-heading-1 p {
	color: #363636;
	text-align: justify;
}

.section-heading-2 {
	padding-bottom: 45px;
}

.section-heading-2-p {
	padding-bottom: 0 !important;
}

.section-heading-2 h4 {
	font-size: 23px;
	text-transform: capitalize;
	font-weight: 200;
}

.section-heading-2 h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block;
}

.section-heading-2 h3:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
}

.section-heading-2 p {
	color: #363636;
}

.section-heading-3 {
	padding-bottom: 45px;
	text-align: center;
}

.section-heading-3 h4 {
	font-size: 23px;
	text-transform: capitalize;
}

.section-heading-3 h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px;
	display: inline-block;
	margin-top: 35px;
}

.section-heading-3 h3:before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -15px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
	transform: translateX(-50%);
}

/*1.3 Section Button*/

.section-button a {
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #80ffd2 96.59%);
	box-shadow: 0px 2px 15px rgba(164, 164, 164, 0.25);
	border-radius: 68px;
	color: #fff;
	padding: 10px 30px;
	font-weight: 700;
	font-size: 15px;
	text-transform: capitalize;
	margin-top: 25px;
	display: inline-block;
}

.section-button a:hover {
	color: #425d9d;
	background: linear-gradient(253.52deg, #80ffd2 8.92%, #48d6f2 96.59%);
}

button {
	background-color: #ffffff;
	box-shadow: 0px 2px 15px rgba(164, 164, 164, 0.25);
	border-radius: 68px;
	border-color: #425d9e !important;
	color: #425d9e;
	padding: 10px 24px;
	font-weight: 300;
	font-size: 13px;
	text-transform: capitalize;
	margin-top: 25px;
	display: inline-block;
}

/* CAMBIO DE ESTILO DE BOTON 31 MAYO */
.btn-light {
	color: #425d9d;
	background-color: #f8f9fa;
	border-color: #f8f9fa;
	border-radius: 25px;
	padding: 10px 20px;
	border: 2px solid #435d9e;
}

.btn-light:hover {
	background-color: #425d9e;
	color: #ffff;
}

/* ===================================== */

button:hover {
	background-color: #425d9e;
	color: #ffff;
}

/*1.4 Section Pattern Animation*/
.e-pattern {
	position: absolute;
	right: -48px;
	top: -109px;
	z-index: -1;
}

.e-pattern img {
	-webkit-animation: ep 3s linear infinite;
	animation: ep 3s linear infinite;
}

@keyframes ep {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*=========2. Menu Area CSS==========*/
.main-navigation {
	width: 100%;
	background-color: transparent;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
}

.logo-area img {
	margin: 25px 16px;
	width: 180px;
}

/*2.1 Menu CSS*/
.main-menu {
	margin-right: 85px;
}

.main-menu ul li {
	display: inline-block;
	margin-left: 25px;
	position: relative;
}

.main-menu ul li a {
	color: #fff;
	display: inline-block;
	text-transform: capitalize;
	font-size: 18px;
	line-height: 1;
	position: relative;
	font-weight: 700;
	padding: 40px 0;
	transition: 0.5s;
}

.main-menu ul li a:hover {
	color: #80ffd2;
}

.main-menu ul li a:before {
	content: '';
	position: absolute;
	width: 0px;
	height: 3px;
	background-color: #fff;
	left: 0;
	top: 67%;
	-webkit-transition: 0.7s;
	transition: 0.7s;
	mix-blend-mode: multiply;
}

.main-menu ul li a:after {
	content: '';
	position: absolute;
	width: 0px;
	height: 3px;
	background-color: #fff;
	right: 0;
	top: 67%;
	-webkit-transition: 0.7s;
	transition: 0.7s;
	mix-blend-mode: multiply;
	z-index: 999;
}

.main-menu ul li a.current:before {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #80ffd2;
	left: 0;
	top: 67%;
	-webkit-transition: 0.7s;
	transition: 0.7s;
	mix-blend-mode: multiply;
}

.main-menu ul li a.current:after {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #80ffd2;
	right: 0;
	top: 67%;
	-webkit-transition: 0.7s;
	transition: 0.7s;
	mix-blend-mode: multiply;
	z-index: 9;
}

.main-menu ul li a.current {
	color: #80ffd2;
}

.main-menu ul li a:hover:before {
	width: 50%;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.main-menu ul li a:hover:after {
	width: 50%;
	-webkit-transform: translateX(100%);
	transform: translateX(-100%);
}

.f-right {
	float: right;
}

.mean-container .mean-nav {
	margin-top: 0;
	background: linear-gradient(270deg, #00b0e7 0%, #80ffd2 100%);
	border-radius: 10px;
}

@media only screen and (min-width: 768px) {
	.mean-container .mean-nav {
		margin-top: 75px;
		background: linear-gradient(270deg, #00b0e7 0%, #80ffd2 100%);
		border-radius: 10px;
	}
}

.main-menu ul li i {
	margin-left: 5px;
}

#mobile-menu {
	display: block;
}

/*2.2 Drop Down Menu CSS*/
.main-menu ul li ul.dropdown {
	position: absolute;
	right: 0;
	top: 130%;
	width: 280px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	border: solid 3px transparent;
	border-image: linear-gradient(238.45deg, #80ffd2 3.32%, #42d2ff 98.6%);
	border-image-slice: 1;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	padding: 15px;
}

ul.dropdown li a:before {
	position: absolute;
	content: '';
	background-color: transparent;
	height: 0;
	left: 0;
	top: 0;
	opacity: 0;
}

ul.dropdown li a:after {
	position: absolute;
	content: '';
	background-color: transparent;
	height: 0;
	right: 0;
	top: 0;
	opacity: 0;
}

.main-menu ul li:hover ul.dropdown {
	top: 106%;
	opacity: 1;
	visibility: visible;
}

.main-menu ul li ul.dropdown li a:hover {
	background: linear-gradient(238.45deg, #42d2ff 3.32%, #80ffd2 98.6%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.main-menu ul li ul.dropdown li {
	display: block;
	margin-left: 15px;
}

.main-menu ul li ul.dropdown li a {
	padding: 12px 0px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	position: relative;
	color: #646572;
	font-weight: 600;
}

/*2.3 Sticy Menu CSS  */

.main-navigation.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	/* background menu: */
	background: linear-gradient(270deg, #00b0e7 0%, #80ffd2 100%);
	-webkit-box-shadow: 0px 0px 4px #016946;
	box-shadow: 0px 0px 50px #60636242;
	-webkit-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
	-webkit-animation: sticky 1s;
	animation: sticky 1s;
}

@-webkit-keyframes sticky {
	0% {
		top: -120px;
	}

	100% {
		top: 0;
	}
}

@keyframes sticky {
	0% {
		top: -120px;
	}

	100% {
		top: 0;
	}
}

.main-navigation-1 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #80ffd2 100%);
	-webkit-box-shadow: 0px 0px 4px #016946;
	box-shadow: 0px 0px 50px #60636242;
	-webkit-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
	-webkit-animation: sticky 1s;
	animation: sticky 1s;
}

/* 2.4 Fullscreen Search CSS*/
#search {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #00b09b;
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(rgba(66, 93, 155, 0.9)),
		to(rgba(0, 176, 155, 0.9))
	);
	background: linear-gradient(
		to right,
		rgba(66, 93, 158, 0.9),
		rgba(66, 93, 155, 0.9)
	);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	opacity: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	will-change: transform, opacity;
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	visibility: hidden;
}

#searchbox {
	border-radius: 11px;
	padding: 3px 20px 3px 20px !important;
}

#boton-busqueda {
	border-radius: 11px;
	padding: 8px 20px 8px 20px;
}

/* colocar search a la derecha: */
#search {
	display: flex;
	justify-content: flex-end;
}

/* #searchbox {
    margin-right: 10px;
}
 */
#boton-busqueda {
	margin-right: 90px;
}

.search-icon-area {
	position: absolute;
	right: 20px;
	top: 29px;
}

/* icono de de busqueda: */
.search-icon-area i {
	background-color: #fff;
	color: #80ffd2;
	font-size: 27px;
	padding: 7px;
	border-radius: 50%;
}

@media only screen and (min-width: 1024px) and (max-width: 1025px) {
	.search-icon-area i {
		background-color: transparent;
		color: #fff;
		font-size: 27px;
		padding: 7px;
		border-radius: 50%;
	}
}

/*@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .search-icon-area {
        position: absolute;
        right: 20px;
        top: 29px;}
    .search-icon-area i {
        background-color: #fff;
        color: #80ffd2;
        font-size: 27px;
        padding: 7px;
        border-radius: 50%; 
        margin-top: 91px; 
        margin-right: -27px;
    
    }
    
}*/

.close-btn:hover {
	color: #80ffd2;
}

#search:target {
	height: 10vh !important;
	opacity: 1;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	visibility: visible;
}

#search:target .close-btn {
	display: block;
}

#searchbox {
	/* background: transparent; */
	border: solid #fff;
	border-width: 0 0 1px 0;
	color: #425d98;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 none;
	font-size: 25px;
	max-width: 66%;
	outline: 0;
	padding: 10px 3px;
}

.close-btn {
	display: none;
	color: #fff;
	font-size: 2rem;
	position: absolute;
	top: 0.8rem;
	right: 2rem;
}

/*======= 3. Header Area CSS =========*/
.header-content-area {
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-image: url('img/home/header.png');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/*3.1 Header Pattern Image*/
.header-pattern-1 {
	position: absolute;
	left: 23%;
	top: 10%;
}

.header-pattern-2 {
	position: absolute;
	left: 4%;
	top: 69%;
}

.header-pattern-1 img {
	-webkit-animation: spin 10s linear infinite;
	animation: spin 10s linear infinite;
	width: 76%;
}

.header-pattern-2 img {
	-webkit-animation: spin 10s linear infinite;
	animation: spin 10s linear infinite;
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*3.2 Header ArtWork Animation */
.header-animation-area {
	position: relative;
	padding: 0 20px 0 20px;
}

.header-1-artwork {
	position: absolute;
	right: 60px;
	bottom: -150px;
}

.layer {
	position: relative;
	z-index: -1;
}

.layer-1 {
	position: absolute;
	left: -40px;
	bottom: 0px;
}

.layer-2 {
	position: absolute;
	right: -55px;
	bottom: 0px;
}

.layer-3 {
	position: absolute;
	right: -30px;
	top: -50px;
	z-index: -1;
}

.layer-3 img {
	-webkit-animation: spin 10s linear infinite;
	animation: spin 10s linear infinite;
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.logo-principal {
	width: 100%;
	text-align: center;
	padding: 0 40px 15px 40px;
}

/*3.3 Intro Text*/

/* 
.intro-text {
	text-align: left;
	padding-top: 60px;
}

.intro-text-2 {
	text-align: right;
	padding-top: 150px;
}

.intro-text h1 {
	text-transform: capitalize;
	font-size: 50px;
	line-height: 65px;
	color: #3e3d3d;
	margin-bottom: 10px;
	font-weight: 900;
}
 */

/*3.4 Header Button */
.learnmore {
	margin-top: 25px;
	position: relative;
	display: inline-block;
}

.learnmore2 {
	position: absolute;
	right: -55px;
	top: 7px;
	z-index: 9;
	display: inline-block;
}

.learnmore .skill-btn {
	background: #323657;
	-webkit-box-shadow: 0px 1px 26px rgba(41, 147, 34, 0.62);
	box-shadow: 0px 1px 26px rgba(41, 147, 34, 0.62);
	border-radius: 50px;
	text-decoration: none;
	color: #fff;
	text-transform: capitalize;
	display: inline-block;
	padding: 15px 40px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	font-size: 16px;
	font-weight: 700;
}

.skill-btn-youtube i {
	color: #323657;
	font-size: 40px;
	transition: 0.5s;
}

.skill-btn-youtube i:hover {
	color: #fff;
}

.learnmore .skill-btn:hover {
	color: #323657;
	background-color: #fff;
}

/*========= 4. Home Sobre Nosotros Area CSS =========*/
/* .home-about-area {
	padding: 120px 0 60px 0;
	background-color: #fff;
}
*/

.politica-area {
	padding: 100px 100px 50px 100px;
}

.big-banner {
	background-color: white;
	padding: 36px 0;
	/* background-image: url('img/home-about.png'); */
	background-repeat: no-repeat;
	background-size: cover;
	height: 433px;
	width: 100%;
	background-position: center;
	margin-top: 20px;
}

.container_inicial {
	margin: 0;
	padding: 15px 0 5px 0;
}

/*4.1 Home About Content*/

/* .home-about-image img {
	width: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
*/
.home-about-text {
	text-align: justify;
	padding-top: 100px;
	position: relative;
	z-index: 1;
}

.home-about-text2 {
	text-align: center;
	color: #425d9d;
	padding-right: 15px;
	padding-top: 49px;
	padding-left: 15px;
	position: relative;
	z-index: 1;
}

.home-about-text-p {
	color: #425d9d;
	font-size: 20px;
}

/*========= 5. Service Area CSS ==========*/
.services-area {
	padding: 120px 50px 45px 50px;
	background-color: #425d9d;
	/*background: linear-gradient(to top, #FDFFFD, #F5FFF5, rgba(66, 93, 158, 1));*/
	position: relative;
}

.section-heading-2-p {
	padding: 0 20px 0 0;
}

.section-heading-2 {
	padding: 0 20px 30px 0;
}

/*5.1 Curve SVG*/
#curve {
	position: absolute;
	top: -1px;
	left: 0;
	transform: rotate(180deg);
}

/*No tocar el color de la curva*/
#curve path {
	fill: #fff;
}

.single-service {
	background: #ffffff;
	/* box-shadow: 0px 1px 15px black; */
	box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.55);
	border-radius: 14px;
	text-align: center;
	padding: 55px 30px 30px 30px;
	position: relative;
	z-index: 1;
}

/*5.2 Single Service Pattern*/
.servive-p-1 {
	position: absolute;
	top: -80px;
	left: -50px;
}

.servive-p-2 {
	position: absolute;
	bottom: 4px;
	left: -196px;
}

/*5.3 Single Service Animation*/
.servive-p-1 img {
	-webkit-animation: sp 3s linear infinite;
	animation: sp 3s linear infinite;
}

.servive-p-2 img {
	-webkit-animation: sp 3s linear infinite;
	animation: sp 3s linear infinite;
}

@keyframes sp {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*5.4 Single Service Text*/
.service-text h3 {
	background: linear-gradient(253.52deg, #66cccc 8.92%, #80ffd2 96.59%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
}

.service-text p {
	font-size: 15px;
	line-height: 21px;
}

.servicio-icon img {
	height: 60px;
	margin-bottom: 20px;
}

.service-mt-30 {
	margin-top: 30px;
	margin-bottom: 25px;
}

/*=========6. Servicios Area CSS==========*/

.proyectos-area {
	padding: 120px 55px;
	background-color: #425d9d;
	/*background: -webkit-linear-gradient(to bottom, #FDFFFD, #F5FFF5A8, #a3f2a324); 
	background: linear-gradient(to bottom, #FDFFFD, #F5FFF5A8, #a3f2a324);
	*/
	border-bottom-left-radius: 50% 20%;
	border-bottom-right-radius: 50% 20%;
}

/*6.1 Portfolio Pattern*/
.proyectos-pattern {
	position: relative;
	z-index: 1;
	padding-left: 10px;
}

.p-pattern {
	position: absolute;
	top: 0;
	right: 100px;
	z-index: -1;
}

.p-pattern img {
	-webkit-animation: pp 3s linear infinite;
	animation: pp 3s linear infinite;
}

@keyframes pp {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

.portfolio-button-area {
	text-align: right;
}

.single-portfolio-item img {
	border-radius: 15px;
	width: 100%;
}

/*6.2 Portfolio Item*/
.single-portfolio-item {
	position: relative;
	margin: 0 15px;
}

.single-portfolio-item:last-child {
	margin-right: 0px;
}

.single-portfolio-item:hover .portfolio-item-content {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

.portfolio-item-content {
	position: absolute;
	left: 3%;
	top: 3%;
	width: 94%;
	height: 94%;
	background-color: rgba(255, 255, 255, 0.95);
	transition: 0.6s;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.7);
	border-radius: 10px;
}

.item-icon {
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%, -50%);
}

.item-icon i {
	background-color: #d7d7d7;
	color: #fff;
	font-size: 30px;
	height: 60px;
	width: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	transition: 0.5s;
}

.item-icon i:hover {
	background-color: #80ffd2;
}

.item-text {
	position: absolute;
	bottom: 10px;
	left: 0;
	padding: 20px;
}

.item-text h5 {
	background: linear-gradient(253.52deg, #84fc6a 8.92%, #48d6f2 96.59%);
	background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-weight: 700;
	font-size: 22px;
}

.item-text p {
	font-size: 16px;
	line-height: 22px;
	text-align: left;
}

/*6.3 Portfolio Item Arrow*/
.left-arrow {
	position: absolute;
	right: 90px;
	top: -70px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 39px;
	text-align: center;
	border: 2px solid #80ffd1;
	background: whitesmoke;
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: 0.5;
	transition: 0.5s;
	padding-top: 0px;
}

.right-arrow {
	position: absolute;
	right: 30px;
	top: -70px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 39px;
	text-align: center;
	border: solid 2px #80ffd1;
	background: whitesmoke;
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: 0.5;
	transition: 0.5s;
	padding-top: 0px;
}

.right-arrow:hover {
	opacity: 1;
}

.left-arrow:hover {
	opacity: 1;
}

/*========= Valores ==========*/
.acordeon {
	margin: 20px auto;
	color: black;
	background-color: #fff;
	padding: 45px 45px;
	text-align: center;
	font-size: 35px;
	box-shadow: 0px 1px 31px rgb(187 187 187 / 25%);
	border-radius: 20px;
}

.acordeon .contenedor {
	position: relative;
	margin: 10px 10px;
	padding-top: 22px;
}

/* Posiciona las etiquetas en relación con el contenedor. Añade relleno en la parte superior e inferior y aumenta el tamaño de la fuente. También hace que su cursor sea un puntero */

.acordeon .etiqueta {
	position: relative;
	padding: 10px 0;
	font-size: 22px;
	font-weight: 700;
	color: #425d98;
	cursor: pointer;
	margin-bottom: 15px;
	text-transform: uppercase;
}

/*========= Valores Before y After - Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform ==========*/
.acordeon .etiqueta::before {
	content: '+';
	color: #66cccc;
	position: absolute;
	top: 50%;
	right: -5px;
	font-size: 30px;
	transform: translateY(-50%);
}

/* Oculta el contenido (altura: 0), disminuye el tamaño de la fuente, justifica el texto y añade la transición */

.acordeon .contenido {
	position: relative;
	background: white;
	height: 0;
	font-size: 15px;
	font-weight: 300 !important;
	text-align: justify;
	overflow: hidden;
	transition: 0.5s;
}

/* Añade una línea horizontal entre los contenidos */

.acordeon hr {
	width: 100;
	margin-left: 0;
	border: 1px solid #425d9b;
}

/* Muestra la parte de contenido cuando está activa. Establece la altura */

.acordeon .contenedor.activa .contenido {
	height: 100px;
}

/* Cambia de signo positivo a negativo una vez activado */

.acordeon .contenedor.activa .etiqueta::before {
	content: '-';
	font-size: 30px;
}

/*========= 7. Hosting Area CSS==========*/
.expertise-area {
	padding: 120px 55px;
	background-color: #fff;
}

.expertise-image img {
	width: 100%;
	padding-right: 15px;
	margin-top: 34px;
}

.expertise-image-header img {
	width: 100%;
	margin-left: 30px;
}

.home-expertise-text {
	text-align: right;
	/*padding-right: 35px;
	padding-left: 20px;*/
	position: relative;
	z-index: 1;
}

/*========= 8. HARDWARE CSS==========*/
.main-counter-area {
	/*padding: 120px 60px 120px 60px;*/
	padding-left: 45px;
	padding-right: 45px;
	padding-top: 50px;
}

/*8.1 Single Counter*/
.single-count-area {
	background-color: #fff;
	box-shadow: 0px 0px 10px rgba(3, 3, 3, 0.329);
	border-radius: 20px;
	text-align: center;
	padding: 23px 0 !important;
	font-size: 35px;
	font-weight: bold;
}

.container_valores {
	align-items: center;
}

/*se saca margen a las Card hardware 26 de octubre 2023*/
.single-count-item-mb {
	/* margin-bottom: 30px; */
	padding: 15px;
}

.home-counter-text {
	text-align: right;
	position: relative;
	z-index: 1;
}

.single-count-area h3 {
	background: linear-gradient(253.52deg, #66cccc 8.92%, #80ffd2 96.59%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.single-count-area p {
	font-size: 15px;
	color: #363636;
	line-height: 20px;
	font-family: 'Nunito' !important;
	font-weight: 300 !important;
	width: 100%;
	padding: 0px 30px 0px 30px;
	text-transform: none;
}

.single-count-area img {
	width: 70px;
	height: 70px;
	margin-bottom: 10px;
}

.counter-area-small {
	padding: 10px 30px 10px 0px;
}

/*========= 9. Cliente Area CSS==========*/

.container-client {
	height: 130px;
	width: 100%;
	background-repeat: no-repeat;
	background-image: url('img/home/banner/clientebackground.png');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.separador-img {
	text-align: center;
	width: 10%;
}

.separador-img img {
	height: 56px;
}

/*.client-area-back{
	width: 80%;
	text-align: center;
	position: center;
	z-index:-1;
} */

/*========= 9. Testimonial Area CSS==========*/
.testimonial-area {
	padding: 120px 0;
	background: -webkit-linear-gradient(
		to bottom,
		#fdfffd,
		#f5fff5a8,
		#a3f2a324
	);
	background: linear-gradient(to bottom, #fdfffd, #f5fff5a8, #a3f2a324);
	border-bottom-left-radius: 50% 20%;
	border-bottom-right-radius: 50% 20%;
}

/*9.1 Left Content*/
.left-content {
	float: left;
	width: 70%;
	position: relative;
}

.testi-slider-text {
	margin-top: 30px;
	padding: 0 0 0 15px;
}

.right-quote {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.quotation {
	padding-left: 15px;
}

.testi-slider-text h4 {
	font-size: 22px;
	font-weight: 700;
	margin-top: 20px;
}

.testi-slider-text h5 {
	text-transform: capitalize;
	font-size: 18px;
}

/*9.2 Right Content*/
.right-content {
	overflow: hidden;
	width: 30%;
}

.testimonial-img {
	text-align: right;
}

.testimonial-img img {
	width: 80%;
	display: inline;
	border-radius: 68% 68% 2% 68% / 35% 50% 0 38%;
	animation: morph 2s ease-in-out infinite both alternate;
}

@keyframes morph {
	0% {
		border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}

	100% {
		border-radius: 2% 68% 68% 68% / 35% 50% 0 35%;
	}
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}

/*9.3 Testimonial Arrow*/
.left-arrow-2 {
	position: absolute;
	left: 15px;
	bottom: 0px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	border: 2px solid #75dded;
	background: linear-gradient(238.45deg, #42d2ff 3.32%, #49e513 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: 0.5;
	transition: 0.5s;
	z-index: 9;
}

.right-arrow-2 {
	position: absolute;
	left: 75px;
	bottom: 0px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	border: 2px solid #75dded;
	background: linear-gradient(238.45deg, #42d2ff 3.32%, #49e513 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: 0.5;
	transition: 0.5s;
}

.right-arrow-2:hover {
	opacity: 1;
}

.left-arrow-2:hover {
	opacity: 1;
}

/*========= 11. Blog Area CSS==========*/
.home-blog-area {
	background-color: #f7fff7;
	padding: 120px 54px;
}

/*11.1 Single Blog Image*/
.s-blog-image {
	position: relative;
	overflow: hidden;
}

.home-single-blog:hover .s-blog-image img {
	transform: scale(1.1);
}

.s-blog-image img {
	width: 100%;
	transition: 0.5s;
	transform: scale(1);
}

/*11.2 Single Blog PostDate*/
.blog-post-date {
	position: absolute;
	right: 0;
	top: 30px;
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #80ffd2 96.59%);
	border-radius: 30px 0px 0px 30px;
	border-radius: 30px 0px 0px 30px;
	color: #fff;
	width: 80px;
	height: 40px;
	font-weight: 700;
	text-transform: capitalize;
	line-height: 40px;
	text-align: center;
	transition: 0.5s;
}

.s-blog-image:hover .blog-post-date {
	width: 95px;
}

/*11.3 Single Blog Content*/
.s-blog-content {
	margin-top: 25px;
}

.s-blog-content h4 {
	font-weight: 700;
	color: #425d9d;
	text-transform: capitalize;
}

.s-blog-content a {
	font-weight: 700;
	display: inline-block;
	color: #42d2fe;
	margin-top: 5px;
	margin-bottom: 10px;
}

.s-blog-content a:hover {
	background: linear-gradient(238.45deg, #49e513 3.32%, #42d2ff 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

/*========= 11. Footer Area CSS ==========*/

.big-footer {
	background-color: #425d9d;
	padding: 70px 35px 70px 35px;
	background-image: url('img/./f-pattern.png');
}

#footer-fixed {
	width: 100%;
}

.footer-logo img {
	width: 200px;
}

.footer-logo p {
	color: #fff;
	line-height: 26px;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 15px;
}

.p_footer {
	width: 100%;
	line-height: 18px !important;
	text-align: justify;
}

/*12.1 Footer Social*/
.social {
	margin-left: 15px;
}

.social ul li {
	display: inline-block;
	margin-right: 15px;
}

.social ul li:last-child {
	margin-right: 0;
}

.social ul li a {
	display: inline-block;
	color: #ffffff;
	font-size: 20px;
	text-align: center;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.social ul li a:hover {
	color: #85ff7f;
}

/*12.2 Footer Content*/
.footer-heading h3 {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-top: 5px;
}

.footer-logo {
	margin-left: 15px;
}

.footer-content ul {
	margin-top: 30px;
}

.footer-columna-link {
	margin-left: 56px;
}

.footer-columna-ultimos {
	margin-left: 12px;
}

.footer-content.footer-cont-mar-40 ul {
	margin-top: 0px;
}

.footer-content ul li a {
	color: #efefef;
	font-size: 16px;
	text-transform: capitalize;
	line-height: 24px;
}

.footer-content ul li a:hover {
	color: #85ff7f;
}

.footer-content form {
	margin-top: 0px;
}

.footer-content form input#leadgenaration {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
	padding: 15px 0px;
	margin-bottom: 30px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	display: block;
	width: 100%;
	margin-top: 12px;
	/*se agrego margin top julio 25*/
}

.footer-content form input#subscribe {
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #80ffd2 96.59%);
	box-shadow: 0px 2px 15px rgba(164, 164, 164, 0.25);
	border-radius: 68px;
	border: none;
	color: #fff;
	padding: 10px 25px;
	cursor: pointer;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	font-size: 15px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.footer-content form input#subscribe:hover {
	background: linear-gradient(252.62deg, #80ffd2 8.92%, #48d6f2 96.59%);
}

.footer-content form input#leadgenaration:focus {
	padding: 15px 10px;
}

/*12.3 Copyright Text*/
footer {
	background-color: #090c21;
	text-align: center;
	padding: 20px 15px 20px 15px;
	width: 100%;
}

footer p {
	margin: 0;
	color: #fff;
	font-size: 15px;
	text-align: center;
}

/* footer QR */

.img-qr {
	margin-left: -20px;
}

/*============= 13. Blog Details Page ==============*/
/*13.1 Blog Banner*/

.blog-hero-banner {
	background-image: url(img/servicios/servicio-bg.jpg);
	width: 100%;
	height: 50vh;
	background-position: center;
	background-size: cover;
	position: relative;
}

.blog-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
}

.blog-hero-banner-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.blog-hero-banner h1 {
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.blog-hero-banner p {
	color: #fff;
}

.blog-body {
	background-color: #fff;
}

.blog-area {
	padding: 120px 0;
}

/*13.2 Blog Side*/
.left-side {
	padding: 60px 20px 20px 0px;
}

.right-side {
	padding: 60px 0px 20px 20px;
}

.left-side-2 {
	padding: 0px 20px 20px 0px;
}

.right-side-2 {
	padding: 0px 0px 20px 0px;
}

.blog-post-heading h1 {
	font-size: 37px;
	color: #363636;
	text-transform: capitalize;
	margin-top: 30px;
	font-weight: 700;
}

.blog-post-heading span {
	font-weight: 700;
	text-transform: capitalize;
}

/*13.3 Blog Search*/
.reingenieria-title {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	color: #425d98;
}

.blog-search input {
	width: 100%;
	background-color: #f9f9f9;
	border: none;
	padding: 15px 10px;
	position: relative;
}

.blog-search-icon-small {
	position: absolute;
	top: 45px;
	right: 30px;
	background: none;
	border: none;
	color: #ddd;
	font-size: 15px;
	cursor: pointer;
}

.blog-body-content {
	padding: 0;
}

.blog-body-content p {
	font-size: 16.5px;
	line-height: 28px !important;
}

.blog-inner {
	padding: 20px 0;
}

.blog-inner img {
	width: 100%;
}

.blog-inner_2 img {
	width: 100%;
	margin: 30px 0px 0px 0px;
}

/*13.4 Blog Social Share*/
.blog-share {
	margin-top: 30px;
}

.blog-share h4 {
	font-size: 21px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.blog-share ul {
	margin-top: 20px;
}

.blog-share ul li {
	display: inline-block;
	margin-right: 8px;
}

.blog-share ul li a {
	display: inline-block;
	/* background: linear-gradient(252.62deg, #48d6f2 8.92%, #84fc6a 96.59%); */
	background: linear-gradient(238.45deg, #49d7f1 15.32%, #78f9d6 72.6%);
	color: #fff;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	font-size: 15px;
}

/*13.5 Blog Author*/
.author-profile {
	margin-top: 40px;
}

.author-profile h3 {
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin: 0;
	padding-bottom: 10px;
	color: #363636;
	padding-left: 20px;
}

.author-content {
	background-color: #f9f9f9;
	padding: 20px;
}

.author-profile img {
	width: 100%;
	margin-bottom: 30px;
}

.author-profile h4 {
	margin-bottom: 0;
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	color: #363636;
}

.author-profile span {
	text-transform: capitalize;
	font-size: 16px;
}

.author-profile p {
	font-size: 15.5px;
	margin-top: 10px;
	line-height: 27px;
}

/*13.6 Blog Category*/
.main-category {
	margin-top: 40px;
}

.main-category h3 {
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin: 0;
	padding-bottom: 10px;
	color: #363636;
	padding-left: 20px;
}

.category-list {
	background-color: #f9f9f9;
	padding: 20px;
}

.category-list ul li {
	padding: 11px 0;
	border-bottom: 1px solid #ebebeb;
	color: #212121;
	font-size: 15px;
}

.category-list ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.category-list ul li:first-child {
	padding-top: 0;
}

.category-list ul li a {
	color: #363636;
	font-size: 15px;
	text-transform: capitalize;
}

.category-list ul li a:hover {
	background: linear-gradient(238.45deg, #42d2ff 3.32%, #49e513 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

/*13.7 Blog Tags*/
.main-tags {
	margin-top: 40px;
}

.main-tags h3 {
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin: 0;
	padding-bottom: 10px;
	color: #363636;
	padding-left: 20px;
}

.tag-list {
	background-color: #f9f9f9;
	padding: 20px;
}

.tag-list ul li {
	display: inline-block;
	margin: 5px;
}

.tag-list ul li a {
	padding: 5px;
	font-size: 15px;
	color: #363636;
	display: inline-block;
	border: 1px solid #ebebeb;
	text-transform: capitalize;
}

.tag-list ul li a:hover {
	background: linear-gradient(252.62deg, #80ffd2 8.92%, #80ffd2 96.59%);
	border: 1px solid transparent;
}

/*13.8 Blog Comments*/
.single-comment {
	margin-bottom: 25px;
	display: block;
}

.single-comment:last-child {
	margin-bottom: 0;
}

.comment-heading h4 {
	font-size: 21px;
	margin: 40px 0;
	font-weight: 600;
	text-transform: capitalize;
}

.image-box {
	float: left;
	margin-right: 20px;
}

.image-box img {
	width: 80px;
	height: 80px;
}

.text-box {
	overflow: hidden;
}

.text-box p {
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}

/*13.9 Blog Comments Reply*/
.text-box a.replay {
	background-color: #f9f9f9;
	color: #212121;
	padding: 2px 11px;
	display: inline-block;
	text-transform: capitalize;
	font-size: 13px;
	margin-top: 10px;
}

.text-box a.replay:hover {
	background: linear-gradient(252.62deg, #48d6f2 8.92%, #84fc6a 96.59%);
}

.nesting-reply {
	margin-top: 30px;
	overflow: hidden;
}

.nesting-reply img {
	width: 60px;
	height: 60px;
}

.nesting-reply a.replay {
	background-color: #f9f9f9;
	color: #212121;
	padding: 2px 9px;
	display: inline-block;
	text-transform: capitalize;
	font-size: 13px;
	margin-top: 10px;
}

.comment-field input {
	width: 100%;
	background-color: #f8f8f8;
	margin-bottom: 20px;
	padding: 10px;
	border: none;
}

.comment-field textarea {
	width: 100%;
	background-color: #f8f8f8;
	margin-bottom: 10px;
	border: none;
	padding: 10px;
}

.comment-field #postcomment {
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #84fc6a 96.59%);
	border-radius: 68px;
	color: #fff;
	padding: 10px 30px;
	font-weight: 700;
	font-size: 18px;
	text-transform: capitalize;
	margin-top: 25px;
	display: inline-block;
	border: none;
	cursor: pointer;
}

.comment-field #postcomment:hover {
	background: linear-gradient(253.52deg, #84fc6a 8.92%, #48d6f2 96.59%);
}

/*=========== 14. Blog List Area CSS =============*/
.blog-hero-home {
	background-image: url(img/blog/blog-home.jpg);
	width: 100%;
	height: 50vh;
	background-position: center;
	background-size: cover;
	position: relative;
}

.blog-hero-home:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
}

.blog-home-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.blog-home-text h1 {
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.blog-home-text p {
	color: #f9f9f9;
}

.main-blog-list {
	padding: 120px 0;
}

/*14.1 Blog Pagination*/
.next-previous-page {
	margin: 60px 0 0 0;
}

.page-link {
	padding: 0.7rem 1.2rem;
	color: #323657;
	margin: 0 1px;
}

.page-link:hover {
	z-index: 2;
	color: #fff;
	text-decoration: none;
	background-color: #323657;
	border-color: #323657;
}

.page-item.active .page-link {
	z-index: 1;
	color: #fff;
	background-color: #323657;
	border-color: #323657;
}

.pagination {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.about-content-p {
	margin: 0;
	font-size: 18px;
	line-height: 25px;
	color: #363636;
	text-align: justify;
	font-family: 'Nunito' !important;
	font-weight: 300 !important;
	width: 100%;
}

/*========= 15. Servicios Area CSS =========*/
.servicio-area {
	background-color: #fff;
	padding: 100px 70px 100px 70px;
}

.servicio-area-variedad {
	background-color: #fff;
	padding: 100px 70px 61px 70px;
}

.servicio-blog-area {
	padding: 120px 135px;
}

.servicio-otros {
	padding: 12px 70px 43px 70px;
}

/*========= 15. Nosotros Area CSS =========*/
.valores-area {
	background-color: #425d98;
	padding: 100px 50px 100px 50px;
}

.politica-area {
	padding: 100px 100px 100px 100px;
}

/*15.1 Team Banner*/
.team-hero-banner {
	background-color: #fff;
	background-image: url(img/servicios/servicio-bg.jpg);
	width: 100%;
	height: 50vh;
	background-position: center;
	background-size: cover;
	position: relative;
}

.team-hero-banner img {
	width: 100%;
}

.team-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50vh;
	background-color: rgba(0, 0, 0, 0.2);
}

.team-banner-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.team-banner-text h1 {
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.team-banner-text p {
	color: #fff;
}

/*15.2 Team Content*/
.team-image {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
}

.team-image img {
	width: 100%;
}

.person-name {
	margin-top: 30px;
	transition: 0.6s;
}

.person-name h4 {
	font-weight: 700;
	color: #363636;
	text-transform: capitalize;
	font-size: 17px;
	margin: 5px 0;
}

.person-name p {
	color: #363636;
	font-size: 17px;
	line-height: 23px;
	font-weight: 300 !important;
}

.team-content {
	position: absolute;
	left: 3%;
	top: 3%;
	width: 94%;
	height: 94%;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.7);
	-webkit-transition: 0.6s;
	transition: 0.8s;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.team-image:hover .team-content {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.single-team:hover .person-name {
	margin-left: 15px;
}

/*15.3 Team Social*/
.team-social ul li {
	display: inline-block;
	margin-right: 7px;
}

.team-social ul li a {
	display: inline-block;
	color: #323657;
	font-size: 16px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px solid #323657;
	border-radius: 50%;
}

.team-social ul li a:hover {
	color: #fff;
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #84fc6a 96.59%);
	border: 1px solid transparent;
}

/*========= 16. Contact Us Area CSS =========*/

.contactus-area {
	background-color: #fff;
	/*padding: 160px 0 120px 0;*/
}

/*16.1 Contact Us Banner*/
.contact-hero-banner {
	background-color: #fff;
	/* background-image: url(img/contacto/contact-bg-extendido-abajo.jpg); */
	width: 100%;
	/* height: 100vh; */
	background-position: center;
	background-size: cover;
	position: relative;
}

/*arreglo img de contacto con la ola 16 agosto*/
.contact-hero-banner img {
	width: 100%;
	height: 100vh;
}

.contact-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(5, 5, 5, 0.212);
}

.contact-banner-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.contact-banner-text h1 {
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.contact-banner-text p {
	color: #fff;
}

/*16.2 Contact Pattern*/

.contact-left-bg {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

.contact-left-bg img {
	-webkit-animation: cp1 3s linear infinite;
	animation: cp1 3s linear infinite;
}

@keyframes cp1 {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

.contact-right-bg {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.contact-right-bg img {
	-webkit-animation: cp2 3s linear infinite;
	animation: cp2 3s linear infinite;
}

@keyframes cp2 {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(-30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*16.3 Single Contact Info*/
.single-contact-area {
	position: relative;
	z-index: 1;
}

/* MAPA */
.map-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	margin-bottom: 50px;
	position: relative;
	height: 0;
	margin-right: 18px;
	margin-left: 17px;
	border-radius: 14px;
}

.map-responsive iframe {
	left: 0;
	top: 50px;
	height: 100%;
	width: 100%;
	position: absolute;
	border-radius: 14px;
}

/* --------------------------- */

/* single-contact-info */
.single-contact-info {
	background-color: #fff;
	-webkit-box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.25);
	box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.55);
	padding: 49px 0;
	text-align: center;
	margin: 0 20px;
	border-radius: 14px;
}

.single-contact-info-2 {
	background-color: #007bff;
	-webkit-box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.25);
	box-shadow: 0px 2px 25px #6c757dd1;
	padding: 49px 0;
	text-align: center;
	margin: 0 20px;
	border-radius: 14px;
}

/* --------------------------- */

.info-icon {
	margin-top: 0px;
	margin-bottom: 27px;
}

.textcontacto {
	font-weight: 300;
}

.textcontacto-redes {
	color: white;
}

.social ul {
	margin-top: 15px;
}

.footer-socials {
	margin-right: 1%;
}

.info-icon i {
	border: #425d9b 2px solid;
	color: #425d9b;
	background-color: white;
	height: 90px;
	width: 90px;
	line-height: 90px;
	text-align: center;
	border-radius: 50%;
	font-size: 29px;
}

.info-icon-2 i {
	/* border: #48d6f2 2px solid; */
	color: #007bff;
	background-color: white;
	height: 90px;
	width: 90px;
	line-height: 90px;
	text-align: center;
	border-radius: 50%;
	font-size: 29px;
}

.info-content h6 {
	background-color: #425d9b;
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 19px;
}

.info-content-2 h6 {
	color: white;
	background-clip: border-box;
	-webkit-background-clip: text;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 19px;
}

/*16.4 Contact Form*/
.contact-form-area {
	background: #fff;
	-webkit-box-shadow: 0px 9px 45px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.55);
	border-radius: 26px;
	padding: 100px;
	margin: 50px 20px 0 20px;
	position: relative;
	z-index: 1;
}

.contact-form-heading h3 {
	color: #425d9b;
	text-align: center;
	margin-bottom: 60px;
	font-weight: 600;
	font-size: 21px;
}

.contact-form-area input[type='text'] {
	width: 49.6%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #425d9b;
	padding: 10px 5px;
	color: #425d9b;
}

.contact-form-area input[type='email'] {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #425d9b;
	margin-top: 60px;
	margin-bottom: 60px;
	color: #425d9b;
	padding: 10px 5px;
}

.contact-form-area textarea {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #425d9b;
	color: #425d9b;
	padding: 10px 5px;
}

/*16.5 Contact Form Button*/
.send-btn {
	text-align: center;
	margin-top: 80px;
}

#formsend {
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #80ffd2 96.59%);
	color: #fff;
	border: none;
	padding: 12px 42px;
	text-transform: capitalize;
	font-weight: 700;
	cursor: pointer;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	border-radius: 68px;
}

#formsend:hover {
	background: linear-gradient(253.52deg, #80ffd2 8.92%, #48d6f2 96.59%);
}

/*=========== 17. Portfolio Area CSS ==============*/

.portfolio-main-area {
	background-color: #fff;
	padding: 120px 55px;
}

.containerPortfolio {
	padding: 0 70px 0 70px;
}

/*17.1 Portfolio Banner*/
.portfolio-hero-banner {
	background-color: #fff;
	/* background-image: url(img/blog/BannerBlog.png); */
	width: 100%;
	/* height: 80vh; */
	background-position: center;
	background-size: cover;
	position: relative;
}

.portfolio-hero-banner img {
	width: 100%;
}

/* !cambio de tamaño de banner */
.portfolio-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 75vh;
	/* !cambio de tamaño del vh  */
	background-color: rgba(5, 5, 5, 0.212);
}

.portfolio-hero-banner img {
	object-fit: cover;
	height: 75vh;
	/* !cambio de tamaño del vh  */
}

.imgBannerContacto {
	object-position: center;
	object-fit: cover;
}

/*17.2 Portfolio Content*/
.portfolio-hero-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.portfolio-hero-text h1 {
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.portfolio-hero-text p {
	color: #fff;
}

.portfolio-intro p {
	text-align: center;
	font-weight: 600;
	margin-bottom: 60px;
	font-size: 20px;
}

.single-portfolio img {
	width: 100%;
}

.single-portfolio {
	overflow: hidden;
}

.portfolio-image {
	overflow: hidden;
	display: block;
}

.portfolio-image img {
	border-radius: 10px;
}

.portfolio-titile h4 {
	font-size: 18px;
	text-transform: capitalize;
	color: #323657;
	font-weight: 700;
	margin-top: 13px;
	transition: 9999s;
}

.portfolio-headmove:hover .portfolio-titile h4 {
	margin-left: 150px;
}

.portfolio-content {
	position: absolute;
	left: 6%;
	top: 3%;
	width: 88%;
	height: 84%;
	background-color: rgba(255, 255, 255, 0.95);
	-webkit-transition: 1s;
	transition: 0.6s;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.7);
	border-radius: 10px;
}

.portfolio-content a {
	background: linear-gradient(to bottom, #84fc6a 8.92%, #48d6f2 96.59%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: capitalize;
	font-size: 17px;
	font-weight: 700;
	margin-top: 10px;
	display: block;
}

.portfolio-content p {
	color: #323657;
	font-size: 17px;
	line-height: 25px;
}

.single-portfolio:hover .portfolio-content {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

/*17.3 Portfolio Filtering*/
.portfolio-filter {
	text-align: center;
	margin-bottom: 30px;
}

.portfolio-filter li {
	display: inline-block;
	margin-right: 25px;
	position: relative;
}

.portfolio-filter li:last-child {
	margin-right: 0px;
}

.portfolio-filter li a {
	display: inline-block;
	padding: 8px 0px;
	color: #000;
	text-transform: capitalize;
}

.portfolio-filter li.active:before {
	position: absolute;
	content: '';
	width: 100%;
	-webkit-box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	border: solid 1px transparent;
	border-image-outset: 0;
	border-image-repeat: stretch;
	border-image-slice: 100%;
	border-image-source: none;
	border-image-width: 1;
	border-image: linear-gradient(238.45deg, #49e513 3.32%, #42d2ff 98.6%);
	border-image-slice: 100%;
	border-image-slice: 1;
	bottom: 0;
	left: 0;
	-webkit-transition: 1s;
	transition: 1s;
}

/*========= 18. Portfolio Details Area CSS=========*/
.portfolio-details {
	padding: 0px 0px;
	background-color: #fff;
}

.portfolio-details-box {
	-webkit-box-shadow: 0px 4px 60px rgba(191, 191, 191, 0.25);
	box-shadow: 0px 4px 60px rgba(191, 191, 191, 0.25);
	padding: 16px 0 16px 19px;
}

.portfolio-screenshot img {
	width: 100%;
}

.container-hardware {
	padding: 0 70px 0 70px;
}

/*18.1 Project  Description*/
.project-description h3 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
}

.project-description p {
	padding-right: 30px;
}

.project-name {
	margin-bottom: 15px;
}

.project-name h3 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
	padding-top: 20px;
}

.project-info {
	background: #ffffff;
	box-shadow: 0px 4px 50px rgba(196, 196, 196, 0.25);
}

.project-info h3 {
	font-size: 23px;
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: capitalize;
}

.project-info h4 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: capitalize;
}

.project-info h4 span {
	font-weight: normal;
	text-transform: none;
}

.project-description {
	margin-right: 15px;
	margin-left: -5px;
}

.project-technology2 {
	margin-right: 12px;
}

.project-brief {
	margin-top: 50px;
}

.project-info {
	margin-top: 50px;
	background-color: #fafafa;
	padding: 30px;
}

.margin-top-project {
	margin-top: 40px;
}

/*18.2 Project  Technology*/
.project-technology h3 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
}

.project-technology {
	margin-top: 40px;
	background-color: #fafafa;
	padding: 30px;
	margin-right: -10px;
}

.project-technology ul li {
	display: inline-block;
	text-transform: capitalize;
	font-size: 16px;
	margin: 7px 0 7px 0;
	background-color: #fff;
	padding: 5px 2px 5px 2px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.project-technology ul li:hover {
	background: #80ffd2 3.32%;
}

.hardware-p-detalle {
	font-size: 16px;
	font-style: italic;
}

/*18.3 Project  Slider*/
.left-arrow-3 {
	position: absolute;
	left: 47%;
	bottom: 15px;
	z-index: 1;
	color: #fff;
	cursor: pointer;
	transform: translateX(-50%);
}

.right-arrow-3 {
	position: absolute;
	right: 47%;
	bottom: 15px;
	z-index: 1;
	color: #fff;
	cursor: pointer;
	transform: translateX(-50%);
}

/*======== 19. About Us Area CSS =======*/

.abou-us-area {
	padding: 120px 50px 120px 50px;
	background-color: #fff;
}

.about-content-wg {
	padding-right: 35px;
	/*margin-top: 50px; ver con tati */
}

.about-content-vision {
	padding-left: 35px;
	margin-top: 50px;
}

/*19.1 About Us Banner*/
.about-hero-banner {
	background-color: #fff;
	/* background-image: url(img/nosotros/banner_nosotros.png); */
	width: 100%;
	height: 50vh;
	background-position: center;
	background-size: cover;
	position: relative;
}

/* inicio */
.about-separador-banner {
	background-color: #fff;
	background-image: url(img/nosotros/nosotros-separador-azul.png);
	width: 100%;
	height: 10vh;
	background-size: cover;
	position: relative;

	/* actual: */
	/* margin-top: 25px; */

	/* propuesta: */
	margin-top: 0px;
}

.about-hero-banner img {
	width: 100%;
}

.about-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50vh;
	background-color: rgba(0, 0, 0, 0.1);
}

.about-hero-banner img {
	width: 100%;
}

/*19.2 About Hero Text*/
.about-hero-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.about-hero-text h1 {
	color: #fff;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.about-hero-text p {
	color: #fff;
}

/* ===============h1 para SEO=========== */

/* ##pagina principal: */

/* nuestros servicios -> Servicios WG | Proyectos */
.seo-h1-1 {
	font-size: 35px;
	font-weight: 600;
}

/* nuestros servicios -> Hosting | Hardware */
.seo-h1-2 {
	font-size: 35px;
	font-weight: 600;
}

/* ## Titulos de paginas */

.seo-h1-titulos h1 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px !important;
	display: inline-block;
	margin-top: -10px;
}

.seo-h1-titulos h1:before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -14px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
	transform: translateX(-50%);
}

/* pagina hardware: */

.seo-h1-titulos-hardware h1 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px !important;
	display: inline-block;
	margin-top: 110px;
	line-height: 42px;
}

.seo-h1-titulos-hardware h1:before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -14px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
	transform: translateX(-50%);
}

/* pagina de proyectos */

.seo-h1-titulos-proyectos h1 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px !important;
	display: inline-block;
	margin-top: -10px;
	line-height: 42px;
}

.seo-h1-titulos-proyectos h1:before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -14px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
	transform: translateX(-50%);
}

/* color: #80ffd1 */

/* ===============fin h1 para SEO=========== */

/*19.3 About Video*/
.video-play-button:before {
	content: '';
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 80px;
	height: 80px;
	background: #33b506;
	border-radius: 50%;
	-webkit-animation: pulse-border 1500ms ease-out infinite;
	animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
	content: '';
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 80px;
	height: 80px;
	background: rgba(132, 252, 106, 0.5);
	border-radius: 50%;
	-webkit-transition: all 200ms;
	transition: all 200ms;
}

.video-play-button:hover:after {
	background: #6ef43f;
}

.video-play-button img {
	position: relative;
	z-index: 3;
	max-width: 100%;
	width: auto;
	height: auto;
}

.video-play-button span {
	display: block;
	position: relative;
	z-index: 3;
	width: 0px;
	height: 0;
	border-left: 20px solid #fff;
	border-top: 14px solid transparent;
	border-bottom: 13px solid transparent;
	margin-right: -6px;
}

@-webkit-keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
			scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
			scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

@keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
			scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
			scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

.video-overlay {
	position: fixed;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	-webkit-transition: all ease 500ms;
	transition: all ease 500ms;
}

.video-overlay.open {
	position: fixed;
	z-index: 1000;
	opacity: 1;
}

.video-overlay-close {
	position: absolute;
	z-index: 1000;
	top: 15px;
	right: 20px;
	font-size: 36px;
	line-height: 1;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: all 200ms;
	transition: all 200ms;
}

.video-overlay-close:hover {
	color: #fa183d;
}

.video-overlay iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
}

.youtube-video-wrapper {
	/* background: url('img/nosotros/about-video.png') top center no-repeat; */
	background-image: url(img/mqdefault_6s.webp);
	background-size: cover;
	padding: 160px 0;
	position: relative;
	text-align: center;
	border-radius: 15px;
	margin-left: -1%;
}

/* quitar borde azul en el video: */

.mfp-close {
	background-color: transparent !important;
}

.popup-gallery {
	display: inline-block;
	position: relative;
}

/*19.4 About Video Icon*/

.youtube-video-icon {
	width: 100px;
	height: 100px;
	border: 2px solid #fff;
	border-radius: 50% 50%;
	display: inline-block;
	background: #fff;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}

.youtube-video-icon i {
	font-size: 60px;
	line-height: 100px;
	color: #6b02ff;
	margin-left: 10px;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}

/* ================About team===================== */
.about-team img {
	width: 100%;
	border-radius: 15px;
}

.about-politicas img {
	width: 100%;
	border-radius: 15px;
	margin-bottom: 120px;
	margin-left: 1%;
	margin-top: 30px;
}

.about-politicas1 img {
	width: 100%;
	border-radius: 15px;
	margin-bottom: 15px;
	margin-left: 1%;
	margin-top: -5%;
}

/*19.5 About Counter*/
.about-counter-area {
	padding: 120px 0;
}

.about-counter-text {
	text-align: left !important;
}

/*19.6 About -h Content*/
.about-section-title h4 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	color: #425d98;
}

.valores-h4 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
	color: #80ffcc;
}

.valores-p {
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
}

.about-section-separate {
	margin-top: 120px;
}

.about-content-right {
	text-align: right;
}

.politica-h4 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 25px;
	color: #425d98;
	text-align: center;
}

.politica-p {
	text-align: justify;
	color: #363636;
}

/*====== 20. 404 Area CSS ========*/
.error-page-area {
	height: 100vh;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: #abd8f2;
	padding: 120px 0;
}

.error-text {
	text-align: center;
}

.error-text h2 {
	text-transform: capitalize;
	font-weight: 700;
	margin-top: 40px;
	font-size: 28px;
}

.error-text a {
	background-color: #323657;
	text-transform: capitalize;
	font-weight: 600;
	padding: 15px 30px;
	color: #fff;
	display: inline-block;
	margin-top: 30px;
	border: 2px solid transparent;
	border-radius: 68px;
}

.error-text a:hover {
	border: 2px solid #323657;
	color: #23d89b;
	background-color: #323657;
}

/*============== 21. Call to Action ============*/
.callto-action {
	background-color: #191c2f;
	color: #fff;
	padding: 35px 50px 35px 50px;
}

.callto-action-text h5 {
	font-size: 26px;
	margin: 15px;
}

.callto-action span {
	font-weight: 700;
}

.callto-action-btn {
	text-align: right;
}

.callto-action-btn a {
	background: transparent;
	border-radius: 68px;
	text-transform: capitalize;
	padding: 12px 30px;
	margin-top: -5px;
	display: inline-block;
	font-weight: 600;
	-webkit-transition: 0.7s;
	transition: 0.7s;
	border-radius: 30px;
	transition: 0.7s;
	border-radius: 30px;
	border: 2px solid #fff;
	color: #fff;
}

.callto-action-btn a:hover {
	background: linear-gradient(253.52deg, #48d6f2 8.92%, #80ffd2 96.59%);
	border: 2px solid transparent;
}

/* efecto wave julio nuevo 2023*/

.seccion-curva {
	position: absolute;
	width: 100%;
	height: calc(100% - 200px);
}

.seccion-curva .curve {
	position: absolute;
	bottom: -205px;
	height: 250px;
	width: 100%;
	transform-origin: center bottom;
	transition: all 1.5s ease 0s;
}

.seccion-curva .curve img {
	width: 100%;
	height: 100%;
}

/* font awesome: color de engranaje */
.fa-solid {
	/* background: linear-gradient(238.45deg, #49d7f1 15.32%,#78f9d6); */
	/* -webkit-text-fill-color: transparent;
-webkit-background-clip: text; */
	/*  color: #01b0e7; */
	color: #445d95;
	font-size: 0.9rem;
	margin-right: 10px;
}

/* tarjetas cards flip */
.tarjetas {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}

.tarjetas {
	display: flex;
	flex-wrap: wrap;
	/* margin: 0px 40px;
    gap: 80px; */
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.tarjeta-giratoria {
	position: relative;
	width: 300px;
	height: 350px;
	margin: 20px;
}

.tarjeta-giratoria .face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 10px;
	overflow: hidden;
	transition: 0.5s;
	background: linear-gradient(
		238.45deg,
		rgb(73, 215, 241) 15.32%,
		rgb(120, 249, 214) 72.6%
	);
}

.tarjeta-giratoria .front {
	transform: perspective(600px) rotateY(0deg);
	box-shadow: 0 5px 10px #014d57;
}

/* .tarjeta-giratoria .front img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.tarjeta-giratoria .front h3 {
	/*  position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: rgba(0,0,0,.4); */
	text-align: center;
	padding: 20px;
}

.tarjeta-giratoria .front p {
	padding: 20px;
}

.tarjeta-giratoria .back {
	transform: perspective(600px) rotateY(180deg);
	background: linear-gradient(
		238.45deg,
		rgb(73, 215, 241) 15.32%,
		rgb(120, 249, 214) 72.6%
	);
	padding: 15px;
	color: #f3f3f3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	box-shadow: 0 5px 10px #014d57;
}

.tarjeta-giratoria .back .link {
	border-top: solid 1px #f3f3f3;
	height: 50px;
	line-height: 50px;
}

/* .tarjeta-giratoria .back .link a {
    color: #f3f3f3;
} */

.tarjeta-giratoria .back h3 {
	font-size: 30px;
	margin-top: 20px;
	letter-spacing: 2px;
}

.tarjeta-giratoria .back p {
	letter-spacing: 1px;
}

.tarjeta-giratoria:hover .front {
	transform: perspective(600px) rotateY(180deg);
}

.tarjeta-giratoria:hover .back {
	transform: perspective(600px) rotateY(360deg);
}

/* fin tarjetas cards flip */

/* objetivos area */

.objetivos-area {
	padding: 40px 40px 75px 40px;
}

/* objetivos area */

/*BOTON COMPARTIR BLOG AGOSTO 9*/
/* .blog-share .footer-compartir {
    display: inline-block;
    align-items: center;
    background: linear-gradient(238.45deg, #49d7f1 15.32%, #78f9d6 72.6%);
    color: #fff;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}

.fa-solid {
    color: #ffffff;
    font-size: 0.9rem;
    margin-right: 2px;
} */
/*============================================================*/

/*BOTON COMPARTIR BLOG AGOSTO 14 sin fondo */
.blog-share .footer-compartir {
	display: inline-block;
	align-items: center;
	color: #fff;
	height: 50px;
	width: 50px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	border: 5px solid;
	border-color: #78f9d7c0 #49d8f1bb #78f9d7b2 #49d8f1be;
	cursor: pointer;
}

.footer-compartir .fa-solid {
	font-size: 20px;
	margin-top: 15px;
}

.ico2 {
	font-size: 0.9rem;
	margin-right: 2px;
	background: linear-gradient(238.45deg, #49d7f1 15.32%, #78f9d6 72.6%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

/*==============BOTON FONDO DEGRADE Y ICONO BLANCO=====================*/

.btn-compartir {
	display: inline-block;
	align-items: center;
	text-align: center;
	background: linear-gradient(238.45deg, #49d7f1 15.32%, #78f9d6 72.6%);
	color: #fff;
	height: 50px;
	width: 50px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
}

.btn-compartir .ico {
	font-size: 23px;
	margin-top: 13px;
	margin-right: 2px;
	color: #ffffff;
}

.stronger-workgroup {
	color: #425d98;
}

.portfolio-headmove {
	position: absolute;
}

.vision {
	margin: 0px 0px 10px;
}

/* Estilos para dispositivos móviles (ajusta los valores según sea necesario) */
@media screen and (max-width: 768px) {
	.row.about-section-separate {
		flex-direction: column-reverse;
		/* Cambia el orden de los elementos en dispositivos móviles */
	}

	.about-team img {
		width: 100%;
		/* Haz que la imagen ocupe todo el ancho del contenedor en dispositivos móviles */
	}

	.about-content-vision {
		text-align: center;
		/* Centra el contenido en dispositivos móviles */
	}

	.about-content-vision h4 {
		text-align: center;
	}

	.about-content-vision h4.vis {
		margin-left: -8px;
	}
}

/* NOVEDADES 12/12/2023*/

.novedadimagen {
	text-align: center;
}

.textotitulo {
	max-width: 900px;
	align-items: center;
	display: flex;
	margin: 54px auto;
}

.textotitulo2 {
	max-width: 900px;
	align-items: center;
	display: flex;
	margin: 0 auto;
}

.titulo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120px 55px;
}

.titulo h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px;
}

#subtitulo {
	text-align: center;
}

#subtitulo {
	display: block;
	margin: 0 auto;
	padding: 20px;
	text-align: left;
	margin-left: -22px;
}

.link {
	margin-top: 10px;
}

/*harware*/
.section-heading-3.cambio h3 {
	margin-top: 105px;
}

/* textos-finales 2024: */

/* saludo inicial */
.presentacion {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1vh;
	margin: 0%;
}

.presentacion__titulo {
	padding-bottom: 0%;
	padding-top: -3%;
	font-size: 20px;
}

/* fin saludo inicial */

/* seccion blog del inicio */

/* centrado de texto de la seccion blog */
.section-heading-3__blog--p {
	text-align: center;
}

/* pagina de blog */

.section-heading-3__page-blog--p {
	text-align: justify;
}

/* texto centrado al final del parrafo de blog */

.section-heading-3__page-blog--p-2 {
	text-align: center;
}

.textoarriba {
	position: absolute;
	top: 22px;
	left: 101%;
	z-index: 2;
	padding: 20px;
	background-color: transparent;
}

/* NOVEDADES 12/12/2023*/

.contanedorNovedades {
	padding: 120px 55px;
}

.novedadimagen {
	text-align: center;
}

.novedadimg {
	width: 57.7%;
	margin-top: -8%;
}

.textotitulo {
	max-width: 900px;
	align-items: center;
	display: flex;
	margin: 0 auto;
}

.textotitulo2 {
	max-width: 950px;
	align-items: center;
	margin: 0 auto;
	padding: 20px 10px 0px 10px;
}

.titulo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 0px;
}

.Titulo_centrado {
	align-items: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

.titulo h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px;
	margin-top: -9%;
}

.titulonovedades {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 40px;
	position: relative;
	font-size: 35px;
	display: inline-block;
	margin-top: 75px;
}

.titulonovedades::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -14px;
	background-color: #80ffd2;
	height: 5px;
	width: 70px;
	transform: translateX(-50%);
}

.subtitulo {
	max-width: 950px;
	align-items: center;
	display: flex;
	margin: 0 auto;
	padding: 30px 50px 0px 10px;
}

.subtitulo a {
	display: inline-block;
	margin-top: 10px;
}

/*captcha*/

.g-recaptcha {
	margin-left: 36%;
	transform: translate(-3px, 68px);
}

.captchaerror {
	margin-left: 39%;
	transform: translate(6px, 68px);
}

/* fin captcha*/
/*iphone 6 7 8 */
@media screen and (min-width: 375px) and (max-width: 667px) {
	.g-recaptcha {
		margin-left: -10.9%;
		transform: translate(-3px, 68px);
		transform: scale(0.94);
		margin-bottom: -64px;
		margin-top: 20px;
	}

	.captchaerror {
		margin-left: 4%;
		transform: translate(6px, 68px);
	}
}

/*BLOG ARREGLO*/