/* Define HTML5 elements as block elements */
header, section, footer, aside, nav, main, article, figure {
    display:block;
}


header{
    font-family: "Roboto", sans-serif;
    /* font-family: 'Just Me Again Down Here', cursive; */
    background: none repeat scroll 0 0 #84848d;
    height: 75px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    min-width:500px;
    min-height:10px;
    opacity: 1;
    filter: alpha(opacity=100); 	/*For IE8 and earlier*/
    z-index: 999;
    color:#fff;
}


body{
    position:relative !important;
    width: 100%;
    margin:0;
    min-height:680;
    min-width:960;
}


.fons{
    background: url(../images/fons.jpg) no-repeat scroll center;
    min-width: 100%; 
    min-height: 960px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    opacity: 0.75;
    filter: alpha(opacity=75);
    background-size: cover;
    position: relative;
}


h1{
    position:absolute;
    left:10%;
}

#logo {
    float:left;
}

#logo img{
    height: 60px;
    margin:10px;
    margin-left: 40px;
}

ul {
    list-style-type:none;
    padding:0;
    text-align:left;
}


#menu{
    width:200px;
    float:right;
    margin-top:30px;
    margin-right:30px;
}

#back{
    width:80px;
    float:right;
    margin-top:30px;
    margin-right:100px;
    color:#fff;
    font-size:18px;
}

#menu>li{
    display:inline;
    font-size: 20px;
    position:relative;
    padding:20px;
}

.submenu{
    position:absolute;
    top:35px;
    padding:30px;
    left:-80px;
    display:none;
}

.submenu>li{
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    background-color:#84848d;
    width:200px;
    padding:4px;
}

#menu li:hover{
    font-weight: 400;
    cursor:pointer;
}

#menu li:hover ul{
    display:block;
}


.gotosection{
    text-decoration:none;
    color:#fff;
    font-weight:300;
    margin-left:25px;
}

.gotosection:hover {
    font-weight: 400;
}


.container{
   display:left; 
   top:80px;
   left: 30px;
   position:absolute;
   padding: 0px;
   width:95%;
   filter: alpha(opacity=100);
   opacity: 1;
}

#conf_general{
    position:absolute;
    left:35%;
    text-align: center;
}

.container .box{
    position:relative;
    height:200px;
    width:300px;
    float:left; 
    margin: 5px;
    padding: 5px;
    border: 2px solid #000000;
    display:inline;
    filter: alpha(opacity=100);
    opacity: 1;
}

.foto-box{
    position:relative;
    float:left; 
    margin: 10px;
    padding: 5px;
    filter: alpha(opacity=100);
    opacity: 1;
    left: 5%;
}

.foto-gran-box{
    position:relative;
    margin: auto;
    padding: auto;
    filter: alpha(opacity=100);
    opacity: 1;
    left: 10%;
    top: 45px;
    width:550px;
    height:450px;
}

.zoomIt{
    display:block!important;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition:transform 1s;
}

.zoomIt:hover{
    border-radius: 0% 50%; /* Borde redondeado */
    box-shadow: 0px 0px 15px #000; /* Sombra */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
    cursor:pointer;
}


#individual{
    position:relative;
    display:inline;	
    width:370px;
    height:150px;
    margin: 10px;
    padding: 5px;
    text-align: center;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
}

#indcolor {
    background: #c4c6fd;
    position:relative;
    display:inline;	
    width:370px;
    height:150px;
    margin: 10px;
    padding: 5px;
    text-align: center;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
}

#general{
    position:relative;
    display:inline;	
    width:570px;
    height:150px;
    margin: 10px;
    text-align: center;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
}

#gencolor{
    position:relative;
    display:inline;	
    width:570px;
    height:150px;
    margin: 10px;
    text-align: center;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
}


/*Fade all the DIV when user hovers on any div*/
.container:hover .box{
  zoom: 1;
  filter: alpha(opacity=75);
  opacity: 0.75;
}

/*Fade out the particular DIV when user hover on that DIV*/
.container .box:hover{
  box-shadow: 3px 3px 15px #666;
  border-color:#c4c6fd;
  background: #c4c6fd;
  color: #fff;
  cursor: pointer;
  
  /*Opacity*/
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}


.container .box p {
    position: relative;
    font-family: "Roboto", sans-serif;
    color:#000000;
    margin: 0 auto;
    box-sizing: border-box;
    padding:5px;
    font-weight:30px;
    font-size:40px;
    filter: alpha(opacity=100);
    opacity: 1;
    text-align: center;
}

.container p{
    font-family: "Roboto", sans-serif;
    color:#000000;
    margin: 0 auto;
    box-sizing: border-box;
    padding:5px;
    font-weight:30px;
    font-size:40px;
    filter: alpha(opacity=100);
    opacity: 1;
    text-align: center;
}

.info-box{
    position:relative;
    background: #c4c6fd;
    height:240px;
    width:1000px;
    float:left;
    left: 5%;
    margin: 40px;
    padding: 10px;
    border: 2px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1;
    text-align:justify;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
    behavior:url(border.htc);
    
}

.info-box:hover{
    box-shadow: 3px 3px 15px #666;
    border-color:#c4c6fd;
    background: #c4c6fd;
    color: #000;
    cursor: pointer;
    
    /*Opacity*/
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

.info-box p{
    font-family: "Roboto", sans-serif;
    color:#000000;
    margin: 0 auto;
    box-sizing: border-box;
    padding:10px;
    font-weight:20px;
    font-size:20px;
    filter: alpha(opacity=100);
    opacity: 1;
    text-align:justify;
}


.ubicacio-box{
    position:relative;
    left: 12%;
    height:450px;
    width:800px;
    //float:left; 
    margin: 40px;
    padding: 10px;
    border: 2px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
    behavior:url(border.htc);
}

.ubicacio-box:hover{
    box-shadow: 3px 3px 15px #666;
    border-color:#c4c6fd;
    background: #c4c6fd;
    color: #000;
    cursor: pointer;
    
    /*Opacity*/
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}


.contacte-box{
    position:relative;
    background: #c4c6fd;
    height:185px;
    width:400px;
    left: 30%;
    top: 30px;
    margin: 30px;
    padding: 20px;
    border: 2px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;
    behavior:url(border.htc);
}

.contacte-box:hover{
    box-shadow: 3px 3px 15px #666;
    border-color:#c4c6fd;
    background: #c4c6fd;
    color: #000;
    cursor: pointer;
    
    /*Opacity*/
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

.contacte-box p{
    position: absolute;
    font-family: "Roboto", sans-serif;
    color:#000000;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5px;
    font-weight:20px;
    font-size:20px;
    filter: alpha(opacity=100);
    opacity: 1;
    text-align: left;
}


#esq {
    position:relative;
    background: #c4c6fd;
    height:250px;
    width:400px;
    top: 160px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5px;
    text-align: justify;
    filter: alpha(opacity=100);
    opacity: 1;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    /* para IE */
    -o-border-radius: 15px 15px 15px 15px;    
}

#centrat {
    left: 20%;
    margin-right: 50px;
    margin-left: 50px;
}



a:link {font-family: "Roboto", sans-serif;font-size:20px;text-decoration:none;color:blue}
a:visited {font-family: "Roboto", sans-serif;font-size:20px;text-decoration:none;color:blue;}
a:hover {font-family: "Roboto", sans-serif;font-size:20px;text-decoration:underline;color:#999999;}


h3{
    font-family: "Roboto", sans-serif;
    color:#000000;
    margin:auto;
    font-weight:30px;
    font-size:30px;
    filter: alpha(opacity=100);
    opacity: 1;
    text-align: center;
}


/*
h3:link {font-size:20px;text-decoration:none;color:blue}
h3:visited {text-decoration:none;color:black;}
h3:hover {text-decoration:underline;color:#999999;}
*/


footer { 
    position: relative; /* Altura total del footer en px con valor negativo */ 
    margin-top: -50px; /* Altura del footer en px. Se han restado los 5px del margen superior mas los 5px del margen inferior */ 
    height: 40px; 
    padding: 5px 0px; 
    clear: both; 
    background: #84848d; 
    text-align: center; 
    color: #fff;
}

/* Esta clase define la anchura del contenido y la posicion centrada
El contenido queda centrado y limitado, pero la cabecera y el pie llegan hasta los limites del navegador. */ 
.define{ 
    width:960px; 
    margin: 0 auto;
}

span{
    color: #fff;
    padding: 0px;
    margin: 10px;
    font-family: "Roboto", sans-serif;
    font-size:15px;
}
 
.derecha { 
    float: right;
}
.izquierda { 
    float: left;  
}