/*-----------------------------------------------------------------------------------

    Template Name: Lavaland Multipurpose  Landing Html5 Template
    Template URI: http://tf.itech-theme.com/lavaland-preview/
    Description: This is a Multipurpose Landing Html5 Template
    Author: cdibrandstudio
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
  
    1. Home One (Gym)
        1.1 Header Area
        1.2 Hero Area
        1.3 About Area
        1.4 Classes Area
        1.5 Trainer Area
        1.6 Testimonial Area
        1.7 Feature Blog
        1.8 Join Club
        1.9 Contact
       1.10 Footer Content
    2. Home Two (Yoga)
    3. Home Three (Music)
    4. Home Four (Photography)
    5. Home Five (Mobile App)
    6. Home Six (Multipurpose)
    7. Home Seven (Game)
    8. Blog
    8. Blog Details

-----------------------------------------------------------------------------------*/

/*============================================
    1. Home One (Gym) / 1.1 Header Area
*=============================================*/

img {
	height: auto;
    position: relative;
}

.zone {
    min-height: 100vh;
    background-color: #eeeeee;
	padding-bottom: 100px;
}

.pagebg {
    width: 100%;
    /* position: absolute; */
    /* top: 0;
    left: 50%;
    transform: translateX(-50%); */
}

.botom {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.bottom img {
    width: 100%;
}

.main {
    width: 70%;
    margin: 0 auto;
    padding: 20px 0;
}

.main .logo {
    width: 100px;
    margin-left: 10%;
}

.main .logo img {
    width: 100px;
}

.btnbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -320px;
}

.btnbox img {
    width: 20%;
    margin-right: 40px;
}


.explain {
    margin-top: 4%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explain img {
    width: 90%;
}
.tese {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 310px 0 3%;
}

.tese img {
    width: 30%;
}
.imglist {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.imglist img {
    width: 25%;
    margin-bottom: 15px;
}

.swiper {
    width: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
  }
  .swiper-slide-active,.swiper-slide-duplicate-active{
  }

  .swiper-slide img {
    display: block;
    width: 100%;
  }



.tab {
	display: flex;
	align-items: center;
	position: fixed;
	top: 50px;
	width: 1200px;
	justify-content: flex-end;
	z-index: 999;
}

.tab span {
	margin-right: 80px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.tab span:hover {
	color: #0055ff;
	text-decoration: underline;
}


.bottom {
	width: 100%;
	height: 100px;
	position: fixed;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	
	
}

.bottom p {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 30px;
	margin: 0 !important;
	color: #fff;
	font-size: 14px;
	opacity: 0.8;
}
  
.bottom p a {
	color: #fff;
}
  
.bottom p span {
	margin-left: 10px;
}


.introduce {
	position: relative;
	width: 100vw;
	left: 0;
}