Triangle is a creative multipurpose responsive html template. This amazing template is suitable for any kind of small business or creative farms. Creative design, stunning animations, single and multi-color variations are the main features of this template.
Open sendemail.php file using any text editor like sublime text or notepad++ and look for the line email@email.com.
Just replace that email with your one and save the file.
<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Thank you for contact us. As early as possible we will contact you '
);
$name = @trim(stripslashes($_POST['name']));
$email = @trim(stripslashes($_POST['email']));
$subject = @trim(stripslashes($_POST['subject']));
$message = @trim(stripslashes($_POST['message']));
$email_from = $email;
$email_to = 'email@email.com';//replace with your email
$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;
$success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
echo json_encode($status);
die;
In main.js file under js folder just look for the latitude and logitude value. Replace that values using correct one and save the file to see your address.
if( $('#gmap').length ) {
var map;
map = new GMaps({
el: '#gmap',
lat: 43.04446,
lng: -76.130791,
scrollwheel:false,
zoom: 16,
zoomControl : false,
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false,
clickable: false
});
map.addMarker({
lat: 43.04446,
lng: -76.130791,
animation: google.maps.Animation.DROP,
verticalAlign: 'bottom',
horizontalAlign: 'center',
backgroundColor: '#3e8bff',
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Triangle</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="col-sm-12 overflow">
<div class="social-icons pull-right">
<ul class="nav nav-pills">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-dribbble"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<h1><img src="images/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">Pages <i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="aboutus.html">About</a></li>
<li><a href="aboutus2.html">About 2</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="contact2.html">Contact us 2</a></li>
<li><a href="404.html">404 error</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</li>
<li class="dropdown"><a href="blog.html">Blog <i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="blog.html">Blog Default</a></li>
<li><a href="blogtwo.html">Timeline Blog</a></li>
<li><a href="blogone.html">2 Columns + Right Sidebar</a></li>
<li><a href="blogthree.html">1 Column + Left Sidebar</a></li>
<li><a href="blogfour.html">Blog Masonary</a></li>
<li><a href="blogdetails.html">Blog Details</a></li>
</ul>
</li>
<li class="dropdown"><a href="portfolio.html">Portfolio <i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="portfolio.html">Portfolio Default</a></li>
<li><a href="portfoliofour.html">Isotope 3 Columns + Right Sidebar</a></li>
<li><a href="portfolioone.html">3 Columns + Right Sidebar</a></li>
<li><a href="portfoliotwo.html">3 Columns + Left Sidebar</a></li>
<li><a href="portfoliothree.html">2 Columns</a></li>
<li><a href="portfolio-details.html">Portfolio Details</a></li>
</ul>
</li>
<li><a href="shortcodes.html ">Shortcodes</a></li>
</ul>
</div>
<div class="search">
<form role="form">
<i class="fa fa-search"></i>
<div class="field-toggle">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</div>
</form>
</div>
</div>
</div>
</header>
<!--/#header-->
<section id="home-slider">
<div class="container">
<div class="main-slider">
<div class="slide-text">
<h1>We Are Creative Nerds</h1>
<p>Boudin doner frankfurter pig. Cow shank bresaola pork loin tri-tip tongue venison pork belly meatloaf short loin landjaeger biltong beef ribs shankle chicken andouille.</p>
<a href="#" class="btn btn-common">SIGN UP</a>
</div>
<img src="images/home/slider/slide1/house.png" class="img-responsive slider-house" alt="slider image">
<img src="images/home/slider/slide1/circle1.png" class="slider-circle1" alt="slider image">
<img src="images/home/slider/slide1/circle2.png" class="slider-circle2" alt="slider image">
<img src="images/home/slider/slide1/cloud1.png" class="slider-cloud1" alt="slider image">
<img src="images/home/slider/slide1/cloud2.png" class="slider-cloud2" alt="slider image">
<img src="images/home/slider/slide1/cloud3.png" class="slider-cloud3" alt="slider image">
<img src="images/home/slider/slide1/sun.png" class="slider-sun" alt="slider image">
<img src="images/home/cycle.png" class="slider-cycle" alt="">
</div>
</div>
<div class="preloader"><i class="fa fa-sun-o fa-spin"></i></div>
</section>
<!--/#home-slider-->
<section id="services">
<div class="container">
<div class="row">
<div class="col-sm-4 text-center padding wow fadeIn" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="single-service">
<div class="wow scaleIn" data-wow-duration="500ms" data-wow-delay="300ms">
<img src="images/home/icon1.png" alt="">
</div>
<h2>Incredibly Responsive</h2>
<p>Ground round tenderloin flank shank ribeye. Hamkevin meatball swine. Cow shankle beef sirloin chicken ground round.</p>
</div>
</div>
<div class="col-sm-4 text-center padding wow fadeIn" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="single-service">
<div class="wow scaleIn" data-wow-duration="500ms" data-wow-delay="600ms">
<img src="images/home/icon2.png" alt="">
</div>
<h2>Superior Typography</h2>
<p>Hamburger ribeye drumstick turkey, strip steak sausage ground round shank pastrami beef brisket pancetta venison.</p>
</div>
</div>
<div class="col-sm-4 text-center padding wow fadeIn" data-wow-duration="1000ms" data-wow-delay="900ms">
<div class="single-service">
<div class="wow scaleIn" data-wow-duration="500ms" data-wow-delay="900ms">
<img src="images/home/icon3.png" alt="">
</div>
<h2>Swift Page Builder</h2>
<p>Venison tongue, salami corned beef ball tip meatloaf bacon. Fatback pork belly bresaola tenderloin bone pork kevin shankle.</p>
</div>
</div>
</div>
</div>
</section>
<!--/#services-->
<section id="action" class="responsive">
<div class="vertical-center">
<div class="container">
<div class="row">
<div class="action take-tour">
<div class="col-sm-7 wow fadeInLeft" data-wow-duration="500ms" data-wow-delay="300ms">
<h1 class="title">Triangle Corporate Template</h1>
<p>A responsive, retina-ready & wide multipurpose template.</p>
</div>
<div class="col-sm-5 text-center wow fadeInRight" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="tour-button">
<a href="#" class="btn btn-common">TAKE THE TOUR</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#action-->
<section id="features">
<div class="container">
<div class="row">
<div class="single-features">
<div class="col-sm-5 wow fadeInLeft" data-wow-duration="500ms" data-wow-delay="300ms">
<img src="images/home/image1.png" class="img-responsive" alt="">
</div>
<div class="col-sm-6 wow fadeInRight" data-wow-duration="500ms" data-wow-delay="300ms">
<h2>Experienced and Enthusiastic</h2>
<P>Pork belly leberkas cow short ribs capicola pork loin. Doner fatback frankfurter jerky meatball pastrami bacon tail sausage. Turkey fatback ball tip, tri-tip tenderloin drumstick salami strip steak.</P>
</div>
</div>
<div class="single-features">
<div class="col-sm-6 col-sm-offset-1 align-right wow fadeInLeft" data-wow-duration="500ms" data-wow-delay="300ms">
<h2>Built for the Responsive Web</h2>
<P>Mollit eiusmod id chuck turducken laboris meatloaf pork loin tenderloin swine. Pancetta excepteur fugiat strip steak tri-tip. Swine salami eiusmod sint, ex id venison non. Fugiat ea jowl cillum meatloaf.</P>
</div>
<div class="col-sm-5 wow fadeInRight" data-wow-duration="500ms" data-wow-delay="300ms">
<img src="images/home/image2.png" class="img-responsive" alt="">
</div>
</div>
<div class="single-features">
<div class="col-sm-5 wow fadeInLeft" data-wow-duration="500ms" data-wow-delay="300ms">
<img src="images/home/image3.png" class="img-responsive" alt="">
</div>
<div class="col-sm-6 wow fadeInRight" data-wow-duration="500ms" data-wow-delay="300ms">
<h2>Experienced and Enthusiastic</h2>
<P>Ut officia cupidatat anim excepteur fugiat cillum ea occaecat rump pork chop tempor. Ut tenderloin veniam commodo. Shankle aliquip short ribs, chicken eiusmod exercitation shank landjaeger spare ribs corned beef.</P>
</div>
</div>
</div>
</div>
</section>
<!--/#features-->
<section id="clients">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="clients text-center wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
<p><img src="images/home/clients.png" class="img-responsive" alt=""></p>
<h1 class="title">Happy Clients</h1>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="clients-logo wow fadeIn" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="col-xs-3 col-sm-2">
<a href="#"><img src="images/home/client1.png" class="img-responsive" alt=""></a>
</div>
<div class="col-xs-3 col-sm-2">
<a href="#"><img src="images/home/client2.png" class="img-responsive" alt=""></a>
</div>
<div class="col-xs-3 col-sm-2">
<a href="#"><img src="images/home/client3.png" class="img-responsive" alt=""></a>
</div>
<div class="col-xs-3 col-sm-2">
<a href="#"><img src="images/home/client4.png" class="img-responsive" alt=""></a>
</div>
<div class="col-xs-3 col-sm-2">
<a href="#"><img src="images/home/client5.png" class="img-responsive" alt=""></a>
</div>
<div class="col-xs-3 col-sm-2">
<a href="#"><img src="images/home/client6.png" class="img-responsive" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#clients-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center bottom-separator">
<img src="images/home/under.png" class="img-responsive inline" alt="">
</div>
<div class="col-md-4 col-sm-6">
<div class="testimonial bottom">
<h2>Testimonial</h2>
<div class="media">
<div class="pull-left">
<a href="#"><img src="images/home/profile1.png" alt=""></a>
</div>
<div class="media-body">
<blockquote>Nisi commodo bresaola, leberkas venison eiusmod bacon occaecat labore tail.</blockquote>
<h3><a href="#">- Jhon Kalis</a></h3>
</div>
</div>
<div class="media">
<div class="pull-left">
<a href="#"><img src="images/home/profile2.png" alt=""></a>
</div>
<div class="media-body">
<blockquote>Capicola nisi flank sed minim sunt aliqua rump pancetta leberkas venison eiusmod.</blockquote>
<h3><a href="">- Abraham Josef</a></h3>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="contact-info bottom">
<h2>Contacts</h2>
<address>
E-mail: <a href="mailto:someone@example.com">email@email.com</a> <br>
Phone: +1 (123) 456 7890 <br>
Fax: +1 (123) 456 7891 <br>
</address>
<h2>Address</h2>
<address>
Unit C2, St.Vincent's Trading Est., <br>
Feeder Road, <br>
Bristol, BS2 0UY <br>
United Kingdom <br>
</address>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="contact-form bottom">
<h2>Send a message</h2>
<form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" required="required" placeholder="Email Id">
</div>
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="8" placeholder="Your text here"></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="col-sm-12">
<div class="copyright-text text-center">
<p>© Your Company 2014. All Rights Reserved.</p>
<p>Designed by <a target="_blank" href="http://www.themeum.com">Themeum</a></p>
</div>
</div>
</div>
</div>
</footer>
<!--/#footer-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lightbox.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
jQuery(function($) {'use strict';
//Responsive Nav
$('li.dropdown').find('.fa-angle-down').each(function(){
$(this).on('click', function(){
if( $(window).width() < 768 ) {
$(this).parent().next().slideToggle();
}
return false;
});
});
//Fit Vids
if( $('#video-container').length ) {
$("#video-container").fitVids();
}
//Initiat WOW JS
new WOW().init();
// portfolio filter
$(window).load(function(){
$('.main-slider').addClass('animate-in');
$('.preloader').remove();
//End Preloader
if( $('.masonery_area').length ) {
$('.masonery_area').masonry();//Masonry
}
var $portfolio_selectors = $('.portfolio-filter >li>a');
if($portfolio_selectors.length) {
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector : '.portfolio-item',
layoutMode : 'fitRows'
});
$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({ filter: selector });
return false;
});
}
});
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
// Search
$('.fa-search').on('click', function() {
$('.field-toggle').fadeToggle(200);
});
// Contact form
var form = $('#main-contact-form');
form.submit(function(event){
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: $(this).attr('action'),
beforeSend: function(){
form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
}
}).done(function(data){
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});
// Progress Bar
$.each($('div.progress-bar'),function(){
$(this).css('width', $(this).attr('data-transition')+'%');
});
if( $('#gmap').length ) {
var map;
map = new GMaps({
el: '#gmap',
lat: 43.04446,
lng: -76.130791,
scrollwheel:false,
zoom: 16,
zoomControl : false,
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false,
clickable: false
});
map.addMarker({
lat: 43.04446,
lng: -76.130791,
animation: google.maps.Animation.DROP,
verticalAlign: 'bottom',
horizontalAlign: 'center',
backgroundColor: '#3e8bff',
});
}
});
/*
Theme Name: Triangle
Theme Uri: http://www.themeum.com
Author: Themeum
Author Uri: http://www.themeum.com
Description: Creative Site Template
Version: 1.0
*/
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700);
body {
background: #fff;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 22px;
color: #000;
}
html {
height: 100%;
}
a{
color:#a5732a;
}
a:hover {
outline: none;
text-decoration:none;
color:#dab074;
}
a:focus {
outline:none;
outline-offset: 0;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
ul {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
h1{
color: #686868;
}
h2{
font-size: 24px;
color: #686868;
}
h3{
font-size: 18px;
}
.overflow{
overflow: hidden;
}
.uppercase{
text-transform: uppercase;
}
.btn-common {
font-size: 14px;
color: #797979;
border: 1px solid #dbb075;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding: 10px 25px;
}
#action .col-sm-5{
position: absolute;
top: 0;
height: 100%;
right: 0;
}
.btn-common:hover,
.btn-common:focus{
outline: none;
background: none;
box-shadow: none;
color: #d29948;
}
.align-right{
text-align: right;
}
.inline{
display: inline-block;
}
.padding{
padding: 65px 0;
}
.padding-bottom{
padding-bottom: 65px;
}
.padding-top{
padding-top: 90px;
}
.padding-right{
padding-right: 80px;
}
.padding-left{
padding-left: 80px;
}
.margin-bottom{
margin-bottom: 35px;
}
.carousel-indicators.visible-xs {
height: 20px;
margin: 0;
padding: 0;
position: absolute;
top: -35px;
width: 100%;
left: 0;
}
.carousel-indicators.visible-xs li {
border-color: #D29948;
border-width: 2px;
height: 12px;
margin: 0 5px 0 0;
width: 12px;
}
.carousel-indicators.visible-xs li.active {
background: rgba(210, 153, 72, 0.7);
}
/*************************
*******Header******
**************************/
#header{
margin-bottom: 0;
padding: 30px 0 60px 0;
}
#header .navbar-inverse .container{
position: relative;
}
.search{
position: absolute;
top: 20px;
right: 0;
z-index: 1;
}
.search i{
color: #dbb075;
cursor: pointer;
position: absolute;
right: 10px;
top: 2px;
}
.field-toggle{
position: relative;
top: 30px;
right: 15px;
display: none;
height: 50px;
}
.search-form{
padding-left: 10px;
height: 40px;
font-size: 18px;
color: #818285;
font-weight: 300;
outline: none;
border: 1px solid #dbb075;
margin-top: 20px;
border-radius: 4px;
}
.social-icons ul li{
padding: 0 10px;
}
.social-icons ul li:last-child{
padding-right: 0;
}
.social-icons ul li a{
font-size: 18px;
color: #d3d3d3;
padding: 0;
}
.social-icons ul li a:hover,
.social-icons ul li a:focus{
color:#dbb075;
background: none;
}
#header .navbar {
background: #fff;
border: 0;
margin-bottom: 0;
}
#header .navbar-toggle{
margin-top: 20px;
}
#header .navbar-brand{
padding: 0;
margin-left: 0;
}
#header .navbar-brand h1{
padding: 0;
margin: 0;
}
#header .navbar-nav.navbar-right >li:last-child{
margin-right: 20px;
}
#header .navbar-nav.navbar-right >li a {
color: #000;
font-size: 12px;
padding: 20px;
text-transform: uppercase;
font-weight: 300;
}
#header .navbar-inverse .navbar-nav li.active > a,
#header .navbar-inverse .navbar-nav li.active > a:focus,
#header .navbar-nav.navbar-right li > a:hover,
.navbar-inverse .navbar-nav > .open > a {
background-color: inherit;
border: 0;
color: #d29948;
}
#header .navbar-inverse .navbar-nav li a:hover{
color: #d29948;
}
/*Dropdown menu*/
ul.sub-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
}
#header .navbar-nav li ul.sub-menu li a {
color: #818285;
padding: 5px 0;
font-size: 13px;
display: block;
text-transform: capitalize;
}
#header .navbar-nav li ul.sub-menu li .active{
background: #fef7ee;
color: #d29948;
position: relative;
}
#header .navbar-nav li ul.sub-menu li .active i{
position: absolute;
font-size: 56px;
top: -13px;
color: #dab074;
}
#header .navbar-nav li ul.sub-menu li .active .fa-angle-right{
left: -3px;
}
#header .navbar-nav li ul.sub-menu li .active .fa-angle-left{
right: -3px;
}
#header .navbar-nav li ul.sub-menu li a:hover,
#header .navbar-nav li ul.sub-menu li a:focus{
background: #fef7ee;
color: #d29948;
}
.fa-angle-down{
padding-left: 5px;
}
.scaleIn {
-webkit-animation-name: scaleIn;
animation-name: scaleIn;
}
@-webkit-keyframes scaleIn {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scaleIn {
0% {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
/*************************
*******Footer******
**************************/
#footer {
padding-bottom: 75px;
background-image: url(../images/home/footer.png);
background-repeat: repeat-x;
background-position: bottom;
background-size: contain;
}
#footer h1{
margin-bottom: 65px;
margin-top: 36px;
}
#footer .bottom-separator {
margin-bottom: 60px;
}
#message {
height: 110px;
resize: none;
}
.bottom > h2 {
margin-top: 0;
margin-bottom: 26px;
}
.bottom .media-body h3 {
margin-top: 0;
padding-left: 25px;
}
.bottom .media-body h3 a{
color: #d99c4e;
}
.testimonial .media{
margin-top: 0;
margin-bottom: 25px;
}
.testimonial .media>.pull-left{
margin-right: 25px;
}
.testimonial .media>.pull-left img{
margin-top: 6px;
}
.testimonial .media .media-body blockquote{
padding-left: 25px;
padding-right: 30px;
position: relative;
border-left: 0;
margin-bottom: 0;
}
.testimonial .media .media-body blockquote:before{
position: absolute;
left: 5px;
top: 8px;
content: '"';
font-size: 40px;
color: #d99c4e;
font-family: 'Noto Sans', sans-serif;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Opera, Chrome, and Safari */
line-height: 0;
}
.testimonial .media .media-body blockquote:after{
position: absolute;
right: 30px;
bottom: 14px;
content: '"';
font-size: 40px;
color: #d99c4e;
font-family: 'Noto Sans', sans-serif;
line-height: 0;
}
.bottom > address {
line-height: 22px;
margin-bottom: 40px;
}
.form-control {
border: 1px solid #d99c4e;
font-weight: 300;
outline: none;
box-shadow: none;
height: 40px;
}
.form-control:hover,
.form-control:focus{
border-color: #d29948;
outline: none;
box-shadow: none;
}
.btn-submit {
width: 100%;
background-color: #d89b4e;
color: #fff;
font-size: 14px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
border-radius: 3px;
margin-top: 5px;
border-bottom: 3px solid #a56617;
box-shadow: none;
padding: 10px;
}
.btn-submit:hover,
.btn-submit:focus{
color: #fff;
outline: none;
box-shadow: none;
opacity: .8;
}
.copyright-text{
margin-top: 70px;
}
/*************************
*******Home Page******
**************************/
#home-slider {
background: url(../images/home/slider-bg.png) 0 100% repeat-x;
position: relative;
}
#home-slider .main-slider {
position: relative;
height: 450px;
}
#home-slider .slide-text{
position: absolute;
top: 50px;
left: 0;
width: 450px;
}
.animate-in .slide-text {
-webkit-animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
}
#home-slider .slider-house {
position: absolute;
right: 0;
bottom: 0;
}
.animate-in .slider-house {
-webkit-animation: fadeInDown 700ms ease-in-out 200ms both;
animation: fadeInDown 700ms ease-in-out 200ms both;
}
#home-slider .slider-circle1 {
position: absolute;
right: 430px;
bottom: 210px;
}
.animate-in .slider-circle1 {
-webkit-animation: bounceIn 500ms ease-in-out 900ms both;
animation: bounceIn 500ms ease-in-out 900ms both;
}
#home-slider .slider-circle2 {
position: absolute;
right: 420px;
bottom: 245px;
}
.animate-in .slider-circle2 {
-webkit-animation: bounceIn 500ms ease-in-out 1100ms both;
animation: bounceIn 500ms ease-in-out 1100ms both;
}
#home-slider .slider-cloud1 {
position: absolute;
right: 290px;
bottom: 250px;
}
.animate-in .slider-cloud1 {
-webkit-animation: bounceIn 500ms ease-in-out 1300ms both;
animation: bounceIn 500ms ease-in-out 1300ms both;
}
#home-slider .slider-cloud2 {
position: absolute;
right: 375px;
bottom: 330px;
}
.animate-in .slider-cloud2 {
-webkit-animation: bounceIn 500ms ease-in-out 1500ms both;
animation: bounceIn 500ms ease-in-out 1500ms both;
}
#home-slider .slider-cloud3 {
position: absolute;
right: 75px;
bottom: 300px;
}
.animate-in .slider-cloud3 {
-webkit-animation: bounceIn 500ms ease-in-out 1700ms both;
animation: bounceIn 500ms ease-in-out 1700ms both;
}
#home-slider .slider-sun {
position: absolute;
right: 190px;
bottom: 300px;
}
.animate-in .slider-sun {
-webkit-animation: bounceIn 800ms ease-in-out 1900ms both;
animation: bounceIn 800ms ease-in-out 1900ms both;
}
#home-slider .slider-cycle {
position: absolute;
right: 500px;
bottom: 0;
}
.animate-in .slider-cycle {
-webkit-animation: slideInLeft 4000ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
animation: slideInLeft 4000ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
}
#home-slider h1{
margin-top: 70px;
margin-bottom: 25px;
}
#home-slider .btn-common {
margin-top: 20px;
}
#home-slider .preloader {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #fafafa;
text-align: center;
}
#home-slider .preloader > i {
font-size: 48px;
height: 48px;
line-height: 48px;
color: #dbb075;
position: absolute;
left: 50%;
margin-left: -24px;
top: 50%;
margin-top: -24px;
}
#action,
#page-breadcrumb {
background-image: url(../images/home/tour-bg.png);
background-color: #fbfafa;
background-repeat: repeat-x;
height: 155px;
background-position: center;
display: table;
position: static;
width: 100%;
}
.vertical-center{
display: table-cell;
vertical-align: middle;
width: 100%;
position: statice;
}
.sun{
background-image: url(../images/home/tour-icon1.png);
background-repeat: no-repeat;
background-position: 100% bottom;
}
.single-service{
overflow: hidden;
display: block;
}
.single-service img {
margin-bottom: 35px;
}
.single-service .fold {
margin-bottom: 35px;
}
.single-service h2 {
margin-top: 0;
margin-bottom: 15px;
}
.single-service p {
padding: 0 48px;
}
.action h1{
margin-top: 0;
}
.action p{
font-size: 18px;
margin-bottom: 0;
font-weight: 300;
}
.action .btn-common{
margin-top: 55px;
float: left;
}
.title {
color: #404040;
font-weight: 300;
}
.single-features {
overflow: hidden;
padding-top: 65px;
padding-bottom: 40px;
}
.single-features:last-child {
padding-bottom: 95px;
}
.single-features h2{
margin-bottom: 15px;
}
#clients{
padding-bottom: 45px;
}
.clients {
margin-bottom: 45px;
}
.clients img {
display: inline-block;
}
.clients-logo {
overflow: hidden;
margin-bottom: 10px;
}
/*************************
*******About Us Page******
**************************/
#action ,
#page-breadcrumb{
position: relative;
}
#team {
padding: 85px 0;
}
#team-carousel {
margin-top: 80px;
}
#company-information .padding-top{
padding-top: 105px;
}
.single-service img {
height: 85px;
}
.tour-button {
background-image: url(../images/home/tour-icon2.png);
height: 100%;
background-repeat: no-repeat;
position: absolute;
width: 100%;
left: 0;
background-position: 151px 4px;
}
.team-single {
position: relative;
}
.person-thumb {
position: relative;
}
.social-profile {
background: none repeat scroll 0 0 rgba(137, 97, 46, 0.8);
display: none;
height: 100%;
position: absolute;
text-align: center;
top: 0;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
width: 100%;
}
.team-single:hover .social-profile{
display: block;
-webkit-animation: fadeInUp 400ms;
animation: fadeInUp 400ms;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.social-profile .nav-pills {
display: inline-block;
margin-top: -26px;
padding: 0;
position: relative;
top: 50%;
}
.social-profile .nav-pills li {
display: inline-block;
margin: 0 5px;
}
.social-profile .nav-pills li a {
color: #fff;
border: 1px solid #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
padding: 0;
border-radius: 40px;
-webkit-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.social-profile .nav-pills li a:hover {
color: #89612e;
border-color: #89612e;
}
.person-info h2 {
font-weight: 300;
margin-bottom: 5px;
}
.person-info h3 {
font-size: 16px;
color: #686868;
font-weight: 300;
margin-top: 0;
margin-bottom: 0;
}
.team-carousel-control {
position: absolute;
top: 36%;
width: 13px;
height: 16px;
text-indent: -9999999px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.right.team-carousel-control {
right: -50px;
background-image: url(../images/aboutus/right.png);
}
.left.team-carousel-control {
left: -50px;
background-image: url(../images/aboutus/left.png);
}
.team-carousel-control:hover{
background-position: 0 -18px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.count h1{
font-size: 60px;
color: #dab074;
}
.count h3{
font-size: 16px;
}
.progress .progress-bar.six-sec-ease-in-out {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-ms-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.top-zero{
margin-top: 0;
}
h3.top-zero{
font-size: 20px;
}
#company-information .about-us h2{
margin-bottom: 45px;
}
.single-skill h3{
font-size: 16px;
}
.progress{
height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
}
.progress-bar{
line-height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
}
.progress-bar.progress-bar-primary{
background: #dab074;
}
/*************************
*******Service Page******
**************************/
#recent-projects{
padding: 85px 0;
}
.recent-projects .team-single{
height: 355px;
}
.recent-projects p.padding-bottom{
padding-bottom: 50px;
}
.choose{
padding-top: 30px;
}
#company-information.choose .padding-top{
padding-top: 78px;
}
#company-information h2{
margin-bottom: 25px;
margin-top: 0;
}
ul.elements{
list-style: none;
padding: 0;
margin: 20px 0 0 0;
}
ul.elements li{
margin: 6px 0;
}
ul.elements li > i{
color: #d29948;
display: inline-block;
margin-right: 10px;
}
#company-information h1.margin-bottom{
margin-bottom: 26px;
}
/*************************
*******Portfolio Default**
**************************/
.portfolio-single {
position: relative;
}
.portfolio-thumb {
position: relative;
}
.portfolio-thumb img {
width: 100%;
}
.portfolio-single:hover .portfolio-view{
display: block;
-webkit-animation: fadeInUp 400ms;
animation: fadeInUp 400ms;
}
#portfolio .row{
margin-left: -10px;
margin-right: -10px;
}
.portfolio-view{
display: none;
position: absolute;
top: 0;
height: 100%;
background: rgba(137, 97, 46, 0.8);
width: 100%;
text-align: center;
}
.portfolio-view .nav-pills {
padding: 0;
display: inline-block;
margin-top: -26px;
top: 50%;
position: relative;
}
.portfolio-view .nav-pills li {
display: inline-block;
margin: 0 5px;
}
.portfolio-view .nav-pills li a {
color: #fff;
border: 1px solid #fff;
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
padding: 0;
border-radius: 40px;
-webkit-animation: scaleIn 400ms linear 100ms both;
animation: scaleIn 400ms linear 100ms both;
-webkit-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.portfolio-view .nav-pills li a:hover {
color: #89612e;
border-color: #89612e;
-webkit-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.portfolio-info {
overflow: hidden;
margin-bottom: 30px;
}
.portfolio-info h2 {
font-size: 18px;
margin: 15px 0 0;
}
.portfolio-filter {
margin: 80px 0;
padding: 0;
}
.portfolio-filter li {
display: inline-block;
position: relative;
}
.portfolio-filter li a {
border-radius: 0;
color: #686868;
font-size: 18px;
font-weight: 300;
padding: 0 25px;
text-transform: capitalize;
border: none;
}
.portfolio-filter li .active{
background: transparent;
box-shadow: none;
-webkit-box-shadow: none;
}
.portfolio-filter li a:hover,
.portfolio-filter li a:focus,
.portfolio-filter li a.active {
background: transparent;
box-shadow: none;
-webkit-box-shadow: none;
}
.portfolio-filter li a.active:before{
position: absolute;
content: "";
left: 0;
width: 13px;
height: 16px;
background: url(../images/portfolio/icon.png);
top: 5px;
}
.portfolio-pagination{
text-align: center;
padding-top: 40px;
padding-bottom: 90px;
}
.pagination li{
display: inline-block;
margin: 0 10px;
}
.pagination li a{
color: #000;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #fff;
}
.pagination li:first-child a{
background: url(../images/portfolio/left.png);
background-repeat: no-repeat;
text-indent: -999999999px;
background-position: center top 10px;
width: 32px;
height: 36px;
border: none;
-webkit-transition: 300ms;
transition: 300ms;
}
.pagination li:first-child a:hover{
background: url(../images/portfolio/left.png);
background-position: center top -37px;
background-repeat: no-repeat;
-webkit-transition: 300ms;
transition: 300ms;
}
.pagination li:last-child a{
background: url(../images/portfolio/right.png);
background-repeat: no-repeat;
text-indent: -999999999px;
background-position: center top 10px;
width: 32px;
height: 36px;
border: none;
-webkit-transition: 300ms;
transition: 300ms;
}
.pagination li:last-child a:hover{
background: url(../images/portfolio/right.png);
background-position: center top -37px;
background-repeat: no-repeat;
-webkit-transition: 300ms;
transition: 300ms;
}
.pagination li a:hover,
.pagination .active a,
.pagination .active a:hover,
.pagination .active a:focus{
background: none;
border-color: #cc9b59;
color: #cc9b59;
}
/*****************************
Portfolio with right sidebar
*****************************/
.sidebar h3 {
color: #404040;
margin-top: 0;
border-bottom: 3px solid #ececec;
margin-bottom: 6px;
padding-bottom: 8px;
}
.sidebar-item{
margin-bottom: 48px;
}
.categories .navbar-stacked li {
border-bottom: 1px solid #ececec;
}
.categories .navbar-stacked li:last-child {
border-bottom: 0px solid #ececec;
}
.categories .navbar-stacked li a {
font-size: 16px;
color: #6a6a6a;
padding: 8px 0;
padding-left: 0;
}
.categories .navbar-stacked li a:hover{
background: none;
margin-left: 20px;
color: #dab074;
opacity: 1;
}
.categories .navbar-stacked li.active a{
color: #dab074;
padding-left: 20px;
}
.categories .navbar-stacked li.active a:before{
position: absolute;
content: "";
border-color: transparent transparent transparent #dab074;
border-width: 8px;
border-style: solid;
left: 0;
top: 13px;
margin-top: 0;
z-index: 0;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.categories .navbar-stacked li.active a:after {
position: absolute;
content: "";
border-color: transparent transparent transparent #fff;
border-width: 6px;
border-style: solid;
left: 0px;
top: 15px;
margin-top: 0;
z-index: 1;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.sidebar-item .media{
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
padding-top: 21px;
margin-top: 0;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.sidebar-item .media:last-child{
border-bottom: 0px solid #ececec;
padding-bottom: 0;
}
.sidebar-item .media:hover{
border-left: 2px solid #dab074;
padding-left: 5px;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.sidebar-item .media:hover.media .media-body h4 a{
color: #dab074;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.sidebar-item .media .media-body h4 {
margin-top: 0;
margin-bottom: 8px;
}
.sidebar-item .media .media-body h4 a{
color: #7d7d7d;
font-size: 16px;
}
.sidebar-item .media .media-body p {
color: #b4b4b4;
font-size: 12px;
}
.tag-cloud .nav-pills{
margin-top: 16px;
}
.tag-cloud .nav-pills li{
margin: 0;
margin-top: 6px;
margin-right: 4px;
}
.tag-cloud .nav-pills li a{
font-size: 14px;
font-weight: 300;
padding: 5px 15px;
background: #bbbbbb;
color: #fff;
border-radius: 3px;
}
.tag-cloud .nav-pills li a:hover{
background: #dab074;
}
.popular ul.gallery {
margin: 0;
padding: 0;
list-style: none;
margin: 10px -8px;
}
.popular ul.gallery li {
display: block;
width: 33.33%;
float: left;
padding: 8px;
}
.popular ul.gallery li a {
display: block;
}
.popular ul.gallery li a img {
width: 100%;
transition: border-radius 300ms ease-in;
-webkit-transition: border-radius 300ms ease-in;
}
.popular ul.gallery li a img:hover {
border-radius: 60px;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/*****************************
Portfolio Details
*****************************/
#portfolio-information.padding-top{
padding-top: 100px;
}
.project-name h2{
margin-top: 0;
margin-bottom: 15px;
}
#related-work .title{
margin-bottom: 55px;
margin-top: 10px;
}
.navbar-default {
background: none;
padding: 0;
}
.navbar-default li a{
font-size: 12px;
padding: 0;
padding-right: 15px;
}
.navbar-default li a i{
padding-right: 8px;
}
.navbar-default li a:hover{
color: #dab074;
background: none;
}
.skills .navbar-default,
.client .navbar-default{
margin-left: 35px;
}
.live-preview .btn-common{
margin-top: 21px;
padding: 13px 45px;
}
/*****************************
Blog Default
*****************************/
.single-blog.timeline {
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-bottom: 0;
position: relative;
padding-bottom: 0;
}
.timeline .post-content {
padding: 20px 20px 0;
}
.post-thumb{
margin: -1px -1px 0;
position: relative;
overflow: hidden;
}
.timeline .post-thumb img {
width: 100%;
}
.post-thumb iframe{
width: 100%;
min-height: 270px;
border: 0;
}
.post-overlay{
position: absolute;
top: 50%;
display: none;
width: 94px;
height: 140px;
margin-top: -70px;
overflow: hidden;
}
.post-overlay span{
position: absolute;
left: 50%;
bottom: 0;
margin-left: -60px;
-webkit-animation: fadeInUp 400ms;
animation: fadeInUp 400ms;
z-index: 9;
}
.post-overlay span:before{
position: absolute;
bottom: 0;
border-style: solid;
border-width: 60px;
content: "";
border-color: transparent transparent #dab074 transparent;
z-index: -1;
cursor: initial;
}
.post-overlay span a{
font-size: 30px;
color: #fff;
background: transparent;
padding: 0;
margin-left: 50px;
}
.single-blog:hover .post-overlay{
display: block;
-webkit-animation: fadeIn 300ms;
animation: fadeIn 300ms;
}
.timeline-divider{
position: relative;
padding-top: 50px;
}
.timeline-divider:before{
position: absolute;
top: 0;
content: "";
border-left-style: solid;
border-left-width: 1px;
height: 100%;
border-left-color: #dab074;
left: 50%;
margin-left: -2px;
}
.timeline-blog .col-sm-6.padding-top{
padding-top: 70px;
}
.post-content{
padding: 20px 0;
}
.timeline-date .btn-common{
font-size: 18px;
color: #4a4a4a;
font-weight: 300;
border-radius: 0;
padding: 17px 40px;
}
.arrow-right{
position: relative;
}
.arrow-right:after{
position: absolute;
right: 1px;
content: "";
top: 15px;
background: url(../images/blog/left.png);
width: 43px;
height: 54px;
}
.arrow-left{
position: relative;
}
.arrow-left:before{
position: absolute;
left: -2px;
content: "";
top: 86px;
background: url(../images/blog/right.png);
width: 43px;
height: 54px;
}
.post-title {
margin-top: 0;
}
.post-title a,
.comments-number a{
color: #686868;
}
.post-title a:hover,
.comments-number a:hover{
color: #dab074;
}
.post-content .post-author{
margin-top: 0;
}
.post-content .post-author a{
font-weight: 300;
font-size: 14px;
}
a.read-more{
color: #a5732a;
font-weight: 300;
}
a.read-more:hover{
opacity: .8;
}
.post-bottom{
border-top: 1px solid #eeeeee;
padding-top: 10px;
margin-top: 20px;
margin: 20px -20px 0;
padding: 20px 20px 0;
}
/*****************************
Blog with right sidebar
*****************************/
.single-blog{
padding-bottom: 30px;
}
.single-blog .post-bottom{
border-bottom: 1px solid #eeeeee;
padding-top: 10px;
padding-bottom: 10px;
}
.single-blog .post-overlay span{
left: 0;
top: 0;
margin-left: 0;
width: 94px;
height: 140px;
background: url(../images/blog/blog-arrow.png);
-webkit-animation: fadeInLeft 400ms;
animation: fadeInLeft 400ms;
}
.single-blog .post-overlay span a{
margin-left: 8px;
font-weight: 700;
font-size: 36px;
line-height: 18px;
position: absolute;
top: 50px;
}
.single-blog .post-overlay span a small{
font-size: 16px;
font-weight: 300;
margin-left: 5px;
}
.single-blog .post-overlay span:before{
border-color: transparent;
border-width: 0;
}
.post-nav{
margin:0;
padding: 0;
}
.post-nav li a{
padding: 0;
text-align: left;
}
.post-nav li a i{
color: #dab074;
margin-right: 8px;
}
.post-nav li a:hover{
background: none;
}
.blog-padding-right{
padding-right:35px;
}
.blog-pagination {
text-align: center;
padding-top: 10px;
padding-bottom: 55px;
}
/*****************************
Blog with right sidebar
*****************************/
.masonery_area .single-blog{}
.masonery_area .single-blog .post-thumb{
height: auto;
}
.masonery_area .single-blog .post-title{
margin-top: 5px;
}
.masonery_area .single-blog .post-title a{
font-size: 20px;
}
.masonery_area .single-blog .post-thumb img{
height:auto;
}
.masonery_area .single-blog .post-bottom{
border-top:0;
padding-top:0;
margin-top:15px;
}
/* Audio CSS */
.audiojs{
background: #dab074;
height: 45px;
width: 100%;
}
.audiojs .scrubber{
background: #fff;
height: 8px;
border-top: 0;
width: 170px;
margin-top: 19px;
margin-left: 12px;
border-radius: 10px;
}
.audiojs .play-pause{
background: #cca46c;
width: 68px;
height: 45px;
padding: 0;
padding-left: 24px;
padding-top: 10px;
border-right: 0;
}
.audiojs .time{
display: none;
}
.audiojs .progress{
background: #a5732a;
height: 8px;
border-radius: 10px;
}
.audiojs .loaded{
background: #ba9663;
height: 8px;
border-radius: 10px;
}
/*****************************
Blog Details
*****************************/
.navbar-nav.post-nav li{
margin-right: 60px;
}
.single-blog.blog-details .post-content{
padding-top: 30px;
}
.single-blog.blog-details .post-bottom{
margin-top: 55px;
}
.single-blog-wrapper{
position: relative;
}
.blog-share{
margin-top: 40px;
display: inline-block;
padding: 0;
}
span.stMainServices,
span.stButton_gradient,
.stButton .chicklets{
height:24px !important;
}
.author-profile.padding{
padding-top:50px;
}
.author-profile .col-sm-2 img{
width: 100%;
border-left: 3px solid #dab074;
}
.author-profile h3{
margin-top:0;
color: #3a424c;
}
.author-profile p{
color: #3a424c;
font-weight: 400;
}
.author-profile span a{
color: #a5732a;
}
.response-area{
border-bottom: 0;
}
.response-area h2{
margin-top: 0;
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 20px;
}
.post-comment{
padding-left: 70px;
padding-top: 36px;
border-top: 1px solid #f1e8dd;
}
.post-comment .pull-left img{
margin-right: 60px;
border-left: 3px solid #dab074;
}
.post-comment .media-body{
padding-top: 6px;
border-bottom: 0;
padding-bottom: 50px;
}
.post-comment .media-body p{
margin-top:10px;
}
.post-comment .media-body span i{
color: #a5732a;
margin-right: 10px;
}
.post-comment .media-body span a{
color: #a5732a;
font-weight: 700;
}
.post-comment .media-body .post-nav li a{
font-weight: 300;
}
.parrent .media-list{
margin-left: 190px;
}
.parrent .post-comment{
padding-left: 0;
margin-left: 70px;
}
/****************************
********* Contact Us*********
*****************************/
#map-section {
margin-top: 50px;
margin-bottom: 50px;
position: relative;
}
#gmap {
height: 350px;
}
.get-in-touch img {
margin-top: 35px;
margin-bottom: 32px;
}
.get-in-touch p {
font-size: 18px;
font-weight: 300;
}
#map-section .contact-info {
position: absolute;
background-color: #fff;
right: 0;
top: 0;
width: 33%;
height: 100%;
padding:25px 50px;
opacity: 0.9
}
#map-section .contact-info h2,
#map-section address a:hover {
color: #a5732a
}
#contact-form #message{
resize:none;
}
#contact-form .btn-submit {
width: 28%;
margin: 5px auto;
}
.corporate-info .corporate-address {
background-image: url("../images/contact-bg.png");
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
padding-bottom: 50px;
}
.corporate-info .corporate-address address {
background-image: url("../images/icon-map.png");
background-position: left top;
background-repeat: no-repeat;
padding-left: 40px;
}
/****************************
****** Price-table CSS*******
*****************************/
#price-table {
margin-top: 88px;
margin-bottom: 90px;
}
.single-price ul {
padding: 0;
margin: 0;
list-style: none;
}
.table-heading {
background-color: transparent !important;
color: #FFFFFF !important;
overflow: hidden;
padding: 0 !important;
text-align: center;
}
.single-price .plan-name {
background-color: #D4D4D4;
color: #696969;
font-size: 20px;
margin-bottom: 0;
padding: 10px 0;
text-transform: capitalize;
}
.single-price .plan-price {
color: #696969;
float: none;
font-size: 14px;
height: 110px;
margin-bottom: 15px;
overflow: hidden;
position: relative;
z-index: 5;
padding-top: 15px;
}
.plan-price .dollar-sign {
font-size: 18px;
}
.plan-price .price {
font-size: 24px;
}
.plan-price .month {
display: block;
margin-top: -6px;
}
.single-price .plan-price:after {
border-color: #c4c4c4 transparent transparent;
border-style: solid;
border-width: 110px;
content: "";
height: 0;
left:50%;
position: absolute;
top: 0;
width: 0;
z-index: -1;
margin-left: -110px;
}
.single-price ul li,
.single-table ul li {
padding: 12px 18px;
background-color: #f7f7f7;
margin-bottom: 5px;
color: #696969;
}
.single-price ul li span,
.single-table ul li span {
float: right;
}
.single-price .btn-buynow {
background-color: #c4c4c4;
border-radius: 0;
color: #fff;
padding: 12px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
display: block;
}
.single-price .btn-buynow:hover {
background-color: #b4b3b3;
}
.highligh-table .plan-name {
background-color: #b07b2c;
color: #fff;
}
.highligh-table .plan-price {
color: #fff;
}
.highligh-table .plan-price:after {
border-color: #a56d1a transparent transparent;
}
.highligh-table .btn-buynow {
background-color: #a5732a;
}
.highligh-table .btn-buynow:hover {
background-color: #976a28;
}
#price-table2 {
margin-bottom: 180px;
}
.table-header {
background-color: #C4C4C4;
overflow: hidden;
padding:20px;
}
.single-table {
position: relative;
padding-top: 60px;
}
.single-table:before {
border-color: transparent transparent #b5b5b5;
border-style: solid;
border-width: 0 130px 60px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.table-header h2 {
color: #696969;
float: left;
font-size: 24px;
margin-top: 7px;
}
.table-header .plan-price {
float: right;
margin: 0;
overflow: hidden;
padding-top: 1px;
}
.single-table .btn-signup {
display: block;
text-align: center;
position:relative;
z-index:1
}
.single-table ul {
margin: 0;
padding: 0;
}
.single-table .btn-signup:after {
content: "";
position: absolute;
border-color: #c4c4c4 transparent transparent;
border-style: solid;
border-width: 78px 130px 0;
height: 0;
left: 0;
top: -1px;
width: 100%;
z-index: -1;
}
.single-table .btn-signup a {
color: #696969;
display: inline-block;
overflow: hidden;
padding: 20px 0 0 0;
text-transform: uppercase;
letter-spacing: 3px;
}
.single-table .btn-signup:hover a {
color: #fff;
}
.single-table .btn-signup:hover.btn-signup:after{
border-color: #b3b2b2 transparent transparent;
}
.single-table.highligh-table .table-header {
background-color: #b07b2c
}
.highligh-table .btn-signup a,
.highligh-table .table-header h2 {
color: #fff;
}
.highligh-table .btn-signup.btn-signup:hover:after {
border-color: #a07028 transparent transparent;
}
.highligh-table .btn-signup:after {
border-color: #b07b2c transparent transparent;
}
.highligh-table:before {
border-color:transparent transparent #a56d1a;
}
/*************************
********404 page CSS******
**************************/
#error-page {
display: table;
height: 100%;
min-height: 100%;
width: 100%;
color: #686868;
font-size: 18px;
font-weight: 300;
padding: 100px 0;
}
#error-page .container-fluid {
overflow: hidden;
}
.error-page-inner {
display: table-cell;
vertical-align: middle;
}
.bg-404 {
background-image: url("../images/home/tour-bg.png");
background-repeat: repeat-x;
background-position: center top;
}
.error-image {
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.error-image img {
width: 100%;
}
#error-page h2 {
font-size:36px;
text-transform: uppercase;
}
.btn-error {
font-weight: 300;
margin-top: 30px;
padding:25px 55px;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 5px;
background-color: transparent;
border: 1px solid #cc9b59;
margin-top: 50px;
margin-bottom: 50px;
}
.btn-error:hover, .btn-error:focus {
background-color: #cc9b59;
border-color:#cc9b59;
color:#fff;
}
#error-page i, #coming-soon i {
border: 1px solid #cc9b59;
height: 40px;
width: 40px;
line-height: 40px;
color: #cc9b59;
font-size: 17px;
margin:0 15px;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#error-page i:hover, #coming-soon i:hover {
background-color: #cc9b59;
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/*************************
********404 page CSS******
**************************/
#error-page {
display: table;
height: 100%;
min-height: 100%;
width: 100%;
color: #686868;
font-size: 18px;
font-weight: 300;
padding: 100px 0;
}
#error-page .container-fluid {
overflow: hidden;
}
.error-page-inner {
display: table-cell;
vertical-align: middle;
}
.bg-404 {
background-image: url("../images/home/tour-bg.png");
background-repeat: repeat-x;
background-position: center top;
}
.error-image {
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.error-image img {
width: 100%;
}
#error-page h2 {
font-size:36px;
text-transform: uppercase;
}
.btn-error {
font-weight: 300;
margin-top: 30px;
padding:25px 55px;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 5px;
background-color: transparent;
border: 1px solid #cc9b59;
margin-top: 50px;
margin-bottom: 50px;
}
.btn-error:hover, .btn-error:focus {
background-color: #cc9b59;
border-color:#cc9b59;
color:#fff;
}
#error-page i, #coming-soon i {
border: 1px solid #cc9b59;
height: 40px;
width: 40px;
line-height: 40px;
color: #cc9b59;
font-size: 17px;
margin:0 15px;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#error-page i:hover, #coming-soon i:hover {
background-color: #cc9b59;
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/*************************
******Coming Soon CSS*****
**************************/
.logo-image {
display: block;
text-align: center;
margin-top: 80px;
margin-bottom: 95px;
}
.logo-image img {
display: inline-block;
}
#coming-soon {
background-image: url("../images/home/tour-bg.png");
background-position: center top;
background-repeat: repeat-x;
padding: 40px 0;
overflow: hidden;
}
#coming-soon .social-link {
margin-top: 35px;
}
.time-count {
display: block;
text-align: center;
}
.time-count ul {
padding-left: 0;
}
#countdown {
display: inline-block;
margin-bottom: 100px;
margin-top: 100px;
}
#countdown li {
float: left;
margin-right: 100px;
color: #757575;
font-weight: 300;
font-size: 30px;
position: relative;
z-index:1;
padding-top: 45px;
}
#countdown li:last-child {
margin-right: 0;
margin-left: 20px;
}
#countdown li span {
display: block;
font-size: 72px;
margin-bottom: 25px;
}
#countdown li.angle-one:before {
border-color: #D29948 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: solid;
border-width: 250px 145px 0;
content: "";
left: -80px;
position: absolute;
top: -5px;
z-index: -1;
}
#countdown li.angle-one:after{
border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: solid;
border-width: 236px 137px 0;
content: "";
left: -72px;
position: absolute;
top: 0;
z-index:-1;
}
#countdown li.angle-two:before {
border-color: rgba(0, 0, 0, 0) #a5732a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: solid;
border-width: 250px 290px 0 0;
content: "";
left: -175px;
position: absolute;
top: -5px;
z-index:-1;
-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
-o-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(30deg);
}
#countdown li.angle-two:after {
border-color: rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: solid;
border-width: 235px 272px 0 0;
content: "";
left: -162px;
position: absolute;
top: 5px;
z-index: -1;
-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
-o-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(30deg);
}
#countdown li.angle-two span{
padding-top: 90px;
}
#countdown li.angle-one span.minutes,
#countdown li.angle-one .minute {
margin-left: 25px;
}
#subscribe {
background-color: #565656;
color: #FFFFFF;
padding: 40px 0 50px;
}
#subscribe h2 {
color: #fff;
text-transform: uppercase;
}
#subscribe .fa-envelope-o {
color: #dab074;
margin-right: 5px;
}
#subscribe .form-control {
background-color: transparent;
height: 52px;
color: #fff;
}
#newsletter {
margin-top: 35px;
position: relative;
}
#newsletter i {
color: #DAB074;
font-size: 36px;
position: absolute;
right: 12px;
top: 7px;
}
.newsletter p {
color: #919191;
font-size: 12px;
margin-top: 10px;
}
#coming-soon-footer {
padding: 45px 0;
line-height: 15px;
overflow: hidden;
}
#coming-soon-footer a {
color: #d89b4e;
}
#coming-soon-footer a:hover {
color: #b38040
}
/*Shortcodes CSS*/
.bs-example{
margin: 0 0 20px;
}
.panel-group{
border: 1px solid #eee;
}
.panel-default{
border: 0;
}
.panel-group .panel{
border-radius: 0;
}
.panel-group .panel+.panel{
margin-top: 0;
}
.panel-default>.panel-heading{
background-color: transparent;
border-top: 1px solid #eee;
}
.panel-group .panel-default:first-child>.panel-heading{
border-top: 0;
}
.panel-default>.panel-heading+.panel-collapse .panel-body{
border-top-color: #eee;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
background-color: #dab074;
}
.tab-content {
padding-top: 20px;
}
/*Features*/
.feature-inner{
text-align: center;
}
.icon-wrapper{
display: inline-block;
background-color: #d29948;
color: #fff;
padding: 25px;
box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
border-radius: 100%;
margin: 10px 0;
}
Finally thank you very much for purchasing this theme. Please keep that in mind that we are working very hard to providing better quality in coming days. If you love your work then appreciate us by writting a good review with 5 star.