<template>
   <section class="container-fluid main-container">

  <!--begin home section -->
    <section class="home-section" id="home">

		<!--begin container -->
		<div class="container container-with-content">

	        <!--begin row -->
	        <div class="row">
				<div class="col-md-12 padding-top-80"> </div>
	            <!--begin col-md-6-->
	            <div class="col-md-6">
                    <p>
	              <img src="@/assets/tour/head.png" height="150px" alt="">

                    </p>
	             

                    <!--begin benefits -->
                    <ul class="home-benefits">

<li @click.prevent="$emit('click')">  <img src="@/assets/tour/btn1.png" alt=""></li>
<li @click.prevent="$emit('click')">  <img src="@/assets/tour/btn2.png" alt=""></li>
<li @click="$router.push('/')">  <img src="@/assets/tour/btn3.png" alt=""></li>
                        
                    </ul>
                    <!--end benefits -->

                   
	            </div>
	            <!--end col-md-6-->
	       
				<!--begin col-md-6-->
	            <!-- <div class="col-md-6">-->
				<div class="col-md-6 padding-top-30">
                    
<div class="text-center">
                        <img src="@/assets/tour/logo-superclass-tour.png" height="150px" alt="">
                    </div>

                    <div>
				  <iframe width="560" height="310" src="https://www.youtube.com/embed/dR17U5-VKtw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                    </div>
                    <div class="text-center">
                        <img src="@/assets/tour/logo-odorata-tour.png" alt="">
                    </div>
	            </div>
	            <!--end col-md-6-->

	        </div>
	        <!--end row -->
			<div class="col-md-12 padding-top-100"> </div>
		</div>
		<!--end container -->

    </section>
    <!--end home section -->

   


   </section>
</template>

<style lang="scss" scoped>

@function asset() {
  @return url("~@/assets/tour/tour-background.png");
}


.main-container{
   background-image: asset();
   background-repeat: no-repeat;
  background-size: auto;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  position: relative;

  .container-with-content{
      top: 30%;
  -webkit-transform: translateY(15%);
  -ms-transform: translateY(15%);
  transform: translateY(15%);
  }

  .home-benefits{
      li{
          list-style: none;
          cursor: pointer;
          margin: 10px;

          &:hover{
              opacity: 0.7;
            
          }
      }
  }
}

</style>