body {
    font-family: Helvetica Neue Light;
}

@font-face {
    font-family: 'Helvetica Neue Light';
    src: url('../fonts/Helvetica Neue Light.ttf') format('truetype');
}

#customers {
    font-family: Helvetica Neue Light;
    border-collapse: collapse;
    width: 100%;
}

    #customers td, #customers th {
        border: 1px solid #ddd;
        padding: 8px;
    }


    #customers tr:nth-child(even) {
        background-color: #3ca3f1;
    }

    #customers tr:hover {
        background-color: #ddd;
    }

    #customers th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #066fe1;
        color: white;
    }

        .clear {
            width: 100%;
            clear: both;
        }



        /*Estilos Base*/
        .contenedor-img {
            width: 100%;
            height: auto;
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            cursor: default;
            background: #fff;
        }

            .contenedor-img .mascara, .contenedor-img .contenido {
                width: 100%;
                height: 100%;
                position: absolute;
                overflow: hidden;
                top: 0;
                left: 0
            }

            .contenedor-img img {
                display: block;
                position: relative;
            }

            .contenedor-img h2 {
                text-transform: none;
                color: #fff;
                text-align: center;
                position: relative;
                font-size: 10px;
                padding: 10px;
                background: rgba(0, 0, 0, 0.9);
                margin: 8px 0 0 0
            }

            .contenedor-img p {
                font-size: 12px;
                position: relative;
                color: #fff;
                padding: 10px 20px 10px;
                text-align: center
            }

            .contenedor-img a.link {
                display: inline-block;
                text-decoration: none;
                padding: 7px 14px;
                background: #222;
                color: #fff;
                text-transform: none;
                box-shadow: 0 0 1px #000
            }

                .contenedor-img a.link:hover {
                    box-shadow: 0 0 5px #000
                }


        /*Ejemplo 1*/
        .ejemplo-1 img {
            transition: all 0.2s linear;
        }

        .ejemplo-1 .mascara {
            opacity: 0;
            background-color: rgba(46,157,120, 0.7);
            transition: all 0.3s ease-in-out;
        }

        .ejemplo-1 h2 {
            transform: translateX(-200px);
            opacity: 0;
            transition: all 0.7s ease-in-out;
        }

        .ejemplo-1 p {
            transform: translateX(200px);
            opacity: 0;
            transition: all 0.4s linear;
        }

        .ejemplo-1 a.link {
        }

        .ejemplo-1:hover img {
            transform: scale(1.1);
        }

        .ejemplo-1:hover .mascara {
            opacity: 1;
        }

        .ejemplo-1:hover h2,
        .ejemplo-1:hover p,
        .ejemplo-1:hover a.link {
            opacity: 1;
            transform: translateX(0px);
        }

        .ejemplo-1:hover p {
            transition-delay: 0.1s;
        }

        .ejemplo-1:hover a.link {
            transition-delay: 0.2s;
            transform: translateY(0px);
        }

        .fullimage {
            height: 100%;
            margin: 0;
        }

        .bg {
            /* Full height */
            height: 100%;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

    
        .tooltip1 {
            position: relative;
            display: inline-block;
            /*border-bottom: 0px dotted black;*/
        }

        .tooltip1 .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 110%;
        }

            .tooltip1 .tooltiptext::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 100%;
                margin-top: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent black transparent transparent;
            }

        .tooltip1:hover .tooltiptext {
            visibility: visible;
        }
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
           
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }
        .cols {
            display: table;
            width: 30%;
        }

            .cols div {
                display: table-cell;
            }

        .col1 {
            
        }

        .col2 {
            
        }

        p {
            margin: 1em;
        }