@import url('reset.css');
/* General Demo Style */
body{

	color: #00ccff;
	font-family: 'Terminal Dosis', Arial, sans-serif;
	font-size: 13px;
	background:url(../images/low_poly_002.png) fixed;
	min
	width:100%;

}


.ca-menu{
    width: 100%;
	right:auto;
	left:auto;
	position:relative;
}

.ca-menu li{
    width: 25%;
    height: 100px;
    overflow: hidden;
    position: relative;
    float:left;
    background-color: rgba(0,9,153,0.7);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;

}
.ca-menu li:last-child{
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 0px 0px 25px 0px;
    -moz-border-radius: 0px 0px 25px 0px;
    border-radius: 0px 0px 25px 0px;

}

.ca-menu li:first-child{
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
     -webkit-border-radius: 0px 0px 0px 25px;
    -moz-border-radius: 0px 0px 0px 25px;
    border-radius: 0px 0px 0px 25px;

}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}


.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 5%;
}
.ca-main{
    font-size: 1.5em;
	color: #fff;
    text-align: center;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-sub{
    text-align:center;
    font-size: 1.0em;
    color: #00ccff;
    line-height: 40px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-menu li:hover{
    background-color: rgba(0,0,255,0.7);


}


.move:hover{
    color: #00ccff;
    -webkit-animation: moveFromLeft 300ms ease;
    -moz-animation: moveFromLeft 300ms ease;
    -ms-animation: moveFromLeft 300ms ease;
}

.ca-menu li:hover .ca-main{
    color: #00ccff;
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

@-webkit-keyframes moveFromLeft {
    from {
        -webkit-transform: translateX(10%);
    }
    to {
        -webkit-transform: translateX(20%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}


a{
	color: #fff;
	text-decoration: none;
}
.clr{
	clear: both;
}
.content{
	position:relative;
	z-index:2;
}
h1{
	margin:0px;
	padding:20px;
	font-size:32px;
	color:#000;
    text-shadow:1px 1px 1px rgba(255,255,255,0.9);
	text-align:center;
	font-weight:400;
}
h1 span{
    display:block;
	font-size:14px;
	color:#666;
    font-style:italic;
    font-family:Georgia, serif;
	padding-top:5px;
}

h2{
	margin:0px;
	padding:10px;
	font-size:20px;
	color:#000;
    text-align:center;
	font-weight:400;
}

h3{
	margin:0px;
	padding:5px;
	font-size:16px;
	font-weight:bold;
	color:#000;
   	text-align:center;
}



#logoprincipal{
	height:100px;
    position: relative;
	top: 20px;
    left:auto;
	right:auto;
	width:100%;

}

#logo{
	max-width:485px;


}



#inline_content {
	background-color:#fff;
	width:500px;
	height:400px;
	left:0;
	right:0;
	bottom:0;
	margin: 0 auto 0 auto;
	padding:25px;
	font-size:22px;
	text-align:center;
	}

#presentacion{
	height:310px;
    position: absolute;
	top: 300px;
    left:0;
    right:0;
	bottom:0;
	width:100%;
	background: url(../images/fondoslider.png) repeat;

}

#clima{
	position:absolute;
	left:0px;
	top:300px;
	width:167px;
	z-index: 9989;
	height:300px;

	}

#clima2{
	position:absolute;
	text-align:center;
	top:550px;
	width:100%;
	height:84px;
	z-index: 1;
	visibility:hidden;
	overflow:hidden;


	}

#sociales{
	position:absolute;
	right:0px;
	top:300px;
	width:100px;
	height:410px;
	overflow:hidden;
	z-index: 1;

	}


	#sociales1{
	position:absolute;
	right:0px;
	top:650px;
	width:100%;
	height:100px;
	overflow:hidden;
	z-index: 1;
	visibility:hidden;


	}

  #privacidad{
  	position:absolute;
  	right:0px;
  	top:600px;
  	width:100px;
  	height:110px;
  	overflow:hidden;
  	z-index: 1;

  	}



#sliderprincipal {
	position:relative;
	margin: 0 auto 0 auto;
	width:620px;
	height:310px;
	overflow:hidden;
	z-index: 1;

	}




#home, #one, #two, #three, #four {
	margin: 0px auto;
	position:relative;
	min-height: 850px;
	width: 100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}



.secciones{
	display:block;
    width: 100%;
    height: 800px;
    overflow: hidden;

}

.seccioncontacto{
	display:block;
    width: 100%;
    height: 900px;
    overflow: hidden;

}

titulo
{
	position: relative;
	text-align:center;
	vertical-align:middle;
	top: 20px;
    font-size: 195px;
	color: rgba(102,51,153,1);

	}


	.titulo2
{
	position: relative;
	text-align:center;
	vertical-align:middle;
	top: 2px;
    font-size: 195px;
	color:#3399cc;

	}

	.titulocliente
{
	position: relative;
	text-align:center;
	vertical-align:middle;
    font-size: 195px;
	color: rgba(102,51,153,1);

	}

	.titulosucursales{
	color:#fff;
	font-size:60px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.9);

}


	#titulopromociones{
	position:absolute;
	height:100px;
	left:20%;
	top:145px;
}

#tituloproductos{
	position:absolute;
	height:100px;
	text-align:center;
	right:15%;
	top:5px;
	background:url(../images/fondoserv4.png)no-repeat center

}

#titulonosotros{
	position:absolute;
	height:100px;
	width:100%;
	top:50px;
}

#tituloservicios{
	position:absolute;
	height:100px;
	width:100%;
	top:10px;
}




#mision{
	position:absolute;
	height:700px;
	width:100%;
	padding:2px;
	top:220px;
	font-size:1.5em;
	color:#FFF;
	text-align: justify;
	background:url(../images/fondoserv3.png)no-repeat center
	}



	.us1{

		padding:2%;

	text-shadow:1px 1px 1px rgba(0,0,0,0.9);
	background-color: rgba(1,43,125,0.9);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-webkit-border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    border-radius: 15px 15px 15px 15px;

	}
	.us2{

		padding:2%;

	text-shadow:1px 1px 1px rgba(0,0,0,0.9);
	background-color: rgba(255,0,0,0.9);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-webkit-border-radius: 45px 0px 0px 45px;
    -moz-border-radius: 45px 0px 0px 45px;
    border-radius: 45px 0px 0px 45px;

	}
	.us3{

		padding:2%;

	text-shadow:1px 1px 1px rgba(0,0,0,0.9);
	background-color: rgba(51,153,204,0.9);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-webkit-border-radius: 0px 45px 45px 0px;
    -moz-border-radius: 0px 45px 45px 0px;
    border-radius: 0px 45px 45px 0px;

	}

@media screen and (max-width:320px) {

	.ca-main{
    font-size: 1.2em;
	}

	#sociales{

		display:none;

}
#sociales1{

	visibility:visible;



}

#clima{

		display:none;

}
#clima2{

	visibility:visible;



}
#mision{

	font-size: 1em;

	}

}


#contenedorubicacion{
	font-size:42px;
	color:#cc3333;
	height:520px;
    position: absolute;
	left:3%;
	top: 15px;
	width:47%;
	text-shadow:1px 1px 1px rgba(0,0,0,0.9);
	background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 450px 0px 0px 0px;
    -moz-border-radius: 45px 0px 0px 0px;
    border-radius: 45px 0px 0px 0px;


}





#formulariocontacto{

font-size:42px;
	height:520px;
    position: absolute;
	top: 15px;
	right:3%;
	width:47%;
	text-shadow:1px 1px 1px rgba(0,0,0,0.9);
	background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 0px 0px 45px 0px;
    -moz-border-radius: 0px 0px 45px 0px;
    border-radius: 0px 0px 45px 0px;


}

#contenedorserv1{
	font-size:1.2em;
	color:#cc3333;
	height:520px;
    position: absolute;
	left:0;
	top: 120px;
	width:25%;
	background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 450px 0px 0px 0px;
    -moz-border-radius: 45px 0px 0px 0px;
    border-radius: 45px 0px 0px 0px;


}





#contenedorserv2{

font-size:1.2em;
	height:520px;
    position: absolute;
	top: 120px;
	left:25%;
	width:25%;
	background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 0px 0px 45px 0px;
    -moz-border-radius: 0px 0px 45px 0px;
    border-radius: 0px 0px 45px 0px;


}

#contenedorserv3{
	font-size:1.2em;
	color:#cc3333;
	height:520px;
    position: absolute;
	top: 120px;
	right:25%;
	width:25%;
	background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 450px 0px 0px 0px;
    -moz-border-radius: 45px 0px 0px 0px;
    border-radius: 45px 0px 0px 0px;


}





#contenedorserv4{

font-size:1.2em;
	height:520px;
    position: absolute;
	top: 120px;
	width:25%;
	right:0;
	background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 0px 0px 45px 0px;
    -moz-border-radius: 0px 0px 45px 0px;
    border-radius: 0px 0px 45px 0px;


}



#contenedorprod1{
	padding:1%;
	color:rgba(255,255,255,1);
    min-height:250px;
    font-size:1.5em;
    position: absolute;
	top: 120px;
	width:100%;
	right:0;
	text-shadow:1px 1px 1px rgba(0,0,0,0.9);
	background-image:url(../images/fondototaline.png);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    margin-right: 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;


}

@media screen and (max-width:600px) {

#contenedorserv1{

	top: 115px;
	left:0;
	width:50%;
	font-size:1em;
	height:350px;




}


#contenedorserv2{



	top: 115px;
	right:0;
	width:50%;
	font-size:1em;
	height:350px;




}

#contenedorserv3{



	top: 465px;
	left:0;
	width:50%;
	height:350px;
	font-size:1em;



}

#contenedorserv4{



	top: 465px;
	right:0;
	width:50%;
	font-size:1em;




}

}


@media screen and (max-width:320px) {

#sliderprincipal{

width:100%;




}

#contenedorubicacion{

	top: 15px;
	left:0;
	width:100%;




}


#formulariocontacto{



	top: 525px;
	right:0;
	width:100%;



}

#contenedorserv1{

	top: 115px;
	left:0;
	width:100%;
	font-size:1em;
	height:510px;




}


#contenedorserv2{



	top: 625px;
	left:0;
	width:100%;
	font-size:1em;
	height:350px;




}

#contenedorserv3{



	top: 975px;
	right:0;
	left:0;
	width:100%;
	height:350px;
	font-size:1em;



}

#contenedorserv4{



	top: 1325px;
	left:0;
	right:0;
	width:100%;
	font-size:1em;




}

#contenedorprod1{


font-size:1.2em;

}

.totaline{


	width:90%;


}

}

#empresa{
	position: relative;
	top: 20px;
	left:0px;
	right:0;
	bottom:0;
	margin: 0 auto 0 auto;

}

#servicios{
    position: relative;
	top: 50px;
    left:0;
    right:0;
	bottom:0;
	margin: 0 auto 0 auto;

}

#clientes{
	position: relative;
	top: 50px;
	left:0;
	right:0;
	bottom:0;
	margin: 0 auto 0 auto;

}



#footer{
	height:150px;
    position: absolute;
	top: 750px;
    left:0;
    right:0;
	bottom:0;
	width:100%;
	background: url(../images/bg-footer.png) top;
	z-index:6;
}


.pie-footer{
	line-height:150px;
	font-size:14px;
	color:#BDBEC1;
	text-align:center;
	z-index:6;


}


span.img-rollover-social{ width: 100px; height: 100px; overflow: hidden; display: block; position: relative;}

span.img-rollover-social a:hover{ top: -100px; position: relative; }


span.img-rollover-menu{ width: 50px; height: 50px; overflow: hidden; display: block; position: relative;}

span.img-rollover-menu a:hover{ top: -50px; position: relative; }