<?php
$id = $pagina[1];
?>

<!-- <video autoplay muted loop id="myVideo" style="display: none">
    <source src="https://firebasestorage.googleapis.com/v0/b/icc2020.appspot.com/o/Registro-agenda_1.mp4?alt=media&token=e070889f-63a9-4e07-b127-12272af12015" type="video/mp4">
</video> -->
<style>
    body {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        <?php if ($id == '1') { ?>background-image: url(<?php echo $url; ?>/img/img_wd/bg_plenaria.png);
        <?php } ?><?php if ($id == '2') { ?>background-image: url(<?php echo $url; ?>/img/img_wd/bg_colombia.png);
        <?php } ?><?php if ($id == '3') { ?>background-image: url(<?php echo $url; ?>/img/img_wd/bg_mexico.png);
        <?php } ?><?php if ($id == '4') { ?>background-image: url(<?php echo $url; ?>/img/img_wd/bg_argentina.png);
        <?php } ?>
    }

    #myVideo {
        position: fixed;
        right: 0;
        bottom: -30;
        min-width: 100%;
        min-height: 100%;
        z-index: -1;
        width: 100%;
    }

    .inputs {
        margin-bottom: 5px;
    }

    label {
        color: #006cc1;
        font-weight: bold;
        margin-bottom: 0px;
        margin-top: 5px;
    }

    .ficha_agenda {
        background-color: #fff;
        width: 170px;
        border-radius: 20px;
        text-align: center;
        margin-bottom: -5px;
        transform: scale(0.8);
        transition: 0.5s all;
        color: #062a3c;
        display: inline-table;

        line-height: 30px;
    }

    .ficha_agenda:hover {
        transform: scale(1);
    }

    .ti_ficha_agenda {
        background-color: #109CCE;
        color: #fff;
        padding: 6px;
        font-weight: bold;
        font-size: 18px;
        line-height: 24px;
        border-radius: 20px 20px 0px 0px;
    }

    .horario {
        background-color: #109cce;
        width: 90%;
        font-size: 14px;
        color: #fff;
        margin-bottom: -20px;
        border-radius: 10px;
        padding: 5px 2px;
    }

    .bt_agenda {
        width: 100%;
        max-width: 260px;
        margin: 20px;
        transition: 0.5s all;
    }

    .bt_agenda:hover {
        transform: scale(1.1);
    }
</style>

<div class="col-md-12">

    <div class="container">

        <?php echo $rersp; ?>

        <div class="row">
            <div class="col-md-12" align="center">
                <?php 
                $titulo = "";
                if($id == 1) {
                    $titulo = "Agenda New Latam";
                } else if($id == 2) {
                    $titulo = "Agenda AFC";
                } else if($id == 3) {
                    $titulo = "Agenda AFM";
                } else if($id == 4) {
                    $titulo = "Agenda AFA";
                }
                ?>
                <h1 style="margin-top: 3%; color: #000;"><?php echo $titulo; ?></h1>

                <?php if ($id == '1') { ?>

                    <div>
                        <a href="<?php $url; ?>/dia/2/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_plenaria_21.png" class="bt_agenda"></a>
                        <br>
                        <a href="<?php $url; ?>/dia/3/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_plenaria_22.png" class="bt_agenda"></a>
                        <a href="<?php $url; ?>/dia/4/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_plenaria_23.png" class="bt_agenda"></a>
                    </div>
                <?php } ?>

                <?php if ($id == '2') { ?>

                    <div>
                        <a href="<?php $url; ?>/dia/1/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_colombia_20.png" class="bt_agenda"></a>
                        <br>
                        <a href="<?php $url; ?>/dia/3/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_colombia_22.png" class="bt_agenda"></a>
                        <a href="<?php $url; ?>/dia/4/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_colombia_23.png" class="bt_agenda"></a>
                    </div>
                <?php } ?>

                <?php if ($id == '3') { ?>

                    <div>
                        <a href="<?php $url; ?>/dia/1/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_mexico_20.png" class="bt_agenda"></a>
                        <a href="<?php $url; ?>/dia/2/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_mexico_21.png" class="bt_agenda"></a>
                        <br>
                        <a href="<?php $url; ?>/dia/3/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_mexico_22.png" class="bt_agenda"></a>
                        <a href="<?php $url; ?>/dia/4/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_mexico_23.png" class="bt_agenda"></a>
                    </div>
                <?php } ?>

                <?php if ($id == '4') { ?>

                    <div>
                        <a href="<?php $url; ?>/dia/2/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_argentina_21.png" class="bt_agenda"></a>
                        <br>
                        <a href="<?php $url; ?>/dia/3/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_argentina_22.png" class="bt_agenda"></a>
                        <a href="<?php $url; ?>/dia/4/seccion/<?php echo $id; ?>"><img src="<?php echo $url; ?>/img/img_wd/bt_argentina_23.png" class="bt_agenda"></a>
                    </div>
                <?php } ?>

            </div>

        </div>
        <div class="row">
            <div class="col-12" align="left">
                <a href="<?php echo $url; ?>/secciones">
                    <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="100" style="width: 180px; z-index: 5;" class="e_web">
                </a>
            </div>


        </div>

    </div>

</div>

<script>
    $(document).ready(function() {
        $("#bt_agenda").addClass("btn_item_menu_active");
    });
</script>