<div class="jumbotron" style="font-family: 'Tw Cen MT';">
    <div class="container">
        <h2>Seleccione la sede a la que va a ingresar:</h2>
        <style type="text/css">
            /*general styles*/
            html{
                height:100%;
                overflow-y:scroll;
                overflow-x:hidden;
            }
            body{
                width:100%;
                height:100%;
                line-height:1.5;
                font-family:'Lato', sans-serif;
                font-weight:300;
                font-size:16px;
            }
            ul{
                list-style-type: none;
            }

            /*dashboard and pages styles*/

            .demo-wrapper{
                background:url("1.png");
                background-size:cover;
                padding: 4em .5em;
                width:100%;
                perspective:3300px;
                position:relative;
                overflow:hidden;
                border-bottom:1px solid #eee;
            }
            .dashboard{
                margin:0 auto;
                width:100%;
                padding:1em;
            }
            .col1, .col2, .col3{
                width:99%;
                margin:1em auto;
            }
            .page{
                width:100%;
                height:100%;
                color:white;
                text-align:center;
                font-size:3em;
                font-weight:300;
                position:absolute;
                right:0;
                top:0;
                opacity:0;
                transform-origin: 100% 0%;
                transform:rotateY(-90deg) translateZ(5em);
            }
            .page-title {
                margin-top:1em;
                font-weight:100;
                font-size:2.5em;
            }

            /*styling the pages*/

            .page.random-page{
                background:#DFD4C1;
            }

            .page.todos{
                background:#2FB1BE;
            }

            /*the close button in the upper right corner of each page*/

            .close-button{
                font-size:1em;
                width:1em;
                height:1em;
                position:absolute;
                top:1.25em;
                right:1.25em;
                cursor:pointer;
                border:1px solid white;
                line-height:.8em;
                text-align:center;
            }






            .big, .small{
                float:left;
                margin:0 auto 1%;
                font-size:2em;
                color:white;
                text-align:center;
                height:4.5em;
                font-weight:300;
                overflow:hidden;
                padding:.75em 1em;
                cursor:pointer;
                transition:all 0.3s ease-out;
            }
            .big:hover, .small:hover{
                background:white;
            }
            .big{
                width:100%;
            }
            .small{
                width:49%;
                margin-right:2%;
            }
            .big p {
                line-height:1.5;
                margin-top:.6em;
                padding:0 .3em;
                transition:all 0.3s ease-out;
            }
            .small.last{
                margin-right:0;
            }

            /*icon fonts styles*/

            .icon-font{
                font-size:2em;
            }
            .big .icon-font{
                float:left;
            }
            .lock-thumb .icon-font{
                margin-left:25%;
            }

            /*styling the dashboard boxes*/

            .weather-thumb {background:#F2854C;}
            .weather-thumb:hover {color:#F2854C;}

            .paint-thumb {background:#85A9C3;}
            .paint-thumb:hover {color:#85A9C3;}

            .cpanel-thumb {background:#83A8C3;}
            .cpanel-thumb:hover {color:#83A8C3;}

            .games-thumb {background:#04ACAD;}
            .games-thumb:hover {color:#04ACAD;}

            .news-thumb, .calculator-thumb {background:#EBB741;}
            .news-thumb:hover, .calculator-thumb:hover {color:#EBB741;}

            .videos-thumb, .shortcut-thumb{background:#BEA881;}
            .videos-thumb:hover, .shortcut-thumb:hover{color:#BEA881;}

            .lock-thumb, .alarm-thumb {background:#EF3A5B;}
            .lock-thumb:hover, .alarm-thumb:hover {color:#EF3A5B;}

            .piano-thumb, .favorites-thumb, .notes-thumb {background:#385E82;}
            .piano-thumb:hover, .favorites-thumb:hover, .notes-thumb:hover {color:#385E82;}

            .photos-thumb {background:#BEA881;}
            .photos-thumb:hover {color:#BEA881;}

            .calendar-thumb, .organizer-thumb {background:#8BBA30;}
            .calendar-thumb:hover, .organizer-thumb:hover {color:#8BBA30;}

            .todos-thumb {background:#2FB1BE;}
            .todos-thumb:hover {color:#2FB1BE;}

            .todos-thumb p{
                margin-top:.8em;
            }
            .todos-thumb-span{
                display:block;
                margin-top:1.5em;
            }
            .todos-thumb:hover p{
                margin-top:-2.7em;
            }




            .openpage{
                animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
            }
            .slidePageLeft{
                transform: rotateY(0) translateZ(0) ; opacity:1;
                animation:slidePageLeft .8s ease-out 1 normal forwards;
            }

            @keyframes rotatePageInFromRight{
                0% {transform:rotateY(-90deg) translateZ(5em);opacity:0}
                30% {opacity:1}
                100% {transform: rotateY(0deg) translateZ(0) ; opacity:1}
            }

            /*When the close-button is clicked, the page slides to the left*/
            /*note that the start of the second animation is the same state as the
            end of the previous one*/

            @keyframes slidePageLeft{
                0% {left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1}
                70% {opacity:1;}
                100% {opacity:0; left:-150%; transform: rotateY(0deg)}
            }



            .login-screen{
                background:#EF3A5B;
                height:100%;
                width:100%;
                position:absolute;
                top:0;
                left:-150%;
                color:white;
                text-align:center;
                font-weight:300;
                z-index:1;
            }
            .login-screen p{
                font-size:6em;
                margin-top:2em;
                font-weight:100;
            }
            .myform{
                margin:2em auto;
                width:300px;
            }

            input{
                display:block;
                line-height:40px;
                padding:0 10px;
                width:260px;
                height:40px;
                float:left;
            }
            #unlock-button{
                background:black;
                color:white;
                font-size:1em;
                float:left;
                border:0;
                height:2.5em;
                width:2.5em;
                padding:.3125em;
                text-align:center;
                cursor:pointer;
                border-radius:2px;
            }
            .slidePageInFromLeft{
                animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
            }
            .slidePageBackLeft{
                opacity:1;
                left:0;
                animation: slidePageBackLeft .8s ease-out 1 normal forwards;
            }
            @keyframes slidePageInFromLeft{
                0% {opacity:0; }
                30% {opacity:1}
                100% {opacity:1; left:0;}
            }
            @keyframes slidePageBackLeft{
                0% {opacity:1; left:0; transform: scale(0.95);}
                10% {transform: scale(0.9);}
                70% {opacity:1;}
                100% {opacity:0; left:-150%;}
            }

            .fadeOutback{
                animation: fadeOutBack 0.3s ease-out 1 normal forwards;
            }
            .fadeInForward-1, .fadeInForward-2, .fadeInForward-3 {
                /*remember: in the second animation u have to set the final values reached by the first one*/
                opacity:0;
                transform: translateZ(-5em) scale(0.75);
                animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
            }

            .fadeInForward-2{
                animation-delay: .55s;
            }
            .fadeInForward-3{
                animation-delay: .7s;
            }

            @keyframes fadeOutBack{
                0% {transform: translateX(-2em) scale(1); opacity:1;}
                70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
                95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
                100% {transform: translateZ(-5em) scale(0); opacity:0;}
            }
            @keyframes fadeInForward{
                0% {transform: translateZ(-5em) scale(0); opacity:0;}
                100% {transform: translateZ(0) scale(1); opacity:1;}
            }

            @media screen and (min-width: 43.75em){
                .col1,.col2,.col3{
                    float:left;
                    margin-right:1%;
                    width:49%;
                }
            }
            @media screen and (min-width: 64em){
                .col1,.col2,.col3{
                    float:left;
                    margin-right:.5%;
                    width:32%;
                }
                .col3{margin-right: 0;}
                .col1{margin-left:2em;}

            }

        </style>
        <div class="dashboard clearfix">
            <div class="row clearfix">     
                <?php if (isset($Sedes) and count($Sedes)) : ?>
                    <?php foreach ($Sedes as $Sede) : ?>
                        <div class="col-md-3" style="padding-bottom: 10px;">
                            <div class="big todos-thumb" sede-id="<?= $Sede->sedeID ?>" style="cursor: pointer; " >
                                <p><?= $Sede->sedeTITULO ?>
                                    <span class="todos-thumb-span">Iniciar</span>
                                    <span><i class="glyphicon glyphicon-qrcode "></i></span>
                                </p>        
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div> 
        </div>
    </div>
</div>

<script type="text/javascript">
    function showDashBoard() {
        for (var i = 1; i <= 3; i++) {
            $('.col' + i).each(function () {
                $(this).addClass('fadeInForward-' + i).removeClass('fadeOutback');
            });
        }
    }
    function fadeDashBoard() {
        for (var i = 1; i <= 3; i++) {
            $('.col' + i).addClass('fadeOutback').removeClass('fadeInForward-' + i);
        }
    }
    function cargarWebCam(sede) {
        cargarVistaApps('asistencia', 'webcam', 'sede=' + sede);
    }
    
    $('.big, .small').each(function () {
        var $this = $(this),
        sede = $this.attr('sede-id');
        $this.on('click', function () {
            fadeDashBoard();
            cargarWebCam(sede);
        })
    });
</script>