/*------------------------------------------------------------------
[Master Stylesheet]

Project:		Bright HTML5 & CSS3 Theme
Version:		1.0
Last change:	24/11/14
Primary use:	Portfolio 
-------------------------------------------------------------------*/

@import url("font-awesome.min.css");
@import url("bright.styles.css");
@import url("bright.font.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic");
@import url("http://fonts.googleapis.com/css?family=Exo:900,900italic");

/*------------------------------------------------------------------
[Table of contents]

1. Body and Typography
2. Main navigation / nav
3. Top banner / .banner
4. Header
5. Background classes
6. Button styles
7. Scroll to top button / .scroll-to-top
8. Sections main / section tag
9. Columns / .columns
10. Icon Blocks
11. Number counter
12. Projects
12. Projects / .projects
13. Patterns
14. Services / .services
15. Settings tab / #settings
16. Page loader / #loader
17. Showcase block
18. Team members / .team
19. Logo Slider / .logo-slider
20. Pricing Tables / .pricing-tables
21. Blog Layout / .blog
22. Percentage Bars / .percentage-bars
23. Footer
24. Testimonials Banner / .testimonials
25. Contact section / .contact
26. Content block / .content
27. Blog styles
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[1. Body and Typography]
-------------------------------------------------------------------*/

body {
	font-family:"Open Sans", Sans-serif, Arial;
	font-size:14px;
	color:#333;
	line-height:22px;
	padding:0;
	margin:0;
}
html {
	min-height:100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
	padding:0; 
	margin:0;
}
a, 
a:before, 
a:after, 
button, 
button:before, 
button:after, 
.icon-circle-block:before, 
.icon-circle-block:after,
.icon-circle-block,
.counter-icon,
.counter-icon:after,
.services-heading,
.services-heading em,
.services-heading em:after,
nav, nav .logo, nav .logo img,
.team ul li:last-child,
.pricing-tables li,
.contact .fa,
.contact .fa:before,
.contact .fa:after {
	transition:all 0.3s ease-in-out;
}
.page, 
header > ul,
.contact form,
.columns,
.team,
.logo-slider {
	width:96%;
	max-width:1100px;
	margin:0 auto;
	display:block;
}
a img {
	border:none;
	outline:none;
}
.center {
	text-align:center;
}
.white {
	color:#ffffff;
}
.uppercase {
	font-size:35px;
	font-weight:900;
	font-family:Exo,"Arial";
	display:inline-block;
	margin:0 10px 10px 0;
}
.text-align-left {
	text-align:left;
}
h2 {
	font-size:28px;
	color:#333333;
	font-weight:300;
	margin:0 0 25px 0;
	display:inline-block;
}
h2 small {
	display:block;
	font-weight:600;
	font-size:16px;
	margin:10px 0 0 0;
	padding:0 20px 25px 20px;
	border-bottom:dashed 1px #999999;
}
h2.white, .white h2 {
	color:#ffffff;
}
h2.white small, .white h2 small {
	border-bottom-color:#ffffff;
}
p {
	margin:0 0 25px 0;
}
.txt-left {
	text-align:left;
}
.txt-right {
	text-align:right;
}
.txt-justify {
	text-align:justify;
}
.txt-center {
	text-align:center;
}
@media all and (max-width: 700px) {
	h2 {
		font-size:24px;
		line-height:28px;
	}
	h2 small {
		font-size:14px;
		line-height:18px;
	}
}


/*------------------------------------------------------------------
[2. Main navigation / nav]
-------------------------------------------------------------------*/

nav {
	position:fixed;
	top:0;
	width:100%;
	display:block;
	background-color:rgba(51,51,51,0.7);
	z-index:999;
	left:0%;
	top:0;
	height:100px;
}
nav.visible {
	height:70px;
	background:url(../images/nav.png) repeat-x top left #444444;
}
nav .logo img { 
	height:60px;
}
nav.visible .logo img {
	height:34px;
}
nav ul, nav li {
	list-style:none;
	margin:0;
	padding:0;
}
nav > .page > ul {
	float:right;
}
nav > .page > ul > li {
	float:left;
}
nav ul ul {
	display:none;
}
nav > .page > ul > li > a {
	font-weight:400;
	font-size:16px;
	line-height:16px;
	text-decoration:none;
	color:#cccccc;
	display:block;
	padding:42px 15px;
}
nav.visible > .page > ul > li > a {
    padding: 27px 15px;
}
nav > .page > ul > li > a.current,
nav > .page > ul > li.current > a {
	padding:42px 15px 37px 15px;
	border-bottom-style:solid;
	border-bottom-width:5px;
	text-shadow:1px 1px 1px #000000;
}
nav.visible > .page > ul > li > a.current,
nav.visible > .page > ul > li.current > a {
	padding:27px 15px 22px 15px;
}
nav .logo {
	display:inline-block;
	margin-top:18px;
}
nav ul ul {
	position:absolute;
	padding:0;
	margin:0;
}
nav ul ul:after {
	display:block;
	content:"";
	height:5px;
	margin-top:4px;
	width:100%;
	background-color:rgba(51,51,51,0.7);
}
nav ul ul li {
	margin:0;
	padding:0 12px 0 7px;
	list-style:none;
	background-color:rgba(51,51,51,0.7);
}
nav.visible ul ul li,
nav.visible ul ul:after {
	background-color:#444444;
}
nav ul ul li:first-child {
	padding-top:7px;
}
nav ul ul li:last-child {
	padding-bottom:7px;
}
nav ul ul a {
	color:#ffffff;
	text-decoration:none;
	display:block;
	font-weight:300;
}
nav ul ul a:before {
	font-family: "Bright Font";
	float:left;
	display:block;
	content:"n";
	font-size:12px;
	color:#cccccc;
	margin-right:5px;
}
nav .mobile-menu {
	display:none;
	width:55px;
	right:20px;
	top:50%;
	margin-top:-25px;
	background-color:transparent;
	height:50px;
	position:absolute;
	z-index:2;
	cursor:pointer;
	text-align:center;
	cursor:pointer;
}
nav .mobile-menu:before {
	display:inline-block;
	font-size:30px;
	margin:10px 0 0 0;
	line-height:30px;
	color:#ffffff;
	font-family:FontAwesome;
	content:"\f0c9";
}
@media all and (max-width: 800px) {
	nav ul {
		display:none;
		position:absolute;
		width:100%;
		float:none;
		padding:0;
		margin:12px 0 0 0;
		background-color:#444444;
		left:0;
	}
	nav .mobile-menu {
		display:block;
	}
	nav ul li {
		float:none!important;
		clear:both!important;
		padding:0!important;
		margin:0!important;
	}
	nav ul li a {
		padding:10px 0!important;
		margin:-1px 0 0 0!important;
		display:block!important;
		width:100%!important;
		text-align:center;
		border-bottom:solid 1px #777777;
		border-top:solid 1px #777777;
	}
}


/*------------------------------------------------------------------
[3. Top banner / .bannery]
-------------------------------------------------------------------*/

.banner h1 {
	font-size:50px;
	color:#444444;
	font-weight:300;
	line-height:50px;
	text-transform:uppercase;
	margin:400px 0 20px 0;
}
.banner h1,
.banner h2 {
	max-width:50%;
	margin-left:auto!important;
	margin-right:auto!important;
}
.banner .white h1,
.banner .white h2 {
	color:#ffffff;
}
.banner h2 {
	font-size:20px;
	margin:0;
	padding:0;
	font-weight:300;
	color:#444444;
	line-height:26px;
	display:block;
}
.banner .slick-track {
	height:1000px;
}
.banner .slick-dots li button {
	width:12px;
	height:12px;
	background-color:#444444;
	border-radius:50%;
}
.banner .slick-dots li.slick-active button {
	background-color:#ffffff;
}
.banner .slick-dots li button:before {
	display:none;
}
.banner .slick-dots {
	bottom:0;
}
.banner .slick-dots li {
	height:auto;
	width:auto;
}
.banner .slick-prev:before, .banner .slick-next:before {
	font-family: "Bright Font";
	color:#222222;
	font-size:80px;
}
.banner .slick-next:before {
	content:"n";
}
.banner .slick-prev:before {
	content:"o";
}
.banner .slick-slide {
	text-align:center;
}
.banner .btn {
	margin-top:130px;
}
h4 {
	font-size:16px;
	color:#333333;
	margin:0 0 10px 0;
	padding:0;
	font-weight:600;
}
@media all and (max-width: 800px) {
	.banner h1 {
		font-size:30px;
	}
}
@media all and (max-width: 600px) {
	.banner .slick-track {
		height:500px;
	}
	.banner .btn {
		margin-top:30px;
	}
	.banner h1 {
		margin:130px 0 10px 0;
		line-height:35px;
	}
}


/*------------------------------------------------------------------
[4. Header]
-------------------------------------------------------------------*/

header {
	width:100%;
	max-width:100%;
	clear:both;
	background-color:#444444;
}
header .banner {
	clear:both;
}
header li {
	list-style:none;
	margin:0;
	padding:0;
}
header > ul {
	padding:0;
}
header > ul, header a {
	color:#ffffff;
	font-weight:300;
	text-decoration:none;
}
header .breadcrumbs, header .breadcrumbs li {
	display:inline-block;
	font-size:13px;
}
header .breadcrumbs a {
	line-height:13px;
}
header .breadcrumbs a.current {
	font-weight:400;
	cursor:default;
}
header .breadcrumbs ul {
	margin:0;
	padding:7px 0;
}
header .breadcrumbs li:after {
	font-family: "Bright Font";
	content:"Z";
	font-size:10px;
	transform:rotate(180deg);
	display:inline-block;
	margin:0 10px;
	line-height:13px;
}
header .breadcrumbs li:last-child:after {
	display:none;
}
header .social-media {
	float:right;
	margin:0;
	padding:0;
}
header .social-media li {
	float:left;
	margin:0;
	padding:0;
	list-style:none;
	border-right:solid 1px #555555;
}
header .social-media li:first-child {
	border-left:solid 1px #555555;
}
header .social-media li a {
	display:block;
	padding:9px 0;
	width:40px;
	text-align:center;
	color:#bbbbbb;
}
header .social-media li a:hover {
	color:#444444;
}
header .social-media li a:before {
	font-size:18px;
}
@media all and (max-width: 600px) {
	header .social-media li a {
		width:auto;
		padding:9px 3px;
	}
	header .social-media li {
		border-left:none!important;
		border-right:none;
	}
}


/*------------------------------------------------------------------
[5. Background classes]
-------------------------------------------------------------------*/

.bg1 {
	background-image:url(../images/backgrounds/01.jpg);
}
.bg2 {
	background-image:url(../images/backgrounds/02.jpg);
}
.bg3 {
	background-image:url(../images/backgrounds/03.jpg);
}
.bg4 {
	background-image:url(../images/backgrounds/04.jpg);
}
.bg5 {
	background-image:url(../images/backgrounds/05.jpg);
}
.bg6 {
	background-image:url(../images/backgrounds/06.jpg);
}
.bg7 {
	background-image:url(../images/backgrounds/07.jpg);
}
.bg8 {
	background-image:url(../images/backgrounds/08.jpg);
}
.bg9 {
	background-image:url(../images/backgrounds/09.jpg);
}
.banner .slick-slide, section {
	background-size:100%;
}
.color-bg {
	padding:30px;
	color:#ffffff;
}
.color-bg h2 {
	font-size:24px;
	line-height:28px;
	margin:0;
	color:#ffffff;
}
@media all and (max-width: 800px) {
	.banner .slick-slide, section {
		background-size:300%!important;
	}
}
@media all and (max-width: 550px) {
	.banner .slick-slide, section {
		background-size:auto!important;
	}
}


/*------------------------------------------------------------------
[6. Button styles]
-------------------------------------------------------------------*/

.btn,
.btn:before,
.btn:after {
	transition:all 0.3s ease-in-out;
	text-decoration:none;
	cursor:pointer;
}
.btn {
	display:inline-block;
	background-color:#333333;
	padding:10px 50px;
	text-transform:uppercase;
	font-family:'Open Sans';
	font-weight:400;
	font-size:16px;
	position:relative;
	margin:7px;
	color:#ffffff;
	outline:none;
	border:none;
}
.btn:before,
.btn:after {
	display:block;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:5px;
}
.btn:after {
	left:-17px;
	top:-17px;
	padding:15px;
	opacity:0;
	border:solid 3px #ffffff;
}
.white .btn:after {
	border-color:#333333;
}
.btn:before,
.btn:hover:after {
	left:-8px;
	top:-8px;
}
.btn:before {
	border:solid 3px #333333;
	transition:all 0.3s linear;
}
.white .btn:before {
	border-color:#ffffff;
}
.btn:hover:before {
	opacity:0;
}
.btn:hover:after {
	padding:5px;
	opacity:1;
}
.btn:hover,
.white .btn {
	background-color:#ffffff;
}
.white .btn:hover {
	background-color:#333333;
	color:#ffffff;
}
.btn.round {
	padding:10px;
	width:25px;
}
.btn.round,
.btn.round:before,
.btn.round:after {
	border-radius:50%;
}
body a.btn2, .btn2 {
	padding:16px 25px;
	color:#ffffff;
	font-size:16px;
	line-height:20px;
	display:inline-block;
	position:relative;
	outline:none;
	border:none;
	cursor:pointer;
}
.btn2:before {
	display:block;
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	padding:10px;
	top:-12px;
	left:-12px;
	border:solid 2px #ffffff;
	opacity:0;
}
.btn2:hover {
	background-color:#ffffff;
}
.btn2:hover:before {
	padding:5px;
	top:-7px;
	left:-7px;
	opacity:1;
}


/*------------------------------------------------------------------
[7. Scroll to top button / .scroll-to-top]
-------------------------------------------------------------------*/

.scroll-to-top {
	display:block;
	width:45px;
	height:45px;
	position:fixed;
	bottom:20px;
	right:20px;
	text-align:center;
	background-image:url(../images/back-to-top-arrow.png);
	background-repeat:no-repeat;
	background-position:center 12px;
	background-color:rgba(255,255,255,0.4);
	cursor:pointer;
	opacity:0;
	display:none;
}
.scroll-to-top.visible {
	opacity:1;
	display:block;
}
.scroll-to-top:after {
	width:100%;
	padding:5px;
	position:absolute;
	top:-6px;
	left:-6px;
	height:100%;
	border:solid 1px #999999;
	content:"";
}
.scroll-to-top:hover {
	background-position:center -40px;
}


/*------------------------------------------------------------------
[8. Sections main / section tag]
-------------------------------------------------------------------*/

section {
	clear:both;
	padding:100px 0;
	background-color:#ffffff;
}
section.parallax {
	background-size:100%;
	background-attachment:fixed;
}
section a {
	text-decoration:none;
	cursor:pointer;
}
section a:hover {
	color:#000000;
}


/*------------------------------------------------------------------
[9. Columns / .columns]
-------------------------------------------------------------------*/

.columns:before, .columns:after {
	height:1px;
	display:block;
	content:"";
	width:100%;
	clear:both;
}
.columns-5 .column {
	width:18%;
	margin:0 1%;
}
.columns-4 .column {
	width:23%;
	margin:0 1%;
}
.columns-3 .column {
	width:31.3%;
	margin:0 1%;
}
.columns-2 .column {
	width:48%;
	margin:0 1%;
}
.columns-2 .side-column {
	width:26%;
	margin:0 0 0 4%;
}
.columns-2 .main-column {
	width:70%;
	margin:0 0 0 0;
}
.column {
	float:left;
	margin-bottom:20px!important;
}
@media all and (max-width: 800px) {
	.columns-5 .column {
		width:31.3%;
	}
	.columns-4 .column {
		width:48%;
	}
	.columns-3 .column,
	.columns-2 .column {
		width:98%;
	}
	.columns-2 .side-column {
		width:35%;
	}
	.columns-2 .main-column {
		width:61%;
	}
}
@media all and (max-width: 550px) {
	.columns-5 .column,
	.columns-4 .column,
	.columns-3 .column,
	.columns-2 .column,
	.columns-2 .side-column,
	.columns-2 .main-column {
		width:98%;
	}
	.columns-2 .side-column,
	.columns-2 .main-column {
		margin:0 auto;
	}
}


/*------------------------------------------------------------------
[10. Icon Blocks]
-------------------------------------------------------------------*/

.icon-circle-block {
	display:block;
	margin:0 auto 20px auto;
	width:100px;
	height:100px;
	text-align:center;
	position:relative;
}
.icon-circle-block,
.icon-circle-block:before,
.icon-circle-block:after {
	border-radius:50%;
}
.icon-circle-block:before {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	border:solid 1px #555555;
	padding:5px;
	top:-6px;
	left:-6px;
	content:"";
}
.icon-circle-block:after {
	opacity:0;
	border-width:2px;
	top:-15px;
	left:-15px;
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	padding:13px;
	content:"";
	border-style:solid;
}
.icon-circle-block em {
	font-size:30px;
	font-style:normal;
	color:#777777;
	display:inline-block;
	margin-top:35px;
}
.column:hover .icon-circle-block em {
	color:#444444;
}
.column:hover .icon-circle-block:before {
	opacity:0;
}
.column:hover .icon-circle-block:after {
	opacity:1;
	top:-7px;
	left:-7px;
	padding:5px;
}


/*------------------------------------------------------------------
[11. Number counter]
-------------------------------------------------------------------*/

.counter {
	font-weight:900;
	font-size:40px;
	line-height:43px;
}
.white .counter,
.white .counter-icon {
	color:#ffffff;
}
.counter-icon {
	display:inline-block;
	width:50px;
	height:50px;
	text-align:center;
	position:relative;
	margin:6px 6px 15px 6px;
}
.counter-icon .fa {
	display:inline-block;
	margin-top:10px;
	font-size:30px;
}
.counter-icon:after {
	position:absolute;
	top:-16px;
	left:-16px;
	width:100%;
	height:100%;
	border:solid 1px #444444;
	padding:15px;
	opacity:0;
	content:"";
}
.counters .column:hover .counter-icon:after {
	opacity:1;
	padding:5px;
	top:-6px;
	left:-6px;
}
.counters .column:hover .counter-icon {
	background-color:#ffffff;
}
.counter-icon,
.counter-icon:after {
	border-radius:50%;
}
.white .counter-icon:after {
	border:solid 1px #ffffff;
}
.counter-info {
	padding:15px 15px 0 15px;
	margin-top:15px;
	display:inline-block;
	font-weight:600;
	font-size:16px;
	border-top:solid 1px #333333;
}
.white .counter-info {
	color:#ffffff;
	border-top:solid 1px #ffffff;
}


/*------------------------------------------------------------------
[12. Projects / .projects]
-------------------------------------------------------------------*/

.projects ul, .projects li {
	margin:0;
	padding:0;
	list-style:none;
}
.projects {
	border-bottom:solid 5px #444444;
	padding-bottom:0;
}
.projects ul:before, .projects ul:after {
	clear:both;
	content:"";
	height:1;
	display:block;
	width:100%;
}
.projects li {
	float:left;
	width:25%;
	line-height:0px;
	position:relative;
	overflow:hidden;
}
.projects li ul {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:rgba(68,68,68,0.7);
	opacity:0;
}
.projects li li {
	width:100%;
	height:100%;
	margin-bottom:0;
	float:none;
}
.projects .white-block {
	position:absolute;
	bottom:-100%;
	left:0;
	width:100%;
	background-color:#ffffff;
	text-align:center;
	padding:10px 0;
	line-height:22px;
}
.projects .white-block strong {
	display:block;
	font-weight:400;
	font-size:16px;
	text-transform:uppercase;
}
.projects .white-block a {
	color:#444444;
	font-size:12px;
	text-decoration:none;
}
.projects li img {
	width:100%;
	outline:none;
	border:none;
}
.projects .fa {
	display:block;
	text-decoration:none;
	font-size:20px;
	color:#444444;
	width:50px;
	height:50px;
	text-align:center;
	position:absolute;
	top:50%;
	margin-top:-55px;
}
.projects .fa:hover {
	background-color:#ffffff!important;
}
.projects .fa:after {
	position:absolute;
	display:block;
	content:"";
	width:100%;
	height:100%;
	padding:11px;
	border:solid 1px #ffffff;
	top:-12px;
	left:-12px;
	opacity:0;
}
.projects .fa:hover:after {
	top:-6px;
	left:-6px;
	padding:5px;
	opacity:1;
}
.projects .fa,
.projects .fa:after {
	border-radius:50%;
}
.projects .fa,
.projects li ul,
.projects .white-block {
	transition:all 0.3s ease-in-out;
}
.projects .fa:before {
	display:inline-block;
	margin-top:15px;
}
.projects .fa.fa-chain {
	left:-50%;
}
.projects .fa.fa-search-plus {
	right:-50%;
}
.projects > ul > li:hover ul {
	opacity:1;
}
.projects > ul > li:hover .white-block {
	bottom:0;
}
.projects > ul > li:hover .fa.fa-chain {
	left:35%;
}
.projects > ul > li:hover .fa.fa-search-plus {
	right:35%;
}
@media all and (max-width: 800px) {
	.projects li {
		width:50%;
	}
	.projects > ul > li:hover .fa.fa-chain {
		left:30%;
	}
	.projects > ul > li:hover .fa.fa-search-plus {
		right:30%;
	}
}
@media all and (max-width: 550px) {
	.projects li {
		width:100%;
	}
}


/*------------------------------------------------------------------
[13. Patterns]
-------------------------------------------------------------------*/

.pattern-1 {
	background:url(../images/pattern-1.jpg) repeat top left;
	background-size:auto!important;
}
.pattern-2 {
	background:url(../images/pattern-2.jpg) repeat top left;
	background-size:auto!important;
}


/*------------------------------------------------------------------
[14. Services / .services]
-------------------------------------------------------------------*/

.services .column {
	text-align:left;
	font-weight:300;
}
.services-heading {
	font-size:18px;
	display:block;
	padding-left:35px;
	margin-bottom:10px;
	font-weight:400;
}
.services-heading em {
	display:block;
	float:left;
	font-size:25px;
	margin:0 0 0 -35px;
	position:absolute;
}
.services .column:hover em {
	color:#444444;
}
.services .column p {
	margin-left:35px;
}


/*------------------------------------------------------------------
[15. Settings tab / #settings]
-------------------------------------------------------------------*/
#settings {
	position:fixed;
	top:100px;
	left:-255px;
	background-color:#ffffff;
	padding:5px;
	line-height:0;
	transition:all 0.3s ease-in-out;
}
#settings.top70 {
	top:70px;
}
#settings.open {
	left:0;
}
#settings a {
	display:inline-block;
	width:32px;
	height:32px;
	cursor:pointer;
	background-position:center center;
	background-repeat:no-repeat;
}
#settings a:hover {
	background-image:url(../images/settings-hover.png);
}
#settings a.active {
	background-image:url(../images/settings-active.png);
	cursor:default;
}
#settings .default {
	background-color:#84B8D7;
}
#settings .green {
	background-color:#7ACBA3;
}
#settings .green2 {
	background-color:#BACD78;
}
#settings .orange {
	background-color:#FFB973;
}
#settings .red {
	background-color:#D94F4F;
}
#settings .pink {
	background-color:#DF6C8C;
}
#settings .purple {
	background-color:#C181CB;
}
.toggle-settings {
	display:inline-block;
	width:32px;
	height:32px;
	outline-width:5px;
	outline-style:solid;
	margin-left:6px;
	cursor:pointer;
	background-image:url(../images/settings-toggle.png);
	background-repeat:no-repeat;
	background-position:center center;
	outline-color:#222222;
	background-color:#222222;
	transition:all 0.2s linear;
}
.toggle-settings:hover,
.toggle-settings.open {
	background-image:url(../images/settings-toggle-open.png);
}


/*------------------------------------------------------------------
[16. Page loader / #loader]
-------------------------------------------------------------------*/

#loader {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#ffffff;
	z-index:999999999;
	text-align:center;
	transition:all 0.5s linear;
	opacity:1;
}
#loader.fadeout {
	opacity:0;
}
#loader img {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-80px;
	margin-left:-50px;
}


/*------------------------------------------------------------------
[17. Showcase block]
-------------------------------------------------------------------*/

.showcase-list, .showcase-list li {
	list-style:none;
	margin:0;
	padding:0;
}
.showcase-list {
	margin:0 0 25px 0;
}
.showcase-list li {
	position:relative;
	padding-left:20px;
}
.showcase-list li:before,
.showcase-list li:after {
	display:block;
	content:"";
	position:absolute;
	top:8px;
	left:0;
	width:5px;
	height:5px;
	border-radius:50%;
	transition:all 0.3s linear;
}
.showcase-list li:before {
	border:solid 1px #444444;
}
.showcase-list li:hover:before {
	border-color:transparent;
}
.showcase-list li:after {
	padding:6px;
	top:2px;
	left:-5px;
	border-width:1px;
	border-style:solid;
	opacity:0;
}
.showcase-list li:hover:after {
	opacity:1;
	padding:3px;
	top:5px;
	left:-3px;
}
.showcase-details, .showcase-details li {
	margin:0;
	padding:0;
	list-style:none;
}
.showcase-details li {
	padding:4px;
	border-bottom:solid 1px #cccccc;
}
.showcase-details strong {
	display:block;
	float:left;
	text-transform:uppercase;
	font-weight:400;
	width:100px;
}
.showcase-details li:first-child {
	border-top:solid 1px #cccccc;
}
.showcase-details li:before,
.showcase-details li:after {
	height:1px;
	content:"";
	display:block;
	clear:both;
	width:100%;
}


/*------------------------------------------------------------------
[18. Team members / .team]
-------------------------------------------------------------------*/

.team, .team li {
	margin:0;
	padding:0;
	list-style:none;
}
.team {
	margin:0 auto;
}
.team:before, .team:after {
	display:block;
	content:"";
	height:1px;
	width:100%;
	clear:both;
}
.team li {
	width:21%;
	margin:0 2%;
	float:left;
	position:relative;
}
.team > li,
.team li:before,
.team li:after,
.team li > img,
.team ul,
.team .fa {
	border-radius:50%;
}
.team li > img {
	width:100%;
	display:block;
}
.team > li:before,
.team > li:after {
	position:absolute;
	width:100%;
	height:100%;
	transition:all 0.3s linear;
	display:block;
	content:"";
}
.team > li:before {
	padding:8px;
	top:-9px;
	left:-9px;
	border-width:1px;
	border-style:solid;
	border-color:#cccccc;
}
.team > li:hover:before,
.team > li.active:before {
	border-width:9px;
	padding:0;
}
.team > li:after {
	padding:25px;
	top:-27px;
	left:-27px;
	border-width:2px;
	border-style:solid;
	opacity:0;
}
.team > li:hover:after,
.team > li.active:after {
	opacity:1;
	padding:15px;
	top:-17px;
	left:-17px;
}
.team > li:nth-child(1n+5) {
	margin-top:30px;
}
.team ul {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	display:block;
	text-align:center;
}
.team ul li:first-child {
	position:absolute;
	bottom:-60%;
	left:0;
	display:block;
	width:100%;
	padding:10px 0 20px 0;
	color:#000000;
	opacity:0.8;
	font-weight:600;
	font-size:18px;
	transition:all 0.4s linear;
}
.team ul li:last-child {
	background-color:#ffffff;
	z-index:1;
	position:absolute;
	text-align:center;
	width:76%;
	height:60%;
	padding:20% 12%;
	top:0;
	left:0;
	margin:0;
	font-size:13px;
	opacity:0;
}
.team .active ul li:last-child {
	opacity:1;
}
.team li:hover li:first-child {
	bottom:0;
}
.team ul li em {
	font-size:14px;
	font-weight:400;
	display:block;
	margin-top:3px;
}
.team .toggle-team-info {
	position:absolute;
	width:50px;
	height:50px;
	background-color:#333333;
	content:#ffffff;
	border-radius:50%;
	top:0px;
	left:0px;
	text-align:center;
	transition:all 0.2s linear;
	transform:scale(0.0);
	z-index:2;
}
.team .active .toggle-team-info {
	transform:scale(1.0);
}
.team .toggle-team-info:before {
	font-family:FontAwesome;
	content:"\f00d";
	display:inline-block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-12px;
	margin-left:-10px;
	transition:all 0.2s linear;
	font-size:25px;
	color:#ffffff;
	transform:rotate(45deg);
}
.team .active .toggle-team-info:before {
	transform:rotate(90deg);
	margin-left:-8px;
	margin-top:-11px;
}
.team > li:hover .toggle-team-info {
	transform:scale(1.0);
}
.team .team-social-info {
	position:absolute;
	width:100%;
	text-align:center;
	z-index:2;
	padding-top:25px;
}
.team .fa {
	width:35px;
	height:35px;
	background-color:#444444;
	text-align:center;
	display:inline-block;
	opacity:0;
}
.team li:hover .fa,
.team li.active .fa {
	opacity:1;
}
.team .fa:before {
	display:inline-block;
	font-size:20px;
	margin-top:8px;
	color:#ffffff;
}
@media all and (max-width: 800px) {
	.team li {
		width:46%;
	}
}
@media all and (max-width: 600px) {
	.team li {
		width:96%;
		margin-bottom:70px;
		float:none;
	}
	.team li:last-child {
		margin-bottom:30x;
	}
}


/*------------------------------------------------------------------
[19. Logo Slider / .logo-slider]
-------------------------------------------------------------------*/

.logo-slider {
	padding:0;
}
.logo-slider img {
	max-width:80%;
}
.logo-slider .slick-slide {
	text-align:center;
}
.logo-slider .slick-dots li button:before {
	content:"";
	border-radius:50%;
	background-color:#333333;
	width:12px;
	height:12px;
	display:block;
	opacity:1;
	transition:all 0.3s linear;
}
.logo-slider .slick-dots li button:hover:before {
	background-color:#777777;
}
.logo-slider .slick-dots li.slick-active button:before {
	background-color:#ffffff;
	opacity:1;
}
@media all and (max-width: 600px) {
	.logo-slider .slick-prev:before, .logo-slider .slick-next:before {
		font-family: "Bright Font";
		color:#222222;
		font-size:60px;
	}
	.logo-slider .slick-next:before {
		content:"n";
	}
	.logo-slider .slick-prev:before {
		content:"o";
	}
	.logo-slider .slick-next {
		right:-40px;
	}
	.logo-slider .slick-prev {
		left:-40px;
	}
	.logo-slider .slick-prev:hover:before, .logo-slider .slick-next:hover:before {
		color:#ffffff;
	}
}


/*------------------------------------------------------------------
[20. Pricing Tables / .pricing-tables]
-------------------------------------------------------------------*/

.pricing-tables .column {
	outline:solid 1px #ffffff;
	color:#ffffff;
	text-align:center;
	background-color:rgba(255,255,255,0.2);
}
.pricing-title {
	display:block;
	padding:20px 0;
	text-align:center;
	font-size:30px;
	line-height:35px;
	font-weight:400;
	border-bottom:solid 1px #ffffff;
	clear:both;
}
.pricing-total {
	padding:20px 0;
	background-color:#444444;
	border-bottom:solid 2px #ffffff;
	text-align:center;
	clear:both;
}
.pricing-amount {
	font-size:60px;
	line-height:60px;
	font-weight:800;
	display:inline-block;
	position:relative;
}
.pricing-amount small {
	font-size:20px;
	line-height:20px;
	float:right;
	font-weight:700;
	margin-top:8px;
	margin-left:5px;
}
.pricing-currency {
	font-size:20px;
	position:absolute;
	font-weight:400;
	color:#ffffff;
	margin-left:-15px;
	top:-12px;
}
.pricing-duration {
	font-size:16px;
	color:#ffffff;
	font-weight:300;
	position:absolute;
	right:0;
	bottom:-15px;
	margin-right:-35px;
}
.pricing-tables .pricing {
	display:inline;
}
.pricing-tables ul, .pricing-tables li {
	margin:0;
	padding:0;
	list-style:none;
}
.pricing-tables li {
	text-align:center;
	padding:20px 0;
	font-size:16px;
	font-weight:400;
	border-bottom:solid 1px #ffffff;
}
.pricing-tables li:hover {
	background-color:rgba(0,0,0,0.2);
}
.pricing-tables .btn, .pricing-tables .btn2 {
	margin-top:50px;
	margin-bottom:50px;
}


/*------------------------------------------------------------------
[21. Blog Layout / .blog]
-------------------------------------------------------------------*/

.blog .column {
	outline:solid 1px #D6D6D6;
}
.blog .post-thumb {
	margin:10px;
	display:block;
	text-align:left;
	position:relative;
	height:205px;
	overflow:hidden;
}
.blog .post-thumb > a {
	display:block;
	background-color:#444444;
}
.blog .post-thumb img {
	width:100%;
	display:block;
	height:auto;
	border:none;
	outline:none;
	transition:all 0.2s linear;
}
.blog .post-thumb a:hover img {
	opacity:0.7;
}
.blog .post-thumb ul,
.blog .post-thumb li {
	color:#ffffff;
	font-size:12px;
	text-transform:uppercase;
	margin:0;
	padding:0;
	list-style:none;
}
.blog .post-thumb ul {
	display:block;
	padding:3px 0;
	width:100%;
	background-color:rgba(68,68,68,0.7);
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
}
.blog .post-thumb li,
.blog .post-thumb li:after {
	display:inline-block;
}
.blog .post-thumb li:after {
	content:"|";
	margin:0 5px;
}
.blog .post-thumb li:last-child:after {
	display:none;
}
.blog .post-thumb li a {
	color:#ffffff;
	text-decoration:underline;
}
.blog h4 {
	text-align:center;
	margin:0 10px 5px 10px;
	display:block;
	padding:0;
	font-weight:400;
	font-size:16px;
}
.blog p {
	text-align:center;
	margin:0 10px 5px 10px;
	font-size:13px;
	font-weight:300;
	line-height:20px;
}
.blog .more-link {
	text-transform:uppercase;
	color:#333333;
	display:inline-block;
	margin-bottom:10px;
}


/*------------------------------------------------------------------
[22. Percentage Bars / .percentage-bars]
-------------------------------------------------------------------*/

.percentage-bars,
.percentage-bars li,
.percentage-bars ul {
	margin:0;
	padding:0;
	list-style:none;
}
.percentage-bars {
	font-style:italic;
	font-weight:600;
	font-size:16px;
}
.percentage-bars strong {
	font-weight:900;
	display:inline-block;
	margin-left:5px;
}
.percentage-bar {
	background-color:rgba(255,255,255,0.3);
	width:100%;
	border-bottom:solid 1px #ffffff;
	margin-top:7px;
}
.percentage-bar,
.percentage-bar-inner {
	height:20px;
}
.percentage-bar-inner {
	transition:all 0.8s linear;
}
.percentage-bar-inner.before-animate {
	width:0px!important;
}
.percentage-bars li {
	margin-bottom:35px;
}
.percentage-bars li:last-child {
	margin-bottom:0;
}


/*------------------------------------------------------------------
[23. Footer]
-------------------------------------------------------------------*/

footer {
	background-color:#333333;
	padding:30px 0;
	text-align:center;
	color:#ffffff;
	font-weight:300;
}
footer a {
	color:#ffffff;
	text-decoration:underline;
}
footer a:hover {
	text-decoration:none;
}
footer small {
	display:block;
	margin-top:7px;
	font-size:11px;
}


/*------------------------------------------------------------------
[24. Testimonials Banner / .testimonials]
-------------------------------------------------------------------*/

.testimonials {
	text-align:center;
}
.testimonials .slick-dots li {
	height:auto;
	width:auto;
}
.testimonials .slick-dots li button:before {
	display:none;
}
.testimonials .slick-dots li button {
	display:inline-block;
	width:12px;
	height:12px;
	border-radius:50%;
	background-color:#333333;
}
.testimonials .slick-dots .slick-active button {
	background-color:#ffffff!important;
}
.testimonials img {
	width:130px;
	height:auto;
	border-radius:50%;
	border:solid 5px #444444;
	display:inline-block;
	margin:0 auto 20px auto;
}
.testimonials p {
	width:96%;
	max-width:550px;
	font-weight:300;
	margin:0 auto 15px auto;
}
.testimonials h5,
.testimonials h6 {
	font-style:italic;
	margin:0;
	font-size:14px;
	line-height:20px;
}
.testimonials h5 {
	font-weight:900;
}
.testimonials h6 {
	font-weight:600;
}


/*------------------------------------------------------------------
[25. Contact section / .contact]
-------------------------------------------------------------------*/

.contact .column {
	padding-top:5px;
	line-height:20px;
	text-align:left;
}
.contact .fa {
	display:block;
	width:50px;
	height:50px;
	text-align:center;
	border:solid 1px #ffffff;
	position:relative;
	float:left;
	margin-right:15px;
	margin-top:-5px;
}
.contact .column:hover .fa {
	border-color:transparent;
}
.contact .column a {
	color:#ffffff;
	text-decoration:underline;
}
.contact .column a:hover {
	text-decoration:none;
}
.contact .fa,
.contact .fa:after {
	border-radius:50%;
}
.contact .fa:before {
	display:inline-block;
	font-size:25px;
	margin-top:13px;
	line-height:25px;
}
.contact .column:hover .fa:before {
	color:#444444;
}
.contact .fa:after {
	position:absolute;
	width:100%;
	height:100%;
	top:-12px;
	left:-12px;
	padding:10px;
	border-width:2px;
	border-style:solid;
	content:"";
	opacity:0;
}
.contact .column:hover .fa:after {
	top:-7px;
	left:-7px;
	padding:5px;
	opacity:1;
}
.contact form {
	display:block;
	margin-top:25px;
}
.contact form .required {
	color:#FF9999;
	font-weight:700;
}
.contact form label {
	display:block;
	font-weight:400;
	font-size:15px;
	margin-bottom:8px;
	text-align:left;
}
.contact form input,
.contact form textarea {
	display:block;
	background-color:rgba(255,255,255,0.3);
	outline:solid 1px #FFFFFF;
	border:none;
	width:98%;
	padding:7px 1%;
	margin-bottom:30px;
	text-align:left;
}
.contact .columns-2 input {
	width:96%;
	padding:7px 2%;
}
.contact form .columns {
	width:100%;
	max-width:100%;
}
.contact form .column {
	margin-bottom:0!important;
}
.contact form .column:first-child {
	margin-left:0;
}
.contact form .column:last-child {
	margin-right:0;
}
.contact form .columns-2 .column:nth-child(2n+2) {
	margin-left:3%;
}
.contact {
	position:relative;
	background-color:#333333;
}
.contact .map {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	outline:none;
	border:none;
	z-index:-1;
	opacity:0.6;
}


/*------------------------------------------------------------------
[26. Content block / .content]
-------------------------------------------------------------------*/

.content h1 {
	font-size:28px;
	color:#333333;
	font-weight:300;
	margin:0 0 25px 0;
}
.content h3 {
	color:#333333;
	text-transform:uppercase;
	padding-left:10px;
	margin-bottom:6px;
	font-weight:400;
	font-size:16px;
}
.content h1 small {
	font-size:13px;
	display:block;
	clear:both;
	width:100%;
	color:#333333;
	font-weight:400;
	margin-top:7px;
}
.blog-post-banner {
	height:350px;
	overflow:hidden;
}
.blog-post-banner img {
	position:absolute;
	left:0;
	top:-400px;
	width:100%;
}
.content a {
	color:#333333;
	text-decoration:underline;
}
.content a:hover {
	text-decoration:none;
}
.content ul {
	margin:0 0 20px 0;
	padding:0;
}
.content ul li {
	padding:0 0 0 25px;
	margin:0 0 3px 0;
	position:relative;
	list-style:none;
}
.content ul li:before {
	position:absolute;
	top:-4px;
	left:0;
	content:".";
	font-size:30px;
	line-height:10px;
}
.content blockquote {
	border-left:solid 10px #eeeeee;
	padding:4px 0 4px 15px;
	font-style:italic;
	margin:0 0 20px 0;
}


/*------------------------------------------------------------------
[27. Blog styles]
-------------------------------------------------------------------*/

.tags a {
	display:inline-block;
	padding:15px 25px;
	margin:0 4px 4px 0;
	background-color:#eeeeee;
	font-size:16px;
	line-height:18px;
	color:#888888;
	font-weight:300;
	text-decoration:none;
}
.tags a:hover {
	color:#ffffff;
}
.archives {
	border:solid 1px #cccccc;
}
.archives ul, .archives li {
	margin:0!important;
	list-style:none;
	padding:0!important;
}
.archives li:before {
	display:none;
}
.archives li {
	border-bottom:solid 1px #cccccc;
}
.archives li:last-child {
	border-bottom:none;
}
.archives a {
	display:block;
	padding:10px 20px;
	background-color:#ffffff;
	color:#333333;
	text-decoration:none;
}
.archives a:hover {
	color:#ffffff;
	outline-width:1px;
	outline-style:solid;
}
.archives, .tags, .search {
	margin:0 0 30px 0;
}
.archives ul ul {
	border-left:solid 15px #eeeeee;
	border-top:solid 1px #cccccc;
	display:none;
}
.archives .tab {
	position:relative;
}
.archives .tab:after, .archives .tab:before {
	content:"";
	position:absolute;
	width:1px;
	height:15px;
	background-color:#444444;
	right:15px;
	top:8px;
	display:inline-block;
}
.archives .tab:hover:after, .archives .tab:hover:before {
	background-color:#ffffff;
}
.archives .tab:after {
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
	margin-top:10px;
}
.archives .tab:before {
	-webkit-transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	transform:rotate(135deg);
}
.archives .tab.active:before {
	-webkit-transform:rotate(220deg);
	-moz-transform:rotate(220deg);
	transform:rotate(220deg);
}
.archives .tab.active:after {
	-webkit-transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	transform:rotate(135deg);
	margin-right:10px;
	margin-top:0;
}
.archives .tab.active:before, .archives .tab.active:after {
	top:15px;
	background-color:#ffffff;
}
.archives .tab.active {
	color:#ffffff;
}