﻿@charset "iso-8859-1";
/* CSS Document */

/* 
Katalyst Assets

Colors 
Red: #e20303; | rgba(226,3,3,1)
Grey: #565656 | rgba(86,86,86,1)


Font
font-family: 'Maven Pro', sans-serif; 

*/

body{
	
}

/* Text */

.titleRed{
	font-family: 'Maven Pro', sans-serif;
	color: #e20303;
	font-size: 4vh;
}

.titleGrey{
	font-family: 'Maven Pro', sans-serif;
	color: #565656;
	font-size: 4vh;
}

.titleBlackShadow{
	font-family: 'Maven Pro', sans-serif;
	color: #565656;
	font-size: 4vh;
	text-align: center;
	text-shadow: 1px 2px 2px rgba(0,0,0,.3);
	background-color: rgba(255,255,255,.4);
}

.headText{
	font-family: 'Maven Pro', sans-serif;
	color: #565656;
	font-size: 4.3vh;
	font-weight: bold;
}

.redText{
	color: #e20303;
}


.midRow{
	background-color: #fff;
	border-bottom:#999 1px solid;
	border-top:#999 1px solid;
	padding:10px 0;
}

.rowImage{
	width: 70%;
}

.smallRow{
	height: 26vh;
}

/* Spacers */
.spacerR10{
	margin-right: 10px;
}

.spacerT5v{
	margin-top: 5vh;
}
.spacerT7v{
	margin-top: 7vh;
}
.spacerB10p{
	margin-bottom: 10px;
}
.spacerB20p{
	margin-bottom: 20px;
}





.pageContent> .container-fluid > .row{
	min-height:30vh;
	padding:3vh 4vw;
}

.pageContent> .container-fluid > .row:first-of-type{
	padding-top: 160px;
}


hr{
	border-color:#e20303;
}



/* Social Bar */
#socialBar{
	height:40px;
	width:100vw;
	position:fixed;
	top:0px;
	line-height:40px;
	font-size:20px;
	color:#565656;
	background-color:rgba(255,255,255,.4);
	border-bottom:#999 1px solid;
	z-index:9;
	transition:background-color linear 700ms;
}
	#socialBar.solid{
		background-color:rgba(255,255,255,1);
	}

	#socialBar i{
		padding:10px;
		border-left:#999 1px solid;
	}

	#socialBar i:last-child{
		border-right:#999 1px solid;
	}


/* Navigation */
#navigation{
	width:100vw;
	position:fixed;
	top:40px;
	border-bottom:#999 1px solid;
	background-color:rgba(255,255,255,.4);
	z-index:10;
	
	font-family: 'Maven Pro', sans-serif;
	font-weight:bold;
		
	transition: height linear 500ms;
}


#navigation img{
	transition: width linear 500ms;
}

#navigation a.navi{
	float:right;
	cursor:pointer;
	transition: all linear 300ms;
	color:rgba(0,0,0,.7);	
}

#navigation a.navi:hover{
	text-decoration:none;
	border-bottom:#e20303 3px solid;
	color:#e20303;
}


#navigation.solid{
	background-color:rgba(255,255,255,.95);
	box-shadow:0 2px 4px rgba(0,0,0,.15);
}


#navigation.biggie{
	height:12vh;
	font-size: 1.5vw;
	line-height: 1.5vw;
}

#navigation.biggie img{
	width: 17%;
}

#navigation.biggie a{
	height:12vh;
	padding:25px;
}


#navigation.small{
	height:9vh;
	font-size: 1vw;
	line-height: 1vw;
}

#navigation.small img{
	width: 12%;
}

#navigation.small a{
	padding:25px;
	height:9vh;
}




/* Footer */
#footer{
	height: 18vh;
	background-color:#565656;
	border-top:#e20303 2px solid;
	color:#fff;
	padding:12px;
}

/* Sections */
.sectionBack{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment: fixed;
}

/* Home Page */
#homePage{
	background-image:url(/img/bg-home.jpg);
}

	/* Home Slider */
	.homeSliderItem{
		height:70vh;
		padding-top:160px;
	}

	.slideHeader{
		color: #e20303;
		font-family: 'Maven Pro', sans-serif;
		text-align: right;

		padding-right: -5px;
	}

	.slideText{
		margin-top: 15px;
		padding: 5px 18px 5px 5vw;

		text-align: right;
		font-size: 1.2vw;

		border-right: #e20303 2px solid;
	}

	.carousel-indicators{
		z-index: 8
	}

	.carousel-indicators li{
		width:20px;
		height:20px;
		border-radius:15px;
		background-color:rgba(255,255,255,1);
		border: rgba(226,3,3,.5) 2px solid;
	}

	.carousel-indicators li.active{
		margin:1px;
		width:20px;
		height:20px;
		border-radius:100%;
		border: #e20303 2px solid;
	}

	#slideSoporte{
		background-image:url(/img/bg-slider-01.png);
		background-repeat: no-repeat;
		background-position:90% 70%;
		background-size: 60%;
	}

	#slideSeguridad{
		background-image:url(/img/bg-slider-02.png);
		background-repeat: no-repeat;
		background-position:90% 80%;
		background-size: 50%;
	}

	#slideDesarrollo{
		background-image:url(/img/bg-slider-desarrollo.png);
		background-repeat: no-repeat;
		background-position:90% 80%;
		background-size: 50%;
	}


	/* Home Icons */
	.iconText{
		min-height: 100px;
	}

	.iconSpan{
		margin-top: 3vh;
		width: 100px;
		height: 100px;
		border: 2px dotted #e20303;
		border-radius: 100%;
		padding: 10px;
	}


	/* Home MidBanner */
	#midBanner{
		height:25vh;
		padding-top:4vh;
	}

	.midBannerImg{
		background-image:url(/img/bg-midbanner.png);
		background-repeat: no-repeat;
		background-position:7vw 0vh;
		background-size:contain;
	}

	.midBannerTxt{
		padding-left: 10vw;
		text-align: left;
	}



/* Nosotros */
#nosotros{
	background-image:url(/img/bg-nosotros.jpg);
}

/* Servicios */
#servicios{
	background-image:url(/img/bg-servicios.jpg);
}

	/* sub-sections */
	#infraestructura{
		background-image:url(/img/bg-infraestructura.jpg);
	}

	#operaciones{
		background-image:url(/img/bg-operaciones.jpg);
	}

	#administracion{
		background-image:url(/img/bg-administracion.jpg);
	}

	#desarrollo{
		background-image:url(/img/bg-desarrollo.jpg);
	}

/* Contacto */
#contacto{
	background-image:url(/img/bg-contacto.jpg);
}



@media screen and (max-width: 768px){
	#navigation.biggie{
		height:8vh;
		font-size: 2.3vw;
	}

	#navigation.biggie img{
		width: 30%;
		padding-top: 1vh;
	}

	#navigation.biggie a{
		height:8vh;
		padding:20px;
	}

	#navigation.small{
		height:7vh;
		font-size: 2vw;
	}

	#navigation.small img{
		width: 27%;
		padding-top: .8vh;
	}

	#navigation.small a{
		height:7vh;
		padding:20px;
	}



	.midBannerImg{
		background-position:1vw 0vh;
		background-size:contain;
	}

	.midBannerTxt{
		padding-left: 18vw;
		text-align: right;
	}

	.titleBlackShadow{
		font-size: 2vh;
	}
}

#holatext{
	color: indianred;
}