* {
margin: 0;
padding: 0;
}

@import url(https://fonts.googleapis.com/css?family=Courier Prime);

body {
overflow-x: hidden;
font-family: 'Courier Prime', monospace;
background-color: #fff;
}

.float_r { float: right }
.float_l { float: left }
.float_c { float: center }

.contenedor {
overflow: hidden;
width: 100%;
max-width: 1200px;
height: auto;
margin: 0 auto;
background-color: #000;
}

.btn_wsp{
    position:fixed;
    width:55px;
    height:55px;
    line-height: 55px;
    bottom:30px;
    right: 30px;
    background:#25d366;
    color:#FFF;
    border-radius:10px;
    text-align:center;
    font-size:42px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
}

.btn_wsp img{
width: 60%;
height: auto;
margin-top: 20%;
margin-left: 2%;
}   

.btn_wsp:hover{
    background: #20ba5a;
}

#navbarsxx {
    background-color: #0000; /* Black background color */
    position: fixed; /* Make it stick/fixed */
    top: 0px; /* Hide the navbar 50 px outside of the top view */
    width: 100%; /* Full width */
    height: 40px;
    max-width: 1200px;
    transition: top 0.3s; /* Transition effect when sliding down (and up) */
    padding: 0px;
    z-index: 100000;
    }

    .logo_y_boton_menu {
    position: fixed;
    top: 0px; /* Hide the navbar 50 px outside of the top view */
    z-index: 100;
    background-color: #000;
    width: 100%;
    height: 113px;
    max-width: 1200px;
    border-bottom: 
}

.borde_bajo{
border-bottom: 1px solid #fff;
padding: 0px;
}

.btn_new_menu_1{
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
   background-color: transparent; 
  text-decoration: none;
  color: none;
  font-size: 0px;
  font-weight: 0;
} 

.btn_new_menu_2{
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
   background-color: transparent; 
  text-decoration: none;
  color: none;
  font-size: 0px;
  font-weight: 0;
} 

.btn_new_menu_3{
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
   background-color: transparent; 
  text-decoration: none;
  color: none;
  font-size: 0px;
  font-weight: 0;
} 

.logo_mm {
  position: absolute;
  top: 28px;
  left: 1%;
  width: 240px;
  height: 60px;
  background-color: transparent;
  z-index: 100;  
}

.logo_mm img{
width: 80%;
height: auto;
margin-left: 8%;
}  

.alto_top{
width: 100%;
height: 130px;	
background-color: #000000;
}

.sector{
width: 100%;
height: auto;
padding-top: 0%;
padding-left: 5%;  
color:#fff; 
background-color: #000000;
}

.negro{
background-color: #000000;  
}

.gris_o{
background-color: #333333;
}

.gris_c
{background-color:#DBDBDB;
}

.texto_blanco{
  color: #FFFFFF;
}

.para_foto_acerca{
position: fixed;
overflow: hidden;
width: 100%;
max-width: 1100px;
width: 95%;
height: 240px;
background-color: #000000;  
margin-top: -40px;
}

.foto_acerca{
width: 140px;
height: 140px;
background-color: grey; 
margin-bottom: 45px;  
margin-left: 0%;
margin-top: 55px;
} 

.foto_acerca img{
width: 100%;   
} 

.titulo_acerca{
width: 90%;
height: auto;
font-size: 22px;
color:#FFF;
padding-top: 210px;  
background-color: transparent;
text-align: left;
margin-bottom: 10px;
}

.texto_acerca{
width: 90%;
height: auto;
font-size: 15px; 
margin-top: 0;
margin-bottom: 15px;
}

.texto_breve{
width: 80%;
height: auto;
font-size: 15px; 
margin-top: 0;
margin-bottom: 15px;
}

.sector2{
width: 100%;
height: auto;
overflow: hidden;
background-color: #000;
padding-top: 5%;
margin-bottom: 20px;
}

.trabajos  {
    position: relative;
    width: 90%;
    height: auto;
    background-color:#000;
    cursor: pointer;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    
}

.imageprod {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middleprod {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: left;  
  width: 100%;
}

.trabajos:hover .imageprod {
  opacity: 0.1;
}

.trabajos:hover .middleprod {
  opacity: 1;  /* ATENCIÓN SI SACO LA SEGUNDA FOTO CAMBIAR 0.1 POR 1 - TAMBIÉN PUEDE SER IMAGEN GIF TRANSPARENTE */
}

.footer{
width: 90%;
height: auto;
background-color: #000000;
margin-top: 40px;
margin-bottom: 20px;
margin-left: 4%;
} 

.footer_1{
width: 100%;
height: auto;	
background-color: transparent;
}

.footer_mm{
font-size: 17px;
color: #fff; 	
}

.footer_mm_2{
font-size: 15px;
color: #fff; 	
}

.footer_mm_3{
width: 100%;	
font-size: 14px;
color: #fff; 	
}

.footer_mm_4{
width: 100%;
height: auto;	
background-color: transparent; 	
margin-top: 10px;
margin-bottom: 10px;
}

.footer_mm_5{
width: 310px;	
font-size: 15px;
color: #fff;
background-color: transparent;	
}

a.footer_boton{
  width: auto;
  height: 30px;
  background-color:transparent;
  text-align: center;
  font-size: 15px;
  text-decoration: none;
  color: #FFF;
  font-weight: 500;
  line-height: 230%;
    }
a.footer_boton:hover {
  background-color: transparent;
  text-decoration: underline;  
  }

 .para_footer_wspp{
 width: 100%;
 height: auto;
 margin-top: 20px;
 background-color: #000;
 }

  .footer_wspp{
    width:40px;
    height:40px;
    line-height: 25px;
    bottom:30px;
    right: 30px;
    background: #111111;
    color:#FFF;
    border-radius:10px;
    text-align:center;
    font-size:42px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0%;
}

.footer_wspp img{
width: 60%;
height: auto;
margin-top: 8px;
margin-left: 2%;
}   

.footer_wspp:hover{
    background: #222222;
}

.titulo_tres{
width: 90%;
height: auto;
font-size: 18px;
color: #333333;
padding-top: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
}

.titulo_cuatro{
width: 100%;
height: auto;
font-size: 22px;
color: #333333;
padding-top: 20px;  
background-color: transparent;
text-align: center;
color:#FFF;
}

.texto_cuatro{
width: 90%;
height: auto;
font-size: 16px;
color: #333333;
padding-top: 0%;  
background-color: transparent;
text-align: center;
color:#FFF;
margin-left: 5%;
}

.sector_indi{
width: 100%;
height: auto;
padding: 4.5%;  
margin-bottom: 0.5%;
border-bottom: 1px solid #fff;
}

.titulo_trabajo{
width: 96%;
height: auto;
font-size: 12px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 4px;
}

.detalle_trabajo{
width: 70%;
height: auto;
font-size: 14px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 4px;
}

.titulo_link{
width: 70%;
height: auto;
font-size: 17px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 5px;
}

.marco_boton2{
 width: 310px;
 height: 30px;
 background-color: transparent; 
 margin-top: 30px;
} 

.marco_boton3{
 width: 100px;
 height: 20px;
 background-color: transparent; 
 margin-top: 10px;
} 

a.boton3 {
    display: inline-block;
    width: 100px;
    height: 20px;
    background-color: #000000;
    text-align: left;
    font-size: 17px;
    text-decoration: none;
    color:#fff;
    font-weight: 400;
    padding-top: 2.5px;

}

a.boton3:hover {
  background-color: 000000;
  color: #fff;
  text-decoration: underline;
  } 

.marco_boton_foto{
 width: 310px;
 height: 30px;
 background-color: transparent; 
 margin-top: 40px;
} 

.f_atras{
  width: 18px;
  height: 20px;
  background-color: #000000;
  color: #FFF; 
  font-size: 14px;
  }

a.boton2 {
    display: inline-block;
    width: 260px;
    height: 20px;
    background-color: #000000;
    text-align: left;
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    font-weight: 400;
    padding-top: 2.5px;

}

a.boton2:hover {
  background-color: 000000;
  color: #fff;
  text-decoration: underline;
  } 

  a.boton3 {
    display: inline-block;
    width: 350px;
    height: 20px;
    background-color: #000000;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    color:#fff;
    font-weight: 400;
    padding-top: 0px;

}

a.boton3:hover {
  background-color: 000000;
  color: #fff;
  text-decoration: underline;
  } 

  h300 {font-size: 32px; color: #FFFFFF;}


                                                    @media(min-width:400px) {
}

                                                    @media(min-width:480px) {

}

                                                    @media(min-width:540px) {
.sector_indi{
width: 100%;
height: auto;
padding: 4.5%;  
}
}

                                                    @media(min-width:640px) {
.sector_indi{
width: 100%;
height: auto;
padding: 4.5%;  
}

.titulo_trabajo{
width: 96%;
height: auto;
font-size: 14px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 4px;
}

.detalle_trabajo{
width: 96%;
height: auto;
font-size: 14px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 4px;
}

.marco_boton2{
 width: 500px;
 height: 30px;
 background-color: transparent; 
 margin-top: 30px;
} 

.f_atras{
  width: 18px;
  height: 20px;
  background-color: #000000;
  color: #FFF; 
  font-size: 14px;
  }

a.boton2 {
    display: inline-block;
    width: 200px;
    height: 20px;
    background-color: #000000;
    text-align: left;
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    font-weight: 400;
    padding-top: 2.5px;
}

a.boton2:hover {
  background-color: 000000;
  color: #fff;
  text-decoration: underline;
  } 

}

                                                    @media(min-width:767px) {

.sector2{
width: 90%;
height: auto;
overflow: hidden;
background-color: #000;
padding-top: 6%;
margin-left: 5.4%;
padding-bottom: 1.5%;
}

.trabajos  {
    position: relative;
    width: 46%;
    height: auto;
    background-color:#000;
    cursor: pointer;
    margin: 0%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
}

.sector_indi{
width: 100%;
height: auto;
padding:5%;  
}

.titulo_trabajo{
width: 96%;
height: auto;
font-size: 14px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 4px;
} 

.detalle_trabajo{
width: 80%;
height: auto;
font-size: 14px;
color: #333333;
padding: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
margin-top: -4px;
margin-bottom: 4px;
}

.marco_boton2{
 width: 500px;
 height: 30px;
 background-color: transparent; 
 margin-top: 30px;
} 

.f_atras{
  width: 18px;
  height: 20px;
  background-color: #000000;
  color: #FFF; 
  font-size: 14px;
  }

a.boton2 {
    display: inline-block;
    width: 200px;
    height: 20px;
    background-color: #000000;
    text-align: left;
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    font-weight: 400;
    padding-top: 2.5px;
}

a.boton2:hover {
  background-color: 000000;
  color: #fff;
  text-decoration: underline;
  } 

  .footer{
width: 90%;
height: auto;
background-color: #000000;
margin-top: 40px;
margin-bottom: 20px;
margin-left: 4.8%;
} 

}

																											@media(min-width:989px) {

.para_foto_acerca{
position: fixed;
overflow: hidden;
width: 100%;
max-width: 1100px;
width: 100%;
height: 265px;
background-color: #000000;  
margin-top: -50px;
}

.foto_acerca{
width: 180px;
height: 180px;
background-color: grey; 
margin-bottom: 55px;  
margin-left: 0%;
} 

.foto_acerca img{
width: 100%;   
} 

.titulo_acerca{
width: 90%;
height: auto;
font-size: 22px;
color: #FFF;
padding-top: 245px;  
background-color: transparent;
text-align: left;
margin-bottom: 10px;
}

.texto_acerca{
width: 90%;
height: auto;
font-size: 16px; 
margin-top: 0;
margin-bottom: 0px;
}

.texto_breve{
width: 50%;
height: auto;
font-size: 16px; 
margin-top: 0;
margin-bottom: 15px;
margin-left: 2.5%
}

.footer{
width: 92%;
height: auto;
background-color: #000000;
margin-top: 50px;
margin-bottom: 0px;
margin-left: 5%;
} 

.footer_1{
width: 32%;
height: auto;	
background-color: transparent;
margin-top: -4px;
margin-right: 0%;
}

.footer_mm{
font-size: 17px;
color: #fff; 	
}

.footer_mm_2{
font-size: 15px;
color: #fff; 	
}

.footer_mm_3{
font-size: 13px;
color: #fff;
margin-top: 0px; 	
}

.footer_mm_4{
width: 11%;
height: auto;	
background-color: #000000; 	
margin-top: -13px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 12%;
}

.footer_mm_5{
width: 18%;
font-size: 15px;
color: #fff;
margin-top: 50px; 
background-color: transparent;	
margin-left: 23%;
}

a.footer_boton{
  width: auto;
  height: 30px;
  background-color:transparent;
  text-align: center;
  font-size: 17px;
  text-decoration: none;
  color: #FFF;
  line-height: 230%;
    }
a.footer_boton:hover {
  background-color: transparent;
  text-decoration: underline;  
  }

  .para_footer_wspp{
 width: 41px;
 height: auto;
 margin-top: -100px;
 background-color: transparent;
 margin-left: 23%;
 }

.sector_indi{
width: 100%;
height: auto;
padding: 5%;  
}  

.titulo_tres{
width: 90%;
height: auto;
font-size: 21px;
color: #333333;
padding-top: 0%;  
background-color: transparent;
text-align: left;
color:#FFF;
}

.texto_cuatro{
width: 60%;
height: auto;
font-size: 16px;
color: #333333;
padding-top: 0%;  
background-color: transparent;
text-align: center;
color:#FFF;
margin-left: 20%;
}

}

																											@media(min-width:1199px) {

.para_foto_acerca{
position: fixed;
overflow: hidden;
width: 100%;
max-width: 1100px;
width: 100%;
height: 275px;
background-color: #000000;  
margin-top: -50px;
}

.new_menu {
  position: absolute;
  top: 50px;
  right: 3%;
  height: 40px;
  width: 310px;
  z-index: 700;
  background-color: transparent; 
} 

.btn_new_menu_1{
  position: absolute;
  top: 1%;
  left: 0%;
  height: 40px;
  width: 95px;
  background-color: transparent; 
  text-decoration: none;
  color: #FFF;
  font-size: 18px;
  font-weight: 500;
} 

.btn_new_menu_1:hover {
  font-weight: 500;
  color: #fff;
  text-decoration: underline; 
} 

.btn_new_menu_2{
  position: absolute;
  top: 1%;
  left: 115px;
  height: 40px;
  width: 80px;
  background-color: transparent; 
  text-decoration: none;
  color: #FFF;
  font-size: 18px;
  font-weight: 500;
} 

.btn_new_menu_2:hover {
 font-weight: 500;
  color: #fff;
  text-decoration: underline;
} 

.btn_new_menu_3{
  position: absolute;
  top: 1%;
  left: 205px;
  height: 40px;
  width: 110px;
  background-color: transparent; 
  text-decoration: none;
  color: #FFF;
  font-size: 18px;
  font-weight: 500;
} 

.btn_new_menu_3:hover {
  font-weight: 500;
  color: #fff;
  text-decoration: underline;
}

.texto_cuatro{
width: 52%;
height: auto;
font-size: 16px;
color: #333333;
padding-top: 0%;  
background-color: transparent;
text-align: center;
color:#FFF;
margin-left: 24%;
}

}