@extends($user_shop ?'web.user.layouts.layout' : 'web.layouts.layout')

@section('content')

    <section class="page-header page-header-xlg parallax parallax-3"
             style="background-image:url('/assets/images/vision-min.jpg')">
        <div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>

        <div class="container">
        </div>
    </section>
    <!-- /PAGE HEADER -->


    <section>
        <div class="container">

            <div class="row">
                <!-- LEFT COLUMNS -->
                <div class="col-md-9 col-sm-9 col-md-push-3 col-sm-push-3">
                    <h1>{{ __('webcontent.career_opportunities_at_mivita') }}</h1>

                    <div class="row">

                        <div class="col-md-4 col-sm-4">
                            <img class="img-fluid" src="/assets/images/mivita-schulung.jpg" alt="service"/>
                            <p class="small"><em>{!! __('webcontent.training_aloe_farm_mallorca') !!}</em></p>
                        </div>

                        <div class="col-md-8 col-sm-8">
                            <table class="table">
                                <tr>
                                    <td><img class="" src="/assets/images/icons/icon_1.png" height="40px" width="40px"
                                             alt=""/></td>
                                    <td><p>{{ __('webcontent.career_opportunitie_point_1') }}</p></td>
                                </tr>
                                <tr>
                                    <td><img class="" src="/assets/images/icons/icon_2.png" height="40px" width="40px"
                                             alt=""/></td>
                                    <td><p>{{ __('webcontent.career_opportunitie_point_2') }}</p></td>

                                </tr>
                                <tr>
                                    <td><img class="" src="/assets/images/icons/icon_3.png" height="40px" width="40px"
                                             alt=""/></td>
                                    <td><p>{{ __('webcontent.career_opportunitie_point_3') }}</p></td>

                                </tr>
                                <tr>
                                    <td><img class="" src="/assets/images/icons/icon_4.png" height="40px" width="40px"
                                             alt=""/></td>
                                    <td><p>{{ __('webcontent.career_opportunitie_point_4') }}</p></td>

                                </tr>
                                <tr>
                                    <td><img class="" src="/assets/images/icons/icon_5.png" height="40px" width="40px"
                                             alt=""/></td>
                                     <td><p>{{ __('webcontent.career_opportunitie_point_5') }}</p></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <hr>
                    </div>

                    <div class="col-md-12">
                        <h2>{!! __('webcontent.make_people_happy_hl') !!}</h2>
                        <p>{!! __('webcontent.make_people_happy_copy') !!}</p>
                        <img class="img-fluid" src="/assets/images/produktfamilie.jpg" alt=""/>
                    </div>

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


                    <div class="col-md-12">
                        <h2>{!! __('webcontent.how_to_sell_exactly_hl') !!} </h2>
                        <p>{!! __('webcontent.how_to_sell_exactly_copy') !!} </p>

                        <div class="row right-line">
                            <div class="col-md-4">
                                <h3 class="h3 text-center">{!! __('webcontent.private_environment_hl') !!}</h3>
                                <img class="img-fluid" src="/assets/images/selling_1.png" alt=""/>
                                <br>
                                <br>
                                {!! __('webcontent.private_environment_list') !!} 
                            </div>

                            <div class="col-md-4">
                                <h3 class="h3 text-center">{!! __('webcontent.business_environment_hl') !!}</h3>
                                <img class="img-fluid" src="/assets/images/selling_2.png" alt=""/>
                                <br>
                                <br>
                                {!! __('webcontent.business_environment_list') !!} 
                            </div>

                            <div class="col-md-4">
                                <h3 class="h3 text-center">{!! __('webcontent.social_environment_hl') !!}</h3>
                                <img class="img-fluid" src="/assets/images/selling_3.png" alt=""/>
                                <br>
                                <br>
                                {!! __('webcontent.social_environment_list') !!} 
                            </div>
                        </div>
                    </div>


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


                    <div class="col-md-12">
                        <h2>{!! __('webcontent.training_aloe_farm_mallorca') !!} </h2>
                        <p>{!! __('webcontent.training_aloe_farm_mallorca_copy') !!}</p>
                        <div class="masonry-gallery columns-4 margin-bottom-60 clearfix lightbox" data-img-big="1"
                             data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'>

                            <a class="image-hover" href="/assets/images/gallery/image_0-max.jpg">
                                <img src="/assets/images/gallery/image_0-min.jpg" alt="...">
                            </a>

                            <a class="image-hover" href="/assets/images/gallery/image_1-max.jpg">
                                <img src="/assets/images/gallery/image_1-min.jpg" alt="...">
                            </a>

                            <a class="image-hover" href="/assets/images/gallery/image_2-max.jpg">
                                <img src="/assets/images/gallery/image_2-min.jpg" alt="...">
                            </a>

                            <a class="image-hover" href="/assets/images/gallery/image_3-max.jpg">
                                <img src="/assets/images/gallery/image_3-min.jpg" alt="...">
                            </a>

                            <a class="image-hover" href="/assets/images/gallery/image_4-max.jpg">
                                <img src="/assets/images/gallery/image_4-min.jpg" alt="...">
                            </a>
                        </div>
                    </div>

                    @include('web.templates._content_contact')
                </div>
                <!-- /LEFT COLUMNS -->

                <!-- RIGHT COLUMNS -->
                <div class="col-md-3 col-sm-3 col-md-pull-9 col-sm-pull-9">

                    @include('web.templates._bcategories')

                </div>
                <!-- /RIGHT COLUMNS -->

            </div>

        </div>
    </section>



@endsection