<template>
<q-layout class="bg-white shadow-24">
    <div class="q-pa-none q-ma-none row top-slider">

        <div class="col-12 col-md-6">
            <div class="slider-l q-pt-xl q-px-xl">
                <h3 class="h1-title text-white text-bold h4-title-mob">Three Steps, One Perfect Medical Tutor</h3>
                <h4 class="text-white">Here’s how it works</h4>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <q-img transition="slide-left" class="header-img" src="statics/howwork.png">
            </q-img>
        </div>
    </div>

    <!-- ******************************************* -->

    <div class="row q-pa-md flex flex-center">
        <div class="col-12 col-md-12">
            <transition appear enter-active-class="animated slideInUp" leave-active-class="animated slideInDown">
                <div class="text-center text-grey-8 q-pb-xl q-mt-md">
                    <span class="text-h4 text-center text-bold line-h-1">FIND YOUR TUTOR &amp; START TAKING LESSONS IN 3 STEPS</span>
                    <h5 class="q-pa-none q-ma-none text-green-6">_____________________</h5>
                </div>
            </transition>
        </div>
    </div>

    <section class="row">
        <div class="col-12 col-md-6">
            <q-item>
                <q-item-section top avatar>
                    <q-avatar color="primary" text-color="white text-bold text-h5">1</q-avatar>
                </q-item-section>
                <q-item-section>
                    <div class="text-h4 text-bold text-grey-8">FIND MEDICAL TUTORS</div>
                </q-item-section>
            </q-item>
            <div class="q-px-lg text-body1 text-grey-8">
                <div class="q-py-sm">
                    DocExams is a great place to find medical tutors having diversified background in their specialty/field.
                </div>
                <div class="q-py-sm">
                    <b>Widest choice:</b> We strive to make the process of finding your tutor as simple as possible through listing all medical tutors from around the world according to their specialty/field. Therefore, finding an expert tutor who suits your learning style is very easy.
                </div>
                <div class="q-py-sm">
                    <b>The Right Fit:</b> Easily compare tutors, including background checks and student reviews to choose a tutor based on what’s important to you.
                </div>
                <div class="q-py-sm">
                    <b>Let us do searching for you:</b> If you are too busy to browse through available tutors or couldn’t find what you were looking for, send us your tutoring query and let tutors send you their proposals.
                </div>
            </div>

        </div>

        <div class="col-12 col-md-6 flex flex-center">
            <q-img transition="slide-left" style="width:80%;" src="statics/how_work12.jpg">
            </q-img>
        </div>
    </section>
    <section class="row">
        <div class="col-12 col-md-6 flex flex-center order-2">
            <q-img transition="slide-right" style="width:80%;" src="statics/how_work13.jpg">
            </q-img>
        </div>
        <div class="col-12 col-md-6 order-1">
            <q-item>
                <q-item-section top avatar>
                    <q-avatar color="secondary" text-color="white text-bold text-h5">2</q-avatar>
                </q-item-section>
                <q-item-section>
                    <div class="text-h4 text-bold text-grey-8">CONNECT WITH EXPERTS</div>
                </q-item-section>
            </q-item>
            <div class="q-px-lg text-body1 text-grey-8">
                <div class="q-py-sm">
                    You can send message with details of your exam/subject(s) to learn and contact the right tutor for free.
                </div>
                <div class="q-py-sm">
                    <b>Tutor proposal:</b> In response of your tutoring request, you will receive tutoring proposals sent by your selected tutor or by other tutors fulfilling your requirements. Once you agreed with any of the sent proposal, enrolling for it is easy and will start your exclusive live online tutoring experience.
                </div>
                <div class="q-py-sm">
                    <b>Tutor rates:</b> The rates for tutoring can range anywhere from $15 per hour all the way to $200 or even more in some specialized cases. Total course fee is usually calculated based upon tutors expected hourly rate multiplied by expected study hours.
                </div>
               
            </div>
        </div>
    </section>
    <section class="row">
        <div class="col-12 col-md-6">
            <q-item>
                <q-item-section top avatar>
                    <q-avatar color="primary" text-color="white text-bold text-h5">3</q-avatar>
                </q-item-section>
                <q-item-section>
                    <div class="text-h4 text-bold text-grey-8">LEAN LIVE ONLINE</div>
                </q-item-section>
            </q-item>
            <div class="q-px-lg text-body1 text-grey-8">
                <div class="q-py-sm">
                    The best tutoring experience is now Live Online which is our main strength. DocExams is a personalized, student-focused learning platform that meets the needs of students in a digital age.
                </div>
                <div class="q-py-sm">
                    <b>Join from anywhere with any device:</b> Join your live class from anywhere from your computer, Iphone, Ipads or any other mobile device. You can learn seamlessly at your point.
                </div>
                <div class="q-py-sm">
                    <b>One-on-One OR Group sessions:</b> You can either customize your course/ subject(s) through leaning from an expert tutor of your choice on one-on-one basis Or can join available courses announced by expert tutors on DocExams and study in Group session.
                </div>
                <div class="q-py-sm">
                    <b>Class recording:</b> No matter you took any live class or missed it, recorded class is always available for you to re-play it with your own ease.
                </div>
                 <div class="q-py-sm">
                    <b>Powerful dashboard:</b> DocExams student dashboard is a learning analytics resource for students. It has been developed to help students engage more effectively with their studies.
                </div>
                <div class="q-py-sm">
                    <b>Your safety comes first:</b> All DocExams tutors are professionally screened to meet the highest safety standards. We also record all sessions for quality and security control.
                </div>
                <div class="q-py-sm">
                    <b>Pass your exam:</b> With DocExams, thanks to our expert tutors offering one-on-one or group sessions, you’ll have a much higher chance to pass on your first try – even if you don’t know where to start or have very little knowledge to begin with.
                </div>
            </div>

        </div>

        <div class="col-12 col-md-6 flex flex-center content-start">
            <q-img transition="slide-left" style="width:80%;" src="statics/how_work14.jpg">
            </q-img>
        </div>
    </section>

    <section class="row">
        <div class="col-12 col-md-12 q-px-md bg-grey-1">
            <div class="text-h4 text-bold text-center text-grey-8 q-mx-lg q-py-xl">FAQs</div>
            <div class="row q-mx-xs q-mb-xl  flex flex-center">
                <div class="col-12 col-md-6 q-px-xs">
                    <q-list>
                        <q-expansion-item class="q-mb-sm shadow-1 grn-v-bar" group="somegroup" label="What can I sell?">

                            <q-card>
                                <q-card-section>
                                    Be creative! You can offer any service you wish as long as it's legal and complies with our terms. There are over 100 categories you can browse to get ideas.
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>

                        <q-expansion-item class="q-mb-sm shadow-1 grn-v-bar" group="somegroup" label="How much time will I need to invest?">
                            <q-card>
                                <q-card-section>
                                    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
                                    Visual feedback: reflect current state by updating or rearranging elements of the page.
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>

                        <q-expansion-item class="q-mb-sm shadow-1 grn-v-bar" group="somegroup" label="How much money can I make?">
                            <q-card>
                                <q-card-section>
                                    Simplify the process: keep operating process simple and intuitive;
                                    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
                                    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>

                    </q-list>
                </div>
                <div class="col-12 col-md-6 q-px-xs">
                    <q-list>
                        <q-expansion-item class="q-mb-sm shadow-1 grn-v-bar" group="somegroup" label="How much does it cost?">
                            <q-card>
                                <q-card-section>
                                    Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
                                    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>

                        <q-expansion-item class="q-mb-sm shadow-1 grn-v-bar" group="somegroup" label="How do I get paid?">
                            <q-card>
                                <q-card-section>
                                    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
                                    Visual feedback: reflect current state by updating or rearranging elements of the page.
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>

                        <q-expansion-item class="q-mb-sm shadow-1 grn-v-bar" group="somegroup" label="How do I price my service?">
                            <q-card>
                                <q-card-section>
                                    Simplify the process: keep operating process simple and intuitive;
                                    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
                                    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
                                </q-card-section>
                            </q-card>
                        </q-expansion-item>
                    </q-list>
                </div>
                <div class="q-pa-xl q-gutter-sm">
                    <q-btn to="/faqs" label="More FAQs" outline color="light" />
                </div>
            </div>

        </div>
    </section>
    <section class="row">
        <div class="col-12 col-md-12 q-px-sm bg-green">
            <div class="text-h4 text-bold text-center text-white q-py-xl q-pt-xl">READY TO LEARN LIVE ONLINE</div>
            <div class="q-pa-lg q-mx-sm px-xl">
                <q-input outlined v-model="search" placeholder="What exam do you need help with? (e.g. “USMLE”)" class="bg-white">
                    <template v-slot:append>
                        <q-btn color="secondary" class="text-white text-h6">
                            <q-icon name="search" />
                        </q-btn>
                    </template>
                </q-input>
            </div>

        </div>
    </section>

    <q-drawer v-model="left" side="left" overlay behavior="mobile" elevated>
        <div class="fit bg-grey-9">
            <div class="q-pa-none bg-grey-9 text-white" style="max-width: auto">
                <q-list class="text-h6">
                    <q-expansion-item :content-inset-level="1" expand-separator icon="menu_book" label="Course">
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Course-1
                            </q-item-section>
                        </q-item>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Course-2
                            </q-item-section>
                        </q-item>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Course-3
                            </q-item-section>
                        </q-item>
                    </q-expansion-item>
                    <q-expansion-item :content-inset-level="1" expand-separator icon="person" label="Tutor">
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Tutor-1
                            </q-item-section>
                        </q-item>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Tutor-2
                            </q-item-section>
                        </q-item>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Tutor-3
                            </q-item-section>
                        </q-item>
                    </q-expansion-item>
                    <q-expansion-item :content-inset-level="1" expand-separator icon="school" label="Qbank">
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Qbank-1
                            </q-item-section>
                        </q-item>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Qbank-2
                            </q-item-section>
                        </q-item>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                Qbank-3
                            </q-item-section>
                        </q-item>
                    </q-expansion-item>
                    <q-expansion-item :content-inset-level="1" expand-separator icon="info" label="Info">
                        <q-expansion-item label="Info 1" :content-inset-level="0.5">
                            <q-item clickable v-ripple to="/info">
                                <q-item-section>
                                    Info-1-1
                                </q-item-section>
                            </q-item>
                            <q-item clickable v-ripple>
                                <q-item-section>
                                    Info-1-2
                                </q-item-section>
                            </q-item>
                            <q-item clickable v-ripple>
                                <q-item-section>
                                    Info-1-3
                                </q-item-section>
                            </q-item>
                        </q-expansion-item>

                        <q-expansion-item label="Info 2" :content-inset-level="0.5">
                            <q-item clickable v-ripple>
                                <q-item-section>
                                    Info-1-1
                                </q-item-section>
                            </q-item>
                            <q-item clickable v-ripple>
                                <q-item-section>
                                    Info-2-2
                                </q-item-section>
                            </q-item>
                            <q-item clickable v-ripple>
                                <q-item-section>
                                    Info-2-3
                                </q-item-section>
                            </q-item>
                        </q-expansion-item>
                    </q-expansion-item>
                </q-list>
            </div>

        </div>
    </q-drawer>
    <q-page-container>
        <q-page-sticky expand position="top" style="z-index:1030;">
            <div class="containers">
                <q-toolbar class="bg-black text-white q-py-xs q-px-lg ">
                    <q-btn class="hide" dense flat round icon="menu" @click="left = !left" />
                    <q-toolbar-title class="q-py-xs">
                        <img src="statics/logo.png" height="40">
                    </q-toolbar-title>

                    <div v-if="$q.screen.gt.sm" class="no-underline GL__toolbar-link q-ml-xs q-gutter-xl text-body2 text-weight-normal row items-center no-wrap">
                        <a href="javascript:void(0)" class="text-white">
                            Course
                            <q-icon class="i-rotate" name="keyboard_arrow_right" />
                            <q-menu anchor="bottom left" self="top left">
                                <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                                    <q-item v-for="n in 3" :key="n" dense clickable>
                                        <q-item-section>Course {{n}}</q-item-section>
                                    </q-item>
                                </q-list>
                            </q-menu>
                        </a>
                        <a href="javascript:void(0)" class="text-white">
                            Qbank
                            <q-icon class="i-rotate" name="keyboard_arrow_right" />
                            <q-menu anchor="bottom left" self="top left">
                                <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                                    <q-item v-for="n in 3" :key="n" dense clickable>
                                        <q-item-section>Qbank {{n}}</q-item-section>
                                    </q-item>
                                </q-list>
                            </q-menu>

                        </a>
                        <a href="javascript:void(0)" class="text-white">
                            Tutor
                            <q-icon class="i-rotate" name="keyboard_arrow_right" />
                            <q-menu anchor="bottom left" self="top left">
                                <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                                    <q-item v-for="n in 3" :key="n" dense clickable>
                                        <q-item-section>Tutor {{n}}</q-item-section>
                                    </q-item>
                                </q-list>
                            </q-menu>
                        </a>
                        <!-- <a href="javascript:void(0)" class="text-white">
                    Info
                </a> -->
                        <a href="javascript:void(0)" class="text-white">
                            Info
                            <q-icon class="i-rotate" name="keyboard_arrow_right" />
                            <q-menu anchor="bottom left" self="top left">
                                <q-list dense class="q-pt-lg" style="min-width: auto;background: #24292e;color:#ffffff;">
                                    <q-item clickable>
                                        <q-item-section>MOH UAE GP 1</q-item-section>
                                        <q-item-section side>
                                            <q-icon name="keyboard_arrow_right" />
                                        </q-item-section>

                                        <q-menu anchor="top right" self="top left">
                                            <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                                <q-item v-for="n in 3" :key="n" dense clickable>
                                                    <q-item-section>Submenu Label</q-item-section>
                                                    <q-item-section side>
                                                        <q-icon name="keyboard_arrow_right" />
                                                    </q-item-section>
                                                    <q-menu auto-close anchor="top right" self="top left">
                                                        <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                                            <q-item v-for="n in 3" :key="n" dense clickable>
                                                                <q-item-section>3rd level Label</q-item-section>
                                                            </q-item>
                                                        </q-list>
                                                    </q-menu>
                                                </q-item>
                                            </q-list>
                                        </q-menu>
                                    </q-item>
                                    <q-item clickable>
                                        <q-item-section>MOH UAE GP 1</q-item-section>
                                        <q-item-section side>
                                            <q-icon name="keyboard_arrow_right" />
                                        </q-item-section>

                                        <q-menu anchor="top right" self="top left">
                                            <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                                <q-item v-for="n in 3" :key="n" dense clickable>
                                                    <q-item-section>Submenu Label</q-item-section>
                                                    <q-item-section side>
                                                        <q-icon name="keyboard_arrow_right" />
                                                    </q-item-section>
                                                    <q-menu auto-close anchor="top right" self="top left">
                                                        <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                                            <q-item v-for="n in 3" :key="n" dense clickable>
                                                                <q-item-section>3rd level Label</q-item-section>
                                                            </q-item>
                                                        </q-list>
                                                    </q-menu>
                                                </q-item>
                                            </q-list>
                                        </q-menu>
                                    </q-item>
                                </q-list>
                            </q-menu>
                        </a>
                    </div>

                    <q-space />

                    <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                        <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />

                        <q-btn dense flat no-wrap>
                            <q-avatar circled size="40px">
                                <img src="statics/avtr.png">
                            </q-avatar>
                            <q-icon name="arrow_drop_down" size="16px" />

                            <q-menu auto-close>
                                <q-list dense class="db-menu">

                                    <q-item>
                                        <q-item-section class="flex flex-center">
                                            <q-avatar class="q-pa-xs" circled size="50px">
                                                <img src="statics/avtr.png">
                                            </q-avatar>
                                            <span class="text-h6">Asim Khan</span>
                                            <span class="text-caption">user@docexams.com</span>
                                        </q-item-section>
                                    </q-item>
                                    <q-separator class="bg-grey-8" />
                                    <q-item clickable class="GL__menu-link">
                                        <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />
                                        <q-item-section>Tutor Dashboard</q-item-section>
                                    </q-item>
                                    <q-item clickable class="GL__menu-link">
                                        <q-icon name="menu_book" size="21px" class="q-pa-sm q-pr-md" />

                                        <q-item-section>Course Dashboard</q-item-section>
                                    </q-item>
                                    <q-item clickable class="GL__menu-link">
                                        <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />

                                        <q-item-section>Qbank Dashboard</q-item-section>
                                    </q-item>
                                    <q-separator class="bg-grey-8" />
                                    <q-item clickable class="GL__menu-link">
                                        <q-icon name="help" size="21px" class="q-pa-sm q-pr-md" />

                                        <q-item-section>Help</q-item-section>
                                    </q-item>
                                    <q-item clickable class="GL__menu-link">
                                        <q-icon name="exit_to_app" size="21px" class="q-pa-sm q-pr-md" />

                                        <q-item-section>Sign out</q-item-section>
                                    </q-item>
                                </q-list>
                            </q-menu>
                        </q-btn>
                    </div>
                </q-toolbar>
            </div>
        </q-page-sticky>
        <keep-alive>
            <router-view />
        </keep-alive>

    </q-page-container>
</q-layout>
</template>

<script>
import {
    fabGithub
} from '@quasar/extras/fontawesome-v5'
const stringOptions = [
    'quasarframework/quasar',
    'quasarframework/quasar-awesome'
]
export default {
    name: 'MyLayout',
    data() {
        return {
            text: '',
            options: null,
            left: false,
            miniState: true,
            slide: 1,
            search: '',
            slides: 'style',
            lorem: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo. sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.',
            loading4: false,
            filteredOptions: []
        }
    },
      components: {
	  	// 'footer-link' : require('components/footerLink.vue').default
	  },
    methods: {

        simulateProgress(number) {
            // we set loading state
            this[`loading${number}`] = true
            // simulate a delay
            setTimeout(() => {
                // we're done, we reset loading state
                this[`loading${number}`] = false
            }, 3000)
        },
        filter(val, update) {
            if (this.options === null) {
                // load data
                setTimeout(() => {
                    this.options = stringOptions
                    this.$refs.search.filter('')
                }, 2000)
                update()
                return
            }
            if (val === '') {
                update(() => {
                    this.filteredOptions = this.options.map(op => ({
                        label: op
                    }))
                })
                return
            }
            update(() => {
                this.filteredOptions = [{
                        label: val,
                        type: 'In this repository'
                    },
                    {
                        label: val,
                        type: 'All GitHub'
                    },
                    ...this.options
                    .filter(op => op.toLowerCase().includes(val.toLowerCase()))
                    .map(op => ({
                        label: op
                    }))
                ]
            })
        }

    },
    created() {
        this.fabGithub = fabGithub
    }
}
</script>

<style lang="css" scoped>
a {
    text-decoration: none;
    color: #04b1ed;
    font-weight: 400;

}

.grn-v-bar {
    border-left: 3px solid transparent;
}

.grn-v-bar:hover {
    border-left: 3px solid green;
}

.wide {
    width: 80%;
}

.q-card__section--vert {
    padding: 10px;
}

.hide {
    display: none;
}

.show {
    display: inline;
}

.no-underline a {
    text-decoration: none;
    font-size: 1.5em;
}

.no-underline a:hover {
    color: rgb(0, 255, 0) !important;

}

.no-underline a .i-rotate {
    transform: rotate(0deg);
    transition: all .5s ease;
}

.no-underline a:hover .i-rotate {
    transform: rotate(90deg);
    transition: all .5s ease;
}

/* .q-item {
    min-height: 24px;
    padding: 2px 46px;
    color: inherit;
    transition: color .3s, background-color .3s;
} */
.q-item {
    min-height: 24px;
    padding: 2px 15px;
    color: inherit;
    transition: color .3s, background-color .3s;
}

.containers {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.slider-l {
    position: absolute;
    z-index: 1030;
    width: 65%;
}

.top-slider {
    background-image: linear-gradient(to bottom right, black, rgba(0, 0, 0, 0.75));
    position: relative;
    min-height: 70%;
}

.db-menu {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    width: 20vw;
}

.hover-fx {
    transition: all 0.3s ease-out;
}

.hover-fx:hover {
    box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease-in;
}

.logo-hover {
    filter: grayscale(100%);
    margin: 5px 20px;
}

.logo-hover:hover {
    filter: grayscale(0%);
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.header-img {
    width: 50%;
    float: right;
}

.img-size {
    width: 60%;
    height: 150px;
}

.img-hover {
    filter: grayscale(100%);
    transform: scale(1.0, 1.0);
    transition: all 0.5s;
}

.img-hover:hover {
    filter: grayscale(0%);
    transform: scale(1.3, 1.3);
    transition: all 0.5s;
    border: 1px solid white;
    box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.5), 0 14px 21px 2px rgba(0, 0, 0, 0.24), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
    z-index: 1030;
}

.px-xl {
    padding-left: 140px;
    padding-right: 140px;
    padding-bottom: 50px;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .btn-center {
        text-align: center;
    }

    .px-xl {
        padding-left: 0px;
        padding-right: 0px;
    }

    .w-40 {
        width: 96%;
        font-size: 18px;
        line-height: 1;
        text-align: center;
    }

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .h4-title-mob {
        font-size: 42px;
        text-align: center;
        line-height: 1;
        margin-left: 0px;
    }

    .slider-l h4 {
        font-size: 30px;
        text-align: center;
        line-height: 1;
        margin-left: 0px;
    }

    .header-img {
        width: 100%;
        float: none;
        clear: both;
    }

    .line-h-1 {
        line-height: 1.2;
    }

    .w-50 {
        width: 100%;
        font-size: 36px;
        line-height: 1;
        text-align: center;
        margin-top: -80px;
    }

    .img-size {
        width: 90%;
        height: 150px;
        display: none;

    }

    .hide {
        display: inline;
    }

    .show {
        display: none;
    }

    .text-h4 {
        font-size: 26px !important;
    }

    .h3-title {
        color: #fff;
        font-family: keep calm;
        font-size: 30px;
        line-height: 1;
        text-align: center;
    }

    .slider-l {
        width: 100%;
        margin-top: 0%;
    }

    .top-slider {
        height: 70vh;
    }

    .wide {
        width: 95%;
        margin-top: 0;
    }

    .q-pt-xl {
        padding-top: 10px !important;
    }

    .q-pl-xl {
        padding-left: 36px !important;
    }

    .db-menu {
        width: 50vw;
    }

    .q-card__section--horiz>div:not(:last-child),
    .q-card__section--horiz>img:not(:last-child) {
        /* top: -80px; */
        top: 0px;

    }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
    
}
</style><style>
.top-slider .q-carousel__slides-container {
    height: 100% !important;
    width: 70%;
    float: right;
    margin-top: 0px !important;
}

.border-red {
    border: 1px solid red;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {

    .top-slider .q-carousel__slides-container {
        height: 65% !important;
        margin-top: 200px !important;
        float: none;
        width: 100%;

    }

}
</style>
