<?php
/*
 * Copyright 2017-08-02  Cámara de Comercio de Santa Marta para el Magdalena.
 * Autor: Juan Pablo Llinás Ramírez <www.ccsm.org.co>.
 * Archivo: app. 
 *
 * Licenciado bajo la Licencia Apache, Versión 2.0;
 * Usted no puede usar este archivo excepto en conformidad con la Licencia. 
 * Usted puede obtener una copia de la Licencia en 
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * A menos que sea requerido por la ley aplicable o acordado por escrito, el software
 * Distribuido bajo la licencia se distribuye en una "AS IS" o  "COMO ESTA" BASE,
 * SIN GARANTÍAS NI CONDICIONES DE NINGÚN TIPO, expresas o implícitas.
 * Consulte la Licencia para los permisos y Limitaciones bajo la Licencia.
 */
?>
<title>Cargando aplicación.....</title>
<style>
    /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
    body {
        background: #141414;
        width: 100%;
        height: 100%;
    }

    .loading {
        text-transform: uppercase;
        text-align: center;
        font-family: 'Cabin Condensed', sans-serif;
        font-weight: bold;
        /*        font-size: 100pt;
                height: 120px;
                line-height: 110px;*/
        vertical-align: bottom;
        position: absolute;
        left: 0;
        right: 0;
        top: 100px;
        bottom: 0;
        display: block;
    }

    @media screen and (max-width: 400px) {
        .loading {
            font-size: 50pt;
            height: 50pt;
            line-height: 50pt;
        }
    }

    @media screen and (min-width: 401px) and (max-width: 720px) {
        .loading {
            font-size: 70pt;
            height: 70pt;
            line-height: 70pt;
        }
    }

    @media screen and (min-width: 721px) and (max-width: 1280px) {
        .loading {
            font-size: 100pt;
            height: 100pt;
            line-height: 100pt;
        }
    }

    @media screen and (min-width: 1281px) {
        .loading {
            font-size: 140pt;
            height: 140pt;
            line-height: 140pt;
        }
    }


    .loading-2 {
        top: 300px;
        width: 473px;
        height: 97px;
        font-size: 0;
        background: rgba(255, 255, 255, 0.06);
        margin: 0 auto;
    }

    .ff {
        position: absolute;
        font-size: 12pt;
        top: -20px;
        color: white;
        line-height: 12pt;
    }

    /*    .loading-2-text {
            background-image: url("https://i.imgur.com/cZc1otp.png");
            width: 473px;
            height: 97px;
            display: inline-block;
        }*/

    @keyframes wave-animation {
        0% {
            background-position: 0 bottom;
        }
        100% {
            background-position: 200px bottom;
        }
    }
    @keyframes loading-animation {
        0% {
            background-size: 200px 0px;
        }
        100% {
            background-size: 200px 200px;
        }
    }
    .wave {
        background-image: url("https://i.imgur.com/uFpLbYt.png");
        -moz-background-clip: text;
        -o-background-clip: text;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
        animation: wave-animation 1s infinite linear, loading-animation 3s infinite linear alternate;
        background-size: 200px 100px;
        background-repeat: repeat-x;
        opacity: 1;
    }

    .wave-2 {
        -moz-background-clip: initial;
        -o-background-clip: initial;
        -webkit-background-clip: initial;
        background-clip: initial;
        display: inline-block;

        animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
    }





    .loader,
    .loader:before,
    .loader:after {
        background: #ffe4e1;
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }
    .loader {
        color: #ffe4e1;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    .loader:before,
    .loader:after {
        position: absolute;
        top: 0;
        content: '';
    }
    .loader:before {
        left: -1.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    .loader:after {
        left: 1.5em;
    }
    @-webkit-keyframes load1 {
        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }
        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }
    @keyframes load1 {
        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }
        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<div class="text-center">
    <div class="loading wave">
        Cargando    
    </div>
    <div class="loader">Loading...</div>
    <div class=" " style="color: white;" >espere mientras cargamos la aplicación solicitada.</div>
</div>
<script>
$( document ).ready(function() {
     <?= $App->aplicacionFUNCION ?>
     cambiarTITULO("<?= $App->aplicacionTITULO ?>");
});
</script>