/*!
 * Theme Name: 		Materia by Digital Nomads Hong Kong
 * Theme URI: 		https://oceanwp.org/
 * Author: 			Digital Nomads Hong Kong
 * Author URI: 		https://www.digitalnomadshk.com/
 * Description: 	This is a permutation of the OceanWP theme, distributed under GPL license.
 * Version: 		1.0
 * Template: 		oceanwp
 *
 * License: GNU General Public License v3.0 or later
 * License URI: https://www.gnu.org/licenses/gpl-3.0.html
 */

 /* Parent stylesheet should be loaded from functions.php not using @import */

/* Color Palette Reference:
** Text #111111
** Main Background: #ffffff
** Accent Color darker:  #0a7a9e
** Accent Color lighter: #13aff0
** Button background: #0eb2e7
** Butto background on hover: #0a7a9e
*/


/*******************************************************************
* [Start] -> Font Face import if not suing web fonts or Google Fonts
*******************************************************************/

/* Using ttf, woff and woff2 to allow for a larger browser compatibility */
@font-face {
	
	font-family: kollektif;
	src: url('fonts/Kollektif.woff2') format('woff2'),
         url('fonts/Kollektif.woff') format('woff'),
         url('fonts/Kollektif.ttf') format('truetype');
/* 	font-display: swap; */
}

/***********************************/
/* [End] -> the @font face section */
/***********************************/



/******************************************************
* [Start] -> Main Elements Design - set at global level
******************************************************/
/* Removed elements */
/*.wpb_column.vc_column_container.vc_col-sm-12{
	padding:50px 0px !important;
}
#header-page-desktop > div{
	background-color:rgba(0,0,0,0.7) !important;
}*/
.vc_column-inner{
	padding:0px !important;
}
body {

	font-family: kollektif;
	color: #111;
	background-color: white;
	cursor: auto;
	font-size: 18px;
    -webkit-font-smoothing: antialiased;

}

a {

	color: #0a7a9e;
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;

}

a:hover {

	color: #13aff0;
}

input[type="checkbox"] {

	margin-right: 2px; /* This removes the excessive space between the checkbox and the text next to it */

}

/* To style the scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(19,175,240,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(19,175,240,0.4); 
}

/* To style the scroll top idle */
#scroll-top {

	background-color: rgba(19,175,240,0.4);

}

/* To style the scroll top on hover */
#scroll-top:hover {

    background: rgba(19,175,240,0.8); 

}

.grecaptcha-badge { 
    visibility: hidden;
}
/**********************************/
/* [End] -> Main Elements Styling */
/**********************************/



/**************************
* [Start] -> #footer design
**************************/

/* To style the footer */
#footer {

	background-color: #111;
	font-size: 15px;
}

/* To style the widgets container area */
#footer-widgets {

	background-color: #111;
	color: #fff;

}

/* To style the first line of the footer (call-to-action) */
#footer-call-to-action-row {

	padding-bottom: 10px;

}

/* To style the first column (consult-row) of the first line of the footer (call-to-action) */
#footer-consult-row {

	display: block;
	background-color: #0a7a9e;
	padding-top: 5px;
    margin-top: -30px;
    font-weight: bold;
  	transition: 0.3s;
  	transition-timing-function:  linear;

}

/* To style the hover effects of inner rows of of the first line of the footer (call-to-action) */
#footer-consult-row:hover,
#footer-phone-row:hover,
 #footer-newsletter-row:hover {

	background-color: #13aff0;

}

/* To style the second column (phone row) of the first line of the footer (call-to-action) */
#footer-phone-row {

	display: block;
	background-color: #034A61;
	padding-top: 5px;
    margin-top: -30px;
    font-weight: bold;
  	transition: 0.3s;
  	transition-timing-function:  linear;

}

/* To style the third column (newsletter-row) of the first line of the footer (call-to-action) */
#footer-newsletter-row {

	display: block;
	background-color: #2C87A5;
	padding-top: 5px;
    margin-top: -30px;
    font-weight: bold;
  	transition: 0.3s;
  	transition-timing-function:  linear;

}

/* To style the the text within the inner elements of the first row (call-to-action) */
#footer-consult-row p a,
#footer-phone-row p a,
 #footer-newsletter-row p a {

 	color: #fff;
 }

/* To style the social icons in the footer */
#footer-social-row {
	background-color: #111111;
	font-size: 25px;
	margin-top: -30px;
}

/* To style the social icons links in the footer */
#footer-social-row p a {
	margin: 0 10px;
	color: #fff;
}

/* To style the social icons links on hover in the footer */
#footer-social-row p a:hover {

	color: #13aff0;
}

/* To style the list container for the sitemap */
#menu-sitemap {

	list-style: none;
	margin-top: -15px;
	margin-left: 20px;

}

/* To style the individual li items in the list container for the sitemap */
#menu-sitemap>li {

		border-bottom: none;
		border-top: none;

}

/* To style the individual li>a items in the list container for the sitemap */
#menu-sitemap>li>a {

	color: #fff;

}

/* To style the individual li>a:hover items in the list container for the sitemap */
#menu-sitemap>li>a:hover {

	color: #13aff0;

}

/* To style the contacts list outer item (ul) */
#footer-contacts-row ul {

	list-style: none;


}

/* To style the contacts list inner item (li) */
#footer-contacts-row ul>li {

	padding-top: 10px;

}

/* To style the first item in the contacts list */
#footer-contacts-row ul>li.footer-address {

	margin-top: -20px;

}

/* To style the contacts a inner item (li>a) */
#footer-contacts-row a {

	color: #fff;

}

/* To style the contacts a inner item (li>a) on hover */
#footer-contacts-row a:hover {

	color: #13aff0;

}

/* To style the headings of the contact list */
span.contacts-heading-footer {

	color: #13aff0;

}

/* To style the header of insights */
#footer-posts h2 {

	color: #13aff0;
}

/* To style the container of recent posts list */
#footer-posts ul {

	list-style: none;
	border-top: none;
	margin-top: -15px;
	margin-left: 20px;

}

/* To style inner elements li of the container of recent posts list */
#footer-posts ul>li {

	border-bottom: none;
	border-top: none;

}

/* To style inner Li>a elements of the container of recent posts list */
#footer-posts ul>li>a {

	color: #fff;

}

/* To style inner Li>a elements on hover of the container of recent posts list */
#footer-posts ul>li>a:hover {

	color: #13aff0;
	
}

/* To style the read more button */
#footer-blog-read-more a {

	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
	border-radius: 10px;
	height: 45px;
	padding: 15px;
	font-size: 15px;

}

/* To style the read more button on hover */
#footer-blog-read-more a:hover {

	background-color: #0a7a9e;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	border:  1px solid #0eb2e7;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function:  linear;

}

/* To style the last row on desktop */
#footer-bottom-row {

	margin-top: 30px;
	margin-bottom: -40px;

}

/* To style the last row on desktop - copyright text */
#copyright-footer {

	font-size: 12px;
	vertical-align: bottom;
}

/* To style the last row on desktop - google badge */
#google-bagde-footer .gpb{

	height: 80px;
	text-align: right;
	margin-top: -50px;
}

/* To style the last row on desktop - facebook badge */
#facebook-badge-footer {

	margin-top: -40px;

}


/***************************************
* [Start] -> #footer design mobile items
***************************************/

/* To style the contacts list */
#footer-contacts-mobile ul {

	list-style: none;

}

/* To style the contacts list li element */
#footer-contacts-mobile li {

	margin-bottom: 10px;
}

/* To style the contacts list li>a element */
#footer-contacts-mobile ul>li>a {

	color: #fff;

}

/* To style the contacts list li>a element on hover */
#footer-contacts-mobile ul>li>a:hover {

	color: #13aff0;

}

/* To style the social icons on mobile */
#footer-social-mobile {

		font-size: 25px;

}

/* To style the links within the social icons on mobile */
#footer-social-mobile p a {

	color: #fff;
}

/*************************************
* [End] -> #footer design mobile items
*************************************/

/************************
* [End] -> #footer design
************************/



/****************************************/
/* [Start] -> GDPR Cookie Notice footer */
/****************************************/

/* To style the notice text */
span#cn-notice-text {

	font-size: 15px;

}

/* To style the ok button */
#cn-accept-cookie {

	border: 1px solid #0a7a9e;
	border-radius: 10px;
	padding: 10px;
	background-color: #0eb2e7;

}

/* To style the ok button on hover */
#cn-accept-cookie:hover {

	border: 1px solid #0a7a9e;
	background-color: #0a7a9e;

}

/* To style the Learn More button */
#cn-more-info {

	border: 1px solid #0a7a9e;
	border-radius: 10px;
	padding: 10px;
	background-color: #0eb2e7;
	font-weight: bold;

}

/* To style the Learn More button on hover */
#cn-more-info:hover {

	border: 1px solid #0a7a9e;
	background-color: #0a7a9e;

}

/**************************************/
/* [End] -> GDPR Cookie Notice footer */
/**************************************/



/**************************************
* [Start] -> Sticky header menu styling 
**************************************/

/* To fix the header on top of the page*/
#site-header {

	transition: all 200ms ease;
	position: fixed;
	width: 100%;
	z-index: 1000;

}

/* To give padding between sticky header and the main-content area so
not to crop it */
.site-main.clr {

	display: block;
	padding-top: 100px;

}

/************************************
* [End] -> Sticky header menu styling 
************************************/



/****************************************************************
* [Start] -> Main menu styling (#site-navigation-wrap) on Desktop
****************************************************************/

/* To change the font-size, color and weight of the menu a items on desktop */
#site-navigation-wrap .dropdown-menu>li>a {

	font-weight: 400;
	font-size: 15px;
	color: #111;
	text-decoration: none;

}

/* To create an element to then have the underlining effect */
#site-navigation-wrap .dropdown-menu>li>a:before {

  	content: "";
	position: absolute;
  	width: 100%;
  	height: 3px;
  	bottom: 20px;
  	left: 0;
  	background: #13aff0;
  	visibility: hidden;
  	border-radius: 5px;
  	transform: scaleX(0);
  	transition: .25s linear;

}

/* To create an element to then have the underlining effect */
#site-navigation-wrap .dropdown-menu>li>a:hover:before,
#site-navigation-wrap .dropdown-menu>li>a:focus:before {

	visibility: visible;
  	transform: scaleX(1);

}

/* To create an element to then have the underlining effect */
#site-navigation-wrap .dropdown-menu>li>a:after {

  	content: "";
  	position: absolute;
  	width: 100%;
  	height: 7px;
  	border: 1px solid #000;
  	bottom: -2px;
  	left: 0;
  	background: #fff;
  	border-radius: 5px;
  	opacity: 0;
  	transform: scalex(0);
  	transition: .5s;

}

/* To remove underlining effect on about us */
#site-navigation-wrap .dropdown-menu>#menu-item-134>a:before,
#site-navigation-wrap .dropdown-menu>#menu-item-134>a:after {

	display: none;

}

/* To change cursor on About Us */
#site-navigation-wrap .dropdown-menu>#menu-item-134>a {

	cursor: pointer;

}

/* To overwrite this need to change the parent them style element*/
.dropdown-menu .sub-menu {

	width: 120px;

}

/* To style the dropdown menu */
.dropdown-menu ul li a.menu-link {

	color: #111;
	font-size: 14px;
	width: 140px;


}

/* To style the hover effect on the dropdown menu */
.dropdown-menu ul li a.menu-link:hover {

	color: #13aff0;
	background-color: #fff;
	width: 140px;


}

/* To remove underlining effect on the button */
#site-navigation-wrap .dropdown-menu>#menu-item-140>a:before,
#site-navigation-wrap .dropdown-menu>#menu-item-140>a:after {

	display: none;

}


/* To style the [Request a Free Consult] button */
#menu-item-140 .text-wrap  {

	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
	font-size: 15px;
	border-radius: 10px;
	height: 45px;
	padding: 15px;


}

/* To create hovering/on-focus effect */
#menu-item-140 .text-wrap:hover,
#menu-item-140 .text-wrap:focus   {

	background-color: #0a7a9e;
	border-color: #13aff0;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #13aff0; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;


}

/* To style the mail fa icon in the Desktop Menu */
.menu-item-144 a span.text-wrap {

	font-size: 24px;

}

/* To reduce the space between fa icons */
.menu-item-144 a {

	margin-right: -20px;

}

/* To style the phone fa icon in the Desktop Menu */
.menu-item-145 a span.text-wrap {

	font-size: 20px;
}

/* To remove underlining effect on FAs icons */
#site-navigation-wrap .dropdown-menu>#menu-item-144>a:before,
#site-navigation-wrap .dropdown-menu>#menu-item-145>a:before,
#site-navigation-wrap .dropdown-menu>#menu-item-144>a:after,
#site-navigation-wrap .dropdown-menu>#menu-item-145>a:after {

	display: none;

}

/* To remove underlining effect on new dropdown menu */
#site-navigation-wrap .dropdown-menu>li#menu-item-13087>a {
	cursor: pointer;
}

/**************************************************************/
/* [End] -> Main menu styling desktop (#site-navigation-wrap) */ 
/**************************************************************/



/***************************************
* [Start] -> Main menu styling on mobile
***************************************/

/********************************************
* [Start] -> Exploding menu styling on mobile
********************************************/

/* To define general style for non-desktop experience */
@media only screen and (max-width: 1080px) {

	#sidr {

		background-color: #111;
		font-size: 16px;
		font-weight: 500;
		text-align: center;

	}

	/* To center the elements of the menu */
	.sidr-inner {

		width: 70%;
		margin-left: 15%;

	}

	/* To change the style of the single menu items in the exploding panel */
	.sidr a {

		color: #fff;
		border-bottom: 1px solid #2a3442;

	}

	/* To style the X link */
	.sidr a.sidr-class-toggle-sidr-close {

		color: #fff;
		border-bottom: none; /* This removes the inherited border */

	}

	/* To change the style of the single menu items on hover in the exploding panel */
	.sidr a:hover {

	color: #13aff0;
	background-color: #111;

	}

	/* To style the plus toggle button */
	span.sidr-class-dropdown-toggle {

		color: #fff;
		font-size: 14px;

	}

	/* To center the about us toggle text */
	#sidr-id-menu-item-149>a {

		padding-left: 60px;
		border-bottom: none;

	}

	/* To position the toggle drop-down menu on mobile */
	.sidr-class-dropdown-toggle:before {

    	position: absolute;
    	top: 45%;
    	left: -5%;

	}

	/* To style the submenu */
	ul.sidr-class-sub-menu {

    	text-align: left;
    	font-size: 14px;
    	padding-left: 28%; /* This creates indentation */
	
	}

	/* To style the [Request a Free Consult] button */
	#sidr-id-menu-item-153>a {

		text-align: center;
		font-size: 18px;
		background-color: #13aff0;
		color: #fff;
		border:  1px solid #13aff0;
		font-weight: 700;
		border-radius: 25px;
		padding: 10px;
	}


}

/* To create overlay menu for mobile only (below 411px) */
@media only screen and (max-width: 411px) {
	#sidr {

		width: 62%;
		text-align: center;

	}

	/* To position the toggle drop-down menu on mobile */
	.sidr-class-dropdown-toggle:before {

    	position: absolute;
    	top: 45%;
    	left: -20%;

	}

	/* To style the submenu */
	ul.sidr-class-sub-menu {

    	text-align: left;
    	font-size: 14px;
    	padding-left: 35%; /* This creates indentation */
	
	}

}

/********************************************************
* [Start] -> Hamburger menu styling on mobile and desktop
********************************************************/


/* To center Logo For Mobile Devices (adjust max-width accordingly) */
@media only screen and (max-width: 1080px) {
	
	#site-header #site-logo {    

		float: none;    
		display: block;    
		text-align: center; 
		padding-top: 20px;   
		width: 100%;
		max-width: none;

	}

	#site-logo #site-logo-inner {   

		display: block;
		height: auto;

	}

	/* To hide the fa icon on hamburger menu */
	.sidr-class-icon.icon-close {

		display: none;

	}

	/* To style the X to close the menu */
	.sidr-class-close-text {

		font-size: 30px;
		font-weight: bold;

	}

}

/* This part floats the mobile menu toggle to the left and by using a negative margin
* it pushes it next to the logo */
.oceanwp-mobile-menu-icon {

    float: left !important;
    right: auto !important;
    text-align: left;
    margin-top: -60px;

}

/* To change the color and style of the close button in the exploding panel */
a.sidr-class-toggle-sidr-close {

	background-color: #111;
	color: #fff;


}


/*************************************/
/* [End] -> hamburger menu on mobile */
/*************************************/

/*************************************
* [End] -> Main menu styling on mobile
*************************************/



/*****************************************************************
* [Start] -> Inner content elements styling (specific the pages) *
*****************************************************************/

/* To sttle the h2 titles in all the pages */
h2.header-main-content-shadow {

	text-shadow: 1px 1px 0px #0a7a9e;

}


/***********************
* [Start] -> Home Page *
***********************/

/* To style the home page header */
#header-row #title-header-home {

	color: #fff;
	text-shadow: 2px 2px 0px #111;

}

/* To style the highlight elements on header p */
#header-paragrph p  span.header-highlight {

	color: #0eb2e7;
}

/* To style the header paragraph */
#header-paragrph p {

	font-size: 28px;
	color: #fff;
	font-weight: bold;
	text-shadow: 1px 1px 0px #111;

}

/* To style the text on request free consult to look like a button */
.wpb_text_column.wpb_content_element.request-free-consult-button p a {

	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
  	font-size: 22px;
	border-radius: 10px;
	padding: 15px;

}

/* To style the text on request free consult on hover to look like a button */
.wpb_text_column.wpb_content_element.request-free-consult-button p a:hover,
.wpb_text_column.wpb_content_element.request-free-consult-buttonp a:focus {

	background-color: #0a7a9e;
	border: 1px solid #0eb2e7;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;

}
.wpb_text_column.wpb_content_element > div.wpb_wrapper > p > a.request-free-consult-button:hover{

	background-color: #0a7a9e !important;
	border: 1px solid #0eb2e7 !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;

}
/* To style the how we do it and insights parapgraphs */
#how-we-do-it-desktop p {

	color: #fff;
	font-size: 18px;

}

div.call-out-paragraphs-white .wpb_wrapper p span {

	color: #fff;

}

/* To style the learn more buttons */
.wpb_text_column.wpb_content_element.lean-more-button-white p a {

	text-align: center;
	background-color: #0a7a9e;
	color: #fff;
	border:  1px solid #fff;
	box-shadow: 0 5px 0 0 #fff;
	font-weight: 700;
	font-size: 22px;
	border-radius: 10px;
	padding: 15px;


}

/* To style the learn more buttons on hover */
.wpb_text_column.wpb_content_element.lean-more-button-white p a:hover,
.wpb_text_column.wpb_content_element.lean-more-button-white p a:focus {

	background-color: #0eb2e7;
	border-color: #fff;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #fff; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;


}

/* To style the call-out-paragraphs */
.wpb_text_column.wpb_content_element.call-out-paragraphs p, 
.wpb_text_column.wpb_content_element.call-out-paragraphs p span,
.wpb_text_column wpb_content_element.call-out-paragraphs-white p,
.wpb_text_column wpb_content_element.call-out-paragraphs-white p span {

	font-size: 18px;

}

/*********************
* [End] -> Home Page *
*********************/

/***************************************
* [Start] -> Template Deeper URLs Page *
***************************************/

/* To style the paragraph at the top */
#header-paragraph-white p {

	font-size: 18px;
	color: #fff;

}

/***************************************
* [End] -> Template Deeper URLs Page *
***************************************/

/*************************
* [Start] -> Events Page *
*************************/


/***********************
* [End] -> Events Page *
***********************/

/***************************
* [Start] -> Insights Page *
***************************/

/* To style the load more button */
a.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-flat.vc_btn3-color-sky {
	margin-top: -30px;
	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
	font-size: 18px;
	border-radius: 10px;
	padding: 15px;

}

/* To style the load more button on hover */
a.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-flat.vc_btn3-color-sky:hover,
a.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-flat.vc_btn3-color-sky:focus {

	background-color: #0a7a9e;
	border-color: #0eb2e7;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function:  linear;

}

/*************************
* [End] -> Insights Page *
*************************/

/*****************************************
* [Start] -> Blog Post single entry Page *
******************************************/

/* To style the header/title of the blog post */
h2.single-post-title.entry-title {

	color: #0a7a9e;
	text-align: center;
}

/***************************************
* [End] -> Blog Post single entry Page *
***************************************/

/*************************************
* [Start] -> Insights post grid home *
*************************************/

/* To style the title of the post in the grid */
.vc_custom_heading.insights-home-title.vc_gitem-post-data.vc_gitem-post-data-source-post_title h3 {

	color: #0a7a9e;

}


/***********************************
* [End] -> Insights post grid home *
***********************************/

/**********************************
* [Start] -> Upcoming events grid *
***********************************/

@media only screen and (min-width: 1080px) {

/* To style the div containing the table with the event info */
.vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt>div {

	padding-left: 10px;
    padding-right: 10px;
    height: 450px;
    display: table-cell;
    vertical-align: top;
}

}

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

.vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt>div {

	padding-left: 10px;
    padding-right: 10px;
    height: 500px;
    margin-top: 20px;
}

}

/* To style the text for registration */
.registration-text  {

	margin-top: -20px;
	font-weight: bold;
	color: #111;
}

/* To style the text please register for events */
.registration-text a.registration-link,
.registration-text a.registration-link:visited {

	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
  	font-size: 18px;
	border-radius: 10px;
	padding: 15px;

}

/* To style the text please register for events on hover */
.registration-text a.registration-link:hover {

	background-color: #0a7a9e;
	border: 1px solid #0eb2e7;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;

}

/********************************
* [End] -> Upcoming events grid *
********************************/


/*****************************
* [Start] -> Who We Are page *
*****************************/

/* To style the icons */
p.social-icons-who-we-are {

	font-size: 24px;

}

/* To hide the alt text on visual browsers */
.screen-reader {

	display: none;
}


/***************************
* [End] -> Who We Are page *
***************************/

/*******************************
* [Start] -> How We Do It Page *
*******************************/

/* To style the label text on the tour */
#tour-how-we-do-it .vc_tta-title-text {

	color: #fff;
	font-size: 24px;
}


/* To style the the container */
#tour-how-we-do-it .vc_tta-tabs-list .vc_tta-tab.vc_active {

	border-right: 5px solid #0eb2e7;
	margin-right: -10px;


}

/* To style the active label */
#tour-how-we-do-it .vc_tta-tabs-list>.vc_tta-tab.vc_active>a {

	background-color: #0eb2e7;

}

/* To style the inactive label(s) */
#tour-how-we-do-it .vc_tta-tabs-list>.vc_tta-tab>a {

	background-color: #0a7a9e;
	font-weight: bold;
	opacity: 1;


}

/* To style the hover effect on the labels */
#tour-how-we-do-it .vc_tta-tabs-list>.vc_tta-tab>a:hover {

	opacity: 0.9;
	transition: 0.3s;
  	transition-timing-function:  linear;

}

/* To create a border on the left hand side of the container in the tour */
.vc_tta-container .vc_tta-panels-container {

	border-left: 10px solid #0eb2e7;
}

/* To style tab on mobile */
.vc_tta-panel-title  {

	background-color: #0eb2e7;
	border-left: 3px solid #0eb2e7;
}


/* To style the titles of the subsections of the solutions tab */
#solutions .aio-icon-title.ult-responsive,
#expertise .aio-icon-title.ult-responsive {

	font-size: 32px;
	font-weight: bold;
	color: #0eb2e7;

}

/* To style the request a free consult button in the tour */
.request-free-consult-solutions-page .wpb_wrapper p a {

	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
	font-size: 18px;
	border-radius: 10px;
	padding: 15px;

}

/* To style the request a free consult button on hover in the tour */
.request-free-consult-solutions-page .wpb_wrapper p a:hover,
.request-free-consult-solutions-page .wpb_wrapper p a:focus {

	background-color: #0a7a9e;
	border: 1px solid #0eb2e7;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;

}

/*****************************
* [Emd] -> How We Do It Page *
*****************************/

/***************************
* [Start] -> Contacts Page *
***************************/

/* To style the ul with contact information */
#contact-details ul {

	list-style: none;

}

/* To style the GDPR consent checkbox */
#gdpr-consent-line {

	padding-bottom: 12px;
	margin-bottom: 12px;
	margin-top: -5px;
}

/* To style the GDPR consent text next to the checkbox */
.gdpr-consent-text {

	padding-left: 5px;
	color: #111;
	font-size: 15px;
	font-weight: bold;

}

/* To style the send button */
#main-content-block-contacts .wpcf7 input[type="submit"] {

	text-align: center;
	background-color: #0eb2e7;
	color: #fff;
	border:  1px solid #0a7a9e;
	box-shadow: 0 5px 0 0 #0a7a9e;
	font-weight: 700;
	font-size: 18px;
	border-radius: 10px;
	padding: 15px;
	text-transform: none;

}

/* To style the send button on hover */
#main-content-block-contacts .wpcf7 input[type="submit"]:hover,
#main-content-block-contacts .wpcf7 input[type="submit"]:focus {

	background-color: #0a7a9e;
	border: 1px solid #0eb2e7;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	box-shadow: 0 3px 0 0 #0eb2e7; /* To give effect pushed button */
	text-decoration: none;
	transition: 0.3s;
  	transition-timing-function: linear;

}

/* To style the error message below the field */
#main-content-block-contacts span.wpcf7-not-valid-tip {
	
	color: #f00;
    font-weight: bold;

	}

/* To style the form response */
#main-content-block-contacts  div.wpcf7-response-output, 
#main-content-block-contacts  div.wpcf7-validation-errors { 

	color: #f00;
	text-align: center;
	border:  0px;
	font-size: 24px;
	font-weight: 700;
	margin-top: -5px;

}



/***************************
* [End] -> Contacts Page *
***************************/

/***************************************************************
* [End] -> Inner content elements styling (specific the pages) *
***************************************************************/


/* Fix header with new menu item */
@media (min-width: 1240px) and (max-width: 1323px) {
	#site-navigation-wrap .dropdown-menu>li>a {
		padding: 0 12px;
	}
}

/* handle menu layout on tab */

@media (min-width: 1081px) and (max-width: 1239px) {
	#site-navigation-wrap .dropdown-menu>li>a {
		padding: 0 7px;
	}
}

@media (min-width: 1081px) and (max-width: 1222px) {
	#site-navigation-wrap .dropdown-menu>li>a {
		font-size: 15px;
	}
	
	#site-logo #site-logo-inner a img {
		max-width: 150px !important;
	}
	
	#menu-item-140 .text-wrap  {
		padding: 10px;
	}
	
	.menu-item.menu-item-type-custom .menu-link .text-wrap > i:not(.nav-arrow) {
		font-size: 22px;
		padding-right: 8px;
	}
	
	#menu-home-menu.main-menu.dropdown-menu.sf-menu {
		margin-left: -16px;
	}
	
	#site-header-inner {
		padding-left: 0 !important;
	}
}



#mobile-dropdown {
	max-height: calc(100vh - 125px);
}

#mobile-dropdown ul > li > a {
	padding: 10px 40px;
    font-size: 16px;
}

/* sidr menu */
body.sidr-open {
	left: 0 !important;
	width: 100% !important;
	position: relative !important;
}

.sidr.left {
	left: -100%;
	right: auto;
}
@media screen and (max-width: 1080px) {
	#sidr {
		text-align: left;
	}
	span.sidr-class-dropdown-toggle {
		width: 0;
	}
	ul.sidr-class-sub-menu {
		padding-left: 0;
	}
	.sidr-class-dropdown-menu li a,
	.sidr-class-fs-dropdown-menu li a {
		padding: 12px 0px;
	}
}
@media screen and (max-width: 768px) {
	#footer-contacts-row ul, #footer-contacts-mobile ul, #footer-posts ul, #menu-sitemap {
		margin-left: 0;
	}
	#footer-content-row, #footer-content-row h2 {
		text-align: center !important;
	}
}
#header-row {
	background-color: #0d799d;
}