/*
Theme Name: MetroDir - Child Theme
Theme URI: http://uouapps.com/wp/metrodir
Author: UOU apps
Author URI: http://uouapps.com
Description: MetroDir (Desktop, tablet, mobile phone and other device)
Version: 1.0
License: GNU General Public License
Template: metrodir
*/

@import url('../metrodir/style.css');

/**
 * Place Custom CSS Below this.
 */
div#navigation div#main-menu {
    float: right;
    display: none;
}
div#user-links-panel{
  background:none !important;
  height: 10px !important;
    margin-bottom: 10px !important;
}

   .home section.no-rtl,
  .page-id-2121 section.no-rtl {
    border-top: 1px solid #e5e5e5;
} 
	
.page-id-2121 div#visual-composer-inner {
    padding-bottom: 120px;
}
.social-links{
  float:right;
	}

.social_icon{
  pading-bottom:5px;
  margin-bottom:5px;
  }
div#copyright {
   height: 41px !important; 
    min-width: 960px;
    padding-top: 6px;
}
div#header {
    padding: 0px 0px 0px !important;
      display: none;
}


ul#mixitupitems li {
	height:160px;
	width:180px;
	margin:5px;
	display:none;
	overflow:hidden;
} 


ul#mixitupitems li a span.name {
    bottom: 15px !important;
    line-height: 20px !important;
    overflow: hidden;
    padding: 0 15px;
    position: absolute !important;
    /*width: 100% !important;*/
    top: 69px !important;
    left: 0 !important;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
}


section.no-rtl div#categories ul#mixitupitems li a i {
    left: 2px;
    top: 66px;
    font-size: 85px;
    opacity: 0.1;
  right:0;
}
div#map-wrapper {
    display: none;
}
.industries-tabs{
  display: none;
	}
	
#custom-block .title{
	  display:none;
	}
div#breadcrumbs {
    
    display: none !important;
}
	#company-page-map{
  display:none !important;
		}

div#categories ul#mixitupitems li  a, div#categories ul#mixitupitems li a {
    background: #09c !important;
	width:100%;
	height:100%;
	display:block;
	color:#fff;
	border-radius: 5px;
    -webkit-border-radius: 5px;
	overflow:hidden;
}


div#welcome div.welcome-left {
    width:250px !important;
}
div#welcome div.welcome-right {
    float: left;
    padding: 18px 0 18px 50px;
    width: 100% !important;
    max-width: 400px !important;
    border-left: 1px solid #ddd;
    margin-left: 20px;
}
div#welcome div.welcome-left img {
    width: 220px;
    margin-top: 22px;
}
div#subscribe {
    display: none;
}

div#copyright { 
    background: #292929 none repeat scroll 0% 0% !important;
    border-top: 1px solid #444;
}
div#copyright div.copyright-text {
  color:#777;
}

div#footer div.block div.title h3 {font-weight:bold;    color: #888;}
 
div#content-center, div.content-center {
	width:580px;
}
div.company-listing-body {
	width:400px;
}
div.company-listing-text {
    height: 60px;
    margin: 15px 0 5px;
}
div.company-listing {
    border-top: 1px solid #eaeaea;
  border-bottom:none !important;
}
.all_products_page .company-listing {
    float: left;
    height: 100% !important;
}


.all_cat_title {
    padding: 40px 0 20px 0 !important;
}

div#categories ul li.cat-item {
    float: left;
    width: 180px;
    height: 160px;
    margin: 5px;
}
div#categories ul li.cat-item a  {
    display: block;
    width: 180px;
    height: 160px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;background: #0098CF;
    color: #ffffff;
}

div#company-page-photo div {
    width: 100%;
}
div#content-inner.company-single div#content-center {
    padding: 40px 0 60px 0;
}
.blue-link {color:#267aac !important;}
.blue-link:hover {color:rgba(38,122,172,0.6) !important;}

.filter-group-box {display:inline-block;margin:10px 0 15px;border-radius:3px;-webkit-border-radius:3px;}
.bc_random_banner a img {width:100%;}
.text-center {text-align:center;}

.filter, .sort {
	display: inline-block;
    padding: 1px 19px 3px;
    background: white;
    color: #000;
    cursor: pointer;
    margin-bottom: 3px;
    border-radius: 25px;
    -webkit-border-radius: 4px;
    border: 1px solid #09c;
    line-height: 27px;
    margin-right: 6px;
}
.filter:hover, .sort:hover{ background:#09c;color:#fff;}
.filter.active {background:#09c;color:#fff;}

#mixitupitems.companies-list-layout li a{width:100% !important;}
#mixitupitems.companies-list-layout li {display:block !important;width:100% !important;}


#ChangeLayout {line-height: 30px;margin-bottom: 3px;margin-left: 30px;}
/* CSS Method for adding Font Awesome Chevron Icons */
#ChangeLayout i:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f0c9";
    float: right;
    color: inherit;
}
#ChangeLayout.toggled i:after {
    /* symbol for "collapsed" panels */
    content:"\f009";
}

#ChangeLayout > i {
    color: #0091c6;
    font-size: 37px;
    font-style: initial !important;
	cursor:pointer;
}
#ChangeLayout > i:hover {color:#0380AD;}

.featured-resource-item {text-align:center;}

.featured-resource-item img,
div.company-page-thumabnail img{
    border-radius: 10px;
    -webkit-border-radius: 10px;
}

.vc_row-fluid.inline-row {display:inline-block;width:33%;}

.featured-resource-heading {
  font-size: 17px;
    font-weight: 400;
    margin: 40px 0 30px;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-align: center;
    background: #f5f5f5;
    padding: 10px 0;
}
div.company-page-social {
	background:none !important;
}

@media (max-width:768px) {
	.vc_row-fluid.inline-row {display:inline-block;width:48%;}	
}

@media (max-width:700px) {
	.vc_row-fluid.inline-row {display:inline-block;width:100%;}	
}

#sidebar .block-title, #sidebar .title {margin-bottom:20px;}
div#sidebar > div.widget.widget_random_banner_widget {margin:0;}

div#sidebar div.title.featured-sidebar-title {margin-top:40px !important;}

/*
div#welcome {background:#3b96d2 !important;border-bottom:1px solid #0570b2 !important;}

div#welcome, div#custom-home-block {padding:70px 0;}

div#welcome div.welcome-text {
    color: #fff !important;
    font-size: 1.3em;
    line-height: 20px;
    padding: 5px 0;
    text-align: center;
    text-shadow: 3px 2px 3px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}


div#welcome div.welcome-left {
    position: absolute;
    top: 35px;
}

#header-xs-logo {display:none;text-align:center;margin-bottom:20px;}

*/

.social-links {margin-bottom:10px;}

@media only screen and (max-width: 479px) {
	/*#header-xs-logo {display:block;}
	div#welcome, div#custom-home-block {padding:40px 0;}*/
	.social-links {margin-bottom:0;}
	.kickbooster-brand-bar,
	.filter-group-box{ display:none !important;}
	div#welcome div.welcome-left,
	div#welcome div.welcome-right{ display:block !important;width: 100% !important;max-width:100% !important;}
	div#welcome div.welcome-right { border:none;margin:-10px 0 0 0;}
	div#welcome div.welcome-left img {width: 100%; margin: 10px auto 0;}
}

.fb_iframe_widget {margin-top:0 !important;}

#copyright .fb_iframe_widget {margin-top:8px !important;}

div#footer {
  background: #333 !important;
    padding: 20px 0;
}

div#footer div.block {width:214px;}


/*
Make long shadows
@param {Number} $num [1] - number of shadows to make
@param {Color} $color [white] - color of shadows
*/
@function longshadow($num,$color: white){
  $shadow: '';
  $i: 0;
  @for $i from 1 through $num{
    $shadow: $shadow + (1 * $i) + 'px' + ' ' + (1 * ($i * 2)) + 'px' + ' ' + $color;
    @if $i < $num{
      $shadow: $shadow + ', ';
    }
  }
  @return unquote($shadow);
}

@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

$key: #55A4E9;

/*
#welcome{
  display: flex;
  height: 100%;
  background-color: $key;
}
*/

.word{
  margin: auto;
  color: white;
  font: 700 normal 4em/1.5 'Montserrat',sans-serif;
  text-shadow: longshadow(10,darken($key,10%));
}

.btn-2 {
  background-color: #e74c3c !important;
}
.btn-2 .round {
  background-color: #C33122 !important;
}


a.btn-rounded {
  text-decoration: none !important;
  -moz-border-radius: 30px !important;
  -webkit-border-radius: 30px !important;
  border-radius: 30px !important;
  padding: 12px 53px 12px 23px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  font-family: sans-serif !important;
  font-weight: bold !important;
  position: relative !important;
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  -webkit-transition: all 0.3s !important;
  transition: all 0.3s !important;
  display: inline-block !important;
}
a.btn-rounded span {
  position: relative !important;
  z-index: 3 !important;
}
a.btn-rounded .round {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  position: absolute !important;
  right: 3px !important;
  top: 3px !important;
  -moz-transition: all 0.3s ease-out !important;
  -o-transition: all 0.3s ease-out !important;
  -webkit-transition: all 0.3s ease-out !important;
  transition: all 0.3s ease-out !important;
  z-index: 2 !important;
}
a.btn-rounded .round i {
  position: absolute !important;
  top: 30% !important;
  margin-top: -6px !important;
  left: 50% !important;
  margin-left: -4px !important;
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  -webkit-transition: all 0.3s !important;
  transition: all 0.3s !important;
}

a.btn-rounded .txt {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.company-page-body a.btn-rounded:hover {
  padding-left: 48px !important;
  padding-right: 28px !important;
}
.company-page-body a.btn-rounded:hover .round {
  width: calc(100% - 6px) !important;
  -moz-border-radius: 30px !important;
  -webkit-border-radius: 30px !important;
  border-radius: 30px !important;
}
.company-page-body a.btn-rounded:hover .round i {
  left: 12% !important;
}

.info-3d-box i {
    color: #fff;
    font-size: 75px;
    text-align: center;
    top: 50%;
    position: relative;
    margin-top: -20px;
}

ul#mixitupitems li {width:176px;vertical-align:text-top;}

div#categories ul.categories-menu.companies-list-layout li.categories-menu-item {
	height:50px !important;
  width: 32% !important;
    display: inline-block !important;
}
div#categories ul.categories-menu.companies-list-layout  li a span.name {
  top:15px !important;
}
div#categories ul.categories-menu.companies-list-layout li a i {
  font-size:40px !important;;
  top:10px !important;;
}

div#categories {
    padding:20px 0 35px 0;
}

/*.box-container {width:100% !important;max-width:960px;}*/

.container-big-width.box-container {width:100% !important;max-width:960px;}

@media (max-width:1040px) {
	ul#mixitupitems li {width:175px;}
}
@media (max-width:945px) {
	ul#mixitupitems li {width:160px;height:150px;}
}

#featured-top-banner {
    text-align: center;
  	width:85%;  
  	max-width: 950px;
    margin: 35px auto;
  
}

#featured-top-banner a {
	display:block;
	color: #fff;
	font-weight:500;
	outline:none;
    padding: 15px 0;
  	background: #e74c3c;
    border-radius: 4px;
}
#featured-top-banner a:hover {
  background: #DC4636;
}

#featured-top-banner a span {
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
	line-height:25px;
}

#featured-top-banner a:hover > span::after {
	background-image: url("button_back_arrow.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: auto 20px;
    width: 24px;
	 content: "";
    display: inline-block;
    height: 15px;
    margin-bottom: -2px;
    margin-top: 0;
    transition: width 0.5s ease 0s;
}


div.company-listing-image img {
    width: 135px !important;
    height: 135px !important;
    border-radius: 10px;
	-webkit-border-radius:10px;
}

/*div#welcome div.welcome-right {padding:15px 30px !important;width:auto !important;}*/

@media (max-width:768px) {
	/*div#welcome div.welcome-right {padding:0 0 0 30px !important;}*/
}

@media (max-width:479px) {
	.container-big-width.box-container .welcome-right {width:100% !important;text-align:center !important;}
}

.adkingprobanner.akpbanner a img{width:100%;}

.adkingprobanner.ad-campaign.akpbanner{margin-top:0 !important;}

.featured-box {
  width: 200px; height: 300px;
  position: relative;
  border: none;
  background: transparent;
}
.ribbon {
  position: absolute;
  right: 0; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#E74C3C 0%, #E74C3C 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #E74C3C;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #E74C3C;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #E74C3C;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #E74C3C;
}


/*============================================================================
#Kickbooster Brand Bar
==============================================================================*/
.kickbooster-brand-bar {
  height:25px;
  background:#333;
}

.kickbooster-brand-bar img {
	height:19px;
}
.kickbooster-brand-bar li {
	height: 25px;
  float:left;
}
.kickbooster-brand-bar li:first-child {
	border-left: 1px solid #191919 ;
}
.kickbooster-brand-bar li:last-child {
	border-right: 1px solid #494949;
}
.kickbooster-brand-bar a {
  line-height: 24px;
    height: 25px;
    display: inline-block;
    z-index: 99;
    float: left;
    padding: 0 25px;
    border-right: 1px solid #191919 ;
    border-left: 1px solid #494949;
  color:#999;
  font-size: 12px;
  font-weight: 300;
}
.kickbooster-brand-bar a strong {
  color:#999;
}
.kickbooster-brand-bar a:hover {
  color:#eee;
}
.kickbooster-brand-bar a.active strong,
.kickbooster-brand-bar a:hover strong{
  color:#e1e1e1;
}
.kickbooster-brand-bar a.active {
	position: relative;
	background: #333333;
  	color:#e1e1e1;
}
.kickbooster-brand-bar a.active:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 51, 51, 0);
	border-top-color: #333333;
	border-width: 5px;
	margin-left: -5px;
}

/***** i recommend **********/
.i-recommend-inline {margin-left:20px;display:inline;}
.i-recommend-inline a.dot-irecommendthis{line-height:19px;}

.i-recommend-box { line-height: 20px;padding: 25px 0 15px;}

.top-social-links-box .twitter, .top-social-links-box .fb-like {float:right;}

span.category-tag::before {
    background: transparent;
    color: #fff;
    content: "\f005";
    font-family: 'FontAwesome';
    left: 15px;
    position: absolute;
    top: 13px;
	font-size:19px;
}

a.taggable-category::before {
	content:"";
    position:absolute;
    top:0;
    left:0;
    width: 0; 
    height: 0; 
    border-top: 75px solid #086787; 
    border-right: 75px solid transparent;
	border-radius:0;
	-webkit-border-radius:0;
}
span.category-tag-text {display:none;text-align:center;}

.taggable-category:hover::before {
    background:rgba(8,103,135, 0.9) none repeat scroll 0 0;
    height: 60px;
    width: 100%;
	border:none;
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
	z-index:9999999;
}
.taggable-category:hover > span.category-tag::before {display:none;}

.taggable-category:hover::before {
	display:none;
}

.taggable-category:hover > span.category-tag-text {background: rgba(8, 103, 135, 0.8) none repeat scroll 0 0;display: block;font-size: 15px;font-weight: bold;padding: 15px 2px;width: 100%;position:absolute;z-index:9999;}