<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../css/editor.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<main role="main">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><br></li>
<li data-target="#myCarousel" data-slide-to="1" class=""><br></li>
<li data-target="#myCarousel" data-slide-to="2" class=""><br></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">I<img class="first-slide" src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-469786746_super.jpg?fit=crop&w=960&h=416" alt="First slide" width="100%" height="496px">
<div class="container">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="https://cdn.thewire.in/wp-content/uploads/2018/08/12124108/Monsoon-Session-of-Parliament-pti-1200x600.jpg" alt="Second slide" width="100%" height="496px">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="http://agrabus.com/wp-content/uploads/2015/08/Tajmahal-Agra.jpeg" alt="Third slide" width="100%" height="495">
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--
=====================================================
About us Section
=====================================================
-->
<section id="about-us">
<div class="container">
<div class="theme-title">
<h2>Independent Travel</h2>
<p> If you're the type of person who enjoys the comfort and independence of travelling at your own pace, then our selection of independent packages are perfect for you. These short stays can be combined to design your very own tailor-made itinerary, or added to the beginning or end of your Indior Tours group tour if you wish to extend your stay. We can also tailor-make a personalised itinerary for you from scratch!</p>
</div> <!-- /.theme-title -->
<div class="theme-title">
<h3>What's Included in our Asia short stays</h3>
</div> <!-- /.theme-title -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="single-about-content">
<div class="icon round-border tran3s">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<h5><a href="#" class="tran3s">all domestic transportation</a></h5>
<p>Lorem ipsum dolor sit amet, consect et adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<a href="#" class="more tran3s hvr-bounce-to-right">More Details</a>
</div> <!-- /.single-about-content -->
</div> <!-- /.col -->
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="single-about-content">
<div class="icon round-border tran3s">
<i class="fa fa-camera" aria-hidden="true"></i>
</div>
<h5><a href="#" class="tran3s">all accommodation</a></h5>
<p>Lorem ipsum dolor sit amet, consect et adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<a href="#" class="more tran3s hvr-bounce-to-right">More Details</a>
</div> <!-- /.single-about-content -->
</div> <!-- /.col -->
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="single-about-content">
<div class="icon round-border tran3s">
<i class="fa fa-life-ring" aria-hidden="true"></i>
</div>
<h5><a href="#" class="tran3s">meals as stated</a></h5>
<p>Lorem ipsum dolor sit amet, consect et adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<a href="#" class="more tran3s hvr-bounce-to-right">More Details</a>
</div> <!-- /.single-about-content -->
</div> <!-- /.col -->
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="single-about-content">
<div class="icon round-border tran3s">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<h5><a href="#" class="tran3s">ALL SIGHTSEEING, GUIDING AND ENTRANCE FEES</a></h5>
<p>Lorem ipsum dolor sit amet, consect et adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<a href="#" class="more tran3s hvr-bounce-to-right">More Details</a>
</div> <!-- /.single-about-content -->
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</section> <!-- /#about-us -->
<!--
=====================================================
Service Section
=====================================================
-->
<div id="service-section">
<div class="container">
<div class="theme-title">
<h2>SERVICES WE PROVIDE</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
</div> <!-- /.theme-title -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-service-content">
<div class="icon-heading tran3s">
<div class="icon tran3s"><i class="fa fa-paint-brush" aria-hidden="true"></i></div>
<h6><a href="#" class="tran3s">Web Design</a></h6>
</div>
<p>Lorem ipsum dolor sit amet, consectetur scing elit, sed do eiusmod, tempor incididunt labore et dolore magna aliqua. Ut enim ad minim ut veniam, quis nostrud exercitation ullamco aliquip ex ea commodo consequat. </p>
</div> <!-- /.single-service-content -->
</div> <!-- /.col-lg -->
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-service-content">
<div class="icon-heading tran3s">
<div class="icon tran3s"><i class="fa fa-camera" aria-hidden="true"></i></div>
<h6><a href="#" class="tran3s">Photography</a></h6>
</div>
<p>Lorem ipsum dolor sit amet, consectetur scing elit, sed do eiusmod, tempor incididunt labore et dolore magna aliqua. Ut enim ad minim ut veniam, quis nostrud exercitation ullamco aliquip ex ea commodo consequat. </p>
</div> <!-- /.single-service-content -->
</div> <!-- /.col-lg -->
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-service-content">
<div class="icon-heading tran3s">
<div class="icon tran3s"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div>
<h6><a href="#" class="tran3s">Web Development</a></h6>
</div>
<p>Lorem ipsum dolor sit amet, consectetur scing elit, sed do eiusmod, tempor incididunt labore et dolore magna aliqua. Ut enim ad minim ut veniam, quis nostrud exercitation ullamco aliquip ex ea commodo consequat. </p>
</div> <!-- /.single-service-content -->
</div> <!-- /.col-lg -->
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-service-content">
<div class="icon-heading tran3s">
<div class="icon tran3s"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
<h6><a href="#" class="tran3s">Online Marketing</a></h6>
</div>
<p>Lorem ipsum dolor sit amet, consectetur scing elit, sed do eiusmod, tempor incididunt labore et dolore magna aliqua. Ut enim ad minim ut veniam, quis nostrud exercitation ullamco aliquip ex ea commodo consequat. </p>
</div> <!-- /.single-service-content -->
</div> <!-- /.col-lg -->
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-service-content">
<div class="icon-heading tran3s">
<div class="icon tran3s"><i class="fa fa-life-ring" aria-hidden="true"></i></div>
<h6><a href="#" class="tran3s">Digital Media</a></h6>
</div>
<p>Lorem ipsum dolor sit amet, consectetur scing elit, sed do eiusmod, tempor incididunt labore et dolore magna aliqua. Ut enim ad minim ut veniam, quis nostrud exercitation ullamco aliquip ex ea commodo consequat. </p>
</div> <!-- /.single-service-content -->
</div> <!-- /.col-lg -->
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-service-content">
<div class="icon-heading tran3s">
<div class="icon tran3s"><i class="fa fa-anchor" aria-hidden="true"></i></div>
<h6><a href="#" class="tran3s">Support</a></h6>
</div>
<p>Lorem ipsum dolor sit amet, consectetur scing elit, sed do eiusmod, tempor incididunt labore et dolore magna aliqua. Ut enim ad minim ut veniam, quis nostrud exercitation ullamco aliquip ex ea commodo consequat. </p>
</div> <!-- /.single-service-content -->
</div> <!-- /.col-lg -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /#service-section -->
<!--
=====================================================
Project Section
=====================================================
-->
<div id="project-section">
<div class="container">
<div class="theme-title">
<h2>OUR AWESOME PROJECTS</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
</div> <!-- /.theme-title -->
<div class="project-menu">
<ul>
<li class="filter active tran3s" data-filter="all">All</li>
<li class="filter tran3s" data-filter=".web">Web Design</li>
<li class="filter tran3s" data-filter=".photo">Photography</li>
<li class="filter tran3s" data-filter=".webd">Web Development</li>
<li class="filter tran3s" data-filter=".om">Online Marketing</li>
<li class="filter tran3s" data-filter=".dmedia">Digital Media</li>
<li class="filter tran3s" data-filter=".support">Support</li>
</ul>
</div>
<div class="project-gallery clear-fix">
<div class="mix grid-item photo om dmedia">
<div class="single-img">
<img src="images/project/1.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item web webd dmedia support">
<div class="single-img">
<img src="images/project/2.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item photo webd support">
<div class="single-img">
<img src="images/project/3.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item web om">
<div class="single-img">
<img src="images/project/4.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item photo webd dmedia om">
<div class="single-img">
<img src="images/project/5.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item web webd dmedia om">
<div class="single-img">
<img src="images/project/6.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item photo om support">
<div class="single-img">
<img src="images/project/7.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item web support">
<div class="single-img">
<img src="images/project/8.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
<div class="mix grid-item photo webd dmedia support">
<div class="single-img">
<img src="images/project/9.jpg" alt="Image">
<div class="opacity">
<div class="border-shape"><div><div>
<h6><a href="#">Sweet Photo</a></h6>
<ul>
<li>Business /</li>
<li>Service /</li>
<li>Product /</li>
<li>Template</li>
</ul></div></div>
</div> <!-- /.border-shape -->
</div> <!-- /.opacity -->
</div> <!-- /.single-img -->
</div> <!-- /.grid-item -->
</div> <!-- /.project-gallery -->
</div> <!-- /.container -->
</div> <!-- /#project-section -->
<!--
=====================================================
Page middle banner
=====================================================
-->
<div class="page-middle-banner">
<div class="opacity">
<h3>We Create Creative <span class="p-color">&</span> Best Unique Design</h3>
<a href="#" class="hvr-bounce-to-right">Let's Work Together</a>
</div> <!-- /.opacity -->
</div> <!-- /.page-middle-banner -->
<!--
=====================================================
Team Section
=====================================================
-->
<div id="team-section">
<div class="container">
<div class="theme-title">
<h2>Meet our Team</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
</div> <!-- /.theme-title -->
<div class="clear-fix team-member-wrapper">
<div class="float-left">
<div class="single-team-member">
<div class="img">
<img src="images/team/1.jpg" alt="Image">
<div class="opacity tran4s">
<h4>Gonzalez Gina</h4>
<span>Web Developer</span>
<p>On the other hand, We denounce ut with righteo indignation and dislike men who are so beguiled and demoralized.</p>
</div>
</div> <!-- /.img -->
<div class="member-name">
<h6>Gonzalez Gina</h6>
<p>Web Developer</p>
<ul>
<li><a href="#" class="tran3s round-border"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div> <!-- /.member-name -->
</div> <!-- /.single-team-member -->
</div> <!-- /float-left -->
<div class="float-left">
<div class="single-team-member">
<div class="img">
<img src="images/team/2.jpg" alt="Image">
<div class="opacity tran4s">
<h4>Holly Vincenzini</h4>
<span>Media Partner</span>
<p>On the other hand, We denounce ut with righteo indignation and dislike men who are so beguiled and demoralized.</p>
</div>
</div> <!-- /.img -->
<div class="member-name">
<h6>Holly Vincenzini</h6>
<p>Media Partner</p>
<ul>
<li><a href="#" class="tran3s round-border"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div> <!-- /.member-name -->
</div> <!-- /.single-team-member -->
</div> <!-- /float-left -->
<div class="float-left">
<div class="single-team-member">
<div class="img">
<img src="images/team/3.jpg" alt="Image">
<div class="opacity tran4s">
<h4>Ramirez Minita</h4>
<span>Graphic Design</span>
<p>On the other hand, We denounce ut with righteo indignation and dislike men who are so beguiled and demoralized.</p>
</div>
</div> <!-- /.img -->
<div class="member-name">
<h6>Ramirez Minita</h6>
<p>Graphic Design</p>
<ul>
<li><a href="#" class="tran3s round-border"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div> <!-- /.member-name -->
</div> <!-- /.single-team-member -->
</div> <!-- /float-left -->
</div> <!-- /.team-member-wrapper -->
</div> <!-- /.conatiner -->
</div> <!-- /#team-section -->
<!--
=====================================================
Skill Section
=====================================================
-->
<div id="skill-section">
<div class="container">
<div class="clear-fix">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="img"><img src="images/home/2.jpg" alt="Image"></div>
</div> <!-- /.col- -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="skills-progress skills">
<div class="habilidades_contenedor">
<div class="codeconSkills">
<div class="codeconSkillbar">
<div class="skill-text">
<span class="codeconSkillArea">Web Development</span>
</div>
<div class="skillBar" data-percent="89%">
<span class="PercentText">89%</span>
</div>
</div>
<div class="codeconSkillbar">
<div class="skill-text">
<span class="codeconSkillArea ">Online Marketing</span>
</div>
<div class="skillBar" data-percent="58%">
<span class="PercentText">58%</span>
</div>
</div>
<div class="codeconSkillbar">
<div class="skill-text">
<span class="codeconSkillArea">Digital Media</span>
</div>
<div class="skillBar" data-percent="49%">
<span class="PercentText">49%</span>
</div>
</div>
<div class="codeconSkillbar">
<div class="skill-text">
<span class="codeconSkillArea">Photography</span>
</div>
<div class="skillBar" data-percent="76%">
<span class="PercentText">76%</span>
</div>
</div>
<div class="codeconSkillbar">
<div class="skill-text">
<span class="codeconSkillArea">Creative Design</span>
</div>
<div class="skillBar" data-percent="64%">
<span class="PercentText ">64%</span>
</div>
</div>
</div> <!-- /.codeconSkills -->
</div> <!-- /.habilidades_contenedor -->
</div> <!-- /.skills-progress -->
</div>
</div> <!-- /.clear-fix -->
</div> <!-- /.container -->
</div> <!-- /#skill-section -->
<!--
=====================================================
Our Client
=====================================================
-->
<div id="our-client">
<div class="container">
<div class="theme-title">
<h2>OUR HAPPY CLIENTS</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
</div> <!-- /.theme-title -->
<div class="client-slider">
<div class="item">
<img src="images/home/c1.jpg" alt="Client">
<p>Our successful construction approach is based on aggressive subcontractor administration, employ-ment of competent personnel, accurate schedule control, quality control and cost control. We employ only qualified subcontractors who share our goal in creating quality projects.</p>
<h6>- Spryte Loriano -</h6>
</div> <!-- /.item -->
<div class="item">
<img src="images/home/c2.jpg" alt="Client">
<p>Our successful construction approach is based on aggressive subcontractor administration, employ-ment of competent personnel, accurate schedule control, quality control and cost control. We employ only qualified subcontractors who share our goal in creating quality projects.</p>
<h6>- Spryte Loriano -</h6>
</div> <!-- /.item -->
<div class="item">
<img src="images/home/c3.jpg" alt="Client">
<p>Our successful construction approach is based on aggressive subcontractor administration, employ-ment of competent personnel, accurate schedule control, quality control and cost control. We employ only qualified subcontractors who share our goal in creating quality projects.</p>
<h6>- Spryte Loriano -</h6>
</div> <!-- /.item -->
</div> <!-- /.client-slider -->
</div> <!-- /.container -->
</div> <!-- /#our-client -->
<!--
=====================================================
Pricing Section
=====================================================
-->
<div id="pricing-section">
<div class="container">
<div class="clear-fix">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="single-price-table hvr-float-shadow">
<h4>Basic</h4>
<p>The best to start</p>
<strong class="color1">$9.99 <span>/monthly</span></strong>
<ul>
<li>3,600 Keywords</li>
<li>50 Social Accounts</li>
<li>25 Analytics Campaigns</li>
<li>45 Email Accounts</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="tran3s p-color-bg">BUY IT NOW</a>
</div> <!-- /.single-price-table -->
</div> <!-- /.col -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="single-price-table hvr-float-shadow">
<h4>Advanced</h4>
<p>The best to start</p>
<strong class="color2">$39.99 <span>/monthly</span></strong>
<ul>
<li>3,600 Keywords</li>
<li>50 Social Accounts</li>
<li>25 Analytics Campaigns</li>
<li>45 Email Accounts</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="tran3s p-color-bg">BUY IT NOW</a>
</div> <!-- /.single-price-table -->
</div> <!-- /.col -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="single-price-table hvr-float-shadow">
<h4>PREMIUM</h4>
<p>The best to start</p>
<strong class="color3">$59.99 <span>/monthly</span></strong>
<ul>
<li>3,600 Keywords</li>
<li>50 Social Accounts</li>
<li>25 Analytics Campaigns</li>
<li>45 Email Accounts</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="tran3s p-color-bg">BUY IT NOW</a>
</div> <!-- /.single-price-table -->
</div> <!-- /.col -->
</div>
</div> <!-- /.container -->
</div> <!-- /#pricing-section -->
<!--
=====================================================
Blog Section
=====================================================
-->
<div id="blog-section">
<div class="container">
<div class="theme-title">
<h2>OUR LATEST Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
</div> <!-- /.theme-title -->
<div class="clear-fix">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="single-news-item">
<div class="img"><img src="images/blog/1.jpg" alt="Image">
<a href="blog-details.html" class="opacity tran4s"><i class="fa fa-link" aria-hidden="true"></i></a>
</div> <!-- /.img -->
<div class="post">
<h6><a href="blog-details.html" class="tran3s">Playback: Akufo-Addo speaks to business community</a></h6>
<a href="blog-details.html">Posted by <span class="p-color">admin</span> at 04 Feb, 2017</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis iaculis velit in tristique. Curabitur ac urna urna sed accumsan... <a href="blog-details.html" class="tran3s">Read More</a></p>
</div> <!-- /.post -->
</div> <!-- /.single-news-item -->
</div> <!-- /.col- -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="single-news-item">
<div class="img"><img src="images/blog/2.jpg" alt="Image">
<a href="blog-details.html" class="opacity tran4s"><i class="fa fa-link" aria-hidden="true"></i></a>
</div> <!-- /.img -->
<div class="post">
<h6><a href="blog-details.html" class="tran3s">Playback: Akufo-Addo speaks to business community</a></h6>
<a href="blog-details.html">Posted by <span class="p-color">admin</span> at 04 Feb, 2017</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis iaculis velit in tristique. Curabitur ac urna urna sed accumsan... <a href="blog-details.html" class="tran3s">Read More</a></p>
</div> <!-- /.post -->
</div> <!-- /.single-news-item -->
</div> <!-- /.col- -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="single-news-item">
<div class="img"><img src="images/blog/3.jpg" alt="Image">
<a href="blog-details.html" class="opacity tran4s"><i class="fa fa-link" aria-hidden="true"></i></a>
</div> <!-- /.img -->
<div class="post">
<h6><a href="blog-details.html" class="tran3s">Playback: Akufo-Addo speaks to business community</a></h6>
<a href="blog-details.html">Posted by <span class="p-color">admin</span> at 04 Feb, 2017</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis iaculis velit in tristique. Curabitur ac urna urna sed accumsan... <a href="blog-details.html" class="tran3s">Read More</a></p>
</div> <!-- /.post -->
</div> <!-- /.single-news-item -->
</div> <!-- /.col- -->
</div> <!-- /.clear-fix -->
</div> <!-- /.container -->
</div> <!-- /#blog-section -->
<!--
=====================================================
Partner Section
=====================================================
-->
<div id="partner-section">
<div class="container">
<div id="partner_logo" class="owl-carousel owl-theme">
<div class="item"><img src="images/logo/p1.png" alt="logo"></div>
<div class="item"><img src="images/logo/p2.png" alt="logo"></div>
<div class="item"><img src="images/logo/p3.png" alt="logo"></div>
<div class="item"><img src="images/logo/p4.png" alt="logo"></div>
<div class="item"><img src="images/logo/p5.png" alt="logo"></div>
<div class="item"><img src="images/logo/p2.png" alt="logo"></div>
</div> <!-- End .partner_logo -->
</div> <!-- /.container -->
</div> <!-- /#partner-section -->
<!--
=====================================================
Contact Section
=====================================================
-->
<div id="contact-section">
<div class="container">
<div class="clear-fix contact-address-content">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="left-side">
<h2>Contact Info</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majori have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a pas of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>
<div class="icon tran3s round-border p-color-bg"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
<h6>Address</h6>
<p>Freedom Way, Jersey City, NJ 07305, USA</p>
</li>
<li>
<div class="icon tran3s round-border p-color-bg"><i class="fa fa-phone" aria-hidden="true"></i></div>
<h6>Phone</h6>
<p>+88 01911854378</p>
</li>
<li>
<div class="icon tran3s round-border p-color-bg"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
<h6>Email</h6>
<p>backpiper.com@gmail.com</p>
</li>
</ul>
</div> <!-- /.left-side -->
</div> <!-- /.col- -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="map-area">
<h2>Our Location</h2>
<div id="map"></div>
</div> <!-- /.map-area -->
</div> <!-- /.col- -->
</div> <!-- /.contact-address-content -->
<!-- Contact Form -->
<div class="send-message">
<h2>Send Message</h2>
<form action="inc/sendemail.php" class="form-validation" autocomplete="off" method="post">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="single-input">
<input type="text" placeholder="First Name*" name="Fname">
</div> <!-- /.single-input -->
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="single-input">
<input type="text" placeholder="Last Name*" name="Lname">
</div> <!-- /.single-input -->
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="single-input">
<input type="email" placeholder="Your Email*" name="email">
</div> <!-- /.single-input -->
</div>
</div> <!-- /.row -->
<div class="single-input">
<input type="text" placeholder="Subject" name="sub">
</div> <!-- /.single-input -->
<textarea placeholder="Write Message" name="message"></textarea>
<button class="tran3s p-color-bg">Send Message</button>
</form>
<!-- Contact Form Validation Markup -->
<!-- Contact alert -->
<div class="alert-wrapper" id="alert-success">
<div id="success">
<button class="closeAlert"><i class="fa fa-times" aria-hidden="true"></i></button>
<div class="wrapper">
<p>Your message was sent successfully.</p>
</div>
</div>
</div> <!-- End of .alert_wrapper -->
<div class="alert-wrapper" id="alert-error">
<div id="error">
<button class="closeAlert"><i class="fa fa-times" aria-hidden="true"></i></button>
<div class="wrapper">
<p>Sorry!Something Went Wrong.</p>
</div>
</div>
</div> <!-- End of .alert_wrapper -->
</div> <!-- /.send-message -->
</div> <!-- /.container -->
</div> <!-- /#contact-section -->
<!--
=====================================================
Footer
=====================================================
-->
<footer>
<div class="container">
<a href="index.html" class="logo"><img src="images/logo/logo.png" alt="Logo"></a>
<ul>
<li><a href="#" class="tran3s round-border"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#" class="tran3s round-border"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
</ul>
<p>Copyright @2017 All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://indior.tours" target="_blank">Indior Tours Pvt Ltd</a></p>
</div>
</footer>
<!-- =============================================
Loading Transition
============================================== -->
<div id="loader-wrapper">
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Scroll Top Button -->
<button class="scroll-top tran3s p-color-bg">
<i class="fa fa-long-arrow-up" aria-hidden="true"></i>
</button>
<!-- Js File_________________________________ -->
<!-- j Query -->
<script type="text/javascript" src="vendor/jquery.2.2.3.min.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="vendor/bootstrap/bootstrap.min.js"></script>
<!-- Vendor js _________ -->
<!-- revolution -->
<script src="vendor/revolution/jquery.themepunch.tools.min.js"></script>
<script src="vendor/revolution/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="vendor/revolution/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="vendor/revolution/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="vendor/revolution/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="vendor/revolution/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="vendor/revolution/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="vendor/revolution/revolution.extension.video.min.js"></script>
<!-- Google map js -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZ8VrXgGZ3QSC-0XubNhuB2uKKCwqVaD0&callback=goMap" type="text/javascript"></script> <!-- Gmap Helper -->
<script src="vendor/gmaps.min.js"></script>
<!-- owl.carousel -->
<script type="text/javascript" src="vendor/owl-carousel/owl.carousel.min.js"></script>
<!-- mixitUp -->
<script type="text/javascript" src="vendor/jquery.mixitup.min.js"></script>
<!-- Progress Bar js -->
<script type="text/javascript" src="vendor/skills-master/jquery.skills.js"></script>
<!-- Validation -->
<script type="text/javascript" src="vendor/contact-form/validate.js"></script>
<script type="text/javascript" src="vendor/contact-form/jquery.form.js"></script>
<!-- Theme js -->
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/map-script.js"></script>
</div> <!-- /.main-page-wrapper -->
</body>
</html>
/* Responsive CSS Document */
/*
Created on : 4/4/2017.
Theme Name : Indior Tours .
Description: Indior Tours- Responsive CMS template.
Version : 1.1.
Author : @Indior Tours.
*/
@media (min-width: 992px) {
.container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 1366px) {
.scroll-top {bottom: 30px; right:30px;}
}
@media (max-width: 1199px) {
#team-section .team-member-wrapper .single-team-member .img .opacity p {padding: 0 15px;}
#team-section .team-member-wrapper .single-team-member .img .opacity {padding-top: 20px;}
.habilidades_contenedor {margin-top: 100px;}
}
/*(max-width: 1199px)*/
@media (max-width: 991px) {
.theme-title p,#skill-section .img img {width: 100%;}
#skill-section {padding-bottom: 30px;}
.blog-details-page aside {margin-top: 100px;}
.blog-details-post-wrapper>.row p {margin-bottom: 30px;}
}
/*(max-width: 991px)*/
@media (min-width: 992px) and (max-width: 1199px) {
.theme-main-header .logo {width: 15%;}
.theme-main-menu .navbar-nav>li>a {padding: 9px 12px;}
.theme-title p {width: 95%;}
#our-client .client-slider p {width: 70%;}
.recent-single-post .post {width: 75%;}
}
/*(min-width: 992px) and (max-width: 1199px)*/
@media (min-width: 768px) and (max-width: 991px) {
.theme-main-header .logo {width: 22%; margin: 0 auto;float:none; display: block;}
.theme-main-menu.navbar {float:none;margin-top: 30px;}
.theme-main-menu .navbar-nav>li>a {padding: 9px 8px;}
.theme-main-header.fixed .logo {display: none;}
.theme-main-header.fixed .theme-main-menu.navbar {margin-top: 0;}
#project-section .project-gallery .grid-item,
#team-section .team-member-wrapper .float-left {width: 50%;}
#our-client .client-slider p {width: 90%;}
.inner-page-banner .opacity {padding-top: 210px;}
}
/*(min-width: 768px) and (max-width: 991px)*/
@media (max-width: 767px) {
.scroll-top {bottom: 10px; right:5px;}
.theme-main-header {padding-top: 15px;}
.theme-main-header .logo {position: absolute;top:15px;left:15px;z-index: 99;}
.theme-main-menu.navbar {float:none;width: 100%;}
.theme-main-header.fixed {background: #1e1e1e;max-height: 100%;overflow-y:auto;}
.theme-main-menu .navbar-collapse {padding: 0 15px;box-shadow: none;border:none;background: #1e1e1e;margin-top: 15px;}
.theme-main-header li.dropdown-holder .fa {display: block;}
.theme-main-menu .navbar-nav>li>a {padding: 0;line-height: 44px;}
.theme-main-menu.navbar .nav>li ul.sub-menu {
position: static;
width: 100%;
opacity: 1;
background: #000;
visibility: visible;
display: none;
padding-left: 25px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
#pricing-section .single-price-table {margin-bottom: 50px;}
#project-section .project-gallery .grid-item {width: 50%;}
#team-section .team-member-wrapper .float-left,
#team-section .team-member-wrapper .float-left img,
#our-client .client-slider p {width: 100%;}
#team-section .team-member-wrapper .float-left,
#project-section .project-gallery .grid-item,
#service-section .row [class*="col-"],#skill-section [class*="col-"],
#pricing-section [class*="col-"],#contact-section .send-message,
#contact-section .contact-address-content [class*="col-"],
#blog-section [class*="col-"],.theme-main-header .container,
.blog-details-page .p-fix {padding-left: 0;padding-right: 0;}
}
/*(max-width: 767px)*/
@media (max-width: 650px) {
#success, #error {
width: 84%;
height: auto;
top: calc(50% - 50px);
left: 8%;
padding: 30px 10px;
margin:0;
}
.blog-details-post-wrapper .list-img-wrapper img,
.blog-details-post-wrapper .post-share-area ul {float:none; width: 100%;}
.blog-details-post-wrapper .list-img-wrapper ul {float:none;padding: 30px 0 0 0;}
.blog-details-post-wrapper .post-share-area .share-icon li:first-child {margin-top: 30px;}
}
@media (max-width: 550px) {
#project-section .project-gallery .grid-item,
#project-section .project-gallery .grid-item img {width: 100%;}
#project-section .project-menu ul li {font-size: 14px;margin: 15px 2px 0;border-bottom: 1px solid #fff;}
#team-section .team-member-wrapper .single-team-member .img .opacity span {margin: 5px 0;}
#team-section .team-member-wrapper .single-team-member .member-name ul li a {width: 40px;line-height: 38px;}
.banner h1 {font-size: 35px;}
.blog-details-post-wrapper .comment-area .single-comment.reply-comment {margin-left: 60px;}
}
@media (max-width: 430px) {
.banner h1 {font-size: 27px;}
.banner h6 {font-size: 14px;}
.hermes.tparrows {display: none;}
.recent-single-post .post {width: 100%;padding: 12px 0 0 0;}
}
/* CSS Document */
/*
Created on : 1/15/2017.
Theme Name : BizPro.
Description: BizPro- Responsive html5 template.
Version : 1.1.
Author : @SRThemes.
*/
/* ------------------------------------------ */
/* TABLE OF CONTENTS
/* ------------------------------------------ */
/* 01 - Loading Transition */
/* 02 - Click To Top */
/* 03 - Global Settings */
/* 04 - Theme Header */
/* 05 - Theme Main Banner */
/* 06 - About section */
/* 07 - Service section */
/* 08 - Project section */
/* 09 - Page Middle Banner */
/* 10 - Team Section */
/* 11 - Skill Section */
/* 12 - Our Client */
/* 13 - Pricing Section */
/* 14 - Blog Section */
/* 15 - Partner Section */
/* 16 - Contact Section */
/* 17 - Footer */
/* 18 - Inner Page Banner */
/* 19 - Blog Aside bar */
/* 20 - Blog Details Post */
/**
* Importing necessary Styles.
**/
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700');
/*----bootstrap css ----- */
@import url('../vendor/bootstrap/bootstrap.css');
/*----font awesome -------*/
@import url('../fonts/font-awesome/css/font-awesome.min.css');
/*----revolution-slider---*/
@import url('../vendor/revolution/settings.css');
@import url('../vendor/revolution/layers.css');
@import url('../vendor/revolution/navigation.css');
/*----owl-carousel css----*/
@import url('../vendor/owl-carousel/owl.carousel.css');
@import url('../vendor/owl-carousel/owl.theme.css');
/*-------- animated css ------*/
@import url('../vendor/WOW-master/css/libs/animate.css');
/*---- Progress bar css----*/
@import url('../vendor/skills-master/source/habilidades.css');
/*-------- hover css ------*/
@import url('../vendor/hover.css');
/*----calendar css--------*/
@import url('../vendor/monthly-master/css/monthly.css');
/***
====================================================================
Loading Transition
====================================================================
***/
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: #fff;
overflow: hidden;
}
#preloader_1{
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
transform: translateY(-50%);
}
#preloader_1 span{
display:block;
bottom:0px;
width: 6px;
height: 5px;
background:#e04f5d;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:#e62d3f;}
25% {height:30px;transform:translateY(15px);background:#e62d3f;}
50% {height:5px;transform:translateY(0px);background:#ee2438;}
100% {height:5px;transform:translateY(0px);background:#ee2438;}
}
/***
====================================================================
Click To Top
====================================================================
***/
.scroll-top {
width:45px;
height:45px;
position: fixed;
bottom: 52px;
right: 80px;
z-index: 9999;
text-align: center;
color:#fff;
font-size: 20px;
display: none;
}
.scroll-top:after {
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 1;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
/***
====================================================================
Global Settings
====================================================================
***/
@font-face {
font-family: 'font-awesome';
src: url('../fonts/font-awesome/fonts/fontawesome-webfont.ttf');
src: url('../fonts/font-awesome/fonts/fontawesome-webfont.eot'), /* IE9 Compat Modes */
url('../fonts/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/font-awesome/fonts/fontawesome-webfont.svg') format('svg'); /* Legacy iOS */
}
body {
font-family: 'Raleway', sans-serif;
font-weight: normal;
color:#6f6f6f;
font-size: 14px;
position: relative;
}
.main-page-wrapper {
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,p,ul { margin:0;padding: 0;}
h1,h2,h3,h4,h5,h6 {color:#292929; text-transform: uppercase;font-weight: 700;}
h1 {font-size: 48px;}
h2 {font-size: 36px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 22px;}
h6 {font-size: 18px;}
p {line-height: 26px;}
ul {list-style-type: none;}
a {text-decoration: none; display: inline-block;}
a:hover,a:focus,a:visited {text-decoration: none; outline: none;}
img {max-width: 100%; display: block;}
button {border:none;outline: none;box-shadow: none;display: block; padding: 0;}
input,textarea {outline: none; box-shadow: none;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.clear-fix { clear:both;}
.clear-fix:after {
display: table;
content: '';
clear: both;
}
.tran3s,.theme-main-menu .navbar-nav>li a,#project-section .project-gallery .single-img .opacity,
#team-section .team-member-wrapper .single-team-member .member-name h6,
#team-section .team-member-wrapper .single-team-member .member-name p,
#team-section .team-member-wrapper .single-team-member .member-name ul,
#our-client .owl-theme .owl-dots .owl-dot span {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.tran4s,#service-section .single-service-content p,#project-section .project-gallery .single-img .opacity ul,
#project-section .project-gallery .single-img .opacity h6 a {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.float-left {float:left;}
.float-right {float:right;}
.round-border {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.theme-title {
text-align: center;
margin: 95px 0 0 0;
}
.theme-title h2 {
position: relative;
}
.theme-title h2:before {
content: '';
width: 25px;
height: 3px;
position: absolute;
bottom: -25px;
left: 50%;
margin-left: -12px;
}
.theme-title p {
font-size: 16px;
width: 75%;
margin: 60px auto 0 auto;
}
.p-color,.theme-main-menu .navbar-nav>li.active>a,
.theme-main-menu .navbar-nav>li>a:hover,#about-us .single-about-content:hover h5 a,
#service-section .single-service-content:hover .icon-heading .icon,
#service-section .single-service-content:hover .icon-heading h6 a,
#pricing-section .single-price-table a:hover,#blog-section .single-news-item .img a,
#blog-section .single-news-item:hover .post p a,#blog-section .single-news-item .post h6:hover a,
#contact-section .contact-address-content .left-side ul li:hover .icon,
#contact-section .send-message form button:hover,.inner-page-banner .opacity ul li:last-child,
.blog-details-page aside .sidebar-news-list ul li a i,.monthly-header-title,
.blog-details-page aside .sidebar-news-list ul li a:hover,.blog-details-page aside .sidebar-archives ul li a i,
.blog-details-page aside .sidebar-archives ul li a:hover,.blog-details-page aside .sidebar-archives ul li a.active,
.blog-details-page aside .sidebar-news-list ul li a.active,.recent-single-post .post a:hover,
.sidebar-tags ul li a:hover,.blog-details-post-wrapper .list-img-wrapper ul li a i,
.blog-details-post-wrapper .list-img-wrapper ul li a:hover,.blog-details-post-wrapper .post-comment form button:hover,
.blog-details-post-wrapper .post-share-area .share li a:hover,.theme-main-menu.navbar .nav>li ul li a:hover,
.blog-details-post-wrapper .post-share-area .share li a.active {
color:#d73e4d;
}
.p-color-bg,.theme-title h2:before,#about-us .single-about-content:hover .icon,
#skill-section .codeconSkillbar .skillBar,#our-client .owl-theme .owl-dots .owl-dot.active span,
#our-client .owl-theme .owl-dots .owl-dot:hover span,
.blog-details-post-wrapper .comment-area .single-comment .comment button:hover {
background: #d73e4d;
}
.banner .project-button,#about-us .icon,#about-us .single-about-content a.more,
#service-section .single-service-content:hover,#project-section .project-menu ul li.active,
#project-section .project-menu ul li:hover,.page-middle-banner .opacity a,
#team-section .team-member-wrapper .single-team-member .img .opacity h4,#pricing-section .single-price-table a,
#our-client .owl-theme .owl-dots .owl-dot.active span, #our-client .owl-theme .owl-dots .owl-dot:hover span,
#contact-section .contact-address-content .left-side ul li .icon,#contact-section .send-message form button,
.sidebar-tags ul li a:hover,.blog-details-post-wrapper .post-comment form button,
.blog-details-post-wrapper .post-comment textarea:focus,.blog-details-post-wrapper .post-comment input:focus {
border-color:#d73e4d;
border-style: solid;
}
/***
====================================================================
Theme Header
====================================================================
***/
.theme-main-header {
position: absolute;
top:0;
left:0;
right: 0;
z-index: 999;
padding-top: 20px;
}
.theme-main-menu .navbar-nav>li>a {
text-transform: uppercase;
color:#fff;
font-weight: 700;
background: transparent;
padding: 9px 15px;
}
.theme-main-menu .navbar-nav>li:last-child>a {
padding-right: 0;
}
.theme-main-menu.navbar {
border:none;
margin: 0;
}
.theme-main-menu.navbar .nav>li ul.sub-menu {
position: absolute;
background: #1e1e1e;
width:150px;
top:120%;
top:calc(100% + 60px);
left:0;
opacity: 0;
visibility: hidden;
text-align: left;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-box-shadow: 0px 13px 25px -12px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 13px 25px -12px rgba(0,0,0,0.15);
box-shadow: 0px 13px 25px -12px rgba(0,0,0,0.15);
}
.theme-main-menu.navbar .nav>li ul li a {
line-height: 40px;
color:#fff;
font-weight: 700;
padding: 0 0 0 15px;
display: block;
}
.theme-main-menu.navbar .nav>li ul li:last-child a {
border:none;
}
.theme-main-menu.navbar .nav>li:hover ul.sub-menu {
top:100%;
opacity: 1;
visibility: visible;
}
.theme-main-menu .navbar-toggle {
margin: 0;
border-radius: 0;
color:#fff;
padding-right: 15px;
}
.theme-main-menu .navbar-toggle .fa {
font-size: 18px;
vertical-align: middle;
margin-left: 5px;
}
.theme-main-menu .navbar-nav {
margin: 0;
}
.theme-main-header li.dropdown-holder .fa {
position: absolute;
top:0;
right: 0;
text-align: center;
width: 45px;
color:#fff;
font-size: 18px;
display: none;
cursor: pointer;
line-height: 44px;
}
/***
====================================================================
Sticky Menu
====================================================================
***/
@keyframes menu_sticky {
0% {margin-top:-120px;opacity: 0;}
50% {margin-top: -64px;opacity: 0;}
100% {margin-top: 0;opacity: 1;}
}
.theme-main-header.fixed {
position: fixed;
width:100%;
top:0;
left:0;
z-index: 9999;
background: rgba(0,0,0,0.5);
margin:0;
animation-name: menu_sticky;
animation-duration: 0.70s;
animation-timing-function: ease-in-out;
}
.theme-main-header.fixed .logo {
margin-top: -8px;
}
/***
====================================================================
Theme Main Banner
====================================================================
***/
.rev_slider_wrapper {
background: #000;
}
.banner h1,.banner h6,.banner .project-button {
color:#fff;
}
.banner h6 {
font-weight: 500;
}
.banner .project-button {
width: 170px;
line-height: 50px;
text-align: center;
border-width: 1px;
text-transform: uppercase;
}
/***
====================================================================
About section
====================================================================
***/
#about-us .single-about-content {
text-align: center;
margin-top: 55px;
margin-bottom: 100px;
}
#about-us .icon {
width: 130px;
height: 130px;
margin: 0 auto;
line-height: 130px;
border-width: 2px;
font-size: 36px;
color:#292929;
}
#about-us h5 a {
color:#292929;
margin: 35px 0 20px 0;
}
#about-us .single-about-content a.more {
width: 130px;
line-height: 45px;
color:#292929;
border-width: 1px;
margin-top:22px;
}
#about-us .single-about-content a.more:hover,
#about-us .single-about-content:hover .icon {
color:#fff;
}
/***
====================================================================
Service section
====================================================================
***/
#service-section {
background: #232a34;
padding-bottom: 80px;
}
#service-section .theme-title h2,
#service-section .theme-title p {
color:#fff;
}
#service-section .row {
margin: 50px 0 0 0;
}
#service-section .row [class*="col-"] {
padding-top: 25px;
}
#service-section .single-service-content {
border:1px solid #808489;
text-align: center;
margin-bottom: 20px;
padding: 118px 23px 65px 23px;
overflow: hidden;
}
#service-section .single-service-content p {
-webkit-transition-delay: 0.3s; /* Safari */
transition-delay: 0.3s;
opacity: 0;
-webkit-transform: translate3D(0,200px,0);
-moz-transform: translate3D(0,200px,0);
-ms-transform: translate3D(0,200px,0);
-o-transform: translate3D(0,200px,0);
transform: translate3D(0,200px,0);
}
#service-section .single-service-content .icon-heading {
position: absolute;
width: 100%;
left:0;
right: 0;
top:120px;
}
#service-section .single-service-content .icon-heading .icon {
font-size: 48px;
color:#808489;
width: 80px;
margin: 0 auto;
background: #232a34;
}
#service-section .single-service-content .icon-heading a {
color:#808489;
text-transform: capitalize;
margin-top: 33px;
}
#service-section .single-service-content:hover .icon-heading {
top:-10px;
}
#service-section .single-service-content:hover p {
opacity: 1;
color: #fff;
-webkit-transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-ms-transform: translate3D(0,0,0);
-o-transform: translate3D(0,0,0);
transform: translate3D(0,0,0);
}
/***
====================================================================
Project section
====================================================================
***/
#project-section .project-menu ul {
text-align: center;
margin-top: 34px;
margin-bottom: 60px;
}
#project-section .project-menu ul li {
display: inline-block;
cursor: pointer;
font-size: 16px;
font-weight: 700;
color:#292929;
padding: 0 8px;
border-width: 0;
border-bottom-width:1px;
border-color: transparent;
margin: 15px 10px 0 10px;
padding-bottom: 10px;
}
#project-section .project-gallery .grid-item {
width: 33.33333333333%;
padding: 0 15px;
margin-bottom: 32px;
float:left;
display: none;
}
#project-section .project-gallery .single-img {
position: relative;
overflow: hidden;
}
#project-section .project-gallery .single-img .opacity {
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background: rgba(215,67,77,0.9);
opacity: 0;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
#project-section .project-gallery .single-img .opacity .border-shape {
position: absolute;
top:20px;
left:20px;
right: 20px;
bottom: 20px;
border: 1px solid #fff;
text-align: center;
}
#project-section .project-gallery .single-img .opacity h6 a {
color:#fff;
}
#project-section .project-gallery .single-img .opacity ul li {
display: inline-block;
color: #fff;
margin-top: 8px;
}
#project-section .project-gallery .single-img .opacity .border-shape>div {
display: table;
width: 100%;
height: 100%;
}
#project-section .project-gallery .single-img .opacity .border-shape>div>div {
display: table-cell;
vertical-align: middle;
}
#project-section .project-gallery .single-img .opacity h6 a {
-webkit-transform: translate3D(0,-100px,0);
-moz-transform: translate3D(0,-100px,0);
-ms-transform: translate3D(0,-100px,0);
-o-transform: translate3D(0,-100px,0);
transform: translate3D(0,-100px,0);
}
#project-section .project-gallery .single-img .opacity ul {
-webkit-transform: translate3D(0,100px,0);
-moz-transform: translate3D(0,100px,0);
-ms-transform: translate3D(0,100px,0);
-o-transform: translate3D(0,100px,0);
transform: translate3D(0,100px,0);
}
#project-section .project-gallery .single-img .opacity ul,
#project-section .project-gallery .single-img .opacity h6 a {
opacity: 0;
-webkit-transition-delay: 0.3s; /* Safari */
transition-delay: 0.3s;
}
#project-section .project-gallery .single-img:hover .opacity {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#project-section .project-gallery .single-img img,
#team-section .team-member-wrapper .single-team-member .img img,
#skill-section .img img,#blog-section .single-news-item .img img {
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
#project-section .project-gallery .single-img:hover img,
#team-section .team-member-wrapper .single-team-member:hover .img img,
#skill-section:hover .img img,#blog-section .single-news-item:hover .img img {
-webkit-transform: scale3d(1.15,1.15,1);
-moz-transform: scale3d(1.15,1.15,1);
-ms-transform: scale3d(1.15,1.15,1);
-o-transform: scale3d(1.15,1.15,1);
transform: scale3d(1.15,1.15,1);
}
#project-section .project-gallery .single-img:hover .opacity ul,
#project-section .project-gallery .single-img:hover .opacity h6 a {
opacity: 1;
-webkit-transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-ms-transform: translate3D(0,0,0);
-o-transform: translate3D(0,0,0);
transform: translate3D(0,0,0);
}
/***
====================================================================
Page Middle Banner
====================================================================
***/
.page-middle-banner {
background: url(../images/home/1.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
margin-top: 70px;
}
.page-middle-banner .opacity {
background: rgba(0,0,0,0.8);
text-align: center;
padding: 134px 0 137px 0;
}
.page-middle-banner .opacity h3 {
color: #fff;
margin-bottom: 25px;
}
.page-middle-banner .opacity a {
width: 200px;
line-height: 45px;
color:#fff;
text-transform: uppercase;
font-weight: 700;
border-width:1px;
}
/***
====================================================================
Team Section
====================================================================
***/
#team-section .team-member-wrapper {
margin: 60px 0 0 0;
}
#team-section .team-member-wrapper .float-left {
width: 33.333333333%;
padding: 0 15px;
overflow: hidden;
margin-bottom: 30px;
}
#team-section .team-member-wrapper .single-team-member,
#team-section .team-member-wrapper .single-team-member .img {
overflow: hidden;
position: relative;
text-align: center;
}
#team-section .team-member-wrapper .single-team-member .img .opacity {
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background: rgba(230,230,230,0.9);
padding: 55px 0 20px 0;
opacity: 0;
-webkit-transform: scale(1,0);
-moz-transform: scale(1,0);
-ms-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
-ms-transform-origin: 0% 0%; /* IE 9 */
-webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
transform-origin: 0% 0%;
}
#team-section .team-member-wrapper .single-team-member .img .opacity h4,
#team-section .team-member-wrapper .single-team-member .img .opacity span {
color:#696f78;
text-transform: capitalize;
}
#team-section .team-member-wrapper .single-team-member .img .opacity h4 {
line-height: 40px;
padding: 0 18px;
border-width: 1px;
display: inline-block;
}
#team-section .team-member-wrapper .single-team-member .img .opacity span {
font-weight: 700;
font-size: 18px;
display: block;
margin: 22px 0 15px 0;
}
#team-section .team-member-wrapper .single-team-member .img .opacity p {
color: #373a3f;
padding: 0 40px;
}
#team-section .team-member-wrapper .single-team-member .img .opacity h4,
#team-section .team-member-wrapper .single-team-member .img .opacity span,
#team-section .team-member-wrapper .single-team-member .img .opacity p {
opacity: 0;
-webkit-transition-delay: 0.2s; /* Safari */
transition-delay: 0.2s;
}
#team-section .team-member-wrapper .single-team-member:hover .img .opacity {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#team-section .team-member-wrapper .single-team-member:hover .img .opacity h4,
#team-section .team-member-wrapper .single-team-member:hover .img .opacity span,
#team-section .team-member-wrapper .single-team-member:hover .img .opacity p {
opacity: 1;
}
#team-section .team-member-wrapper .single-team-member .member-name {
background: #e6e6e6;
overflow: hidden;
position: relative;
min-height: 70px;
}
#team-section .team-member-wrapper .single-team-member .member-name h6 {
text-transform: capitalize;
color:#696f78;
margin-top: 12px;
}
#team-section .team-member-wrapper .single-team-member .member-name p {
color:#373a3f;
margin: 5px 0 8px 0;
}
#team-section .team-member-wrapper .single-team-member:hover .member-name h6,
#team-section .team-member-wrapper .single-team-member:hover .member-name p {
visibility: hidden;
-webkit-transform: translate3D(0,-100px,0);
-moz-transform: translate3D(0,-100px,0);
-ms-transform: translate3D(0,-100px,0);
-o-transform: translate3D(0,-100px,0);
transform: translate3D(0,-100px,0);
}
#team-section .team-member-wrapper .single-team-member .member-name ul li {
display: inline-block;
margin-top: 13px;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li a {
width: 47px;
line-height: 45px;
font-size: 18px;
margin: 0 7px;
border:1px solid transparent;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(1) a,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(2) a {
color: #677fb5;
border-color:#677fb5;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(2) a,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(3) a {
color: #70c2e9;
border-color:#70c2e9;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(3) a,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(4) a {
color: #d8545d;
border-color:#d8545d;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(4) a,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(5) a {
color: #007ab9;
border-color:#007ab9;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(1) a:hover,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(2) a:hover {
background: #677fb5;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(2) a:hover,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(3) a:hover {
background: #70c2e9;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(3) a:hover,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(4) a:hover {
background: #d8545d;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li:nth-child(4) a:hover,
.blog-details-post-wrapper .post-share-area .share-icon li:nth-child(5) a:hover {
background: #007ab9;
}
#team-section .team-member-wrapper .single-team-member .member-name ul li a:hover {
color:#fff !important;
}
#team-section .team-member-wrapper .single-team-member .member-name ul {
position: absolute;
width: 100%;
top:0;
left: 0;
-webkit-transform: translate3D(0,100px,0);
-moz-transform: translate3D(0,100px,0);
-ms-transform: translate3D(0,100px,0);
-o-transform: translate3D(0,100px,0);
transform: translate3D(0,100px,0);
}
#team-section .team-member-wrapper .single-team-member:hover .member-name ul {
-webkit-transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-ms-transform: translate3D(0,0,0);
-o-transform: translate3D(0,0,0);
transform: translate3D(0,0,0);
}
/***
====================================================================
Skill Section
====================================================================
***/
#skill-section {
background: #232a34;
margin-top: 70px;
}
#skill-section .img {
overflow: hidden;
}
#skill-section:hover .img img {
opacity: 0.6;
}
.habilidades_contenedor {
width:100%;
margin: 125px 0 0 0;
}
#skill-section .codeconSkillbar .codeconSkillArea {
font-weight: 700;
font-size: 15px;
color:#fff;
margin-bottom: 15px;
float: none;
margin: 0;
}
#skill-section .codeconSkillbar {
box-shadow: none;
height:30px;
width:100%;
background: #fff;
border-radius: 0;
overflow: visible;
position: relative;
margin: 0 0 38px 0;
}
#skill-section .codeconSkillbar .skill-text {
position: absolute;
top:-29px;
left:0;
}
#skill-section .codeconSkillbar .skillBar {
box-shadow: none;
height: 100%;
}
#skill-section .codeconSkillbar .PercentText {
font-size: 14px;
font-weight: 700;
color: #fff;
position: absolute;
top:-39px;
left:98%;
padding: 0;
float:none;
}
/***
====================================================================
Our Client
====================================================================
***/
#our-client .client-slider {
text-align: center;
margin:58px 0 50px 0;
}
#our-client .client-slider img {
margin: 0 auto;
}
#our-client .client-slider p {
font-size: 18px;
line-height: 28px;
color:#343434;
width: 80%;
margin: 33px auto 24px auto;
}
#our-client .client-slider h6 {
text-transform: capitalize;
margin-bottom: 45px;
}
#our-client .owl-theme .owl-dots .owl-dot span {
width: 13px;
height: 13px;
background: #fff;
border: 1px solid#9d9f9f;
margin: 0 5px;
}
/***
====================================================================
Pricing Section
====================================================================
***/
#pricing-section {
padding: 100px 0 100px 0;
background: #f3f3f3;
margin-top: 45px;
}
#pricing-section .single-price-table {
display: block;
background: #fff;
border:1px solid #dfdfdf;
text-align: center;
padding: 28px 0 22px 0;
}
#pricing-section .single-price-table p {
margin: 4px 0 20px 0;
}
#pricing-section .single-price-table strong {
font-weight: 700;
font-size: 24px;
color:#fff;
display: block;
padding: 23px 0;
margin-bottom: 30px;
}
#pricing-section .single-price-table strong span {
font-size: 14px;
vertical-align: middle;
}
#pricing-section .single-price-table strong.color1 {
background: #d6973d;
}
#pricing-section .single-price-table strong.color2 {
background: #375099;
}
#pricing-section .single-price-table strong.color3 {
background: #179680;
}
#pricing-section .single-price-table ul li {
line-height: 45px;
}
#pricing-section .single-price-table ul li:nth-child(odd) {
background: #f7f8f4;
}
#pricing-section .single-price-table a {
width: 150px;
line-height: 48px;
color:#fff;
text-transform: uppercase;
font-weight: 700;
border-width: 1px;
margin-top: 22px;
}
#pricing-section .single-price-table a:hover {
background: #fff;
}
/***
====================================================================
Blog Section
====================================================================
***/
#blog-section .single-news-item .img {
overflow: hidden;
position: relative;
}
#blog-section .single-news-item {
margin-top: 55px;
}
#blog-section .single-news-item .img a {
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
text-align: center;
font-size: 28px;
opacity: 0;
visibility: hidden;
border-radius: 50%;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
#blog-section .single-news-item .img a i {
position: relative;
top:50%;
display: block;
margin-top: -14px;
}
#blog-section .single-news-item:hover .img a {
opacity: 1;
visibility: visible;
border-radius: 0;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#blog-section .single-news-item .post h6 a {
display: block;
line-height: 26px;
text-transform: none;
color:#292929;
margin: 40px 0 15px 0;
}
#blog-section .single-news-item .post>a {
color: #292929;
font-size: 15px;
margin-bottom: 18px;
}
#blog-section .single-news-item .post p a {
color: #292929;
}
/***
====================================================================
Partner Section
====================================================================
***/
#partner-section {
margin: 100px 0 0 0;
background: #f9f9f9;
padding: 50px 0;
}
#partner-section .item {
border:1px solid #dfdfdf;
height: 118px;
padding-top: 22px;
}
#partner-section .item img {
margin: 0 auto;
}
/***
====================================================================
Contact Section
====================================================================
***/
#contact-section .contact-address-content h2 {
margin: 95px 0 35px 0;
}
#contact-section .contact-address-content .left-side ul {
margin-top: 70px;
}
#contact-section .contact-address-content .left-side ul li{
position: relative;
padding-left: 85px;
margin-bottom: 50px;
}
#contact-section .contact-address-content .left-side ul li h6 {
font-size: 14px;
margin-bottom: 8px;
}
#contact-section .contact-address-content .left-side ul li .icon {
width: 60px;
height: 60px;
border-width: 1px;
position: absolute;
left:0;
top:-9px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 30px;
}
#contact-section .contact-address-content .left-side ul li:hover .icon {
background: #fff;
}
#contact-section .contact-address-content #map {
width: 100%;
height: 500px;
}
#contact-section .send-message {
padding: 0 15px;
}
#contact-section .send-message h2 {
margin: 50px 0 40px 0;
}
#contact-section .send-message .single-input {
margin-bottom: 20px;
height: 50px;
}
#contact-section .send-message .single-input input,
#contact-section .send-message form textarea {
width: 100%;
height: 100%;
border:1px solid #dfdfdf;
padding: 0 15px;
}
#contact-section .send-message form textarea {
height: 260px;
max-width: 100%;
max-height: 260px;
margin-bottom: 25px;
padding: 20px 15px;
}
#contact-section .send-message .single-input input:focus,
#contact-section .send-message form textarea:focus {
border-color: #424040;
}
#contact-section .send-message form button {
width: 140px;
line-height: 40px;
text-align: center;
color:#fff;
text-transform: uppercase;
border-width: 1px;
}
#contact-section .send-message form button:hover {
background: #fff;
}
/***
====================================================================
Conatct Form Activation
====================================================================
***/
.alert-wrapper {
display: none;
position: fixed;
width: 100%;
height:100%;
background: rgba(0,0,0,0.6);
top: 0;
left: 0;
z-index: 9999999;
}
#success,
#error {
position: relative;
width:500px;
height: 100px;
top: calc(50% - 50px);
left:calc(50% - 250px);
background: rgba(0,0,0,0.8);
text-align: center;
}
#success .wrapper,
#error .wrapper {
display: table;
width:100%;
height: 100%;
}
#success .wrapper p,
#error .wrapper p{
display: table-cell;
vertical-align: middle;
letter-spacing: 1px;
}
#success {
color: #57D1C9;
}
#error {
color: #C9182B;
}
#error button,
#success button {
color:#fff;
width:40px;
height:40px;
line-height: 20px;
background: transparent;
border-radius: 50%;
position: absolute;
top: -20px;
right: -20px;
font-size: 20px;
}
.form-validation label.error {
display: none !important;
}
.form-validation input.error,
.form-validation textarea.error {
border:1px solid #f03838 !important;
}
/***
====================================================================
Footer
====================================================================
***/
footer {
margin: 100px 0 0 0;
background: #1e1e1e;
padding: 60px 0 25px 0;
text-align: center;
}
footer .logo {
margin-bottom: 20px;
}
footer ul li {
display: inline-block;
margin-top: 13px;
}
footer ul li a {
width: 45px;
line-height: 45px;
font-size: 18px;
margin: 0 7px;
border:1px solid transparent;
}
footer ul li:nth-child(1) a {
color: #677fb5;
border-color:#677fb5;
}
footer ul li:nth-child(2) a {
color: #70c2e9;
border-color:#70c2e9;
}
footer ul li:nth-child(3) a {
color: #d8545d;
border-color:#d8545d;
}
footer ul li:nth-child(4) a {
color: #007ab9;
border-color:#007ab9;
}
footer ul li:nth-child(5) a {
color: #5ecbf3;
border-color:#5ecbf3;
}
footer ul li:nth-child(6) a {
color: #ff3ba4;
border-color:#ff3ba4;
}
footer ul li:nth-child(7) a {
color: #e299c2;
border-color:#e299c2;
}
footer ul li:nth-child(8) a {
color: #faaa5e;
border-color:#faaa5e;
}
footer ul li:nth-child(1) a:hover {
background: #677fb5;
}
footer ul li:nth-child(2) a:hover {
background: #70c2e9;
}
footer ul li:nth-child(3) a:hover {
background: #d8545d;
}
footer ul li:nth-child(4) a:hover {
background: #007ab9;
}
footer ul li:nth-child(5) a:hover {
background: #5ecbf3;
}
footer ul li:nth-child(6) a:hover {
background: #ff3ba4;
}
footer ul li:nth-child(7) a:hover {
background: #e299c2;
}
footer ul li:nth-child(8) a:hover {
background: #faaa5e;
}
footer ul li a:hover {
color:#fff !important;
}
footer p {
color:#fff;
font-size: 15px;
margin-top: 50px;
}
/***
====================================================================
Inner Page Banner
====================================================================
***/
.inner-page-banner {
background: url(../images/inner-page/1.jpg) no-repeat center;
background-size: cover;
text-align: center;
margin-bottom: 100px;
}
.inner-page-banner .opacity {
height: 100%;
background:rgba(0,0,0,0.5);
padding: 146px 0 70px 0;
}
.inner-page-banner .opacity h2 {
color:#fff;
margin-bottom: 18px;
}
.inner-page-banner .opacity ul li {
display: inline-block;
margin: 0 3px;
font-size: 18px;
color: #fff;
}
.inner-page-banner .opacity ul li a {
color:#fff;
}
/***
====================================================================
Blog Aside bar
====================================================================
***/
.blog-details-page aside .sidebar-search-box {
height: 60px;
margin-bottom: 55px;
position: relative;
}
.blog-details-page aside .sidebar-search-box input {
width: 100%;
height: 100%;
border:1px solid #dfdfdf;
padding: 0 67px 0 20px;
}
.blog-details-page aside .sidebar-search-box button {
width: 65px;
height: 100%;
position: absolute;
top:0;
right: 0;
color:#fff;
font-size: 18px;
}
.blog-details-page aside .sidebar-news-list ul li a,
.blog-details-page aside .sidebar-archives ul li a {
color:#6f6f6f;
margin-bottom: 12px;
}
.blog-details-page aside .sidebar-news-list ul li a i,
.blog-details-page aside .sidebar-archives ul li a i {
margin-right: 8px;
}
.blog-details-page aside .sidebar-news-list ul,
.blog-details-page aside .sidebar-archives ul {
margin: 32px 0 40px 0;
}
#blog-calendar {
margin: 12px 0 60px 0;
}
#blog-calendar .monthly-day, .monthly-day-blank {
box-shadow: none;
text-align: center;
}
#blog-calendar .monthly-day-title-wrap {
padding-bottom: 15px;
}
.monthly-reset {
display: none;
}
.monthly-header-title {
font-size: 15px;
text-transform: capitalize;
}
.monthly-header {
padding: 20px;
height: 60px;
}
.monthly-day-pick > .monthly-day-number {
font-size: 15px;
font-weight: normal;
}
.recent-single-post .post {
width: 81%;
padding-left: 20px;
}
.recent-single-post .post a {
color: #292929;
margin-bottom: 4px;
}
.sidebar-recent-post .recent-single-post {
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom:1px solid #dfdfdf;
}
.sidebar-recent-post h6,
.sidebar-tags h6 {
margin-bottom: 35px;
}
.sidebar-recent-post {
margin-bottom: 40px;
}
.sidebar-recent-post .recent-single-post:last-child {
border: none;
}
.sidebar-tags ul li {
display: inline-block;
margin: 0 8px 10px 0;
}
.sidebar-tags ul li a {
color:#6f6f6f;
line-height: 35px;
padding: 0 12px;
border: 1px solid #dfdfdf;
border-radius: 5px;
}
/***
====================================================================
Blog Details Post
====================================================================
***/
.blog-details-post-wrapper .post-heading h4 {
margin: 53px 0 13px 0;
text-transform: none;
}
.blog-details-post-wrapper .post-heading {
padding-bottom: 25px;
border-bottom: 1px solid #dfdfdf;
margin-bottom: 25px;
}
.blog-details-post-wrapper>h6 {
margin: 23px 0 28px 0;
text-transform: none;
}
.blog-details-post-wrapper>.row {
margin-top: 35px;
margin-bottom: 25px;
}
.blog-details-post-wrapper>.row p {
font-style: italic;
color:#292929;
padding-left: 18px;
}
.blog-details-post-wrapper>.row p i {
color:#9d9f9f;
margin: 0 4px;
}
.blog-details-post-wrapper>.row p i.fa-quote-left {
margin-left: -16px;
}
.blog-details-post-wrapper .list-img-wrapper {
margin: 34px 0 40px 0;
}
.blog-details-post-wrapper .list-img-wrapper img {
width: 48%;
}
.blog-details-post-wrapper .list-img-wrapper ul {
padding-left: 30px;
}
.blog-details-post-wrapper .list-img-wrapper ul li a {
color:#292929;
margin-bottom: 12px;
}
.blog-details-post-wrapper .list-img-wrapper ul li a i {
margin-right: 8px;
}
.blog-details-post-wrapper .post-share-area .share li {
display: inline-block;
margin-top: 5px;
}
.blog-details-post-wrapper .post-share-area .share li a {
color:#6f6f6f;
}
.blog-details-post-wrapper .post-share-area {
padding-bottom: 30px;
border-bottom: 1px solid #dfdfdf;
}
.blog-details-post-wrapper .post-share-area .share-icon li {
display: inline-block;
text-align: center;
}
.blog-details-post-wrapper .post-share-area .share-icon li a {
width: 32px;
line-height: 30px;
margin: 0 5px;
border:1px solid transparent;
}
.blog-details-post-wrapper .post-share-area .share-icon li:first-child {
margin-right: 15px;
}
.blog-details-post-wrapper .post-share-area .share-icon li a:hover {
color:#fff;
}
.blog-details-post-wrapper .comment-area h4 {
margin: 55px 0 42px 0;
padding-bottom: 32px;
border-bottom: 1px solid #dfdfdf;
}
.blog-details-post-wrapper .comment-area .single-comment {
padding-bottom: 30px;
border-bottom: 1px solid #dfdfdf;
margin-bottom: 30px;
}
.blog-details-post-wrapper .comment-area .single-comment.reply-comment {
margin-left: 100px;
}
.blog-details-post-wrapper .comment-area .single-comment img {
width: 55px;
height: 55px;
border-radius: 50%;
}
.blog-details-post-wrapper .comment-area .single-comment .comment {
width: 90%;
width: calc(100% - 60px);
padding-left: 30px;
}
.blog-details-post-wrapper .comment-area .single-comment .comment h6 {
font-size: 14px;
text-transform: none;
margin-bottom: 5px;
}
.blog-details-post-wrapper .comment-area .single-comment .comment p {
margin: 17px 0 22px 0;
}
.blog-details-post-wrapper .comment-area .single-comment .comment button {
width: 70px;
line-height: 30px;
color:#292929;
background:#dfdfdf;
text-transform: uppercase;
font-size: 13px;
}
.blog-details-post-wrapper .comment-area .single-comment .comment button:hover {
color: #fff;
}
.blog-details-post-wrapper .post-comment h4 {
margin: 70px 0 40px 0;
}
.blog-details-post-wrapper .post-comment span {
text-transform: uppercase;
display: block;
}
.blog-details-post-wrapper .post-comment input {
width: 100%;
height: 40px;
border: 1px solid #dfdfdf;
padding: 0 15px;
}
.blog-details-post-wrapper .post-comment textarea {
width: 100%;
max-width: 100%;
height: 170px;
border: 1px solid #dfdfdf;
padding: 20px 15px;
}
.blog-details-post-wrapper .post-comment .single-input {
margin: 10px 0 25px 0;
}
.blog-details-post-wrapper .post-comment form button {
width: 150px;
line-height: 40px;
text-transform: uppercase;
color:#fff;
border-width: 1px;
border-radius: 15px;
}
.blog-details-post-wrapper .post-comment form button:hover {
background:#fff;
}
"use strict";
function goMap () {
if ($('#map').length) {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.925372, lng: -74.276544},
zoom: 12,
scrollwheel: false,
styles: [ {
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
]
});
// To add the marker to the map
var image = 'images/logo/map.png';
var beachMarker = new google.maps.Marker({
position: {lat: 40.925372, lng: -74.276544},
map: map,
icon: image,
title:"BipPro Office!",
infoWindow: {
content: '<h6>Bizpro office</h6> <p>Gazipur,Dhaka</p>'
}
});
};
};
// Dom Ready Function
jQuery(document).on('ready', function () {
(function ($) {
// add your functions
goMap()
})(jQuery);
});
"use strict";
// Prealoder
function prealoader () {
if ($('#preloader_1').length) {
$('#preloader_1').fadeOut(); // will first fade out the loading animation
$('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
};
}
// placeholder remove
function removePlaceholder () {
if ($("input,textarea").length) {
$("input,textarea").each(
function(){
$(this).data('holder',$(this).attr('placeholder'));
$(this).on('focusin', function() {
$(this).attr('placeholder','');
});
$(this).on('focusout', function() {
$(this).attr('placeholder',$(this).data('holder'));
});
});
}
}
// Scroll to top
function scrollToTop () {
if ($('.scroll-top').length) {
//Check to see if the window is top if not then display button
$(window).on('scroll', function (){
if ($(this).scrollTop() > 200) {
$('.scroll-top').fadeIn();
} else {
$('.scroll-top').fadeOut();
}
});
//Click event to scroll to top
$('.scroll-top').on('click', function() {
$('html, body').animate({scrollTop : 0},1500);
return false;
});
}
}
// Theme-banner Video slider
function BannerVideoSlider () {
var banner = $("#main-banner-slider.video-slider");
if (banner.length) {
banner.revolution({
sliderType:"standard",
sliderLayout:"auto",
loops:false,
delay:10000,
navigation: {
arrows: {
style: "hermes",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '<div class="tp-arr-allwrapper"> <div class="tp-arr-imgholder"></div> <div class="tp-arr-titleholder">{{title}}</div> </div>',
left: {
h_align: "left",
v_align: "center",
h_offset: 0,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 0,
v_offset: 0
}
},
bullets: {
enable: false,
}
},
responsiveLevels:[2220,1183,975,751],
gridwidth:[1170,970,770,350],
gridheight:[850,850,850,700],
shadow:0,
spinner:"off",
autoHeight:"off",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
disableFocusListener:false,
}
});
};
}
//Add OnepageNav / Sidebar
function onePageFixedNav() {
if($('body').length){
// Add scrollspy to
$('body').scrollspy({target: ".theme-main-header", offset: 70});
// Add smooth scrolling on all links inside the one-page-menu
$(".one-page-menu li a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
}
}
// Mixitup gallery
function mixitupGallery () {
var mixItem = $(".project-gallery");
if (mixItem.length) {
mixItem .mixItUp()
};
}
// Progress Bar
function bootstrapProgress () {
var smartskill = $ ('.skills');
if(smartskill.length) {
smartskill.skill();
}
}
// Client SLider
function clientSlider () {
var cSldier = $(".client-slider");
if(cSldier.length) {
cSldier.owlCarousel({
animateOut: 'slideOutLeft',
loop:true,
nav:false,
navText:false,
dots:true,
autoplay:true,
autoplayTimeout:7000,
autoplaySpeed:5500,
lazyLoad:true,
items:1,
})
}
}
// Partner Logo Footer
function partnersLogo () {
var logoSlide = $("#partner_logo");
if(logoSlide.length) {
logoSlide.owlCarousel({
loop:true,
margin:-1,
nav:false,
dots:false,
autoplay:true,
autoplayTimeout:2000,
autoplaySpeed:1000,
lazyLoad:true,
singleItem:true,
responsive:{
0:{
items:1
},
550:{
items:2
},
751:{
items:3
},
1001:{
items:5
}
}
})
}
}
//Contact Form Validation
function contactFormValidation () {
var activeForm = $('.form-validation');
if(activeForm.length){
activeForm.validate({ // initialize the plugin
rules: {
Fname: {
required: true
},
Lname: {
required: true
},
email: {
required: true,
email: true
},
sub: {
required: true
},
message: {
required: true
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function() {
$('.form-validation :input').attr('disabled', 'disabled');
activeForm.fadeTo( "slow", 1, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#alert-success').fadeIn();
});
},
error: function() {
activeForm.fadeTo( "slow", 1, function() {
$('#alert-error').fadeIn();
});
}
});
}
});
}
}
// Close suddess Alret
function closeSuccessAlert () {
var closeButton = $ (".closeAlert");
if(closeButton.length) {
closeButton.on('click', function(){
$(".alert-wrapper").fadeOut();
});
closeButton.on('click', function(){
$(".alert-wrapper").fadeOut();
})
}
}
// Sticky header
function stickyHeader () {
if ($('.theme-main-header').length) {
var sticky = $('.theme-main-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) sticky.addClass('fixed');
else sticky.removeClass('fixed');
};
}
// Calendar
function cladendar () {
var calender = $('#blog-calendar');
if(calender.length) {
calender.monthly();
}
}
// Tooggle Home page menu click Function
function subMenuExpend () {
if($(".theme-main-header").length) {
$('.theme-main-header li.dropdown-holder').append(function () {
return '<i class="fa fa-angle-down"></i>';
});
$('.theme-main-header li.dropdown-holder .fa').on('click', function () {
$(this).parent('li').children('ul').slideToggle();
});
}
}
// DOM ready function
jQuery(document).on('ready', function() {
(function ($) {
removePlaceholder ();
scrollToTop ();
BannerVideoSlider ();
onePageFixedNav();
mixitupGallery ();
bootstrapProgress ();
clientSlider ();
partnersLogo ();
contactFormValidation ();
closeSuccessAlert ();
cladendar ();
subMenuExpend ()
})(jQuery);
});
// Window scroll function
jQuery(window).on('scroll', function () {
(function ($) {
stickyHeader ()
})(jQuery);
});
// Window load function
jQuery(window).on('load', function () {
(function ($) {
prealoader ()
})(jQuery);
});
