/*fuentes*/

@font-face {
    font-family: 'robotobold';
    src: url('fonts/roboto-bold-webfont.eot');
    src: url('fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-bold-webfont.woff') format('woff'),
         url('fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'roboto_condensedbold';
    src: url('fonts/robotocondensed-bold-webfont.eot');
    src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
         url('fonts/robotocondensed-bold-webfont.ttf') format('truetype'),
         url('fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_condensedlight';
    src: url('fonts/robotocondensed-light-webfont.eot');
    src: url('fonts/robotocondensed-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-light-webfont.woff') format('woff'),
         url('fonts/robotocondensed-light-webfont.ttf') format('truetype'),
         url('fonts/robotocondensed-light-webfont.svg#roboto_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'roboto_condensedregular';
    src: url('fonts/robotocondensed-regular-webfont.eot');
    src: url('fonts/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-regular-webfont.woff') format('woff'),
         url('fonts/robotocondensed-regular-webfont.ttf') format('truetype'),
         url('fonts/robotocondensed-regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.eot');
    src: url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-light-webfont.woff') format('woff'),
         url('fonts/roboto-light-webfont.ttf') format('truetype'),
         url('fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto-medium-webfont.eot');
    src: url('fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-medium-webfont.woff') format('woff'),
         url('fonts/roboto-medium-webfont.ttf') format('truetype'),
         url('fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoregular';
    src: url('fonts/roboto-regular-webfont.eot');
    src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-regular-webfont.woff') format('woff'),
         url('fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotothin';
    src: url('fonts/roboto-thin-webfont.eot');
    src: url('fonts/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-thin-webfont.woff') format('woff'),
         url('fonts/roboto-thin-webfont.ttf') format('truetype'),
         url('fonts/roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*finfontface*/

/*aclaraciones*/

/*Encabezado*/

body{
padding: 0px;
display: block;
background-color: rgb(227, 255, 243);
background-image: url(image/trama_fondo-01.svg);
background-size:20%;
font-family: 'robotoregular';
}

#pagina{
    width:75%;
    margin: auto;
}

header{
	position:relative;
    background-color: rgb(227, 255, 243);
    margin: 20px 0 0 0;
    float: left;
    display: block;
    width:100%;
        
	}
#cabezal{
margin: 1%;
    width: 100%;
    float: left;
    
}

#regla img{
     float: left;
      position: relative;
    margin: 0%;  
    width: 2%;
}


#logo img{
       width: 33%;
       float: left;
       margin:1%;
      display: block;
      top: 200%;
     
      
    }

#pielogo{
    padding: 0;
    margin-top: 1%;
    text-align: left;
    width: 30%;
    float: left;
    font-size: 0.6em; 
    color: rgb(134, 133, 173);
    display: block;
    font-family: 'robotoregular';
    line-height: 1.5em;

}






/*buscador*/

table#buscanav{
position: relative;
    float: right;
    width: 30.2%;
    margin: 0;
    margin-top: 1%;
    margin-right: 2.5%;
    
}

#liden{
        width:93%;
        }
        #lidon{
        width:7%;
        }
        #buscanav{
        width:30%;
        float:right;
        margin-right: 2%;
        }

        #buscanav ul li{
        list-style-type:none;
        float:left;
        }

        .buscator{
        width: 100%;
        border:1px solid rgba(147, 147, 147, 0.35);
        background-color: rgb(227, 255, 243);
        }

        .buscatoren{
        background: white;
        border: 1px solid rgba(147, 147, 147, 0.35);
        background: url(image/icono-lupa.png);
        background-repeat: no-repeat;
        background-size: 93%;
        background-position: center;
        opacity: 0.5;
        background-color: rgb(227, 255, 243);
        width: 100%;
        border-left: 0px;
        }
        .buscatoren:hover{
            background-color: rgba(10, 10, 10, 0.19);
            cursor: pointer;
        }
        
      
#navmenu ul li{
        float:left;
        width:32%;
        text-align:center;
        font-family: 'robotoregular';
        background-color: rgb(80, 64, 167);
        margin-left: 1%;
        padding-top:0%;
        padding-bottom:1%;         
        }

#navmenu ul li:hover{
       background-color: rgb(18, 148, 196);   

}

        #navmenu ul li a{
        text-decoration:none;
        color:#fff;
        font-size: 0.7em;
        }

        #navmenu ul li{
        list-style-type:none;
        width: 32%;
        }

        #navmenu ul{
        padding: 0;
        width: 102%;
        float: right;
        margin: 0;
        margin-right: 7%;
        }


        #navmenu{
            float:right;
            width: 30%;
            margin-right: 0%;
            margin-top: 0%;
        }

/*fin de buscador*/


/*finheader*/

/*menutriangulo*/



#menuprincipal{
      float: left;
       width: 100%;
        margin:0;
    height: 250px;      
}

#menux{
width:100%;
padding:0;
}

#menux li{
float:left;
width:25%;
list-style: none;
}

#menux1{
background: url(image/menu1/nosotrosvacio-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
}

#menux1:hover{
background: url(image/menu1/nosotroslleno-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
cursor: pointer;
}

#menux2{
background: url(image/menu1/tecnicavacio-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
}

#menux2:hover{
background: url(image/menu1/tecnicalleno-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
cursor: pointer;
}

#menux3{
background: url(image/menu1/programavacio-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
}

#menux3:hover{
background: url(image/menu1/programalleno-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
cursor: pointer;
}

#menux4{
background: url(image/menu1/galeriavacio-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
}

#menux4:hover{
background: url(image/menu1/galerialleno-01.svg);
background-repeat: no-repeat;
background-size: 100%;
height:300px;
cursor: pointer;
}

#pass_image{
    margin: 0;
    padding: 0;
}

#pass_image img{
    width: 100%;
    margin-top: 1.5%;
    padding: 0%;
    margin-bottom: 2%
}

    
/*finmenutriangulo*/

article{
    margin: 0;
    padding: 0;    
 
}

section{
    position: relative;
    width: 100%;
    float: left;
}

section#columna_mas_contactos{
    position: relative;
    width: 60%;
    float: left;

    }


section#extended{
    position: relative;
    width: 73%;
    float: left;
}


#contenedorbloques{
    width: 100%;
    background-color: rgb(227, 255, 243);
    float: left;
    position: relative;
    margin-top: 5%;
    padding-left: 1%;
    padding-top: 1%;
    padding-right: 1%


}
    
#bloque3columnas{
    width: 100%;
    background-color: rgb(227, 255, 243);
    float: left;
    position: relative;
    margin-top: 4%;
    
}
    
 #bloque1{
    width: 49%;
    float: left;
     padding-left:1%;
    margin: 0;
    
     position: relative;
     display: block;
}

#bloque2{
    width: 46%;
    float: left;
    margin-top: 0%;
    position: relative;
    display: block;  
    padding-left: 2%;

}

#bloquecostado{
   width: 45%;
    float: left;
    margin-left: 3%;
    margin-top: 1%;
    margin-bottom: 0;
    padding: 1%;
    position: relative;
    display: block;  
     
}

#informativos{
width: 100%;
    position: relative;
    float: left;
    border-top: 1px solid rgb(80, 64, 167);
    padding-top: 1%;
    padding-bottom: 3%;
    
}

#informativos:hover{
    
    background-image: url(image/hover-01.svg); 
    background-size: 25%;    
}


#imagencolumna1 img{
    float: left;
    margin: 0;
    position: relative;
    width: 100%;
    margin-top: 2%;
    margin-bottom: 3%;

}

#imagencolumna2 img{
    float: left;
    margin: 0;
    position: relative;
    width: 100%;
    margin-top: 2%;
    margin-bottom: 5%;
}


article h1{
    float: left;    
    margin: 0;
    font-family: 'roboto_condensedlight';
    font-size: 1.3rem;
    color: rgb(80, 64, 167);
    padding: 0;

}

h1#tituloprincipal{
    float: left;    
    margin: 0;
    font-family: 'roboto_condensedregular';
    font-size: 1.2em;
    color: rgb(235, 148, 68);
   
}

article h2{
    float: left;    
    font-family: 'roboto_condensedlight';
    font-size: 0.9em;
    color: rgb(93, 84, 84);
    margin-bottom:0%;
    padding: 0;   
    
}

p{
    font-family: 'robotolight';
    font-size: 0.8em;
    float: left;
    display: block;
    color: rgb(93, 84, 84);
    margin:0;
    line-height: 1.3em;
    text-decoration: none;
    list-style: none;
        }

b{
   font-family: 'robotobold';
    line-height: 2em;
}



.segundo_titulo{font-family: 'robotomedium'; font-size:0.8em; color:rgb(235, 148, 68);line-height: 1.5em}
.tipo_peque{font-family: 'robotomedium'; font-size:0.7em; color:rgb(93, 84, 84); line-height: 2em; display: block;}
.tipo_lista2{font-family: 'robotoregular';font-size:0.8em; color:#7c7b7b; line-height:15px;float: left}
.tipo_lista3{font-family: 'robotobold';font-size:0.8em; color:#000; line-height:15px;float: left}


/*footer*/

footer{
        

}

div#footer{
    border-top: 1px solid grey;
	margin-top: 3%;
	width:100%;
	height:auto;
	display:block;
	clear:both;
    position: relative;
    float: left;
    background-color: rgb(227, 255, 243);
    margin-bottom: 5%;
	}
 

/*1er columna*/
	
#footercolumna1{
width: 50%;

}

#col_1_footer{
	display:block;
	width:20%;
	float:left;	
    margin: 1%;
    
	}

	
/*2da columna*/
	
#col_2_footer{
	display:block;
	width:45%;
	float:left;
    margin-left: 5%;

}

/*fin footer*/

/*aside*/

aside{
    position: relative;
    float: left; 
    width: 10%;
    background-color:rgb(227, 255, 243);
    padding: 0.5%;
    margin-top: 3%;
    margin-left: 2%;
}

#contactosbloque img{
    width: 100%;
    float: left; 
    }

#migas{
    position: relative;
    width: 100%;
    margin-top: 2%;
    list-style: none;text-decoration: none;
    float: left;
    
}

/*---galeria---*/

#galeria{
    position: relative;
    width: 100%;
    margin: 0%;
    float: left;
   }

#galeriab{
  width: 100%;
  list-style: none;
  text-decoration: none;
   float: left;
    padding: 0;
    margin: 0;
    
}


#galeriab li{
  width: 33%; 
  list-style: none;
   text-decoration: none;
   float: left;
    padding: 0;
    margin: 0;
  height: 140px;  
    
}

#img1{
background: url(image/galeria/img1-01.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;

}

#img2{
background: url(image/galeria/img2-01.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
}


#img1:hover{
background: url(image/galeria/hovergaleria-01.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
}

#img2:hover{
    background: url(image/galeria/hovergaleria2-01.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
}

/*--galeriaimagenes--*/


/*--menuprincipal2--*/

#menuprincipal2{
    
    float: left;
    width: 110%;
    margin-left: -20%;
    margin-right: 0%;
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    
}

  #menuxb{
  width: 250px;
  list-style:none;
  padding: 0;
  float: left;
     
}

#menuxb li{
float:none;
list-style: none;
position: relative;

    
}

#menux1b{
background: url(image/menu2/nosotrosvacio-08.svg);
background-repeat: no-repeat;
background-size: 100%;
height: 87px;
}

#menux1b:hover{
background: url(image/menu2/nosotroslleno-08.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
height: 87px;
}

#menux2b{
background: url(image/menu2/tecnicavacio-18.svg);
background-repeat: no-repeat;
background-size: 100%;
height: 63px;
}

#menux2b:hover{
background: url(image/menu2/tecnicalleno-18.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
height: 63px;
}

#menux3b{
background: url(image/menu2/programavacio-19.svg);
background-repeat: no-repeat;
background-size: 100%;
height: 63px;
}

#menux3b:hover{
background: url(image/menu2/programalleno-19.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
height: 63px;
}

#menux4b{
background: url(image/menu2/galeriavacio-20.svg);
background-repeat: no-repeat;
background-size: 100%;
height: 140px;
}

#menux4b:hover{
background: url(image/menu2/galerialleno-20.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
height: 140px;
}


#menuprincipalchico{
width: 210px;
}
    
    



/*--mediaqueries--*/
@media all and (min-width: 1px) and (max-width: 320px) {
   
    body{
      background-size:90%;
}
    
    #pagina{
    width:90%;
    margin: auto;
}
    
    #regla{
    display: none;}
    
    #logo{
       width: 100%; 
       margin-top:2%;
       margin-bottom: 2%;
        float: left;
       position: relative;
        
    }
    
    #logo img{
       width: 100%; 
    
       }
    
    #pielogo{
        display: none;
         }
    
    table#buscanav{
    width: 100%;
        float: left;
        margin-left: 2%;
    }
    #navmenu{
            float:no;
            width: 100%; 
        margin: 0;
        }
    
     #navmenu ul{
        margin: 0%;
         padding: 0%;
         margin-right: 0%;
         width: 100%;
         float: left;
         margin-left: 2%;
        }
    #navmenu ul li{
        float:left;
        font-size: 0.6em;
        padding-bottom:1%; 
        width: 32.2%;
        padding-right: 0.1%;
        }
    

/*menuprincipal2*/      
#menux{
  width: 630px;
  list-style:none;
  padding: 0;
}

#menux li{
float:none;
list-style: none;
    
}

#menux1{
background: url(image/menu2/nosotrosvacio-08.svg);
background-repeat: no-repeat;
background-size: 100%;

height: 56px;
}

#menux1:hover{
background: url(image/menu2/nosotroslleno-08.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
height: 56px;
}

#menux2{
background: url(image/menu2/tecnicavacio-18.svg);
background-repeat: no-repeat;
background-size: 100%;

height: 40px;
}

#menux2:hover{
background: url(image/menu2/tecnicalleno-18.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
    height: 40px;
}

#menux3{
background: url(image/menu2/programavacio-19.svg);
background-repeat: no-repeat;
background-size: 100%;

height: 40px;
}

#menux3:hover{
background: url(image/menu2/programalleno-19.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
    height: 40px;
}

#menux4{
background: url(image/menu2/galeriavacio-20.svg);
background-repeat: no-repeat;
background-size: 100%;

height: 70px;
}

#menux4:hover{
background: url(image/menu2/galerialleno-20.svg);
background-repeat: no-repeat;
background-size: 100%;
cursor: pointer;
height: 70px;
}
    


#migas{
    position: relative;
    width: 100%;
    margin-top: 2%;
    list-style: none;text-decoration: none;
    float: left;
    font-size: 10px;
    margin-left: 3%    
}
 
/*--menuxb-----------------*/
#menuxb{
  width: 160px;

}

#menux1b{
height: 57px;
}

#menux1b:hover{
height: 57px;
}

#menux2b{
height: 40px;
}

#menux2b:hover{
height: 40px;
}

#menux3b{
height: 40px;
}

#menux3b:hover{
height: 40px;
}

#menux4b{
height: 75px;
}

#menux4b:hover{
height: 75px;
}


#menuprincipalchico{
width: 160px;
}
    
#menuprincipal2{
    
    float: left;
    width: 160px;
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    
}  
    
/*--fin---menuxb-----------------*/   
    
  /*-----------section---------------*/
    
    section{
    position: relative;
    width: 100%;
    float: left;
}

section#columna_mas_contactos{
    position: relative;
    width: 170px;
    float: left;

    }


section#extended{
    position: relative;
    width: 60px;
    float: left;
}
    
    
#contenedorbloques{
    width: 160px;
    font-size: 13px;
    


}    
    #bloque1{
    width: 160px;
    font-size: 13px;
    margin: 2px;
}

#bloque2{
    width: 150px;
    font-size: 13px;

}
    
#bloquecostado{
   width: 160px;
  font-size: 13px; 
     
}
    
#bloque3columnas{
    width: 160px;      
}
    
aside{
   display: none;
}

#pass_image{
    margin: 0;
    padding: 0;
    width: 160px;
}

h1#tituloprincipal{
    
    font-size: 12px;
    color: rgb(235, 148, 68);
   
}
/*----------------------*/
    
    /*--galeria--*/
    
/*---galeria---*/

#galeria{
    width: 160px;
    height: 1000px;
   
   }

#galeriab{
  width: 160px;
    height: 100px
}


#galeriab li{
  width: 160px; 
  list-style: none;
   text-decoration: none;
   float: left;
    padding: 0;
    margin: 0;
  height: 140px;  
    
}

#img1{

    height: 10px;

}

#img2{
background: url(image/galeria/img2-01.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
}



    

/*----------------footer-----------------------------*/
    
footer{ width: 100%;

}
        

div#footer{
    border-top: 1px solid grey;
	margin-top: 3%;
	width:100%;
	height:auto;
	display:block;
	position: relative;
    float: left;
    background-color: rgb(227, 255, 243);
    margin-bottom: 5%;
	}
    
#footercolumna1{
width: 100%;
float: left;
position: relative;

}
    
#col_1_footer{
	display:block;
	width:20%;
	float:left;	
    margin: 1%;
    font-size: 8px;
	}

	
/*2da columna*/
	
#col_2_footer{
	display:block;
	width:100%;
	float:left;
    margin-left: 0%;
    font-size: 8px;
    
}

/*fin footer*/

}

@media all and (min-width: 321px) and (max-width: 778px) {
    
    #pagina{
    width:85%;
    margin: auto;
    }
    
    #logo img{
    width: 35%;
    }
    
    #pielogo{
    width: 27%;
    font-size: 0.5em; 
    font-family: 'robotoregular';
    line-height: 1.2em;    
    
    }
    
    table#buscanav{
    width: 30%; 
    }
    
    
         #navmenu ul li a{
        text-decoration:none;
        color:#fff;
        font-size: 0.5em;
          
        }

        #navmenu ul{
                    
        width: 102%;        
        padding-bottom:2%
        }
    #navmenu ul li{
        margin-left: 1%;
        
        padding-bottom:1%;
        width: 31.6%;
        
        } 
    
 
 /*menuprincipal*/ 
    
#menuprincipal{
      float: left;
       width: 100%;
        margin:0;
    height: 150px;
    
      
}

/*-finmenu-------*/
    
    
    /*--------aside*-----------*/
    aside{
        display: none;}
    
/*---footer---*/    
    footer{
        

}

div#footer{
    border-top: 1px solid rgb(93, 84, 84);
	margin-top: 3%;
	width:100%;
	height:auto;
	display:block;
	 position: relative;
    float: left;
    background-color: rgb(227, 255, 243);
    margin-bottom: 5%;
	}
 

/*1er columna*/
	


#col_1_footer{
    font-size: 12px
    
	}

	
/*2da columna*/
	
#col_2_footer{
    font-size: 12px;
    margin-top: 0px;

}

/*fin footer*/

    
}

@media all and (min-width: 779px) {}