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

Project:		Law Firm
Version:		1.0
Last change:	11/12/2015
Primary use:	HTML Template for Law Firm
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. import files
2. Body
3. Button Styles
4. Wrapper / #wrapper
5. Header / #header
6. Social Networks / .social-networks
7. Nav / #nav
8. Nav2 / #nav2
9. Beans Gallery / .beans-gallery
10. Main / #main
11. Container Block / .container-block
12. Main Heading / .main-heading
13. Services Holder / .services-holder
14. Services Col / .services-col
15. Practice Col / .practice-col
16. News Post / .news-post
17. Date Box / .date-box
18. Post Nav / .post-nav
19. Success Col / .success-col
20. Clients Gallery / .clients-gallery
21. Pager / .pager
22. Gallery Quotes / .gallery-quotes
23. Our Team / .our-team
24. Team Col / .team-col
25. Divider Nav / .divider-nav
26. Team Info / .team-info
27. Post Socials / .post-socials
28. Stroies Block / .stroies-block
29. Story Post / .story-post
30. Upcomming Events / .upcomming-events
31. Events Info / .events-info
32. Events Timer / .events-timer
33. Related Events / .related-events
34. Calender Holder / .calender-holder
35. Datepicker / .datepicker
36. Calender Nav / .calender-nav
37. Clients Carousel / .clients-carousel
38. Footer Holder / .footer-holder
39. Aside Block / .aside-block
40. Email Form / .email-form
41. News Articles / .news-articles
42. News Column / .news-column
43. Footer / #footer
44. Footer Nav / #footer-nav
45. Footer Aside / .footer-aside
46. Socialnetworks2 / .socialnetworks2
47. Breadcrumbs / .breadcrumbs
48. News Posts / .news-posts
49. Post Blog / .post-blog
50. Post Pagination / .post-pagination
51. Keyframes
52. Widget / .Widget
53. Nategoreis Nav / .categoreis-nav
54. Latest Post Nav / .latest-post-nav
55. Archives Nav / .archives-nav
56. Post Holder / .post-holder
57. Testimonial Carousel / .testimonial-carousel
58. Pagination2 / .pagination2
59. Tag Clouds / .tag-clouds
60. Author Box / .author-box
61. Comments Section / .comments-section
62. Comments Heading / .comments-heading
63. Multilevel Comments / .multilevel-comments
64. Commment Box / .commment-box
65. Leave Comment / .leave-comment
66. Comments Form / .comments-form
67. Blog Post / .blog-post
68. Blog Nav / .blog-nav
69. Other Links / .other-links
70. Blog Carousel / .blog-carousel
71. Pagination3 / .pagination3
72. About Info / .about-info
73. About Nav / .about-nav
74. Panel Group / .panel-group
75. Progress Area / .progress-area
76. Progress Box / .progress-box
77. Event Post / .event-post
78. Event Plans / .event-plans
79. Event Planers / .event-planers
80. Map Holder / .map-holder
81. Compaign Info / .compaign-info
82. Compaign Socials / .compaign-socials
83. Team Details Block / .team-details-block
84. Team Details / .team-details
85. Team Heading / .team-heading
86. Team Socials / .team-socials
87. Team nav / .team-nav
88. Education Block / .education-block
89. Team Info Cols / .team-info-cols
90. Team Frame / .team-frame
91. team Info Nav / .team-info-nav
92. team Contact Block / .team-contact-block
93. team Contact / .team-contact
94. Video Block2 / .video-block2
95. Trust Col / .trust-col
96. Benifits Block / .benifits-block
97. Benifits Col / .benifits-col
98. Consult Form / .consult-form
99. Select Control / .select-control
100. jcf-select / .jcf-select
101. Testimonial Post / .testimonial-post
102. Shortcodes / .shortcodes
103. Tabpanel / .tabpanel
104. Nav Tabs / .nav-tabs
105. Tab Content / .tab-content
106. Shortcode btn / .shortcode-btn
107. Shortcode Buttons / .shortcode-buttons
108. Pricing Plan / .pricing-plan
109. Star Rattings / .star-rattings
110. Plan Info / .plan-info
111. Alert / .alert
112. Main Gallery / .main-gallery
113. Forget Form / .forget-form
114. Attorneys Form / .attorneys-form

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


$mq-breakpoints: (
	// Base device classes
	mobile:      320px,
	tablet:      640px,
	desktop:    1024px,
	widescreen: 1200px,
	tvscreen:   1920px,

	// Tweakpoints
	mobileLandscape: 480px
);

// Show active breakpoint in top right corner of viewport
// $mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, widescreen, tvscreen);

@import "bootstrap-custom";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "base/markup-mixins";
@import "mq";

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?13180315');
  src: url('../fonts/fontello.eot?13180315#iefix') format('embedded-opentype'),
	   url('../fonts/fontello.woff?13180315') format('woff'),
	   url('../fonts/fontello.ttf?13180315') format('truetype'),
	   url('../fonts/fontello.svg?13180315#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
 span[class^="icon-"]:before,
 span[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
}
 
.icon-phone:before { content: '\e800'; } /* '' */
.icon-person:before { content: '\e801'; } /* '' */
.icon-help-circled:before { content: '\e802'; } /* '' */
.icon-user:before { content: '\e803'; } /* '' */
.icon-currency:before { content: '\e804'; } /* '' */
.icon-leaf:before { content: '\e805'; } /* '' */
.icon-group:before { content: '\e806'; } /* '' */
.icon-pencil:before { content: '\e807'; } /* '' */
.icon-location:before { content: '\e808'; } /* '' */
.icon-gym:before { content: '\e809'; } /* '' */
.icon-suitcases:before { content: '\e80a'; } /* '' */
.icon-marketing:before { content: '\e80b'; } /* '' */
.icon-email:before { content: '\e80c'; } /* '' */
.icon-sitemap:before { content: '\e80d'; } /* '' */
.icon-briefcase:before { content: '\e80e'; } /* '' */
.icon-laptop:before { content: '\e80f'; } /* '' */
.icon-dollar:before { content: '\e810'; } /* '' */
.icon-time:before { content: '\e811'; } /* '' */
.icon-hand:before { content: '\e812'; } /* '' */
.icon-helmet:before { content: '\e813'; } /* '' */
.icon-chat:before { content: '\e814'; } /* '' */
.icon-info:before { content: '\e815'; } /* '' */
.icon-tick:before { content: '\e816'; } /* '' */
.icon-question:before { content: '\e817'; } /* '' */
.icon-search:before { content: '\e818'; } /* '' */
.icon-close:before { content: '\e819'; } /* '' */
.icon-up:before { content: '\e81a'; } /* '' */
.icon-down:before { content: '\e81b'; } /* '' */
.icon-circle:before { content: '\e81c'; } /* '' */
.icon-building:before { content: '\e81d'; } /* '' */
.icon-verification:before { content: '\e81e'; } /* '' */
.icon-book:before { content: '\e81f'; } /* '' */
.icon-left:before { content: '\e820'; } /* '' */
.icon-right:before { content: '\e821'; } /* '' */
.icon-play:before { content: '\e822'; } /* '' */
.icon-facebook:before { content: '\e823'; } /* '' */
.icon-linkedin:before { content: '\e824'; } /* '' */
.icon-twitter:before { content: '\e825'; } /* '' */
.icon-youtube:before { content: '\e826'; } /* '' */
.icon-plus:before { content: '\e827'; } /* '' */
.icon-books:before { content: '\e828'; } /* '' */
.icon-menu:before { content: '\e829'; } /* '' */
.icon-building-filled:before { content: '\e82a'; } /* '' */
.icon-credit-card:before { content: '\e82b'; } /* '' */
.icon-calendar:before { content: '\e82c'; } /* '' */
.icon-ribbon:before { content: '\e82d'; } /* '' */
.icon-certificate:before { content: '\e82e'; } /* '' */
.icon-degree:before { content: '\e82f'; } /* '' */
.icon-down-open:before { content: '\e830'; } /* '' */
.icon-left-open:before { content: '\e831'; } /* '' */
.icon-right-open:before { content: '\e832'; } /* '' */
.icon-up-open:before { content: '\e833'; } /* '' */
.icon-share:before { content: '\e834'; } /* '' */

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

.bg-stretch{
	@extend %postionreset;
	img{
		top: 0;
		left: 0;
		position: absolute;
	}
}

/*------------------------------------------------------------------
3. Button Styles
-------------------------------------------------------------------*/
.btn-play{
	@extend %postionreset;
	left: 50%;
	top: 50%;
	margin:-27px 0 0 -22px;
	color:$white;
	font-size: 46px;
	display: block;
	@include square(42px);
	
	&:hover{
		opacity: 0.7;
		@include transition (all, 0.6s, ease);
	}
}
.tel{
	pointer-events:none;
	
	@include breakpoint($tablet){
		pointer-events:auto;
	}
	&:hover{
		text-decoration: none;
		
		@include breakpoint($tablet){
			text-decoration: underline;
		}
	}
}
.btn-zoom{
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius:50%;
	@include square(29px);
	background: $dark-gray;
	overflow: hidden;
	text-align: center;
	color:$white;
	font-size: 12px;
	line-height:29px;
	display: block;
	margin:-14px 0 0 -14px;
	@include transition (all, 0.6s, ease);
}
.btn-prev,
.btn-next{
	@include transition (all, 0.6s, ease);
	@include square(36px);
	background: $black2;
	border-radius:3px;
	margin:0;
	color:$white;
	font-size: 24px;
	line-height:27px;
	text-align: center;
	
	&.active,
	&:focus,
	&:hover{
		outline:none;
		color:$white;
		background: $brown;
	}
}
.btn-next{
	float: right;
	
	.fa-angle-right{margin:0 0 0 2px;}
}
.btn-next3,
.btn-prev3,
.btn-prev2,
.btn-next2{
	@include transition (all, 0.6s, ease);
	@include square(30px);
	background: $black2;
	position: absolute;
	border-radius:2px;
	left: 26px;
	top: 50%;
	margin:-10px 0 0;
	color:$white;
	font-size: 24px;
	line-height:27px;
	text-align: center;
	
	&.active,
	&:focus,
	&:hover{
		outline:none;
		color:$white;
		background: $brown;
	}
}
.btn-next3,
.btn-next2{
	left: auto;
	right: 24px;
	
	.fa-angle-right{margin:0 0 0 2px;}
}
.quotes-gallery .pager-prev,
.quotes-gallery .pager-next{display: none !important;}
.quotes-gallery .slick-arrow{
	top: 50%;
	border: 0;
	left: -60px;
	color:$white;
	overflow: hidden;
	margin:-20px 0 0;
	position: absolute;
	text-indent: 9999px;
	background: $black2;
	@include size(30px, 37px);
	@include transition (all, 0.6s, ease);
	@media only screen and (max-width:$screen-md-max){left: -40px;}
}
.quotes-gallery .slick-arrow:after{
	top: 0;
	left: 50%;
	text-indent: 0;
	font-size: 20px;
	line-height:37px;
	overflow: hidden;
	margin: 0 0 0 -3px;
	position: absolute;
	font-family:'FontAwesome';
}
.quotes-gallery .slick-prev:after{content:"\f104"; margin: 0 0 0 -5px;}
.quotes-gallery .slick-next:after{content:"\f105";}
.quotes-gallery .slick-next{
	left: auto;
	right: -60px;
	@media only screen and (max-width:$screen-md-max){
		left: auto;
		right: -40px;
	}
}
.quotes-gallery .slick-arrow:focus,
.quotes-gallery .slick-arrow:active,
.quotes-gallery .slick-arrow:hover{
	text-decoration: none;
	background: $light-gray2;
	color:$white;
	
}
.btn-default{
	color:$white;
	text-align: center;
	font:14px/18px $font-roboto;
	padding:16px 26px;
	border-radius:0;
	border:0;
	background: $light-gray3;
	text-transform: capitalize;
	@include transition (all, 0.6s, ease);
	
	
	.fa{
		font-size: 23px;
		margin:0 11px 0 -11px;
	}
	.txt{
		margin:0;
		@include vertical(inline-block, top);
	}
	&:focus,
	&.active,
	&:hover{
		background:$brown;
		color:$white;
		outline:none;
	}
	&.doctor{
		background: $white;
		display: block;
		padding:32px 26px 22px;
		color:$headings-color;
		border:2px solid $white;
		
		.fa{
			@include vertical(inline-block, top);
			margin:-8px 18px 0 -18px;
			font-size: 30px;
		}
		&:hover{
			background:$brown;
			color:$white;
			border:2px solid $brown;
		}
		&.add{
			border:2px solid $headings-color;
			
			&:hover{
				background: $headings-color;
				color:$white;
			}
		}
	}
}
/*------------------------------------------------------------------
4. Wrapper / #wrapper
-------------------------------------------------------------------*/
#wrapper{
	position: relative;
	overflow: hidden;
}
/*------------------------------------------------------------------
5. Header / #header
-------------------------------------------------------------------*/
#header{
	@extend %postionreset;
	bottom:auto;
	z-index:9999;
	border-bottom:3px solid $brown;
	background: $white;
	@extend %clearfix;
	@media only screen and (max-width:$screen-xs-max){position: relative !important;}
	.holder{
		padding-bottom:22px;
		padding-top: 21px;
		@include transition (all, 0.6s, ease);
	}
	.nav-opener{
		top: 20px;
		right: 20px;
		font-size: 45px;
		position: absolute;
		&:hover{
			opacity: 0.8;
			text-decoration: none;
		}
	}
	&.fixed-position{
		.header-top{
			max-height:0;
			@include transition (all, 0.6s, ease);
		}
		.holder{
			padding-top: 8px;
			@include transition (all, 0.6s, ease);
		}
	}
}
.header-top{
	max-height: 100px;
	overflow: hidden;
	background: $black2;
	@include transition (all, 0.6s, ease);
	.tell-holder{
		padding-top: 8px;
		@media only screen and (max-width:$screen-xs-max){
			text-align: center;
			margin-bottom: 8px;
		}
	}
	.tel{
		margin:0 0 0 34px;
		color:$light-gray;
		font-size: 13px;
		line-height:15px;
		text-transform: uppercase;
		position: relative;
		.fa{
			color:$light-gray;
			font-size: 18px;
			position: absolute;
			left: -27px;
			top: 1px;
		}
		a{
			color:$light-gray;
			pointer-events:none;
			
			&:hover{
				text-decoration: none;
			}
		}
	}
	.login{
		float: right;
		font-size: 13px;
		line-height:15px;
		text-transform: uppercase;
		letter-spacing:1px;
		padding:11px 15px 10px;
		border-left:1px solid #818181;
		color:$light-gray2;
		@include transition (all, 0.6s, ease);
		@media only screen and (max-width:$screen-xs-max){display: none;}
		&:hover{
			text-decoration: none;
			background: $link-color;
			color:$white;
		}
	}
}
/*------------------------------------------------------------------
6. Social Networks / .social-networks
-------------------------------------------------------------------*/
.social-networks{
	float: right;
	margin:0;
	font-size: 0;
	@media only screen and (max-width:$screen-xs-max){
		float: none;
		margin: 0 0 10px;
		text-align: center;
	}
	
	li{
		border-left:1px solid #818181;
		padding:0;
		@media only screen and (max-width:$screen-xs-max){border:0;}
		a{
			padding:8px 15px;
			display: block;
			color:$light-gray2;
			font-size: 18px;
			line-height:20px;
			@include transition (all, 0.6s, ease);
			&:hover{
				text-decoration: none;
				background: $link-color;
				color:$white;
			}
		}
	}
}
/*------------------------------------------------------------------
6. logo / .logo
-------------------------------------------------------------------*/
.logo{
	@include size(197px, 70px);
	float: left;
	margin:0 0 0 15px;
	@media only screen and (max-width:$screen-md-max){
		margin:0;
		@include size(175px, 62px);
	}
	@media only screen and (max-width:$screen-sm-max){
		float: none;
		display: block;
	}
	img{@extend %img-responsive;}
}
.nav-holder{
	float: right;
	max-width:900px;
	position: relative;
	padding:24px 21px 0 0;
	@media only screen and (max-width:$screen-md-max){
		max-width: 750px;
		padding:24px 0 0 0;
	}
	@media only screen and (max-width:$screen-sm-max){
		float: none;
		max-width: 100%;
		padding: 10px 0 0 0;
	}
	@media only screen and (max-width:$screen-xs-max){
		left: 0;
		right: 0;
		padding: 0;
		top: 108px;
		max-height: 0;
		overflow: hidden;
		background: $white;
		position: absolute;
		@include transition (all, 0.4s, ease);
	}
}
.btn-search{
	float: right;
	margin:0 0 0 15px;
	color:$light-gray2;
	font-size: 20px;
	@media only screen and (max-width:$screen-sm-max){
		top: -46px;
		right: 30px;
		position: absolute;
	}
	@media only screen and (max-width:$screen-xs-max){
		top: 15px;
		z-index: 999;
	}
}
.header-searchform{
	top: 136px;
	opacity: 0;
	right: 20px;
	width: 280px;
	padding: 10px;
	position: absolute;
	background: $white;
	visibility: hidden;
	border-radius: 0 0 5px 5px;
	border-bottom: 5px solid $brown;
	@include transition (all, 0.4s, ease);
	@media only screen and (max-width:$screen-sm-max){top: 152px;}
	@media only screen and (max-width:$screen-xs-max){
		left: 0;
		width: auto;
		z-index: 9999;
	}
	.form-group{
		float: left;
		width: 80%;
		margin: 0 5px 10px 0;
	}
	.submit{
		width: 18%;
		border: 0;
		height: 39px;
		color: $white;
		border-radius: 9px;
		background: $brown;
		&:hover{opacity:0.8;}
	}
}
.search-active{
	.header-searchform{
		right: 0;
		top: 96px;
		opacity: 1;
		visibility: visible;
		@media only screen and (max-width:$screen-md-max){top: 87px;}
		@media only screen and (max-width:$screen-sm-max){top: 59px;}
		@media only screen and (max-width:$screen-xs-max){top: 40px;}
	}
}
.nav-active{
	.nav-holder{
		max-height: 999px;
	}
}
/*------------------------------------------------------------------
7. Nav / #nav
-------------------------------------------------------------------*/
#nav{
	float: right;
	margin:4px 0 0;
	position:relative;
	padding:2px 29px 0 0;
	border-right:1px solid $light-gray2;
	@media only screen and (max-width:$screen-md-max){
		max-width: 700px;
		padding:2px 25px 0 0;
	}
	@media only screen and (max-width:$screen-sm-max){
		border: 0;
		float: none;
		max-width: 100%;
		text-align: center;
	}
	@media only screen and (max-width:$screen-xs-max){
		padding: 0;
		border-bottom:5px solid $brown;
	}
	ul{
		margin:0;
		font:16px/18px $font-sans-pro;
		text-transform: uppercase;
		@media only screen and (max-width:$screen-xs-max){padding: 20px 0 10px;}
		li{
			margin:0 0 0 34px;
			position:relative;
			@media only screen and (max-width:$screen-md-max){margin:0 0 0 18px;}
			@media only screen and (max-width:$screen-sm-max){text-align: left;}
			@media only screen and (max-width:$screen-xs-max){
				display: block;
				margin: 0 0 15px 30px;
			}
			
			a{
				color:$black2;
				@include transition (all, 0.6s, ease);
				@include element2(after, 7px, -19px, auto, auto);
				@media only screen and (max-width:$screen-xs-max){display: block;}
				&:after{
					@include transition (all, 0.6s, ease);
					background: url(../images/nav-linkbg.png) no-repeat;
					@include square(8px);
					@media only screen and (max-width:$screen-xs-max){left: -19px;}
				}
				&.anchor-active,
				&.active,
				&:focus,
				&:hover{
					color:$brown;
					text-decoration: none;
					&:after{background-position: -15px 0;}
				}
			}
			&.m-drop{position:static;}
			&.anchor-active,
			&.active{
				>a{
					color:$brown;
					text-decoration: none;
					&:after{background-position: -15px 0;}
				}
			}
			&.hover{
				>a{
					color:$brown;
					text-decoration: none;
					&:after{background-position: -15px 0;}
				}

				.small-drop,
				.mega-drop{
					visibility: visible;
					opacity: 1;
					top: 100%;
					left: 0;
					display: block;
				}
			}
			.small-drop{
				position: absolute;
				width: 200px;
				top: 140%;
				left: -30px;
				padding:47px 0 0;
				opacity: 0;
				visibility: hidden;
				@include transition (all, 0.4s, ease);
				@media only screen and (max-width:$screen-md-max){padding: 39px 0 0;}
				@media only screen and (max-width:$screen-sm-max){padding: 26px 0 0;}
				@media only screen and (max-width:$screen-xs-max){
					opacity: 1;
					padding: 0;
					width: 100%;
					display: none;
					position: static;
					visibility: visible;
				}
				&.add{
					width: 300px;
					@media only screen and (max-width:$screen-xs-max){
						width: 100%;
					}
				}
				ul{
					overflow: hidden;
					li{
						border-top:1px solid #d9d9d9;
						float: none;
						display: block;
						margin:0 0 12px;
						padding:12px 0 0;
						&:first-child{
							border:0;
							padding-top: 0;
						}
						a{
							&:after{display: none;}
							&:focus,
							&:hover{
								color:$brown;
								text-decoration: none;
							}
						}
						&.active a{color:$brown;}
					}
				}
			}
			.drop-holder{
				overflow: hidden;
				background: $white;
				padding:20px 15px 10px;
				border-radius: 0 0 5px 5px;
				border-bottom:5px solid $brown;
				@media only screen and (max-width:$screen-xs-max){
					border: 0;
					padding: 0;
				}
			}
			.mega-drop{
				@extend %postionreset;
				bottom:auto;
				padding:47px 0 0;
				top: 180%;
				left: -50px;
				padding:47px 0 0;
				opacity: 0;
				visibility: hidden;
				@include transition (all, 0.4s, ease);
				@media only screen and (max-width:$screen-md-max){padding: 39px 0 0;}
				@media only screen and (max-width:$screen-sm-max){padding: 26px 0 0;}
				@media only screen and (max-width:$screen-xs-max){
					opacity: 1;
					padding: 0;
					width: 100%;
					display: none;
					position: static;
					visibility: visible;
				}
				
				.drop-holder{
					padding:20px 15px;
					@media only screen and (max-width:$screen-xs-max){
						border: 0;
						padding: 0;
					}
				}

				.box{
					float: left;
					width: 65%;
					@media only screen and (max-width:$screen-xs-max){
						float: none;
						width: 100%;
					}
				}

				.alignright{
					float: right;
					width: 35%;
					@media only screen and (max-width:$screen-xs-max){
						float: none;
						width: 100%;
					}
					
					img{
						@extend %img-responsive;
						border:1px solid #818181;
						@include transition (all, 0.6s, ease);
					}
					a{
						&:after{display: none;}
					}
					&:hover{
						img{opacity: 0.8;}
					}
				}
				ul{
					width: 40%;
					float: left;
					margin:0 5% 0 0;
					@media only screen and (max-width:$screen-xs-max){
						float: none;
						width: 100%;
						margin:0 0 5px;
					}
					li{
						border-top:1px solid #d9d9d9;
						float: none;
						display: block;
						margin:0 0 12px;
						padding:12px 0 0;
						&:first-child{
							border:0;
							padding-top: 0;
						}
						a{
							&:after{display: none;}
							&:focus,
							&:hover{
								color:$brown;
								text-decoration: none;
							}
						}
						&.active a{color:$brown;}
					}
				}
			}
		}
	}
}
/*------------------------------------------------------------------
7. header-v2 / #header-v2
-------------------------------------------------------------------*/
#header-v2{
	left: 0;
	right: 0;
	z-index: 999;
	height: 138px;
	position: absolute;
	background: $white;
	border-bottom:3px solid $brown;
	@include transition (all, 0.4s, ease);
	&:after{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height:40px;
		content: "";
		background: $jet;
		@include transition (all, 0.4s, ease);
	}
	&.fixed-position{
		height: 70px;
		background: $white;
		.logo{
			@include size(150px, auto);
		}
		.top-nav{
			padding: 0;
			max-height:0;
			overflow: hidden;
		}
		#nav2{padding: 30px 0 0;}
		&:after{height:0;}
		.header-block{top: 9px;}
		#nav2{
			.mega-drop,
			.small-drop{padding: 20px 0 0;}
		}
	}
	.logo{
		@include transition (all, 0.4s, ease);
		@media only screen and (max-width:$screen-xs-max){
			@include size(130px, auto);
		}
		.logo-img{display: block;}
		.logo-home{display: none;}
	}
}
.header-block{
	top: 51px;
	left: 15px;
	z-index: 9;
	position: absolute;
	@include transition (all, 0.4s, ease);
}
.header-content{
	@extend %clearfix;
	position: relative;
	padding: 0 0 0 270px;
	@media only screen and (max-width:$screen-sm-max){padding: 0 0 0 170px;}
	.opener{display: none;}
}
.top-nav{
	z-index: 5;
	max-height: 50px;
	padding: 13px 0 0;
	@extend %listreset;
	position: relative;
	letter-spacing: -4px;
	@include transition (all, 0.4s, ease);
	li{
		margin: 0 10px 0 21px;
		letter-spacing: 0;
		display: inline-block;
		vertical-align: top;
		font-size: 11px;
		line-height: 16px;
		a{
			display: block;
			padding: 0 0 0 21px;
			position: relative;
			color: $light-gray17;
			span{
				position: absolute;
				left: 0;
				top: -2px;
				font-size: 15px;
				line-height: 15px;
			}
			&:hover{
				color: $link-color;
				text-decoration: none;
			}
		}
		&.faq{
			a{
				padding: 0 0 0 20px;
				span{
					top: -1px;
					font-size: 14px;
				}
			}
		}
		&.email{
			margin: 0 13px 0 33px;
			a{
				padding: 0 0 0 25px;
				span{
					top: -1px;
					font-size: 11px;
				}
			}
		}
		&.tel{
			a{
				padding: 0 0 0 15px;
				font-size: 14px;
				span{
					top: 0;
					font-size: 15px;
				}
			}
		}
	}
}
/*------------------------------------------------------------------
8. Nav2 / #nav2
-------------------------------------------------------------------*/
#nav2{
	@extend %clearfix;
	padding: 45px 0 0;
	position: relative;
	text-transform: uppercase;
	> ul{
		@extend %clearfix;
		@extend %listreset;
		letter-spacing: -4px;
		font-size: 0;
		line-height: 0;
		> li{
			line-height: 20px;
			letter-spacing: 0;
			position: relative;
			margin: 0 0 0 45px;
			@include vertical(inline-block, top);
			@media only screen and (max-width:$screen-md-max){margin: 0 0 0 28px;}
			@media only screen and (max-width:$screen-sm-max){margin: 0 0 0 14px;}
			font: {
				size: 14px;
				weight: 700;
			}
			> a{
				color: $tuatara;
				position: relative;
				@include transition (all, 0.4s, ease);
				&.anchor-active,
				&:hover,&:active,&:focus{
					color: $link-color;
					text-decoration: none;
				}
				.icon-search{
					display: block;
					margin: 1px 0 0;
					font-size: 21px;
				}
			}
			&.m-drop{position:static;}
			&.anchor-active,
			&.active{ >a{color:$yellow-green;}}
			&.hover{
				>a{
					color:$brown;
					text-decoration: none;
				}
				.small-drop,
				.mega-drop{
					visibility: visible;
					opacity: 1;
					top: 100%;
					right: 0;
					display: block;
				}
			}
		}
	}
	.small-drop{
		position: absolute;
		width: 200px;
		top: 150%;
		left: -30px;
		padding:40px 0 0;
		opacity: 0;
		visibility: hidden;
		@include transition (all, 0.4s, ease);
		@media only screen and (max-width:$screen-md-max){padding: 40px 0 0;}
		@media only screen and (max-width:$screen-sm-max){padding: 26px 0 0;}
		@media only screen and (max-width:$screen-xs-max){
			opacity: 1;
			padding: 0;
			width: 100%;
			display: none;
			position: static;
			visibility: visible;
		}
		&.add{
			width: 300px;
			@media only screen and (max-width:$screen-xs-max){
				width: 100%;
			}
		}
		ul{
			overflow: hidden;
			li{
				border-top:1px solid #d9d9d9;
				float: none;
				display: block;
				margin:0 0 12px;
				padding:12px 0 0;
				&:first-child{
					border:0;
					padding-top: 0;
				}
				a{
					color:$black3;
					&:focus,
					&:hover{
						color:$brown;
						text-decoration: none;
					}
				}
				&.active a{color:$brown;}
			}
		}
	}
	.drop-holder{
		overflow: hidden;
		text-align: left;
		background: $white;
		padding:20px 15px 10px;
		border-radius: 0 0 5px 5px;
		border-bottom:5px solid $brown;
		@media only screen and (max-width:$screen-xs-max){
			border: 0;
			padding: 0;
		}
	}
	.mega-drop{
		@extend %postionreset;
		bottom:auto;
		padding:47px 0 0;
		top: 150%;
		right: -50px;
		padding:40px 0 0;
		opacity: 0;
		visibility: hidden;
		@include transition (all, 0.4s, ease);
		@media only screen and (max-width:$screen-md-max){padding: 40px 0 0;}
		@media only screen and (max-width:$screen-sm-max){padding: 26px 0 0;}
		@media only screen and (max-width:$screen-xs-max){
			opacity: 1;
			padding: 0;
			width: 100%;
			display: none;
			position: static;
			visibility: visible;
		}
		.drop-holder{
			padding:20px 15px;
			@media only screen and (max-width:$screen-xs-max){
				border: 0;
				padding: 0;
			}
		}
		.box{
			float: left;
			width: 65%;
			@media only screen and (max-width:$screen-xs-max){
				float: none;
				width: 100%;
			}
		}
		.alignright{
			float: right;
			width: 35%;
			@media only screen and (max-width:$screen-xs-max){
				float: none;
				width: 100%;
			}
			img{
				@extend %img-responsive;
				border:1px solid #818181;
				@include transition (all, 0.6s, ease);
			}
			&:hover{img{opacity: 0.8;}}
		}
		ul{
			width: 40%;
			float: left;
			margin:0 5% 0 0;
			@media only screen and (max-width:$screen-xs-max){
				float: none;
				width: 100%;
				margin:0 0 5px;
			}
			li{
				border-top:1px solid #d9d9d9;
				float: none;
				display: block;
				margin:0 0 12px;
				padding:12px 0 0;
				&:first-child{
					border:0;
					padding-top: 0;
				}
				a{
					color:$black3;
					&:focus,
					&:hover{
						color:$brown;
						text-decoration: none;
					}
				}
				&.active a{color:$brown;}
			}
		}
	}
}
.home{
	#header-v2{
		background: rgba(20,20,20,0.5);
		.logo{
			.logo-home{display: block;}
			.logo-img{display: none;}
		}
		&.fixed-position{
			background: $white;
			.logo-home{display: none;}
			.logo-img{display: block;}
			#nav2{
				>ul{
					>li{
						>a{
							color: $tuatara;
							&:hover,&:active,&:focus{color: $link-color;}
			  			}
						&.active,
						&.hover{
							>a{color: $link-color;}
						}
					}
				}
			}
		}
	}
	#nav2{
		>ul{
			>li{
				>a{
					color: $white;
					&:hover,&:active,&:focus{color: $link-color;}
				}
				&.active,
				&.hover{
					>a{color: $link-color;}
				}
			}
		}
	}
}
#header3{
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	position: absolute;
	background: $white;
	.header-holder{
		padding-top:23px;
		padding-bottom:20px;
		background:url(../images/world-map.png) no-repeat 149px 0;
	}
	.header-box{padding-top: 20px;}
	.btn-info{
		padding:5px 24px;
		border-radius:15px;
		vertical-align:top;
		background: $brown;
		border-color: $brown;
	}
	.top-nav {
		margin:0;
		width: 400px;
		font-weight: 500;
		vertical-align:top;
		color: $light-gray14;
		display:inline-block;
		padding:9px 20px 0 0;
		@media only screen and (max-width:$screen-md-max){
			width: 250px;
		}
		li{
			margin:0;
			font-size: 15px;
			padding:0 10px 0 0;
		}
		a{
			color: $headings-color;
			&:hover{
				color: $brown;
				text-decoration: none;
			}
		}
	}
}
.search-form3{
	display:inline-block;
	vertical-align:top;
	width:164px;
	border-radius:20px;
	background:#ececec;
	margin:0 7px 0 10px;
	.form-control{
		background:none;
		color:#aaa;
		height:33px;
		padding:7px 12px;
		line-height:19px;
		box-shadow:none !important;
		font-weight:500;
		font-size:14px;
		float:left;
		width:136px;
		font-weight:500;
		-webkit-box-sizing:inherit;
		-moz-box-sizing:inherit;
		box-sizing:inherit;
		&:focus{
			box-shadow:none !important;
			border-color:transparent;
		}
	}
	.submit{
		border:0;
		padding:0;
		float:right;
		cursor:pointer;
		overflow:hidden;
		margin:6px 11px 0 0;
		text-transform:uppercase;
		outline:none;
	}
}

#nav3{
	font-weight:700;
	border: solid $light-gray21;
	border-width: 1px 0 0;
	.navbar-toggle{
		position: absolute;
		top: -65px;
		right: 10px;
		.icon-bar{
			background: #ddd !important;
		}
	}
	.nav-list{
		float: none;
		width: 100%;
		display: table;
		position: relative;
		table-layout: fixed;
		border-right:1px solid #eee;
		@media only screen and (max-width:$screen-xs-max){
			display: block;
		}
		> li{
			float: none;
			width: 100%;
			display: table-cell;
			vertical-align: middle;
			border-left:1px solid #eee;
			@media only screen and (max-width:$screen-xs-max){
				display: block;
			}
			&.m-drop{position:static;}
			&.anchor-active,
			&.active{ >a{
				color:$white;
				background: $brown;
				border-color: $brown;
			}}
			&.hover{
				>a{
					color:$white;
					background: $brown;
					border-color: $brown;
				}
				.small-drop,
				.mega-drop{
					visibility: visible;
					opacity: 1;
					top: 100%;
					right: 0;
					display: block;
				}
			}
			> a{
				display: block;
				padding: 12px 8px;
				text-align: center;
				color: $light-gray20;
				border-left:1px solid #eee;
				text-transform: capitalize;
				&.anchor-active,
				&:hover{
					color: $white;
					background: $brown;
					border-color: $brown;
					text-decoration: none;
				}
			}
		}
	}
	.mega-drop{
		left: 0;
		top: 100%;
		opacity: 0;
		bottom:auto;
		z-index: 9999;
		visibility: hidden;
		@extend %postionreset;
		@include transition (all, 0.4s, ease);
		@media only screen and (max-width:$screen-md-max){padding: 40px 0 0;}
		@media only screen and (max-width:$screen-sm-max){padding: 26px 0 0;}
		@media only screen and (max-width:$screen-xs-max){
			opacity: 1;
			padding: 0;
			width: 100%;
			display: none;
			position: static;
			visibility: visible;
		}
		.drop-holder{
			padding:20px 15px;
			@media only screen and (max-width:$screen-xs-max){
				border: 0;
				padding: 0;
			}
		}
		.box{
			float: left;
			width: 65%;
			@media only screen and (max-width:$screen-xs-max){
				float: none;
				width: 100%;
			}
		}
		.alignright{
			float: right;
			width: 35%;
			@media only screen and (max-width:$screen-xs-max){
				float: none;
				width: 100%;
			}
			img{
				@extend %img-responsive;
				border:1px solid #818181;
				@include transition (all, 0.6s, ease);
			}
			&:hover{img{opacity: 0.8;}}
		}
		ul{
			width: 40%;
			float: left;
			margin:0 5% 0 0;
			@media only screen and (max-width:$screen-xs-max){
				float: none;
				width: 100%;
				margin:0 0 5px;
			}
			li{
				border-top:1px solid #d9d9d9;
				float: none;
				display: block;
				margin:0 0 12px;
				padding:12px 0 0;
				@media only screen and (max-width:$screen-xs-max){
					margin:0;
					padding:0;
				}
				&:first-child{
					border:0;
					padding-top: 0;
				}
				a{
					color:$black3;
					@media only screen and (max-width:$screen-xs-max){
						padding: 12px 8px;
						display: block;
					}
					&:focus,
					&:hover{
						color:$brown;
						text-decoration: none;
					}
				}
				&.active a{color:$brown;}
			}
		}
	}
	.drop-holder{
		overflow: hidden;
		text-align: left;
		background: $white;
		padding:20px 15px 10px;
		border-radius: 0 0 5px 5px;
		border-bottom:5px solid $brown;
		@media only screen and (max-width:$screen-xs-max){
			border: 0;
			padding: 0;
			text-align: center;
		}
	}
	.small-drop{
		left: 0;
		top: 100%;
		opacity: 0;
		width: 200px;
		z-index: 9999;
		position: absolute;
		visibility: hidden;
		@include transition (all, 0.4s, ease);
		@media only screen and (max-width:$screen-md-max){padding: 40px 0 0;}
		@media only screen and (max-width:$screen-sm-max){padding: 26px 0 0;}
		@media only screen and (max-width:$screen-xs-max){
			opacity: 1;
			padding: 0;
			width: 100%;
			display: none;
			position: static;
			visibility: visible;
		}
		&.add{
			width: 300px;
			@media only screen and (max-width:$screen-xs-max){
				width: 100%;
			}
		}
		ul{
			overflow: hidden;
			li{
				border-top:1px solid #d9d9d9;
				float: none;
				display: block;
				margin:0 0 12px;
				padding:12px 0 0;
				@media only screen and (max-width:$screen-xs-max){
					margin:0;
					padding:0;
				}
				&:first-child{
					border:0;
					padding-top: 0;
				}
				a{
					color:$black3;
					@media only screen and (max-width:$screen-xs-max){
						padding: 12px 8px;
						display: block;
					}
					&:focus,
					&:hover{
						color:$brown;
						text-decoration: none;
					}
				}
				&.active a{color:$brown;}
			}
		}
	}
}
/*------------------------------------------------------------------
9. Beans Gallery / .beans-gallery
-------------------------------------------------------------------*/
.beans-gallery {
	@extend %boxreset;
	.beans-mask {
		@extend %boxreset;
		.beans-slideset {
			width: 99999px;
			float: left;
		}
	}
	.beans-slide{
		z-index: 1;
		float: left;
		min-height: 800px;
		@extend %boxreset;
		background-position: 50% 50%;
		background-size: cover;
		@media only screen and (max-width:$screen-md-max){
			min-height: 760px;
		}
		@media only screen and (max-width:$screen-xs-max){
			min-height: 0;
		}
		&.active{z-index: 2;}
	}
}
.main-slider{
	overflow: hidden;
	.beans-slide{
		min-height: 800px;
		background-position: 50% 50%;
		background-size: cover;
		@media only screen and (max-width:$screen-md-max){
			min-height: 760px;
		}
		@media only screen and (max-width:$screen-xs-max){
			min-height: 0;
		}
	}
	.slide-heading{
		h1{ color: $white; }
		.tel{
			color: $white;
			a{
				color: $white;
			}
		}
	}
}
.slide-content{
	z-index:999;
	@extend %clearfix;
	position:relative;
	min-height: 800px;
	text-align:right;
	@include v-align(slide-heading, middle);
	@media only screen and (max-width:$screen-xs-max){
		min-height: 600px;
	}
	.alignleft{
		position: absolute;
		bottom: 0;
		left: 72px;
		@include size(377px, 591px);
		img{@extend %img-responsive2;}
		@media only screen and (max-width:$screen-sm-max){
			left: 20px;
		}
		&.add{height: 471px;}
	}
}
.slide-heading{
	margin:70px 0 0;
	max-width: 700px;
	position:relative;
	text-align: center;
	padding:0 15.1% 0 0;
	@media only screen and (max-width:$screen-sm-max){
		padding: 0;
		max-width: 400px;
	}
	h1{
		font-size: 36px;
		line-height:40px;
		margin:0 0 16px;
		text-transform: uppercase;
	}
	.tel{
		margin:0 0 29px;
		letter-spacing:1px;
		display: block;
		color:$headings-color;
		font:700 30px/32px $font-sans-pro;
		
		a{
			pointer-events:none;
			font-size: 24px;
			color:$headings-color;
			
			&:hover{
				text-decoration: none;
			}
		}
	}
	.btn-default{
		padding:13px 27px;
		font-size: 18px;
		line-height:22px;
		background: $link-color;
		
		&:hover{background: $light-gray3;}
	}
}
/*------------------------------------------------------------------
10. Main / #main
-------------------------------------------------------------------*/
#main{overflow: hidden;}
.search-section{
	margin-top: -39px !important;
	margin-bottom: 30px !important;
	position: relative;
	z-index: 99;
	form{
		margin: 0 -2px 0 0;
		border-radius: 3px;
	}
	.button{
		margin: 0;
		border: 0;
		height: 80px;
		float: right;
		color: $white;
		font-size: 18px;
		min-width: 155px;
		line-height: 24px;
		background: $brown;
		padding: 25px 10px 29px;
		text-transform: uppercase;
		border-radius: 0 3px 3px 0;
		@media only screen and (max-width:$screen-xs-max){
			min-width: 70px;
			padding: 25px 5px 29px;
		}
		&:hover{background: $tuatara;}
	}
	.input-holder{
		overflow: hidden;
		padding: 0 0 0 60px;
		position: relative;
		background: $white;
		border: 1px solid $iron;
		border-right:0;
		border-radius: 3px 0 0 3px;
		@media only screen and (max-width:$screen-xs-max){padding: 0 0 0 30px;}
		label{
			position: absolute;
			left: 35px;
			top: 28px;
			font-size: 23px;
			line-height: 23px;
			color: $stack;
			@media only screen and (max-width:$screen-xs-max){left: 15px;}
		}
	}
	.form-control{
		border: 0;
		margin: 0;
		height: 78px;
		color: $nobel;
		background: none;
		padding:29px 20px;
		line-height: 20px;
		box-shadow:  none !important;
		font: {
			size: 16px;
			style: italic;
		}
		&::-webkit-input-placeholder {color: $nobel;}
		&:-moz-placeholder {color: $nobel;}
		&::-moz-placeholder {
		color: $nobel;
		opacity: 1;
		}
		&:-ms-input-placeholder {color: $nobel;}
	}
}
.info-list{
	right: 0;
	top: 50%;
	width: 75px;
	z-index: 991;
	position: fixed;
	@extend %clearfix;
	@extend %listreset;
	margin: -121px 0 0;
	background: $black-haze;
	text-align: center;
	font-size: 11px;
	line-height: 11px;
	text-transform: uppercase;
	@media only screen and (max-width:$screen-xs-max){
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		width: 100%;
		margin: 78px 0 0;
		table-layout: fixed;
		position: absolute;
		letter-spacing: -4px;
		border-bottom: 1px solid $gray-nurse;
	}
	li{
		display: block;
		width: 100%;
		border-top: 1px solid $iron;
		&:first-child{border-top: 0;}
		@media only screen and (max-width:$screen-xs-max){
			letter-spacing: 0;
			vertical-align: middle;
			width: 33.33%;
			border-top: 0;
			border-left: 1px solid $gray-nurse;
			@include vertical(inline-block, middle);
		}
		a{
			display: block;
			color: $shark;
			padding: 10px 5px 13px;
			@media only screen and (max-width:$screen-xs-max){padding: 8px 3px;}
			em{
				font-style: normal;
				@media only screen and (max-width:$screen-xs-max){
					width: 70%;
					text-align: left;
					@include vertical(inline-block, middle);
				}
			}
			span{
				display: block;
				font-size: 26px;
				line-height: 26px;
				margin: 0 0 12px;
				@media only screen and (max-width:$screen-xs-max){
					font-size: 14px;
					line-height: 14px;
					margin: 0 7px 0 2px;
					@include vertical(inline-block, middle);
				}
			}
			&:hover,&:active,&:focus{
				text-decoration: none;
				span{color: $brown;}
			}
		}
	}
}
/*------------------------------------------------------------------
11. Container Block / .container-block
-------------------------------------------------------------------*/
.container-block{
	padding-top: 73px;
	padding-bottom: 116px;
	@media only screen and (max-width:$screen-xs-max){padding-bottom: 20px;}
	
	&.practice{
		padding-top: 60px;
		padding-bottom: 82px;
		@include element(before, 0, -9999px, 0, -9999px, $light-gray4);
		@media only screen and (max-width:$screen-xs-max){padding-bottom: 60px;}
		
		&:before{display: block;}
		.main-heading{
			margin-bottom: 53px;
		}
		&.practice2{
			padding-top: 102px;
			padding-bottom: 49px;
			
			&:before{display: none;}
			.practice-block{
				margin-bottom: 30px;
			}
		}
	}
	&.news-block{
		padding-top: 106px;
		padding-bottom: 61px;
		@media only screen and (max-width:$screen-xs-max){
			padding-top: 80px;
			padding-bottom: 60px;
		}
	}
	&.gallery{
		padding-top: 60px;
		padding-bottom: 48px;
		
		.main-heading{
			margin-bottom: 59px;
			
			h2{color:$white;}
		}
	}
	&.team{
		padding-top: 69px;
		padding-bottom: 81px;
		
		.main-heading{
			margin-bottom: 72px;
		}
	}
	&.events{
		padding-top: 58px;
		padding-bottom: 61px;
	}
	&.clients2{
		padding-top: 91px;
		padding-bottom: 75px;
		@include element(before, 0, -9999px, 0, -9999px, $light-gray4);
		@media only screen and (max-width:$screen-xs-max){
			padding-top: 80px;
			padding-bottom: 60px;
		}
		
		&:before{
			display: block;
		}
		.main-heading{
			margin-bottom: 59px;
		}
	}
	&.about{
		padding-top: 94px;
		padding-bottom: 65px;
		@media only screen and (max-width:$screen-xs-max){padding-top: 80px;}
	}
	&.services{
		padding-top: 100px;
		padding-bottom: 13px;
		@media only screen and (max-width:$screen-xs-max){padding-top: 80px;}
	}
	&.trust{
		padding-top: 0;
		padding-bottom: 36px;
	}
	&.benifits{
		padding-top: 0;
		padding-bottom: 0;
		@media only screen and (max-width:$screen-xs-max){padding-bottom: 30px;}
	}
	&.consult{
		padding-top: 0;
		padding-bottom: 100px;
		@media only screen and (max-width:$screen-xs-max){padding-bottom: 60px;}
	}
}
/*------------------------------------------------------------------
12. Main Heading / .main-heading
-------------------------------------------------------------------*/
.main-heading{
	margin-bottom: 70px;
	text-align: center;
	
	h2{
		margin: 0;
		text-transform: uppercase;
		@include vertical(inline-block, top);
		background: url(../images/divider.png) repeat-x 0 100%;
		padding:0 8px 18px;
		@media only screen and (max-width:$screen-xs-max){
			font-size: 25px;
			line-height: 35px;
		}
	}
	&.news{
		text-align:left;
		margin-bottom: 40px;
		@media only screen and (max-width:$screen-sm-max){ margin: 0 -10px 40px;}
		@media only screen and (max-width:$screen-xs-max){ margin: 0 0 40px;}
		
		h2{
			font-size: 30px;
			line-height:24px;
			display: block;
			padding:0 0 26px;
			@media only screen and (max-width:$screen-md-max){font-size: 24px;}
			@media only screen and (max-width:$screen-sm-max){font-size: 18px;}
			@media only screen and (max-width:$screen-xs-max){
				font-size: 30px;
				line-height: 35px;
			}
		}
	}
	&.benifits{
		text-align:left;
		margin-bottom: 38px;
		
		h2{
			display: block;
			font-size: 30px;
			line-height:34px;
			padding:0 0 16px;
			@media only screen and (max-width:$screen-md-max){font-size: 24px;}
			@media only screen and (max-width:$screen-sm-max){font-size: 18px;}
			@media only screen and (max-width:$screen-xs-max){
				font-size: 30px;
				line-height: 35px;
			}
		}
	}
	&.consult{
		text-align:left;
		line-height:24px;
		margin:0 0 36px;
		
		h2{
			margin:0 0 36px;
			padding:0 0 16px;
			display: block;
			font-size: 30px;
			line-height:34px;
			@media only screen and (max-width:$screen-md-max){font-size: 24px;}
			@media only screen and (max-width:$screen-sm-max){font-size: 18px;}
			@media only screen and (max-width:$screen-xs-max){
				font-size: 30px;
				line-height: 35px;
			}
		}
		p{margin: 0;}
	}
}
/*------------------------------------------------------------------
13. Services Holder / .services-holder
-------------------------------------------------------------------*/
.services-holder{
	&.services{
		margin-bottom: 80px;
		@media only screen and (max-width:$screen-xs-max){margin-bottom: 0;}
	}
}
/*------------------------------------------------------------------
14. Services Col / .services-col
-------------------------------------------------------------------*/
.services-col{
	text-align: center;
	font-size: 14px;
	line-height:24px;
	@media only screen and (max-width:$screen-xs-max){margin-bottom: 50px;}
	.img-box{
		margin:0 auto 19px;
		border-radius:50%;
		@include square(111px);
		border:2px solid $headings-color;
		text-align: center;
		overflow: hidden;
		@include element2(after, 50%, auto, auto, 50%);
		&:after{
			background: url(../images/sprite.png) no-repeat 0 -39px;
			@include size(63px, 60px);
			margin:-29px 0 0 -32px;
			@include transition (all, 0.4s, ease);
		}
	}
	h2{
		margin:0 0 17px;
		font-size: 24px;
		line-height:28px;
		text-transform: uppercase;
		@media only screen and (max-width:$screen-sm-max){font-size: 22px;}
		a{
			color:$text-color;
			@include transition (all, 0.6s, ease);
			&:hover{
				color:$link-color;
				text-decoration: none;
			}
		}
	}
	p{margin: 0 0 31px;}
	&:hover{
		.img-box{
			@include transition (all, 0.6s, ease);
			background: $link-color;
			border-color:$link-color;
			
			&:after{background-position: 0 -129px;}
		}
		h2{
			@include transition (all, 0.6s, ease);
			
			a{color:$link-color;}
		}
		.btn-default:after{height: 100%;}
	}
	.btn-default{
		z-index: 2;
		position: relative;
		&:after{
			left: 0;
			bottom: 0;
			z-index: -1;
			content:"";
			position: absolute;
			background:$link-color;
			@include size(100%, 0);
			@include transition (all, 0.6s, ease);
		}
	}
	@include transition (all, 0.6s, ease);
	&.approch{
		.img-box{
			&:after{
				background-position:-91px -34px;
				@include square(68px);
				margin:-34px 0 0 -31px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position:-91px -120px;
				}
			}
		}
	}
	&.rules{
		.img-box{
			&:after{
				background-position: -188px -47px;
				@include square(51px);
				margin:-26px 0 0 -25px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position:-188px -133px;
				}
			}
		}
	}
	&.client{
		.img-box{
			&:after{
				background-position: -271px -42px;
				@include square(60px);
				margin:-30px 0 0 -31px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position:-271px -128px;
				}
			}
		}
	}
	&.defence{
		.img-box{
			&:after{
				background-position:-15px -228px;
				@include size(41px, 49px);
				margin:-24px 0 0 -21px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position:-15px -302px;
				}
			}
		}
	}
	&.divorce{
		.img-box{
			&:after{
				background-position:-79px -232px;
				@include size(46px, 40px);
				margin:-19px 0 0 -24px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position:-79px -306px;
				}
			}
		}
	}
	&.drug{
		.img-box{
			&:after{
				background-position:-166px -230px;
				@include size(47px, 44px);
				margin:-21px 0 0 -23px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position:-166px -304px;
				}
			}
		}
	}
	&.death{
		.img-box{
			&:after{
				background-position: -239px -227px;
				@include size(40px, 50px);
				margin:-24px 0 0 -21px;
			}
		}
		&:hover{
			.img-box{
				&:after{
					background-position: -239px -301px;
				}
			}
		}
	}
	&.style2{
		overflow: hidden;
		margin-bottom: 80px;
		@media only screen and (max-width:$screen-xs-max){margin-bottom: 50px;}
		.img-box{
			border-radius: 0;
			margin: 0 20px 0 0;
			@include vertical(inline-block, middle);
		}
		.holder{
			width: 50%;
			text-align: left;
			@include vertical(inline-block, middle);
			@media only screen and (max-width:$screen-xs-max){margin-bottom: 20px;}
		}
		p{margin:0;}
		.btn-default{
			width: 138px;
			padding: 16px 6px;
			@include vertical(inline-block, middle);
		}
		&.add{
			margin-bottom: 0;
			@media only screen and (max-width:$screen-xs-max){margin-bottom: 50px;}
		}
	}
}
/*------------------------------------------------------------------
15. Practice Col / .practice-col
-------------------------------------------------------------------*/
.practice-col{
	text-align: center;
	overflow: hidden;
	@media only screen and (max-width:$screen-xs-max){margin-bottom: 30px;}
	
	a{
		display: block;
		border:1px solid $light-gray6;
		position: relative;
		
		img{@extend %img-responsive;}
	}
	h3{
		margin: 0;
		font-size: 20px;
		line-height:24px;
		text-transform: uppercase;
		@extend %postionreset;
		top:auto;
		background: $light-gray4;
		padding:14px 10px;
		@include transition (all, 0.4s, ease);
	}
	.over{
		@extend %postionreset;
		background: rgba(219, 89, 64, 0.9);
		color:$white;
		font-size: 14px;
		line-height:24px;
		visibility: hidden;
		
		.box{
			display: table;
			@include square(100%);
			
			.block{
				@include vertical(table-cell, middle);
				@include square(100%);
				padding:10px 25px;
			}
			.frame{
				@include vertical(inline-block, middle);
				margin:3px 0 0;
			}
			.title{
				display: block;
				margin:0 0 7px;
				font-weight: 700;
				font-size: 20px;
				line-height:24px;
				text-transform: uppercase;
				color:$white;
			}
			p{margin: 0;}
		}
	}
	&:hover{
		h3{
			visibility: hidden;
			opacity: 0;
		}
		.over{
			animation-name:expand-up;
			-webkit-animation-name:expand-up;
			animation-duration:.7s;
			-webkit-animation-duration:.7s;
			animation-timing-function:ease;
			-webkit-animation-timing-function:ease;
			visibility:visible!important;
		}
	}
}
/*------------------------------------------------------------------
16. News Post / .news-post
-------------------------------------------------------------------*/
.news-post{
	background: $black2;
	overflow: hidden;
	padding:0 40px 0 0;
	margin:0 0 19px;
	color:$white;
	@include transition (all, 0.6s, ease);
	@media only screen and (max-width:$screen-sm-max){padding: 0 5px 0 0;}
	@media only screen and (max-width:$screen-xs-max){padding: 0 0 10px;}
	.alignleft{
		float: left;
		width: 32.6%;
		margin: 0 30px 0 0;
		@media only screen and (max-width:$screen-sm-max){
			width: 40.6%;
			margin: 0 10px 0 0;
		}
		@media only screen and (max-width:$screen-xs-max){
			width: 100%;
			float: none;
			margin: 0 0 10px;
		}
		a{
			display: block;
			position: relative;
		}
		img{
			@extend %img-responsive;
			@include transition (all, 0.6s, ease);
		}
		&:hover{img{opacity: 0.8;}}
	}
	.txt-box{
		overflow: hidden;
		padding: 21px 0 10px;
		font-size: 14px;
		line-height:24px;
		@media only screen and (max-width:$screen-md-max){
			line-height:20px;
			padding: 12px 0 4px;
		}
		@media only screen and (max-width:$screen-sm-max){
			font-size: 12px;
			line-height: 17px;
			padding: 6px 0 4px;
		}
		@media only screen and (max-width:$screen-xs-max){padding: 10px;}
		.city{
			word-spacing:3px;
			display: block;
			font-size: 13px;
			line-height:18px;
			margin:0 0 6px;
		}
		h3{
			margin: 0 0 10px;
			text-transform: uppercase;
			font-size: 18px;
			line-height:22px;
			color:$white;
			a{
				color:$white;
				@include transition (all, 0.4s, ease);
				&:hover{
					color: $brown;
					text-decoration: none;
				}
			}
		}
		p{margin: 0;}
	}
	.date-box{
		animation-duration:.8s;
		-webkit-animation-duration:.8s;
		animation-timing-function:ease;
		-webkit-animation-timing-function:ease;
		 -webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-ms-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		@media only screen and (max-width:$screen-md-max){
			animation-duration:.6s;
			-webkit-animation-duration:.6s;
		}
	}
	&:hover{
		background: #4a4a4a;
		.date-box{
			animation-name:slide-down;
			-webkit-animation-name:slide-down;
			visibility:visible!important;
			@media only screen and (max-width:$screen-md-max){
				animation-name:slide-down2;
				-webkit-animation-name:slide-down2;
			}
		}
	}
}
/*------------------------------------------------------------------
17. Date Box / .date-box
-------------------------------------------------------------------*/
.date-box{
	left: 0;
	top: 0;
	display: block;
	padding: 10px 5px 5px;
	@include size(82px, 89px);
	background: $brown;
	color:$white;
	font-size: 36px;
	line-height:40px;
	text-align: center;
	position: absolute;
	
	.month{
		font-size: 16px;
		line-height:20px;
		display: block;
		margin:0 0 11px;
	}
}
/*------------------------------------------------------------------
18. Post Nav / .post-nav
-------------------------------------------------------------------*/
.post-nav{
	margin: 0 0 8px;
	@extend %clearfix;
	
	li{
		margin:0 11px 0 0;
		padding: 0;
		@media only screen and (max-width:$screen-xs-max){margin:0 6px 0 0;}
		a{
			color:$white;
			@include transition (all, 0.8s, ease);
			.fa{
				font-size: 16px;
				margin:0 5px 0 2px;
			}
			&:focus,
			&:hover{
				color:$brown;
				outline:none;
				text-decoration: none;
			}
		}
	}
}
/*------------------------------------------------------------------
19. Success Col / .success-col
-------------------------------------------------------------------*/
.success-col{
	background: $light-gray4;
	padding:0 12px 24px 15px;
	line-height:24px;
	text-align:justify;
	letter-spacing:1px;
	@media only screen and (max-width:$screen-md-max){
		margin: 0 -15px;
		letter-spacing:2px;
	}
	@media only screen and (max-width:$screen-xs-max){margin: 0;}
	
	.video-block{
		margin:0 -12px 17px -15px;
		overflow: hidden;
		
		a{
			position:relative;
			display: block;
		}
		img{@extend %img-responsive;}
	}
	h3{
		padding:0 0 11px;
		margin: 0 0 12px;
		letter-spacing:2px;
		font-size: 16px;
		line-height:20px;
		text-transform: uppercase;
		border-bottom:1px solid #cfccca;
		@media only screen and (max-width:$screen-md-max){
			padding: 11px 0;
			margin: 0 0 13px;
		}
	}
	.title{
		display: block;
		text-transform: uppercase;
		color:$light-gray5;
		font-size: 13px;
		margin:0 0 2px;
	}
	p{
		margin: 0;
		@media only screen and (max-width:$screen-md-max){display: none;}
	}
}
/*------------------------------------------------------------------
20. Clients Gallery / .clients-gallery
-------------------------------------------------------------------*/
.clients-gallery{
	z-index: 2;
	padding: 20px 0;
	@extend %boxreset;
	.parallax-holder{
		@extend %postionreset;
		position: absolute !important;
		@include element2(before, 0, 0, 0, 0);
		&:before{background: rgba(219, 89, 64, 0.9);}
	}
	.gallery{
		z-index: 2;
		position: relative;
	}
}
/*------------------------------------------------------------------
21. Pager / .pager
-------------------------------------------------------------------*/
.quotes-pagination{
	width: 100%;
	display: table;
	table-layout: fixed;
	margin: 0 0 56px;
	li{
		padding: 0;
		display: table-cell;
		vertical-align: middle;
		&.active{
			transform: scale(1.1);
			img{
				transform: scale(1.1);
				@include transition (all, 0.6s, ease);
			}
		}
		a{
			display: block;
		}
		img{
			@extend %img-responsive;
			width: auto;
			margin: 0 auto;
			max-width: 100%;
		}
	}
}
/*------------------------------------------------------------------
21. Quotes Gallery / .quotes-gallery
-------------------------------------------------------------------*/
.quotes-gallery {
	width: 100%;
	padding:0 70px;
	position: relative;
	text-align: center;
	@media only screen and (max-width:$screen-xs-max){padding:0 20px;}
	.quotes-mask{ overflow: hidden; }
}
/*------------------------------------------------------------------
22. Gallery Quotes / .gallery-quotes
-------------------------------------------------------------------*/
.gallery-quotes{
	overflow: hidden;
	margin: 0 0 36px;
	padding: 74px 0 0;
	border:0;
	position:relative;
	text-align: center;
	color:$white;
	font:33px/48px $font-sans-pro;
	@media only screen and (max-width:$screen-sm-max){
		font-size: 20px;
		line-height: 25px;
	}
	@media only screen and (max-width:$screen-xs-max){
		font-size: 17px;
		line-height: 20px;
	}
	
	footer{
		&:before{display: none;}
	}
	cite{
		background:url(../images/sprite.png) no-repeat -376px -44px;
		@include size(106px, 47px);
		text-indent: -9999px;
		font-size: 0;
		display: block;
		margin:0 auto;
		text-align: left;
	}
	p{margin: 0 0 29px;}
	.fa{
		font-size: 43px;
		position: absolute;
		top: 6px;
		left: 50%;
		margin:0 0 0 -20px;
	}
	&.add{
		color:$text-color;
		font-size: 16px;
		line-height:22px;
		margin:0 0 30px;
		padding:48px 0 0;
		
		p{margin:0 0 15px;}
		cite{
			text-indent: 0;
			background: none;
			height: auto;
			width: auto;
			font-size: 13px;
			line-height:16px;
			font-style:normal;
			color:#959595;
			
			a{
				color:#959595;
				&:focus,
				&:hover{
					color:$brown;
					outline:none;
					text-decoration: none;
					@include transition (all, 0.6s, ease);
				}
			}
		}
		.fa{
			font-size: 20px;
			margin:0 0 0 -10px;
			top: 20px;
			color:$dark-brown;
		}
	}
}
/*------------------------------------------------------------------
22. Slide Social Networks / .slide-social-networks
-------------------------------------------------------------------*/
.slide-social-networks{
	overflow: hidden;
	float: none;
	
	li{
		float: none;
		@include vertical(inline-block, top);
		padding:0 7px;
		border:0;
		
		a{
			padding: 0;
			color:$white;
			
			.fa{
				font-size: 43px;
			}
			&:hover{opacity: 0.7;}
		}
	}
}
/*------------------------------------------------------------------
23. Our Team / .our-team
-------------------------------------------------------------------*/
.our-team{
	&.add{
		margin-bottom: 30px;
	}
}
/*------------------------------------------------------------------
24. Team Col / .team-col
-------------------------------------------------------------------*/
.team-col{
	@media only screen and (max-width:$screen-sm-max){
		padding-left: 10px;
		padding-right: 10px;
	}
	@media only screen and (max-width:$screen-xs-max){
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 30px;
	}
	.over{
		display: block;
		position:relative;
		@include element2(before, 0, 0, 0, 0);
		z-index:1;
		&:before{
			background: rgba($black, 0.4);
			z-index:-1;
			display: none;
		}
	}
	.img-box{
		border:1px solid $light-gray6;
		overflow: hidden;
		margin:0 0 10px;
		
		img{@extend %img-responsive;}
	}
	.btn-default{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 148px;
		margin:-20px 0 0 -74px;
		background: $brown;
		font-weight: 600;
		letter-spacing:2px;
		padding:11px 6px 11px 6px;
		display: none;
		
		&:hover{
			background: $dark-gray3;
		}
		.fa{
			@include vertical(inline-block, middle);
			margin:-4px 1px 0 4px;
			font-size: 14px;
		}
	}
	&:hover{
		.over{
			&:before{display: block;}
		}
		.btn-default{display: block;}
	}
}
/*------------------------------------------------------------------
25. Divider Nav / .divider-nav
-------------------------------------------------------------------*/
.divider-nav{
	margin:0 0 5px;
	height: 10px;
	text-align: center;
	
	li{
		float: none;
		@include vertical(inline-block, top);
		@include square(6px);
		padding:0;
		margin:0;
		border-radius: 50%;
		background: $light-gray6;
	}
}
/*------------------------------------------------------------------
26. Team Info / .team-info
-------------------------------------------------------------------*/
.team-info{
	border:1px solid $light-gray6;
	padding:10px 16px 4px;
	text-align: center;
	line-height:24px;
	@media only screen and (max-width:$screen-sm-max){
		font-size: 12px;
		line-height: 18px;
	}
	
	.team-title{
		overflow: hidden;
		padding:0 0 3px;
		margin:0 0 12px;
		border-bottom:1px solid #efeef1;
		
		h2{
			margin:0;
			text-transform: uppercase;
			font-size: 18px;
			line-height:22px;
			font-weight: 600;
			@media only screen and (max-width:$screen-sm-max){
				font-size: 16px;
				line-height:20px;
			}
			
			a{
				color:$headings-color;
				
				&:focus,
				&:hover{
					text-decoration: none;
					outline:none;
					color:$brown;
					@include transition (all, 0.6s, ease);
				}
			}
		}
		.designation{
			display: block;
		}
	}
	p{margin: 0 0 11px;}
}
/*------------------------------------------------------------------
27. Post Socials / .post-socials
-------------------------------------------------------------------*/
.post-socials{
	text-align: center;
	overflow: hidden;
	@media only screen and (max-width:$screen-sm-max){margin: 0 -10px 10px;}
	
	li{
		@include vertical(inline-block, top);
		margin:0 4px;
		padding: 0;
		@media only screen and (max-width:$screen-sm-max){margin: 0 3px;}
		
		a{
			display: block;
			border-radius:50%;
			border:1px solid $text-color;
			@include square(29px);
			color:$text-color;
			font-size: 15px;
			line-height:24px;
			@include transition (all, 0.6s, ease);
			
			.fa{@include vertical(inline-block, middle);}
			.fa-twitter{
			}
			&:hover{
				background: $brown;
				border-color:$brown;
				color:$white;
			}
		}
	}
}
/*------------------------------------------------------------------
28. Our Stroies / .our-stroies
-------------------------------------------------------------------*/
.our-stroies{
	padding-top: 42px;
	overflow: hidden;
}
/*------------------------------------------------------------------
28. Stroies Block / .stroies-block
-------------------------------------------------------------------*/
.stroies-block{
	overflow: hidden;
	width: 9999px;
}
/*------------------------------------------------------------------
29. Story Post / .story-post
-------------------------------------------------------------------*/
.story-post{
	@include size(300px, 277px);
	position:relative;
	float: left;
	@include element(before, 50%, 0, auto, 0, $light-gray6);
	
	&:before{
		height: 1px;
	}
	.stroy-box{
		@extend %postionreset;
		bottom:auto;
		border:1px solid $light-gray6;
		background: $white;
		padding:6px 2px 8px 11px;
		overflow: hidden;
		@include transition (all, 0.4s, ease);
		
		&:hover{text-decoration: none;}
		.alignleft{
			border:1px solid #b3b3b3;
			width: 72px;
			margin:6px 12px 0 0;
			float: left;
			
			img{@extend %img-responsive;}
		}
		.txt-box{
			color:$text-color;
			line-height:24px;
			overflow: hidden;
			
			p{margin: 0;}
		}
	}
	.strory-years{
		color:$headings-color;
		font:600 20px/24px $font-sans-pro;
		text-align: center;
		@extend %postionreset;
		top:auto;
		bottom:70px;
		
		
		.years{
			display: block;
		}
	}
	.circle{
		border:3px solid $light-gray6;
		background: $white;
		border-radius:50%;
		@include square(18px);
		position:absolute;
		top: 50%;
		left: 50%;
		margin:-8px 0 0 -10px;
		display: block;
		z-index: 1;
		&:after{
			animation-duration: 1s;
			border: 6px solid $brown;
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: -1;
			border-radius: 50%;
			visibility: hidden;
			-webkit-animation-duration: 1s;
			animation-iteration-count: infinite;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			-ms-animation-iteration-count: infinite;
		}
	}
	&.bottom{
		.stroy-box{
			top:auto;
			bottom:0;
		}
		.strory-years{
			bottom:auto;
			top:70px;
		}
	}
	&:hover{
		.stroy-box{
			color: $white;
			background: $brown;
			.txt-box{color: $white;}
		}
		.circle{
			&:after{
				visibility: visible;
				animation-name: hvr-ripple-out;
				-webkit-animation-name: hvr-ripple-out;
			}
		}
	}
}
/*------------------------------------------------------------------
30. Upcomming Events / .upcomming-events
-------------------------------------------------------------------*/
.upcomming-events{
	border:1px solid $light-gray6;
	padding:19px 14px 24px 24px;
	overflow: hidden;
	line-height:24px;
	@media only screen and (max-width:$screen-sm-max){padding:19px 10px 24px;}
	@media only screen and (max-width:$screen-xs-max){
		margin: 0 0 40px;
		padding: 19px 10px 0;
	}
	
	p{
		margin: 0 0 16px;
		
		a{
			&:hover{
				text-decoration: none;
				color:$dark-brown;
			}
		}
	}
}
/*------------------------------------------------------------------
31. Events Info / .events-info
-------------------------------------------------------------------*/
.events-info{
	overflow: hidden;
	margin:0 0 19px;
	
	.alignleft{
		border:1px solid $light-gray6;
		float: left;
		margin:5px 24px 0 0;
		width: 40.8%;
		@media only screen and (max-width:$screen-xs-max){
			float: none;
			width: 100%;
			margin: 0 0 20px;
		}
		
		a{display: block;}
		img{@extend %img-responsive;}
	}
	.events-txt{
		overflow: hidden;
		@media only screen and (max-width:$screen-md-max){overflow: visible;}
		
		h2{
			margin:0 0 12px;
			text-transform: uppercase;
			font-size: 18px;
			line-height:24px;
			font-weight:600;
			a{
				color: $headings-color;
				@include transition (all, 0.4s, ease);
				&:hover{
					color: $brown;
					text-decoration: none;
				}
			}
		}
		.post-nav{
			border-bottom:1px solid $light-gray6;
			padding:0 0 9px;
			margin:0 0 16px;
			li{
				a{
					color:$text-color;
					@include transition (all, 0.4s, ease);
					&:hover{
						color: $brown;
						text-decoration: none;
					}
				}
			}
		}
	}
	&:hover{
		.alignleft{
			animation-name:stretch-open;
			-webkit-animation-name:stretch-open;
			animation-duration:0.7s;
			-webkit-animation-duration:0.7s;
			animation-timing-function:ease-out;
			-webkit-animation-timing-function:ease-out;
			visibility:visible!important;
		}
	}
}
/*------------------------------------------------------------------
32. Events Timer / .events-timer
-------------------------------------------------------------------*/
.events-timer{
	font:600 14px/18px $font-family-base;
	margin:0;
	text-transform: uppercase;
	overflow: hidden;
	background: $brown;
	border:1px solid $dark-brown;
	text-align: center;
	color:$white;
	
	li{
		width: 25%;
		float: left;
		padding:18px 10px 15px;
		border-left:1px solid $dark-brown;
		
		&:first-child{border-left:0;}
		.txt{
			margin:0 0 11px;
			display: block;
			font:600 18px/22px $font-sans-pro;
		}
	}
}
/*------------------------------------------------------------------
33. Related Events / .related-events
-------------------------------------------------------------------*/
.related-events{
	overflow: hidden;
	
	h2{
		margin:0 0 25px;
		padding:0 0 10px;
		text-transform: uppercase;
		font-size: 18px;
		line-height:24px;
		font-weight:600;
		border-bottom:1px solid $light-gray6;
	}
	.events-box{
		overflow: hidden;
		padding:0 0 0 3px;
		@media only screen and (max-width:$screen-xs-max){ padding:0;}
		
		.img-box{
			width: 23.3%;
			overflow: hidden;
			position: relative;
			border:1px solid $light-gray6;
			@include vertical(inline-block, top);
			margin:0 0 0 10px;
			@media only screen and (max-width:$screen-md-max){margin:0 0 0 9px;}
			@media only screen and (max-width:$screen-sm-max){margin:0 0 0 6px;}
			@media only screen and (max-width:$screen-xs-max){
				width: 100%;
				display: block;
				margin:0 0 20px;
			}
			.over{
				@extend %postionreset;
				background: rgba(219, 89, 64, 0.9);
				color:$white;
				font-size: 14px;
				line-height:24px;
				visibility: hidden;
				text-align: center;
				
				.box{
					display: table;
					@include square(100%);
					
					.block{
						@include vertical(table-cell, middle);
						@include square(100%);
						padding:10px 15px;
					}
					.frame{
						@include vertical(inline-block, middle);
						margin:3px 0 0;
					}
					.title{
						display: block;
						margin:0 0 7px;
						font-weight: 700;
						font-size: 16px;
						line-height:20px;
						text-transform: uppercase;
						color:$white;
					}
				}
			}
			&:hover{
				a:hover{.over{visibility:visible;}}
			}
			
			a{display: block;}
			img{@extend %img-responsive;}
			
			&:first-child{margin-left: 0;}
		}
	}
}
/*------------------------------------------------------------------
34. Calender Holder / .calender-holder
-------------------------------------------------------------------*/
.calender-holder{
	padding:0 20px 18px;
	overflow: hidden;
	min-height:570px;
	border:1px solid $light-gray6;
	@media only screen and (max-width:$screen-sm-max){padding:0 10px 18px;}
	@media only screen and (max-width:$screen-xs-max){min-height: 0;}
	
	h3{
		margin: 0 0 16px;
		text-transform: uppercase;
		font-size: 18px;
		line-height:22px;
		font-weight: 400;
		color:$link-color;
	}
}
/*------------------------------------------------------------------
35. Datepicker / .datepicker
-------------------------------------------------------------------*/
.datepicker{
	margin:0 0 10px;
}
.ui-datepicker-header{
	margin:0 -20px 31px;
	background: $brown;
	border:1px solid $dark-brown;
	padding:10px 9px 12px;
	text-align: center;
	color:$white;
	overflow:hidden;
	@media only screen and (max-width:$screen-sm-max){margin:0 -10px 31px;}
}
.ui-datepicker-title{
	font:700 24px/28px $font-sans-pro;
}
.ui-datepicker-next,
.ui-datepicker-prev{
	background: $dark-brown2;
	@include square(26px);
	float: left;
	border-radius:3px;
	position:relative;
	margin:3px 0 0;
	cursor: pointer;
	@include transition (all, 0.6s, ease);
	
	&:before{
		position: absolute;
		left: 50%;
		top: 50%;
		margin:-6px 0 0 -6px;
		content:"";
		@include arrow(7px, 9px, 7px, 0, transparent, $white, transparent, transparent);
	}
	
	.ui-icon{
		text-indent: -9999px;
		display: block;
	}
	&:hover{
		text-decoration: none;
		background: $white;
		
		&:before{
			@include arrow(7px, 9px, 7px, 0, transparent, $dark-brown2, transparent, transparent);
			@include transition (all, 0.6s, ease);
		}
	}
}
.ui-datepicker-next{
	float: right;
	
	&:before{
		margin:-6px 0 0 -2px;
		@include arrow(7px, 0, 7px, 9px, transparent, transparent, transparent, $white);
	}
	&:hover{
		&:before{
			@include arrow(7px, 0, 7px, 9px, transparent, transparent, transparent, $dark-brown2);
		}
	}
}
.ui-datepicker-calendar{
	width:100%;
	text-align: center;
	font:13px/34px $font-sans-pro;
	@media only screen and (max-width:$screen-md-max){line-height: 41px;}
	@media only screen and (max-width:$screen-sm-max){line-height: 24px;}
	
	thead{
		color:$link-color;
		th{
			text-align: center;
			font-weight:400;
			text-transform: uppercase;
			line-height:25px;
			border:solid #dededd;
			border-width:0 1px 1px 0;
			
			&:last-child{border-right: 0;}
		}
	}
	tbody{
		
		tr{
			&:last-child{
				td{border-bottom:0;}
			}
			td{
				border:1px solid #dededd;
				a{
					color:$text-color;
					display: block;
				}
				&:first-child{border-left: 0;}
				&:last-child{border-right: 0;}
			}
		}
	}
}
/*------------------------------------------------------------------
36. Calender Nav / .calender-nav
-------------------------------------------------------------------*/
.calender-nav{
	font-size: 12px;
	line-height:14px;
	margin: 0 0 10px;
	overflow: hidden;
	@media only screen and (max-width:$screen-md-max){font-size: 11px;}
	
	li{
		padding:0 0 6px 18px;
		margin:0 0 5px;
		border-bottom:1px solid $light-gray6;
		@include element(before, 5px, auto, auto, 3px, $text-color);
		
		&:before{
			@include square(7px);
			border-radius:50%;
		}
		time{
			@include vertical(inline-block, top);
			margin:0 19px 0 0 ;
		}
		a{
			color:$text-color;
			@include transition (all, 0.4s, ease);
			&:hover{
				color:$brown;
				text-decoration: none;
			}
		}
	}
	&.reminder{
		margin: 0;
		li{
			&:before{
				background:$brown;
			}
		}
	}
}
/*------------------------------------------------------------------
37. Clients Carousel / .clients-carousel
-------------------------------------------------------------------*/
.clients-carousel {
	position: relative;
	border:1px solid $light-gray6;
	background: $white;
	padding:34px 92px 27px 106px;
	width: 100%;
	@media only screen and (max-width:$screen-xs-max){
		text-align: center;
		padding:34px 70px 27px;
	}
	
	.clients-mask {
		position: relative;
		overflow: hidden;
		width: 100%;
		
		.clients-slideset {
			width: 99999px;
			float: left;
		}
		.clients-slide {
			width: 100%;
			float: left;
			@media only screen and (max-width:$screen-sm-max){text-align: center;}
			
			.img-holder{
				@include vertical(inline-block, middle);
				margin:0 29px 0 0;
				@media only screen and (max-width:$screen-md-max){
					max-width: 100px;
					margin: 0 30px 0 0;
				}
				@media only screen and (max-width:$screen-xs-max){
					max-width: 150px;
					margin: 0 auto 20px;
					display: block;
				}
				
				img{
					@extend %img-responsive;
					filter: grayscale(100%);
					-webkit-filter: grayscale(100%);
				}
				&:last-child{
					margin: 0;
					@media only screen and (max-width:$screen-xs-max){margin: 0 auto 20px;}
				}
			}
		}
	}
}
/*------------------------------------------------------------------
38. Footer Holder / .footer-holder
-------------------------------------------------------------------*/
.footer-holder{
	background: $dark-gray;
	padding-top:74px;
	@include element(before, 0, -9999px, 0, -9999px, $dark-gray);
	&:before{display: block;}
}
/*------------------------------------------------------------------
39. Aside Block / .aside-block
-------------------------------------------------------------------*/
.aside-block{
	padding-bottom: 62px;
	color:$light-gray6;
	line-height:24px;
	@media only screen and (max-width:$screen-sm-max){padding-bottom: 0;}
	
	.column{
		@media only screen and (max-width:$screen-sm-max){
			margin-bottom: 20px;
		}
		p{margin: 0 0 20px;}
		.read-more{
			margin:0 0 35px;
			@include vertical(inline-block, top);
			@include transition (all, 0.6s, ease);
			
			&:hover{
				text-decoration: none;
				color:$white;
			}
		}
		&:hover{
			h2:before{width: 90px;}
		}
	}
	h2{
		margin: 0 0 24px;
		padding:0 0 24px;
		font-size: 24px;
		line-height:28px;
		text-transform: uppercase;
		color:$white;
		@include element(before, auto, auto, 0, 0, $brown);
		
		&:before{
			@include size(70px, 2px);
			@include transition (all, 0.6s, ease);
		}
	}
	h3{
		margin:0 0 19px;
		color:$white;
		font:700 18px/22px $font-roboto;
		text-transform: capitalize;
	}
	.privacy{
		color:$white;
		font:13px/16px $font-roboto;
		&:hover{
			color: $brown;
			text-decoration: none;
		}
	}
}
/*------------------------------------------------------------------
40. Email Form / .email-form
-------------------------------------------------------------------*/
.email-form{
	margin:0 0 12px;
	@extend %clearfix;
	
	.form-group{
		margin:0;
		@extend %clearfix;
		background: $black3;
		padding:0 15px 0 0;
		width: 100%;
		border-radius:2px;
		
		.form-control{
			float: left;
			@include size(90%, 42px);
			background: none;
			border:0;
			color:$dark-gray2;
			padding:10px 20px;
			font:14px/22px $font-roboto;
			
			&.active,
			&:focus,
			&:hover{
				box-shadow:none;
			}
		}
		.btn-default{
			background: none;
			@include size(17px, 24px);
			color:#363636;
			margin:9px 0 0;
			float: right;
			padding: 0;
			
			.fa{
				margin:0;
				font-size: 17px;
			}
			&:hover{
				color: $brown;
				@include transition (all, 0.6s, ease);
			}
		}
	}
}
/*------------------------------------------------------------------
41. News Articles / .news-articles
-------------------------------------------------------------------*/
.news-articles{
	overflow: hidden;
	padding: 2px 0 0;
	
	&.twitter{
		.news-column{
			position: relative;
			padding:17px 0 25px 36px;
			@media only screen and (max-width:$screen-md-max){padding: 17px 0 16px 36px;}
			
			.fa-twitter-square{
				position: absolute;
				top: 21px;
				left: 0;
				font-size: 20px;
				color:$dark-gray2;
				@include transition (all, 0.6s, ease);
			}
			p{
				a{
					color:$light-gray6;
					&:focus,
					&:hover{
						text-decoration: none;
						color:$brown;
						@include transition (all, 0.6s, ease);
					}
				}
			}
			&:first-child{
				padding-top: 0;
				
				.fa-twitter-square{top: 3px;}
			}
			&:hover{
				.fa-twitter-square{color: $brown;}
			}
		}
	}
	&.address{
		padding: 0;
		.news-column{
			padding:15px 0 24px;
			@media only screen and (max-width:$screen-md-max){
				font-size: 12px;
				padding: 15px 0 27px;
			}
			.txt{
				float: left;
				width: 90px;
				margin:0 9px 0 0;
				@media only screen and (max-width:$screen-md-max){width: 64px;}
			}
			
			&:first-child{
				padding-top: 0;
			}
		}
	}
}
/*------------------------------------------------------------------
42. News Column / .news-column
-------------------------------------------------------------------*/
.news-column{
	overflow: hidden;
	border-top:1px solid #363636;
	padding: 16px 0 20px;
	@media only screen and (max-width:$screen-md-max){padding: 15px 0 17px;}
	
	.alignleft{
		float: left;
		width: 26%;
		margin:4px 14px 0 0;
		border-radius:3px;
		overflow: hidden;
		
		a{
			display: block;
			@include transition (all, 0.6s, ease);
			@include element2(before, 0, 0, 0, 0);
			&:before{
				opacity: 0;
				background: rgba(0, 0, 0, 0.6);
				@include transition (all, 0.6s, ease);
			}
			&:hover .btn-zoom{background: $brown;}
		}
		img{@extend %img-responsive;}
	}
	.address-box{
		overflow: hidden;
		margin:0;
		line-height:24px;
		
		a{
			color:$light-gray6;
			
			&:hover{
				text-decoration: none;
				color:$brown;
				@include transition (all, 0.6s, ease);
			}
		}
		.tel{
			pointer-events:none;
			@media only screen and (max-width:$screen-md-max){pointer-events: auto;}
		}
	}
	.txt-box{
		overflow: hidden;
		line-height:20px;
		@media only screen and (max-width:$screen-md-max){
			font-size: 12px;
			line-height: 18px;
		}
		
		p{margin:0 0 9px;}
		time{
			font-size: 13px;
			line-height:18px;
			@media only screen and (max-width:$screen-md-max){
				font-size: 10px;
				line-height: 15px;
			}
		}
			
		a{
			color:$light-gray6;
			
			&:focus,
			&:hover{
				text-decoration: none;
				@include transition (all, 0.6s, ease);
				color:$brown;
				outline:none;
			}
		}
	}
	&:first-child{
		border:0;
		padding-top: 0;
	}
	.btn-zoom{opacity: 0;}
	&:hover{
		.alignleft{
			.btn-zoom{opacity: 1;}
			a:before{opacity: 1;}
		}
	}
}
/*------------------------------------------------------------------
43. Footer Socials / .footer-socials
-------------------------------------------------------------------*/
.footer-socials{
	margin:0;
	padding:9px 0 0;
	overflow: hidden;
	
	li{
		padding: 0;
		margin:0 1px 0 0;
		
		a{
			display: block;
			color:$dark-gray2;
			
			&:hover{
				@include transition (all, 0.6s, ease);
				text-decoration: none;
				color:$brown;
			}
			.fa{
				font-size: 20px;
				line-height:12px;
				@include vertical(inline-block, top);
			}
		}
	}
}
/*------------------------------------------------------------------
43. Footer / #footer
-------------------------------------------------------------------*/
#footer{
	background: $black4;
	color:$dark-gray2;
	border-top:1px solid #343434;
	overflow: hidden;
	
	a{
		color:$dark-gray2;
		&:hover{
			color:$brown;
			text-decoration: none;
			@include transition (all, 0.6s, ease);
		}
	}
	.holder{
		padding-top: 29px;
		padding-bottom: 33px;
	}
	.copyrights{
		padding-top: 0;
		
		p{margin: 0;}
	}
}
/*------------------------------------------------------------------
44. Footer Nav / #footer-nav
-------------------------------------------------------------------*/
.footer-nav{
	margin:0;
	float: right;
	text-transform: capitalize;
	font:700 14px/18px $font-sans-pro;
	
	li{
		padding:0;
		margin:0 0 0 15px;
	}
}
/*------------------------------------------------------------------
45. Footer Aside / .footer-aside
-------------------------------------------------------------------*/
.footer-aside{
	padding-top:30px;
	background: $dark-gray;
	@include element(before, 0, -9999px, 0, -9999px, $dark-gray);
	&:before{display: block;}
	.holder{
		margin-bottom: 40px;
		padding-bottom: 40px;
		border-bottom: 1px solid $storm-dust;
	}
}
.contact-info{
	display: inline-block;
	vertical-align: bottom;
	width: 24%;
	position: relative;
	color: $iron-2;
	padding: 0 0 29px 29px;
	@media only screen and (max-width:$screen-sm-max){
		width: 49%;
	}
	@media only screen and (max-width:$screen-xs-max){
		width: 100%;
	}
	ul{
		@extend %listreset;
		@extend %clearfix;
		font-size: 14px;
		line-height: 18px;
	}
	.icon-location{
		position: absolute;
		left: 0;
		top: -2px;
		font-size: 20px;
		line-height: 20px;
	}
	address{
		display: block;
		font-style: normal;
		margin: 0;
		font-size: 14px;
		line-height: 18px;
	}
	.title{
		display: block;
		margin: 0 0 15px;
	}
	a{
		color: $iron-2;
		&:hover{
			color: $white;
			text-decoration: none;
		}
	}
}
/*------------------------------------------------------------------
46. Socialnetworks2 / .socialnetworks2
-------------------------------------------------------------------*/
.socialnetworks2{
	@extend %listreset;
	padding: 10px 0 0;
	@extend %clearfix;
	li{
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 10px 33px;
		a{
			color: $iron-2;
			font-size: 36px;
			line-height: 42px;
			@include transition (all, 0.6s, ease);
			&.icon-twitter{font-size: 40px;}
			&.icon-linkedin{font-size: 42px;}
			&.icon-facebook{font-size: 39px;}
			&:hover{color:$brown;}
		}
	}
}
.banner-block{
	overflow: hidden;
	border-bottom:3px solid $brown;
	z-index:1;
	@include element2(after, 0, 0, 0, 0);
	&:after{
		z-index:-1;
		background: rgba(0, 0, 0, 0.6);
	}
	.bg-stretch{z-index:-1;}
	&.center-block{text-align: center;}
	&.right-block{text-align: right;}
}
.banner-box{
	height: 352px;
	padding-top: 158px;
	@include v-align2(banner-heading, $valign: middle);
	@media only screen and (max-width:$screen-xs-max){padding-top: 190px;}
}
.banner-heading{
	margin:11px 0 0;
	h1{
		margin:0 0 15px;
		color:$white;
		text-transform: uppercase;
		font-size: 36px;
		line-height:40px;
	}
}
/*------------------------------------------------------------------
47. Breadcrumbs / .breadcrumbs
-------------------------------------------------------------------*/
.breadcrumbs{
	margin: 0;
	overflow: hidden;
	color:$brown;
	text-transform: capitalize;
	ul{
		overflow: hidden;
		margin:0;
		font-style:italic;
		font-size: 18px;
		line-height:22px;
		font-weight:300;
		li{
			padding: 0 11px 0 0;
			@include element2(after, 0, auto, auto, -10px);
			
			&:after{
				content:"/";
				color:$brown;
			}
			&:first-child{
				&:after{display: none;}
			}
			a{
				color:$brown;
				@include transition (all, 0.6s, ease);
				&:hover{
					color:$white;
					text-decoration: none;
				}
			}
		}
	}
}
/*------------------------------------------------------------------
48. News Posts / .news-posts
-------------------------------------------------------------------*/
.news-posts{
	padding-top: 100px;
	padding-bottom:78px;
	@media only screen and (max-width:$screen-xs-max){
		padding-top: 40px;
		padding-bottom: 20px;
	}
}
/*------------------------------------------------------------------
49. Post Blog / .post-blog
-------------------------------------------------------------------*/
.post-blog{
	overflow: hidden;
	margin:0 0 50px;
	line-height:24px;
	@media only screen and (max-width:$screen-xs-max){
		font-size: 12px;
		line-height:18px;
	}
	.post-img{
		z-index: 999;
		position: relative;
		border:1px solid $light-gray6;
		overflow: hidden;
		margin:0 0 26px;
		
		a{
			position: relative;
			display: block;
		}
		img{@extend %img-responsive;}
	}
	h2{
		margin:0 0 12px;
		text-transform: uppercase;
		font-size: 24px;
		line-height:28px;
		@media only screen and (max-width:$screen-xs-max){
			font-size: 20px;
			line-height:24px;
		}
	}
	p{margin: 0 0 19px;}
	.post-nav{
		margin:0 0 21px;
		font-size: 14px;
		line-height:18px;
		@media only screen and (max-width:$screen-xs-max){
			font-size: 10px;
			line-height:14px;
		}
		li{
			a{
				color:$light-gray5;
				.fa{color:$headings-color;}
				&:hover{
					@include transition (all, 0.6s, ease);
					color:$brown;
					
					.fa{color:$brown;}
				}
			}
		}
	}
	.btn-default{
		padding: 12px 36px;
		background: $brown;
		
		&:hover{background: $light-gray3;}
	}
	.date-box{
		left: 30px;
		top: 30px;
		@media only screen and (max-width:$screen-xs-max){
			left: 15px;
			top: 15px;
			font-size: 20px;
			line-height: 30px;
			@include square(60px);
			.month{
				margin: 0;
				font-size: 14px;
				line-height: 16px;
			}
		}
	}
	&:hover{
		.date-box{
			animation-name:slide-down;
			-webkit-animation-name:slide-down;
			animation-duration:.8s;
			-webkit-animation-duration:.8s;
			animation-timing-function:ease;
			-webkit-animation-timing-function:ease;
			visibility:visible!important;
			 -webkit-animation-fill-mode: forwards;
			-moz-animation-fill-mode: forwards;
			-ms-animation-fill-mode: forwards;
			-o-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
			@media only screen and (max-width:$screen-md-max){
				animation-name:slide-down2;
				-webkit-animation-name:slide-down2;
				animation-duration:.6s;
				-webkit-animation-duration:.6s;
			}
			@media only screen and (max-width:$screen-xs-max){
				animation-name:slide-down322;
				-webkit-animation-name:slide-down322;
				animation-duration:.6s;
				-webkit-animation-duration:.6s;
			}
		}
	}
}
/*------------------------------------------------------------------
50. Post Pagination / .post-pagination
-------------------------------------------------------------------*/
.post-pagination{
	padding:31px 0 0;
	font-size: 12px;
	line-height:34px;
	min-height: 79px;
	@media only screen and (max-width:$screen-xs-max){
		margin: 0 -10px 20px 0;
	}
	ul{
		margin:0;
		li{
			padding:0;
			overflow: hidden;
			margin:0 5px 0 0;
			vertical-align: top;
			@include transition ( all, 0.6s, ease);
			@media only screen and (max-width:$screen-xs-max){margin:0 1px 0 0;}
			a{
				display: block;
				overflow: hidden;
				border-radius:3px;
				background: $light-gray7;
				border:1px solid $light-gray7;
				text-align: center;
				@include square(38px);
				&.active,
				&:hover{
					@include transition (all, 0.6s, ease);
					text-decoration: none;
					background: $white;
					border-color:$brown;
				}
				.btn-next,
				.btn-prev{
					float: left;
					color:$white;
					background: transparent;
					border-color: transparent;
				}
			}
			.fa{padding: 4px 0 0;}
			&.next,
			&.prev{
				a{
					width: auto;
					height: auto;
					color:$white;
					display: block;
					background: $dark-gray3;
					border-color:$dark-gray3;
					
					&:hover{
						border-color:$brown;
						background:$brown;
					}
				}
				.txt{
					width:0;
					float: left;
					font-size: 18px;
					overflow: hidden;
					@include transition ( all, 0.6s, ease);
				}
				&:hover{
					.txt{
						@include size(67px, 38px);
						@media only screen and (max-width:$screen-xs-max){
							@include square(0);
						}
					}
				}
			}
		}
	}
}
/*------------------------------------------------------------------
51. Keyframes
-------------------------------------------------------------------*/
@keyframes stretch-open{
	0%{transform:rotate(2deg)}
	20%,50%{transform:rotate(3deg)}
	50%,80%{transform:rotate(1deg)}
	100%,90%{transform:rotate(0deg)}
}
@-webkit-keyframes stretch-open{
	0%{transform:rotate(2deg)}
	20%,50%{transform:rotate(3deg)}
	50%,80%{transform:rotate(1deg)}
	100%,90%{transform:rotate(0deg)}
}
@keyframes expand-up{
	0%{transform:translateY(100%) scale(0.6) scaleY(0.5)}
	60%{transform:translateY(-7%) scaleY(1.12)}
	75%{transform:translateY(3%)}
	100%{transform:translateY(0%) scale(1) scaleY(1)}
}
@-webkit-keyframes expand-up{
	0%{-webkit-transform:translateY(100%) scale(0.6) scaleY(0.5)}
	60%{-webkit-transform:translateY(-7%) scaleY(1.12)}
	75%{-webkit-transform:translateY(3%)}
	100%{-webkit-transform:translateY(0%) scale(1) scaleY(1)}
}
@keyframes slide-down2{
	0%{transform:translateY(0%)}
	50%{transform:translateY(88%)}
	65%{transform:translateY(72%)}
	80%{transform:translateY(80%)}
	95%{transform:translateY(85%)}
	100%{transform:translateY(89%)}
}
@-webkit-keyframes slide-down2{
	0%{-webkit-transform:translateY(0%)}
	50%{-webkit-transform:translateY(88%)}
	65%{-webkit-transform:translateY(72%)}
	80%{-webkit-transform:translateY(80%)}
	95%{-webkit-transform:translateY(85%)}
	100%{-webkit-transform:translateY(89%)}
}
@keyframes slide-down{
	0%{transform:translateY(0%)}
	50%{transform:translateY(138%)}
	65%{transform:translateY(120%)}
	80%{transform:translateY(122%)}
	95%{transform:translateY(135%)}
	100%{transform:translateY(140%)}
}
@-webkit-keyframes slide-down{
	0%{-webkit-transform:translateY(0%)}
	50%{-webkit-transform:translateY(138%)}
	65%{-webkit-transform:translateY(120%)}
	80%{-webkit-transform:translateY(122%)}
	95%{-webkit-transform:translateY(135%)}
	100%{-webkit-transform:translateY(140%)}
}
@-webkit-keyframes hvr-ripple-out {
	100% {
		top: -20px;
		right: -20px;
		bottom: -20px;
		left: -20px;
		opacity: 0;
	}
}
@keyframes hvr-ripple-out {
	100% {
		top: -20px;
		right: -20px;
		bottom: -20px;
		left: -20px;
		opacity: 0;
	}
}
@media only screen and (max-width:$screen-xs-max){
	.header-content{
		position: absolute;
		top: 0;
		padding: 0;
		left: -100%;
		width: 100%;
		z-index: 9999;
		padding: 0 86px 0 0;
		@include transition (all, 0.25s, linear);
		&:before{
			opacity: 0;
			content: "";
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
			position: absolute;
			visibility: hidden;
			background: rgba(0,0,0,0.7);
			@include transition (all, 0.25s, linear);
		}
		.opener{
			display: block;
			width: 66px;
			position: absolute;
			right: 20px;
			top: 0;
			background: $white-smoke;
			z-index: 9;
			font-size: 11px;
			line-height: 11px;
			text-align: center;
			text-transform: uppercase;
			padding:13px 5px 9px;
			span{
				display: block;
				font-size: 21px;
				line-height: 21px;
				margin: 0 0 3px;
			}
			&:hover{
				span{color: $black;}
				text-decoration: none;
			}
		}
	}
	.content-outer{
		background: $white-smoke;
		position: relative;
		z-index: 100;
		&:after{
			top: 100%;
			left: 0;
			width: 100%;
			content: "";
			height: 400px;
			position: absolute;
			background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
			background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%);
		}
		.holder{
			display: table;
			table-layout: fixed;
			width: 100%;
			padding: 0 26px 0 23px;
			text-align: left;
		}
	}
	#nav2{
		overflow: hidden;
		padding: 22px 0 5px;
		position: relative;
		margin: 0 0 25px;
		&:before{
			left: 0;
			bottom: 0;
			right: 35px;
			height: 1px;
			content: "";
			position: absolute;
			background: $pale-slate;
			z-index: 5;
		}
		> ul{
			> li{
				display: block;
				margin: 0 0 21px;
				>a{
					display: block;
					position: relative;
					&:before{display: none;}
				}
				&.search{display: none;}
				&.hover{
					padding: 0;
					margin: 0 0 21px;
				}
				&.has-drop-down{
					> a{
						&:after{
							position: absolute;
							right: 0;
							top: 6px;
							content: "\e831";
							font:9px/9px 'fontello';
						}
					}
					&.hover{
						> a{
							&:before{display: none;}
							&:after{
								content: "\e830";
								top: 4px;
								font-size: 10px;
								line-height: 10px;
							}
						}
					}
				}
			}
		}
		.drop-holder,
		.mega-drop .drop-holder{
			padding: 20px 0 0;
			background: transparent;
		}
	}
	.top-nav{
		display: table-footer-group;
		height: 1%;
		width: 100%;
		li{
			float: left;
			margin: 0 0 22px !important;
			width: 100%;
			a{
				color: $tuatara;
				padding: 0 0 0 32px !important;
				font-size: 13px;
				display: inline-block;
				vertical-align: top;
				span{
					font-size: 19px;
					left: 3px;
				}
			}
			&.tel{
				a{
					font-size: 13px;
					padding: 0 0 0 32px;
				}
			}
		}
	}
	.nav-active2,
	.nav-active3{
		.header-content{
			left: 0;
			@include transition (all, 0.25s, linear);
			&:before{
				visibility: visible;
				opacity: 1;
				@include transition (all, 0.25s, linear);
			}
		}
	}
	#header-v2{
		height: 80px;
		position: absolute !important;
		&:after{display: none;}
	}
	.header-block{
		position: relative;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
		padding: 15px 0 13px;
		.logo{margin: 0 auto;}
		.nav-opener2{
			display: block;
			position: absolute;
			left: 4px;
			top: 22px;
			font-size: 11px;
			line-height: 11px;
			z-index: -1;
			text-transform: uppercase;
			span{
				display: block;
				font-size: 20px;
				line-height: 20px;
				margin: 0 0 4px;
			}
			&:hover{
				color: $black3;
				text-decoration: none;
			}
		}
		.icon-phone2{
			display: block;
			position: absolute;
			right: 6px;
			top: 23px;
			font-size: 33px;
			line-height: 33px;
			&:hover{
				color: $black3;
				text-decoration: none;
			}
		}
	}
	.info-list{
		letter-spacing: -4px;
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		display: table;
		table-layout: fixed;
		z-index: 9;
		width: 100%;
		border-bottom: 1px solid $gray-nurse;
		li{
			letter-spacing: 0;
			display: table-cell;
			vertical-align: middle;
			width: 33.33%;
			border-top: 0;
			border-left: 1px solid $gray-nurse;
			a{
				padding: 8px 3px;
				span{
					display: inline-block;
					vertical-align: middle;
					font-size: 14px;
					line-height: 14px;
					margin: 0 7px 0 2px;
				}
				em{
					display: inline-block;
					vertical-align: middle;
					text-align: left;
					width: 70%;
				}
			}
		}
	}
	.home{
		#header-v2{
			background: $white;
			.logo{
				.logo-home{display: none;}
				.logo-img{display: block;}
			}
		}
		#nav2{
			> ul{
				> li{
					> a{color: $jet;}
				}
			}
		}
	}
}
/*------------------------------------------------------------------
52. Widget / .Widget
-------------------------------------------------------------------*/
.widget{
	padding: 0 29px 19px;
	overflow: hidden;
	margin:0 0 51px;
	line-height:20px;
	background: $light-gray8;
	@media only screen and (max-width:$screen-md-max){padding: 0 17px 19px;}
	
	h2{
		margin:0 -29px 15px;
		background: $light-gray9;
		padding: 14px 30px;
		font-size: 18px;
		line-height:22px;
		text-transform: uppercase;
		@include transition (all, 0.4s, ease);
	}
	a{
		color:$text-color;
		
		&:hover{
			text-decoration: none;
			outline:none;
			color:$brown;
			@include transition (all, 0.6s, ease);
		}
	}
	&:hover{
		h2{
			background:$brown;
			color: $white;
		}
	}
}
/*------------------------------------------------------------------
53. Nategoreis Nav / .categoreis-nav
-------------------------------------------------------------------*/
.categoreis-nav{
	margin:0;
	
	li{
		padding: 0;
		border-top:1px solid #f2f2f2;
		
		&:first-child{
			border:0;
		}
		a{
			overflow: hidden;
			padding:14px 0;
			display: block;
			color:$text-color;
			
			.txt{
				float: left;
				max-width:160px;
			}
			.counter{
				float: right;
				font-size: 11px;
				line-height:15px;
				background: $light-gray9;
				padding:3px 6px;
			}
			&:focus,
			&:hover{
				outline:none;
				text-decoration: none;
				color:$brown;
				@include transition (all, 0.6s, ease);
				.counter{
					background: $brown;
					color:$white;
					@include transition (all, 0.6s, ease);
				}
			}
		}
	}
}
/*------------------------------------------------------------------
54. Latest Post Nav / .latest-post-nav
-------------------------------------------------------------------*/
.latest-post-nav{
	margin:0;
	line-height:20px;
	
	li{
		padding: 16px 0 20px 0;
		border-top:1px solid #f2f2f2;
		
		&:first-child{
			border:0;
		}
		a{
			@include vertical(inline-block, top);
			margin:0 0 7px;
			color:$text-color;
			
			&:focus,
			&:hover{
				outline:none;
				text-decoration: none;
				color:$brown;
				@include transition (all, 0.6s, ease);
			}
		}
		time{
			display: block;
			font-size: 12px;
			line-height:16px;
		}
	}
}
/*------------------------------------------------------------------
55. Archives Nav / .archives-nav
-------------------------------------------------------------------*/
.archives-nav{
	margin:0;
	line-height:20px;
	
	li{
		padding:16px 0 13px 20px;
		border-top:1px solid #f2f2f2;
		
		&:first-child{
			border:0;
		}
		a{
			color:$text-color;
			position:relative;
			
			&:before{
				@include arrow(4px, 0, 4px, 4px, transparent, transparent, transparent, $text-color);
				position:absolute;
				left: -19px;
				top: 6px;
				content:"";
			}
			&:focus,
			&:hover{
				outline:none;
				text-decoration: none;
				color:$brown;
				@include transition (all, 0.6s, ease);
				
				&:before{
					border-color: transparent transparent transparent #db5940;
					@include transition (all, 0.6s, ease);
				}
			}
		}
	}
}
/*------------------------------------------------------------------
56. Post Holder / .post-holder
-------------------------------------------------------------------*/
.post-holder{
	overflow: hidden;
	padding:11px 0 0;
}
/*------------------------------------------------------------------
57. Events Post / .events-post
-------------------------------------------------------------------*/
.events-post{
	overflow: hidden;
	padding:15px 0;
	border-top:1px solid #f2f2f2;
	
	.img-holder{
		overflow: hidden;
		margin:0 0 12px;
		
		a{
			display: block;
			position:relative;
		}
		img{@extend %img-responsive;}
		&:hover{
			.buttons-holder{display: block;}
		}
	}
	.buttons-holder{
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		display: none;
		margin:-21px 0 0;
		text-align: center;
		
		.btn-zoom{
			position:static;
			left: auto;
			top:auto;
			@include vertical(inline-block, top);
			margin:0 3px;
			font-size: 14px;
			line-height:42px;
			@include square(42px);
			@include transition (all, 0.6s, ease);
			
			&:hover{background: $brown;}
		}
	}
	p{margin:0 0 5px;}
	&:first-child{
		padding-top: 0;
		border:0;
	}
	.comments{
		font-size: 12px;
		line-height:16px;
	}
}
/*------------------------------------------------------------------
57. Testimonial Carousel / .testimonial-carousel
-------------------------------------------------------------------*/
.testimonial-carousel {
	position: relative;
	overflow: hidden;
	padding:0 0 11px;
}
.testimonial-mask {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.testimonial-slideset {
	width: 99999px;
	float: left;
}
.testimonial-slide {
	width: 100%;
	float: left;
}
/*------------------------------------------------------------------
58. Pagination2 / .pagination2
-------------------------------------------------------------------*/
.pagination2{
	margin: 0;
	overflow: hidden;
	text-align: center;
	
	li{
		padding: 0;
		
		a{
			display: block;
			border-radius:50%;
			background: $light-gray10;
			@include square(10px);
			text-indent: -9999px;
			
			&:hover{
				background: $dark-brown;
				text-decoration: none;
				outline:none;
			}
		}
		&.active{
			a{
				background: $dark-brown;
				outline:none;
			}
		}
	}
}
/*------------------------------------------------------------------
59. Tag Clouds / .tag-clouds
-------------------------------------------------------------------*/
.tag-clouds{
	overflow: hidden;
	padding: 19px 0 0;
	
	a{
		background: $light-gray10;
		color:$light-gray11;
		padding:5px 15px;
		margin:0 6px 11px 0;
		@include vertical(inline-block, top);
		
		&:hover{
			@include transition (all, 0.6s, ease);
			text-decoration: none;
			background: $brown;
			color:$white;
		}
	}
}
/*------------------------------------------------------------------
60. Author Box / .author-box
-------------------------------------------------------------------*/
.author-box{
	border:1px solid $light-gray6;
	margin:0 0 70px;
	padding:0 10px 0 0;
	@extend %clearfix;
	line-height:24px;
	@media only screen and (max-width:$screen-sm-max){
		font-size: 12px;
		line-height: 18px;
	}
	
	.alignleft{
		margin:0 31px 0 0;
		width: 18.4%;
		position:relative;
		float: left;
		overflow: hidden;
		@media only screen and (max-width:$screen-md-max){
			width: 30%;
			margin:0 20px 0 0;
		}
		&:focus,
		&:hover{
			text-decoration: none;
			outline:none;
		}
		img{
			@extend %img-responsive;
			@include transition (all, 0.6s, ease);
		}
	}
	.text-box{
		overflow: hidden;
		padding: 31px 0 20px;
		@media only screen and (max-width:$screen-sm-max){padding: 15px 0 8px;}
		@media only screen and (max-width:$screen-xs-max){overflow: visible;}
		
		h3{
			margin:0 0 3px;
			text-transform: uppercase;
			font-size: 18px;
			line-height:22px;
			
			a{
				color:$headings-color;
				@include transition (all, 0.6s, ease);
				
				&:focus,
				&:hover{
					color:$brown;
					text-decoration: none;
				}
			}
		}
		.designation{
			display: block;
		}
		p{margin: 0;}
	}
	&:hover{
		img{transform: scale(1.1);}
	}
	&.blog{
		.alignleft{
			width: 13.7%;
		}
	}
}
/*------------------------------------------------------------------
61. Comments Section / .comments-section
-------------------------------------------------------------------*/
.comments-section{
	overflow: hidden;
	margin:0 0 40px;
}
/*------------------------------------------------------------------
62. Comments Heading / .comments-heading
-------------------------------------------------------------------*/
.comments-heading{
	overflow: hidden;
	margin:0 0 29px;
	
	h2{
		margin:0;
		float: left;
		max-width:600px;
		font-size: 30px;
		line-height:34px;
		font-weight: 600;
	}
	.btn-default{
		float: right;
		color:$headings-color;
		background: $light-gray8;
		padding:13px 23px;
		text-transform: none;
		font:700 14px/18px $font-family-base;
		
		&:hover{
			background: $brown;
			color:$white;
		}
	}
}
/*------------------------------------------------------------------
63. Multilevel Comments / .multilevel-comments
-------------------------------------------------------------------*/
.multilevel-comments{
	overflow: hidden;
	border:1px solid $light-gray6;
	padding:26px 18px 22px 28px;
	margin:0 0 22px;
	@media only screen and (max-width:$screen-xs-max){padding:26px 10px 22px;}
	
	.commment-box{
		padding:0;
		margin:0 0 26px;
		border:0;
		
		.text-box{
			padding:0 0 23px;
			border-bottom:1px solid $light-gray6;
		}
	}
	.twolevel-comment{
		overflow: hidden;
		padding:0 0 0 31px;
		
	}
	.threelevel-comment{
		overflow: hidden;
		padding:0 0 0 29px;
		
		.commment-box{
			margin-bottom:0;
			.text-box{
				border:0;
				padding-bottom: 0;
			}
		}
	}
	&:hover{
		border-left-color:$brown;
	}
}
/*------------------------------------------------------------------
64. Commment Box / .commment-box
-------------------------------------------------------------------*/
.commment-box{
	border:1px solid $light-gray6;
	margin:0 0 20px;
	padding:26px 18px 22px 28px;
	@extend %clearfix;
	line-height:24px;
	@media only screen and (max-width:$screen-sm-max){
		font-size: 12px;
		line-height: 18px;
	}
	@media only screen and (max-width:$screen-xs-max){
		padding:26px 10px 22px;
	}
	
	.alignleft{
		margin:3px 30px 0 0;
		float: left;
		max-width: 70px;
		@media only screen and (max-width:$screen-sm-max){margin:3px 15px 0 0;}
		@media only screen and (max-width:$screen-xs-max){margin: 0 10px 0 0;}
		
		&:focus,
		&:hover{
			text-decoration: none;
			outline:none;
		}
		img{@extend %img-responsive;}
	}
	.text-box{
		overflow: hidden;
		padding: 0;
		@media only screen and (max-width:$screen-xs-max){overflow: visible;}
		
		.box{
			overflow: hidden;
			margin:0;
			
			.box2{
				float: left;
				max-width:500px;
			}
		}
		h3{
			margin:0 0 4px;
			text-transform: uppercase;
			text-transform: capitalize;
			font:700 18px/22px $font-roboto;
			
			a{
				color:$headings-color;
				
				&:focus,
				&:hover{
					@include transition (all, 0.6s, ease);
					color:$brown;
					text-decoration: none;
				}
			}
		}
		time{
			font-size: 13px;
			line-height:16px;
			display: block;
			margin:0 0 4px;
			@media only screen and (max-width:$screen-sm-max){font-size: 10px;}
		}
		p{margin: 0;}
		.btn-default{
			float: right;
			padding:5px 20px;
			text-transform: capitalize;
			font-size: 13px;
			line-height:16px;
			margin:4px 0 0;
		}
	}
	&:hover{
		border-left-color:$brown;
	}
}
/*------------------------------------------------------------------
65. Leave Comment / .leave-comment
-------------------------------------------------------------------*/
.leave-comment{
	@extend %clearfix;
	
	h2{
		text-transform: uppercase;
		font-size: 24px;
		line-height:28px;
		margin:0 0 39px;
	}
}
/*------------------------------------------------------------------
66. Comments Form / .comments-form
-------------------------------------------------------------------*/
.comments-form{
	margin:0;
	@extend %clearfix;
	@media only screen and (max-width:$screen-xs-max){ margin:0 0 15px;}
	.form-row{
		@extend %clearfix;
		margin:0 0 30px;
		.form-group{
			&:first-child{margin-left: 0;}
		}
		&.textarea{
			.form-group{
				position:relative;
				width: 100%;
			}
			.form-control{
				@include size(95%, 128px);
				padding:14px 17px ;
				@media only screen and (max-width:$screen-xs-max){width: 90%;}
			}
		}
	}
	.form-group{
		margin:0 0 0 29px;
		float: left;
		width: 31.1%;
		border-radius:2px;
		border:1px solid $light-gray6;
		@media only screen and (max-width:$screen-md-max){margin:0 0 0 23px;}
		@media only screen and (max-width:$screen-sm-max){margin:0 0 0 15px;}
		@media only screen and (max-width:$screen-xs-max){
			width: 100%;
			float: none;
			margin:0 0 10px;
			overflow: hidden;
		}
	}
	.form-control{
		@include size(86%, 45px);
		font:13px/18px $font-family-base;
		color:$light-gray12;
		float: left;
		box-shadow:none;
		resize:none;
		@include placeholder{color:$light-gray12;}
		@media only screen and (max-width:$screen-md-max){width: 82%;}
		@media only screen and (max-width:$screen-sm-max){width: 78%;}
		@media only screen and (max-width:$screen-xs-max){width: 90%;}
	}
	label{
		float: right;
		margin:8px 17px 0 0;
		color:$light-gray11;
		font-size: 18px;
		@media only screen and (max-width:$screen-sm-max){margin:8px 9px 0 0;}
	}
	.btn-default{
		width: 170px;
		height: 54px;
		background: $brown;
		&:hover{background: $light-gray3;}
	}
	&.add{
		.form-group{
			width: 31.6%;
			@media only screen and (max-width:$screen-md-max){width: 31.7%;}
			@media only screen and (max-width:$screen-sm-max){width: 31.9%;}
			@media only screen and (max-width:$screen-xs-max){width: 100%;}
		}
	}
	&.add2{
		.form-group{
			width: 31.1%;
			@media only screen and (max-width:$screen-xs-max){width: 100%;}
		}
	}
	&.add3{
		.form-group{
			width: 29.9%;
			@media only screen and (max-width:$screen-sm-max){width: 31.1%;}
			@media only screen and (max-width:$screen-xs-max){width: 100%;}
		}
		.form-control{
			@media only screen and (min-width:$screen-xs-max){
				width: 79.2%;
			}
		}
	}
}
/*------------------------------------------------------------------
67. Blog Post / .blog-post
-------------------------------------------------------------------*/
.blog-post{
	background: $light-gray4;
	overflow: hidden;
	padding:0 30px 30px;
	margin:0 0 50px;
	line-height:24px;
	
	.blog-img{
		overflow: hidden;
		margin:0 -30px 27px;
		
		img{@extend %img-responsive;}
	}
	h2{
		margin:0 0 15px;
		font-size: 30px;
		line-height:34px;
		text-transform: capitalize;
		
		a{
			color:$headings-color;
			@include transition (all, 0.6s, ease);
			
			&:hover{
				color:$brown;
				text-decoration: none;
				outline:none;
			}
		}
	}
	p{margin: 0 0 17px;}
	.btn-default{
		padding:12px 36px;
		font-weight: 700;
		background:$brown;
		
		&:hover{
			background:$dark-gray3;
		}
	}
	&.detail{
		padding:0 30px 17px;
		margin:0 0 59px;
		p{margin: 0 0 24px;}
		.blog-slide{
			width: 390px !important;
			@media only screen and (max-width:$screen-md-max){
				width: 470px !important;
			}
			@media only screen and (max-width:$screen-sm-max){
				width: 360px !important;
			}
		}
	}
	&.qoutes{
		padding:38px 30px 60px;
		
		.gallery-quotes{
			margin:0;
			position:relative;
			padding:78px 30px 56px;
			font-size: 24px;
			line-height:36px;
			text-transform: uppercase;
			color:$headings-color;
			@media only screen and (max-width:$screen-xs-max){
				padding: 60px 0 40px;
				font-size: 14px;
				line-height:16px;
			}
		}
		cite{
			font-size: 14px;
			line-height:20px;
		}
		.fa{
			font-size: 30px;
			margin:0 0 0 -5px;
		}
		.fa-quote-right{
			position: absolute;
			left: 50%;
			top:auto;
			bottom:0;
			margin:0 0 0 -5px;
		}
	}
}
/*------------------------------------------------------------------
68. Blog Nav / .blog-nav
-------------------------------------------------------------------*/
.blog-nav{
	margin:0 0 12px;
	overflow: hidden;
	color:$text-color;
	line-height:18px;
	
	li{
		padding: 0;
		margin:0 24px 0 0;
		position: relative;
		@include element2(before, 0, auto, auto, -17px);
		&:before{
			content:"/";
			font-size: 15px;
		}
		&:first-child{
			&:before{display: none;}
		}
		a{
			color:$text-color;
			
			&:focus,
			&:hover{
				text-decoration: none;
				color:$brown;
				@include transition (all, 0.6s, ease);
			}
		}
	}
}
/*------------------------------------------------------------------
69. Other Links / .other-links
-------------------------------------------------------------------*/
.other-links{
	overflow: hidden;
	margin:0 0 6px;
	
	h3{
		float: left;
		min-width:60px;
		margin:3px 9px 0 0;
		font-size: 16px;
		line-height:20px;
	}
	.tag-clouds{
		padding:0;
	}
	.footer-socials{
		li{
			a{
				color:$light-gray13;
				font-size: 14px;
				
				&:hover{
					color:$brown;
					
				}
			}
		}
	}
}
/*------------------------------------------------------------------
70. Blog Carousel / .blog-carousel
-------------------------------------------------------------------*/
.blog-carousel {
	position: relative;
	overflow: hidden;
	margin:0 -30px 27px;
}
.blog-mask {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.blog-slideset {
	width: 99999px;
	float: left;
}
.blog-slide {
	width: 100%;
	float: left;
	
	a{display: block;}
	img{@extend %img-responsive;}
}
/*------------------------------------------------------------------
71. Pagination3 / .pagination3
-------------------------------------------------------------------*/
.pagination3{
	margin:0;
	@extend %postionreset;
	top:auto;
	bottom:12px;
	text-align: center;
	li{
		padding:0;
		margin:0 1px;
		a{
			text-indent: -9999px;
			display: block;
			border-radius:50%;
			@include square(10px);
			background: $white;
			&:hover{
				text-decoration: none;
				outline:none;
				background:$brown;
				@include transition (all, 0.6s, ease);
			}
		}
		&.active{
			a{
				outline:none;
				background:$brown;
			}
		}
	}
}
/*------------------------------------------------------------------
71. About Block / .about-block
-------------------------------------------------------------------*/
.about-block{
	margin-bottom:84px;
	line-height:20px;
	
	.alignleft{
		margin:6px 0 0;
		border:1px solid $light-gray6;
		overflow: hidden;
		@media only screen and (max-width:$screen-xs-max){margin:0 0 20px;}
		
		a{display: block;}
		img{@extend %img-responsive;}
	}
	.txt-box{
		p{margin: 0 0 20px;}
		.btn-default{
			text-transform: capitalize;
			font-weight: 700;
			letter-spacing:1px;
			padding:16px 31px;
		}
	}
	.about-heading{
		overflow: hidden;
		margin:0 0 25px;
		font-size: 18px;
		line-height:24px;
		
		p{margin: 0;}
	}
}
/*------------------------------------------------------------------
72. About Info / .about-info
-------------------------------------------------------------------*/
.about-info{
	line-height:20px;
	@media only screen and (max-width:$screen-xs-max){margin:0 0 20px;}
	h2{
		padding:0 0 18px;
		margin: 0 0 26px;
		font-size: 24px;
		line-height:28px;
		text-transform: uppercase;
		@include element2(after, auto, auto, 0, 0);
		
		&:after{
			background:url(../images/divider.png) repeat-x;
			@include size(74px, 2px);
		}
	}
	p{margin:0 0 23px;}
}
/*------------------------------------------------------------------
73. About Nav / .about-nav
-------------------------------------------------------------------*/
.about-nav{
	margin: 0;
	
	li{
		padding:0 0 0 33px;
		margin:0 0 10px;
		
		a{
			position: relative;
			color:$text-color;
			
			.fa{
				position:absolute;
				left:-35px;
				top: 0;
				font-size: 18px;
				color:$brown;
			}
		}
	}
}
/*------------------------------------------------------------------
74. Panel Group / .panel-group
-------------------------------------------------------------------*/
.panel-group{
	padding:4px 0 0;
	margin-bottom: 0;
	.panel{
		border-radius:0;
		border:0;
		box-shadow:none;
	}
	&.shortcodes{
		.panel-default{
			.panel-heading{
				.panel-title{
					font-weight:400;
					letter-spacing:1px;
					a{
						padding:20px 32px 19px;
						background: $brown;
						color:$white;
						
						&:hover{
							background: $brown;
						}
						&.collapsed{
							background: $headings-color;
							
							&:hover{
								background: $brown;
							}
						}
					}
				}
			}
		}
	}
}
.panel-body{
	border-top-color:$white;
	background: none;
	padding:16px 20px 13px;
	
	p{margin: 0;}
}
.panel-default > .panel-heading + .panel-collapse > .panel-body{
	border:0;
}
.panel-default{
	.panel-heading{
		padding:0;
		
		.panel-title{
			margin:0;
			font-size: 16px;
			line-height:20px;
			text-transform: uppercase;
			
			a{
				display: block;
				padding:7px 30px 9px 20px;
				background: $headings-color;
				color:$white;
				@include element2(after, 50%, 13px, auto, auto);
				
				&:after{
					content:"\f107";
					font-family: 'FontAwesome';
					margin:-10px 0 0;
					font-size: 22px;
					font-weight: 400;
				}
				&.collapsed{
					background: $light-gray4;
					color:$headings-color;
					
					&:after{
						content:"\f105";
						margin:-10px 0 0;
						font-size: 22px;
						right:19px;
					}
				}
				&:focus,
				&:hover{
					background: $headings-color;
					text-decoration: none;
					color:$white;
					outline:none;
				}
			}
		}
	}
}
/*------------------------------------------------------------------
75. Progress Area / .progress-area
-------------------------------------------------------------------*/
.progress-area{
	overflow: hidden;
	padding:2px 0 0 1px;
}
/*------------------------------------------------------------------
76. Progress Box / .progress-box
-------------------------------------------------------------------*/
.progress-box{
	margin: 0 0 19px;
	@extend %clearfix;
	
	h3{
		margin:0 0 8px;
		text-transform: uppercase;
		font-size: 14px;
		line-height:18px;
	}
	.progress-frame{
		background: $light-gray4;
		border-radius:3px;
		@extend %clearfix;
		@include size(100%, 16px);
		padding:3px 4px;
		position:relative;
	}
	.progress-bar{
		@include vertical(inline-block, top);
		background: $brown;
		position:relative;
		
		.num{
			border-radius:3px;
			min-width:31px;
			text-align: center;
			display: block;
			top: -27px;
			right:-15px;
			background: $brown;
			padding:2px;
			color:$white;
			font:700 11px/14px $font-roboto;
			@include element2(before, auto, auto, -3px, 50%);
			position: absolute;
			
			&:before{
				@include arrow(4px, 3px, 0, 3px, $brown, transparent, transparent, transparent);
				margin:0 0 0 -3px;
			}
		}
	}
}
/*------------------------------------------------------------------
77. Event Post / .event-post
-------------------------------------------------------------------*/
.event-post{
	overflow: hidden;
	line-height:24px;
	margin:0 0 51px;
	
	h2{
		text-transform: uppercase;
		font-size: 25px;
		line-height:28px;
		margin:0 0 29px;
		@media only screen and (max-width:$screen-sm-max){
			margin:0 0 15px;
			font-size: 20px;
		}
		
		a{
			color:$headings-color;
			
			&:focus,
			&:hover{
				text-decoration: none;
				color:$brown;
				@include transition (all, 0.6s, ease);
			}
		}
	}
	p{margin: 0 0 6px;}
	.event-img{
		border:1px solid $light-gray13;
		overflow: hidden;
		position:relative;
		margin:0 0 23px;
		
		img{@extend %img-responsive;}
	}
	.events-frame{
		overflow: hidden;
		margin:0 0 26px;
		.btn-default{
			float: left;
			margin:0 15px 0 0;
			font:700 18px/22px $font-sans-pro;
			padding:13px 14px;
			text-transform: uppercase;
			@include breakpoint($desktop){padding:10px 14px;}
			@media only screen and (max-width:$screen-sm-max){
				float: none;
				margin: 0 0 5px;
			}
		}
		.event-box{
			overflow: hidden;
			border:solid $light-gray3;
			border-width:1px 0;
			@media only screen and (max-width:$screen-md-max){font-size: 13px;}
			@include breakpoint($tablet){padding:10px 0;}
		}
	}
	.post-nav{
		margin:13px 0 0;
		float: left;
		@include breakpoint($desktop){margin:8px 0 0}
		@media only screen and (max-width:$screen-sm-max){
			float: none;
			overflow: hidden;
			margin:0 0 10px;
			text-align: center;
			font-size: 12px;
		}
		li{
			@media only screen and (max-width:$screen-md-max){margin: 0 5px 0 0;}
			a{
				color:$light-gray5;
				
				.fa{
					color:$headings-color;
				}
				&:hover{
					color:$headings-color;
					
					.fa{
						color:$light-gray5;
						@include transition (all, 0.6s, ease);
					}
				}
			}
		}
	}
}
/*------------------------------------------------------------------
78. Event Plans / .event-plans
-------------------------------------------------------------------*/
.event-plans{
	@extend %postionreset;
	top:auto;
	background: rgba($black, 0.5);
	border-top:1px solid $light-gray3;
	
	.events-nav{
		color:$white;
		width: 43.3%;
		margin: 0 8% 0 0;
		float: left;
		text-align: center;
		font-size: 12px;
		line-height:15px;
		font-weight: 700;
		@include breakpoint($desktop){
			margin: 0 3% 0 0;
		}
		@media only screen and (max-width:$screen-sm-max){
			font-size: 11px;
			line-height: 13px;
			width: 100%;
			margin:0;
			float: none;
			height:55px;
		}
		li{
			padding: 16px 5px 17px;
			float: left;
			width: 25%;
			border-right:1px solid $light-gray3;
			@media only screen and (max-width:$screen-sm-max){padding: 8px 5px;}
			
			.num{
				display: block;
				font-size: 21px;
				line-height:24px;
				margin:0 0 6px;
			@media only screen and (max-width:$screen-sm-max){
				font-size: 15px;
				line-height: 20px;
			}
			}
		}
	}
	.approx-time{
		float: left;
		color:$white;
		font-size: 18px;
		line-height:28px;
		margin:24px 0 0;
		@include breakpoint($tablet){
			font-size: 12px;
			line-height:22px;
			margin:16px 0 0;
		}
		@include breakpoint($mobile){display: none;}
		strong{
			font:700 24px/28px $font-family-base;
			@include breakpoint($tablet){
				font-size: 16px;
				line-height:20px;
			}
		}
		.time{
			@include vertical(inline-block, top);
			margin:0 0 0 10px;
			@media only screen and (max-width:$screen-md-max){margin:0 0 0 5px;}
		}
	}
}
.organizers{
	float: right;
	width: 40.6%;
	@include breakpoint($desktop){width: 43.6%;}
	@include breakpoint($tablet){
		float: none;
		overflow: hidden;
		width: 100%;
		text-align: center;
	}
	.text{
		float: left;
		margin:15px 0 0;
		color:$headings-color;
		font:600 16px/20px $font-sans-pro;
		text-transform: uppercase;
		@include breakpoint($desktop){
			font-size: 14px;
			line-height:18px;
			margin:10px 0 0;
		}
		@include breakpoint($tablet){
			float: none;
			@include vertical(inline-block, middle);
			margin:0;
		}
	}
}
/*------------------------------------------------------------------
79. Event Planers / .event-planers
-------------------------------------------------------------------*/
.event-planers{
	float: right;
	margin:0 0 0 25px;
	width: 60%;
	@include breakpoint($desktop){margin:0 0 0 10px;}
	@include breakpoint($tablet){
		width: auto;
		float: none;
		@include vertical(inline-block, middle);
	}
	li{
		padding:0;
		width: 33.33%;
		float: right;
		@include breakpoint($tablet){
			width: auto;
		}
		a{
			display: block;
			
			img{@extend %img-responsive;}
		}
	}
}
/*------------------------------------------------------------------
80. Map Holder / .map-holder
-------------------------------------------------------------------*/
.map-holder{
	overflow: hidden;
	position:relative;
	margin:0 0 99px;
	
	img{@extend %img-responsive;}
}
/*------------------------------------------------------------------
81. Compaign Info / .compaign-info
-------------------------------------------------------------------*/
.compaign-info{
	background: rgba($black, 0.6);
	@extend %postionreset;
	left:auto;
	text-align: center;
	color:$white;
	line-height:24px;
	max-width:325px;
	padding:76px 10px 10px;
	
	h3{
		margin: 0 0 19px;
		font:14px/24px $font-family-base;
		
		a{
			position:relative;
			color:$white;
			text-decoration: underline;
			
			&:focus,
			&:hover{
				text-decoration: none;
				color:$white;
				
				.fa{
					color:$brown;
					@include transition (all, 0.6s, ease);
				}
			}
		}
		.fa{
			text-decoration: none;
			position: absolute;
			left: 50%;
			top: -54px;
			margin:0 0 0 -10px;
			font-size: 38px;
		}
	}
	.share{
		margin: 0 0 37px;
		display: block;
	}
}
/*------------------------------------------------------------------
82. Compaign Socials / .compaign-socials
-------------------------------------------------------------------*/
.compaign-socials{
	margin:0;
	font-size: 22px;
	line-height:20px;
	li{
		padding:0 14px;
		
		a{
			color:$white;
			@include transition (all, 0.6s, ease);
			
			&:hover{
				color:$brown;
				text-decoration: none;
				outline:none;
			}
		}
	}
}
/*------------------------------------------------------------------
83. Team Details Block / .team-details-block
-------------------------------------------------------------------*/
.team-details-block{
	margin-bottom: 57px;
}
/*------------------------------------------------------------------
84. Team Details / .team-details
-------------------------------------------------------------------*/
.team-details{
	border:1px solid $light-gray6;
	background: $light-gray14;
	overflow: hidden;
	line-height:24px;
	padding:0 24px 0 0;
	@media only screen and (max-width:$screen-md-max){line-height: 20px;}
	@media only screen and (max-width:$screen-sm-max){
		font-size: 12px;
		line-height: 14px;
		padding:0 16px 0 0;
	}
	@media only screen and (max-width:$screen-xs-max){padding: 0;}
	
	.alignleft{
		float: left;
		width: 41%;
		margin:0 30px 0 0;
		border-right:1px solid $light-gray6;
		@media only screen and (max-width:$screen-md-max){
			width: 45%;
			margin:0 20px 0 0;
		}
		@media only screen and (max-width:$screen-xs-max){
			width: 100%;
			float: none;
			margin:0 0 20px;
			border-right:0;
			border-bottom:1px solid $light-gray6;
		}
		
		img{@extend %img-responsive;}
	}
	.team-txt{
		overflow: hidden;
		padding:32px 0 20px;
		@media only screen and (max-width:$screen-md-max){padding:25px 0 10px;}
		@media only screen and (max-width:$screen-sm-max){padding:10px 0 5px;}
		@media only screen and (max-width:$screen-xs-max){padding:10px 20px;}
	}
	p{margin:0 0 7px;}
	.btn-default{
		font-weight: 700;
		font-size: 18px;
		line-height:22px;
		padding:10px 15px;
		background: $brown;
		@media only screen and (max-width:$screen-sm-max){
			font-size: 14px;
			line-height:18px;
			padding:5px 10px;
		}
		
		&:hover{background:$light-gray3;}
	}
}
/*------------------------------------------------------------------
85. Team Heading / .team-heading
-------------------------------------------------------------------*/
.team-heading{
	overflow: hidden;
	padding:0 0 17px;
	margin:0 0 25px;
	background: url(../images/divider.png) repeat-x 0 100%;
	@media only screen and (max-width:$screen-sm-max){margin:0 0 15px;}
	
	h2{
		text-transform: uppercase;
		margin:0;
		font-weight: 600;
		font-size: 30px;
		line-height:34px;
		float: left;
		max-width:400px;
		@media only screen and (max-width:$screen-xs-max){
			float: none;
			max-width: 100%;
			margin: 0 0 5px;
		}
	}
}
/*------------------------------------------------------------------
86. Team Socials / .team-socials
-------------------------------------------------------------------*/
.team-socials{
	margin:5px 6px 0 0;
	float: right;
	@media only screen and (max-width:$screen-xs-max){
		margin:0;
		float: none;
	}
	
	li{
		padding:0;
		margin:0 0 0 7px;
		
		a{
			display: block;
			border-radius:50%;
			@include square(29px);
			border:1px solid $text-color;
			line-height:25px;
			font-size: 15px;
			font-weight: 400;
			color:$text-color;
			text-align: center;
			
			.fa{
				@include vertical(inline-block, middle);
			}
			&:hover{
				color:$white;
				background: $brown;
				text-decoration: none;
				@include transition (all, 0.6s, ease);
				border-color:$brown;
			}
		}
	}
}
/*------------------------------------------------------------------
87. Team nav / .team-nav
-------------------------------------------------------------------*/
.team-nav{
	margin:0 0 23px;
	@extend %clearfix;
	font-size: 16px;
	line-height:18px;
	@media only screen and (max-width:$screen-sm-max){
		font-size: 14px;
		line-height: 16px;
	}
	@media only screen and (max-width:$screen-xs-max){
		margin:0;
		& +.team-nav{margin:0 0 23px;}
	}
	
	li{
		min-width: 250px;
		padding:0 10px 0 33px;
		@media only screen and (max-width:$screen-md-max){
			min-width: 230px;
			padding:0 10px 0 25px;
		}
		@media only screen and (max-width:$screen-sm-max){
			min-width: 177px;
			padding:0 5px 0 25px;
		}
		@media only screen and (max-width:$screen-xs-max){
			display: block;
			max-width: 100%;
			margin: 0 0 10px;
		}
		
		a{
			color:$text-color;
			position:relative;
			.fa{
				position: absolute;
				left: -32px;
				top: 0;
				font-size: 18px;
				@media only screen and (max-width:$screen-sm-max){
					left: -23px;
					font-size: 16px;
				}
			}
			&:hover{
				color:$brown;
				text-decoration: none;
				@include transition (all, 0.6s, ease);
			}
		}
	}
}
/*------------------------------------------------------------------
88. Education Block / .education-block
-------------------------------------------------------------------*/
.education-block{
	margin-bottom: 39px;
	overflow: hidden;
	line-height:24px;
	
	h2{
		background: url(../images/divider.png) repeat-x 0 100%;
		margin:0 0 23px;
		padding:0 0 17px;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 24px;
		line-height:28px;
	}
	p{
		margin: 0 0 6px;
		
		a{
			font-weight: 700;
			text-decoration: underline;
			
			&:hover{text-decoration: none;}
		}
	}
}
.team-info-section{margin-bottom: 33px;}
/*------------------------------------------------------------------
89. Team Info Cols / .team-info-cols
-------------------------------------------------------------------*/
.team-info-cols{
	@media only screen and (max-width:$screen-xs-max){margin-bottom: 20px;}
	h2{
		text-transform: uppercase;
		margin:0 0 41px;
		font-size: 24px;
		line-height:28px;
		font-weight: 600;
		padding:0 0 17px;
		background: url(../images/divider.png) repeat-x 0 100%;
		@media only screen and (max-width:$screen-md-max){
			font-size: 20px;
			line-height:24px;
		}
		@media only screen and (max-width:$screen-sm-max){
			font-size: 15px;
			line-height:20px;
			padding:0 0 12px;
		}
		@media only screen and (max-width:$screen-xs-max){
			font-size: 20px;
			line-height:24px;
			margin:0 0 20px;
		}
	}
}
/*------------------------------------------------------------------
90. Team Frame / .team-frame
-------------------------------------------------------------------*/
.team-frame{
	border:1px solid $light-gray6;
	padding:20px 29px 6px 50px;
	background: $light-gray14;
	@media only screen and (max-width:$screen-sm-max){padding: 20px 8px 6px 23px;}
}
/*------------------------------------------------------------------
91. team Info Nav / .team-info-nav
-------------------------------------------------------------------*/
.team-info-nav{
	margin:0;
	@extend %clearfix;
	padding:0;
	font-size: 16px;
	line-height:20px;
	font-weight: 700;
	@media only screen and (max-width:$screen-md-max){
		font-size: 11px;
		line-height: 14px;
	}
	@media only screen and (max-width:$screen-sm-max){font-size: 10px;}
	
	li{
		padding:11px 2px 13px 0;
		background: url(../images/divider.png) repeat-x;
		
		&:first-child{
			padding-top: 0;
			background: none;
		}
		a{
			color:$text-color;
			position: relative;
			@include transition (all, 0.6s, ease);
			
			.fa{
				color:$brown;
				font-size: 18px;
				position: absolute;
				left: -34px;
				top: 2px;
				@media only screen and (max-width:$screen-md-max){font-size: 14px;}
				@media only screen and (max-width:$screen-sm-max){left: -20px;}
			}
			&:focus,
			&:hover{
				color:$brown;
				text-decoration: none;
				margin: 0 0 0 5px;
			}
		}
	}
}
/*------------------------------------------------------------------
92. team Contact Block / .team-contact-block
-------------------------------------------------------------------*/
.team-contact-block{
	overflow: hidden;
	margin-bottom: 22px;
	.comments-form{
		label{margin:8px 7px 0 0;}
		.form-row{
			margin:0 0 15px;
			.form-group{
				width: 31.8%;
				margin:0 0 0 15px;
				@media only screen and (max-width:$screen-md-max){
					margin:0 0 0 12px;
				}
				@media only screen and (max-width:$screen-sm-max){
					width: 100%;
					margin: 0 0 10px;
				}
				&:first-child{
					margin-left: 0;
					@media only screen and (max-width:$screen-sm-max){margin: 0 0 10px;}
				}
				.form-control{height: 48px;}
			}
			&.textarea{
				.form-group{
					width: 100%;
					.form-control{height: 168px;}
				}
			}
		}
		.btn-default{
			font-weight: 600;
			font-size: 18px;
			line-height:20px;
			padding:5px;
			@include size(140px, 50px);
		}
	}
}
/*------------------------------------------------------------------
93. team Contact / .team-contact
-------------------------------------------------------------------*/
.team-contact{
	@media only screen and (max-width:$screen-xs-max){margin-bottom: 40px;}
	h2{
		background: url(../images/divider.png) repeat-x 0 100%;
		margin:0 0 40px;
		text-transform: uppercase;
		padding: 0 0 16px;
		font-weight: 600;
		font-size: 24px;
		line-height:28px;
	}
	&.add{
		margin:0 0 50px;
	}
}
/*------------------------------------------------------------------
94. Video Block2 / .video-block2
-------------------------------------------------------------------*/
.video-block2{
	overflow: hidden;
	position:relative;
	a{
		display: block;
		@include element2(before, 0, 0, 0, 0);
		
		&:before{
			background: rgba($black, 0.4);
			@include transition (all, 0.6s, ease);
		}
	}
	.btn-play{
		@include square(52px);
		margin:-30px 0 0 -26px;
		.fa{font-size: 60px;}
	}
	img{@extend %img-responsive;}
}
/*------------------------------------------------------------------
95. Trust Col / .trust-col
-------------------------------------------------------------------*/
.trust-col{
	border:1px solid $light-gray6;
	background: $light-gray14;
	padding:0 30px 7px;
	min-height:449px;
	overflow: hidden;
	@media only screen and (max-width:$screen-sm-max){
		min-height:400px;
		padding:0 9px 7px;
	}
	@media only screen and (max-width:$screen-xs-max){margin: 0 0 20px;}
	
	h2{
		margin:0 -30px 20px;
		padding:26px 10px;
		text-align: center;
		font-size: 24px;
		line-height:28px;
		text-transform: uppercase;
		color:$white;
		background: $brown;
		@media only screen and (max-width:$screen-sm-max){
			font-size: 20px;
			line-height:24px;
		}
	}
	.team-info-nav{padding:0 0 0 20px;}
	.gallery-quotes{
		font-size: 14px;
		line-height:30px;
		padding:54px 5px 0;
		@media only screen and (max-width:$screen-md-max){line-height: 25px;}
		@media only screen and (max-width:$screen-sm-max){
			margin: 0 0 8px;
			line-height: 20px;
		}
	}
}
/*------------------------------------------------------------------
96. Benifits Block / .benifits-block
-------------------------------------------------------------------*/
.benifits-block{
	overflow: hidden;
	width: 105%;
}
/*------------------------------------------------------------------
97. Benifits Col / .benifits-col
-------------------------------------------------------------------*/
.benifits-col{
	@include vertical(inline-block, top);
	margin:0 2.2% 38px 0;
	width: 47%;
	padding:0 0 0 61px;
	line-height:30px;
	@media only screen and (max-width:$screen-xs-max){
		display: block;
		width: 100%;
		margin:0 0 38px;
	}
	
	h3{
		margin: 0 0 9px;
		font-size: 20px;
		line-height:24px;
		text-transform: uppercase;
		
		a{
			position:relative;
			color:$headings-color;
			
			&:focus,
			&:hover{
				@include transition (all, 0.6s, ease);
				text-decoration: none;
				color:$brown;
			}
			.fa{
				font-size: 29px;
				left: -61px;
				position: absolute;
				top: 10px;
			}
			.fa-lightbulb-o{
				font-size: 38px;
				top:0;
			}
		}
	}
	p{
		margin: 0;
		
		a{
			color:$text-color;
			
			&:focus,
			&:hover{
				@include transition (all, 0.6s, ease);
				text-decoration: none;
				color:$brown;
			}
		}
	}
}
/*------------------------------------------------------------------
98. Consult Form / .consult-form
-------------------------------------------------------------------*/
.consult-form{
	@extend %clearfix;
	@include vertical(inline-block, top);
	width: 100%;
	padding: 0;
	
	.form-row{
		@extend %clearfix;
		margin:0 0 30px;
		
		&.textarea{
			.form-group{
				@extend %clearfix;
				float: none;
				width: 100%;
			}
			.form-control{
				@include size(100%, 218px);
			}
		}
	}
	.form-group{
		float: left;
		margin: 0 0 0 28px;
		width: 48.8%;
		@media only screen and (max-width:$screen-md-max){margin: 0 0 0 22px;}
		@media only screen and (max-width:$screen-sm-max){margin: 0 0 0 17px;}
		@media only screen and (max-width:$screen-xs-max){
			width: 100%;
			margin: 0;
		}
		
		&:first-child{
			margin-left: 0;
			@media only screen and (max-width:$screen-xs-max){margin: 0 0 20px;}
		}
	}
	.form-control{
		box-shadow:none;
		border:1px solid $light-gray6;
		color:$text-color;
		@include size(100%, 64px);
		background: $white;
		font:14px/42px $font-family-base;
		padding:10px 20px;
		resize:none;
		border-radius:0;
		
		@include placeholder{color:$text-color;}
	}
	.btn-default{
		background: $brown;
		min-width:129px;
		
		&:hover{background: $light-gray3;}
	}
}
/*------------------------------------------------------------------
99. Select Control / .select-control
-------------------------------------------------------------------*/
.select-control{
	
}
/*------------------------------------------------------------------
100. jcf-select / .jcf-select
-------------------------------------------------------------------*/
.jcf-select {
	@include vertical(inline-block, top);
	position: relative;
	margin: 0 0 12px;
	border:1px solid $light-gray6;
	color:$text-color;
	@include size(100%, 64px);
	background: $white;
}
.jcf-select select {
	z-index: 1;
	left: 0;
	top: 0;
}
.jcf-select .jcf-select-text {
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	display: block;
	font:14px/42px $font-family-base;
	margin: 10px 65px 10px 20px;
}
.jcf-select .jcf-select-opener {
	position: absolute;
	text-align: center;
	width: 62px;
	bottom: 0;
	right: 0;
	top: 0;
	border-left:1px solid $light-gray6;
	
	&:before{
		position: absolute;
		left: 50%;
		top: 50%;
		margin:-13px 0 0 -8px;
		font-size: 18px;
		color:$headings-color;
		content:"\f078";
		font-family: 'FontAwesome';
	}
}
body > .jcf-select-drop {
	position: absolute;
	margin: -1px 0 0;
	z-index: 9999;
}
body > .jcf-select-drop.jcf-drop-flipped {
	margin: 1px 0 0;
}
.jcf-select .jcf-select-drop {
	position: absolute;
	margin-top: 0px;
	z-index: 9999;
	top: 100%;
	left: -1px;
	right: -1px;
}
.jcf-select .jcf-drop-flipped {
	bottom: 100%;
	top: auto;
}
.jcf-select-drop .jcf-select-drop-content {
	border: 1px solid $light-gray6;
}
/* multiple select styles */
.jcf-list-box {
	overflow: hidden;
	display: inline-block;
	border: 1px solid #b8c3c9;
	min-width: 200px;
	margin: 0 15px;
}
/* select options styles */
.jcf-list {
	display: inline-block;
	vertical-align: top;
	position: relative;
	background: #fff;
	line-height: 18px;
	font-size: 14px;
	width: 100%;
}
.jcf-list .jcf-list-content {
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	width: 100%;
}
.jcf-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.jcf-list ul li {
	overflow: hidden;
	display: block;
}
.jcf-list .jcf-overflow {
	overflow: auto;
}
.jcf-list .jcf-option {
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	display: block;
	padding: 5px 9px;
	color: #656565;
	height: 1%;
}
.jcf-list .jcf-disabled {
	background: #fff !important;
	color: #aaa !important;
}
.jcf-select-drop .jcf-hover,
.jcf-list-box .jcf-selected {
	background: #e6e6e6;
	color: #000;
}
.jcf-list .jcf-optgroup-caption {
	white-space: nowrap;
	font-weight: bold;
	display: block;
	padding: 5px 9px;
	cursor: default;
	color: #000;
}
.jcf-list .jcf-optgroup .jcf-option {
	padding-left: 30px;
}
/*------------------------------------------------------------------
101. Testimonial Post / .testimonial-post
-------------------------------------------------------------------*/
.testimonial-post{
	background: $light-gray4;
	overflow: hidden;
	margin:0 0 51px;
	padding: 19px 22px 25px 26px;
	display: block;
	border:0;
	font:14px/24px $font-roboto;
	
	h2{
		margin:0 0 13px;
		text-transform: uppercase;
		font:700 24px/28px $font-roboto;
		a{
			color:$brown;
			
			&:hover{
				color:$headings-color;
				@include transition (all, 0.6s, ease);
				text-decoration: none;
				outline:none;
			}
		}
	}
	q{
		margin:0 0 11px;
		display: block;
		quotes:none;
		position:relative;
		
		.fa{
			font-size: 60px;
			line-height:40px;
			color:$light-gray6;
			position: absolute;
			top:100%;
			left:5px;
			margin:25px 0 0;
		}
	}
	footer{
		overflow: hidden;
		padding:0 9px 0 0;
		&:before{display: none;}
	}
	cite{
		float: right;
		font:700 18px/21px $font-sans-pro;
		a{
			color:$headings-color;
			@include vertical(inline-block, top);
			
			&:hover{
				color:$brown;
				@include transition (all, 0.6s, ease);
				text-decoration: none;
				outline:none;
			}
		}
		.alignleft{
			border:1px solid $light-gray6;
			float: left;
			margin:4px 15px 0 0;
			
			img{@extend %img-responsive;}
		}
		
	}
	&:hover{
		background: $brown;
		@include transition (all, 0.6s, ease);
		color:$white;
		
		h2{
			a{color:$white;}
		}
		cite{
			a{color:$white;}
		}
		q{
			.fa{
				color:$white;
			}
		}
	}
}
/*------------------------------------------------------------------
102. Shortcodes / .shortcodes
-------------------------------------------------------------------*/
.shortcodes{
	padding-top: 50px;
	padding-bottom:50px;
	line-height:22px;
	
	p{margin: 0;}
}
.shortcode-row{
	margin-bottom: 83px;
	
	&.doctor{
		padding-top: 101px;
		padding-bottom: 109px;
		@include element(before, 0, -9999px, 0, -9999px, $light-gray4);
		&:before{display: block;}
	}
	&.plans{
		padding-top: 149px;
	}
}
.shortcode-heading{
	margin-bottom: 33px;
	h2{
		margin:0;
		font-size: 18px;
		line-height:22px;
		font-weight: 400;
	}
}
/*------------------------------------------------------------------
103. Tabpanel / .tabpanel
-------------------------------------------------------------------*/
.tabpanel{
	overflow: hidden;
}
/*------------------------------------------------------------------
104. Nav Tabs / .nav-tabs
-------------------------------------------------------------------*/
.nav-tabs{
	font:700 18px/22px $font-sans-pro;
	border:0;
	letter-spacing:1px;
	
	li{
		padding:0;
		margin:0 9px 0 0;
		@media only screen and (max-width:$screen-xs-max){
			float: none !important;
			display: block;
			margin: 0 0 5px;
		}
		
		a{
			background: $light-gray15;
			color:$headings-color;
			border-radius:0;
			margin:0;
			text-align: center;
			padding:16px 28px;
			
			&:focus,
			&:hover{
				outline:none;
			}
		}
	}
}
/*------------------------------------------------------------------
105. Tab Content / .tab-content
-------------------------------------------------------------------*/
.tab-content{
	border:1px solid $light-gray6;
	padding:41px 27px 20px;
	line-height:22px;
	min-height:180px;
	
	p{margin:0 0 24px;}
}
/*------------------------------------------------------------------
106. Shortcode btn / .shortcode-btn
-------------------------------------------------------------------*/
.shortcode-btn{
	@media only screen and (max-width:$screen-sm-max){margin-bottom: 20px;}
}
.shortcode-btn2{
	@media only screen and (max-width:$screen-sm-max){margin-bottom: 80px;}
}
/*------------------------------------------------------------------
107. Shortcode Buttons / .shortcode-buttons
-------------------------------------------------------------------*/
.shortcode-buttons{
	padding:0;
	max-width:200px;
	.btn-default{
		background: $brown;
		min-width:180px;
		margin:0 0 30px;
		&:hover{
			background: $light-gray3;
		}
		&.lg{
			min-width:200px;
		}
		&.sm{
			min-width:150px;
		}
		&.xs{
			min-width:130px;
		}
	}
	&.add{
		.btn-default{
			background: $headings-color;
			&:hover{background: $brown;}
		}
	}
	&.add2{
		.btn-default{
			background: none;
			border:2px solid $headings-color;
			color:$headings-color;
			&:hover{
				color:$white;
				background:$headings-color;
			}
		}
	}
}
/*------------------------------------------------------------------
108. Pricing Plan / .pricing-plan
-------------------------------------------------------------------*/
.pricing-plan{
	background: $light-gray8;
	@extend %clearfix;
	border-radius:10px;
	border:3px solid $light-gray8;
	padding:81px 26px 27px;
	position:relative;
	@include transition (all, 0.6s, ease);
	.btn-default{
		background: $dark-gray3;
		font:700 24px/28px $font-family-base;
		color:$white;
		border-radius:5px;
		display: block;
		text-transform: none;
		margin:28px 0 0;
		padding:12px 10px;
		.txt{
			font-size: 14px;
			line-height:30px;
		}
		&:hover{opacity:0.8;}
	}
	&:hover{
		background: $white;
		border-color: $dark-gray3;
		
		.plans-heading{
			h2{
				color: $dark-gray3;
				a{color: $dark-gray3;}
			}
		}
		.plans-ico{
			background: $dark-gray3;
			color:$white;
			border-color: $dark-gray3;
		}
	}
	&.corp{
		.plans-heading:before{background: #00aeef;}
		.btn-default{background: #00aeef;}
		.plans-ico{ color: #00aeef;}
		&:hover{
			border-color: #00aeef;
			.plans-heading{
				h2{
					color: #00aeef;
					a{color: #00aeef;}
				}
			}
			.plans-ico{
				background: #00aeef;
				color:$white;
				border-color: #00aeef;
			}
		}
	}
	&.bus{
		.plans-heading:before{background: $brown;}
		.btn-default{background: $brown;}
		.plans-ico{ color: $brown;}
		&:hover{
			background: $white;
			border-color:$brown;
			.plans-heading{
				h2{
					color:$brown;
					a{color:$brown;}
				}
			}
			.plans-ico{
				background: $brown;
				color:$white;
				border-color:$brown;
			}
		}
	}
	&.pre{
		.plans-heading:before{background: #8dc63f;}
		.btn-default{background: #8dc63f;}
		.plans-ico{ color: #8dc63f;}
		&:hover{
			background: $white;
			border-color: #8dc63f;
			.plans-heading{
				h2{
					color: #8dc63f;
					a{color: #8dc63f;}
				}
			}
			.plans-ico{
				background: #8dc63f;
				color:$white;
				border-color: #8dc63f;
			}
		}
	}
}
.plans-heading{
	@extend %clearfix;
	color:$light-gray11;
	padding:0 0 17px;
	margin:0 -20px 20px;
	text-align: center;
	@include element(before, 100%, 0, auto, 50%, $dark-gray3);
	
	&:before{
		@include size(70px, 2px);
		margin:0 0 0 -35px;
	}
	h2{
		margin:0 0 10px;
		text-transform: uppercase;
		font-size: 24px;
		line-height:28px;
		@include transition (all, 0.6s, ease);
		
		a{
			color:$dark-gray3;
			
			&:hover{
				text-decoration: none;
			}
		}
	}
	p{margin:0;}
}
/*------------------------------------------------------------------
109. Star Rattings / .star-rattings
-------------------------------------------------------------------*/
.star-rattings{
	overflow: hidden;
	margin:0 -20px 31px;
	text-align: center;
	
	li{
		padding:0;
		
		.fa{
			color:$light-gray10;
			font-size: 20px;
		}
		&.high{
			.fa{
				color:$yellow;
			}
		}
	}
}
/*------------------------------------------------------------------
110. Plan Info / .plan-info
-------------------------------------------------------------------*/
.plan-info{
	color:$light-gray11;
	margin:0 -26px;
	
	li{
		overflow: hidden;
		padding:10px 26px 9px;
		border-top:1px solid $light-gray9;
		
		&:first-child{
			border:0;
			padding-top: 0;
		}
		.txt{float: left;}
		.txt2{float: right;}
	}
}
.plans-ico{
	border-radius:50%;
	background: $white;
	text-align: center;
	border:5px solid $light-gray8;
	@include square(105px);
	position: absolute;
	top: -58px;
	left:50%;
	margin:0 0 0 -56px;
	font-size: 35px;
	@include v-align2(fa, $valign: middle);
	@include transition (all, 0.6s, ease);
	.fa{
		margin:0 0 0 -8px;
	}
	.fa-user{
		margin:0 0 0 -5px;
		font-size: 40px;
	}
	.fa-briefcase{
		margin:0 0 0 -5px;
	}
	.fa-trophy{
		margin:0 0 0 -5px;
		font-size: 40px;
	}
}
/*------------------------------------------------------------------
111. Alert / .alert
-------------------------------------------------------------------*/
.alert-massege{
	background: $light-gray18;
	border:1px solid #dadcdc;
	border-radius:5px;
	padding:30px 5% 29px 10.2%;
	margin-bottom:20px;
	position:relative;
	color:$light-gray19;
	h2{
		margin:0 0 6px;
		color:$light-gray16;
		font-size: 18px;
		line-height:22px;
		text-transform: uppercase;
	}
	p{margin: 0;}
	.fa{
		position: absolute;
		left: 49px;
		top: 50%;
		font-size: 30px;
		margin:-14px 0 0;
		color:$light-gray19;
	}
	.close{
		position: absolute;
		right: 12px;
		top: 9px;
		text-shadow:none;
		opacity:1;
		@include transition (all, 0.6s, ease);
		.fa{
			font-size: 18px;
			position:relative;
			left: auto;
			top:auto;
			margin:0;
		}
		&:hover{opacity: 0.7;}
	}
	&.delete{
		background: $light-pink;
		color:$dark-orange;
		h2{color:$dark-orange;}
		.fa{
			color:$dark-orange;
		}
	}
	&.success{
		background: $light-green;
		color:$dark-green;
		h2{color:$dark-green;}
		.fa{
			color:$dark-green;
		}
	}
	&.alert{
		background: $light-yellow;
		color:$dark-yellow;
		h2{color:$dark-yellow;}
		.fa{
			color:$dark-yellow;
		}
	}
}
/*------------------------------------------------------------------
112. Main Gallery / .main-gallery
-------------------------------------------------------------------*/
.main-gallery{
	@include element2(after, 0, 0, 0, 0);
	&:after{background: rgba(0, 0, 0, 0.6);}
	.beans-slide{
		@include element2(after, 0, 0, 0, 0);
		&:after{background: rgba(0, 0, 0, 0.6);}
	}
	.slick-arrow{
		right: 0;
		left: 50%;
		border: 0;
		bottom: 9%;
		z-index: 99;
		float: none;
		color:$black2;
		font-size: 24px;
		line-height:28px;
		border-radius:50%;
		background: $white;
		position: absolute;
		text-indent: 9999px;
		@include square(32px);
		@include vertical(inline-block, top);
		@include transition (all, 0.6s, ease);
		&.active,
		&:focus,
		&:hover{
			outline:none;
			color:$white;
			background: $brown;
			&:after{color: $white;}
		}
		&.slick-prev{margin: 0 0 0 -30px;}
		&.slick-next{margin: 0 0 0 8px;}
		&:after{
			top: 0;
			left: 50%;
			color: $brown;
			text-indent: 0;
			overflow: hidden;
			margin: 0 0 0 -3px;
			position: absolute;
			font-family:'FontAwesome';
		}
		&.slick-prev:after{content:"\f104"; margin: 0 0 0 -5px;}
		&.slick-next:after{content:"\f105";}
	}
	.btn-box{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 9%;
		margin:0;
		z-index: 999;
		text-align: center;
	}
	.btn-prev,
	.btn-next{
		float: none;
		@include transition (all, 0.6s, ease);
		@include vertical(inline-block, top);
		@include square(32px);
		background: $white;
		border-radius:50%;
		margin:0 3px;
		color:$black2;
		font-size: 18px;
		line-height:28px;
		text-align: center;
		&.active,
		&:focus,
		&:hover{
			outline:none;
			color:$white;
			background: $brown;
		}
	}
	.slide-content{@include v-align(slide-heading2, middle);}
}
.main-banner{
	@extend %boxreset;
	.slide-content{
		@include element2(after, -9999px, -9999px, -9999px, -9999px);
		&:after{
			z-index: -1;
			background: rgba(0, 0, 0, 0.6);
		}
	}
	.alignleft{z-index: 88;}
	.slide-heading{
		width: 700px;
		margin: 70px 0 50px;
		vertical-align: bottom;
		@media only screen and (max-width:$screen-sm-max){
			width: 100%;
			margin: 70px 0 0;
		}
	}
	.attorneys-form{
		z-index: 999;
		position: relative;
		.form-group{
			.form-col{
				width: 100%;
				margin: 0 0 10px;
				&:first-child{margin: 0 0 10px;}
			}
			&.add{
				.form-col{
					width: 45%;
					margin: 0 0 10px 5%;
					&:first-child{
						width: 50%;
						margin: 0 0 10px;
					}
				}
			}
		}
		label{
			color: $white;
			text-align: left;
		}
		.jcf-select{
			height: 54px;
		}
	}
}
.slide-heading2{
	text-align: center;
	padding:147px 8% 0;
	margin:180px 0 0;
	max-height:260px;
	overflow: hidden;
	z-index: 5;
	@include element2(before, 0, auto, auto, 50%);
	@media only screen and (max-width:$screen-sm-max){
		max-height: 360px;
	}
	@media only screen and (max-width:$screen-xs-max){
		margin: 0;
	}
	&:before{
		background: url(../images/sprite.png) no-repeat -321px -229px;
		@include size(78px, 109px);
		margin:0 0 0 -41px;
	}
	h1{
		font-size: 36px;
		line-height:48px;
		font-weight: 600;
		margin:0 0 16px;
		color:$white;
		text-transform: uppercase;
		@media only screen and (max-width:$screen-xs-max){
			font-size: 20px;
			line-height: 40px;
		}
	}
}
.clearfix-sm{
	@media only screen and (max-width:$screen-sm-max){
		clear: left;
	}
}
/*------------------------------------------------------------------
113. Forget Form / .forget-form
-------------------------------------------------------------------*/
.forget-form{
	@extend %clearfix;
	margin:0;
	.form-group{
		margin:0 0 15px;
		@extend %clearfix;
	}
	label{
		display: block;
		margin:0 0 10px;
		color:$brown;
		font-size: 18px;
		line-height:22px;
		font-weight: 700;
		text-transform: capitalize;
	}
	.form-control{
		border:1px solid #e5e5e5;
		background: $white;
		@include size(100%, 50px);
		outline:none;
		box-shadow:none;
		border-radius:0;
	}
	.btn-default{
		font-weight: 600;
		font-size: 18px;
		line-height:20px;
		padding:5px;
		@include size(140px, 50px);
		background:$brown;
		float: left;
		&:hover{background: $light-gray3;}
	}
	.forget{
		margin:16px 0 0;
		float: right;
		color:$brown;
		font-size: 18px;
		line-height:22px;
		font-weight: 700;
		text-transform: capitalize;
		@include transition (all, 0.6s, ease);
		&:focus,
		&:hover{
			color:$light-gray3;
			text-decoration: none;
			outline:none;
		}
	}
}
/*------------------------------------------------------------------
114. Attorneys Form / .attorneys-form
-------------------------------------------------------------------*/
.attorneys-form{
	@extend %clearfix;
	margin:0;
	.form-group{
		margin:0 0 15px;
		@extend %clearfix;
		.form-col{
			width: 48%;
			float: left;
			margin:0 0 0 4%;
			&:first-child{margin-left: 0;}
		}
		&.add{
			.form-col{width: 30.6%;}
		}
	}
	label{
		display: block;
		margin:0 0 10px;
		color:$headings-color;
		text-transform: capitalize;
		font:600 18px/22px $font-sans-pro;
	}
	.form-control{
		border:1px solid #e5e5e5;
		background: $white;
		@include size(100%, 50px);
		outline:none;
		box-shadow:none;
		border-radius:0;
	}
	.btn-default{
		font-weight: 600;
		font-size: 18px;
		line-height:20px;
		padding:5px;
		@include size(140px, 50px);
		background:$brown;
		float: left;
		&:hover{background: $light-gray3;}
	}
	.forget{
		margin:16px 0 0;
		float: right;
		color:$brown;
		font-size: 18px;
		line-height:22px;
		font-weight: 700;
		text-transform: capitalize;
		@include transition (all, 0.6s, ease);
		&:focus,
		&:hover{
			color:$light-gray3;
			text-decoration: none;
			outline:none;
		}
	}
}
.popup-holder {
	position: relative;
	overflow: hidden;
	height: 0;
}
.video-lightbox{
	width: 900px;
	@media only screen and (max-width:$screen-md-max){
		width: 800px;
	}
	@media only screen and (max-width:$screen-sm-max){
		width: 600px;
	}
	@media only screen and (max-width:$screen-xs-max){
		width: 300px;
	}
}
.site-map{
	padding: 50px 0;
	min-height: 339px;
}
#contact{
	.site-map{
		min-height: 500px;
		margin: 0 0 61px;
	}
}
#team{
	@include element(before, 0, -9999px, 0, -9999px, $light-gray4);
	&:before{display: block;}
}
.pre-loader{
	z-index: 9999;
	background: #fff;
	@extend %postionreset;
	position: fixed;
	.preloader1{
		top: 50%;
		left: 50%;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		margin: -23px 0 0 -23px;
		@include size(230px, 200px);
		background: url(../images/preloader.gif) no-repeat;
	}
}
.icons-container{
	padding: 200px 0 50px;
	h2{
		margin: 0 0 25px;
		text-transform: capitalize;
		@media only screen and (max-width:$screen-xs-max){
			font-size: 25px;
			line-height: 35px;
		}
	}
	a{
		color:$light-gray3;
		&:hover{
			color:$brown;
			text-decoration: none;
		}
	}
	.fa-hover{
		padding-bottom: 15px;
	}
}
/* Slider */

.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {display: none;}
.slick-slide .slide-heading2 {
	transition: all 2.5s ease;
	position: relative;
	bottom: -50px;
	opacity: 0;
}
.slick-active .slide-heading2 {
	transition: all 1s ease 0.6s;
	bottom: 0;
	opacity: 1;
}