body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}


/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.normal-section {
    /*height: 100%;*/
    padding-top: 0px;
    /*text-align: center;*/
    background: #fff;
}

.transparent-section {
	background-position: center; padding: 25px 0px; width: 100%; position: relative; background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
}
.transparent-section::before {
	background: rgba(143,188,143, 0.9); left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 0; content: "";
}

.sec-title {
	margin-bottom: 35px; position: relative; direction: ltr;
}
.sec-title h2 {
	background: rgb(32, 46, 49); padding: 10px 30px 10px 15px; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 30px; font-size: 24px; font-weight: 800; display: inline-block; position: relative;
}
.sec-title h2::after {
	background: rgb(32, 46, 49); top: 0px; width: 20px; height: 100%; right: -10px; position: absolute; content: ""; transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg);
}
.sec-title h2 span {
	color: rgb(143,188,143); position: relative;
}

/*Tab*/
.faq-cat-content {
    margin-top: 25px;
}

.faq-cat-tabs li a {
    padding: 15px 10px 15px 10px;
    background-color: #ffffff;
    border: 2px solid #dddddd;
    color: black;
}
.nav-tabs li a:hover {
    background-color: #c9d9e6;
    border: 3px solid #dddddd;
    color: blue;
}

.nav-tabs li aa:active  {
    background-color: #ffffff;
    border: 5px solid #dddddd;
    color: blue;
}
.nav-tabs li a:focus,
.panel-heading a:focus {
    outline: none;
    background-color: #ffffff;
}

.panel-heading a,
.panel-heading a:hover,
.panel-heading a:focus {
    text-decoration: none;
    color: #777777;
}

.faq-cat-content .panel-heading:hover {
    background-color: #a5c0d6;
}

.active-faq {
    border-left: 5px solid #888888;
}

.panel-faq .panel-heading .panel-title span {
    font-size: 13px;
    font-weight: normal;
}


.light-btn {
	background: rgb(143,188,143); padding: 10px 30px; border: 1px solid transparent; transition:0.5s; border-image: none; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 26px; font-family: "WYekan",sans-serif; margin-bottom: 5px; display: inline-block; position: relative; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
.dark-btn {
	background: rgb(32, 46, 49); padding: 10px 30px; border: 1px solid transparent; transition:0.5s; border-image: none; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 26px; font-family: "WYekan",sans-serif; margin-bottom: 5px; display: inline-block; position: relative; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
.light-btn:hover {
	border-color: rgb(45, 45, 45); color: rgb(255, 255, 255); background-color: rgb(143,188,143);
}
.dark-btn:hover {
	border-color: rgb(45, 45, 45); color: rgb(255, 255, 255); background-color: rgb(143,188,143);
}
.primary-btn {
	background: rgb(143,188,143); left: 0px; color: rgb(32, 46, 49) !important; overflow: hidden; padding-right: 60px; display: inline-block; position: relative;
}
.primary-btn * {
	transition:700ms; -webkit-transition: all 700ms ease; -o-transition: all 700ms ease; -moz-transition: all 700ms ease;
}
.primary-btn .btn-text {
	padding: 12px 40px 8px 25px; text-transform: uppercase; line-height: 30px; font-size: 12px; font-weight: 600; display: block; position: relative;
}
.primary-btn .icon {
	background: rgb(32, 46, 49); padding: 10px 30px 10px 25px; top: 0px; height: 100%; text-align: center; right: -10px; color: rgb(255, 255, 255); line-height: 30px; font-size: 12px; display: block; position: absolute; transform: skewX(-20deg); -webkit-transform: skewX(-20deg); -o-transform: skewX(-20deg); -moz-transform: skewX(-20deg);
}
.light.primary-btn .icon {
	background: rgb(255, 255, 255); color: rgb(32, 46, 49);
}
.primary-btn .icon .f-icon {
	display: block; position: relative; transform: skewX(20deg); -webkit-transform: skewX(20deg); -o-transform: skewX(20deg); -moz-transform: skewX(20deg);
}
.primary-btn:hover .btn-text {
	color: rgb(255, 255, 255); opacity: 1;
}
.hvr-bounce-to-left.primary-btn::before {
	background: rgb(32, 46, 49);
}

.TileCircular {
	width: 250px;
	height: 450px;
	vertical-align:top;
	display: inline-block;
	padding: 15px;
	margin: 15px;
	top: 0px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
   
}
 .TileCircular:hover {
    background-color:rgba(255, 255, 255, .1);
}
 .cimgage{
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	}

.post {
	margin: 0px auto 50px; padding: 0px 15px; position: relative;
}
.post-inner {
	margin: 0px auto; padding: 0px 15px; position: relative; max-width: 400px;
}
.post * {
	transition:700ms; -webkit-transition: all 700ms ease; -o-transition: all 700ms ease; -moz-transition: all 700ms ease;
}
.post .image {
	width: 100%; overflow: hidden; position: relative; z-index: 1;
}
.post .image::after {
	background: rgb(143,188,143); transition:700ms; left: 0px; top: -100%; width: 100%; height: 100%; display: block; position: absolute; z-index: 0; content: ""; opacity: 0.5; -webkit-transition: all 700ms ease; -o-transition: all 700ms ease; -moz-transition: all 700ms ease;
}
.post:hover .image::after {
	top: 0%;
}
.post .image img {
	width: 100%; display: block; position: relative;
}
.post .image .curve {
	background: rgb(252, 252, 252); top: 100%; width: 250%; height: 150%; right: -100px; position: absolute; z-index: 1; transform: rotate(-13deg); -webkit-transform: rotate(-13deg); -o-transform: rotate(-13deg); -moz-transform: rotate(-13deg);
}
.post:hover .image .curve {
	transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);
}
.post .content {
	margin: -14px 10px 0px; top: 0px; position: relative; z-index: 2;
}
.post:hover .content {
	top: 16px;
}
.post .content::before {
	background: rgb(255, 255, 255); border: 1px solid rgb(241, 241, 241); transition:700ms; border-image: none; top: -36px; width: 100%; height: 96%; right: 0px; position: absolute; z-index: 0; content: ""; transform: skewY(-13deg); -webkit-transition: all 700ms ease; -o-transition: all 700ms ease; -webkit-transform: skewY(-13deg); -o-transform: skewY(-13deg); -moz-transition: all 700ms ease; -moz-transform: skewY(-13deg);
}
.post:hover .content::before {
	border-color: rgb(251, 179, 23);
}
.post:hover .content .inner-box {
	border-color: rgb(251, 179, 23);
}
.post .content .inner-box {
	background: rgb(255, 255, 255); border-width: medium 1px 1px; border-style: none solid solid; border-color: currentColor rgb(241, 241, 241) rgb(241, 241, 241); padding: 20px 30px 30px; border-image: none; position: relative; z-index: 5;
}
.post .content h3 {
	text-transform: uppercase; line-height: 20px; padding-left: 15px; font-size: 14px; font-weight: 800; margin-bottom: 15px; border-left-color: rgb(251, 179, 23); border-left-width: 5px; border-left-style: solid; position: relative;
}
.post .content .text {
	color: rgb(110, 110, 110); line-height: 1.6em; font-size: 14px; font-weight: 500; margin-bottom: 5px; position: relative;
}
.post .content .read_more {
	color: rgb(32, 46, 49); text-transform: uppercase; font-size: 12px; font-weight: 700; position: relative;
}
.post .content .read_more:hover {
	color: rgb(251, 179, 23);
}


 .project-box {
	transition:0.7s; width: 25%; overflow: hidden; float: left; display: none; position: relative;
}
 .project-box .image {
	width: 100%; position: relative; z-index: 2;
}
 .project-box .image img {
	width: 100%; height: auto; display: block; position: relative;
}

 .project-box:hover .image  {
	top: 0%; opacity: 0.5;
}
 .project-box .text-content {
	background: rgb(255, 255, 255); padding: 0px 30px; left: 0px; width: 100.5%; height: 42%; text-align: right; bottom: -20%; border-top-color: rgb(143,188,143); border-top-width: 4px; border-top-style: solid; position: absolute; z-index: 5; transform: skewY(-19deg); -webkit-transform: skewY(-19deg); -o-transform: skewY(-19deg); -moz-transform: skewY(-19deg);
}
 .project-box .text-content {
	background: rgba(255, 255, 255, 0.95); padding: 22px 40px 22px 64px; left: -33px; width: 100%; height: auto; text-align: left; bottom: -1px; transform: skewX(35deg);
}
 .project-box .hvr-bounce-to-bottom.text-content::before {
	background: rgb(143,188,143);
}
 .project-box .text-content:hover .text {
	color: rgb(255, 255, 255);
}
 .project-box .text-content .text {
	top: -10px; color: rgb(185, 185, 185); position: relative; transform: skewY(19deg); -webkit-transform: skewY(19deg); -o-transform: skewY(19deg); -moz-transform: skewY(19deg);
}
 .project-box .text-content .text {
	top: 0px; transform: skewX(-35deg);
}
 .project-box .text-content .text h4 {
	color: rgb(32, 46, 49); text-transform: uppercase; font-size: 14px; font-weight: 800; margin-top: 5px;
}


.main-footer {
	background: rgb(32, 46, 49); color: rgb(255, 255, 255); position: relative; direction: ltr;
}
.main-footer .subscribe-area {
	background: rgb(143,188,143); margin: 0px 30px; padding: 20px 30px; position: relative; transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg);
}
.main-footer .subscribe-area .subs-box {
	background: url("../images/icons/envelop_bg.png") no-repeat left; margin: 0px auto; padding: 12px 0px 12px 40px; position: relative; min-height: 0px; max-width: 660px; transform: skewX(15deg); -webkit-transform: skewX(15deg); -o-transform: skewX(15deg); -moz-transform: skewX(15deg);
}
.main-footer .subscribe-area h2 {
	padding: 10px 0px; top: 1px; color: rgb(32, 46, 49); text-transform: uppercase; line-height: 30px; font-size: 24px; font-weight: 700; position: relative;
}
.main-footer .subscribe-area h2 span {
	color: rgb(255, 255, 255);
}
.main-footer .subscribe-area .form-box {
	padding: 0px;
}
.main-footer .subscribe-area .form-group {
	margin: 0px; padding: 0px; overflow: hidden; position: relative;
}
.main-footer .subscribe-area .form-group input[type='email'] {
	background: rgb(255, 255, 255); padding: 10px 80px 10px 15px; width: 100%; color: rgb(32, 46, 49); line-height: 30px; display: block; position: relative;
}
.main-footer .subscribe-area .form-group input[type='text'] {
	background: rgb(255, 255, 255); padding: 10px 80px 10px 15px; width: 100%; color: rgb(32, 46, 49); line-height: 30px; display: block; position: relative;
}
.main-footer .subscribe-area .form-group input[type='submit'] {
	background: rgb(32, 46, 49); padding: 12px 15px 10px 5px; top: 0px; width: 80px; height: 50px; text-align: center; right: -8px; color: rgb(211, 212, 212); line-height: 30px; font-size: 18px; display: block; position: absolute; transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg);
}
.main-footer .subscribe-area .form-group button[type='submit'] {
	background: rgb(32, 46, 49); padding: 12px 15px 10px 5px; top: 0px; width: 80px; height: 50px; text-align: center; right: -8px; color: rgb(211, 212, 212); line-height: 30px; font-size: 18px; display: block; position: absolute; transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg);
}
.main-footer .subscribe-area .form-group button[type='submit'] .fa {
	transform: skewX(15deg); -webkit-transform: skewX(15deg); -o-transform: skewX(15deg); -moz-transform: skewX(15deg);
}
.main-footer .subscribe-area .form-group button[type='submit']:hover {
	color: rgb(255, 255, 255);
}
.main-footer .footer-widget-area {
	margin: 0px -30px; padding: 60px 0px 20px; position: relative;
}
.main-footer .footer-widget-area .footer-widget {
	padding: 0px 40px !important; margin-bottom: 30px; position: relative;
}
.main-footer .footer-widget-area .footer-widget h3 {
	text-transform: uppercase; font-size: 18px; font-weight: 700; margin-bottom: 25px; position: relative;
}
.main-footer .footer-widget-area .footer-widget h3 img {
	margin-top: -5px; position: relative;
}
.main-footer .footer-widget-area .about-widget {
	position: relative;
}
.main-footer .footer-widget-area .quick-links {
	position: relative;
}
.main-footer .footer-widget-area .address {
	position: relative;
}
.main-footer .footer-widget-area .latest-work {
	position: relative;
}
.main-footer .about-widget p {
	color: rgb(193, 194, 194); line-height: 1.6em; margin-bottom: 20px;
}
.main-footer .footer-widget .widget-content * {
	transition:0.5s; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
.main-footer .quick-links ul li {
	line-height: 24px; padding-left: 20px; margin-bottom: 7px; position: relative;
}
.main-footer .quick-links ul li .fa {
	left: 0px; top: 0px; color: rgb(143,188,143); line-height: 18px; font-size: 15px; position: absolute;
}
.main-footer .quick-links ul li a {
	color: rgb(232, 232, 232); display: block;
}
.main-footer .footer-widget a:hover {
	color: rgb(143,188,143);
}
.main-footer .address .info {
	margin-bottom: 20px; position: relative;
}
.main-footer .address .info li {
	color: rgb(193, 194, 194); margin-bottom: 7px; position: relative;
}
.main-footer .address .info li a {
	color: rgb(193, 194, 194); position: relative;
}
.main-footer .address .info li a:hover {
	color: rgb(143,188,143);
}
.main-footer .address .info li .fa {
	color: rgb(143,188,143); position: relative;
}
.main-footer .address .social {
	position: relative;
}
.main-footer .address .social a {
	background: none; padding: 3px; border: 2px solid rgb(96, 96, 96); border-image: none; width: 30px; height: 30px; text-align: center; color: rgb(96, 96, 96); line-height: 22px; margin-right: 3px; display: inline-block; position: relative;
}
.main-footer .address .social a:hover {
	background: rgb(143,188,143); border-color: rgb(143,188,143); color: rgb(32, 46, 49);
}
.main-footer .latest-work {
	max-width: 400px;
}
.widget-content {
	max-width: 400px;
}
.main-footer .latest-work .image {
	border: 2px solid rgb(32, 46, 49); border-image: none; width: 33.33%; overflow: hidden; float: left; position: relative;
}
.main-footer .latest-work .image img {
	transition:0.5s; width: 100%; display: block; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}
.main-footer .latest-work .image img:hover {
	opacity: 0.75; transform: scale(1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1);
}
.main-footer .footer-bottom {
	background: rgb(29, 40, 43); padding: 18px 0px; color: rgb(122, 123, 123); line-height: 24px; font-size: 13px; font-weight: 500; position: relative;
}
.main-footer .footer-bottom a {
	color: rgb(143,188,143);
}