/*
====================================================

* 	[Master Stylesheet]
	
	Template Name 	:  Ratio
	Version    		:  1.0
	Author     		:  W3Engineers Ltd.
	Author URI 		:  https://themeforest.net/user/w3engineers 

====================================================
	
	TOC
	
	1. PRIMARY STYLES
		RESPONSIVE 
	2. COMMON STYLES
		RESPONSIVE 
	3. LIST STYLING
	4. FONTS
	5. INPUT STYLING
	6. HEIGHT/WIDTH STYLING
		WIDTH 
		ISOTOPE GRID STYLING 
		BLOG GRID 
		RESPONSIVE 
	7. BORDER STYLING
		RESPONSIVE 
	8. SHADOW STYLING
	9. BUTTONS STYLING
		RESPONSIVE 
	10. FONT COLOR STYLING
	11. BACKGROUND COLOR STYLING
		BACKGROUND IMAGES 
		RESPONSIVE 
	12. MARGIN STYLING
		RESPONSIVE 
	13. PADDING STYLING
		RESPONSIVE 
	14. POSITION STYLING
		RESPONSIVE 
	15. ICONS STYLING
		CONSTRUCTION LOGOS 
		ARCHITECTURE LOGOS 
		ICONS 
		RESPONSIVE 
		VIDEO ICON 
		RESPONSIVE 
	16. IMAGE STYLING
		IMAGE HOVER EFFECT 
	17. HOVER EFFECT
	18. REVOLUTION SLIDER NAVIGATION
		RESPONSIVE 
	19. COUNTER STYLING
		RESPONSIVE 
	20. PORTFOLIO/PROJECT STYLING
		REVERSE EFFECT 
		PROJECT STYLING 2 
		RESPONSIVE 
		PROJECT STYLING 3 
		RESPONSIVE 
	21. TEAM STYLING 
	22. CONTACT FORM
	23. GO TOP
	24. SWIPER SLIDER STYLING
		SWIPER SLIDE ZOOM  
		SWIPER SIDED CRONTROL 
		SWIPER TWO SIDED CRONTROL 
		BOTTOM ALIGN 
		RESPONSIVE 
		TOP ALIGN 
		RESPONSIVE 
	25. BIG TEXT WITH BORDER BOTTOM
		RESPONSIVE 
	26. BACKGROUND VIDEO
		VIDEO LAYER 
		FEADEIN VIDEO 
		PAUSE/PLAY BUTTON 
		RESPONSIVE 
	27. PRELOADER STYLING
	28.  QUOTO STYLING 
		SWIPER STYLING 
		QUOTO 
		RESPONSIVE 
	29. CHART STYLING
		RESPONSIVE 
	30.  ACCORFIAN STYLING 
	31. TIMELINE STYLING
		RESPONSIVE 
		
===================================================


/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html { width: 100%; height: 100%; font-size: 100%; overflow-x: hidden; -ms-touch-action: manipulation; touch-action: manipulation; }
	
body { font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: 400; margin: 0; word-wrap: break-word; 
	line-height: 1.3; width: 100%; overflow-x: hidden; word-break: break-word; 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #222; }

h1, h2, h3, h4, h5, h6, p, ul, li, a { margin: 0; padding: 0; line-height: inherit; font-weight: inherit; }

h1, h2, h3, h4, h5, h6{ line-height: 1.2; font-weight: 400; }

h3, h4, h5, h6{ line-height: 1.5; }

h1 { font-size: 4.5em; }
h2 {font-size: 2.8em; }
h3 {font-size: 1.8em; }
h4 {font-size: 1.4em; }
h5 { font-size: 1.15em; }
h6 { font-size: .9em; letter-spacing: 1px; }

p{ font-family: 'Lato', sans-serif; font-size: 1.1em; line-height: 1.6; }

p{ color: #555; }

a{ display: inline-block; cursor: pointer; color: inherit; outline: 0; -webkit-transition: all .25s ease; transition: all .25s ease; }

button{ cursor: pointer; color: inherit; outline: 0; border: 0; box-shadow: none; background: none; 
	-webkit-transition: all .25s ease; transition: all .25s ease; }

input, textarea{ display: inline-block; color: inherit; max-width: 100%; -webkit-transition: all .2s; transition: all .2s; }

a:hover, a:focus, a:active,
button:hover, button:focus, button:active{ outline: 0; text-decoration: none; color: inherit; }

input:focus,
textarea:focus{ box-shadow: 0; outline: 0; border: 1px solid #035ccc; }

ul { margin: 0; }

li { display: inline-block; list-style: none; }

ul > li i{ margin-right: 5px; }


img { height: auto; width: 100%; }

b { font-weight: 500; }

i { display: inline-block; }

b.max-bold{ font-weight: 700; }

i{ line-height: 1; }

input{ border: 0; outline: 0; height: 40px; width: 100%; }

textarea{ border: 0; outline: 0; max-width: 100%; width: 100%; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	h1 { font-size: 4.5em; }
	h2 {font-size: 2.8em; }
	
}

@media only screen and (max-width: 767px) {

    body { font-size: 14px; }
	
	h1 { font-size: 4em; }
	h2 {font-size: 2.5em; }

}

@media only screen and (max-width: 576px) {

	h1 { font-size: 3.2em; }
	h2 {font-size: 2.2em; }
	
}



/* ---------------------------------
2. COMMON STYLES
--------------------------------- */

.section{ padding: 120px 0 90px; }

.heading{ text-align: center; margin: 0 auto 80px; max-width: 700px; }

.heading .tilte{ margin-bottom: 15px; }

.heading .pre-heading{ font-size: 1.05em; letter-spacing: 2px; color: #035ccc; }

.heading .pre-heading.color-eee{ color: #eee; }

.heading.heading-left{ text-align: left; max-width: 2500px; }

.float-left{ float: left!important; }

.float-right{ float: right!important; }

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

.left-text { text-align: left; }

.right-text { text-align: right; }

.display-table { display: table; width: 100%; height: 100%; }

.display-table-cell { display: table-cell; vertical-align: middle; }

.display-none{ display: none; }

.display-block{ display: block; }

.list-m-0 > li i{ margin-right: 0px; }

.disp-inl-block{ display: inline-block; }


.overflow-hidden{ overflow: hidden; }

.overflow-visible{ overflow: visible; }

.border-left{ position: relative; padding-left: 16px; }

.border-left:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #ccc; }


.letter-s-5{ letter-spacing: 5px;  }

.opacity--0{ opacity: 0; }
.opacity--04{ opacity: .04; }
.opacity--05{ opacity: .05; }
.opacity--1{ opacity: .1; }
.opacity--5{ opacity: .5; }
.opacity--85{ opacity: .85; }


	
/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
	
	.center-lg-text { text-align: center; }
	
	.overflow-lg-hidden{ overflow: hidden; }
	
	.disp-lg-inl-block{ display: inline-block; }
}

@media only screen and (max-width: 992px) {
	
	.section{ padding: 80px 0 50px; }

	.heading{ margin: 0 auto 60px; }

	.center-md-text{ text-align: center; }
	
	.display-md-block{ display: block; }
	
}

@media only screen and (max-width: 767px) {

	.section{ padding: 50px 0 20px; }
	
	.heading{ margin-bottom: 40px; }
	
	.display-sm-block { display: block; }
	
	.center-sm-text{ text-align: center; }
	
	.left-sm-text{ text-align: left; }
	
	.float-sm-none{ float: none!important; }
	
	.display-sm-hide{ display: none; }
	
	.disp-sm-inl-block{ display: inline-block; }
	
}

@media only screen and (max-width: 576px) {
	
	.section .heading .title{ padding: 0; }
	
	.section .heading{ text-align: center; padding: 0px; }
  
	.left-xs-text{ text-align: left; }
	
	.float-xs-none{ float: none!important; }
	
	.center-xs-text{ text-align: center; }
	
}


/* ---------------------------------
3. LIST STYLING
--------------------------------- */

.list-pos-relative > li{ position: relative; }

.list-block > li{ display: block; }

.list-span-block > li span{ display: block; margin-top: 5px; }

.list-abs-icon > li i{ position: absolute; top: 5px; left: 0; }


.list-mtb-10 > li{ margin-top: 10px; margin-bottom: 10px; }
.list-mtb-15 > li{ margin-top: 15px; margin-bottom: 15px; }
.list-mtb-20 > li{ margin-top: 20px; margin-bottom: 20px; }

.list-ml-10 > li{ margin-left: 10px; }

.list-mr-15 > li{ margin-right: 15px; }

.list-mb-15 > li{ margin-bottom: 15px; }

.list-mlr-10 > li{ margin-left: 10px; margin-right: 10px; }


.list-ptb-5 > li{ padding-top: 5px; padding-bottom: 5px; }
.list-ptb-15 > li{ padding-top: 15px; padding-bottom: 15px; }

.list-pl-25 > li{ padding-left: 25px; }


.list-p-5 > li > a{ padding: 5px; }
.list-p-10 > li > a{ padding: 10px; }

.list-ptb-5 > li > a{ padding-top: 5px; padding-bottom: 5px; }

.list-pb-10 > li > a{ padding-bottom: 10px; }
.list-pb-15 > li > a{ padding-bottom: 15px; }

.list-plr-5 > li > a{ padding-left: 5px; padding-right: 5px; }
.list-plr-10 > li > a{ padding-left: 10px; padding-right: 10px; }
.list-plr-15 > li > a{ padding-left: 15px; padding-right: 15px; }

.list-i-clear > li i{ margin: 0; }

.list-i-mr-10 > li i{ margin-right: 10px; }
.list-i-mr-15 > li i{ margin-right: 15px; }

.list-bg-lite > li > a{ background: #f1f2f4; }


.list-border-btm > li{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #ddd; }

.list-border-btm > li:last-child{ border: 0; margin-bottom: 0; }

.list-circle-left > li > a{ padding-left: 25px; position: relative; }

.list-circle-left > li > a:after{ content:''; position: absolute; top: 50%; margin-top: -4px; left: 0px; height: 8px; 
	width: 8px; border-radius: 10px; }

.list-circle-left.blue-border > li > a:after{ border: 1px solid #035ccc; }


.list-icon-left > li{ position: relative; }

.list-icon-left > li{ padding-left: 45px; }

.list-icon-left > li i{ position: absolute; top: 50%; left: 0; margin-top: -15px; }


.list-icon-tp-left > li{ position: relative; }

.list-icon-tp-left > li i{ position: absolute; top: 0; left: 0; margin-top: 5px; }

.list-l-h-1-8 > li{ line-height: 1.8; }

.list-span-l-h-30 > li span{ line-height: 30px; display: inline-block; }



/* ---------------------------------
4. FONTS
--------------------------------- */

.font-roboto{ font-family: 'Roboto', sans-serif; }

.font-roboto b { font-weight: 500; }

.font-muli{ font-family: 'Muli', sans-serif; color: #232f2f; }

.font-muli b{ font-weight: 700; }

.font-karma{ font-family: 'Karma', serif;}

.font-karma b{ font-weight: 600; }

.font-libre-baskerville{ font-family: 'Libre+Baskerville', serif; }

.font-ubuntu{ font-family: 'Ubuntu', sans-serif; }

.font-ubuntu b{ font-weight: 700; }

.font-poppins{ font-family: 'Poppins', sans-serif; }

.font-lato{ font-family: 'Lato', sans-serif; }

.font-lato b{ font-weight: 700; }

b.fw-700{ font-weight: 700; }

b.fw-800{ font-weight: 800; }

.font-size-8{ font-size: .8em; }
.font-size-60{ font-size: 6em; }
.font-size-h4{ font-size: 1.5em; }
.font-size--1-1m{ font-size: 1.1em; }
.font-size--1-2m{ font-size: 1.2em; }
.font-size--1-3m{ font-size: 1.3em; }
.font-size--1-5m{ font-size: 1.5em; }
.font-size--2m{ font-size: 2em; }
.font-size--3m{ font-size: 3em; }
.font-size--4m{ font-size: 4em; }
.font-size--50px{ font-size: 50px; }


.line-h-1{ line-height: 1; }
.line-h-1-5{ line-height: 1.5; }
.line-h-1-6{ line-height: 1.6; }

.first-letter{ float: left; font-size: 5em; line-height: .9; padding: 0px 8px 0 3px; font-weight: 600; }


/* ---------------------------------
5. INPUT STYLING
--------------------------------- */

form input{ padding: 0 15px; } 

form textarea{ padding: 15px; } 

form.input-h-45 input{ height: 45px; }

form.input-mb-20 input,
form.input-mb-20 textarea{ margin-bottom: 20px; }


form.input-bg-white input,
form.input-bg-white textarea{ background: #fff; }

form.focus-bg-blue input:focus,
form.focus-bg-blue textarea:focus{ border: 0; background: #f6f7f3; }


form.input-border input{ border: 1px solid #ccc; }

form.input-btm-border input{ border-bottom: 1px solid #ccc; }

form.focus-blue input:focus{ border-color: #035ccc; }



/* ---------------------------------
6. HEIGHT/WIDTH STYLING
--------------------------------- */

.height-50px{ height: 50px; }
.height-80px{ height: 80px; }
.height-90px{ height: 90px; }
.height-100px{ height: 100px; }
.height-110px{ height: 110px; }
.height-120px{ height: 120px; }

.height-50{ height: 50%; }
.height-100{ height: 100%; }
.height-400px{ height: 400px; }
.height-450px{ height: 450px; }
.height-500px{ height: 500px; }
.height-600px{ height: 600px; }
.height-650px{ height: 650px; }

.min-height-350px{ min-height: 350px; }


/* WIDTH */

.width-50px{ width: 50px; }
.width-80px{ width: 80px; }
.width-90px{ width: 90px; }
.width-100px{ width: 100px; }
.width-120px{ width: 120px; }

.width-20{ width: 20%; }
.width-25{ width: 25%; }
.width-30{ width: 30%; }
.width-33{ width: 33.33%; }
.width-35{ width: 35%; }
.width-40{ width: 40%; }
.width-45{ width: 45%; }
.width-50{ width: 50%; }
.width-60{ width: 60%; }
.width-65{ width: 65%; }
.width-66{ width: 66.666%; }
.width-70{ width: 70%; }
.width-75{ width: 75%; }
.width-100{ width: 100%; }


.mx-w-150{ max-width: 150px; }
.mx-w-200{ max-width: 200px; }
.mx-w-250{ max-width: 250px; }
.mx-w-300{ max-width: 300px; }
.mx-w-400{ max-width: 400px; }
.mx-w-500{ max-width: 500px; }
.mx-w-600{ max-width: 600px; }
.mx-w-700{ max-width: 700px; }
.mx-w-800{ max-width: 800px; }



/* ISOTOPE GRID STYLING */

.grid { width: 100.2%; }

.element-sizer{ width: 24.9%; }

.element-item.width-25{ width: 24.9%; }

.element-item.width-33{ width: 33.23%; }

.element-item.width-50 { width: 49.8%; }

.element-item img{ width: 100.05%; }


/* BLOG GRID */

.grid.blog-grid{ width: 100%; }

.blog-grid .element-item{ width: 33.33%; padding: 0 10px; }



/* RESPONSIVE */

@media only screen and (max-width: 1200px) {

	.width-lg-35{ width: 35%; }
	.width-lg-45{ width: 45%; }
	.width-lg-50{ width: 50%; }
	.width-lg-60{ width: 60%; }
	.width-lg-100{ width: 100%; }
	
	.mx-h-lg-400{ max-height: 400px; }
	
}

@media only screen and (max-width: 992px) {
	
	.height-md-90px{ height: 90px; }
	.height-md-400px{ height: 400px; }
	
	.width-md-90px{ width: 90px; }
	
	.width-md-100{ width: 100%; }
	.width-md-50{ width: 50%; }
	
	
	/* ISOTOPE GRID */
	
	.element-sizer{ width: 50%; }

	.element-item.width-md-50{ width: 50%; }

	.element-item.width-md-100{ width: 100%; }
	
	
	/* BLOG GRID */
	
	.blog-grid .element-item{ width: 50%; }
	
}

@media only screen and (max-width: 767px) {
	
	.height-sm-auto{ height: auto; }
	.height-sm-90px{ height: 90px; }
	.height-sm-200px{ height: 200px; }
	.height-sm-700px{ height: 700px; }
	
	.width-sm-90px{ width: 90px; }
	.width-sm-300px{ width: 300px; }
	
	.width-sm-20{ width: 20%; }
	.width-sm-37{ width: 37%; }
	.width-sm-50{ width: 50%; }
	.width-sm-60{ width: 60%; }
	.width-sm-80{ width: 80%; }
	.width-sm-100{ width: 100%; }
	
}

@media only screen and (max-width: 576px) {

	.height-xs-100{ height: 100%; }
	.height-xs-150px{ height: 150px; }
	.height-xs-400px{ height: 400px; }
	
	.width-xs-100{ width: 100%; }
	
	.width-xs-80{ width: 80%; }
	
	/* ISOTOPE GRID */
	
	.element-sizer{ width: 100%; }

	.element-item.width-xs-100{ width: 100%; }
	
	
	/* BLOG GRID */
	
	.blog-grid .element-item{ width: 100%; }
	
}
@media only screen and (max-width: 369px) {
	
	.width-xxs-25{ width: 25%; }

	.width-xxs-75{ width: 75%; }
	
}


/* ---------------------------------
7. BORDER STYLING
--------------------------------- */

.border-t-lite-white{ border-top: 1px solid #eee; }

.border-t-eee{ border-top: 1px solid #eee; }

.br-2{ border-radius: 2px; overflow: hidden; }
.br-3{ border-radius: 3px; overflow: hidden; }
.br-5{ border-radius: 5px; overflow: hidden; }
.br-8{ border-radius: 8px; overflow: hidden; }
.br-10{ border-radius: 8px; overflow: hidden; }


.full-radius{ border-radius: 100px; }

.border-primary{ border: 1px solid #035ccc; }

.border-eee-1{ border: 1px solid #eee; }

.border-br-eee{ border-bottom: 1px solid #eee; border-right: 1px solid #eee; }

.border-right-eee{ border-right: 1px solid #eee; }
.border-left-eee{ border-left: 1px solid #eee; }
.border-top-eee{ border-top: 1px solid #eee; }
.border-btm-eee{ border-bottom: 1px solid #eee; }

.border-right-0{ border-right: 0px solid #eee; }
.border-left-0{ border-left: 0px solid #eee; }
.border-top-0{ border-top: 0px solid #eee; }
.border-btm-0{ border-bottom: 0px solid #eee; }

.border-archi{ border: 1px solid #cb9748; }

.border-archi--2{ border: 2px solid #cb9748; }

.border-wrapper{ position: relative; display: inline-block; }

.border-bottom--1{ position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: .5; }

.border-left--30{ position: relative; padding-left: 40px; display: inline-block; }

.border-left--30:after{ content:''; position: absolute; top: 50%; left: 0; width: 30px; height: 1px; margin-top: -1px; background: #222; }
	
	
.border-bg--1{ position: relative; }

.border-bg--1:after{ content:''; position: absolute; top: 50%; left: 0; right: 0; z-index: -1; height: 1px; opacity: .3; }

.border-bg--1.blue-border:after{ background: #035ccc; }

.border-with-bg{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; opacity: .7;
	border: 5px solid rgba(255,255,255,.8); background: linear-gradient(38deg, #000, #333); }
	
	
.hyphen-left{ position: relative; padding-left: 75px; }

.hyphen-left-inner{ content:''; position: absolute; top: 50%; left: 0; width: 60px; height: 1px; }

.hyphen-bottom{ position: relative; display: inline-block; }

.hyphen-bottom-inner-5{ content:''; position: absolute; bottom: 0; left: 0; right: 0px; height: 5px; }

.hyphen-top{ position: relative; display: inline-block; }

.hyphen-top-inner-2{ content:''; position: absolute; top: 0; left: 50%; height: 2px; 
	-webkit-transform: translateX(-50%); transform: translateX(-50%); }



/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	.border-md-0{ border: 0; }
	
}

@media only screen and (max-width: 767px) {

	.border-sm-0{ border: 0; }
	
}



/* ---------------------------------
8. SHADOW STYLING
--------------------------------- */

.box-shadow-1{ box-shadow: 5px 15px 50px rgba(0,0,0,.1); }

.box-shadow-2{ box-shadow: 2px 5px 70px rgba(0,0,0,.2); }

.box-shadow-3{ box-shadow: 3px 15px 40px rgba(0,0,0,.12); }

.box-shadow-4{ box-shadow: 5px 15px 70px rgba(0,0,0,.15); }

.box-shadow-5{ box-shadow: 10px 10px 70px rgba(0,0,0,.2); }

.box-shadow-6{ box-shadow: 5px 10px 100px rgba(0,0,0,.15); }



/* ---------------------------------
9. BUTTONS STYLING
--------------------------------- */

.btn{ position: relative; overflow: hidden; padding: 13px 40px; border-radius: 100px; letter-spacing: 2px;
	z-index: 1; box-shadow: 2px 10px 40px rgba(0,0,0,.15);
	background: #035ccc; color: #fff; 
	background: -webkit-linear-gradient(24deg, #3367d6, #035ccc); background: linear-gradient(24deg, #3367d6, #035ccc); }

.btn:focus,
.btn:hover{ box-shadow: 2px 15px 70px rgba(0,0,0,.15); color: #fff; }

.btn.orange{ background: #fe7121; }


.btn-1{ position: relative; overflow: hidden; padding: 13px 40px; border-radius: 100px; letter-spacing: 2px;
	z-index: 1; box-shadow: 2px 10px 40px rgba(0,0,0,.15);
	background: #035ccc; color: #fff; 
	background: -webkit-linear-gradient(24deg, #3367d6, #035ccc); background: linear-gradient(24deg, #3367d6, #035ccc); }

.btn-1:focus,
.btn-1:hover{ box-shadow: 2px 10px 40px rgba(0,0,0,.4); color: #fff; }


.btn-stroke{ padding: 12px 0px; width: 200px; margin: 0 7.5px; text-align: center; border-radius: 100px; border: 3px solid #222;  }

.btn-stroke:focus,
.btn-stroke:hover{ background: #222; color: #fff; }

.btn-stroke.blue{ border-color: #035ccc; }

.btn-stroke.blue:focus,
.btn-stroke.blue:hover{ background: #035ccc; }

.btn-stroke.orange{ border-color: #fe7121; }

.btn-stroke.orange:focus,
.btn-stroke.orange:hover{ background: #fe7121; }


.btn-border{ border: 1px solid #035ccc; }

.btn-border:hover{ background: #035ccc; color: #fff; }

.btn-border.orange{ border: 1px solid #fe7121; }

.btn-border.orange:hover{ background: #fe7121; color: #fff; }


.btn-border-2{ border-radius: 100px; border: 1px solid #035ccc; }

.btn-border-2 i{ margin-right: 10px; }

.btn-border-2.blue{ border: 1px solid #035ccc; }

.btn-border-2.blue:hover{ background: #035ccc; color: #fff; }



.btn-str-white--1{ border-radius: 2px; border: 1px solid #fff; }

.btn-str-white--1:hover{ background: #fff; color: #000; }


.btn-2{ position: relative; overflow: hidden; padding: 0px; width: 160px; height: 60px; line-height: 60px; letter-spacing: 2px;
	text-align: center; z-index: 1; box-shadow: 2px 10px 40px rgba(0,0,0,.15);
	border: 1px solid #111; background: #111; color: #fff; 
	-webkit-transition: all .2s; transition: all .2s; }
	
.btn-2 i{ margin-left: 20px; font-size: 2em; -webkit-transform: translateY(6px); transform: translateY(6px);
	-webkit-transition: all .2s; transition: all .2s; }

.btn-2:focus,
.btn-2:hover{ background: none; color: #111; }

.btn-2:focus i,
.btn-2:hover i{ transform: translate(6px, 6px); }


.btn-2.width-200-px{ width: 200px; }

.btn-border-archi{ border-radius: 100px; border: 1px solid #cb9748; }

.btn-border-archi:hover{ background: #cb9748; color: #fff; }


.btn-archi{ position: relative; overflow: hidden; padding: 0px; width: 200px; height: 60px; line-height: 60px; letter-spacing: 2px;
	text-align: center; z-index: 1; box-shadow: 2px 10px 40px rgba(0,0,0,.15);
	border: 1px solid #cb9748; background: #cb9748; color: #fff; 
	-webkit-transition: all .2s; transition: all .2s; }

.btn-archi:focus,
.btn-archi:hover{ background: none; color: #cb9748; }


.btn-archi-smal{ width: 160px; height: 50px; line-height: 50px; }


.btn-video{ height: 80px; width: 80px; border-radius: 80px; display: inline-block; line-height: 80px; text-align: center; 
	font-size: 2em; position: relative; }

.btn-video:after{ content:''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: inherit; 
	border-radius: inherit; z-index: -1; opacity: .6; }


.btn-video-2{ outline: 0; font-size: 50px; height: 70px; width: 70px; margin: 0 auto; line-height: 70px; 
	border-radius: 70px; border: 2px solid #fff; 
	-webkit-transition: all .2s; transition: all .2s; }

.btn-video-2 i{ margin-right: -5px; }

.btn-video-2.blue:focus,
.btn-video-2.blue:hover{ border-color: #035ccc; color: #035ccc; -webkit-transform: scale(1.1); transform: scale(1.1); }



.btn-full-width{ width: 100%; line-height: 45px; height: 45px; }

.btn-big{ height: 60px; line-height: 60px; width: 200px; }
.btn-mid{ height: 50px; line-height: 50px; width: 160px; }
.btn-small{ height: 40px; line-height: 40px; width: 140px; }

.btn-50-200{ height: 50px; line-height: 50px; width: 200px; }

.btn-p-ext-small{ padding: 3px 15px; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.btn{ padding: 10px 30px; }
	
	.btn-archi{ width: 160px; height: 50px; line-height: 50px; }
	
	.btn-big{ height: 50px; line-height: 50px; width: 170px; }
	.btn-mid{ height: 45px; line-height: 45px; width: 150px; }
	.btn-small{ height: 40px; line-height: 40px; width: 140px; }
	
}

@media only screen and (max-width: 576px) {
	
	.btn-stroke{ padding: 10px 0px; width: 150px; letter-spacing: 0; margin-left: 5px!important; margin-right: 5px!important; }
	
	.btn-2{ padding: 0px 25px; height: 45px; line-height: 45px; }
	
	.btn-2 i{ margin-left: 10px; }
	
	.btn-archi{ width: 150px; height: 45px; line-height: 45px; }
	
	.btn-big{ height: 45px; line-height: 45px; width: 150px; }
	.btn-mid{ height: 40px; line-height: 40px; width: 140px; }
	.btn-small{ height: 35px; line-height: 35px; width: 130px; }
	
	
}
@media only screen and (max-width: 420px) {

	.btn-stroke{ width: 130px; }
	
}


.read-link i{ margin-left: 15px; font-size: 1.5em; -webkit-transition: all .2s; transition: all .2s; 
	-webkit-transform: translateY(4px); transform: translateY(4px); }

.read-link:focus i,
.read-link:hover i{ -webkit-transform: translateX(5px, 4px); transform: translate(5px, 4px); }


/* ---------------------------------
10. FONT COLOR STYLING
--------------------------------- */

.color-blue{ color: #035ccc; }
.color-orange{ color: #fe7121; }

.color-222{ color: #222;. }
.color-444{ color: #444; }
.color-666{ color: #666; }
.color-999{ color: #999; }

.color-primary{ color: #035ccc; }

.color-lite-white{ color: #eee; }

.color-white{ color: #fff; }

.color-white-imp{ color: #fff!important; }

.color-archi{ color: #cb9748; }



/* ---------------------------------
11. BACKGROUND COLOR STYLING
--------------------------------- */

.bg-white{ background: #fff; }

.bg-111{ background: #111; }

.bg-blue{ background: #035ccc; }
.bg-orange{ background: #fe7121; }

.bg-archi{ background: #cb9748; }

.btn.bg-blue:hover{ background: #0057ff; }

.bg-lite-white{ background: #f9f9f9; }

.bg-lite-blue{ background: #f4fbff; }
.bg-dark-blue{ background: #eaf1f3; }

.bg-hover-lite-white:hover{ background: #eee; }
.bg-hover-lite-white-imp:hover{ background: #eee!important; }

.bg-hover-black:hover{ background: #111; }

.bg-lite-black{ background: #262626; }

.bg-pos-btm{ background-position: center bottom; }

.bg-layer{ z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.bg-layer:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .15;
    background: url(../images/pattern-1.jpg) repeat; }
	
.bg-layer:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .6; background: #232323; }

.bg-layer-pattern{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .3;
    background: url(../images/pattern-1.jpg) repeat; }
	
.bg-layer-pattern:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .6; background: #232323; }



.bg-layer-2{ z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.bg-layer-2:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .6; background: #232323; }
	
	
.bg-layer-shadow{ z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .8;
	background: linear-gradient(to top, #000, rgba(0,0,0,0)); }

.bg-layer-shadow-2{ z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .3;
	background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
	
.bg-layer-shadow-3{ position: absolute; top: 40%; bottom: 0; left: 0; right: 0; z-index: 1; 
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6)); }

.bg-layer-shadow-4{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; opacity: .6;
	background: linear-gradient(38deg, #444, #111); }
	
.bg-layer-shadow-5{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; opacity: .5;
	background: linear-gradient(38deg, #444, #111); }
	
.bg-dot{ position: absolute; top: 0; bottom: 0; left: 0; width: 70%; z-index: -1;
	background: url(../images/bg-advantage-stripe.png) no-repeat left bottom; background-size: cover; }

.bg-img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }

.bg-img-layer{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: #000; }

.light-bg-number{ position: absolute; top: 40%; left: -25px; font-weight: 700; z-index: -1; 
	font-size: 4em; opacity: .4; color: #ddd; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.bg-tp-white{ background: rgba(255,255,255,.6); }


/* BACKGROUND IMAGES */

.bg-img-2{ background: url(../images/slider-5-1920x1100.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-3{ background: url(../images/feature-5-1000x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-4{ background: url(../images/slider-4-1920x1100.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-5{ background: url(../images/feature-2-1000x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-6{ background: url(../images/feature-6-1600x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-7{ background: url(../images/feature-1-1600x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-8{ background: url(../images/team-1600x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-9{ background: url(../images/slider-8-1920x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-10{ background: url(../images/slider-9-1920x800.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-11{ background: url(../images/slider-14-1920x1100.jpg) no-repeat 50% 100%; background-size: cover; }
.bg-img-12{ background: url(../images/slider-15-1920x1100.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-13{ background: url(../images/slider-16-1920x1100.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-14{ background: url(../images/blog-slider-1-1200x700.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-15{ background: url(../images/blog-slider-2-1200x700.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-16{ background: url(../images/blog-slider-3-1200x700.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-17{ background: url(../images/services-1-500x500.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-18{ background: url(../images/services-2-500x500.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-19{ background: url(../images/services-3-500x500.jpg) no-repeat 50% 50%; background-size: cover; }
.bg-img-20{ background: url(../images/blog-1-600x400.jpg) no-repeat; background-size: cover; }
.bg-img-21{ background: url(../images/blog-2-600x400.jpg) no-repeat; background-size: cover; }
.bg-img-22{ background: url(../images/blog-3-800x800.jpg) no-repeat; background-size: cover; }
.bg-img-23{ background: url(../images/blog-4-600x400.jpg) no-repeat; background-size: cover; }
.bg-img-24{ background: url(../images/blog-5-600x400.jpg) no-repeat; background-size: cover; }

/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.light-bg-number{ font-size: 3em; }
}


@media only screen and (max-width: 767px) {
	
	.bg-dot{ width: 100%; }
	
	.bg-sm-0{ background: none; }
	
	.light-bg-number{ left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
	
}



/* ---------------------------------
12. MARGIN STYLING
--------------------------------- */

.margin-0{ margin: 0px!important; }

.mb-0{ margin-bottom: 0px!important; }
.mb-5{ margin-bottom: 5px!important; }
.mb-10{ margin-bottom: 10px!important; }
.mb-15{ margin-bottom: 15px!important; }
.mb-20{ margin-bottom: 20px!important; }
.mb-25{ margin-bottom: 25px!important; }
.mb-30{ margin-bottom: 30px!important; }
.mb-40{ margin-bottom: 30px!important; }
.mb-50{ margin-bottom: 50px!important; }
.mb-60{ margin-bottom: 60px!important; }
.mb-70{ margin-bottom: 70px!important; }
.mb-75{ margin-bottom: 75px!important; }
.mb-80{ margin-bottom: 80px!important; }
.mb-100{ margin-bottom: 100px!important; }
.mb-110{ margin-bottom: 110px!important; }
.mb-120{ margin-bottom: 120px!important; }

.mt-5{ margin-top: 5px!important; }
.mt-10{ margin-top: 10px!important; }
.mt-15{ margin-top: 15px!important; }
.mt-20{ margin-top: 20px!important; }
.mt-25{ margin-top: 25px!important; }
.mt-30{ margin-top: 30px!important; }
.mt-40{ margin-top: 40px!important; }
.mt-50{ margin-top: 50px!important; }
.mt-60{ margin-top: 60px!important; }
.mt-70{ margin-top: 70px!important; }
.mt-80{ margin-top: 80px!important; }
.mt-90{ margin-top: 90px!important; }
.mt-100{ margin-top: 100px!important; }
.mt-110{ margin-top: 110px!important; }


.ml-10{ margin-left: 10px!important; }
.ml-15{ margin-left: 15px!important; }
.ml-75{ margin-left: 75px!important; }
.ml-115{ margin-left: 115px!important; }
.ml-135{ margin-left: 135px!important; }


.ml-20p{ margin-left: 20%!important; }


.mr-10{ margin-right: 10px!important; }
.mr-15{ margin-right: 15px!important; }
.mr-20{ margin-right: 20px!important; }
.mr-30{ margin-right: 30px!important; }
.mr-40{ margin-right: 40px!important; }
.mr-50{ margin-right: 50px!important; }
.mr-60{ margin-right: 60px!important; }
.mr-70{ margin-right: 70px!important; }
.mr-80{ margin-right: 80px!important; }
.mr-90{ margin-right: 90px!important; }
.mr-100{ margin-right: 100px!important; }

.mtb-5{ margin-top: 5px!important; margin-bottom: 5px!important; }
.mtb-10{ margin-top: 10px!important; margin-bottom: 10px!important; }
.mtb-15{ margin-top: 15px!important; margin-bottom: 15px!important; }
.mtb-20{ margin-top: 20px!important; margin-bottom: 20px!important; }
.mtb-25{ margin-top: 25px!important; margin-bottom: 25px!important; }
.mtb-30{ margin-top: 30px!important; margin-bottom: 30px!important; }
.mtb-40{ margin-top: 40px!important; margin-bottom: 40px!important; }
.mtb-50{ margin-top: 50px!important; margin-bottom: 50px!important; }
.mtb-60{ margin-top: 60px!important; margin-bottom: 60px!important; }
.mtb-70{ margin-top: 70px!important; margin-bottom: 70px!important; }
.mtb-80{ margin-top: 80px!important; margin-bottom: 80px!important; }
.mtb-90{ margin-top: 90px!important; margin-bottom: 90px!important; }
.mtb-100{ margin-top: 100px!important; margin-bottom: 100px!important; }
.mtb-120{ margin-top: 120px!important; margin-bottom: 120px!important; }

.mlr-auto{ margin-left: auto!important; margin-right: auto!important; }


.mt--15{ margin-top: -15px!important; }
.mt--50{ margin-top: -50px!important; }
.mt--100{ margin-top: -100px!important; }
.mt--110{ margin-top: -110px!important; }
.mt--175{ margin-top: -175px!important; }

.mb--30{ margin-bottom: -30px!important; }
.mb--200{ margin-bottom: -200px!important; }

.mr--50{ margin-right: -50px!important; }

.ml--50{ margin-left: -50px!important; }

.mlr--15{ margin-left: -15px!important; margin-right: -15px!important; }
.mlr--7-5{ margin-left: -7.5px!important; margin-right: -7.5px!important; }


.trans-y-2{ -webkit-transform: translateY(2px); transform: translateY(2px); }
.trans-y-3{ -webkit-transform: translateY(3px); transform: translateY(3px); }

.trans-y-110{ -webkit-transform: translateY(110px); transform: translateY(110px); }

.trans-y--30{ -webkit-transform: translateY(-30px); transform: translateY(-30px); }

.transition-20ms{ -webkit-transition: all .20s; transition: all .20s; }
.transition-25ms{ -webkit-transition: all .25s; transition: all .25s; }


/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
	
	.mr-lg-0{ margin-right: 0!important; }
	
	.mb-lg-100{ margin-bottom: 100px!important; }
	
	.mt-lg-0{ margin-top: 0px!important; }
	
}

@media only screen and (max-width: 992px) {
	
	.mr-md-0{ margin-right: 0!important; }
	
	.mlr-md-0{ margin-left: 0!important; margin-right: 0!important; }
	.mlr-md-10{ margin-left: 10px!important; margin-right: 10px!important; }
	.mlr-md-50{ margin-left: 50px!important; margin-right: 50px!important; }
	
	.mb-md-30{ margin-bottom: 30px!important; }
	.mb-md-50{ margin-bottom: 50px!important; }
	.mb-md-80{ margin-bottom: 80px!important; }
	.mb-md-100{ margin-bottom: 100px!important; }
	
	.mt-md-0{ margin-top: 0px!important; }
	.mt-md-50{ margin-top: 50px!important; }
	.mt-md-70{ margin-top: 70px!important; }
	.mt-md-80{ margin-top: 80px!important; }
	
	.mtb-md-30{ margin-top: 30px!important; margin-bottom: 30px!important; }
	.mtb-md-80{ margin-top: 80px!important; margin-bottom: 80px!important; }
	
	
	.ml-md-10p{ margin-left: 10%!important; }
	
}

@media only screen and (max-width: 767px) {
	
	.mt-sm-0{ margin-top: 0!important; }
	
	.ml-sm-0{ margin-left: 0!important; }
	
	.mr-sm-0{ margin-right: 0!important; }
	
	.mb-sm-0{ margin-bottom: 0px!important; }
	.mb-sm-20{ margin-bottom: 20px!important; }
	.mb-sm-30{ margin-bottom: 30px!important; }
	.mb-sm-50{ margin-bottom: 50px!important; }
	
	.mt-sm-15{ margin-top: 15px!important; }
	.mt-sm-20{ margin-top: 20px!important; }
	.mt-sm-40{ margin-top: 40px!important; }
	.mt-sm-50{ margin-top: 50px!important; }
	.mt-sm-60{ margin-top: 60px!important; }
	.mt-sm-70{ margin-top: 70px!important; }
	.mt-sm-80{ margin-top: 80px!important; }
	
	.mlr-sm-auto{ margin-left: auto!important; margin-right: auto!important; }
	.mlr-sm--15{ margin-left: -15px!important; margin-right: -15px!important; }
	
	.ml-sm-105{ margin-left: 105px!important; }
	
	.mtb-sm-30{ margin-top: 30px!important; margin-bottom: 30px!important; }
	.mtb-sm-50{ margin-top: 50px!important; margin-bottom: 50px!important; }
	
}

@media only screen and (max-width: 576px) { 
	
	.mt-xs-75{ margin-top: 75px!important; }
	
	.mb-sx-30{ margin-bottom: 30px!important; }
	
}



/* ---------------------------------
13. PADDING STYLING
--------------------------------- */

.p-5{ padding: 5px!important; }
.p-7-5{ padding: 7.5px!important; }
.p-10{ padding: 10px!important; }
.p-20{ padding: 20px!important; }
.p-25{ padding: 25px!important; }
.p-30{ padding: 30px!important; }
.p-40{ padding: 40px!important; }
.p-50{ padding: 50px!important; }

.pt-0{ padding-top: 0px!important; }
.pt-5{ padding-top: 5px!important; }
.pt-10{ padding-top: 10px!important; }
.pt-20{ padding-top: 20px!important; }
.pt-30{ padding-top: 30px!important; }
.pt-40{ padding-top: 40px!important; }
.pt-50{ padding-top: 50px!important; }
.pt-60{ padding-top: 60px!important; }
.pt-70{ padding-top: 70px!important; }
.pt-80{ padding-top: 80px!important; }
.pt-90{ padding-top: 90px!important; }
.pt-100{ padding-top: 100px!important; }
.pt-120{ padding-top: 120px!important; }
.pt-200{ padding-top: 200px!important; }
.pt-400{ padding-top: 400px!important; }

.pb-5{ padding-bottom: 5px!important; }
.pb-10{ padding-bottom: 10px!important; }
.pb-15{ padding-bottom: 15px!important; }
.pb-20{ padding-bottom: 20px!important; }
.pb-30{ padding-bottom: 30px!important; }
.pb-40{ padding-bottom: 40px!important; }
.pb-45{ padding-bottom: 45px!important; }
.pb-50{ padding-bottom: 50px!important; }
.pb-60{ padding-bottom: 60px!important; }
.pb-70{ padding-bottom: 70px!important; }
.pb-80{ padding-bottom: 80px!important; }
.pb-90{ padding-bottom: 90px!important; }
.pb-100{ padding-bottom: 100px!important; }
.pb-150{ padding-bottom: 150px!important; }
.pb-300{ padding-bottom: 300px!important; }

.pr-0{ padding-right: 0px!important; }
.pr-5{ padding-right: 5px!important; }
.pr-10{ padding-right: 10px!important; }
.pr-15{ padding-right: 15px!important; }
.pr-20{ padding-right: 20px!important; }
.pr-35{ padding-right: 35px!important; }
.pr-50{ padding-right: 50px!important; }

.pl-0{ padding-left: 0px!important; }
.pl-5{ padding-left: 5px!important; }
.pl-15{ padding-left: 15px!important; }
.pl-20{ padding-left: 20px!important; }
.pl-30{ padding-left: 30px!important; }
.pl-35{ padding-left: 35px!important; }
.pl-50{ padding-left: 50px!important; }
.pl-100{ padding-left: 100px!important; }
.pl-115{ padding-left: 115px!important; }


.ptb-5{ padding-top: 5px!important; padding-bottom: 5px!important; }
.ptb-20{ padding-top: 20px!important; padding-bottom: 20px!important; }
.ptb-30{ padding-top: 30px!important; padding-bottom: 30px!important; }
.ptb-40{ padding-top: 40px!important; padding-bottom: 40px!important; }
.ptb-50{ padding-top: 50px!important; padding-bottom: 50px!important; }
.ptb-100{ padding-top: 100px!important; padding-bottom: 100px!important; }
.ptb-120{ padding-top: 120px!important; padding-bottom: 120px!important; }
.ptb-300{ padding-top: 300px!important; padding-bottom: 300px!important; }


.plr-5{ padding-left: 5px!important; padding-right: 5px!important; }
.plr-10{ padding-left: 10px!important; padding-right: 10px!important; }
.plr-20{ padding-left: 20px!important; padding-right: 20px!important; }
.plr-30{ padding-left: 30px!important; padding-right: 30px!important; }
.plr-40{ padding-left: 40px!important; padding-right: 40px!important; }
.plr-50{ padding-left: 50px!important; padding-right: 50px!important; }


/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
	
	.plr-lg-15{ padding-left: 15px!important; padding-right: 15px!important; }
	
}

@media only screen and (max-width: 992px) {
	
	.p-md-0{ padding: 0px!important; }
	.p-md-10{ padding: 10px!important; }
	.p-md-30{ padding: 30px!important; }
	
	.pt-md-80{ padding-top: 80px!important; }
	.pt-md-400{ padding-top: 400px!important; }
	
	.pb-md-0{ padding-bottom: 0px!important; }
	.pb-md-30{ padding-bottom: 30px!important; }
	.pb-md-50{ padding-bottom: 50px!important; }
	.pb-md-80{ padding-bottom: 80px!important; }
	
	.pl-md-0{ padding-left: 0!important; }

	.pr-md-0{ padding-right: 0!important; }
	
	.ptb-md-30{ padding-top: 30px!important; padding-bottom: 30px!important; }
	.ptb-md-80{ padding-top: 80px!important; padding-bottom: 80px!important; }
	
	.plr-md-10{ padding-left: 10px!important; padding-right: 10px!important; }
	.plr-md-20{ padding-left: 20px!important; padding-right: 20px!important; }
	.plr-md-30{ padding-left: 30px!important; padding-right: 30px!important; }
	.plr-md-40{ padding-left: 40px!important; padding-right: 40px!important; }
	.plr-md-50{ padding-left: 50px!important; padding-right: 50px!important; }
	
}


@media only screen and (max-width: 767px) {
	
	.p-sm-0{ padding: 0!important; }
	.p-sm-15{ padding: 15px!important; }
	
	.pt-sm-0{ padding-top: 0px!important; }
	.pt-sm-50{ padding-top: 50px!important; }
	.pt-sm-70{ padding-top: 70px!important; }

	.pb-sm-0{ padding-bottom: 0px!important; }
	.pb-sm-20{ padding-bottom: 20px!important; }
	.pb-sm-25{ padding-bottom: 25px!important; }
	.pb-sm-30{ padding-bottom: 30px!important; }
	.pb-sm-50{ padding-bottom: 50px!important; }
	
	.pl-sm-0{ padding-left: 0px!important; }
	.pl-sm-11{ padding-left: 11px!important; }
	
	.ptb-sm-50{ padding-top: 50px!important; padding-bottom: 50px!important; }
	
	.pr-sm-0{ padding-right: 0!important; }
	
	.plr-sm-0{ padding-right: 0px!important; padding-left: 0px!important; }
	.plr-sm-15{ padding-right: 15px!important; padding-left: 15px!important; }
	.plr-sm-20{ padding-right: 20px!important; padding-left: 20px!important; }
	.plr-sm-30{ padding-right: 30px!important; padding-left: 30px!important; }
	
}

@media only screen and (max-width: 576px) {
	
	.ptb-xs-50{ padding-top: 50px!important; padding-bottom: 50px!important; }
	
	.pt-xs-50{ padding-top: 50px!important; }
	.pt-xs-150{ padding-top: 150px!important; }
	.pt-xs-400{ padding-top: 400px!important; }

	.pb-xs-100 { padding-bottom: 100px!important; }
	
	.pl-xs-0{ padding-left: 0px!important; }
	
	.pr-xs-0{ padding-right: 0!important; }
	.pr-xs-10{ padding-right: 10!important; }
	
}



/* ---------------------------------
14. POSITION STYLING
--------------------------------- */

.position-relative{ position: relative; z-index: 10; }

.z-index--1{ z-index: -1; }
.z-index-1{ z-index: 1; }
.z-index-10{ z-index: 10; }
.z-index-100{ z-index: 100; }

.position-absolute{ position: absolute; top: 0px; bottom: 0; left: 0px; right: 0; }

.position-tp-left{ position: absolute; top: 0px; left: 0px; }
.position-tp-left-10{ position: absolute; top: 10px; left: 10px; }
.position-tp-left-20{ position: absolute; top: 20px; left: 20px; }
.position-tp-left-30{ position: absolute; top: 30px; left: 30px; }
.position-tp-left-40{ position: absolute; top: 40px; left: 40px; }

.position-tp-right{ position: absolute; top: 0px; right: 0px; }
.position-tp-right-30{ position: absolute; top: 30px; right: 30px; }

.position-btm-right-10{ position: absolute; bottom: 10px; right: 10px; }
.position-btm-right-20{ position: absolute; bottom: 20px; right: 20px; }
.position-btm-right-30{ position: absolute; bottom: 30px; right: 30px; }
.position-btm-right-40{ position: absolute; bottom: 40px; right: 40px; }

.position-btm{ position: absolute; bottom: 0px; left: 0px; right: 0; }
.position-btm-10{ position: absolute; bottom: 10px; left: 0px; right: 0; }

.position-left{ position: absolute; top: 0; bottom: 0; left: 0; }
.position-right{ position: absolute; top: 0; bottom: 0; right: 0; }

.position-btm-left{ position: absolute; bottom: 0px; left: 0px; }
.position-btm-left-20{ position: absolute; bottom: 20px; left: 20px; }
.position-btm-left-30{ position: absolute; bottom: 30px; left: 30px; }


.pos-tp-center-left{ position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.pos-btm-left-center{ position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.pos-center{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.pos-tp-center{ position: absolute; top: 50%; left: 0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }

.pos-all--5{ position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; }


.pos-abs-50{ position: relative; }

.pos-abs-50 .left-area{ position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.pos-abs-50 .right-area{ margin-left: 65px; }


.left-10-prct{ left: 10%; } 

.right-10-prct{ right: 10%; } 


.top--50{ top: -50px!important; }

.left-0{ left: 0!important; }
.top-0{ top: 0!important; }
.bottom-0{ bottom: 0!important; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	.pos-md-relative{ position: relative }
	
	.pos-md-static{ position: static!important; }
	
}

@media only screen and (max-width: 767px) {

	.pos-sm-static{ position: static!important; }
	
	.pos-sm-left-center{ position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
	
}


/* ---------------------------------
15. ICONS STYLING
--------------------------------- */

/* CONSTRUCTION LOGOS */
	
.construction-icon{ height: 110px; width: 110px; background-image: url(../images/Construction-Logo.svg); background-size: cover; }

.construction-icon-1{ background-position: 0 0; }
.construction-icon-2{  background-position: 11% 0; }
.construction-icon-3{  background-position: 22% 0; }
.construction-icon-4{  background-position: 33% 0; }
.construction-icon-5{  background-position: 44.4% 0; }
.construction-icon-6{  background-position: 55.6% 0; }
.construction-icon-7{  background-position: 66.7% 0; }
.construction-icon-8{  background-position: 77.8% 0; }
.construction-icon-9{  background-position: 89% 0; }


/* ARCHITECTURE LOGOS */
	
.archi-icon{ height: 110px; width: 110px; background-image: url(../images/architecture_logo.png); background-size: cover; }

.archi-icon-1{ background-position: 0 0; }
.archi-icon-2{  background-position: 19% 0; }
.archi-icon-3{  background-position: 38% 0; }
.archi-icon-4{  background-position: 59% 0; }
.archi-icon-5{  background-position: 80% 0; }
.archi-icon-6{  background-position: 100% 0; }


/* ICONS */

.quote-icon{ height: 100px; width: 100px; background: url(../images/quoto-icons.png) no-repeat 75% 0; background-size: cover; }

.quote-icon.reverse{ -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.quote-icon-blue{ background-position: 0 0; }
.quote-icon-archi{ background-position: 68% 0; }


.icon-30{ height: 30px; width: 30px; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.trans-sm-0{ transform: translate(0)!important; }

}

/* VIDEO ICON */

.video-icon{ position: absolute; top: 50%; right: 0; margin: -50px -50px 0 0; height: 90px; width: 90px; line-height: 90px; 
	border-radius: 90px; z-index: 1; font-size: 50px; text-align: center; background: #fe7121; color: #fff; }	

.video-icon:after{ content:''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: inherit; 
	opacity: .4; z-index: -1; background: #fe7121; 
	-webkit-transition: all .3s; transition: all .3s; }

.video-icon i{ color: #fff; }

.video-icon:hover:after{ opacity: .6; box-shadow: 10px 10px 70px rgba(0,0,0,.2); }



/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.video-icon{ left: 50%; top: 50%; right: auto; margin: -50px 0 0 -50px; }
	
}


/* ---------------------------------
16. IMAGE STYLING
--------------------------------- */

.img-circle-60{ height: 60px; width: 60px; border-radius: 100px; overflow: hidden; }
.img-circle-70{ height: 70px; width: 70px; border-radius: 100px; overflow: hidden; }
.img-circle-80{ height: 80px; width: 80px; border-radius: 100px; overflow: hidden; }
.img-circle-100{ height: 100px; width: 100px; border-radius: 100px; overflow: hidden; }


/* IMAGE HOVER EFFECT */

.img-hover .img-hover-inner{ transition: all .4s cubic-bezier(.23,.81,.4,1); -webkit-transition: all .4s cubic-bezier(.23,.81,.4,1);  }

.img-hover:hover .img-hover-inner{ -webkit-transform: scale(1.1) rotate(1deg); transform: scale(1.1) rotate(1deg); }


/* ---------------------------------
17. HOVER EFFECT
--------------------------------- */

.hover-img-2,
.hover-img-2 .img-sclae-up,
.hover-img-2 .img-opacity{ -webkit-transition: all .20s; transition: all .20s; }

.hover-img-2:hover{ -webkit-transform: scale(.97); transform: scale(.97); }

.hover-img-2:hover .img-sclae-up{ -webkit-transform: scale(1.1); transform: scale(1.1); }

.hover-img-2:hover .img-opacity{ opacity: .3; }


.scale-on-hover{ -webkit-transition: all .25s; transition: all .25s; }

.scale-on-hover:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); }

.trans-icon-on-hover i{ font-size: 1.7em; -webkit-transform: translateY(5px); transform: translateY(5px); 
	-webkit-transition: all .2s; transition: all .2s; }
	
.trans-icon-on-hover:hover i{ -webkit-transform: translate(10px, 5px); transform: translate(10px, 5px); }




/* ---------------------------------
18. REVOLUTION SLIDER NAVIGATION
--------------------------------- */

.rev_slider_1061_1_wrapper{ height: 1800px!important; width: 100%!; }

.rs-nav-right .tp-leftarrow,
.rs-nav-right .tp-rightarrow{ height: 80px; width: 80px; top: auto!important; line-height: 80px;
	left: auto!important; bottom: 0px; background: #fff; color: #111!important; 
	transform: none!important; }

.rs-nav-right .uranus.tparrows:before{ font-size: 30px; height: 100%; width: 100%; line-height: inherit; color: inherit!important;  }

.rs-nav-right .tp-leftarrow{ right: 80px; }
.rs-nav-right .tp-rightarrow{ right: 0px; }


.rs-right-btb-nav .uranus.tparrows:before{ font-size: 25px; }

/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.rs-nav-right .tp-leftarrow,
	.rs-nav-right .tp-rightarrow{ height: 60px; width: 60px; top: auto!important; line-height: 60px; }
	
	.rs-nav-right .tp-leftarrow{ right: 60px; }
	
	.rs-nav-right .uranus.tparrows:before{ font-size: 20px; }
	
}



/* ---------------------------------
19. COUNTER STYLING
--------------------------------- */

.progressbar-text{ top: 45%!important; }


/* RESPONSIVE */

@media only screen and (max-width: 767px) {
	
	.counter-lr{ text-align: center; }
	
	.counter-lr .left-area{ position: static; transform: translate(0); margin-bottom: 15px; }
	
	.counter-lr .right-area{ margin-left: 0; }
	
}


/* ---------------------------------
20. PORTFOLIO/PROJECT STYLING
--------------------------------- */

.project-container{ position: relative; display: block; 
	transition: all .4s cubic-bezier(.23,.81,.4,1); -webkit-transition: all .4s cubic-bezier(.23,.81,.4,1); }

.project-container img{ transition: all .4s cubic-bezier(.23,.81,.4,1); -webkit-transition: all .4s cubic-bezier(.23,.81,.4,1); }

.project-container .desc{ opacity: 0; transition: all .4s cubic-bezier(.23,.81,.4,1); -webkit-transition: all .4s cubic-bezier(.23,.81,.4,1); }

.project-container:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0;
	background: linear-gradient(to top, #000, rgba(0,0,0,0)); 
	transition: all .4s cubic-bezier(.23,.81,.4,1); -webkit-transition: all .4s cubic-bezier(.23,.81,.4,1); }

.project-container:hover:after{ opacity: .7; }

.project-container:hover{ z-index: 100; }

.project-container:hover .desc{ opacity: 1; }

.project-container:hover img{ -webkit-transform: scale(1.01); transform: scale(1.01); }


/* REVERSE EFFECT */

.project-container.reverse .desc{ opacity: 1; }

.project-container.reverse:after{ opacity: .7; }

.project-container.reverse:hover .desc{ opacity: 0;  }

.project-container.reverse:hover:after{ opacity: 0; }


/* PROJECT STYLING 2 */

.project-cont-2 .project .image-wrapper{ position: relative; display: block; overflow: hidden;
	-webkit-transition: all .2s; transition: all .2s; }

.project-cont-2 .project .image-wrapper:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; 
	opacity: .3; background: linear-gradient(23deg, #0c1f51, #2b3551); }

.project-cont-2 .project .category{ position: relative; padding-left: 0px; margin-top: 5px; display: inline-block;
	-webkit-transition: all .2s; transition: all .2s; }

.project-cont-2 .project .category:after{ content:''; position: absolute; left: 0; width: 25px; top: 50%; margin-top: -1px;
	height: 2px; background: #035ccc; 
	-webkit-transition: all .2s; transition: all .2s; 
	-webkit-transform: scale(0); transform: scale(0); }

.project-cont-2 .project .image-wrapper:hover{ -webkit-transform: scale(.95); transform: scale(.95); }

.project-cont-2 .project .image-wrapper:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1); }

.project-cont-2 .project:hover .category{ padding-left: 35px; }

.project-cont-2 .project:hover .category:after{ -webkit-transform: scale(1); transform: scale(1); }


/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
	
	.project-cont-2 .overflow-visible .image-wrapper{ height: 100%; width: auto; display: inline-block; }
	
}


/* PROJECT STYLING 3 */

.project-cont-3{ position: relative; padding-left: 7.5px; padding-right: 7.5px; }

.project-cont-3 .button-group{ padding: 0 0 70px; }

.project-cont-3 .button-group button{ padding: 7px 20px; margin: 0 5px 10px; border-radius: 100px; border: 1px solid #035ccc; }

.project-cont-3 .button-group button:hover{ background: #035ccc; color: #fff; }

.project-cont-3 .element-item{ width: 25%; padding: 7.5px;  }

.project-cont-3 .project-wrapper{ display: block; position: relative; overflow: hidden; z-index: 1; 
	-webkit-transition: all .3s; transition: all .3s; overflow: hidden; }

.project-cont-3 .project-wrapper:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: 0;
	background: linear-gradient(38deg, #444, #000); -webkit-transition: all .3s; transition: all .3s; }

.project-cont-3 .project-wrapper .icons{ position: absolute; top: 50%; left: 50%; font-size: 1.5em; z-index: 2; 
	-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.project-cont-3 .project-wrapper .icons i{ padding: 10px; opacity: 0; color: #fff; -webkit-transition: all .3s; transition: all .3s; }

.project-cont-3 .project-wrapper .icons a:first-child i{ -webkit-transform: translateY(-50px); transform: translateY(-50px); }
.project-cont-3 .project-wrapper .icons a:last-child i{ -webkit-transform: translateY(50px); transform: translateY(50px); }

.project-cont-3 .project-wrapper img{ -webkit-transition: all .3s; transition: all .3s; }

.project-cont-3 .project-wrapper:hover{ transform: scale(.95); }

.project-cont-3 .project-wrapper:hover .icons a i{ opacity: 1; -webkit-transform: translate(0); transform: translate(0); }

.project-cont-3 .project-wrapper:hover:after{ opacity: .8; }

.project-cont-3 .project-wrapper:hover img{ -webkit-transform: scale(1.2) rotate(4deg); transform: scale(1.2) rotate(4deg); }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.project-cont-3 .button-group{ padding-bottom: 50px; }
	
	.project-cont-3 .element-item{ width: 50%; }
	
}
@media only screen and (max-width: 778px) {
	
	.project-cont-3{ margin-bottom: 25px; }
	
	.project-cont-3 .button-group{ padding-bottom: 30px; }

}
@media only screen and (max-width: 576px) {
	
	.project-cont-3 .element-item{ width: 100%; }

}



/* ---------------------------------
21. TEAM STYLING 
--------------------------------- */

.team-s-icons > li > a{ height: 35px; width: 35px; text-align: center; line-height: 35px; font-size: .9em; background: #fff; }

.team-s-icons > li:nth-child(2n+2) > a{ background: #f1f2f3; }

.team-s-icons > li > a:hover{ background: #000; color: #fff; }



/* ---------------------------------
22. CONTACT FORM
--------------------------------- */

.contact-form input{ display: block; margin-bottom: 20px; height: 40px; width: 100%; padding: 0 15px; border-radius: 2px; border: 1px solid #ddd; }

.contact-form input:nth-child(1){ width: calc(50% - 10px); float: left; }
.contact-form input:nth-child(2){ width: calc(50% - 10px); float: right; }

.contact-form textarea{ display: block; margin-bottom: 20px; width: 100%; padding: 15px; border-radius: 2px; border: 1px solid #ddd; }

.contact-form input:focus,
.contact-form textarea:focus{ border: 1px solid #aaa; }



/* ---------------------------------
23. GO TOP
--------------------------------- */

#back-to-top:focus,
#back-to-top{ height: 45px; width: 45px; line-height: 41px; border-radius: 50px; text-align: center; position: fixed; 
	bottom: 20px; right: 20px; z-index: 1000; font-size: 1.1em; opacity: 0; box-shadow: 2px 10px 30px rgba(0,0,0,.2); 
	background: #fff; border: 2px solid #0575E6; color: #000;
	-webkit-transform: scale(0);  transform: scale(0); 
	-webkit-transition: all 0.3s ease-out;  transition: all 0.3s ease-out; }

#back-to-top:hover{ box-shadow: 2px 5px 20px rgba(0,0,0,.3); background: #0575E6; color: #fff; }

#back-to-top.show{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }


#back-to-top.archi:focus,
#back-to-top.archi{  border: 2px solid #cb9748; }

#back-to-top.archi:hover{ background: #cb9748; }


#back-to-top.orange:focus,
#back-to-top.orange{  border: 2px solid #fe7121; }

#back-to-top.orange:hover{ background: #fe7121; }



/* ---------------------------------
24. SWIPER SLIDER STYLING
--------------------------------- */

.swiper-slide,
.swiper-wrapper{ transition-timing-function: cubic-bezier(.1,.54,.23,.99); }

/* SWIPER SLIDE ZOOM  */

.swiper-slide-zoom .swiper-slide{ -webkit-transform: scale(.9); transform: scale(.9); 
	-webkit-transition: all .3s; transition: all .3s; }

.swiper-slide-zoom .swiper-slide-active{ -webkit-transform: scale(1); transform: scale(1); }



/* SWIPER SIDED CRONTROL */

.swpr-control.one-sided{ height: 60px; line-height: 60px; width: 60px; }

.swpr-control.one-sided .swiper-button-next,
.swpr-control.one-sided .swiper-button-prev{ position: static; height: 100%; width: 50%; float: left; font-size: 1.5em; 
	margin: 0; background: none;
	-webkit-transition: all .2s; transition: all .2s; }


/* SWIPER TWO SIDED CRONTROL */

.swpr-control.two-sided .swiper-button-next,
.swpr-control.two-sided .swiper-button-prev{ position: absolute; top: 50%; height: 50px; width: 50px; line-height: 50px; z-index: 10;
	margin: -25px 0 0; border-radius: 40px; font-size: 1.7em; text-align: center; box-shadow: 2px 5px 30px rgba(0,0,0,.1);
	opacity: .3; background: #fff; color: #111; 
	-webkit-transition: all .2s; transition: all .2s; }

.swpr-control.two-sided .swiper-button-next{ right: 0px; }
.swpr-control.two-sided .swiper-button-prev{ left: 0px; }

.swpr-control.two-sided .swiper-button-next:hover,
.swpr-control.two-sided .swiper-button-prev:hover{ opacity: 1; }


/* BOTTOM ALIGN */

.swpr-control.bottom-align{ position: absolute; bottom: -30px; left: 50%; margin-left: -40px; height: 30px; line-height: 30px; 
	width: 80px; z-index: 10; }

.swpr-control.bottom-align:after{ content:''; position: absolute; left: 50%; width: 1px; top: 5px; bottom: 5px; background: #aaa;
	-webkit-transform: rotate(20deg); transform: rotate(20deg); }

.swpr-control.bottom-align .swiper-button-next,
.swpr-control.bottom-align .swiper-button-prev{ position: static; height: 100%; width: 50%; float: left; font-size: 1.8em; 
	text-align: center; margin: 0; background: none; color: #666;
	-webkit-transition: all .2s; transition: all .2s; }
	

/* RESPONSIVE */

@media only screen and (max-width: 767px) {

	.swpr-control.bottom-align{ bottom: -30px; }
}


/* TOP ALIGN */

.swpr-control.top-align{ position: absolute; top: -50px; left: auto; right: 0; margin-left: 0px; height: 30px; line-height: 30px; 
	width: 80px; z-index: 10; }

.swpr-control.top-align .swiper-button-next,
.swpr-control.top-align .swiper-button-prev{ position: static; height: 100%; width: 50%; float: left; font-size: 1.8em; 
	text-align: center; margin: 0; background: none; color: #aaa;
	-webkit-transition: all .2s; transition: all .2s; }
	

/* RESPONSIVE */

@media only screen and (max-width: 767px) {

	.swpr-control.top-align{ top: -40px; }
	
	.swpr-control.top-align + .swiper-container{ margin-top: 50px; }
	
}



/* ---------------------------------
25. BIG TEXT WITH BORDER BOTTOM
--------------------------------- */

.big-text{ font-size: 6em; color: #fff; }

.big-text span{ display: inline-block; line-height: 1.2; position: relative; font-weight: 600; }

.big-text span:after{ content:''; position: absolute; bottom: 30px; left: 0; right: 0; height: 3px; background: #15a29c; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.big-text span:after{ bottom: 20px; }
	
}

@media only screen and (max-width: 778px) {
	
	.big-text{ font-size: 5em; }
	
	.big-text span:after{ bottom: 10px; }
	
}

@media only screen and (max-width: 576px) {
	
	.big-text{ font-size: 4em; }
	
}
	
@media only screen and (max-width: 420px) {
	
	.big-text{ font-size: 3em; }
	
}

@media only screen and (max-width: 369px) {
	
	.big-text{ font-size: 2.5em; }
	
}


/* ---------------------------------
26. BACKGROUND VIDEO
--------------------------------- */

.bg-video-container{ position: relative; overflow: hidden; background-position: center center; background-repeat: no-repeat;
    background-size: cover; z-index: -1; }
	
.jquery-background-video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 50%; left: 50%;
    -o-object-fit: cover; object-fit: cover;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }


/* VIDEO LAYER */

.video-hero { position: absolute!important; top: 0; left: 0; right: 0; bottom: 0; }

.video-hero:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .1;
    background: url(../images/pattern-1.jpg) repeat; }

.video-hero:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;
    opacity: .7; background: #0c1f51; background: linear-gradient(23deg, #0c1f51, #2b3551); }


/*FEADEIN VIDEO */

.js .jquery-background-video{ opacity: 0; -webkit-transition: opacity 300ms linear; transition: opacity 300ms linear; }

.js .jquery-background-video.is-visible { opacity: 1; }


/*PAUSE/PLAY BUTTON */

.jquery-background-video-pauseplay{ position: absolute; background: transparent !important; border: none !important;
    width: 20px; height: 20px; top: auto!important; bottom: 50px!important; right: 50px!important; padding: 0 !important;
    cursor: pointer; outline: none !important; z-index: 200;
    -webkit-box-shadow: none !important; box-shadow: none !important; }
	
.jquery-background-video-pauseplay span{ display: none; }

.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before { content: ""; position: absolute; left: 0; top: 0;
    -webkit-transition: all .3s ease; transition: all .3s ease; }
	
.jquery-background-video-pauseplay.play:before { border-top: 10px solid transparent; border-bottom: 10px solid transparent;
    border-left: 15px solid #FFF; }
	
.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after{ border-top: 10px solid #FFF; border-bottom: 10px solid #FFF; border-left: 5px solid #FFF; }

.jquery-background-video-pauseplay.pause:after{ left: 10px; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {
	
	.jquery-background-video-pauseplay{ right: 5px!important; bottom: 15px!important; }
	
}

@media only screen and (max-width: 576px) {
	
    .jquery-background-video,
    .jquery-background-video-pauseplay { display: none; }
	
}
	



/* ---------------------------------
27. PRELOADER STYLING
--------------------------------- */

.loader-wrapper{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100000; background: #fff; }

.loader{ display: inline-block; position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; width: 64px; height: 64px; }

.loader div { position: absolute; border: 4px solid #000; opacity: 1; border-radius: 50%;
  -webkit-animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
  
.loader div:nth-child(2) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }

@-webkit-keyframes loader {
  0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
  100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; }
}
@keyframes loader {
  0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
  100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; }
}


/* ---------------------------------
28.  QUOTO STYLING 
--------------------------------- */

.quoto-styling-1{ position: relative; padding-bottom: 100px; z-index: 1; color: #fff; }
	
.quoto-styling-1 .heading{ width: 50%; max-width: 2000px; padding: 30px 0 30px 50px; float: right; text-align: left; margin: 0; 
	position: relative; z-index: 2; background: #fff; color: #222; }

	
/* SWIPER STYLING */

.quoto-styling-1 .swiper-container{ width: 100%; }

.quoto-styling-1 .swpr-control-container{ position: absolute; bottom: 0; left: 0; height: 100px; line-height: 100px; right: auto; 
	top: auto; text-align: right; margin: 0; width: 50%; font-size: 2em; background: #fff; }

.quoto-styling-1 .swpr-control{ top: 0; bottom: 0; right: 20px; left: auto; line-height: inherit; height: 100%; margin: 0; width: 200px; }

.quoto-styling-1 .swpr-control.bottom-align:after{ top: 15px; bottom: 15px; }


/* QUOTO */

.quoto-styling-1 .quoto{ text-align: center; }

.quoto-styling-1 .quoto .quote-icon{ height: 30px; width: 40px; }

.quoto-styling-1 .quoto .desc{ line-height: 1.5; font-size: 2.5em; padding: 30px 0 20px; }

.quoto-styling-1 .quoto .author{ position: relative; text-align: left; display: inline-block; }

.quoto-styling-1 .quoto .author .profile-image{ height: 70px; width: 70px; border-radius: 80px; position: absolute; left: 0; top: 50%; 
	margin-top: -30px; }

.quoto-styling-1 .quoto .author .author-info{ margin-left: 85px; padding: 10px 0; }

.quoto-styling-1 .swiper-container{ padding: 80px 0; }


/* RESPONSIVE */

@media only screen and (max-width: 768px) {
	
	.quoto-styling-1 .heading{ padding: 30px; }
	
	.quoto-styling-1 .swiper-container{ padding: 50px 0; }
	
	.quoto-styling-1 .quoto .desc{ font-size: 1.7em; }
	
	.quoto-styling-1 .quoto .author .profile-image{ height: 60px; width: 60px; }

	.quoto-styling-1 .quoto .author .author-info{ margin-left:75px; }

}

@media only screen and (max-width: 576px) {
	
	.quoto-styling-1{ padding: 50px 0 110px; }
	
	.quoto-styling-1 .heading{ width: 100%; background: none; float: none; text-align: center; padding: 0 15px; margin-bottom: 40px;
		color: #fff; }
	
	.quoto-styling-1 .heading .pre-heading{ color: #eee; }
	
	.quoto-styling-1 .swpr-control-container{ width: 100%; height: 30px; line-height: 30px; font-size: 1.2em; background: none; 
		margin-bottom: 50px; }
	
	.quoto-styling-1 .swiper-container{ padding: 0px; }
	
	.quoto-styling-1 .swpr-control.bottom-align:after{ top: 5px; bottom: 5px; }
	
	.quoto-styling-1 .swpr-control{ right: 0px; width: 100px; left: 50%; margin-left: -50px; }
	
	.quoto-styling-1 .swpr-control.bottom-align .swiper-button-next,
	.quoto-styling-1 .swpr-control.bottom-align .swiper-button-prev{ color: #ccc; }
	
}


/* ---------------------------------
29. CHART STYLING
--------------------------------- */

.chart-1 canvas.chart{ display: inline-block!important; }


/* RESPONSIVE */

@media only screen and (max-width: 576px) {
	
	.chart-1 canvas.chart{ width: 340px!important; height: 340px!important; }

}
@media only screen and (max-width: 369px) {
	
	.chart-1 canvas.chart{ width: 280px!important; height: 280px!important; }

}


/* ---------------------------------
30.  ACCORFIAN STYLING 
--------------------------------- */

.custom-accordian .accordian-area .desc{ max-height: 0; overflow: hidden; position: relative;
	-webkit-transition: all .2s ease-out; transition: all .2s ease-out; }

.custom-accordian .desc.active{ max-height: 200px; margin: 15px 0; padding-left: 20px; }

.custom-accordian .desc:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: #ddd; }



/* ---------------------------------
31. TIMELINE STYLING
--------------------------------- */

.timeline-item{ border: 0; height: auto; padding: 0; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	.timeline-container{ width: 100%; }

	.timeline-list{ width: 100%; }
	
}
html.hasPlayer{
	margin-left: 0!important;
}
#player{
	z-index: 1001;
}
#player .list-current-playlist li{
	width: 100%;
}
#player p{
	color: #fff;
}
#wave wave{
	overflow: hidden!important;
}