@charset "utf-8";
/* CSS Document */

/*
@import url(style-fonts.css);
@import url(style-vars.css);
*/
/***********************
		-	BASICS 	-
***********************/



html {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	
}
* {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
}
body {
	font-size: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
}
/***********************
		-	UTIL	-
***********************/

.centerme {
	margin-left: auto;
	margin-right: auto;
}
.centerver {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.centerVerText {			
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bottomVerText {			
	display: flex;
	flex-direction: column;
	justify-content:flex-end;
}

.centerY {
	display: flex !important;
	align-items: center;
}
img {
	width: 100%;
}
hr { }
/*******************************
	-	Textos -
********************************/


h2 {
	font-size: 3rem;
	font-weight: lighter;
	letter-spacing: -2px;

}
h1 {
	font-size: 4.4rem;
	font-weight: lighter;
	letter-spacing: -5px;
	line-height: 4rem;
}

.dest{
	font-weight: bold;
	color: var(--rojo-ld);
}

body {
	background-color: var(--bck-1);
}
/*******************************
	-	header -
********************************/


nav {
		background-color: var(--bck-1);
	opacity: 1;

}
.container-fluid {
	width: 100%;
	height: 100%;
}
/*.home{ 
	background-color: #000;
	height: 100%;
}*/


header {
	/*position: relative;
	top: 0;*/
	height: 80px;
	padding: 15px 0px;
	background-color: var(--bck-1)
}
header img {
	max-width: 250px;/* position: relative;
	top:25%;*/
}
header h1 {
	display: none;
}
/*******************************
	-	nav.main -
********************************/

#navbar {
	position: fixed;
	top:0;
	z-index: 999;
	/*height: var(--hTop-lg);*/
}

#menu-icon {
	display: none;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 1.2rem;
	/*background-image: url(../images/menu-icon@x3.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-color: #F8F7F3;
	background-position: center top;*/
	top: 7px;
	right: 10px;
	position: absolute;	/*display:inline-block;*/
	cursor: pointer;
}

nav li a {
	font-size: 1.1rem;
	border: thick #000;
	width: 100%;
	display: block;
	color: var(--menu);
	height: 40px;
	line-height: 1rem;
	padding-left: 17%;
	/*padding-top: 4px;*/
	background-color: transparent;
}
nav li a:hover {
	color: var(--active);
}
/*nav li a[id="comunicacion"]:hover  { background-color: var(--comunicacion); }
nav li a[id="servicios"]:hover { background-color: var(--servicios); }
nav li a[id="marketing"]:hover { background-color: var(--marketing); }
nav li a[id="portfolio"]:hover{ background-color: var(--portfolio); }
nav li a[id="traduccion"]:hover { background-color: var(--traduccion); }
nav li a[id="portfolio"]:hover { background-color: var(--portfolio); }
nav li a[id="contacto"]:hover { background-color: var(--contacto); }*/

nav li a {
	cursor: pointer;
}
nav li a.active {
	color: var(--active);
}
#iContent {
	height: var(--hTop-lg);
	overflow: hidden;
	position: relative;
}
#iContent img {
	display: block;
	min-width: 770px;
	/*    min-height:var(--hTop-lg);*/
	height: auto;
}


/*----------video start*/

.contIntro{
	position: absolute;
	overflow: hidden;
	/*width: 100%;*/
	height: 100%;
	display: block;
	left: calc(1 * (100%/8));
	-webkit-transition: background-color 3s ease;
    -moz-transition: background-color 3s ease;
    -o-transition: background-color 3s ease;
    transition: background-color 3s ease;
	background-color: var(--crear);
	z-index: 0;
}



video {
	position: absolute;
	top: 0;
	left: calc(50% - 600px); 
	width: 100%;/*opacity: .5;*/
	max-width: 1000px;
	z-index: 1;
	-webkit-transform:none;
	-moz-transform: none;
	-o-transform: none;
	transform:none;

}

#fijo {
    position: absolute;
	top: 60%;
	left: calc(50% - 600px);
    width: 100%;
    max-width: 1200px;
    padding: 20px 50px;
    z-index: 2;
    font-size: 1rem;
    line-height: 1.2rem;
    color: #333;
    /*font-weight: bold;*/
	font-style: oblique;
    text-align: center;
	-webkit-transition: color 3s ease;
    -moz-transition: color 3s ease;
    -o-transition: color 3s ease;
    transition: color 3s ease;

}
#fijo div {
	border: 1px solid rgb(255, 255, 255, .5);
	padding: 8px;
	border-radius: 5px;
}

#ppBtn {
	position: absolute;
	left:0;
	top: 0;
	width:1440px;
	height: 90%;
	display: block;
	/*background-color:rgba(193,90,199,0.44);*/
	/*max-height: 100%;*/
	max-width: 95%;/*opacity: .5;*/
	z-index: 10;
	-webkit-transform:none;
	-moz-transform: none;
	-o-transform: none;
	transform:none;
}




/*.intro {
	position: absolute;
	width: 33%;
	left: 32%;
	padding: 20px;
	font-size: 1.0rem;
	line-height: 1.1;
	display: none;
	top:0%;
	z-index: 2;
	color:#fff;
	font-weight: bold;
}*/
/*#ppBtn {
	 position: absolute;
	left: calc( 3 * ( 100% / 6) );
	top:1vw;
	font-size: 4.5rem;
	cursor: pointer;
	display: none;
	z-index: 3;
	color: #fff;
	opacity: .4;
}*/
/*
#ppBtn:hover {

	opacity: 1;}

*/

/*-----------------video end*/


.tContent .contComunicacion {
	background-color: var(--comunicacion);
}
.tContent .contServicios {
	background-color: var(--servicios);
}
.tContent .contMarketing {
	background-color: var(--marketing);
}
.tContent .contPortfolio {
	background-color: var(--portfolio);
}
.tContent .contTraduccion {
	background-color: var(--traduccion);
}
.tContent .contEmpresa {
	background-color: var(--empresa);
}
.tContent .contAlianzas {
	background-color: var(--alianzas);
}
.tContent .contClientes {
	background-color: var(--clientes);
}
.tContent .contContacto {
	background-color: var(--contacto);
}
.tContent .contContacto:first-child {
			margin-top: 20px;
	}






.tContent .cab {
	height: var(--hCab-lg);
}
.tContent .cab2 {
	height: var(--hCab2-lg);
}
.tContent .headCont { height: inherit; }

.tContent h1, .tContent h2 {
	color: var(--active);
	padding-left: 20px;
}

.tContent h1 {
	padding-bottom: 14px;
}
.tContent h2{
	line-height: 2.3rem;
}
.tContent .bodyCont, .tContent ul {
	color: var(--txtContenido);
	padding: 15px 5px 50px 20px;
	font-size: 1rem;
	line-height: 1.2rem;
}
.tContent ul {
	list-style-type: square;
}
.tContent li { 
	padding-bottom: 8px;
    /*padding-left: 16px;*/ 
}
/*.tContent li::before {
    content: "•";  Insert content that looks like bullets 
    padding-right: 8px;
	font-size: 1.5 rem;
    color: var(--rojo-ld);  Or a color you prefer 
}*/

.row:last-child .bodyCont {
	padding-bottom: 80px;
}
.abajo {
	display: none;
	/*background-image: url(../images/abajo.jpg);*/
	background-repeat: repeat-x;
	/*background-size: cover;*/
	height: 250px;
	position: fixed;
	bottom: 40px;
	z-index: -100;
}


/******************TOOLTIP*************************/
/******************start*************************/
.tooltip {
    position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	font-weight:normal;
	font-size: .75rem;
	/*line-height: 1.6rem;*/
	
    visibility: hidden;
    width: 60px;
    background-color: #555;
    color: #fff;
    text-align: center;
   /* border-radius: 6px;*/
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    bottom: 90%;
    left: 50%;
    margin-left: -30px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptextCenter {
	font-weight:normal;
	font-size: .75rem;
    visibility: hidden;
    width: 100%;
    background-color: #555;
    color: #fff;
    text-align: center;
   /* border-radius: 6px;*/
    padding: 3px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    /*left: 50%;*/
   /* margin-left: -30px;*/
    opacity: 0;
    transition: opacity 0.3s;
}


.tooltip .tooltiptext::after, .tooltip .tooltiptextCenter::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}


.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptextCenter {
    visibility: visible;
    opacity: 1;
}
/******************TOOLTIP*************************/
/******************end*************************/


/*************************************** HORIZONTAL*/

/* Extra small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap*/

/* Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }*/

/* Large devices (desktops, 992px and up)*/
@media (max-width: 1600px) {
		.tContent h1 {
				font-size: 3.2rem;
			letter-spacing: -3px;
			line-height: 2.4rem;
				padding-bottom: 6px;

		}

		.tContent h2 {
			font-size: 2.2rem;
			letter-spacing: -2px;
			line-height: 1.7rem;
		}
		.tContent .cab {
			height: var(--hCab-lg2);
		}
	.tContent .cab2 {
			height: var(--hCab2-lg2);
		}
}

@media (max-width: 1380px) {

	video, #fijo { left: 0; }
	
}
@media (max-width: 1200px) {

	/*#navbar{width:calc( 2 * (100% / 8))}*/
	nav li a { padding-left: 35px; }
	.contIntro { left: calc(2 * (100%/8)); }
	#iContent { height: var(--hTop-lgm);}
	.tContent .cab { height: var(--hCab-md); }
	.tContent h1 {
			font-size: 2.2rem;
			line-height: 1.7rem;
		}
	.tContent .bodyCont {padding: 25px 0px 25px 20px;}
}

@media (max-width: 992px) {
}

/* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
	

	.contIntro{ left: 0; }
	
	video {
			left:50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			}
	/*#fijo { font-size: 1rem; }*/
	#ppBtn {
		left:50%;
			top: 50%;
			/*max-height: 100%;*/
			max-width: 95%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
		
	}
	


	
	
		#navbar {
		/*	height: var(--hTop-md);*/
			width: 100%;
		}
	
	
	
		#menu-icon { display:block; }
	nav {
			display: none;
			opacity: 0;
			height: auto;
			box-shadow: rgba(0,0,0,.2) 0px 4px 4px;
		}
	nav li a {
				height: 30px;
			}
		header {
			height: 50px;
			padding: 4px 0px 0px 0px;
		}
		header img {
			max-width: 275px;
		}

		#iContent {
			height: var(--hTop-md);
			margin-top: 50px;
		}
	
		#iContent img {
			min-width: 560px;
		}
	

	
		.tContent h1, .tContent h2 {
			text-align: center;
			padding-left: 0px;
		}

		.tContent .bodyCont {
			padding: 25px 25px 25px 25px;
		}
		.tContent .contContacto:first-child {
			margin-top: 50px;
		}

}





/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {

	#fijo { 
			font-size: .9rem; 
			top:50%;		
	}
	

}

@media screen and (max-height:700px) {
		.abajo { display: none; }
}

@media screen and (max-height:450px) and (max-width: 768px) {
	.contIntro { top:30px; }
}