@import url(http://fonts.googleapis.com/css?family=Marvel);
@import url(http://fonts.googleapis.com/css?family=Courgette);
@charset "utf-8";
/* CSS Document */


@font-face {
   font-family: "basic title font";
   font-style: normal;
   font-weight: normal;
   src:url(basictitlefont.ttf);
}
@font-face {
   font-family:"Tw Cen MT";
   font-style: normal;
   font-weight: normal;
   src:url(/TCM_____.TTF);
}

h13
{width:100%;
font-size:14px;

 font-family:"Tw Cen MT";
text-align:center;
color:#aca9a9;}

body{
	margin: 0;
	max-width:1600px;
	min-width: 980px;
	padding: 0;
	text-align:justify;
	background:#000;
	
}


.contenedor{
	width:100%;
	max-width:1600px;
	
	margin:0 auto;
	
	overflow:hidden;
	
}

img{
	border: 0;
}





.float-left{
	float: left;	
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
}

.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

#nav{
	list-style: none;
	position:fixed;
	right: 20px;
}

#nav li{
	margin: 0 0 15px 0;	
}

#header, #intro, #second{
	width: 100%;
}

#intro{
	background:url(images/si.jpg) no-repeat ;
	
	color: #000;
	height: 800px;
	margin: 0 auto;
	padding-top: 0%;
	
}

#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	
	color: #000;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
}

#third{
	background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed;
	color: #000;
	height: 800px;
	margin: 0 auto;	
}


#conocenos{
background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
	color: #000;
	
	height: 800px;
	margin: 0 auto;
	
}


#servicios{
background:url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	color: #000;
	height: 800px;
	margin: 0 auto;
	
}

#clientes{
background:url(images/fonpi.jpg) 50% 0 no-repeat fixed;
	color: #000;
	height: 800px;
	margin: 0 auto;
	
}

#proveedores{
background:url(images/prove.jpg) 50% 0 no-repeat fixed;
	
	height: 850px;
	margin: 0 auto;
}




#equipo{
background:#000 50% 0 no-repeat fixed;
	color: #000;
	height: 800px;
	margin: 0 auto;

}
#contactanos{
background:url(images/si.jpg) 50% 0 no-repeat fixed;

	height: 700px;
	margin: 0 auto;
	
}

#fifth{
	background: #ccc;
	height: 400px;
	margin: 0 auto;
	
}
#cobranza{
background:#000;
	height: 400px;
	margin: 0 auto;
	
}

.story{
	margin: 0 auto;
	min-width: 1100px;
	overflow: auto;
	width: 1100px;
	color:#000;
}

.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 350px;	
}
H4{
	

font-family:"candara";
text-align:center;
font-size:6em;

margin-top:3%;
	font-style:normal;

}
H5{
	width:90%;
font-size:50px;
font-family:"basic title font";
text-align:center;
MARGIN-top:-13%;
margin-left:5%;
color:#717272;
}


H7{
	width:100px;
font-size:90px;


font-family:"basic title font";
text-align:center;
color:#fff;
}
H8{
	width:100px;
font-size:35px;

font-family:"basic title font";
text-align:center;";

color:#fff;
}


#coni{


width:90%;
padding-left:5%;
padding-top:8%;
text-align:justify;


}
#servi{

padding-left:0%;
width:100%;
padding-top:8%;
text-align:center;}

.cum{
 width: 200px;
padding-left:5%;
   color:#FFF;
   font-size:19px;
   font-family:"Tw Cen MT";
      float: left;
       text-align: center;
	   
   
}

#per{
	margin-top:9%;
paddindg-left:0%;}

#cli{
marging-top:13%;
padding-left:0%;
width:90%;
padding-top:5%;
text-align:LEFT;
}
#clin{
width:90%;
padding-left:0%;
padding-top:3%;
text-align:justify;
	}
	#clis{
marging-top:13%;
padding-left:5%;
width:100%;
padding-top:5%;
text-align:LEFT;
	}


#contti
{
	padding-left:0%;
	}

		
	




#equi{
padding-left:5%;

width:90%;
padding-top:2%;
text-align:center;}

#eq{
	padding-left:5%;
	}

#pois{
margin-top:8%;
margin-left:35%;

	}
#cont{
	width:90%;
padding-left:5%;
padding-top:8%;
text-align:center;

}
	
	#contt
{
	padding-left:0%;
	}
	#contti
{
	padding-left:5%;
	}
	
	
	#map{
		width:100%;
		
marging-top:0%;
width:90%;

text-align:center;

	}
	
	
	.pho{
 width: 250px;
padding-left:8%;
   color:#FFF;
   padding-top:2%;
   font-size:19px;
   font-family:"Tw Cen MT";
      float: left;
       text-align: center;
	   
   
}
footer{
clear: both;
float:left;
margin-top:20px;
box-sizing:border-box;
width:100%;
padding:20px;
color:#fff;
background:#000;
}
	
	#cobr{

width:90%;
padding-left:5%;
padding-top:5%;
text-align:center;}

h3{
width:100%;
font-size:22px;

font-family: 'Marvel', sans-serif;
text-align:justify;
color:#fff;
}
h1{
width:100%;
font-size:22px;

font-family: 'Marvel', sans-serif;
text-align:CENTER;
color:#fff;
}

h2{width:100%;
font-size:22px;

font-family: 'Marvel', sans-serif;
text-align:CENTER;
color:#fff;}


h11{
width:100%;
font-size:30px;

font-family: 'Marvel', sans-serif;
text-align:CENTER;
color:#fff;	}
h12{width:100%;
font-size:22px;

font-family: 'Marvel', sans-serif;
text-align:justify;
color:#fff;
	}



#main{
width:60%;
bakground:#FFF;
padding:20px;
float:left;
box-sizing:border-box;
}
#main img{
width: 100%;
height:auto;
margin-top:-13%;
margin-left:40%;
}

h9{

font-family:"Tw Cen MT";
font-size:20px;
text-align:center;}

#pos{
margin-top:8%;

}
#pois{
margin-top:8%;
margin-left:35%;

}
#poisi{
margin-top:8%;
margin-left:70%;

}

.cum{
 width: 230px;
padding-left:3%;
   color:#FFF;
   font-size:19px;
   font-family:"Tw Cen MT";
      float: left;
       text-align: center;
	   
   
}
#per{
	margin-top:9%;
paddindg-left:5%;
}

#wow
{

marging-left:-120%;
}
.ref {
     width: 300px;
    height: 200px;
  
    float: left;

   
    overflow: hidden;
    position: relative;
    text-align: center;
   
    cursor: default;
	
}
.ref .mascara, .ref .contenido {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
	
font-size:1em;
	
}
.ref img {
  transition: all 0.3s ease-in-out ;
}
  
   .ref .mascara {
    opacity: 1;
    
    transform: translateX(-300px);
    transition: all 0.4s ease-in;
    border-radius: 0;

	
}

.ref2 {
    
	 background: hsla(0,0%,100%,0.5);
    color: hsl(0,0%,0%);
    box-shadow: 0px 1px 3px hsla(3,9%,59%,0.5);
	
	
}
.ref p {
   opacity: 0;
    color: #fff;
    transition: all 0.2s linear;
	text-align:center;
	font-family:"candara";

}
.ref a.informacion {
    opacity: 0;
    transition:all 0.5s ease-in-out;
}


.ref:hover img { 
    transform: translateX(300px);
    transition-delay: 0.1s;
} 
.ref:hover .mascara { 
    transform: translateX(0px);
}
.ref:hover h2,


.ref:hover a.informacion {
    opacity: 1;
    transition-delay: 0.5s;
}


.ref a.informacion:hover {
    box-shadow: 0 0 5px #000
}
.ref:hover p {
    opacity: 1;
    transition-delay: 0.4s;
}


<!--# clientes-->
#container {
width:1300px;
margin: 0 auto;
}
.ex2 img{
height: 36px;
width:100px;
margin: 27px 7px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex2 img:hover {
height: 90px;
width: 220px;
margin-left: -50px;
}

#prove{
marging-top:13%;

width:90%;
padding-top:8%;
text-align:center;
margin-left:5%;
		}

<!--cierrre clientes->


	



@media screen and( min-width: 900px){
	.main{
		width:80%;
	}
	aside{
		width:80%;
	}
}

@media screen and( min-width: 200px){
	.contenedor{
		width:80%;
	}
	aside{
		display:none;
	}
}