/*

1 - BASE 
2 - PRELOADER 
3 - TRANSITIONS 
4 - HEADER & MAIN NAV - A) Logo
4 - HEADER & MAIN NAV B) Global
4 - HEADER & MAIN NAV - C)HEADER SOCIAL ICONS BACKGROUND
5 - WELCOME
6 - ABOUT US
7 - PAGE TITLE 
8 - RESPONSIVE NAV
9 - REVOLUTION SLIDER & CUSTOM CAPTIONS
10 - VIDEO SLIDER
11 - SERVICES
12 - TEAM
13 - PROCESS 01
14 - RETINA ICONS
15 - SHORTCODES - A) Tabs
15 - SHORTCODES - B) Accordion & Triggers
16 - BLOG - A) Global
16 - BLOG - B) Blog Section  
16 - BLOG - C) Blog Post 
16 - BLOG - D) About the author
16 - BLOG - E) Comments 
17 - BLOG SIDEBAR  A) Global
17 - BLOG SIDEBAR  B) Tag Cloud
17 - BLOG SIDEBAR  C) Categories Widget
18 - PAGINATION
19 - TWITTER FEED
20 - PORTFOLIO A) Global
20 - PORTFOLIO B) two_columns Style 
20 - PORTFOLIO C) four_columns Style
20 - PORTFOLIO D) Isotope
21 - FAQ
22 - PRICING TABLES
23 - CLIENTS
24 - FOOTER
25 - SKILLS
26 - BUTTONS
27 - ICONS 
28 - TESTIMONIALS
29 - PARALLAX SECTIONS
30-  ANIMATIONS
31 - MEDIA QUERIES

*/



@import url("css/skins/blue.css");

/*=================================================
1 - BASE 
=================================================*/

body {
	font-family: 'Open Sans', Helvetica, Arial, "Lucida Grande", sans-serif; 
   	font-size:16px;
   	color: #444444;
   	line-height: 28px;
}

h1,h2,h3,h4,h5,h6 {color:#323232; font-weight: bold;line-height: 25px;}

h1{font-size:24px;}
h2{font-size:19px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}

a {text-decoration: none!important;-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;}

a {color: gray;} a:hover {text-decoration: none;}
a .logo {color: #FFF;} a:hover .logo {font-weight: bold;}

p {margin: 0 0 20px;}

.clear {clear: both;}
.center{text-align: center;}
.bold {font-weight: bold;}
.uppercase {text-transform: uppercase;}

.divider_padding {padding:30px 0px;}
.divider_padding.big {	padding:60px 0px;}
.container-fluid.nopadding {padding:0; margin: 0;}
.divider_padding.small {	padding:15px 0px;}

blockquote {
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	border-left: 5px solid #EEE;
}

img {max-width: 100%;}

blockquote p {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 300;
	line-height: 25px;
}

.right {float: right;}
.left {float: left;}

.section{padding:30px 0px 0px 0px;background-color: #FFFFFF;}
.section.gray{background-color: #f3f3f3;}
.section.nobottom {margin-bottom: 0; padding-bottom: 0;}
.section.notop {margin-bottom: 0; padding-top: 0;}
.hidden {display: none;}

.loading_icon{
	background: #000 url("images/preload.gif") no-repeat center center;
	height:60px;
	width:60px;
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-30px;
	margin-left:-30px;
	display:none;
	z-index: 10000;
	-webkit-border-radius: 	30px;
	-moz-border-radius: 	30px;
	border-radius: 			30px;
	behavior: url(css/PIE.htc);
	opacity: .25;
}

/*=================================================
2 - PRELOADER 
=================================================*/

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color than white */
    z-index:9999; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(images/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}


/*=================================================
3 - TRANSITIONS 
=================================================*/
header {
	-moz-transition:  .15s ease-in-out;
	-webkit-transition:  .15s ease-in-out;
	-o-transition:  .15s ease-in-out;
	-ms-transition:  .15s ease-in-out;
	transition:  .15s ease-in-out;
}



/*=================================================
4 - HEADER & MAIN NAV - A) Logo
=================================================*/

#logo {
	float: left;margin-top: 25px;
}

#logo_dark {display: none;float: left;margin-top: 25px;}
header.small #logo {display: none;}

.logo li a {color:#B8B8B8;}
.logo li.active a, .main_nav li a:hover {color: #FFF;}



/*=================================================
4 - HEADER & MAIN NAV B) Global
=================================================*/


header.small {height: 60px;}
header {
 	position:fixed; 
 	width: 100%;
 	z-index: 999;
	top: 0;
	height: 78px;
	border-bottom: 1px solid rgb(105, 105, 105); /* The Fallback */
	border-bottom: 1px solid rgba(255, 255, 255, .15);
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
 } 

.main_nav {float: right; margin-top: 28px; }
.main_nav li {
	float: left; 
	text-transform: uppercase;
	font-size:13px; 
	margin-right:38px;
	font-weight: bolder;
	z-index: 1;
	list-style: none;
	position: relative;
	display: inline;
}

.main_nav li a {color:#B8B8B8;}
.main_nav li.active a, .main_nav li a:hover {color:white;}

/* SOCIAL NAV */
.social_nav i {color:white;}
.social_nav { float: right;margin-right: -15px;}
.social_nav li {float: left;  }

.social_nav li i {

	padding:28px;
	border-left: 1px solid rgb(105, 105, 105); /* The Fallback */
	border-left: 1px solid rgba(255, 255, 255, .15);
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.social_nav .fa-2x {font-size: 1.5em!important;}



/*=================================================
4 - HEADER & MAIN NAV - C)HEADER SOCIAL ICONS BACKGROUND
=================================================*/

header.small li.twitter_header_icon:hover {background: #32ccfe;} 
header.small li.linkedin_header_icon:hover {background: #008ed3;}

/* White color for Font-Awesome icons when they are hover over in the header under white state */ 

header.white .social_nav li:hover i,
header.small.transparent_menu .social_nav li:hover i,
header.white_menu  .social_nav li i,
.dark_menu.small .social_nav li:hover i,
.transparent_dark_menu.small .social_nav li:hover i

{color:white;} 


/* HEADER SMALL */

header.small .main_nav {margin-top: 18px;}
.small #logo_dark  { display: block; margin-top:15px; width: 130px}
header.small .social_nav li i {padding: 20px;}


/* HEADER STYLE 01: TRANSPARENT TO WHITE  */

.transparent_menu li a {color:#dbdbdb;}
.transparent_menu .social_nav li:hover i {color: #161616;}
.transparent_menu .social_nav li:hover {background: white;}
header.small.transparent_menu {background-color: rgba(255,255,255, 1); border-bottom: 1px solid #F5F5F5;}
header.small.transparent_menu .social_nav i {color:#AFAFAF;}
header.small.transparent_menu li a {color: #B8B8B8;}
header.small.transparent_menu .social_nav .menu_trigger i {color:white;}
header.small.transparent_menu  .main_nav li.active a, header.small.transparent_menu  .main_nav li a:hover {color:#3c3c3c;}


/*=================================================
5 - WELCOME
=================================================*/

#welcome {background-color: #F7F7F7; font-size: 24px; font-weight: lighter; text-align: center; line-height: 40px; padding:100px 0px;}
.welcome-text { width: 78%; text-align: center; margin: 0 auto; margin-top:50px;}


/*=================================================
7 - PAGE TITLE 
=================================================*/
.page_title { margin-bottom:100px;}
.title {font-size:35px!important; text-align: center; text-transform: uppercase; line-height: 45px; letter-spacing: 3px; font-weight: lighter;margin-bottom:15px;}
.page_subtitle {color:#909090; text-align: center; font-size:18px; line-height: 30px; font-weight: lighter;margin: 0; }



/*=================================================
8 - RESPONSIVE NAV
=================================================*/

.responsive_container {
	width: 100%;
position: fixed;
z-index: 100;
}
.mobile_nav_trigger {float: right;
margin-right: -15px;}

.responsive_nav {
margin-top: -1px;

}
.mobileAreaMenu {background: white; width: 100%;margin-top: -10px;}
.menu_trigger {
float: right;
color:white;

}
.menu_trigger i:hover {color:white;}
.menu_trigger i {padding: 24px; color:white;}
.small .menu_trigger i {padding:17px; color:white;}
.menu_trigger, .mobileAreaMenu, .responsive_nav {display: none;}
header.small .mobileAreaMenu li a {color: #555555;}
header.small .mobileAreaMenu li a:hover {color:white;}
.mobileAreaMenu li a {
	
color: #555555;
line-height: 28px;
padding: 10px 0;
border-bottom: 1px solid #EFEFEF;
display: block;
padding-left: 30px;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mobileAreaMenu a:hover{

        color: #fff;
}


.mobileAreaMenu li {
   display: block;
        width: 100%;
        margin: 0;
        padding: 0;
}


/* DARK STYLE */

.mobileAreaMenu.dark_style li a {color: #E0E0E0;border-bottom: 1px solid #414141;}
.mobileAreaMenu.dark_style {background: rgb(50, 50, 50);}

.mobileAreaMenu.dark_style a:hover {color:white;}

/*=================================================
9 - REVOLUTION SLIDER & CUSTOM CAPTIONS
=================================================*/


.cap_style_4 {font-family: 'Raleway',  Arial, Helvetica; color:white; font-size: 55px; font-weight: bold;}
.cap_style_4_subtitle {font-family: 'Ubuntu',  Arial, Helvetica;font-weight: lighter;  color:white; font-size: 24px; text-align: center;}
.cap_style_4_button { padding: 15px 30px;text-transform: uppercase;color: white;letter-spacing: 4px; border:2px solid white; font-size: 14px; font-weight: bold; }
.cap_style_4_button a {color:white;}




/*=================================================
11 - SERVICES
=================================================*/

#service_tab_triggers {margin-bottom:100px!important;}
#service_tab_triggers ul li {display: inline-block;}
#service_tab_triggers li a {margin-right: 20px;}
#service_tab_triggers ul li i {padding:38px; color:white;}
#service_tab_triggers {text-align: center;}
#service_tab_triggers ul li a{float: left;height: 130px; width: 130px; -webkit-border-radius: 	200px;
	-moz-border-radius: 	200px;
	border-radius: 			200px; background: #dcdcdc;}

.service_custom_column {margin: 0 -2px; width: 20%; display: inline-block; text-align: center; padding: 50px; background-color: #F7F7F7; border-top: 1px solid #ECECEC;border-bottom: 1px solid #ECECEC; border-right: 1px solid #ECECEC;}
.service_custom_column h2 {text-transform: uppercase; padding: 10px 0px;}

/* Float Shadow */
.float-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.service_custom_column:hover .float-shadow, .service_custom_column:focus .float-shadow, .service_custom_column:active .float-shadow {
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
  /* move the element up by 5px */
}
.service_custom_column:hover .float-shadow:before, .service_custom_column:focus .float-shadow:before, .service_custom_column:active .float-shadow:before {
  opacity: 1;
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Buzz */
@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.buzz {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz:hover, .buzz:focus, .buzz:active {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/*=================================================
13 - PROCESS 01
=================================================*/

.process_one_wrapper {position: relative;background-color: #F7F7F7;}
.process_image {background-image: url('images/shaymein-ewer-ux-design-side-image.jpg');position: absolute; -webkit-background-size: cover;background-size: cover;height: 100%;width: 35%; right:0;}
.process_item, .process_item_icon_right {border-bottom:1px dashed #d1d1d1;padding: 30px 0px;}
.process_item h3, .process_item_icon_right h3 {margin-bottom: 20px;}
.process_icon { float: left;margin-right: 30px;margin-bottom: 110px;}
.process_item_icon_right { text-align: right;}
.process_item_icon_right .process_icon {float: right;margin-left: 30px;margin-bottom: 110px;}


/*=================================================
15 - SHORTCODES
=================================================*/

/* OVERWRITE BOOTSTRAP DEFAULT STYLE COLOR*/

.alert-success {
	color: #FFFFFF;
	background-color: #2ecc71;

}

.alert-info {
	color: #FFFFFF;
	background-color: #3498db;

}

.alert-danger {
	color: #FFFFFF;
	background-color: #e74c3c;

}

.alert-warning {
	color: #FFFFFF;
	background-color: #f1c40f;
}


.btn {
	display: inline;
	padding: 10px 30px;
	text-transform: uppercase;
	-webkit-border-radius: 	2px;
	-moz-border-radius: 	2px;
	border-radius: 			2px;
	font-size: 13px;
	font-weight: bold;
}

.btn.btn-success {background: #2ecc71; border:none;}
.btn.btn-success:hover {background: #27AE60;}

.btn.btn-danger {background: #e74c3c; border:none;}
.btn.btn-danger:hover {background: #C0392B;}

.btn.btn-warning {background: #f1c40f; border:none;}
.btn.btn-warning:hover {background: #F39C12;}

.btn.btn-info {background: #3498db; border:none;}
.btn.btn-info:hover {background: #2980B9;}

.btn.btn-primary {border:none; color:white;}


.btn.btn-deep {background: #334458; border:none; color:white;}
.btn.btn-deep:hover {background: #3a5168;}


.label-success {  background-color: #2ecc71;}
.label-danger {  background-color: #e74c3c;}
.label-warning {  background-color: #f1c40f;}
.label-info {  background-color: #3498db;}

.label-deep {  background-color: #334458;}


/* UL Styles */

ul.square li { list-style: square;  margin-left: 15px; }
ul.circles li{ list-style: circle; margin-left: 15px; }
ul.disc li { list-style: disc; margin-left: 30px;}

/*
Table Style 
------------------------------------------------------------------ */
table {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:16px;
	text-shadow: 1px 1px 0px #fff;
	background:#eaebec;
	border:#d9d9d9 1px solid;
	width: 100%;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
table th {
	padding:10px 10px 10px 10px;
	border-bottom:1px solid #e0e0e0; 
	background: #ededed;
}
table th:first-child{
	text-align: left;
	padding-left:10px;
}
table tr:first-child th:first-child{
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
	border-right: 1px solid #d9d9d9;
}
table tr:first-child th:last-child{
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table tr{
/* 	text-align: center; */
	padding-left:10px;
}
table tr td:first-child{
	text-align: left;
	padding-left:10px;
	border-left: 0;
}
table tr td {
	padding:16px 10px 10px 16px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td{
	background: white;

}
table tr:last-child td{
	border-bottom:0;
}
table tr:last-child td:first-child{
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}

/*=================================================
15 - SHORTCODES - B) Accordion & Triggers
=================================================*/

h3.trigger, h3.accordion {outline: none;

	background-color:#f9f9f9;
	font-size: 13px;
	padding: 14px 0 15px 0;
	margin:0;
	-moz-transition:background-color 0.5s ease-out;
	-webkit-transition:background-color 0.5s ease-out;
	-o-transition:background-color 0.5s ease-out;
	-ms-transition:background-color 0.5s ease-out;
	transition:background-color 0.5s ease-out;
	border-bottom: 1px solid #e6e6e6;
}

h3.trigger a,h3.accordion a {
	text-decoration: none;
display: block;
font-weight: normal;
padding-left: 30px;
outline: none;
font-size: 14px;
color: #323232;
}

i.fa-minus {display: none;}

.accordion i, .trigger i {margin-right: 20px;
width: 24px;
height: 24px;

padding: 6px; color:white;}


h3.trigger.active i.fa-plus {display:none;}
h3.trigger.active i.fa-minus {display:inline-block;}



h3.accordion.ui-state-active i.fa-plus {display:none;}
h3.accordion.ui-state-active i.fa-minus {display:inline-block;}



.toggle_container, .accordion_container{
border-bottom: 1px solid #e6e6e6;
background: white;
overflow: hidden;outline: none;
}

.toggle_container .block, .accordion_wrap .block{
	padding:10px;
	padding-top:20px;
}

.toggle_container .block {min-height:60px;}

.toggle, .accordion_wrap {border: 1px solid #e6e6e6 ;border-bottom: none;}


#blog {margin-bottom: -8px;} /*FIX FOR THE BLOG BUTTONS MARGIN*/

.wrapper_blog_title {z-index: 100; position: absolute; bottom:20px;}
.wrapper_blog_title, .wrapper_blog_title h2, .wrapper_blog_title a{ color: white;}
.blog-item-home{ height: 500px; background-size:cover;padding: 25px; position: relative; background-position: center;display: inline-table;
width: 100%;}
.blog_buttons {  background:#f0f0f0;}
.read_allnews {text-align: center;padding: 50px;}
.read_next_story { float: right;padding: 50px;}
.read_prev_story{ padding: 50px;}
.read_prev_story i, .read_allnews i {margin-right: 10px;}
.read_next_story i {margin-left: 10px;}


.read_allnews, .read_next_story, .read_prev_story{padding: 30px 10px;text-transform: uppercase; font-weight: bold;margin-top: 10px;}
.read_more:hover { color:white;}
.read_more a:hover{ color: white!important;}
.over_blog {	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: .3;

	background-color:#000000;
	background-size:cover;
	
  	-moz-transition: .45s ease-in-out;
	-webkit-transition: .45s ease-in-out;
	-o-transition: .45s ease-in-out;
	-ms-transition: .45s ease-in-out;
	transition: .45s ease-in-out;}
.blog-item-home:hover .over_blog {opacity: .7	}



/*=================================================
16 - BLOG - B) Blog Section
=================================================*/

.blog_wrapper {padding:70px 0px;}
#blog_header { min-height: 300px;padding-top: 150px;}
.blog_title_heading {margin-top: 20px;}
.blog_title_heading h1 {color: white;
	text-transform: uppercase;
	font-weight: heavy;
	letter-spacing: 2px;
	font-size: 32px;
	display: inline;
	padding: 10px 20px;
}


/*=================================================
16 - BLOG - C) Blog item
=================================================*/
.blog-item {background-color: #ffffff; margin-bottom: 70px;}

.img-container-blog {
min-height: 400px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 30px;
background-position: center;
}

/*=================================================
16 - BLOG - C) Blog Post
=================================================*/

.the-title h1 {line-height: 25px;margin: 15px 0px;}
.the-title h1 a {font-size: 24px; color: #323232;}
.blog-item.blog-post { margin-bottom: 0;}
.blog-item .metas {
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 20px;
}
.the-title {margin: 25px 0px 0px 0px;}
.blog-item .metas .the-comments a, .blog-item .metas .the-date a, .blog-item .metas .the-author a {
	background-repeat: no-repeat;
	float: left;
	margin-bottom: 15px;
	color: #9da0a4;
	margin-right: 20px;
	font-size: 13px;
}

.metas .the-date i, .metas .the-author i, .metas .the-comments i  {padding-right:8px; color:#363636;}
.read_more_small img {margin-top:5px; }
.read_more_small {
	background: #9da0a4;	
	-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
	padding: 0px 7px;
	margin-top: 4px;
	float: right;
}
.read_more_small i {color: white;}
.blog-boddy {
	border-bottom: 1px solid #ECECEC;
	padding-bottom: 30px;
}
.used_tags span {font-weight: bold}
.used_tags {font-size: 12px; }
.used_tags span, .used_tags li {float: left; margin-right:10px;}


/*=================================================
16 - BLOG - D) About the author
=================================================*/

.about_the_author {
	background-color: rgb(241, 241, 241);
	margin-top: 30px;
	padding: 30px;
	border: 1px solid rgb(233, 233, 233);
}
.author_avatar {width: 100px;
	height: 100px;
	background-size: cover;
	float: left;
	margin-right: 30px;
}
.about_the_author h4 {display: inline;}
.about_the_author  p {font-size: 13px;
line-height: 24px;margin-bottom: 0;}


/*=================================================
19 - TWITTER FEED
=================================================*/
.tweet .date {font-size: 12px;}
.tweet li {display: inline-block;margin-bottom: 20px;}
.tweet li img {-webkit-border-radius: 	50px;
	-moz-border-radius: 	50px;
	border-radius: 			50px;
margin-bottom: 40px;
float: left;
margin-right: 15px;}
.tweet ul {margin-bottom: 0;}


/*=================================================
22 - PRICING TABLES
=================================================*/
.pricing-table {border:1px solid #e9e9e9}
.pricing-table .pricing_header {background-color: white; }
.pricing-table .pricing_sub_header {background-color: #f7f9fc;border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;}
.pricing-table .pricing_header h4 {margin-bottom: 0;margin-top: 0;
color: black;
padding: 10px 0px;
text-align: center;
font-size: 16px;
text-transform: uppercase;}
.pricing-table .pricing_sub_header {color: #000000; text-align: center; margin: 0;padding: 10px 0px 10px 0px; font-size: 14px; line-height:16px;}

.pricing-table .pricing_sub_header span {font-size: 14px;
font-weight: lighter;
color: #a4a4a4;
margin-left: 5px;}
.pricing-table .features p {padding:15px; text-align: center; background-color: #fff;border-bottom: 1px solid #e9e9e9;color: #a4a4a4;font-size: 13px; margin-bottom: 0;}

.pricing_footer {-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;background-color: #f9fbfc;  border-top:0;padding:30px 0px; text-align: center;}
.pricing_footer h3 {margin: 0; color:white; text-align: center;}
.pricing_footer h3 a {color:#a4a4a4;}
.pricing_button {background: #3fd7ee;
display: inline;
padding: 10px 30px;
text-transform: uppercase;
border-radius: 2px;
font-size: 12px;
color:white;
font-weight: bold;}
.pricing_button:hover {color:white; background-color: #00CCEB;}


/*=================================================
23 - CLIENTS
=================================================*/
.clients_list {margin: 0; text-align: center;}
.clients_list li {width: 33.3%;
background-color: #ffffff;
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
float: left;
display: inline-block;
height: 200px;}
.clients_list li img {position: relative; top: 30%;}

/*=================================================
24 - FOOTER
=================================================*/

#footer {background-color: #141414; color:#676767;}
.footer_icon li {float: left;
background: #212121;
border-radius: 200px;
height: 45px;
width: 45px;
margin-right: 12px;
-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;

}
.footer_icon li i {padding: 13px; color:#575757; font-size: 1.5em;}
.footer_adress i {margin-right:20px;}
.footer_adress li {margin-bottom: 10px;}
.footer_icon li:hover {background-color: white;}
.footer_icon li:hover i {color: #161616;}
.col_footer{float: left;
width: 33.32%;
padding: 40px 40px 0px 40px;

min-height: 620px;
padding-bottom: 0;}
.col_footer.middle {border-right: 1px solid #242424;border-left: 1px solid #242424;}
.footer_logo { float: left; padding: 0px 30px 0px 0px;}
#footer h2 {color: white;
text-transform: uppercase; margin-bottom: 30px;}

#subfooter { background-color: #141414; border-top: 1px solid #242424; font-size: 12px; padding: 20px 15px; color: #414141;}
#subfooter a { font-weight: bold;}
.by_author {float: right;}
.copyright {float: left;}

#footer a {color:#c4c4c4;}

#footer input, #footer textarea {background-color: #141414; border:1px solid #272727;outline: none;width: 100%; margin-bottom:10px; padding:10px 10px; font-size: 12px; font-weight: bold;}
#footer .submit_buttom {color:white; }


/*=================================================
26 - BUTTONS
=================================================*/


/* BUTTON READ MORE WHITE */

.read_more {border: 2px solid white;
display: inline-flex;
padding: 8px 30px;
margin: 10px 0px;
-moz-transition: .15s ease-in-out;
-webkit-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
-ms-transition: .15s ease-in-out;
transition: .15s ease-in-out;text-transform: uppercase; font-weight: bold; letter-spacing: 2px; font-size: 14px;}

/* BUTTON READ MORE BLACK */

.read_more.black {border: 2px solid #CECECE; }
.read_more.black a { color: #b7b7b7;}
.read_more.black:hover a {color: white;}


/*=================================================
28 - TESTIMONIALS
=================================================*/

.testimonials_heading .parallax_heading{margin-top:80px;} /* FIX FOR PUSH THE TESTIMONIALS CONTENT DOWN*/
.testimonials_text {font-weight: lighter; font-size: 24px; color: white; line-height: 40px;}
.testimonials_name {font-weight: bold;margin-top: 10px;margin-bottom: 0;}



/*=================================================
29 - PARALLAX SECTIONS
=================================================*/
.parallax_heading { margin-bottom: 50px;}
.parallax_over.nobottom {padding:0; padding-top:80px;}
.parallax_heading h2 {color:white; font-size: 35px; text-transform: uppercase; line-height: 35px;}
.parallax_subtitle {color:white; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; padding:10px 0px;}
.parallax {/* min-height: 650px; */ position: relative; color:white; text-align: center; background-size:cover; background-attachment:fixed;}
.parallax_over {height: 100%;
background-color: rgba(153,148,146,.25);

width: 100%;
overflow: hidden;
padding: 100px 0px;}
.parallax_content_wrapper {padding: 80px 0px;}
.feature_item h3 {color:white;}
.feature_item {text-align: left; margin-bottom: 40px;}
.feature_item i{border: 3px solid white;
width: 50px;
height: 50px;

-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 		100px;
float: left;
padding: 14px;
padding-top: 15px;
margin-right: 20px;
margin-bottom: 40px;}


/*=================================================
30 - ANIMATIONS
=================================================*/

.animated { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .zoomIn, .bounce, .fadeIn { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }



/*=================================================
31 - MEDIA QUERIES
=================================================*/

/* QUERIES FROM 1920px TO 1620px */

@media only screen and (min-width: 1620px) and (max-width: 1920px) {



}



/* QUERIES FROM 1620px TO 1200px */

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

.grid .portfolio-item {height: 350px;}
.grid .portfolio-item p {padding:0;}
.grid .portfolio-item h2 { font-size: 26px;}
.grid .portfolio-item.effect {padding: 14px; }
.portfolio-item div.figcaption > span {margin-top: -4px;}
.grid .portfolio-item.effect div.figcaption { height: 55px;padding-top: 10px;}
.service_custom_column {width: 33.3%;}
.team_item {height: 380px}
.team_description {bottom: -5px;padding-left: 15px;}
.team_description h2 {font-size: 25px;letter-spacing: 0;}
.team_description .job { font-size: 16px;}
.video_caption {top:300px;}

}

/* QUERIES FROM 1200px TO 992px */

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

.grid .portfolio-item {height: 300px;}
.grid .portfolio-item p {padding: 10px;font-size: 15px;margin-left: -20px;bottom: 105px;}
.grid .portfolio-item h2 { font-size: 20px;}
.portfolio-item div.figcaption > span {margin-top: -3px;}
.grid .portfolio-item.effect div.figcaption { height: 50px;padding-top: 5px;}
.grid  .portfolio-item div.figcaption span i {padding: 8px;font-size: 16px;}
.grid.two_columns .portfolio-item {height: 450px;}
.grid.two_columns .portfolio-item p {top: -220px;}
.menu_trigger {display: block;}
.main_nav {display: none;}
.responsive_nav {display: block;}
.social_nav { margin-right: 0;}
.service_custom_column {width: 33.3%;}
.about_content {padding: 30px;}

.team_item {width: 50%;}
.section {padding: 30px 0px;}
.process_item_icon_right .process_icon {margin-left: 30px;margin-bottom: 0;}
.process_item .process_icon {margin-left: 30px;margin-bottom: 0;}
.process_item_icon_right p {display: inline-block; margin-top:10px;}
.process_item p {display: inline-block; margin-top:10px;}
.testimonials_heading .parallax_heading {margin-top: 40px;}
.video_caption {top:200px;}


}



/* QUERIES FROM 992px TO 768px */

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.about_content {padding: 10px;}
.menu_trigger {display: block;}
.main_nav {display: none;}
.responsive_nav {display: block;}
.social_nav { margin-right: 0;}
.service_custom_column {width: 50%;}
.about_image {display: none;}
.team_item {width: 50%;}
.process_image { display: none;}
#service_tab_triggers ul li i {font-size: 40px;padding: 0;margin-top: 30px;}
#service_tab_triggers ul li a {height: 100px;width: 100px;}
.service_wrapper.style2 h1 {line-height: 35px;font-size: 22px;}
#video_parallax { height: 450px;}
#faq h3 {margin-top:50px;}
.faq_icons {margin-top: -20px;}
.blog-item-home {height: 400px;}
.feature_item {text-align: center;margin-bottom: 0;}
.feature_item i {margin-right: 0;margin-bottom: 10px;margin-top: 30px;float:none;}
.testimonials_heading .parallax_heading {margin-top: 40px;}
#colums_triggers{display: none;}
.video_caption {top:100px;}


.pricing-table {margin-top: 30px;}
.parallax_heading h2 {font-size: 25px;}
.parallax .picture {display: none;}

/* FOOTER */
.col_footer.middle {border-top: 1px solid #242424;border-bottom: 1px solid #242424;}
.col_footer {width: 100%;}

}

	
/* QUERIES FROM 767px TO 480px */

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



header {height: 59px;}
#logo {margin-top: 15px;}
.menu_trigger i {padding: 14px;}
.menu_trigger {display: block;}
.main_nav {display: none;}
.responsive_nav {display: block;}
.service_custom_column {width: 100%;padding: 30px;}
.about_image {display: none;}
.team_item {width: 100%;}
.social_nav { display:none;}
#welcome {padding: 50px 0px;width: 100%;margin-top: 30px;font-size: 18px;line-height: 30px;}
.title {font-size: 25px!important;line-height: 35px;letter-spacing: 0;margin-bottom: 10px;}
.section {padding: 60px 0px;}
.page_title {margin-bottom: 50px;}
.about_content {padding:20px 0;}
#service_tab_triggers ul li i {font-size: 30px;padding: 0;margin-top: 27px;}
#service_tab_triggers ul li a {height: 80px;width: 80px;}
#service_tab_triggers{margin-bottom: 0!important;}
#service_tab_triggers li a {margin-right: 10px;}
.process_image { display: none;}
.service_wrapper.style2 h1 {line-height: 35px;font-size: 22px;}
.service_wrapper.style4 .icon_wrapper {padding-bottom: 70px;}
.pricing-table {margin-top: 30px;}
.testimonials_heading .parallax_heading {margin-top: 0;}
.testimonials_text {font-size: 18px;line-height: 30px;}
.parallax_over{padding:50px 0px;}
#video_parallax { height: 400px;}
.blog-item-home {height: 350px;}
.service_wrapper.style4 .icon_wrapper { margin-left: 0;}
.feature_item {text-align: center;margin-bottom: 0;}
.feature_item i {margin-right: 0;margin-bottom: 10px;margin-top: 30px;float:none;}
#colums_triggers{display: none;}

/* FOOTER */
.col_footer.middle {border-top: 1px solid #242424;border-bottom: 1px solid #242424;}
.col_footer {width: 100%;}
.footer_icon li {margin-bottom:10px;}

.parallax_heading h2 {font-size: 25px;}
.parallax .picture {display: none;}


/*VIDEO STYLE CAPTIONS */
.video_caption {top:150px; width:300px; margin-left:-150px;}
.video_text_small { font-size:25px;padding: 10px 0px;	}
.video_text_big {font-size:40px;padding: 0px 0px 10px 0px;}
.custom_button a.video {margin-left: 0;}
.video_logo {padding: 0;}


}


/* QUERIES FROM 480px and less than 480px */

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

header {height: 59px;}
#logo {margin-top: 15px;}
.menu_trigger i {padding: 14px;}
.menu_trigger {display: block;}
.main_nav {display: none;}
.responsive_nav {display: block;}
.about_image {display: none;}
.service_custom_column {width: 100%;}
.team_item {width: 100%; height: 280px}
.about_content {padding:20px 0;}
#welcome {padding: 50px 0px;width: 100%;margin-top: 30px;font-size: 18px;line-height: 30px;}
.title {font-size: 25px!important;line-height: 35px;letter-spacing: 0;margin-bottom: 10px;}
.section {padding: 60px 0px;}
.page_title {margin-bottom: 50px;}
.service_wrapper.style2 h1 {line-height: 35px;font-size: 22px;}
#service_tab_triggers ul li i {font-size: 30px;padding: 0;margin-top: 27px;}
#service_tab_triggers ul li a {height: 80px;width: 80px;}
#service_tab_triggers{margin-bottom: 0!important;}
#service_tab_triggers li a {margin-right: 10px;}
.process_image { display: none;}
.social_nav { display:none;}
.pricing-table {margin-top: 30px;}
#video_parallax { height: 350px;}
.service_wrapper.style4 .icon_wrapper { margin-left: 0;}
.blog-item-home {height: 300px;}
.testimonials_heading .parallax_heading {margin-top: 0;}
.testimonials_text {font-size: 16px;line-height: 30px;}
.parallax_over{padding:40px 0px;}
.parallax_heading h2 {font-size: 25px;}
.parallax .picture {display: none;}

.feature_item {text-align: center;margin-bottom: 0;}
.feature_item i {margin-right: 0;margin-bottom: 10px;margin-top: 30px;float:none;}
#colums_triggers{display: none;}

.copyright {float: none;text-align: center;}
.by_author {text-align: center;float: none;}

/* FOOTER */
.col_footer.middle {border-top: 1px solid #242424;border-bottom: 1px solid #242424;}
.col_footer {width: 100%;}
.footer_icon li {margin-bottom:10px;}

}