*{
    margin:0px;
    padding:0px;
    font-family: 'Open sans';
}

.menu_horizontal{
    height: auto;
    margin: 5px auto 100px auto;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

div.contenedor_horizontal{
    background: rgb(228, 228, 228);
    border: 1px solid black;
    border-radius: 10px;  
    margin: 30px auto 60px auto;  
    width: 15%;
    box-sizing: border-box;
    height: 80%; 
    box-shadow: 10px 10px 5px #8888;
    background-size: contain;
    text-align: center;
    
   
}

img.icon{
    -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0.6);
    -webkit-transition:box-shadow 0.4s;
}

div#uno{
    background-color: grey
}
div#uno img{
    display: block;
    margin: 25% auto;
    width:58%;
    background-color:rgba(255,255,255, .15);
    padding: 10px;
    -webkit-border-radius: 50%;
   
}


div#dos{
    background-color:green;
}
div#dos img{
    display: block;
    margin: 25% auto;
    width:42%;
    background-color:rgba(255,255,255, .15);
    padding: 10px;
    -webkit-border-radius: 50%;
   
}


div#tres{
    background-color:black;
}
div#tres img{
    display: block;
    margin: 25% auto;
    width:43%;
    background-color:rgba(255,255,255, .15);
    padding: 10px;
    -webkit-border-radius: 50%;
}


div#cuatro{
    background-color:yellow;  
}

div#cuatro img{
    display: block;
    margin: 31% auto;
    width:65%;
    background-color: rgba(255,255,255, .15);
    padding: 15px;
    -webkit-border-radius: 10%;   
}


div#cinco{
    background-color: rgb(66, 117, 211);
}
div#cinco img{
    display: block;
    margin: 25% auto;
    width:43%;
    background-color:rgba(255,255,255, .15);
    padding: 0px;
    -webkit-border-radius: 50%;
    
 }


div#seis{
    background-color:red;
}
div#seis img{
    display: block;
    margin: 25% auto;
    width:43%;
    background-color:rgba(255,255,255, .15);
    padding: 10px;
    -webkit-border-radius: 50%;
   
}

p.Texto_menu_horizontal{
    font-family:'Open sans';
    font-size: 1.2em;
    color: white;
    text-align: center;
    opacity: 0.6;
    margin-left: -18px;
    text-shadow: -2px -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000;
    
}

div.contenedor_horizontal:hover{
height: 270px;
margin-bottom: 35px;
transition: 0.6s;

}

div.contenedor_horizontal:hover p.Texto_menu_horizontal{
padding-top: 2%;
transition: 0.8s;
}

div.contenedor_horizontal:hover img.icon{
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.3);
}

 /* Responsive =======*/

 @media (max-width: 1200px){
    div.contenedor_horizontal{ 
        margin: 10px auto 60px auto;  
        width: 32%;
    }
    .menu_horizontal{
        height: auto;
        margin: 10px auto 5px auto;
        width: 90%;
      
    }
    div.contenedor_horizontal:hover{
        height: 340px;
        margin-bottom: 40px;
        transition: 0.6s;
        }
        
        div.contenedor_horizontal:hover p.Texto_menu_horizontal{
        padding-top: 1%;
        transition: 0.8s;
        }

        img.icon{
            -webkit-box-shadow: 0px 0px 0px 15px rgba(255,255,255,0.6);
            -webkit-transition:box-shadow 0.4s;
        }
}  

 @media (max-width: 900px){
    div.contenedor_horizontal{ 
        margin: 10px auto 60px auto;  
        width: 32%;
    }
    .menu_horizontal{
        height: auto;
        margin: 10px auto 5px auto;
        width: 90%;
      
    }
    div.contenedor_horizontal:hover{
        height: 280px;
        margin-bottom: 35px;
        transition: 0.6s;
        }
        
        div.contenedor_horizontal:hover p.Texto_menu_horizontal{
        padding-top: 4%;
        transition: 0.8s;
        }

        img.icon{
            -webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.6);
            -webkit-transition:box-shadow 0.4s;
        }
}  

 @media (max-width: 800px){
    div.contenedor_horizontal{ 
        margin: 10px auto 60px auto;  
        width: 32%;
    }
    .menu_horizontal{
        height: auto;
        margin: 10px auto 5px auto;
        width: 90%;
      
    }
    div.contenedor_horizontal:hover{
        height: 260px;
        margin-bottom: 30px;
        transition: 0.6s;
        }
        
        div.contenedor_horizontal:hover p.Texto_menu_horizontal{
        padding-top: 1%;
        transition: 0.8s;
        }

        img.icon{
            -webkit-box-shadow: 0px 0px 0px 15px rgba(255,255,255,0.6);
            -webkit-transition:box-shadow 0.4s;
        }
}     
    
@media (max-width: 600px){
    div.contenedor_horizontal{ 
        margin: 10px auto 45px auto;  
        width: 30%;
    }
    .menu_horizontal{
        height: auto;
        margin: 10px auto 5px auto;
        width: 90%;
      
    }
    div.contenedor_horizontal:hover{
        height: 180px;
        margin-bottom: 15px;
        transition: 0.6s;
        }
        
        div.contenedor_horizontal:hover p.Texto_menu_horizontal{
        padding-top: 1%;
        transition: 0.8s;
        }

        img.icon{
            -webkit-box-shadow: 0px 0px 0px 15px rgba(255,255,255,0.6);
            -webkit-transition:box-shadow 0.4s;
        }
}  
@media (max-width: 500px){
    div.contenedor_horizontal{ 
        margin: 10px auto 45px auto;  
        width: 30%;
    }
    .menu_horizontal{
        height: auto;
        margin: 10px auto 5px auto;
        width: 90%;
      
    }
    div.contenedor_horizontal:hover{
        height: 180px;
        margin-bottom: 15px;
        transition: 0.6s;
        }
        
        div.contenedor_horizontal:hover p.Texto_menu_horizontal{
        padding-top: 1%;
        transition: 0.8s;
        }

        img.icon{
            -webkit-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.6);
            -webkit-transition:box-shadow 0.4s;
        }
}  
@media (max-width: 360px){
    div.contenedor_horizontal{ 
        margin: 10px auto 45px auto;  
        width: 42%;
    }
    .menu_horizontal{
        height: auto;
        margin: 10px auto 5px auto;
        width: 90%;
      
    }
    div.contenedor_horizontal:hover{
        height: 180px;
        margin-bottom: 15px;
        transition: 0.6s;
        }
        
        div.contenedor_horizontal:hover p.Texto_menu_horizontal{
        padding-top: 1%;
        transition: 0.8s;
        }

        img.icon{
            -webkit-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.6);
            -webkit-transition:box-shadow 0.4s;
        }
}