body {

  }

  #main {
   /*min-height: 800px;*/
   height:auto;
   margin: 0px;
   margin-top:40px;
   margin-bottom:40px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   /*margin: 4px;
   padding: 5px;
   
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;*/
   text-align:center;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   /*margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;*/
   text-align:center;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   /*margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;*/
   text-align:center;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 3;
           order: 3;
   }

   #galeriaslide {
   height:auto;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #galeriaslide > article {
   /*margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;*/
   -webkit-flex: 0 0 100%;
           flex: 0 0 100%;
   -webkit-order: 0;
           order: 0;
   }

        #noticias {
            height:auto;
            margin: 0px;
            margin-top:5px;
            padding: 0px;
            display: -webkit-flex;
            display:         flex;
            -webkit-flex-flow: row;
               flex-flow: row;
            text-align:center;
        
        }

    

    #noticias > article {
   /*margin: 4px;
   padding: 5px;
   
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;*/
   -webkit-flex: 1 4 80%;
           flex: 1 4 80%;
   -webkit-order: 1;
           order: 1;
  display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
           
            }

    #noticias > article > .articulo{
       /*margin: 4px;
       padding: 5px;
       min-width:240px;
       border: 1px solid #8888bb;
       border-radius: 7pt;
       background: #ccccff;*/
       -webkit-flex: 0 0 25%;
               flex: 0 0 25%;
       -webkit-order: 1;
               order: 1;
    }

    #botonera {
        height:auto;
        margin: 0px;
        margin-top:5px;
        padding: 0px;
        display: -webkit-flex;
        display:         flex;
        -webkit-flex-flow: row;
               flex-flow: row;
        text-align:center;
        }
   #botonera > #derecha{
   /*margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;*/
   -webkit-flex: 1 2 50%;
           flex: 1 2 50%;
   -webkit-order: 2;
           order: 2;
    display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
  
  #botonera > #izquierda {
   /*margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;*/
   -webkit-flex: 1 2 50%;
           flex: 1 2 50%;
   -webkit-order: 1;
           order: 1;
  display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
           
            }


   #botonera > #izquierda > article {
       /*margin: 4px;
       padding: 5px;
       border: 1px solid #8888bb;
       border-radius: 7pt;
       background: #ccccff;*/
       -webkit-flex: 1 2 50%;
               flex: 1 2 50%;
       -webkit-order: 1;
               order: 1;
    }
    
   #botonera > #izquierda > nav {
       /*margin: 4px;
       padding: 5px;
       border: 1px solid #8888bb;
       border-radius: 7pt;
       background: #ccccff;*/
       -webkit-flex: 1 2 50%;
               flex: 1 2 50%;
       -webkit-order: 2;
               order: 2;
    }
    
  
   #botonera > #derecha > article {
       /*margin: 4px;
       padding: 5px;
       border: 1px solid #8888bb;
       border-radius: 7pt;
       background: #ccccff;*/
       -webkit-flex: 1 2 50%;
               flex: 1 2 50%;
       -webkit-order: 1;
               order: 1;
    }
    
   #botonera > #derecha > nav {
       /*margin: 4px;
       padding: 5px;
       border: 1px solid #8888bb;
       border-radius: 7pt;
       background: #ccccff;*/
       -webkit-flex: 1 2 50%;
               flex: 1 2 50%;
       -webkit-order: 2;
               order: 2;
    }
    
  header{
   display: block;
   /*margin: 4px;
   padding: 5px;*/
   min-height: 100px;
   height:auto;
  /* border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;*/
   }

  footer {
   display: block;
   /*margin: 4px;
   padding: 5px;*/
   min-height: 100px;
   height:auto;
   /*border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;*/
   }
 
  /* Too narrow to support three columns */
        @media all and (max-width: 640px) {

            #main, #page {
                -webkit-flex-flow: column;
                flex-flow: column;
            }

                #main > article, #main > nav, #main > aside {
                    /* Return them to document order */
                    -webkit-order: 0;
                    order: 0;
                }

                #main > nav, #main > aside, header, footer {
                    /*min-height: 50px;
    max-height: 50px;*/
                }
        }

.flex-container {
  padding: 0;
  margin: 0;
  
  width:100%; 
  display: -webkit-box;
  display: -moz-box;
  
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
}

.footerMapa{
  max-width: 800px; 
  width:100%;
  height: auto; 
  overflow: hidden; 
  margin: 0 auto; 
  padding-bottom: 20px;
  display: -webkit-box;
  display: -moz-box;
  
  display: -webkit-flex;
  display: flex;
  /*border:1pt solid red;*/
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
}

.footerMapa-item {
    /*border:1pt solid blue;*/
    width:50%;
    min-width:310px;
    text-align:center;
    display: -webkit-box;
  display: -moz-box;
  
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
}

.footerMapa-item2{
    width: 50%; 
    min-width: 200px;
    margin-top:10px;
    /*border:1pt solid white;*/
    text-align:left;
    
}


.direcciones{
  max-width: 1000px; 
  margin: 0 auto; 
  height: auto; 
  overflow: hidden; 
  background-color: #42a62a; 
  text-align: right;
  width:100%; 
  display: -webkit-box;
  display: -moz-box;
  
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
}

.direccion-items {
    width: 62%; 
    text-align: left; 
    margin-top: 15px; 
   color:white;
    /*border:1pt solid red;*/
}

.direccion-items-derecha {
    width: 30%; 
    text-align: right; 
    /*border:1pt solid pink;*/
    margin-left: 5px;
    margin-top:10px;
    margin-bottom:10px;
    
}
.flex-item {
    width:25%; 
    min-width:240px; 
   
  text-align: center;
}
  @media all and (max-width: 640px) {
  
      .footerMapa-item {
    /*border:1pt solid red;*/
    width:100%;
}

   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
           
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    /*min-height: 50px;
    max-height: 50px;*/
   }

   #botonera, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
           
   }
   #botonera > article  {
    /* Return them to document order */
     -webkit-flex: 1 1 25%;
           flex: 1 1 25%;
    -webkit-order: 0;
            order: 0;
    

   }

    #botonera > nav  {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
            width:40%;
   }
   #botonera > aside{
    /* Return them to document order */
    -webkit-order: 1;
            order: 1;
   }

    #botonera > section  {
    /* Return them to document order */
    -webkit-order: 1;
            order: 1;
   }

    #galeriaslide, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
           
   }



     #galeriaslide > article  {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }

   

  
   #galeriaslide > nav, #galeriaslide > aside, header, footer {
    /*min-height: 50px;
    max-height: 50px;*/
   }


  }

  

 #headFlex {
   /*min-height: 800px;
   border:1pt solid red;*/
   height: 100px; 
   margin-top: 20px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 

  
  #headFlex > nav {
   text-align:left;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 1;
           order: 1;
   }
  
  #headFlex > aside {
   text-align:right;
   -webkit-flex: 1 6 26%;
           flex: 1 6 26%;
   -webkit-order: 3;
           order: 3;
   }

    @media all and (max-width: 500px) {

        #headFlex, #page {
            -webkit-flex-flow: column;
            flex-flow: column;
        }

            #headFlex > article, #headFlex > nav, #headFlex > aside {
                /* Return them to document order */
                -webkit-order: 0;
                order: 0;
            }

            #headFlex > nav, #headFlex > aside, header, footer {
                /*min-height: 50px;
    max-height: 50px;*/
            }
        .direcciones {
        text-align:center;
        }

    
            .direccion-items {
    width: 100%; 
    text-align: center; 
 
}
.direccion-items-derecha {
    width: 100%; 
    text-align: center; 
    margin-right:0px;
 
    
}
    .direccion-items-derecha > img {
    margin:auto;
    }
            }

.navigation {
  list-style: none;
  margin: 0; 
  width:100%;

  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
    justify-content: center;
}

.navigation li {
  width:14%;
  text-align:center;
}

.navigation a {
  text-decoration: none;
  display: block;
  color: black;
}

.navigation a:hover {
  background: darken(deepskyblue, 2%);
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
  
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }

  .navigation li {
  width:100%;
}
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}