﻿body {
    background-color: #ca0200;
    background-image: url('../../Media/images/bg-video.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+26,000000+100&0.65+25,0+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 25%, rgba(0,0,0,0.64) 26%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 25%,rgba(0,0,0,0.64) 26%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 25%,rgba(0,0,0,0.64) 26%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.vimeo-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.3;
    z-index: 2;
}

.vimeo-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /*pointer-events: none;*/
    overflow: hidden;
}

    .vimeo-wrapper iframe {
        width: 100vw;
        height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
        min-height: 100vh;
        min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }


.index-content {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:1200px;
}
@media (max-width: 1200px) {
    .index-content {
     
        width: 768px;
    }
}
@media (max-width: 768px) {
    .index-content {
        width: auto;
    }
}
    @media (max-width: 575.98px) {
        .index-content {
            top: 80%;
        }

        .links {
            margin-bottom: 0;
        }

            .links a {
                margin-bottom: 1rem;
                font-size: 1.4rem !important;
            }
    }

    .links {
        margin-bottom: 1rem;
    }

        .links a {
            display: inline-block;
            font-size: 2rem;
            color: #fff;
            height: 55px;
            line-height: 55px;
            width: 336px;
            background-repeat: no-repeat;
            background-position-x: center;
            /* background-size: cover;*/
        }

        /*.links a:first-child {
            margin-right: 5rem;
        }*/

        .links .link-visitor {
            background-image: url('../../Media/images/btn-bg-customer.png');
        }

        .links .link-vendor {
            background-image: url('../../Media/images/btn-bg-vender.png');
        }

        .links .link-virtual {
            background-image: url('../../Media/images/btn-bg-virtual.png');
        }

        .links .link-ticket {
            background-image: url('../../Media/images/btn-bg-ticket.png');
        }

    /*@media (max-width: 1513px) {
    .links a {
        font-size: 1.6rem;
        height: 46px;
        line-height: 46px;
        width: 260px;
        background-size: contain;
        background-position:center center;
        background-repeat:no-repeat;
    }
}*/
.btn-dark-red {
    color:#fff !important;
    background-color: #64130e;
    border-color: #64130e;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 300px;
}



    .btn-dark-red:hover {
        color: #000 !important;
        background-color: #e83b3b;
        border-color: #e83b3b;
    }

    .btn-check:focus + .btn-dark-red, .btn-dark-red:focus {
        color: #000 !important;
        background-color: #e83b3b;
        border-color: #e83b3b;
        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    }

    .btn-check:checked + .btn-dark-red, .btn-check:active + .btn-dark-red, .btn-dark-red:active, .btn-dark-red.active, .show > .btn-dark-red.dropdown-toggle {
        color: #000 !important;
        background-color: #e83b3b;
        border-color: #e83b3b;
    }

        .btn-check:checked + .btn-dark-red:focus, .btn-check:active + .btn-dark-red:focus, .btn-dark-red:active:focus, .btn-dark-red.active:focus, .show > .btn-dark-red.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
        }

    .btn-dark-red:disabled, .btn-dark-red.disabled {
        color: #000 !important;
        background-color: #e83b3b;
        border-color: #e83b3b;
    }


.btn-la-red {
    color: #fff !important;
    background-color: #e70012;
    border-color: #e70012;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 300px;
}

    .btn-la-red:hover {
        color: #000 !important;
        background-color: #ff7520;
        border-color: #ff7520;
    }

    .btn-check:focus + .btn-la-red, .btn-la-red:focus {
        color: #000 !important;
        background-color: #ff7520;
        border-color: #ff7520;
        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    }

    .btn-check:checked + .btn-la-red, .btn-check:active + .btn-la-red, .btn-la-red:active, .btn-la-red.active, .show > .btn-la-red.dropdown-toggle {
        color: #000 !important;
        background-color: #ff7520;
        border-color: #ff7520;
    }

        .btn-check:checked + .btn-la-red:focus, .btn-check:active + .btn-la-red:focus, .btn-la-red:active:focus, .btn-la-red.active:focus, .show > .btn-la-red.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
        }

    .btn-la-red:disabled, .btn-la-red.disabled {
        color: #000 !important;
        background-color: #ff7520;
        border-color: #ff7520;
    }


.btn-oc-blue {
    color: #fff !important;
    background-color: #315690;
    border-color: #315690;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 300px;
}

    .btn-oc-blue:hover {
        color: #000 !important;
        background-color: #87C8E3;
        border-color: #87C8E3;
    }

    .btn-check:focus + .btn-oc-blue, .btn-oc-blue:focus {
        color: #000 !important;
        background-color: #87C8E3;
        border-color: #87C8E3;
        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    }

    .btn-check:checked + .btn-oc-blue, .btn-check:active + .btn-oc-blue, .btn-oc-blue:active, .btn-oc-blue.active, .show > .btn-oc-blue.dropdown-toggle {
        color: #000 !important;
        background-color: #87C8E3;
        border-color: #87C8E3;
    }

        .btn-check:checked + .btn-oc-blue:focus, .btn-check:active + .btn-oc-blue:focus, .btn-oc-blue:active:focus, .btn-oc-blue.active:focus, .show > .btn-oc-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
        }

    .btn-oc-blue:disabled, .btn-oc-blue.disabled {
        color: #000 !important;
        background-color: #87C8E3;
        border-color: #87C8E3;
    }

.btn-bg-blue {
    color: #fff !important;
    background-color: #2daae1;
    border-color: #2daae1;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 300px;
}
    .btn-bg-blue:hover {
        color: #000 !important;
        background-color: #d9f0fa;
        border-color: #d9f0fa;
    }

    .btn-check:focus + .btn-bg-blue, .btn-bg-blue:focus {
        color: #000 !important;
        background-color: #d9f0fa;
        border-color: #d9f0fa;
        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    }

    .btn-check:checked + .btn-bg-blue, .btn-check:active + .btn-bg-blue, .btn-bg-blue:active, .btn-bg-blue.active, .show > .btn-bg-blue.dropdown-toggle {
        color: #000 !important;
        background-color: #d9f0fa;
        border-color: #d9f0fa;
    }

        .btn-check:checked + .btn-bg-blue:focus, .btn-check:active + .btn-bg-blue:focus, .btn-bg-blue:active:focus, .btn-bg-blue.active:focus, .show > .btn-bg-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
        }

    .btn-bg-blue:disabled, .btn-bg-blue.disabled {
        color: #000 !important;
        background-color: #d9f0fa;
        border-color: #d9f0fa;
    }