/* INI - intro (todo el header) y navbar */

  	/* Height for devices larger than 576px */
    @media (min-width: 992px) {
      #intro {
        /*margin-top: -58.59px;*/
      }
    }
    .navbar .nav-link {
      /*color: #fff !important;*/
    }

    /* INI - agregados por mi */
    .navbar{
			z-index: 3;
		}
    .navbar-brand img{
			height: 40px;
			margin-top: 0;
			padding-top: 0;
			margin-bottom: 0;
			padding-bottom: 0;
			box-sizing: border-box;
		}

    
    body { 
		    padding-top: 66px; 
		}
    @media (max-width:767px) {
		  body {
		    padding-top:66px;
			}
		}
		@media screen and (min-width:768px) and (max-width:990px) {
		  body {
		    padding-top:66px;
		  }
		}
		@media screen and (min-width:991px) and (max-width:1200px) {
		  body {
		    padding-top:66px;
		  }
		}
		/* FIN - agregados por mi */

	/* FIN - intro (todo el header) y navbar */



	/* INI - para libreria lazyload.min.js (carga de imagenes solo mientras se scrolea hacia abajo)  */
		
		/* https://github.com/verlok/vanilla-lazyload */

		ul,
    li {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    a,
    img {
      display: block;
    }

    img {
      border: 0;
      width: auto; /*220px;*/
      height: auto; /*280px;*/
    }

    img:not([src]) {
      visibility: hidden;
    }

    /* Fixes Firefox anomaly during image load */
    @-moz-document url-prefix() {
      img:-moz-loading {
        visibility: hidden;
      }
    }
	/* FIN - para libreria lazyload.min.js (carga de imagenes solo mientras se scrolea hacia abajo)  */



	/* INI - grid de imagenes del portafolio, responsivas y se auto colocan dependiendo el ancho y alto de la pantalla o contenedor */
		.grid-portafolio .row {
			display: -ms-flexbox; /* IE10 */
	  	display: flex;
	  	-ms-flex-wrap: wrap; /* IE10 */
	  	flex-wrap: wrap;
	  	padding: 0 4px;
		}

		/* Create four equal columns that sits next to each other */
		.column {
			-ms-flex: 25%; /* IE10 */
		  flex: 25%;
		  max-width: 25%;
		  padding: 0 4px;
		}

		.column img {
		  margin-top: 8px;
		  vertical-align: middle;
		  width: 100%;
		}

		/* Responsive layout - makes a two column-layout instead of four columns */
		@media screen and (max-width: 800px) {
		  .column {
		  	-ms-flex: 50%;
		    flex: 50%;
		    max-width: 50%;
		  }
		}

		/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
		@media screen and (max-width: 600px) {
		  .column {
		    flex: 100%;
		    max-width: 100%;
		  }
		}
	/* FIN - grid de imagenes del portafolio, responsivas y se auto colocan dependiendo el ancho y alto de la pantalla o contenedor */



	/* ------- INI - para form de contacto --------- */
		.oculto{
			display: none;
		}
	/* ------- FIN - para form de contacto --------- */

	/* ------- INI - para ICONO FLOTANTE whatsapp --------- */
		@media(max-width: 600px){
			.floating-wpp-button{
				width: 3.5em !important;
				height: 3.5em !important;
			}
		}
	/* ------- FIN - para ICONO FLOTANTE whatsapp --------- */