/*
* Template Name : Wimo - Responsive HTML5 Template
* Copyright 2013, themeforest.net
* www.bitsblue.com
*
*
* Copyright (c) 2013 Wimo, inc.
*
* MIT License
* 
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

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

	1.	Globally Applied Styles
	2.	Menu Styles
	3.	Front Text Styles
	4.	Main Flex Slider Styles
	5.	Widget Styles
	6.	Foundation Orbit Slider Styles
	7.  About Us Styles
	8.	Clients Styles
	9.  Quote Styles
	10.	Team Styles
	11.	Portfolio Styles
	12. Portfolio Pop-up Box Styles
	13.	Video Section Styles
	14. Services Styles
	15. Testimonial Styles
	16. Contact Us Styles
	17.	Footer Styles
	18. Blog Page Styles
	19. Single Blog Post Styles
	20. Preloader Styles
	21. Shortcodes Page Styles

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

/********************************************************************/
/*  1. Globally Applied Styles */
/********************************************************************/

body {
	margin: 0;
	padding: 0;
	font-family: "Raleway",sans-serif;
	font-weight: 300;
	padding-top: 0px !important;
}

h2 {
	font-size: 90px;
	font-weight: 500;
	font-family: 'Raleway', sans-serif;
	text-align: left;
	margin-bottom: 0px;
	display: inline-block;
	margin-top: 0px;
	width: 100%;
}

h3 {
	font-size: 21px;
	font-weight: 500;
	text-align: center;
	font-family: "open sans",sans-serif;
	margin-bottom: 25px;
	color: #464646;
}

h4, h5, h6 {
	font-family: "open sans",sans-serif;
	font-weight: 400;
}

p {
	font-family: "open sans",sans-serif;
	font-weight: 400;
	line-height: 28px;
}

a {
	font-family: "open sans",sans-serif;
	transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
}

.h2-animation {
	visibility: hidden;
}

.paragraph-animation {
	visibility: hidden;
}

.header-color {
	color: #00d387
}

.title {
	text-align: left;
	border-bottom: 1px solid #D3D3D3;
	margin-bottom: 52px;
	padding-bottom: 48px;
}

.title h2 {
	color: #464646;
	display: inline-block;
}

.title p {
	color: #949494;
	font-size: 16px;
	font-weight: 300;
	text-align: left;
	margin-top: 30px;
}

::selection {
	background: #00d387;
	color: #fff;
	-webkit-text-stroke-color: #fff;
}

.button {
	background: #fc828a;
	border-radius: 5px;
	border: none;
	box-shadow: none;
	font-weight: 300;
	font-size: 15px;
	padding: 10px 28px;
	font-family: "open sans",sans-serif;

}

.button:hover {
	background: #00d387;
}


/********************************************************************/
/*  2. Menu Styles */
/********************************************************************/

.menu-background{
	background-color: white;
	-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 77px;
}

.top-bar {
	background: white;
	overflow: visible;
}

.top-bar {
	overflow: hidden;
	height: 77px;
	line-height: 45px;
	position: relative;
	margin-bottom: 0px;
}

.top-bar .name {
	margin-top: 10px;
}

.top-bar-section li a:not(.button) {
	padding: 0 15px;
	line-height: 45px;
	background: none;
	color: #888;
	font-weight: 400;
	font-family: "open sans",sans-serif;
	font-size: 13px;
	-webkit-transition: color 0.1s linear;
	-moz-transition: color 0.1s linear;
	-o-transition: color 0.1s linear;
	transition: color 0.1s linear;
}

.top-bar-section li a:not(.button):hover {
	color: #00d387;
}

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
	border-bottom: 1px solid #ececec !important;
	border-top: none !important;
	border-left: none;
	border-right: none;
}

.top-bar.expanded .title-area {
	background: white;
}

.top-bar-section ul {
	background: white;
}

.top-bar .toggle-topbar.menu-icon a {
    text-indent: -48px;
    width: 20px;
    height: 15px;
    line-height: 19px;
    padding: 0;
    color: black;
    background: url(../img/menu.png);
    background-size: 20px 15px;
    margin-top: 11px;
}

.top-bar.expanded .toggle-topbar a span {
	box-shadow: none;
}

.top-bar-section ul li {
	position: relative;
	margin: 0;
	padding: 16px 4px;
	z-index: 1;
}

/* Sticky Styles */
.contain-to-grid {
	background-color: white;
	height: 77px;
	z-index: 9999;
	position: fixed;
}


/********************************************************************/
/*  3. Front Text Styles */
/********************************************************************/

.front-text {
	text-align: center;
	margin-bottom: 40px;
	margin-top: 114px;
}

.front-text h2 {
	font-family: "Raleway",sans-serif;
	font-weight: 200;
	color: #464646;
	font-size: 36px;
	text-align: left;
}

.front-text h2 span {
	color: #00d387;
	font-weight: 300;
}


/********************************************************************/
/*  4. Main Flex Slider Styles */
/********************************************************************/

.green-bg {
	background: #00d387;
	width: 100%;
    position: relative;
    padding-top: 50px;
}

.white-corner {
	background: url(../img/rotate-box.png);
	width: 100px;
	height: 91px;
	position: absolute;
	top: 0px;
	right: 0px;
}

.white-corner p {
	font-size: 16px;
	font-weight: 300;
	-moz-transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	margin-top: 21px;
	margin-left: 25px;
	font-family: "Raleway",sans-serif;
}

.green-bg .flexslider {
	box-shadow: none;
	margin: 0px;
}

.green-bg .flexslider .flex-control-nav, .green-bg .flexslider .flex-direction-nav {
	display: none;
}

/********************************************************************/
/*  5. Widget Styles */
/********************************************************************/

.widget-section {
	padding-bottom: 50px;
	padding-top: 50px;
}

.widget-section h3 {
	margin-bottom: 50px;
}

.widget {
	margin-bottom: 35px;
}

.widget span {
	float: left;
	font-size: 24px;
	background: #fc828a;
	padding: 10px;
	padding-bottom: 9px;
	border-radius: 50%;
	color: white;
}

.widget-content {
	margin-left: 65px;
}

.widget-content h4 {
	float: left;
	color: #464646;
	font-size: 16px;
	margin-bottom: 25px;
}

.widget-content p {
	float: left;
	color: #6a6a6a;
	font-size: 12px;
	line-height: 18px;
	margin-top: -13px;
}

.hire-us {
	background: url(../img/blog-img/blog-icons.png) fixed #DFDFDF;
	padding-bottom: 80px;
	padding-top: 80px;
	text-align: center;
	-moz-box-shadow: inset 0px 0px 2px #A0A0A0;
	-webkit-box-shadow: inset 0px 0px 2px #A0A0A0;
	box-shadow: inset 0px 0px 2px #A0A0A0;
}

.hire-us .button {
	background-color: #00d387;
	border: 2px solid #00d387;
	font-size: 20px;
	padding: 25px 61px;
	font-weight: 400;
	margin-bottom: 0px;
}

.hire-us .button:hover {
	background-color: transparent;
	border: 2px solid #00d387;
	color: #6a6a6a;
}

/********************************************************************/
/*  6. Foundation Orbit Slider Styles */
/********************************************************************/

.orbit-container .orbit-timer {
	position: absolute;
	top: 0px;
	right: 10px;
	height: 6px;
	width: 100%;
	z-index: 10;
}

.orbit-container .orbit-timer .orbit-progress {
	background-color: rgba(252, 252, 252, 0.6)
}

.orbit-container {
	background: none;
}

.orbit-bullets {
	left: 50%;
	margin-top: 25px;
	margin-left: -39px;
	margin-bottom: 50px;
}

.orbit-bullets li {
	width: 15px;
	height: 15px;
	background: #00d387;
	border: none;
	cursor: pointer;
}

.orbit-bullets li.active {
	background: white;
	border: 1px solid #00d387;
}


/********************************************************************/
/*  7. About Us Styles */
/********************************************************************/

#region2 {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
	background: #f3f3f3;
}

.about-slider img {
	margin-top: -35px;
}

.about-slider h3 {
	text-align: left;
}

/* Skills Styling */
.skills span {
	color: #c70035;
}

.skills h3 {
	text-align: left;
}

.skills h5 {
	color: #949494;
	font-size: 13px;
	font-weight: 400;
	font-family: "open sans",sans-serif;
}

.meter {
	visibility: hidden;
}

.progress {
	height: 23px;
	margin-bottom: 25px;
}

.progress.success .meter {
	background: #00d387;
}

.progress {
	border-radius: 300px 300px 300px 300px;
	-webkit-border-radius: 300px 300px 300px 300px;
	-o-border-radius: 300px 300px 300px 300px;
	-moz-border-radius: 300px 300px 300px 300px;
	background-color: #E2E2E2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
	-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
	border: none;
	padding: 0px;
}

/********************************************************************/
/*  8. Clients Styles */
/********************************************************************/

.clients {
	background: url(../img/bg/noise.png) fixed #222222;
	padding-top: 50px;
	padding-bottom: 60px;
}

.clients li {
	float: left;
	list-style: none;
	padding-left: 30px;
    width: 194px;
}

/********************************************************************/
/*  10. Team Styles */
/********************************************************************/

#team-section {
	padding-bottom: 50px;
	padding-top: 50px;
	background: white;
	width: 100%;
}

.all-team h4 {
	font-size: 22px;
	color: #464646;
	font-weight: 300;
}

.all-team h4 span {
	font-size: 14px;
	color: #6a6a6a;
	font-family: "open sans",sans-serif;
}

.all-team img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.team-status {
	background: #FC828A;
	padding: 4px 7px;
	font-size: 13px;
	float: right;
	border-radius: 3px;
}

.all-team p {
	color: #6a6a6a;
	font-size: 13px;
	width: 100%;
	text-align: left;
	line-height: 22px;
	letter-spacing: 0.1px;
	font-family: "open sans",sans-serif
}

.all-team .social-icons {
	text-align: left;
	margin-left: -5px;
}

.all-team .social-icons li {
	list-style: none;
	display: inline-block;
	padding: 0px 5px;
}

.all-team .social-icons li a {
	color: #00d387;
	font-size: 13px;
}

.social-icons li a:hover {
	color: #fc828a;
}

.social-icons li a {
	color: #00d387;
	font-size: 11px;
}

.social-icons li {
	list-style: none;
	display: inline-block;
	padding: 0px 5px;
}

/********************************************************************/
/*  9. Quote Styles */
/********************************************************************/

.quote-line {
	background: url(../img/bg/bg1.jpg) fixed;
	padding-top: 160px;
	padding-bottom: 160px;
	text-align: center;
}

.quote-line h3 {
	color: white;
	text-align: center;
	display: inline;
	padding-right: 20px;
	font-size: 40px;
}

.quote-line p {
	color: white;
	text-align: center;
	font-size: 15px;
}


/********************************************************************/
/*  11. Portfolio Styles */
/********************************************************************/

#region3 {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* Portfolio Styling */
.portfolio-wrapper {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.portfolio-wrapper h3 {
	text-align: center;
}

.folio-image {
	width: 100%;
	border-radius: 5px;
}

.caption {
	display: inline-block;
	position: relative;
	margin: 7px -4px;
}

.caption img {
	display: block;
	max-width: 100%;
}

.caption::before,
.caption::after {
	opacity: 0;
	position: absolute;
	width: 100%;
	color: #fff;
	padding: 20px;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.caption::before {
	content: attr(data-title);
	top: 0;
	height: 17%;
	background: #fc828a;
	font-size: 21px;
	font-weight: 500;
}

.caption::after {
	content: attr(data-description);
	top: 17%;
	height: 83%;
	background: #fc828a;
	font-size: 16px;
	text-align: left;
	padding-top: 0px;
	font-weight: 400;
	color: #E74954;
}

.caption:hover::before,
.caption:hover::after {
	opacity: 1;
}


/********************************************************************/
/*  12. Portfolio Pop-up Box Styles */
/********************************************************************/

.reveal-modal h2 {
	font-size: 30px;
	font-weight: 400;
	color: white;
	text-align: center;
	font-family: "open sans",sans-serif;
}

.reveal-modal .portfolio-title {
	background: #00d387;
	padding: 45px;
	margin-left: -30px;
	margin-right: -30px;
	margin-top: -30px;
	margin-bottom: 50px;
}

.reveal-modal .close-reveal-modal {
	font-size: 36px;
	right: -21px;
	top: -21px;
	padding: 6px 20px 12px 20px;
	color: white;
	font-weight: 200;
	font-family: "Raleway",sans-serif;
	border-radius: 50%;
	background-color: #fc828a;
}

.portfolio-single-img {
	margin-bottom: 25px;
}

.project-intro h4 {
	font-size: 17px;
	color: #464646;
	margin-bottom: 15px;
}

.project-intro p {
	font-size: 13px;
	color: #6a6a6a;
}

.detail-p strong {
	font-weight: 200;
	color: #00d387;
}

.detail-p p {
	border-bottom: 1px solid #dcdcdc;
	padding-bottom: 15px; 
}

.project-intro .button:hover {
	background: #00d387;
}

.project-description {
	margin-bottom: 30px;
}

.project-detail {
	margin-bottom: 30px;
}


/********************************************************************/
/*  13. Video Section Styles */
/********************************************************************/

#region4 {
	background: url(../img/bg/video-bg1.png) fixed;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 68px;
}

.video-text h3 {
	color: white;
	font-size: 30px;
	text-align: left;
}

.video-text p {
	color: white;
	font-size: 16px;
	font-weight: 200;
}

.video-text .button:hover {
	background: #019a5f;
}

iframe {
	margin-top: 20px;
	width: 100%;
	border: 0px;
}


/********************************************************************/
/*  14. Services Styles */
/********************************************************************/

#region5 {
	background: #f7f7f7;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.our-service {
	background: #fff;
	padding: 25px;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
	-webkit-transition: background 300ms ease-out;
	-moz-transition: background 300ms ease-out;
	transition: background 300ms ease-out;
}

.all-services h3 {
	color: #6a6a6a;
}

.all-services .services {
	text-align: center;
}

.all-services .services-icons {
	font-size: 47px;
	background: #EBEBEB;
	border: 1px dashed #00d387;
	border-radius: 50%;
	color: #464646;
	text-align: center;
	padding: 32px;
	padding-bottom: 22px;
	-webkit-transition: background-color 300ms ease-out;
	-moz-transition: background-color 300ms ease-out;
	transition: background-color 300ms ease-out;
}

.all-services .services-icons:hover {
	background: transparent;
	border: 2px solid #00d387;
}

.all-services .services h4 {
	color: #464646;
	text-align: center;
	text-transform: uppercase;
	font-size: 22px;
	margin-bottom: 56px;
}

.all-services .services p {
	color: #949494;
	font-size: 15px;
	text-align: center;
	margin-top: 56px;
}

.services:hover .services-icons {
	background: transparent;
	border: 2px solid #00d387;
}


/********************************************************************/
/*  15. Tesimonial Styles */
/********************************************************************/

.testimonial-bg {
	background: url(../img/bg/testimonial.jpg) fixed; 
	padding-bottom: 30px;
	padding-top: 100px;
	text-align: center;
}

.testimonial-bg .flexslider {
	box-shadow: none;
	margin-bottom: 0px;
}

.testimonial-bg .flexslider h2 {
	font-size: 20px;
}

.testimonial-bg .flexslider h3 {
	color: white;
}

.testimonial-bg .flexslider p {
	color: #DFDFDF;
	font-weight: 300;
	text-align: center;
}

.testimonial-bg .flexslider .testimonial-name {
	color: #00d387;
	border-bottom: 1px solid #00d387;
	display: inline-block;
	text-transform: uppercase;
	font-size: 16px;
}

.testimonial-bg .flexslider .slides img {
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	margin-bottom: 1.25em;
}

.testimonial-bg .flex-direction-nav {
	display: none;
}

.testimonial-bg .flex-control-nav {
	display: none;
}


/********************************************************************/
/*  16. Contact Us Styles */
/********************************************************************/

#region6 {
	background: url(../img/noise.png) #111111 fixed;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	border-bottom: 1px solid #181818;
}

.contact  {
	border: 1px solid #373838;
	padding: 12px 31px;
	background: transparent;
	-webkit-transition: background-color 300ms ease-out;
	-moz-transition: background-color 300ms ease-out;
	transition: background-color 300ms ease-out;
}

.contact p {
	color: #999;
	font-size: 15px;
	width: 70%;
	display: inline-block;
	margin-bottom: 0px;
}

.contact span {
	font-size: 26px;
	color: #00d387;
	padding: 0px 7px;
	float: left;
}


/********************************************************************/
/*  17. Footer Styles */
/********************************************************************/

.footer {
	background-color: #111111;
	padding-bottom: 50px;
	padding-top: 50px;
}

.footer-icons h4 {
	font-size: 20px;
	font-weight: 200;
	color: #999;
}

/* Footer social icons styling */
.footer-icons {
	text-align: center;
	margin: 0 auto;
}

.f-icon img {
	padding: 27px;
}

.f-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 8px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}

.f-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.footer-icon-effect .f-icon {
	overflow: hidden;
	background-color: #222222;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.footer-icon-effect .f-icon:after {
	display: none;
}

.footer-icon-effect .f-icon:hover {
	background: #00d398;
	color: #702fa8;
	box-shadow: 0 0 0 8px rgba(0,211,135,0.3);
}


/********************************************************************/
/*  18. Blog Page Styles */
/********************************************************************/

.blog-section {
	padding-top: 78px;
}

/***************** Blog Header Styling *****************/
.blog-header {
	background: url(../img/blog-img/blog-header.png) fixed;
	padding-top: 130px;
	padding-bottom: 130px;
}

.blog-header h2 {
	font-size: 45px;
	font-weight: 400;
	color: white;
	font-family: "open sans",sans-serif;
}

.blog-header p {
	color: #F0F0F0;
	font-size: 18px;
	font-weight: 300;
}

/***************** Blog Post Styling *****************/

#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em; /* 30px */
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em; /* 30px */
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em; /* 30px */
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em; /* 30px */
    column-fill: auto;
}

.item {
    margin-bottom: 1.875em; /* 15px 30px */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

#wrapper {
    margin-bottom: 70px;
}

.blog-posts {
	margin-top: 30px;
}

.blog-post {
    position: relative;
    background: #f3f3f3;
    padding: 11px;
    -o-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.post-img .thumbnail {
	position: absolute;
	left: 50%;
	width: 33px;
	margin-left: -15px;
}

.post-content .post-date {
	font-size: 11px;
	color: #999;
	padding-top: 18px;
	font-family: "open sans",sans-serif;
	font-weight: 400;
}

.post-date a {
	color: #727272;
}

.post-date a:hover {
	color: #00d387;
}

.post-content h3 {
	font-size: 18px;
	color: #464646;
	padding-top: 6px;
	text-align: left;
	font-weight: 500;
	margin-bottom: 10px;
	transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
}

.post-content h3:hover {
	color: #00d387;
}

.post-content p {
	font-size: 13px;
	color: #6a6a6a;
	line-height: 20px;
}

.post-content .button {
	font-size: 11px;
}

.post-content .button:hover {
	background: #00d387;
}

.post-quote p:hover {
	background: #00d387;
}

.post-quote p{
	color: white;
	font-size: 19px;
	font-weight: 500;
	font-family: "open sans",sans-serif;
	padding: 16px;
	background-color: #fc828a;
	-webkit-transition: background-color 300ms ease-out;
	-moz-transition: background-color 300ms ease-out;
	transition: background-color 300ms ease-out;
	cursor: pointer;
}

.post-quote p span {
	color: white;
	font-size: 13px;
	font-weight: 300;
	font-family: "open sans",sans-serif;
}

.blog-comment a {
	font-size: 13px;
	color: #999;
	padding-top: 10px;
}

.blog-comment a:hover {
	transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	color: #00d387;
}

.blog-comment {
	border-top: 1px solid #D5D5D5;
	font-size: 13px;
	color: #999;
	padding-top: 16px;
	font-weight: 400;
}


/********************************************************************/
/*  19. Single Blog Post Styles */
/********************************************************************/

.single-post h4 {
	font-size: 20px;
	color: #464646;
}

.blog-single .post-content p {
	font-size: 15px;
	line-height: 25px;
}

.blog-single .post-quote p {
	padding: 27px;
	font-size: 18px;
	line-height: 28px;
}

.blog-single .post-content h3 {
	font-size: 25px;
}

.blog-single .post-content .post-date {
	font-size: 13px;
}

/***************** Author Styling *****************/

.about-author h4 {
	color: #464646;
	margin-bottom: 25px;
	font-size: 19px;
}

.about-author img {
	float: left;
	padding-right: 25px;
}

.about-author .author-detail h5 {
	font-weight: 400;
	font-size: 16px;
	color: #464646;
	margin-bottom: 10px;
}

.author-detail p {
	font-weight: 400;
	line-height: 20px;
	font-size: 13px;
	color: #6a6a6a;
	display: inline-block;
	width: 81%;
	margin-bottom: 10px;
}

.author-detail .social-icons li {
	padding: 0px;
}

.author-social ul {
	display: inline;
}

.author-box {
	background: #ededed;
	padding: 20px;
}

/***************** Comment Styling *****************/

.single-comment h4 {
	color: #464646;
	margin-bottom: 25px;
	font-size: 19px;
}

.comments-box {
	margin-top: 50px;
}

.comments-box h4 {
	font-size: 17px;
	color: #464646;
	margin-bottom: 20px;
}

.comments .comment-box .comment {
	margin-left: 100px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dashed #d7d7d7;
}

.comments .comment-box .children {
	margin-left: 80px;
}

.comments .comment-box {
	display: inline;
}

.comment-icon {
	float: left;
	list-style: none;
}

.comment h5 a{
	color: #464646;
}

.comment h5 {
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 0px;
	list-style: none;
}

.comment-date {
	margin-bottom: 11px;
	font-size: 13px;
	font-family: "open sans",sans-serif;
}

.comment-date a {
	color: #6a6a6a;
	font-size: 11px;
	font-weight: 400;
}

.comment p {
	font-family: "open sans",sans-serif;
	font-weight: 400;
	line-height: 21px;
	font-size: 13px;
	color: #6a6a6a;
}

.comment .color {
	font-size: 14px;
	color: #00d387;
}

/***************** Leave a Comment Styling *****************/

.leave-a-comment h4 {
	font-size: 17px;
	color: #464646;
	margin-bottom: 20px;
}

.leave-a-comment .tagline {
	font-size: 14px;
	color: #888888;
	font-family: "open sans",sans-serif;
	margin-bottom: 30px;
}

.leave-a-comment .tagline .color {
	color: red;
}

.leave-a-comment .button:hover {
	background: #00d387
}

form input[type="text"] {
	width: 60%;
	font-family: "open sans",sans-serif;
	font-size: 12px;
	padding: 15px 11px;
}

.forms {
	margin-top: 20px;
}

textarea[placeholder] {
	font-family: "open sans",sans-serif;
	font-size: 12px;
	padding: 9px 11px;
}

.single-leave-comment h4 {
	color: #464646;
	margin-bottom: 25px;
	font-size: 19px;
	margin-bottom: 10px;
}

.single-leave-comment form input[type="text"] {
	width: 100%;
}

/********************************************************************/
/*  20. Preloader Styles */
/********************************************************************/

#preloader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #F6F6F6;
	z-index: 999999999999999999999;
}

.bokeh {
    font-size: 100px;
    width: 1em;
    height: 1em;
    position: relative;
    margin: 353px auto;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.1);
    list-style: none;
}

.bokeh li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%;
}

.bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #00C176;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
    animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
}

.bokeh li:nth-child(2) {
    top: 50%; 
    right: 0;
    margin: -.1em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -moz-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -ms-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    -o-animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
    animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
}

.bokeh li:nth-child(3) {
    left: 50%; 
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite;
    -moz-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite;
    -ms-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite;
    -o-animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite;
    animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite;
}

.bokeh li:nth-child(4) {
    top: 50%; 
    left 0;
    margin: -.1em 0 0 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite;
    -moz-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite;
    -ms-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite;
    -o-animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite;
    animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite;
}

@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}

@keyframes rota {
    to { transform: rotate(360deg); }
}

@-webkit-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-moz-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-ms-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-o-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

/********************************************************************/
/*  21. Pricing Tables Styles */
/********************************************************************/

.fullwidth-line {
	background: #47d7f7;
	padding-top: 30px;
	padding-bottom: 30px;
}

.fullwidth-line h3 {
	color: white;
	font-weight: 300;
	font-family: "Open sans",sans-serif;
	font-size: 23px;
	text-align: center;
	margin-bottom: 0px;
}

/********************************************************************/
/*  22. Pricing Tables Styles */
/********************************************************************/

#pricing-table-section {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #F9FBF4;
}

.animation-fadeIn {
	visibility: hidden;
}

.pricing-table .title {
	margin-bottom: 0px;
	text-align: left;
	font-family: "Open sans",sans-serif;
	font-weight: 300;
	font-size: 21px;
	color: white;
	background: #222222;
	padding: 27px;
	border-right: solid 1px #494949;
}

.pricing-table {
	border: none;
	background: white;
}

#pricing-table-section .pricing {
	padding: 0px;
}

.pricing-table .cost {
	color: #AFAFAF;
	font-size: 13px;
}

.pricing-table .bullet-item {
	border-right: dotted 1px #dddddd;
	padding: 15px 20px;
	text-align: left;
	font-size: 13px;
}

.pricing-table .bullet-item1 {
	padding-top: 30px;
}

.pricing-table .bullet-item-last {
	padding-bottom: 30px;
}

.pricing-table .bullet-item .subtext {
	color: rgb(112, 112, 112);
	line-height: normal;
	font-family: 'Helvetica', sans-serif;
	font-weight: 600;
	padding: 4px;
}

.pricing-table .cta-button {
	border-right: dotted 1px #dddddd;
	background: white;
	text-align: left;
}

/********************************************************************/
/*  23. Shortcode Page Styles */
/********************************************************************/

/***************** Blog Header Styling *****************/
.shortcode-header {
	background: url(../img/bg/shortcode-header.jpg) fixed;
	padding-top: 130px;
	padding-bottom: 130px;
}

.shortcode-header h2 {
	font-size: 45px;
	font-weight: 400;
	color: white;
	font-family: "open sans",sans-serif;
}

.shortcode-header p {
	color: #F0F0F0;
	font-size: 18px;
	font-weight: 300;
}

.shortcode-page {
	padding-top: 78px;
}

.shortcode-section h3 {
	text-align: left;
}

.shortcode-section {
	padding-bottom: 28px;
	padding-top: 28px;
}

.shortcode-section .section-container .title {
	padding-bottom: 0px;
}

/********************** 2. Alert Boxes Styles *********************/

.alert-box.radius {
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
	font-family: "Open sans",sans-serif;
	padding: 20px;
}

.alert-box.radius p {
	color: #c09853;
	margin-bottom: 0px;
	font-size: 14px;
}

.alert-box.success {
	background-color: #e9f2d2;
	border-color: #c0da66;
	font-family: "Open sans",sans-serif;
	padding: 20px;
}

.alert-box.success p {
	color: #88b12b;
	margin-bottom: 0px;
	font-size: 14px;
}

.alert-box.round {
	background-color: #ffe9e9;
	border-color: #e99f9f;
	font-family: "Open sans",sans-serif;
	padding: 20px;
}

.alert-box.round p {
	color: #d25c5a;
	margin-bottom: 0px;
	font-size: 14px;
}

.alert-box.secondary {
	background-color: #d9edf7;
	border-color: #bce8f1;
	font-family: "Open sans",sans-serif;
	padding: 20px;
}

.alert-box.secondary p {
	color: #3a87ad;
	margin-bottom: 0px;
	font-size: 14px;
}

/********************** 3. Block Hover *********************/

.th:hover {
	-webkit-box-shadow: 0 0 6px 1px rgba(2, 203, 160, 0.5);
	box-shadow: 0 0 6px 1px rgba(2, 203, 160, 0.5);
}

/********************** 4. Button Styles *********************/

.button-sizes .button:hover {
	background: #00d387;
}

.button.secondary {
	background-color: #6d1b81;
	border-color: #6d1b81;
	color: white;
}

.button.success {
	background-color: #5da423;
	border-color: #5da423;
	color: white;
}

.button.alert {
	background-color: #c60f13;
	border-color: #c60f13;
	color: white;
}

.button.radius {
	background: #fcb603;
	border-color: #fcb603;
}

.button.round {
	background: #009acb;
	border-color: #009acb;
}

/********************** 5. Table Hover Styles *********************/

.table-hover tr {
	background: white;
}

.table-hover tr:hover {
	background: #F5F5F5;
}

/********************** 6. Form Styles *********************/

.white-from input[type="text"] {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  padding: 0px 11px;
  border-radius: 2px;
  border: 1px solid #EEEEEE;
  margin-bottom: 22px;
  color: #222222;
  height: 48px;
  width: 100%;
}

.white-from textarea[placeholder] {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  padding: 17px 13px;
  border-radius: 2px;
  margin-bottom: 40px;
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  color: #222222;
}

.white-from span.postfix, .white-from label.postfix {
  background: #f2f2f2;
  border-color: #f2f2f2;
  border-left: none;
  color: #333333;
  padding-top: 7px;
}

.white-from .prefix, .white-from .postfix {
  height: 48px;
}

/********************** 7. Panels Styles *********************/

.panel.callout {
	border-style:none;
	padding: 1.25em;
	background: #00d387;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/********************** 8. Vertical Skills Styles *********************/

.graph {
	display: inline-block;
}

.graphs .graph-bar {
	background-color: #fc828a;
	margin: 0px 1%;
	border-radius: 2px;
	margin-right: 14px;
	width: 63px;
}

.bar-title {
	font-family: "Open sans",sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	color: #6a6a6a;
}

.graphs .bar-1 {
	height: 235px;
}

.graphs .bar-2 {
	height: 125px;
}

.graphs .bar-3 {
	height: 75px;
}

.graphs .bar-4 {
	height: 275px;
}

.graph .bar-5 {
	height: 180px;
}