@charset "utf-8";
/* CSS Document */

#info-soluciones{
	padding:50px 0 50px 0;
    border-bottom:1px solid rgba(215,215,215,0.5);
    }

#info-soluciones h1{
    text-align:center;
    margin:0 0 40px 0;
    padding:0 20px;
    }

#info-soluciones ul{
    display:flex;
	justify-content:center;
    flex-wrap:wrap;
    list-style-type:none;
    /*background:green;*/
    }
#info-soluciones ul li{
    width:215px; height: 100px; float: left; margin: 0 20px 0 0;
    }

#info-soluciones ul li img {
    max-width:100%; max-height:100%;
	position: relative;
	top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
	filter: Gray(); /* IE4-8 and 9 */
	
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
    }

#info-soluciones ul li img:hover { 
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }


    @media (min-width:320px){
        #info-soluciones h1{
            font-size:40px;
            }
        }

    @media (min-width:480px){
        #info-soluciones h1{
            font-size:45px;
            }
        }

    @media (min-width:768px){
        #info-soluciones h1{
            font-size:50px;
            }
        }

    @media (min-width:1024px){	
	    #info-soluciones h1{
		    font-size:55px;
		    }
	    }