{# Template : Wisebee Video #}
{% set disable_breadcrumbs = false %}

{% block content %}

{% set title_breadcrumbs = [
    {
        url: '/',
        name: 'Home'
    },
    {
        url: '/online-consultations',
        name: 'Online Consultations'
    },
    {
        url: '/online-consultations/video',
        name: 'Video'
    }
] %}

<div class="position-ref full-height">
    <header class="widgetHead">
        {% include 'includes/elements/logo.twig' with {
            svg_logo: false
        }%}
    </header>

    <div class="widgetWrap">
        {{ p.pagedata['wisebee_consultation_snippet']|raw }}
    </div>
</div>

<style>
html, body {
    background-color: #fff;
    color: #0C152C;
    height: 100vh;
    margin: 0;
}

@media all and (min-width: 801px) {
    .full-height {
        height: 100vh;
    }
}

.position-ref {
    position: relative;
}

.widgetHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 89px;
    padding-left: calc((100% - 1400px) / 2);
    padding-right: calc((100% - 1400px) / 2);
    position: relative;
    background: #fff;
}

.widgetWrap {
    position: relative;
    z-index: 1;
}

.widgetHead + .widgetWrap:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    z-index: 9000;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.08);
}

.widgetHead .logo img {
    max-width: 166px;
    max-height: 48px;
}

.modal-open .widgetHead {
    z-index: 1;
}

@media all and (max-width: 1400px) {
    .widgetHead {
        padding: 0 1.5em;
    }
}

@media all and (max-width: 800px) {
    .widgetHead {
        height: 68px;
    }

    .widgetHead .logo img {
        max-width: 115px;
    }
}

@media all and (min-width: 681px) {
    .widgetHead {
        z-index: 2;
    }
}
</style>

{% endblock %}
