.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  /*line-height: 150px;*/
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  border-radius: 5px;
}

.text-middle{
 position:relative;
 top:50px;    
}

.text-middle2{
 position:relative;
 top:30px;    
}

.musica{
background: #77438d;    
}

.artes{
background: #3ac6e2;
}

.danza{
background: #0e88c4;
}

.teatro{
background: #e4a64c;
}

.cine{
background: #cb5b36;
}

.animacion{
background: #842c3a;
}


.shadow{
-webkit-box-shadow: inset 10px 9px 8px -10px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 9px 8px -10px rgba(0,0,0,0.75);
box-shadow: inset 10px 9px 8px -10px rgba(0,0,0,0.75);
}   

body{
background-color: white !important;    
}


#grad3 {
  height: 8px;
  z-index:7000;
  background-color: #029bbf;
}

#proximamente{
  color:grey; 
  padding: 40px 40px 0px 40px; 
  font-size: 3.4em;
}