@extends('layouts.master')

@section('aboutactive', 'current-menu-item')

@section('content')



       



<section class="slider">

    <!-- CSS STYLE-->

    <link rel="stylesheet" type="text/css" href="{{asset('template/css/style.css')}}" media="screen" />



    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->

    <script type="text/javascript" src="{{asset('template/rs-plugin/js/jquery.themepunch.plugins.min.js')}}"></script>

    <script type="text/javascript" src="{{asset('template/rs-plugin/js/jquery.themepunch.revolution.min.js')}}"></script>



    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->

    <link rel="stylesheet" type="text/css" href="{{asset('template/rs-plugin/css/settings.css')}}" media="screen" />



    <div class="tp-banner-fullscreen-container" >

        <div class="tp-banner" >

            <ul>

                <!-- SLIDE  -->

                <li data-transition="fade" data-slotamount="9" data-masterspeed="1000" >

                    <!-- MAIN IMAGE -->

                    <img src="{{asset('template/assets/img/page-title/about.jpg')}}"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">



                </li>

                

            </ul>

        </div>

    </div>



        <script type="text/javascript">

                jQuery(document).ready(function() {

                       jQuery('.tp-banner').revolution(

                        {

                            delay:9000,

                            startwidth:1502,

                            startheight:550,

                            hideThumbs:10,

                        });

                });

            </script>

</section>



<!-- Main Content -->

<div id="main-content" class="site-main clearfix">

    <div id="content-wrap" class="bg-color" >

        <div class="bg-color-overlay"></div>





        <section class="container about-us-and-letter-products-" style="padding: 20px">

            <div class="themesflat-spacer clearfix" data-desktop="124" data-mobile="124" data-smobile="60"></div>

            <div class="container-fluid">

                <div class="row">

                    <img src="template/assets/img/about-us/bg.png" alt="Image" class="bg-about-us">

                    <!-- <div class="col-md-6">

                        <img src="template/assets/img/about-us/img-about-us-3.png" alt="Image" class="img-about-us-left">

                    </div> -->

                    <style type="text/css">

                        .player {

                            background: #2a2a2a;

                            box-sizing: border-box;

                            border-radius: 5px;

                            height: 70px;

                            -moz-box-sizing: border-box;

                            float: left;

                            font-family: Arial, sans-serif;

                            position: absolute;

                            padding: 0;

                            bottom: 20px;

                            z-index: 2;

                            opacity: 1;

                            box-shadow: 0 0 10px rgba(0,0,0,0.3);

                            -webkit-transition: opacity 0.3s ease-in;

                            transition: opacity 0.3s ease-in;

                            -moz-user-select: none;

                            -webkit-user-select: none;

                            user-select: none;

                        }



                        .video {

                            position: relative;

                            margin: 0px auto;

                        }



                        .video:hover .player {

                            opacity: 1;

                        }



                        .player .progress {

                            width: 60%;

                            height: 20px;

                            border-radius: 5px;

                            background: #676767;

                            box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);

                            float: left;

                            cursor: pointer;

                            margin: 24px 0 0 0;

                            padding: 0;

                            position: relative;

                            font-variant: normal;

                        }



                        .player .progress-bar {

                            background: #33b5d5;

                            box-shadow: inset -30px 0px 69px -20px #89f6f5;

                            border-radius: 5px;

                            height: 100%;

                            position: relative;

                            z-index: 999;

                            width: 0;

                        }



                        .player .button-holder {

                            position: relative;

                            left: 10px;

                        }



                        .player .progress-button {

                            background: #fff;

                            box-shadow: 0 0 20px rgba(0,0,0,0.3);

                            border-radius: 30px;

                            width: 20px;

                            height: 20px;

                            position: absolute;

                            left: -20px;

                            text-decoration: overline;

                        }





                        .player [class^="buffered"] {

                            background: rgba(255,255,255,0.1);

                            position: absolute;

                            top: 0;

                            left: 30px;

                            height: 100%;

                            border-radius: 5px;

                            z-index: 1;

                        }



                        .player .play-pause {

                            display: inline-block;

                            font-size: 3em;

                            float: left;

                            text-shadow: 0 0 0 #fff;

                            color: rgba(255,255,255,0.8);

                            width: 10%;

                            padding: 17px 0 0 3%;

                            cursor: pointer;

                            font-variant: small-caps;

                        }



                        .player .play, .player .pause-button {

                            -webkit-transition: all 0.2s ease-out;

                        }



                        .player .play .pause-button, .player .pause .play-button {

                            display: none;

                        }



                        .player .pause-button {

                            padding: 5px 2px;

                            box-sizing: border-box;

                            -moz-box-sizing: border-box;

                            height: 34px;

                        }



                        .player .pause-button span {

                            background: #fff;

                            width: 8px;

                            height: 24px;

                            float: left;

                            display: block;

                        }



                        .player .pause-button span:first-of-type {

                            margin: 0 4px 0 0;

                        }



                        .player .time {

                            color: #fff;

                            font-weight: bold;

                            font-size: 1.2em;

                            position: absolute;

                            right: 0;

                            top: 24px;

                        }



                        .player .stime, .ttime {

                            color: #444;

                        }

                        .player .play:hover {

                            text-shadow: 0 0 5px #fff;

                        }



                        .player .play:active, .pause-button:active span {

                            text-shadow: 0 0 7px #fff;

                        }





                        .player .pause-button:hover span {

                            box-shadow: 0 0 5px #fff;

                        } .player .pause-button:active span {

                            box-shadow: 0 0 7px #fff;

                        }





                        .player .volume {

                            position: relative;

                            float: left;

                            width: 8%;

                            margin: 0 0 0 4%;

                            height: 100%;

                        }



                        .player .volume-icon {

                            padding: 1.5%;

                            height: 100%;

                            cursor: pointer;

                            box-sizing: border-box;

                            -moz-box-sizing: border-box;

                            -webkit-transition: all 0.15s linear;

                        }



                        .player .volume-icon-hover {

                            background-color: #4f4f4f;

                        }



                        .player .volume-holder {

                            height: 100px;

                            width: 100%;

                            background: black;

                            position: absolute;

                            display: none;

                            background: #4f4f4f;

                            left: 0;

                            border-radius: 5px 5px 0 0;

                            top: -100px;

                        }



                        .player .volume-bar-holder {

                            background: #333;

                            width: 20px;

                            box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);

                            margin: 15px auto;

                            height: 80px;

                            border-radius: 5px;

                            position: relative;

                            cursor: pointer;

                        }



                        .player .volume-button {

                            background: #fff;

                            box-shadow: 0 0 20px rgba(0,0,0,0.3);

                            border-radius: 30px;

                            width: 20px;

                            height: 20px;

                        }



                        .player .volume-button-holder {

                            position: relative;

                            top: -10px; 

                        }



                        .player .volume-bar {

                            background: #33b5d5;

                            box-shadow: inset -30px 0px 69px -20px #89f6f5;

                            border-radius: 5px;

                            width: 100%;

                            height: 100%;

                            position: absolute;

                            bottom: 0;

                        }



                        .player .fullscreen {

                            width: 12%;

                            cursor: pointer;

                            float: left;

                            height: 100%;

                        }



                        .player .fullscreen a {

                            width: 25px;

                            height: 20px;

                            border-radius: 3px;

                            background: #fff;

                            display: block;

                            position: relative;

                            top: 23px;

                            margin: 0px auto;

                        }



                        .player .volume-icon span {

                            width: 20%;

                            height: 13%;

                            background-color: #fff;

                            display: block;

                            position: relative;

                            z-index: 1;

                            font-weight: bold;

                            top: 40%;

                            color: #fff;

                            left: 22%;

                        }



                        .player .volume-icon span:before,

                        .player .volume-icon span:after {

                            content: '';

                            position: absolute;

                        }

                        .player .volume-icon span:before {

                            width: 0;

                            height: 0;

                            border: 1em solid transparent;

                            border-left: none;

                            border-right-color: #fff;

                            z-index: 2;

                            top: -2px;

                            left: 10%;

                            margin-top: -40%;

                        }

                        .player .volume-icon span:after {

                            width: 2%;

                            height: 2%;

                            border: 1px solid #fff;

                            left: 190%;

                            border-width: 0px 0px 0 0; 

                            top: 5px;

                            border-radius: 0 50px 0 0;

                            -webkit-transform: rotate(45deg);

                            -moz-transform: rotate(45deg);

                            -ms-transform: rotate(45deg);

                            -o-transform: rotate(45deg);

                             transform: rotate(45deg);

                             font-variant: small-caps;

                         }



                        .player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }

                        .player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }

                        .player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }

                        .player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }

                        .player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }

                        .player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }

                        .player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }

                        .player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }

                        .player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }

                        .player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }

                        .player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }



                        .player .v-change-1 span:after {

                            content: '+';

                            -webkit-transform: rotate(45deg);

                            font-size: 20px;

                            top: -6px;

                            left: 25px;

                        }



                        .vidimg {

                          position: relative;

                          -webkit-border-radius: 30px;

                          -moz-border-radius: 30px;

                          -ms-border-radius: 30px;

                          border-radius: 30px;

                          overflow: hidden; }

                          .vidimg .play-vid {

                            position: absolute;

                            left: 50%;

                            top: 50%;

                            -webkit-transform: translate(-50%, -50%);

                            -ms-transform: translate(-50%, -50%);

                            transform: translate(-50%, -50%);

                            width: 72px;

                            height: 72px;

                            background-color: #2E8ECE;

                            -webkit-border-radius: 50%;

                            -moz-border-radius: 50%;

                            -ms-border-radius: 50%;

                            border-radius: 50%;

                            display: table-cell;

                            padding-top: 13px;

                            padding-left: 7px;

                            text-align: center;

                            vertical-align: middle;

                            line-height: 3.5; }

                            .vidimg .play-vid a {

                              color: #ffffff; }

                            .vidimg .play-vid:hover {

                              background-color: #212635; }

                    </style>

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



                        <div class="vidimg">

                            <div class="play-vid">

                                <a class="popup-youtube" href="https://www.youtube.com/watch?v=2Qd4E1fMYds"><span class="fa fa-play fa-2x playvid"></span></a>

                            </div>

                            <img src="template/assets/img/about-us/about2.jpg" alt="" class="img-responsive">

                        </div>



                        <div class="col-md-6" style="padding-top: 20px !important">

                            <img src="template/assets/img/about-us/about.jpg" alt="Image" style="float: left !important; padding-right: 20px !important;">

                        </div>

                        

                        <div class="col-md-6" style="padding-top: 20px !important">

                            <h2 class="heading"><a href="javascript:void(0)">H<span class="color-span-2">istorique</span></a> </h2>

                            <p style="text-align: justify !important;"> 

                                

                                <span style="text-align: justify !important;">Face à la précarité financière des paysans ayant des enfants à charge , IT-Village a pensé à une ou plusieurs activité(s) génératrice(s) de revenu pouvant remplacer le bradage des récoltes. L’apiculture, une activité qui se fait à temps partiel a été choisie. Le projet ‘’Miel des Savanes’’ initié en 2009 vient donc en appui aux paysans sur le plan matériel et organisationnel. L'ONG IT VILLAGE rachète ce miel auprès des apiculteurs à un prix avantageux. Ces derniers ont ainsi assez de ressources pour assurer la scolarisation de leurs enfants. L’organisation travaille avec environ 2000 apiculteurs mobilisés en groupements dans les zones de Mango, Barkoissi, Borgou et Papri . </span> <br> 


                            </p>

                            
                            

                        </div>

                    </div>

                </div>

            </div>

        </section>



        <section class="work ">

            <div class="themesflat-spacer clearfix" data-desktop="110" data-mobile="110" data-smobile="60"></div>

            <!-- <div class="themesflat-headings style-1 wow fadeInUp ">

                <div class="heading">Qui sommes nous</div>

                <h5 class="sub-heading">Le miel des savanes est un projet de l'ONG IT village basé à Dapaong au nord du Togo en collaboration avec  DAZ e.v. en Allemagne. Le miel des savanes est certifié par le célèbre Institut allemand de l'apiculture de Celle. <br>

                Nos cinq variétés de miel proviennent du nectar des fleurs de la savane profonde.

                L'apiculture y est pratiquée depuis des générations avec beaucoup de passion comme activité de subsistance par des paysans vivant dans l'extrême pauvreté.</h5>

            </div>   --> 

            <div class="container">

                <div class="row">

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

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/about1.png" alt="Image">

                        </div>

                    </div>

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

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/about2.png" alt="Image">

                        </div>

                    </div>

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

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/about3.png" alt="Image">

                        </div>

                    </div>

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

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/work/work1.png" alt="Image">

                            <h3 class="heading-work"><a href="services.html">Miel Naturel</a> </h3>

                            <p class="content-work">Le miel des savanes est produit dans les savanes au nord du Togo.</p>

                        </div>

                    </div>

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

                        <div class="box-work text-center wow fadeInDown" >

                            <img src="template/assets/img/work/work2.png" alt="Image">

                            <h3 class="heading-work"><a href="services.html">Certification approuvée</a> </h3>

                            <p class="content-work">Le Miel des Savanes est un miel naturel certifié en Allemagne par Institut fùr Bienenkunde Celle ;</p>

                        </div>

                    </div>

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

                        <div class="box-work text-center wow fadeInDown" >

                            <img src="template/assets/img/work/work3.png" alt="Image">

                            <h3 class="heading-work"><a href="services.html">Hygiene</a> </h3>

                            <p class="content-work">Les conditions de production et de conditionnememt respectent les normes hygiéniques</p>

                        </div>

                    </div>



                    

                </div>

            </div>

        </section>









    </div><!-- /#content-wrap -->

</div><!-- /#main-content -->



@endsection