/* --------------------------------------
=========================================
Page-Name - Cronus Multipurpose Website
Version: 1.0
Developed By: DeMustang
=========================================
-----------------------------------------

1. IMPORT GOOGLE WEBFONT

2. GENERAL CSS

3. TYPOGRAPHY
	3.0 FONT / TITLE SIZES
	3.1 FONT EXTRA CLASSES
	3.2 TEXT COLORS 
	3.3 CUSTOM TITLES
	3.4 TEXT-LINK


4. MARGIN / PADDING
	4.1 MARGIN
	4.2 PADDING

5. BUTTONS
	5.1 DEFAULT BUTTON
	5.2 BUTTON WHITE
	5.3 BUTTON RED
	5.4 BUTTON WHITE BORDER
	5.5 BUTTON GRADIENT ONE
	5.6 BUTTON GRADIENT TWO
	5.7 BUTTON GRADIENT THREE
	5.8 BUTTON GRADIENT BORDER
	5.9 BUTTON GRADIENT BORDER TWO ( ORANGE )
	5.10 BUTTON VIDEO
	5.11 ARROW BUTTON
	5.12 ARROW BUTTON RED  

6. BACKGROUND COLORS / BACKGROUND GRADIENTS / BACKGROUND IMAGES 
	6.1 BACKGROUND COLORS
	6.2 BACKGROUND GRADIENTS
	6.3 BACKGROUND IMAGES 

7. COLOR OVERLAY / GRADIENT OVERLAY
	7.1 COLOR OVERLAY
	7.2 GRADIENT OVERLAY

8. PRE LOADER
	8.1 LOADING
	8.2 LOADING ANIMATION  

9. HEADERS / NAVIGATIONS

	9.1 HEADER NAVIGATION DEFAULT
		9.1.1 NAVIGATION
		9.1.2 HOME PAGE NAV BORDER FIX
		9.1.3 SUB MENU
		9.1.4 SEARCH POPUP
		9.1.5 LANGUAGE SELECT

	9.2 HEADER NAVIGATION TWO
	9.3 HEADER NAVIGATION THREE
	9.4 HEADER NAVIGATION FOUR
	9.5 HEADER NAVIGATION FIVE
	9.6 HEADER NAVIGATION SIX
	9.7 BREADCRUMB NAVIGATION
	9.8 BREADCRUMB DARK NAVIGATION

10. HERO BANNERS / SLIDERS
	10.1 HERO BANNER ONE

	10.2 HERO SLIDER ONE
		10.2.1 SITE INFO
		10.2.2 SLIDER CONTROLS

	10.3 HERO SLIDER TWO

11. NUMBER BLOCK 
	11.1 NUMBER BLOCK
	11.2 NUMBER BLOCK PADDING     

12. IMAGE BLOCK
	12.1 IMAGE BLOCK
	12.2 IMAGE BLOCK TWO

13. INFO BLOCKS
	13.1 INFO BLOCK
	13.2 INFO BLOCK SLIDER
	13.3 INFO BLOCK ICON LEFT
	13.4 INFO BLOCK ICON CENTER

14. VIDEO BLOCK
	14.1 VIDEO BLOCK ONE
	14.2 VIDEO BLOCK TWO

15. SIGNATURE BLOCK

16. COMPANY SUMMARY BLOCK

17. EQUAL HEIGHT BLOCK

18. REQUEST CALL BACK BLOCK

19. VERTICLE ALIGN BLOCKS

20. PROJECTS PORTFOLIO BLOCKS

	20.1 PROJECTS PORTFOLIO DEFAULT
		20.1.1 PORTFOLIO PAGINATION
		20.1.2 PORTFOLIO LOAD MORE

	20.2 PROJECTS PORTFOLIO TWO ( MAGENTA )
	20.3 PROJECTS PORTFOLIO THREE ( BLUE )
	20.4 PROJECTS PORTFOLIO FOUR ( BLACK OVERLAY )


21. SKILL PROGRESS BLOCKS
	21.1 SKILL BAR BLOCKS
	21.2 SKILL CIRCLE BLOCK  

22. FORM BLOCKS

	22.1 FORM DEFAULT 
		22.1.1 FORM MESSAGES
		22.2 FORM WHITE 
		22.3 FORM TRANSPARENT 
		22.4 FORM TRANSPARENT TWO ( WHITE )
		22.5 FORM LINE ( MATERIAL DESIGN )  
		22.6 FORM LINE BLUE
		22.7 NEWSLETTER FORM
		22.8 NEWSLETTER FORM TWO

23. SOCIAL ICONS
	23.1 SOCIAL ICONS DEFAULT
	23.2 SOCIAL ICONS CIRCLE 
	23.3 SOCIAL ICONS CIRCLE BLUE
	23.4 SOCIAL ICONS CIRCLE LIGHT BLUE
	23.5 SOCIAL ICONS CIRCLE LEFT

24. TEAM BLOCKS
	24.1 TEAM BLOCK DEFAULT
	24.2 TEAM BLOCK TWO
	24.3 TEAM BLOCK THREE
	24.4 TEAM BLOCK FULL WIDTH ( FIFTY FIFTY )
	24.5 TEAM PROGRESS BLOCK

25. GRAPH BLOCK

26. BENIFITS BLOCK

27. CLIENT LOGO BLOCK

28. TESTIMONIAL BLOCKS
	28.1 TSETIMONIAL BLOCK
	28.2 TSETIMONIAL BLOCK TWO
	28.3 TSETIMONIAL BLOCK THREE

29. ACCORDION BLOCK
	29.1 ACCORDION BG
	29.2 ACCORDION PANNEL

30. PRICING BLOCKS
	30.1 PRICING BLOCK DEFAULT
	30.2 PRICING BLOCK TWO ( HOVER BLACK )
	30.3 PRICING BLOCK THREE ( ORANGE BLACK )

31. BLOG BLOCKS
	31.1 BLOG DEFAULT
	31.2 BLOG TWO
	31.3 BLOG THREE

32. FOOTER STYLES

	32.1 FOOTER DEFAULT
		32.1.1 COMPANY INFO
		32.1.2 TWITTER FEED
		32.1.3 OPENING HOURS
		32.1.4 COPYRIGHTS

	32.2 FOOTER TWO
	32.3 FOOTER THREE


33. EXTRA CSS CODES
	33.1 SHADOW BOX
	33.2 VIEWPORT HEIGHT
	33.3 BORDER SEPRATOR BLOCK
	33.4 DISPLAY BLOCK / DISPLAY FLEX
	33.5 ABSOLUTE CONTENT 
	33.6 BLOCK QUOTE 
	33.7 ROUND CORNER  
	33.8 MARKER    
	33.9 LINE SEPRATORS
	33.10 BORDERS 

34. BLOG PAGE
	34.1 BLOG HEADER
	34.2 BLOG COUNTERY ARROW

35. BLOG SINGLE PAGE
	35.1 BLOG SINGLE TAGS AND SOCIAL
	35.2 BLOG SINGLE COMMENTS
	35.3 BLOG SINGLE SIDEBAR

36. RESPONSIVE FIXES
	36.1 MAX WIDTH 1920PX
	36.2 MAX WIDTH 1350PX
	36.3 MAX WIDTH 1024PX
	36.4 MAX WIDTH 991PX
	36.5 MAX WIDTH 767PX
	36.6 MAX WIDTH 480PX
	36.7 MAX WIDTH 320PX

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

/* --------------------------------------
=========================================
   1. IMPORT GOOGLE WEB FONTS
=========================================
-----------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Maven+Pro:400,500,700|Nunito:200,300,400,600,700,800,900');
/*---------------------------------------
    
    font-family: 'Libre Baskerville', serif;       
-----------------------------------------*/

/* --------------------------------------
=========================================
   2. GENERAL - CSS  
=========================================
-----------------------------------------*/

body {
	background: #fff;
	font-family: 'Nunito', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
	color: #7a7d83;
	overflow-x: hidden;
}
iframe {
	border: none;
}
a {
	color: #ed145b;
	text-decoration: none;
}
a, a:hover, a:focus, input:focus, textarea:focus, button:focus {
	outline: medium none !important;
}
section {
	padding: 100px 0;
	float: left;
	width: 100%;
	text-align: center;
	position: relative;
}

/* --------------------------------------
=========================================
   3. TYPOGRAPHY 
=========================================
-----------------------------------------*/

.font-family-libre, em, .font-24-block, .link-italic, blockquote, .font-18-block {
	font-family: 'Libre Baskerville', serif;
}

.font-family-maven {
	font-family: 'Maven Pro', sans-serif;
}
em, .link-italic {
	font-style: italic;
	font-weight: 400;
}
h1 {
	font-size: 82px;
	font-size: 8.2rem;
	color: #fff;
	font-weight: 700;
	margin-top: 0;
}
h2 {
	font-size: 48px;
	font-size: 4.8rem;
	font-weight: 700;
	margin: 0 0 20px 0;
	color: #000;
}
h2 em {
	letter-spacing: -2px;
}
h3 {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 700;
	margin: 30px 0 10px;
}
h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
	font-weight: bold;
	text-transform: uppercase;
}
h5 {
	font-size: 14px;
	font-weight: 700;
	margin: 20px 0 5px 0;
	text-transform: uppercase;
}

/*---------------------------------------
   3.1 FONT / TITLE SIZES
-----------------------------------------*/
.font-12 {
	font-size: 12px;
}
.font-12-uppercase {
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.font-14 {
	font-size: 14px;
	font-weight: 100;
}
.font-14-uppercase {
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.font-16 {
	font-size: 16px;
}
.font-18 {
	font-size: 18px;
}
.font-18-block {
	font-size: 18px;
	display: block;
	margin-bottom: 20px;
}
.font-22 {
	font-size: 22px;
}
.font-24 {
	font-size: 24px;
}
.font-24-block {
	font-size: 24px;
	line-height: 24px;
	display: block;
	margin-bottom: 10px;
}
.font-30 {
	font-size: 30px;
}
.font-36 {
	font-size: 36px;
}
.font-60 {
	font-size: 60px;
}

/*---------------------------------------
   3.2 FONT EXTRA CLASSES
-----------------------------------------*/
.light {
	font-weight: 100;
}
.semi-light {
	font-weight: 300;
}
.normal {
	font-weight: 400;
}
.semi-bold {
	font-weight: 600;
}
.bold {
	font-weight: 800;
}
.italic {
	font-style: italic;
}

.text-emphasis {
	color: #9fa4af;
}
.text-emphasis-uppercase {
	text-transform: uppercase;
	font-weight: 800;
}
.line-height-30 {
	line-height: 30px;
}
.line-height-34 {
	line-height: 34px;
}
.line-height-50 {
	line-height: 50px;
}
.line-height-82 {
	line-height: 82px;
}
.line-height-100 {
	line-height: 100px;
}

/*---------------------------------------
   3.3 TEXT COLORS               
-----------------------------------------*/
.white-color {
	color: #fff;
}
.black-color {
	color: #000;
}
.red-color {
	color: #ed145b;
}
.magenta-color {
	color: #6e45e2;
}
.green-color {
	color: #4edfb3;
}
.light-gray-color {
	color: #acb0b9;
}
.gray-color {
	color: #4f4f6f;
}
.dark-gray-color {
	color: #555555;
}
.blue-color {
	color: #132b7c;
}

/*---------------------------------------
   3.4 CUSTOM TITLES               
-----------------------------------------*/
.supporting-title {
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: 800;
	margin: 0 0 10px 0;
}
.supporting-title.rotated {
	position: absolute;
	top: 140px;
	left: -45px;
	-ms-transform: rotate(-90deg); /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Safari */
	transform: rotate(-90deg);
}
.footer-title {
	font-size: 12px !important;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 100px;
	margin-bottom: 0;
}

/*---------------------------------------
   3.5 TEXT LINK
-----------------------------------------*/
.link {
	font-style: italic;
	color: #ed145b;
	text-decoration: underline;
}

/* --------------------------------------
=========================================
   4. MARGIN / PADDING 
=========================================
-----------------------------------------*/

/*---------------------------------------
   4.1 MARGIN
-----------------------------------------*/
.margin-0 {
	margin: 0px !important;
}
.margin-top-0 {
	margin-top: 0px !important;
}
.margin-top-5 {
	margin-top: 5px;
}
.margin-top-10 {
	margin-top: 10px;
}
.margin-top-20 {
	margin-top: 20px;
}
.margin-top-30 {
	margin-top: 30px !important;
}
.margin-top-40 {
	margin-top: 40px;
}
.margin-top-50 {
	margin-top: 50px;
}
.margin-top-60 {
	margin-top: 60px;
}
.margin-top-70 {
	margin-top: 70px;
}
.margin-top-80 {
	margin-top: 80px;
}
.margin-top-90 {
	margin-top: 90px;
}
.margin-top-100 {
	margin-top: 100px;
}
.margin-top-110 {
	margin-top: 110px;
}
.margin-top-120 {
	margin-top: 120px;
}
.margin-top-130 {
	margin-top: 130px;
}
.margin-top-140 {
	margin-top: 140px;
}
.margin-top--140 {
	margin-top: -140px;
}
.margin-top--280 {
	margin-top: -280px;
}
.margin-top-160 {
	margin-top: 160px;
}
.margin-top-180 {
	margin-top: 180px;
}
.margin-top-280 {
	margin-top: 280px;
}
.margin-top--50 {
	margin-top: -50px;
}
.margin-top--145 {
	margin-top: -145px;
}
.md-margin-top-180 {
	margin-top: 180px;
}
.margin-left-0 {
	margin-left: 0px !important;
}
.margin-bottom-0 {
	margin-bottom: 0;
}
.margin-bottom-10 {
	margin-bottom: 10px;
}
.margin-bottom-20 {
	margin-bottom: 20px;
}
.margin-bottom-30 {
	margin-bottom: 30px;
}
.margin-bottom-40 {
	margin-bottom: 40px;
}
.margin-bottom-60 {
	margin-bottom: 60px;
}
.margin-bottom-80 {
	margin-bottom: 80px;
}
.margin-bottom--10 {
	margin-bottom: -10px;
}

/*---------------------------------------
   4.2 PADDING       
-----------------------------------------*/
.padding-0 {
	padding: 0;
}
.padding-top-0 {
	padding-top: 0px;
}
.padding-top-30 {
	padding-top: 30px;
}
.padding-top-40 {
	padding-top: 40px;
}
.padding-top-50 {
	padding-top: 50px;
}
.padding-top-60 {
	padding-top: 60px;
}
.padding-top-70 {
	padding-top: 70px;
}
.padding-top-80 {
	padding-top: 80px;
}
.padding-top-100 {
	padding-top: 100px;
}
.padding-top-260 {
	padding-top: 260px;
}
.padding-left-4p {
	padding-left: 4%;
}
.padding-left-50 {
	padding-left: 50px;
}
.padding-right-4p {
	padding-right: 4%;
}
.padding-right-130 {
	padding-right: 130px;
}
.padding-tb50-lr15 {
	padding: 50px 15px;
}
.padding-tb140-lr5p {
	padding: 140px 5%;
}
.padding-lr-10 {
	padding: 0 10px;
}
.padding-lr-25p {
	padding: 0 25%;
}
.padding-lr-20p {
	padding: 0 20%;
}
.padding-25 {
	padding: 25px;
}
.padding-right-100 {
	padding-right: 100px;
}
.padding-bottom-0 {
	padding-bottom: 0;
}
.padding-bottom-80 {
	padding-bottom: 80px;
}
.padding-bottom-140 {
	padding-bottom: 140px;
}
.padding-bottom-280 {
	padding-bottom: 100px;
}
.padding-bottom-420 {
	padding-bottom: 420px;
}

.md-padding-top-70 {
	padding-top: 70px;
}


/* --------------------------------------
=========================================
   5. BUTTONS 
=========================================
-----------------------------------------*/

/*---------------------------------------
   5.1 DEFAULT BUTTON
-----------------------------------------*/
.button-inline {
	display: inline-block;
}
button, .button-inline a {
	border: none;
	color: #fff;
	background-color: #6e45e2;
	height: 50px;
	line-height: 48px;
	display: inline-block;
	font-size: 12px;
	margin: 30px 10px 0;
	padding: 0 50px;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	font-weight: 800;
	border-radius: 40px;
	letter-spacing: 1px;
	transition: all ease .5s;
}
button:hover, .button-inline a:hover {
	background: #fff;
	color: #7a7d83;
	box-shadow: 0px 0px 30px 0 rgba(0,0,0,.2);
}

/*---------------------------------------
   5.2 BUTTON WHITE
-----------------------------------------*/
.button-inline a.white-button {
	background: #fff;
	color: #7a7d83;
	box-shadow: 0px 0px 30px 0 rgba(0,0,0,.2);
}
.button-inline a.white-button:hover {
	background: #6e45e2;
	color: #fff;
	box-shadow: none;
}

/*---------------------------------------
   5.3 BUTTON RED
-----------------------------------------*/
button.red-button, .button-inline a.red-button {

	background-color: #ed145b;
}
button.red-button:hover, .button-inline a.red-button:hover {
	color: #dedede;
}

/*---------------------------------------
   5.4 BUTTON WHITE BORDER
-----------------------------------------*/
button.white-border-button, .button-inline.white-border-button a {
	border: 2px solid #fff;
	background: transparent;
}
button.white-border-button:hover, .button-inline.white-border-button a:hover {
	color: #fff;
}

/*---------------------------------------
   5.5 BUTTON GRADIENT ONE
-----------------------------------------*/
button.gradient-one-button, .button-inline a.gradient-one-button {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6e45e2+0,88d3ce+100 */
	background: #6e45e2; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #6e45e2 0%, #88d3ce 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #6e45e2 0%, #88d3ce 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e45e2', endColorstr='#88d3ce', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
button.gradient-one-button:hover, .button-inline a.gradient-one-button:hover {
	color: #fff;
}

/*---------------------------------------
   5.6 BUTTON GRADIENT TWO
-----------------------------------------*/
button.gradient-two-button, .button-inline a.gradient-two-button {
	background: #4edfb3;
	background: -moz-linear-gradient(-45deg, #4edfb3 0%, #132b7c 83%, #132b7c 83%);
	background: -webkit-linear-gradient(-45deg, #4edfb3 0%, #132b7c 83%, #132b7c 83%);
	background: linear-gradient(135deg, #4edfb3 0%, #132b7c 83%, #132b7c 83%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4edfb3', endColorstr='#132b7c', GradientType=1 );
}
button.gradient-two-button:hover, .button-inline a.gradient-two-button:hover {
	color: #fff;
}

/*---------------------------------------
   5.7 BUTTON GRADIENT THREE
-----------------------------------------*/
button.gradient-three-button, .button-inline a.gradient-three-button {
	background: none !important;
	color: #000 !important;
	box-shadow: none !important;
	border: 2px solid #f6663f;
}
button.gradient-three-button:hover, .button-inline a.gradient-three-button:hover {
	background: #ed2151 !important;
	background: -moz-linear-gradient(-45deg, #ed2151 0%, #f6663f 100%) !important;
	background: -webkit-linear-gradient(-45deg, #ed2151 0%, #f6663f 100%) !important;
	background: linear-gradient(135deg, #ed2151 0%, #f6663f 100%) !important;
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed2151', endColorstr='#f6663f', GradientType=1 ) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/*---------------------------------------
   5.8 BUTTON GRADIENT BORDER
-----------------------------------------*/

button.gradient-border-button, .button-inline a.gradient-border-button {
  position: relative;
  display: inline-block;
  background: transparent;
  transition: color .2s ease-out;
  color: #000;
}
.gradient-border-button::before, .gradient-border-button::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50px;
}
.gradient-border-button::before {
  z-index: -2;
  background-color: #222222;
  transition: opacity 0.2s ease-out;
  background-image: linear-gradient(to right, #88d3ce 0%, #6e45e2 100%);
}
.gradient-border-button::after {
  z-index: -1;
  margin: .2rem;
  background-color: #ffffff;
}
.gradient-border-button:hover::before, .gradient-border-button.focused::before {
  opacity: 0;
  background-image: linear-gradient(to right, #88d3ce 0%, #6e45e2 100%);
  color: #fff;
}

/*------------------------------------------
   5.9 BUTTON GRADIENT BORDER TWO ( ORANGE )
--------------------------------------------*/

button.gradient-border-two-button, .button-inline a.gradient-border-two-button {
  position: relative;
  display: inline-block;
  background: transparent;
  transition: color .2s ease-out;
  color: #000;
  z-index: 1;
}
.gradient-border-two-button::before, .gradient-border-two-button::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50px;
}
.gradient-border-two-button::before {
  z-index: -2;
  background-color: #222222;
  transition: opacity 0.2s ease-out;
  background-image: linear-gradient(to right, #f6663f 0%, #ed2151 100%);
}
.gradient-border-two-button::after {
  z-index: -1;
  margin: .2rem;
  background-color: #ffffff;
}
.gradient-border-two-button:hover::before, .gradient-border-two-button.focused::before {
  background-image: linear-gradient(to right, #f6663f 0%, #ed2151 100%);
  color: #fff;
}

/*---------------------------------------
   5.10 BUTTON VIDEO
-----------------------------------------*/
a.video-button {
	background-color: #ec145b;
	border-radius: 50%;
	color: #fff;
	font-size: 26px;
	padding: 0 0 0 7px;
	text-decoration: none !important;
	width: 80px;
	height: 80px;
	display: inline-block;
	line-height: 80px;
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}
a.video-button:hover {
	background: rgba(237, 20, 91, .9);
}

/*---------------------------------------
   5.11 ARROW BUTTON            
-----------------------------------------*/
.arrow-button {
	font-size: 12px;
	font-weight: bolder;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	color: #000;
}
.arrow-button:hover {
	color: #4edfb3;
	text-decoration: none;
}
.arrow-button:hover svg {
	color: #4edfb3;
}

/*---------------------------------------
   5.12 ARROW BUTTON RED           
-----------------------------------------*/
.arrow-button.red {
	color: #000;
}
.arrow-button.red svg {
	color: #ed145b;
}
.arrow-button.red:hover {
	color: #ed145b;
}

/* --------------------------------------------------------------------
=======================================================================
   6. BACKGROUND COLORS / BACKGROUND GRADIENTS / BACKGROUND IMAGES 
=======================================================================
----------------------------------------------------------------------*/

/*---------------------------------------
   6.1 BACKGROUNDS COLORS          
-----------------------------------------*/
.white-bg {
	background-color: #fff;
}
.dark-gray-bg {
	background-color: #171717;
}
.black-bg {
	background-color: #000;
}
.magenta-bg {
	background-color: #6e45e2;
}
.light-blue-bg {
	background-color: #f1f8fc;
}
.blue-bg {
	background-color: #132b7c;
}
.red-bg {
	background-color: #ed145b;
}
.shadow-bg {
	background: #fff;
	box-shadow: 0 0 30px 0 rgba(0,0,0,.1);
}

/*---------------------------------------
   6.2 BACKGROUND GRADIENTS
-----------------------------------------*/
.gradient {
	background: #756ef5;
	background: -moz-linear-gradient(45deg, #756ef5 0%, #fb087f 100%);
	background: -webkit-linear-gradient(45deg, #756ef5 0%, #fb087f 100%);
	background: linear-gradient(45deg, #756ef5 0%, #fb087f 100%);
 	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#756ef5', endColorstr='#fb087f', GradientType=1 );
}
.blue-gradient-bg {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48ccad+1,173680+100 */
	background: #48ccad; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #48ccad 1%, #173680 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #48ccad 1%, #173680 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #48ccad 1%, #173680 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48ccad', endColorstr='#173680', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.magenta-gradient-bg {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6e45e2+0,88d3ce+100 */
	background: #6e45e2; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #6e45e2 0%, #88d3ce 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #6e45e2 0%, #88d3ce 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e45e2', endColorstr='#88d3ce', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.gradient-blue-green {
	background: #215589;
	background: -moz-linear-gradient(-45deg, #215589 0%, #4cd8b1 83%);
	background: -webkit-linear-gradient(-45deg, #215589 0%, #4cd8b1 83%);
	background: linear-gradient(135deg, #215589 0%, #4cd8b1 83%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#215589', endColorstr='#4cd8b1', GradientType=1 );
}
.gradient-red-yellow {
	background: #ed2151;
	background: -moz-linear-gradient(-45deg, #ed2151 0%, #f6663f 100%);
	background: -webkit-linear-gradient(-45deg, #ed2151 0%, #f6663f 100%);
	background: linear-gradient(135deg, #ed2151 0%, #f6663f 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed2151', endColorstr='#f6663f', GradientType=1 );
}

/*---------------------------------------
   6.3 BACKGROUNDS IMAGES          
-----------------------------------------*/
.background {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.background.solution-bg {
	background-image: url(../img/solution-bg.jpg);
}
.accordion-bg {
	background-image: url(../img/accordion-bg.png);
	background-repeat: no-repeat;
	background-position: -20% 120%;
}

.background.why-choose-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.about-one-bg {
	background-image: url(../img/about-header-bg.jpg);
}
.background.about-two-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.about-three-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.about-service-bg {
	background-image: url(../img/1000x900.jpg);
}
.background.ceo-bg {
	background-image: url(../img/about-co.jpg);
}
.background.stats-bg {
	background-image: url(../img/about-team.jpg);
}
.background.features-bg {
	background-image: url(../img/about-feature-bg.jpg);
}
.background.video-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.portfolio-one-bg {
	background-image: url(../img/portfolio-header-bg.jpg);
}
.background.services-one-bg {
	background-image: url(../img/c3-header-services.jpg);
}
.background.services-two-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.callback-one-bg {
	background-image: url(../img/callback-2.jpg) ;
}
.background.callback-two-bg  {
	background-image: url(../img/1000x900.jpg);
}
.background.team-one-bg {
	background-image: url(../img/team-header-bg.jpg);
}
.background.team-two-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.team-three-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.team-progress-bg {
	background-image: url(../img/skill-bg.png);
	background-position: right;
}
.background.portfolio-detail-one-bg {
	background-image: url(../img/por-detail-header-bg.jpg);
}
.background.portfolio-detail-two-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.portfolio-detail-three-bg {
	background-image: url(../img/dummy-bg.jpg);
}
.background.blog-single-one-bg {
	background-image: url(../img/blog-single-header-bg.jpg);
}
.background.blog-single-two-bg {
	background-image: url(../img/c2-blog-video.jpg);
}
.background.contact-one-bg {
	background-image: url(../img/contact-header-bg.jpg);
}
.background.contact-two-bg {
	background-image: url(../img/c2-header-contact.jpg);
}

.skill-circle-bg {
	background: #f1f8fc url(../img/skill-bg2.jpg) right bottom no-repeat;
}

/* --------------------------------------
=========================================
   7. COLOR OVERLAY / GRADIENT OVERLAY
=========================================
-----------------------------------------*/
/*---------------------------------------
   7.1 COLOR OVERLAY           
-----------------------------------------*/
.color-overlay::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}
.color-overlay.light-black::before {
	background-color: rgba(23, 23, 23, 0.9);
}
.color-overlay.black::before {
	background: rgba(0,0,0,0.5);
}
.color-overlay.dark-black::before {
	background: rgba(0,0,0,0.7);
}

/*---------------------------------------
   7.2 GRADIENT OVERLAY           
-----------------------------------------*/
.gradient-overlay::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.gradient-overlay.one::before {
	background: -moz-linear-gradient(45deg, rgba(92,164,242,0.6) 0%, rgba(84,76,249,0.6) 50%, rgba(251,8,127,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(92,164,242,0.6) 0%, rgba(84,76,249,0.6) 50%, rgba(251,8,127,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(92,164,242,0.6) 0%, rgba(84,76,249,0.6) 50%, rgba(251,8,127,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#995ca4f2', endColorstr='#99fb087f', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.gradient-overlay.two::before {
	background: -moz-linear-gradient(-45deg, rgba(46,49,146,0.6) 0%, rgba(255,69,176,0.6) 50%, rgba(110,69,226,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(46,49,146,0.6) 0%, rgba(255,69,176,0.6) 50%, rgba(110,69,226,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(46,49,146,0.6) 0%, rgba(255,69,176,0.6) 50%, rgba(110,69,226,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#992e3192', endColorstr='#996e45e2', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* --------------------------------------
=========================================
   8. PRELOADER
=========================================
-----------------------------------------*/

/*---------------------------------------
   8.1 LOADING               
-----------------------------------------*/

#loading {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 999;
	margin-top: 0px;
	top: 0px;
}
#loading-center {
	width: 100%;
	height: 100%;
	position: relative;
}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
}
#object {
	background-color: #fff;
	width: 30px;
	height: 30px;
	-webkit-animation: animate 1s infinite ease-in-out;
	animation: animate 1s infinite ease-in-out;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}


/*---------------------------------------
   8.2 LOADING ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
 0% {
 -webkit-transform: perspective(160px);
}
 50% {
 -webkit-transform: perspective(160px) rotateY(-180deg);
}
 100% {
 -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg);
}
}
 @keyframes animate {
 0% {
 transform: perspective(160px) rotateX(0deg) rotateY(0deg);
 -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
}
 50% {
 transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
 -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
}
 100% {
 transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
 -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}

/* --------------------------------------
=========================================
   9. HEADER / NAVIGATIONS
=========================================
-----------------------------------------*/

/*---------------------------------------
   9.1 HEADER NAVIGATION DEFAULT             
-----------------------------------------*/
header.navigation {
	width: 100%;
	z-index: 9;
	position: fixed;
	top: 0;
	height: 80px;
	transition: all ease .5s;
}

.navigation .brand {
	margin-top: 15px;
}

/* ======== 9.1.1 NAVIGATION ========*/

.navbar-nav {
	float: none;
	display: inline-block;
}
.navbar {
	background: transparent none repeat scroll 0 0;
	border: medium none;
	margin: 0;
}
.navbar-default .navbar-nav > li > a {
    border-radius: 0;
    color: #fff;
    line-height: 75px;
    margin: 0 15px;
    padding: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	background-color: transparent;
	color: #f1f1f1;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	background-color: transparent;
	color: #f1f1f1;
	text-decoration: none;
	border-bottom: 4px solid #fff;
}

/*====== 9.1.2 HOME PAGE NAV BORDER FIX =======*/
.header-home .navbar-default .navbar-nav > .active > a, .header-home .navbar-default .navbar-nav > .active > a:focus, .header-home .navbar-default .navbar-nav > .active > a:hover {
	border-bottom: none;
}

/*===== 9.1.3 SUB MENU =====*/
.overlay ul .sub-menu {
	position: absolute;
	background: #fff;
	padding: 15px 30px;
	width: 300px;
	text-align: left;
	border-radius: 10px;
	display: none;
	box-shadow: 0 0 30px 0 rgba(0,0,0,.1);
}
.overlay ul .sub-menu li {
	display: inline-block;
	width: 100%;
}
.overlay ul .sub-menu li a {
	display: inline-block;
	width: 100%;
	font-size: 14px;
	color: #000;
	line-height: 36px;
	transition: all ease .5s;
}
.overlay ul .sub-menu li a:hover, .overlay ul .sub-menu li.active a,  .overlay ul .sub-menu li a:focus {
	color: #ed145b;
	padding-left: 15px;
	text-decoration: none;
}


/* ======== 9.1.4 SEARCH POPUP ========*/

.header-right {
	text-align: right;
	color: #fff;
	min-width: 169px;
	float: right;
}
.search-icon {
	margin-top: 20px;
	display: inline-block;
}
.search-icon a svg {
	color: #fff;
}
.vbox-inline {
	background: transparent !important;
}
.veno-search-holder {
	text-align: left;
}
.veno-search {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #fff;
	margin: 60px 0 15px;
}
.veno-search input {
	width: 90%;
	float: left;
	border: none;
	background-color: transparent;
	vertical-align: top;
	color: #fff;
	padding: 20px 0 0;/* text-transform: uppercase; */
}
.veno-search button {
	background: transparent;
	font-size: 24px;
	width: 10%;
	float: right;
	padding: 0;
	text-align: right;
	margin: 0px 0 25px;
}

/* ======== 9.1.5 LANGUAGE SELECT ========*/

#countries_msdd {
	width: 130px !important;
	border: none;
	border-radius: 0 !important;
	text-align: left;
	margin-left: 10px;
}
.ddlabel {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
}
.header.header-scrolled {
	background-color: rgba(0, 0, 0, .9);
	position: fixed;
}

/* --------------------------------------
  9.2 HEADER NAVIGATION TWO
-----------------------------------------*/

header.navigation.two {
	height: auto;
	padding-top: 25px;
}
.navigation.two .hero::before {
	background: none;
}
header.navigation.two .social-icon {
	display: inline-block;
	margin: 0;
	float: none;
}
header.navigation.two .social-icon li a {
	color: #fff;
}
.navigation.two .header-left p {
	margin: 0;
	position: relative;
	padding: 0 0 0 20px;
}
.navigation.two .header-left p svg {
	margin: 0 0 0;
	position: absolute;
	left: 0;
}
.navigation.two .nav-bg {
	text-align: left;
	background-color: #6e45e2;
	height: 70px;
	position: relative;
	margin-top: 20px;
}
.navigation.two .header-home .navbar-default .navbar-nav > .active > a, .navigation.two .header-home .navbar-default .navbar-nav > .active > a:focus, .navigation.two .header-home .navbar-default .navbar-nav > .active > a:hover {
	border-bottom: 4px solid #fff;
}
.navigation.two .navbar-default .navbar-nav > li > a {
	line-height: 66px;
	margin: 0 5px;
	padding: 0 20px 0;
}
.navigation.two .header-right {
	text-align: right;
	color: #fff;
	margin-top: 0;
	min-width: 169px;
}
.navigation.two .search-icon {
	/* display: inline-block; */
	position: absolute;
	right: 30px;
	top: 10px;
}

/* --------------------------------------
   9.3 HEADER NAVIGATION THREE
-----------------------------------------*/
header.navigation.three {
	background: rgba(0, 0, 0, 0.3);
	height: 85px;
}
header.navigation.three.header-scrolled {
	background-color: rgba(0, 0, 0, .9);
	position: fixed;
}
.navigation.three .brand-white {
	padding: 24px 0px;
	text-align: center;
}
.navigation.three .navbar-nav {
	float: left;
	margin-left: 30px;
}
.navigation.three .navbar-default .navbar-nav > li > a {
	padding: 31px 15px;
	margin: 0;
	line-height: normal;
	font-size: 14px;
	text-transform: uppercase;
}
.navigation.three .navbar-default .navbar-nav > .active > a, .navigation.three .navbar-default .navbar-nav > .active > a:hover, .navigation.three .navbar-default .navbar-nav > li > a:hover {
	color: #4edfb3;
	border-bottom: 3px solid #132b7c;
	margin-bottom: -3px;
}
.navigation.three .working-hours {
	text-align: left;
	float: left;
	font-size: 12px;
	margin-top: 25px;
	color: #fff;
}
.navigation.three .working-hours svg {
	float: left;
	color: #4edfb3;
}
.navigation.three .working-hours ul {
	float: left;
	list-style: none;
	padding-left: 10px;
}
.navigation.three .search svg {
	color: #4edfb3;
}


/* --------------------------------------
   9.4 HEADER NAVIGATION FOUR
-----------------------------------------*/
header.navigation.four {
	border-bottom: 1px solid rgba(255,255,255,.5);
	height: 120px;
	padding: 25px 0 0;
}
.navigation.four .navbar {
    text-align: center;
}
.navigation.four .search-icon {
    margin-top: 15px;
}
.navigation.four .navbar-nav {
	float: none;
}
.navigation.four .navbar-default .navbar-nav > li > a {
    padding: 0 0 18px;
}


/* --------------------------------------
   9.5 HEADER NAVIGATION FIVE
-----------------------------------------*/
header.navigation.five {
	border-bottom: 1px solid rgba(0,0,0,.5);
	height: 120px;
	background-color: #fff;
	padding: 25px 0 0;
}
.navigation.five .navbar {
    text-align: center;
}
.navigation.five #trigger-overlay {
    top: 30px;
}
.navigation.five.header-scrolled {
	background-color: rgba(255, 255, 255, .95);
	position: fixed;
}
.navigation.five .navbar-default .navbar-nav > li > a {
	color: #000;
	padding: 0 0 18px;
}
.navigation.five .navbar-default .navbar-nav > .active > a, .navigation.five .navbar-default .navbar-nav > .active > a:focus, .header.white-header .navbar-default .navbar-nav > .active > a:hover {
	border-bottom: 4px solid #000;
}
.navigation.five .overlay ul .sub-menu {
	border: 1px solid #222;
}
.navigation.five .search-icon a svg {
	color: #000;
}
.navigation.five .header-right {
	color: #000;
}
.navigation.five .hamburger-inner,.navigation.five .hamburger-inner::before, .navigation.five .hamburger-inner::after {
    background-color: #000;
}

/* --------------------------------------
   9.6 HEADER NAVIGATION SIX
-----------------------------------------*/
.contact-hero {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2e3192+0,f57dc2+48,6e45e2+100 */
	background: #2e3192; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #2e3192 0%, #f57dc2 48%, #6e45e2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #2e3192 0%, #f57dc2 48%, #6e45e2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #2e3192 0%, #f57dc2 48%, #6e45e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e3192', endColorstr='#6e45e2', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


header.navigation.six {
	border-bottom: none;
	height: auto;
}
.navigation.six .navbar-nav {
	float: left;
}
.navigation.six .navbar-default .navbar-nav > li > a {
	text-transform: uppercase;
	font-size: 14px;
    margin: 0 15px 0 0;
    padding: 0 15px 0 0;
}
.navigation.six .navbar-default .navbar-nav > .active > a, .navigation.six .navbar-default .navbar-nav > .active > a:focus, .navigation.six .navbar-default .navbar-nav > .active > a:hover, .navigation.six .navbar-default .navbar-nav > li > a:hover {
	background-color: transparent;
	color: #fff;
	text-decoration: none;
	border-bottom: none;
	background-image: url(../img/nav-line.png);
	background-repeat: no-repeat;
	background-position: bottom center;
}
.navigation.six .social-icon {
	text-align: right;
}
.navigation.six .social-icon li {
	display: inline-block;
	margin: 20px 0 0 20px;
}
.navigation.six .social-icon li a {
	color: #fff;
}
.navigation.six .social-icon li a:hover {
	color: #6e45e2;
}
.contact-banner-inner {
	display: inline-block;
	width: 100%;
	padding-bottom: 100px;
}

/* --------------------------------------
   9.7 BREADCRUMB NAVIGATION
-----------------------------------------*/
.breadcrumb {
	background: transparent;
	color: #fff;
	padding: 0;
    margin-bottom: 30px;
}
.breadcrumb li a {
	color: #fff;
}

/* --------------------------------------
   9.8 BREADCRUMB DARK NAVIGATION
-----------------------------------------*/
.breadcrumb.dark {
	color: #000;
}
.breadcrumb.dark li a {
	color: #9fa4af;
}

/* --------------------------------------
=========================================
   10. HERO BANNERS / SLIDERS
=========================================
-----------------------------------------*/

/* --------------------------------------
   10.1 HERO BANNER ONE
-----------------------------------------*/
.hero {
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	float: left;
	padding-bottom: 100px;
	height: 100vh;
	position: relative;
}

/* --------------------------------------
   10.2 HERO SLIDER ONE
-----------------------------------------*/

.slider {
	position: relative;
}

/* ======== 10.2.1 SITE INFO ===========*/

.site-info {
    position: absolute;
    transform: rotate(-90deg);
    left: -65px;
    top: 50%;
    z-index: 2;
    text-align: center;
}
.site-info p {
	margin: 0px;
	font-size: 18px;
	color: #fff;
}

/* ========= 10.2.2 SLIDER CONTROLS =========*/

.custom-owl-dots {
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -60px;
    z-index: 2;
    list-style: none;
}
.custom-owl-dots li {
    width: 30px;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}
.custom-owl-dots .active {
	position: relative;
}
.custom-owl-dots .active::before {
	content: url(../img/line.png);
	position: absolute;
	left: -3px;
	top: 4px;
}
.scroll-down {
	position: absolute;
	bottom: 0;
	margin-bottom: 30px;
	z-index: 1;
}

/* --------------------------------------
   10.3 HERO SLIDER TWO
-----------------------------------------*/

.hero-slider.two .hero {
	height: auto;
}
.hero-slider.two .owl-theme .owl-nav {
    position: absolute;
    top: 40%;
    width: 100%;
}
.hero-slider.two .owl-theme .owl-nav .owl-prev {
	position: absolute;
	top: 0;
	left: 30px;
	border-radius: 50%;
    width: 60px;
    height: 60px;
    background: transparent;
}
.hero-slider.two .owl-theme .owl-nav .owl-next {
    position: absolute;
    top: 0;
    right: 30px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background: transparent;
}

/* --------------------------------------
=========================================
   11. NUMBER BLOCK
=========================================
-----------------------------------------*/

/*---------------------------------------
   11.1 NUMBER BLOCK SIMPLE      
-----------------------------------------*/
.number-block {
	text-align: left;
	position: relative;
	padding: 10px 0 20px 75px;
}
.number-block .number {
	font-size: 30px;
	color: #4edfb3;
	font-weight: bold;
	position: absolute;
	top: -1px;
	left: 15px;
}

/*---------------------------------------
   11.2 NUMBER BLOCK PADDING          
-----------------------------------------*/
.number-block.padding {
	padding: 10px 20% 20px 100px;
}
.number-block.padding .number {
	left: 50px;
}

/* --------------------------------------
=========================================
   12. IMAGE BLOCKS
=========================================
-----------------------------------------*/

/*---------------------------------------
   12.1 IMAGE BLOCK ONE         
-----------------------------------------*/
.image-block {
	text-align: left;
	margin-top: 40px;
}
.image-block img {
	width: 100%;
}
.image-block h3 {
	color: #000;
	margin: 5px 0 15px 0;
}
.image-block:hover .hover-bg, .image-block.active .hover-bg {
	color: #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#215589+0,4cd8b1+83 */
	background: #215589; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #215589 0%, #4cd8b1 83%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #215589 0%, #4cd8b1 83%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #215589 0%, #4cd8b1 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#215589', endColorstr='#4cd8b1', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.image-block:hover h3, .image-block.active h3 {
	color: #fff;
}
.image-block:hover .arrow-button {
	color: #4edfb3;
	text-decoration: none;
}
.image-block:hover .arrow-button svg {
	color: #4edfb3;
}

/* --------------------------------------
	12.2 IMAGE BLOCK TWO 
-----------------------------------------*/
.image-block.two {
	margin: 0;
}
.image-block.two:hover .hover-bg, .image-block.two.active .hover-bg {
	color: #fff;
	background: #000;
}
.image-block.two p {
	color: #9fa4af;
}
.image-block.two:nth-of-type(even) {
	background-color: #171717;
}
.image-block.two:nth-of-type(even) h3 {
	color: #fff;
}

/* --------------------------------------
=========================================
   13. INFO BLOCKS
=========================================
-----------------------------------------*/

/*---------------------------------------
   13.1 INFO BLOCK            
-----------------------------------------*/

.info-block {
	display: inline-block;
	width: 100%;
	text-align: left;
	margin-top: 40px;
	transition: all ease .5s;
	padding: 30px;
}
.info-block:hover, .info-block.active  {
	box-shadow: 0 0 30px 0 rgba(0,0,0,.1);
}

/* --------------------------------------
  13.2 INFO BLOCK SLIDER 
-----------------------------------------*/
.info-block-slider .owl-carousel .owl-nav button.owl-next, .info-block-slider .owl-carousel .owl-nav button.owl-prev {
	background: none !important;
	border: 1px solid #fff;
	font-size: 16px;
	color: #fff;
	width: 40px;
	height: 40px;
	display: inline-block;
	line-height: 38px;
	border-radius: 50%;
	margin: 20px 15px 0;
	opacity: 1;
	text-shadow: none;
}
 .info-block-slider .owl-carousel .owl-nav button.owl-next:hover, .info-block-slider .owl-carousel .owl-nav button.owl-prev:hover {
	background: #fff !important;
	color: #6e45e2;
}
.info-block-slider .owl-theme .owl-dots .owl-dot.active span, .info-block-slider .owl-theme .owl-dots .owl-dot:hover span {
    background: #6e45e2;
}
.info-block-slider .owl-theme .owl-dots .owl-dot span {
    background: transparent;
    border: 2px solid #6e45e2;
}
.info-block-slider .owl-theme .owl-dots .owl-dot:hover {
	box-shadow: none;
}

/*---------------------------------------
   13.3 INFO BLOCK ICON LEFT           
-----------------------------------------*/
.info-block.icon-left {
	padding: 0;
}
.info-block.icon-left:hover {
	box-shadow: none;
}
.info-block.icon-left .icon {
	float: left;
	margin-right: 30px;
}
.info-block.icon-left .info {
	display: flow-root;
}


/*---------------------------------------
   13.4 INFO BLOCK ICON CENTER           
-----------------------------------------*/
.info-block.icon-center {
	padding: 0;
	text-align: center;
}
.info-block.icon-center img, .info-block.icon-center svg {
	width: auto;
	height: 32px;
}
.info-block.icon-center:hover {
	box-shadow: none;
}

/* --------------------------------------
=========================================
   14. VIDEO BLOCKS
=========================================
-----------------------------------------*/

/* --------------------------------------
   14.1 VIDEO BLOCK ONE
-----------------------------------------*/
.video-block {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 0 80px 0 rgba(0,0,0,.3);
}
.video-block img {
	width: 100%;
}
button.mfp-close:hover {
	background: black;
	color: #fff !important;
	box-shadow: none;
}

/* --------------------------------------
  14.2 VIDEO BLOCK TWO
-----------------------------------------*/

.video.two .section-heading a {
	width: 80px;
	height: 80px;
	line-height: 80px;
	color: #fff;
	border-radius: 50%;
	font-size: 20px;
	padding: 0 0 0 7px;
	display: inline-block;
}

/* --------------------------------------
=========================================
   15. SIGNATURE BLOCKS
=========================================
-----------------------------------------*/

.signature {
	margin-top: 20px;
	display: inline-block;
	width: 100%;
}
.signature img {
	float: left;
	margin-right: 30px;
}

/* --------------------------------------
=========================================
   16. COMPANY SUMMARY BLOCK
=========================================
-----------------------------------------*/
.company-left p {
	line-height: 28px;
	font-weight: 300;
}
.summary-detail {
	display: inline-block;
	width: 100%;
	margin-top: 40px;
}
.summary-detail img {
	float: left;
	margin-right: 15px;
}
.summary-detail p {
	display: flex;
}
.company-right img {
	width: 100%;
}
.number-counters {
	display: inline-block;
	width: 100%;
}

/* --------------------------------------
=========================================
   17. EQUAL HEIGHT BLOCK
=========================================
-----------------------------------------*/
.equal-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.equal-height .padding-left {
	padding: 140px 9% 140px 60px;
}
.equal-height .padding-right {
	padding: 140px 60px 140px 9%;
}

/* --------------------------------------
=========================================
   18. REQUEST CALL BACK BLOCK
=========================================
-----------------------------------------*/

.callback {
	padding: 0;
}
.callback-box {
	background-color: #fff;
	box-shadow: 0 0 30px 0 rgba(0,0,0,.1);
	position: relative;
}

/* --------------------------------------
=========================================
   19. VERTICLE ALIGN BLOCKS
=========================================
-----------------------------------------*/

.verticle-align-block {
	display: table;
	height: 100vh;
	width: 100%;
	position: relative;
	text-align: center;
}
.verticle-align-middle {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
.verticle-align-bottom {
	display: table-cell;
	vertical-align: bottom;
	width: 100%;
}

/* --------------------------------------
=========================================
   20. PROJECTS PORTFOLIO BLOCKS
=========================================
-----------------------------------------*/

/*---------------------------------------
   20.1 PROJECT PORTFOLIO DEFAULT
-----------------------------------------*/
.project-nav {
	width: 100%;
	display: inline-block;
	padding: 0;
	list-style: none;
}
.project-nav li {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: 30px;
	display: inline-block;
	cursor: pointer;
}
.project-nav li:hover, .project-nav li.active {
	background-color: #ed145b;
	color: #fff;
	text-decoration: none;
	box-shadow: 0px 0px 20px 0 rgba(0,0,0,.3);
}
.project-block {
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.project-block.twenty {
	float: left;
	width: 20%;
}
.project-block.forty {
	float: left;
	width: 40%;
}
.project-block img {
	width: 100%;
}
.project-overlay {
	background-color: rgba(237,20,91,.9);
	position: absolute;
	width: 0;
	height: 0;
	bottom: 0;
	left: 0px;
	right: 0px;
	top: 0px;
	margin: auto;
	transition: all ease .5s;
}
.project-block:hover .project-overlay {
	width: 100%;
	height: 100%;
}
.project-inner {
	opacity: 0;
	transition: all ease .5s;
	position: absolute;
	bottom: -140px;
	left: 0;
	right: 0;
	
}
.project-block:hover .project-inner {
	opacity: 1;
	bottom: 30px;
}
.project-inner i img {
	width: auto;
}
.project-inner h3 {
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	margin: 20px 0 10px;
	text-transform: uppercase;
}
.project-inner p {
	font-size: 14px;
	font-style: italic;
	color: #fff;
	font-family: 'Libre Baskerville', serif;
}

/* ========= 20.1.1 PORTFOLIO PAGINATION =======*/
.portfolio-pagination.left {
	width: 50%;
	float: left;
	text-align: left;
}
.portfolio-pagination.right {
	width: 50%;
	float: right;
	text-align: right;
}
.portfolio-pagination p {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.portfolio-pagination p a {
	color: #9fa4af;
}
.portfolio-pagination p a:hover {
	color: #ed145b;
	text-decoration: none;
}
.portfolio-pagination h3 {
	font-weight: 600;
	margin: 0;
	padding: 0 40px;
	color: #000;
}
.portfolio-pagination.left p svg {
	float: left;
	width: 40px;
	font-size: 20px;
}
.portfolio-pagination.right p svg {
	float: right;
	width: 40px;
	font-size: 20px;
}

/* ====== 20.1.2 PORTFOLIO LOAD MORE =======*/
.load-more {
	display: inline-block;
	padding: 80px 0 140px 0;
	text-align: center;
	width: 100%;
}
.load-more .center-line {
	background-color: #000;
	margin-bottom: 10px;
}
.load-more p {
	padding: 0;
}
.load-more p a {
	color: #7d7d7d;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 2px;
}

/* --------------------------------------
  20.2 PROJECTS PORTFOLIO TWO ( MAGENTA )
-----------------------------------------*/
.projects.two .project-nav li:hover, .projects.two .project-nav li.active {
	background-color: #6e45e2;
}
.projects.two .project-overlay {
	background-color: rgba(110,69,226,.9);
}

/* --------------------------------------
  20.3 PROJECTS PORTFOLIO THREE ( BLUE )
-----------------------------------------*/
.projects.three {
	padding: 140px 0 0;
	margin-bottom: -1px;
	margin-top: -8px;
}
.projects.three .project-overlay {
	background-color: rgba(19,43,124,.8);
}
.projects.three .project-nav li {
	padding: 10px 30px;
}
.projects.three .project-nav {
	margin-bottom: 20px;
}
.projects.three .project-nav li:hover, .projects.three .project-nav li.active {
	background-color: transparent;
	color: #000;
	text-decoration: none;
	box-shadow: none;
}

/* ---------------------------------------------
  20.4 PROJECTS PORTFOLIO FOUR ( BLACK OVERLAY )
----------------------------------------------*/
.projects.four .project-nav li:hover, .projects.four .project-nav li.active {
	background-color: #ed145b;
}
.projects.four .project-block{
	position: relative;
}
.projects.four .project-overlay {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    top: 200%;
}
.projects.four .project-inner {
	width: 100%;
	height: 100%;
}
.projects.four .project-block:hover  .project-overlay{
	opacity: 1;
	top: 0;
}
.projects.four .project-inner i img {
	position: absolute;
	top: 50px;
	right: 20px;
}
.projects.four .project-inner h3 {
    position: absolute;
    bottom: 40px;
    left: 20px;
}
.projects.four .project-inner p {
    position: absolute;
    bottom: 10px;
    left: 20px;
}


/* --------------------------------------
=========================================
   21. SKILL PROGRESS BLOCKS
=========================================
-----------------------------------------*/

/*---------------------------------------
   21.1 SKILL BAR BLOCK   
-----------------------------------------*/
.skillbar-holder {
	margin-top: 20px;
}
.skillbar-holder label {
	color: #464646;
	float: left;
}
.skillbar {
	position: relative;
	display: inline-block;
	margin: 0;
	background: #f6f7fb;
	height: 8px;
	width: 100%;
	border-radius: 10px;
}
.skillbar-bar {
	height: 8px;
	border-radius: 10px;
	margin: 0;
	width: 0px;
	float: left;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ed145b+0,6e45e2+100 */
	background: #ed145b; /* Old browsers */
	background: -moz-linear-gradient(left, #ed145b 0%, #6e45e2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #ed145b 0%, #6e45e2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ed145b 0%, #6e45e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed145b', endColorstr='#6e45e2', GradientType=1 ); /* IE6-9 */
}
.skill-bar-percent {
	position: absolute;
	right: 0;
	top: -40px;
}

/*---------------------------------------
   21.2 SKILL CIRCLE BLOCK   
-----------------------------------------*/
.circle-progress {
	display: inline-block;
}
.our-skills div.circle-progress:first-child {
	margin-right: 100px;
}
.circle-chart__circle {
  animation: circle-chart-fill 2s reverse; /* 1 */ 
  -webkit-transform: rotate(-90deg); 
          transform: rotate(-90deg); /* 2, 3 */
  -webkit-transform-origin: center;
          transform-origin: center; /* 4 */
}

.circle-chart__info {
  -webkit-animation: circle-chart-appear 2s forwards;
          animation: circle-chart-appear 2s forwards;
  opacity: 0;
  -webkit-transform: translateY(0.3em);
          transform: translateY(0.3em);
}

@-webkit-keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@-webkit-keyframes circle-chart-appear {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}


/* --------------------------------------
=========================================
   22. FORM BLOCKS
=========================================
-----------------------------------------*/

/*---------------------------------------
   22.1 FORM DEFAULT     
-----------------------------------------*/
.form select, .form input, .form textarea {
	background: #f1f8fc;
	color: #000;
	width: 100%;
	padding: 15px 20px 15px;
	border: none;
	border-radius: 40px;
	margin-top: 20px;
	font-size: 14px;/* letter-spacing: .5px; */
}

/*========== 22.1.1 FORM MESSAGES =========*/
#success-message, #error-message {
	width: 100%;
	padding: 30px;
	margin-bottom: 20px;
	float: left;
	display: none;
	font-weight: normal;
	margin-top: 30px;
}
#error-message ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #ed145b;
}
#success-message i, #error-message i {
	background: #fff;
	border-radius: 50%;
	width: 30px;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	color: #ed145b;
}
#success-message p, #error-message label {
	line-height: 50px;
	font-size: 18px;
	font-weight: 500;
	font-style: italic;
}
#success-message, #success-message i {
	color: #6e45e2;
}

/*---------------------------------------
   22.2 FORM WHITE            
-----------------------------------------*/
.form.white select, .form.white input {
	background: #fff;
}

/*---------------------------------------
   22.3 FORM TRANSPARENT            
-----------------------------------------*/
.form.transparent select, .form.transparent input {
	background: rgba(0,0,0,.5);
	color: #acb0b9;
}
.form.transparent input::-webkit-input-placeholder {
  color: #acb0b9;
}
.form.transparent input::-moz-placeholder {
  color: #acb0b9;
}
.form.transparent input:-ms-input-placeholder {
  color: #acb0b9;
}
.form.transparent input::placeholder {
  color: #acb0b9;
}
/*---------------------------------------
   22.4 FORM TRANSPARENT TWO ( WHITE )           
-----------------------------------------*/

.form.transparent.two select, .form.transparent.two input {
	background: rgba(255,255,255,.2);
	color: #fff;
}
.form.transparent.two input::-webkit-input-placeholder {
  color: #fff;
}
.form.transparent.two input::-moz-placeholder {
  color: #fff;
}
.form.transparent.two input:-ms-input-placeholder {
  color: #fff;
}
.form.transparent.two input::placeholder {
  color: #fff;
}

/*---------------------------------------
   22.5 FORM LINE ( MATERIAL DESIGN )           
-----------------------------------------*/
.form.line select, .form.line input, .form.line textarea {
	background: transparent;
	color: #000;
	width: 100%;
	padding: 15px 0;
	border-bottom: 1px solid #b2b6bf;
	border-radius: 0;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 600;
}
.form.line select:focus, .form.line input:focus, .form.line textarea:focus {
	border-bottom: 1px solid #ed145b;
}
.form.line input::-webkit-input-placeholder, .form.line textarea::-webkit-input-placeholder {
  color: #b2b6bf;
}
.form.line input::-moz-placeholder, .form.line textarea::-moz-placeholder {
  color: #b2b6bf;
}
.form.line input:-ms-input-placeholder, .form.line textarea:-ms-input-placeholder {
  color: #b2b6bf;
}
.form.line input::placeholder, .form.line textarea::placeholder {
  color: #b2b6bf;
}

/*---------------------------------------
   22.6 FORM LINE BLUE
-----------------------------------------*/

.form.line.blue select:focus, .form.line.blue input:focus, .form.line.blue textarea:focus {
	border-bottom: 1px solid #6e45e2;
}

/* --------------------------------------
   22.7 NEWSLETTER FORM
-----------------------------------------*/
.newsletter-form {
	display: inline-block;
	width: 100%;
}
.newsletter-form input {
	background: #f1f8fc;
	border: none;
	width: 100%;
	height: 50px;
	border-radius: 40px;
	padding: 0 25px;
	font-size: 14px;
}
.newsletter-form button {
	padding: 0;
	width: 100%;
	margin: 0px;
	background-color: #ed145b;
}
.newsletter-form button:hover {
	color: #ebebeb;
}

/* --------------------------------------
   22.8 NEWSLETTER FORM TWO
-----------------------------------------*/
.newsletter-form.two {
    background-color: #141414;
    max-width: 450px;
    border-radius: 60px;
    margin: 15px 0 30px;
}
.newsletter-form.two input {
    background: transparent;
    width: 90%;
    float: left;
}
.newsletter-form.two button {
    width: 10%;
    float: right;
    background: transparent;
    color: #6e45e2;
}


/* --------------------------------------
=========================================
   23. SOCIAL ICONS
=========================================
-----------------------------------------*/

/*---------------------------------------
   23.1 SOCIAL ICONS DEFAULT
-----------------------------------------*/
.social-icon {
	padding: 0;
}
.social-icon li {
	display: inline-block;
}
.social-icon li a {
	display: inline-block;
	color: #464646;
	transition: all ease .5s;
	margin: 10px;
}
.social-icon li a:hover {
	color: #ed145b;
}

/*---------------------------------------
   23.2 SOCIAL ICONS CIRCLE 
-----------------------------------------*/
.social-icon.circle li a {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #f1f8fc;
	color: #000;
	font-size: 18px;
	text-align: center;
	line-height: 50px;
}
.social-icon.circle li a:hover {
	background-color: #ed145b;
	color: #fff;
	box-shadow: 0px 0px 20px 0 rgba(0,0,0,.5);
}

/*---------------------------------------
   23.3 SOCIAL ICONS CIRCLE BLUE
-----------------------------------------*/
.social-icon.circle.blue li a {
	background-color: #111;
	color: #fff;
	margin:0 20px 0 0;
}
.social-icon.circle.blue li a:hover {
	background-color: #132b7c;
	color: #fff;
}

/*---------------------------------------
   23.4 SOCIAL ICONS CIRCLE LIGHT BLUE
-----------------------------------------*/
.social-icon.circle.light-blue li a {
	background-color: #f1f8fc;
	color: #000;
	margin:0 20px 0 0;
}
.social-icon.circle.light-blue li a:hover {
	background-color: #132b7c;
	color: #fff;
}

/*---------------------------------------
   23.5 SOCIAL ICONS CIRCLE LEFT
-----------------------------------------*/
.social-icon.circle.left li a {
	margin:0 20px 0 0;
}
.social-icon.circle.left li a:hover {
	background-color: #132b7c;
	color: #fff;
}


/* --------------------------------------
=========================================
   24. TEAM BLOCKS
=========================================
-----------------------------------------*/

/*---------------------------------------
   24.1 TEAM BLOCK DEFAULT
-----------------------------------------*/
.team-block .team-image {
	display: block;
	width: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.team-block img {
	width: 100%;
}
.team-block h3 {
	margin-bottom: 5px;
}
.team-block .team-overlay {
	background-color: rgba(237,20,91,.9);
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	bottom: -100%;
	transition: all ease .5s;
	border-radius: 50%;
}
.team-block:hover .team-overlay {
	bottom: 0px;
	border-radius: 0px;
}
.team-block .team-social {
	padding: 0;
	position: absolute;
	left: 0;
	right: 0;
	list-style: none;
	top: 0;
	bottom: -100%;
	margin: auto;
	height: 40px;
	transition: all ease 1s;
}
.team-block:hover .team-social {
	bottom: 0px;
}
.team-block .team-social li {
	display: inline-block;
}
.team-block .team-social li a {
	display: inline-block;
	line-height: 40px;
	margin: 0 8px;
	font-size: 20px;
	color: #fff;
}

/*---------------------------------------
   24.2 TEAM BLOCK TWO
-----------------------------------------*/
.team-block.two .team-image {
	border-radius: 0;
}
.team-block.two {
	margin-top: 0;
}
.team-block.two .team-overlay {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6e45e2+0,88d3ce+100&0.9+0,0.9+100 */
	background: -moz-linear-gradient(-45deg, rgba(110,69,226,0.9) 0%, rgba(136,211,206,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(110,69,226,0.9) 0%, rgba(136,211,206,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(110,69,226,0.9) 0%, rgba(136,211,206,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e66e45e2', endColorstr='#e688d3ce', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.team-block.two .team-social {
padding-top: 50px;
	
}
.team-block.two h3 {
	color: #fff;
	margin: 41% 0 0;
	font-weight: 700;
	font-size: 22px;
}
.team-block.two .team-box p {
	color: #fff;
}

/*---------------------------------------
   24.3 TEAM BLOCK THREE
-----------------------------------------*/

.team-block.three {
	margin-top: 40px;
	position: relative;
	display: inline-block;
	width: 100%;
}
.team-block.three .team-info {
	position: absolute;
	bottom: 0;
	background: #f1f8fc;
	width: 100%;
	text-align: left;
	padding: 25px 30px;
	transition: all ease .5s;
}
.team-block.three .team-info h3 {
	float: left;
	font-size: 18px;
	color: #132b7c;
	width: 50%;
	margin: 0 0 0;
}
.team-block.three .team-info .social-icon {
	float: left;
	text-align: right;
	width: 50%;
	margin: 0px;
}
.team-block.three .team-info p {
	margin: 10px 0 0;
}
.team-block.three .team-info .social-icon li a {
	color: #9fa4af;
	margin: 0 0 0 10px;
}
.team-block.three:hover, .team-block.three.active {
	box-shadow: 0px 0px 30px 0 rgba(0,0,0,.2);
}
.team-block.three:hover .team-info, .team-block.three.active .team-info {
	background-color: #132b7c;
	box-shadow: 0px 0px 30px 0 rgba(0,0,0,.2);
}
.team-block.three:hover .team-info h3, .team-block.three:hover .team-info p, .team-block.three:hover .team-info .social-icon li a, .team-block.active .team-info h3, .team-block.active .team-info p, .team-block.active .team-info .social-icon li a {
	color: #fff;
}

/*---------------------------------------
   24.4 TEAM BLOCK FULL WIDTH ( FIFTY FIFTY )
-----------------------------------------*/


.team-full-width .member-image .member-name {
	position: absolute;
	bottom: 80px;
	left: 60px;
}
.team-full-width .member-image .member-name h3 {
	color: #fff;
	font-size: 30px;
	margin: 0 0 10px;
	font-weight: 600;
}
.team-full-width .member-detail h3 {
	font-size: 30px;
}
.team-full-width .member-detail .social-icon.circle li a {
	background-color: rgba(255,255,255,.2);
	color: #fff;
}
.team-full-width .member-detail .social-icon.circle li a:hover {
	background-color: #ed145b;
}

/* --------------------------------------
   24.5 TEAM PROGRESS BLOCK
-----------------------------------------*/

.team-circle-chart {
	float: left;
}
.team-progress-block h2 {
	float: left;
	margin: 25px 20px 20px;
	color: #000;
	font-weight: 600;
	font-size: 60px;/* font-weight: 600; */
}
.team-progress-block h2 span {
	color: #000;
	font-weight: normal;
	font-size: 18px;/* font-weight: 600; */
}

/* --------------------------------------
=========================================
   25. GRAPH BLOCK
=========================================
-----------------------------------------*/
.graph-date {
	font-size: 16px;
	font-weight: 600;
	position: relative;
}
.graph-date img {
	position: absolute;
	top: 5px;
	padding-left: 10px;
}
.graph-stats {
	border-bottom: 1px solid #fff;
	margin-bottom: 25px;
	padding-bottom: 20px;
}
.graph-review {
	display: inline-block;
	font-size: 18px;
	padding-left: 50px;
	position: relative;
}
.graph-review svg {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 24px;
}
.graph-review em {
	font-weight: 600;
	margin-top: 30px;
	line-height: 60px;
}
.graph-clients, .graph-marketing {
	display: inline-block;
	font-size: 30px;
	font-weight: 600;
	margin-left: 14%;
	line-height: 26px;
}
.graph-clients span, .graph-marketing span {
	font-size: 18px;
	font-weight: normal;
	width: 100%;
}

/* --------------------------------------
=========================================
   26. BENIFITS BLOCK
=========================================
-----------------------------------------*/
.benifit-block.shift-down::after {
	position: absolute;
	bottom: 0;
	left: -30%;
	content: "";
	width: 160%;
	height: 50%;
	background: #fff;
}
.benifit-slider {
	position: relative;
	padding: 0;
	overflow: hidden;
	width: 100%;
}
.benifit-block h3 {
	color: #000;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	text-align: center;
}
.benifit .info {
	position: absolute;
	height: 100%;
	padding: 15%;
	top: 100%;
	left: 0;
	color: #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#215589+0,4cd8b1+83 */
	background: #215589; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #215589 0%, #4cd8b1 83%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #215589 0%, #4cd8b1 83%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #215589 0%, #4cd8b1 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#215589', endColorstr='#4cd8b1', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	transition: all .7s ease;
}
.benifit:hover .info {
	top: 0;
}
.benifit .info h3 {
	position: relative;
	color: #fff;
}
.benifit-block .owl-theme .owl-nav [class*=owl-] {
	background: transparent;
	margin-top: 20px;
	width: 30px;
	height: 25px;
}
.benifit-block .owl-theme .owl-nav [class*=owl-] .next, .benifit-block .owl-theme .owl-nav [class*=owl-] .prev {
	color: #E1E1E1;
	font-size: 24px;
}
.benifit-block .owl-theme .owl-nav [class*=owl-] .next:hover, .benifit-block .owl-theme .owl-nav [class*=owl-] .prev:hover {
	color: #000;
}
.benifit-block button:hover {
	box-shadow: none;
}

/* --------------------------------------
=========================================
   27. CLIENT LOGO BLOCK
=========================================
-----------------------------------------*/
.client-logo-holder {
	width: 100%;
	float: left;
}
.client-logo {
	width: 19%;
	display: inline-block;
	line-height: 100px;
	margin-top: 40px;
}


/* --------------------------------------
=========================================
   28. TESTIMONIAL BLOCKS
=========================================
-----------------------------------------*/

/* --------------------------------------
  28.1 TSETIMONIAL BLOCK
-----------------------------------------*/
.testimonial .owl-carousel .owl-item img {
	width: auto;
	display: inline-block;
}

/* --------------------------------------
  28.2 TSETIMONIAL BLOCK TWO
-----------------------------------------*/
.testimonial.two .owl-theme .owl-dots .owl-dot {
    margin: 0;
    height: 8px;
}
.testimonial.two .owl-theme .owl-dots .owl-dot span {
    background: transparent;
    border: 1px solid #6e45e2;
}
.testimonial.two .owl-theme .owl-dots .owl-dot.active span, .testimonial.two .owl-theme .owl-dots .owl-dot:hover span {
    background: #6e45e2;
}

/* --------------------------------------
  28.3 TSETIMONIAL BLOCK THREE
-----------------------------------------*/
.testimonial.three .owl-theme .owl-dots .owl-dot {
    margin: 0;
    height: 8px;
}
.testimonial.three .owl-theme .owl-dots .owl-dot span {
    background: #363636;
}
.testimonial.three .owl-theme .owl-dots .owl-dot.active span, .testimonial.three .owl-theme .owl-dots .owl-dot:hover span {
    background: #4edfb3;
}


/* --------------------------------------
=========================================
   29. ACCORDION BLOCK
=========================================
-----------------------------------------*/

/*========== 29.2 ACCORDION PANNEL ===========*/
.panel-group {
	margin: 30px 0 0;
}
.panel-body {
	padding: 15px 5%;
	line-height: 28px;
}
.panel {
	border: none;
	background: transparent;
    box-shadow: none;
}
.panel-default > .panel-heading {
    background-color: #6e45e2;
    padding: 0 0 0 20px;
    border-radius: 40px;
}
.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
	border: none;
}
.panel-default > .panel-heading a {
	line-height: 43px;
	text-decoration: none !important;
	color: #fff;
	text-transform: none;
	font-size: 18px;
}
.panel-default > .panel-heading a::after {
    font-family: 'Glyphicons Halflings';
    -moz-osx-font-smoothing: grayscale;
    float: right;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
    width: 30px;
    text-align: center;
    margin: 0 10px 0 0;
}
.panel-group .panel {
	margin-bottom: 15px;
}
.panel-default>.panel-heading a[aria-expanded="true"]:after {
	content: "\2212";
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.panel-default>.panel-heading a[aria-expanded="false"]:after {
	content: "\002b";
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}


/* --------------------------------------
=========================================
   30. PRICING BLOCKS
=========================================
-----------------------------------------*/

/* --------------------------------------
   30.1 PRICING BLOCK DEFAULT
-----------------------------------------*/
.pricing-block {
	display: inline-block;
	border-radius: 10px;
	border: 1px solid #d7dbe8;
	padding: 50px 30px;
	margin-top: 40px;
	transition: all ease .5s;
}
.pricing-block:hover {
	box-shadow: 0px 0px 20px 0 rgba(0,0,0,.3);
}
.pricing-block .button-inline a {
	margin: 30px 0 0;
}
.pricing-block:hover .button-inline a {
	background-color: #6e45e2;
	color: #fff;
	box-shadow: none;
}
.pricing-block .rate {
	color: #4f4f6f;
	font-size: 60px;
	display: inline-block;
	position: relative;
	margin-left: 5px;
}
.pricing-block .rate em {
	position: absolute;
	font-size: 16px;
	top: 15px;
	left: -10px;
}
.pricing-block .rate small {
	font-size: 18px;
}
.pricing-block p {
	font-weight: 300;
	line-height: 28px;
}

/* --------------------------------------
   30.2 PRICING BLOCK TWO ( HOVER BLACK )
-----------------------------------------*/

.pricing-block.two {
	border: none;
	padding: 50px 30px;
	box-shadow: 0px 0px 20px 0 rgba(0,0,0,.3);
	text-align: left;
}
.pricing-block.two:hover {
	background-color: #000;
}
.pricing-block.two i {
	float: left;
	margin-right: 15px;
}
.pricing-block.two h3 {
	color: #000;
	margin: 0;
}
.pricing-block.two .rate {
	color: #000;
	font-size: 36px;
	margin-left: 5px;
	font-weight: 600;
}
.pricing-block.two:hover h3, .pricing-block.two:hover .rate, .pricing-block.two:hover p {
	color: #fff;
}
.pricing-block.two:hover .button-inline a {
	background-image: linear-gradient(to right, #88d3ce 0%, #6e45e2 100%);
	color: #fff;
	box-shadow: none;
}

/* --------------------------------------
   30.3 PRICING BLOCK THREE ( ORANGE BLACK )
-----------------------------------------*/

.pricing-block.three {
	border: none;
	padding: 50px 30px;
	box-shadow: 0px 0px 20px 0 rgba(0,0,0,.3);
	text-align: left;
}
.pricing-block.three:hover {
	background-color: #000;
}
.pricing-block.three i {
	float: left;
	margin-right: 15px;
}
.pricing-block.three h3 {
	color: #000;
	margin: 0;
}
.pricing-block.three .rate {
	color: #000;
	font-size: 36px;
	margin-left: 5px;
	font-weight: 600;
}
.pricing-block.three:hover h3, .pricing-block.three:hover p {
	color: #fff;
}
.pricing-block.three:hover .rate {
	color: #f6663f;
}
.pricing-block.three:hover .button-inline a.gradient-border-two-button::after {
	display: none;
}


/* --------------------------------------
=========================================
   31. BLOG BLOCKS
=========================================
-----------------------------------------*/

/* --------------------------------------
  31.1 BLOG DEFAULT
-----------------------------------------*/
.blog-post {
	text-align: left;
	margin-top: 40px;
	overflow: hidden;
	background-color: #f5fbff;
	transition: all ease .5s;
	cursor: pointer;
}
.blog-post:hover {
	box-shadow: 0px 0px 30px 0 rgba(0,0,0,.2);
	background-color: #fff;
}
.blog-post img {
	width: 100%;
}
.blog-post h4 {
	margin-bottom: 20px;
}
.blog-post h3 {
	color: #000;
	margin: 0 0 10px;
	transition: all ease .5s;
}
.blog-post:hover h3 {
	color: #ed145b;
}
.post-inner {
	padding: 30px;
	width: 100%;
}
.post-detail {
	margin-top: 15px;
	font-size: 12px;
	letter-spacing: 1px;
}
.post-detail img {
	margin-right: 10px;
	width: auto;
	border-radius: 50%;
}
.post-detail em {
	font-size: 12px;
	letter-spacing: normal;
}
.post-detail a {
	margin-left: 30px;
}

/* --------------------------------------
  31.2 BLOG TWO
-----------------------------------------*/
.blog.two {
	background-color: #fff;
	padding: 0;
}
.blog.two .blog-post {
	margin-top: 0;
	position: relative;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: -7px;
}
.blog.two .blog-image {
	display: inline-block;
	width: 100%;
}
.blog.two .blog-image img {
	width: 100%;
}
.blog.two .blog-image span {
	background-color: rgba(0, 0, 0, .3);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transition: all ease .5s;
	cursor: pointer;
}
.blog.two .blog-post:hover span {
	background-color: rgba(0, 0, 0, .8);
}
.blog.two .blog-detail {
	position: absolute;
	bottom: 15%;
	padding: 30px 60px;
	text-align: left;
	transition: all ease .5s;
	cursor: pointer;
}
.blog.two .blog-post:hover .blog-detail{
	bottom: 25%;
}
.blog.two .blog-date {
	background-color: #6e45e2;
	color: #fff;
	font-size: 11px;
	border-radius: 30px;
	padding: 6px 20px;
	letter-spacing: 2px;
	display: inline-block;
}
.blog.two .blog-detail h3 {
	color: #fff;
	margin: 15px 0 0;
	line-height: 34px;
}
.blog.two .blog-detail .button-inline {
	position: absolute;
	bottom: -100%;
	transition: all ease .5s;
}
.blog.two .blog-post:hover .button-inline {
	bottom: -20%;
}
.blog.two .blog-detail button, .blog.two .blog-detail .button-inline a {
    margin: 30px 0 0;
}

/* --------------------------------------
  31.3 BLOG THREE
-----------------------------------------*/
.blog.three .blog-post {
    background: #777;
    margin: 0;
}
.blog.three .blog-image img {
	-webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
	transition: all ease .8s;
}
.blog.three .blog-image span {
	background-color: rgba(0, 0, 0, .5);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	cursor: pointer;
}
.blog.three .blog-detail {
	position: absolute;
	bottom: 0;
	padding: 30px;
	text-align: left;
	transition: all ease .5s;
	cursor: pointer;
}
.blog.three .blog-date {
	color: #fff;
	font-size: 11px;
	border-radius: 30px;
	padding: 6px 20px;
	letter-spacing: 2px;
	display: inline-block;
}
.blog.three .blog-detail h3 {
	color: #fff;
	margin: 15px 0 0;
	line-height: 34px;
}
.blog.three .blog-post:hover .blog-image img {
	-webkit-transform: scale(1.3);
    transform: scale(1.3);
}

/* --------------------------------------
=========================================
   32. FOOTER STYLES
=========================================
-----------------------------------------*/

/* --------------------------------------
   32.1 FOOTER DEFAULT
-----------------------------------------*/
footer {
	padding: 100px 0 0;
	float: left;
	width: 100%;
	color: #acb0b9;
	text-align: left;
}
.footer-bg {
	background-image: url(../img/footer-bg.jpg);
	background-position: top left;
	background-size: cover;
}

/*======== 32.1.1 COMPANY INFO ========*/
footer a {
	color: #555;
}
footer label {
	font-size: 12px;
	margin: 0 0 0;
}
footer .social-icon li a {
	color: #fff;
}
footer .social-icon li a:hover {
	background-color: transparent;
	color: #ed145b;
	box-shadow: none;
}

/*=========== 32.1.2 TWITTER FEED ==========*/
.tweet h3 {
	font-size: 16px;
	margin: 5px 0 0;
}
.tweet svg {
	float: left;
	margin: 2px 10px 10px 0;
}
.footer-center a {
	color: #acb0b9;
}

/*=========== 32.1.3 OPENING HOURS ===========*/
.text-emphasis-uppercase span {
	float: right;
}

/*========= 32.1.4 COPYRIGHTS ==========*/
.copy-right {
	font-size: 12px;
	float: left;
	width: 100%;
	color: #acb0b9;
	text-align: center;
	padding: 50px 0 50px;
}
.copy-right a {
	color: #ed145b;
}
.copy-right a.magenta {
	color: #6e45e2;
}

/* --------------------------------------
   32.2 FOOTER TWO
-----------------------------------------*/
footer.two .social-icon{
	float: none;
	margin-top: 30px;
}
footer.two .social-icon li a {
	margin: 0 20px;
}
footer.two .social-icon li a:hover {
	color: #6e45e2;
}
footer.two p span {
	color: #fff;
}
.footer-nav{
	padding: 0;
	list-style: none;
}
.footer-nav li {
	margin-bottom: 10px;
}
.footer-nav li a {
	transition: ease all .5s;
}
.footer-nav li a:hover {
	color: #6e45e2;
	text-decoration: none;
	padding-left: 15px;
}

/* --------------------------------------
   32.3 FOOTER THREE
-----------------------------------------*/
footer.three .social-icon{
	float: none;
	margin-top: 30px;
}
footer.three .footer-nav {
	display: inline-block;
	margin: 30px 0 0;
	padding: 0px;
}
footer.three .footer-nav li {
	display: inline-block;
	margin: 0 20px;
}
footer.three .footer-nav li a:hover {
	color: #4edfb3;
	padding-left: 0;
}
footer.three .social-icon li a {
	color: #9fa4af;
}
footer.three .social-icon li a:hover {
	color: #4edfb3;
}
footer.three .copy-right a {
	color: #4edfb3;
}

/* --------------------------------------
=========================================
   33. EXTRA CSS CODES
=========================================
-----------------------------------------*/

/* --------------------------------------
   33.1 SHADOW BOX 
-----------------------------------------*/
.shadow-box {
	box-shadow: 0px 0px 23px 0 rgba(0,0,0,.1);
	margin-top: -160px;
	background-color: #fff;
	padding: 80px 60px;
	text-align: left;
}

/* --------------------------------------
   33.2 VIEWPORT HEIGHT
-----------------------------------------*/
.height-100-vh {
	height: 100vh;
}
.height-120-vh {
	height: 120vh;
}

/* --------------------------------------
   33.3 BORDER SEPRATOR BLOCK
-----------------------------------------*/
.border-seprator {
	margin-top: 100px;
	padding: 100px 0 0;
	border-top: 1px solid #e1e6f1;
}

/* --------------------------------------
  33.4 DISPLAY BLOCK / DISPLAY FLEX
-----------------------------------------*/
.display-block {
	display: block;
}
.display-flex {
	display: flex;
}

/* --------------------------------------
   33.5 ABSOLUTE CONTENT 
-----------------------------------------*/
.position-relative {
	position: relative;
}
.absolute-bottom-left {
	position: absolute;
	left: 0;
	text-align: left;
	bottom: 0px;
}
.bottom-right-0 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}

/*---------------------------------------
   33.6 BLOCK QUOTE     
-----------------------------------------*/
blockquote {
	padding: 0px 15% 0px 30px;
	margin: 30px 0;
	font-size: 22px;
	border-left: 5px solid #ed145b;
	color: #000;
	font-style: normal;
}

/*---------------------------------------
   33.7 ROUND CORNER          
-----------------------------------------*/
.round-corner-50 {
	border-radius: 50%;
}

/*---------------------------------------
   33.8 MARKER        
-----------------------------------------*/
.marker {
	padding: 0 10px;
	display: inline-block;
}

.z-index-1 {
	z-index: 1;
}
/*---------------------------------------
   33.9 LINE SEPRATORS             
-----------------------------------------*/
.center-line {
	display: inline-block;
	width: 1px;
	height: 30px;
	margin-bottom: 20px;
}
.line-seprator {
	border-top: 1px solid #dadada;
	margin: 40px 0;
	float: left;
	width: 100%;
}

/*---------------------------------------
   33.10 BORDERS             
-----------------------------------------*/
.border-both-side {
	border-left: 1px solid rgba(255, 255, 255, .2);
	border-right: 1px solid rgba(255, 255, 255, .2);
}
.navigation .border-both-side {
	height: 85px;
}

/* --------------------------------------
=========================================
   34. BLOG PAGE
=========================================
-----------------------------------------*/

/* --------------------------------------
   34.1 BLOG HEADER
-----------------------------------------*/
.blog-header .hamburger-inner, .blog-header .hamburger-inner::before, .blog-header .hamburger-inner::after {
	background-color: #000;
}
.blog-header .navbar-default .navbar-nav > li > a {
	color: #000;
}
.blog-header .navbar-default .navbar-nav > .active > a, .blog-header .navbar-default .navbar-nav > .active > a:focus, .blog-header .navbar-default .navbar-nav > .active > a:hover {
	color: #222;
}
.blog-header .header-right {
	color: #000;
}
.blog-header .header.header-scrolled {
	background-color: rgba(255, 255, 255, 1);
}

/* --------------------------------------
   34.2 BLOG COUNTERY ARROW
-----------------------------------------*/
.blog-page .dd .arrow {
	background: url(../img/dd_arrow_blog.png) no-repeat;
}

/* --------------------------------------
=========================================
   35. BLOG SINGLE PAGE
=========================================
-----------------------------------------*/

/* --------------------------------------
   35.1 BLOG SINGLE TAGS AND SOCIAL
-----------------------------------------*/
.tags p, .blog-social p {
	font-size: 14px;
	font-weight: 800 !important;
	color: #000;
	display: inline-block;
	margin: 0 10px 0 0 !important;
	text-transform: uppercase;
}
.tags ul, .blog-social ul {
	display: inline-block;
	padding: 0;
	margin: 0;
	list-style: none;
}
.tags ul li {
	display: inline-block;
}
.tags ul li a {
	color: #9fa4af;
}
.tags ul li a:hover {
	color: #000;
}
.blog-social ul li a {
	margin: 0 15px 0 0;
}

/* --------------------------------------
   35.2 BLOG SINGLE COMMENTS
-----------------------------------------*/

.comment-block p em {
	color: #252525;
}
.comment-block p a {
	font-size: 11px;
	color: #000;
	font-weight: bolder;
	text-decoration: none;
	text-transform: uppercase;
	float: right;
}
.comment-block p a:hover {
	color: #ed145b;
}
.comment-block p a svg {
	color: #ed145b;
	margin-left: 15px;
}

/* --------------------------------------
   35.3 BLOG SINGLE SIDEBAR
-----------------------------------------*/
.sidebar ul.categories {
	padding: 0;
	list-style: none;
	margin: 15px 0 0;
}
.sidebar ul.categories li a {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	color: #9fa4af;
	margin: 10px 0;
	display: inline-block;
}
.sidebar ul.categories li a:hover, .sidebar ul.categories li.active a {
	color: #ed145b;
	text-decoration: none;
}
.sidebar ul.post {
	padding: 0;
	list-style: none;
	margin: 15px 0 0;
}
.sidebar ul.post li a {
	margin: 10px 0;
	color: #000;
	font-weight: bold;
	display: inline-block;
}
.sidebar ul.post li a:hover, .sidebar ul.post li.active a {
	color: #ed145b;
	text-decoration: none;
}

.sidebar .tags ul li a {
	line-height: 34px;
}

/* --------------------------------------
=========================================
   36. RESPONSIVE FIXES
=========================================
-----------------------------------------*/	

/* --------------------------------------
	36.1 MAX WIDTH 1920PX
-----------------------------------------*/	
@media screen and (max-width:1920px) {
.navigation.mobile #trigger-overlay {
	display: block;
}
.navigation.mobile .navbar {
	float: none;
	height: 70%;
	overflow: auto;
}
.navigation.mobile .navbar-nav>li, .navbar-nav, .navbar {
	float: none;
}
.navigation.mobile .navbar-nav>li:hover {
	background: #ed145b; 
}
.navigation.mobile .navbar .active > a, .navbar li > a:hover {
	background-color: transparent ;
	color: #fff;
}
.navigation.mobile button.hamburger:focus {
	outline: none;
}
.navigation.mobile .navbar-default .navbar-nav > li > a {
	border: none;
}
/* Overlay style */
.navigation.mobile .overlay {
	background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	box-shadow: none;
}
/* Menu style */
.navigation.mobile #trigger-overlay {
    background: transparent none repeat scroll 0 0;
    margin: auto;
    padding: 0;
    position: fixed;
    right: 0;
    top: 15px;
    z-index: 9999;
    box-shadow: none;
    left: 50%;
    margin-left: -25px;
}
.navigation.mobile #trigger-overlay i {
	color: #444;
	font-size: 40px;
}
.navigation.mobile .overlay nav {
    text-align: center;
    position: relative;
    margin-top: 100px;
}
.navigation.mobile .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: block;
    text-align: left;
    width: 50%;
    position: relative;
}
.navigation.mobile .overlay ul li {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    margin-bottom: 10px;
    border-radius: 25px;
}
.navigation.mobile .overlay ul li a {
    font-size: 14px;
    font-weight: 300;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    line-height: normal;
    padding: 10px 15px;
}
.navigation.mobile .overlay ul li a .caret {
    float: right;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
    transition: all 0.5s ease;
    margin-top: 7px;
}
.navigation.mobile .overlay ul li:hover a .caret {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg);
}
.navigation.mobile .overlay ul li a:hover, .overlay ul li a:focus {
	background: transparent none repeat scroll 0 0 ;
	color: #f1f1f1;
	text-decoration: none;
}
/* Effects */
.navigation.mobile .overlay-slidedown {
	visibility: hidden;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.navigation.mobile .overlay-slidedown.open {
	visibility: visible;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

.navigation.mobile .overlay ul .sub-menu {
	position: relative;
	background: transparent;
	padding: 0;
	width: auto;
	text-align: left;
	border-radius: 0;
	margin-left: 20px;
	display: none;
}
.navigation.mobile .overlay ul .sub-menu li {
	width: auto;
	height: auto;
	min-height: auto;
	display: block;
	background: transparent;
}
.navigation.mobile .overlay ul .sub-menu li a {
	display: block;
    width: 95%;
    color: #fff;
    line-height: normal;
    margin: 0 20px;
    padding-top: 0;
}
.navigation.mobile .overlay ul .sub-menu li a:hover {
	color: #000;
}

}

/* --------------------------------------
	36.2 MAX WIDTH 1350PX
-----------------------------------------*/	
@media only screen and (max-width: 1350px) {
.navigation.three .working-hours, .navigation.three .search-icon {
	display: none;
}
.navigation.three .brand-white {
	width: 20%;
}
.navigation.three .navigation-main {
	width: 80%;
}
}

/* --------------------------------------
	36.3 MAX WIDTH 1024PX
-----------------------------------------*/	
@media only screen and (max-width: 1024px) {
h1 {
	font-size: 6.0rem;
}
h2 {
	font-size: 4.0rem;
}
.navigation #trigger-overlay {
	top: 15px;
	left: 50%;
	right: 0;
	margin-left: -25px;
}
.navigation.two #trigger-overlay {
	top: 10px;
    left: 10px;
    right: 0;
    position: relative;
    float: none;
    margin: 0;
}
.navigation.four #trigger-overlay {
	top: 35px;
}
.navigation .navbar {
	float: none;
	height: 70%;
	overflow: auto;
}
.navigation .navbar-nav>li, .navbar-nav, .navbar {
	float: none;
}
.navigation .navbar-nav>li:hover {
	background: #ed145b; 
}
.navigation .navbar .active > a, .navbar li > a:hover {
	background-color: transparent !important;
	color: #fff !important;
}
.navigation button.hamburger:focus {
	outline: none;
}
.navigation .navbar-default .navbar-nav > li > a {
	border: none !important;
}
/* Overlay style */
.navigation .overlay {
	background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	box-shadow: none;
}
/* Menu style */
.navigation #trigger-overlay {
    background: transparent none repeat scroll 0 0 !important;
    margin: auto;
    padding: 0;
    position: fixed;
    right: 0;
    top: 15px;
    z-index: 9999;
    box-shadow: none;
    left: 50%;
    margin-left: -25px;
}
.navigation #trigger-overlay i {
	color: #444 !important;
	font-size: 40px!important;
}
.navigation .overlay nav {
    text-align: center;
    position: relative;
}
.navigation .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: block;
    text-align: left;
    width: 50%;
    position: relative;
}
.navigation .overlay ul li {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    margin-bottom: 10px;
    border-radius: 25px;
}
.navigation .overlay ul li a {
    font-size: 14px;
    font-weight: 300;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    line-height: normal;
    padding: 10px 15px;
}
.navigation .overlay ul li a .caret {
    float: right;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
    transition: all 0.5s ease;
    margin-top: 7px;
}
.navigation .overlay ul li:hover a .caret {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg);
}
.navigation .overlay ul li a:hover, .overlay ul li a:focus {
	background: transparent none repeat scroll 0 0 !important;
	color: #f1f1f1 !important;
	text-decoration: none;
}

.navigation .overlay ul .sub-menu {
	position: relative;
	background: transparent;
	padding: 0;
	width: auto;
	text-align: left;
	border-radius: 0;
	margin-left: 20px;
	display: none;
}
.navigation .overlay ul .sub-menu li {
	width: auto;
	height: auto;
	min-height: auto;
	display: block;
	background: transparent;
}
.navigation .overlay ul .sub-menu li a {
	display: block;
    width: 95%;
    color: #fff;
    line-height: normal;
    margin: 0 20px;
    padding-top: 0;
}
.navigation .overlay ul .sub-menu li a:hover {
	color: #000 !important;
}

.navbar-default .navbar-nav > li > a {
    padding: 10px;
}

.navigation.two .navbar-default .navbar-nav > li > a {
	line-height: normal;
	margin: 0 0 10px 0;
	padding: 10px;
}

.navigation.three .navbar-default .navbar-nav > li > a {
    padding: 10px; 
}
.navigation.three .navbar-default .navbar-nav > .active > a, .navigation.three .navbar-default .navbar-nav > .active > a:hover, .navigation.three .navbar-default .navbar-nav > li > a:hover {
	color: #4edfb3;
	border-bottom: none;
	margin-bottom: 0;
}
.navigation.three .navbar-nav {
    margin-left: auto;
}
.navigation.three #trigger-overlay {
    left: auto;
    right: 50px;
    margin-left: 0;
}
.blog.two .blog-date, .blog.three .blog-date {
    font-size: 10px;
    letter-spacing: 1px;
}
.blog.two .blog-detail h3, .blog.three .blog-detail h3 {
    font-size: 16px;
    line-height: 18px;
}
.benifit .info h3 {
    margin: 0;
}

.project-inner h3 {
	font-size: 14px;
}
.project-inner p {
	font-size: 12px;
}

.accordion-bg {
    background-position: -210% 120%;
}

.equal-height .padding-left {
	padding: 140px 10% 140px 30px;
}
.equal-height .padding-right {
	padding: 140px 30px 140px 10%;
}

.pricing-block.three h3 {
    margin: 30px 0 10px;
    float: left;
}
.pricing-block .button-inline a {
        padding: 0 20px;
}

.our-skill .equal-height {
    display: block;
}
.our-skill .team-progress-bg {
	display: none;
}
.our-skill .padding-right {
	width: 100%;
}

.navigation.five .navbar-default .navbar-nav > li > a {
    padding: 10px 15px;
}

.post-detail img {
	margin-bottom: 10px;
    display: block;
}

.navigation.six .social-icon {
	width: 100%;
	text-align: center;
}
.overlay ul .sub-menu {
	box-shadow: none;
}
.our-skill .padding-right {
    padding-top: 0;
}
}

/* --------------------------------------
	36.4 MAX WIDTH 991PX
-----------------------------------------*/	
@media only screen and (max-width: 991px) {

.newsletter-form button {
    margin: 20px 0 0;
}
.client-logo {
	width: 25%;
}

h1 {
    font-size: 62px;
    font-size: 6.2rem;
}
.why-choose {
	background: none;
}

.number-block.padding {
	padding: 10px 0 20px 100px;
}

.sm-padding-top-20 {
	padding-top:20px;
}
.md-padding-top-70 {
	padding: 0;
}

.skill-circle-bg {
 	background-image: none; 
}

.padding-lr-25p {
	padding: 0;
}
.padding-lr-20p {
	padding: 0;
}
.benifit .info h3 {
    font-size: 18px;
}
.benifit .info p {
    font-size: 12px;
    margin-top: 10px; 
}

.team-block.three .team-info h3 {
	width: 100%;
}
.team-block.three .team-info {
	position: relative;
	padding-bottom: 60px;
}
.team-block.three .team-info .social-icon {
	width: 100%;
    margin: 20px 0 0 0;
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 30px;
}
.team-block.three .team-info .social-icon li a {
    margin: 0 10px 0 0 ;
}

.blog.two .blog-date, .blog.three .blog-date {
    font-size: 14px;
}
.blog.two .blog-detail h3, .blog.three .blog-detail h3 {
    font-size: 24px;
    line-height: 1.1;
}

.pricing-block .rate {
    font-size: 40px;
}

.pricing-block.two h3 {
    float: left;
    margin: 10px 0 10px 0;
}
}

/* --------------------------------------
	36.5 MAX WIDTH 767PX
-----------------------------------------*/	
@media only screen and (max-width: 767px) {

.xs-margin-top-40 {
	margin-top: 40px;
}
.md-margin-top-180 {
	margin-top: 40px;
}
.header-right, .header-left {
    display: none;
}
.navigation #trigger-overlay, .navigation.mobile #trigger-overlay {
    top: 15px;
    right: 30px;
    left: auto;
    margin-left: -20px;
}
.custom-owl-dots {
    bottom: 115px;
    right: 0;
    top: auto;
    padding: 0;
    width: 100%;
}
.custom-owl-dots li {
	display: inline-block;
}
.scroll-down {
	display: none;
}
h1 {
	font-size: 4.8rem;
	margin-top: 0;
}

.site-info {
	display: none;
}

.equal-height {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

.team-full-width .equal-height {
    margin-right: -15px;
    margin-left: -15px;
}

.padding-left-4p {
    padding-left: 15px;
}

.project-block.twenty, .project-block.forty {
	width: 50%;
}
.team-block.three .team-info h3 {
	width: 50%;
}
.team-block.three .team-info {
	position: relative;
	padding-bottom: 30px;
}
.team-block.three .team-info .social-icon {
	width: 50%;
    margin: 0;
    text-align: right;
    position: static;
}
.team-block.three .team-info .social-icon li a {
    margin: 0 0 0 10px;
}

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

.xs-height-400, .callback-one-bg, .callback-two-bg, .ceo-bg, .about-service-bg, .callback-two-bg, .team-full-width .member-image {
	height: 400px;
}

.pricing-block.two h3, .pricing-block.three h3 {
    float: none;
    margin-top:0;
}

.post-detail img {
    margin-bottom: 0 10px 0 0;
    display: inline-block;
}
.blog-social {
	text-align: left;
	margin-top: 10px;
}

.info-block.icon-left .icon {
    float: none;
    margin-right: 0;
    margin-bottom: 30px;
}

.bottom-right-0 {
    position: static;
    text-align: left;
    margin-top: 30px;
}
.owl-carousel .owl-item img {
    display: inline-block;
    width: auto;
}
.client-logo {
    width: 49%;
}

.comment-block .col-xs-1, .comment-block .col-xs-11 {
	width: 100%;
}
.comment-block .padding-left-50 {
	padding-left: 15px;
    margin-top: 20px;
}
.about-stats .equal-height, .ceo-letter .equal-height, .about-info .equal-height, .services .equal-height {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.equal-height .padding-right {
    padding: 140px 30px 140px 30px;
}
}

/* --------------------------------------
	36.6 MAX WIDTH 480PX
-----------------------------------------*/	
@media only screen and (max-width: 480px) {

.custom-owl-dots {
    bottom: 50px;
}
.number-counters .col-xs-6 {
    width: 100%;
}
.navigation .overlay ul {
    width: 80%;
}
.navigation.three .brand-white {
    width: 40%;
}
.projects.three .project-nav li {
    padding: 10px;
}
.equal-height .padding-left {
    padding: 140px 15px 140px 15px;
}
.equal-height .padding-right {
	padding: 140px 15px 140px 15px;
}
.our-skill .padding-right {
    padding-top: 0;
}
.hero .padding-bottom-140 {
    padding-bottom: 40px;
}
.signature p, .signature em {
	width: 100%;
    float: left;
}
.signature p {
	margin-top: 30px;
}
}

/* --------------------------------------
	36.7 MAX WIDTH 320PX
-----------------------------------------*/	
@media only screen and (max-width: 320px) {

.client-logo {
    width: 99%;
}
.panel-default > .panel-heading a {
    font-size: 14px;
}
.blog.two .blog-detail h3, .blog.three .blog-detail h3 {
    font-size: 18px;
}
.blog.two .blog-detail {
    padding: 30px 30px;
}
.blog.two .blog-date, .blog.three .blog-date {
    font-size: 12px;
}
.team-block.three .team-info .social-icon {
    width: 100%;
    margin: 20px 0 0 0;
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 30px;
}
.team-block.three .team-info h3 {
    width: 100%;
}
.team-block.three .team-info {
    position: relative;
    padding-bottom: 60px;
}
.team-block.three .team-info .social-icon li a {
    margin: 0 10px 0 0;
}
.team-circle-chart {
    float: none;
}
.team-progress-block h2 {
    float: none;
}
.shadow-box {
    padding: 80px 30px;
}
.blog-comment h2 {
	font-size: 24px;
}
.contact-hero .font-22 {
	font-size: 14px;
}
.contact-hero .font-18 {
	font-size: 14px;
}
}