/*
Theme Name: the7dtchild
Author: Toine Lambalk
Author URI: https://linkedin.com/in/toinelambalk
Description: Dit thema is een child-theme van het The7 WordPress thema en ontwikkeld door Toine Lambalk. Aanpassingen aan dit thema dienen doorgevoerd te worden in de code, dit thema is afhankelijk van het The7 thema (deze mag niet verwijderd worden).
Version: 1.0.1
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

html{
	margin-top: 0px !important;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
}

a{
	text-decoration: none;
}

a:hover{
	color: #005c93;
}


.header-bar .branding img{
	width: 190px;
}

#phantom .with-logo .logo-box img{
	width: 76px;
}

.mobile-header-bar .mobile-logo{
	width: 70px;
}

.upb_row_bg{
	width: 100% !important;
}

/*Lanuage selector in bottom-bar*/
.wpml-ls-flag {
	border-radius: 10px;
	width: 18px;
	height: 18px!important;
	vertical-align: middle!important;
}

.footer-sub-nav{
	border-radius: .85rem;
}

.wpml-ls-native{
	margin-left: 8px !important;
}


.no-padding .vc_column-inner{
	padding: 0 !important;
}

/*Custom class for adding a border-radius to WP Bakery columns*/
.add-radius div{
	border-radius: .85rem;		
}

/*Default Herke ICT Group shadow applied to different elements*/
#sidebar .widget, 
.blog-shortcode .post, 
#CybotCookiebotDialog, 
.wpcf7-response-output, 
.manual-shadow, 
.enewsletter-modal,
.shortcode-blockquote,
.HIG-c-authorcard
{
	box-shadow: 0px 1px 12px rgba(0,0,0,0.15) !important;
}

/*Styling for the blue menu on solution/suite pages*/
.HIG-c-solutions-menu{
	padding: 10px 0 0 0;
	background-color: rgb(0, 123, 196);
}

.HIG-c-solutions-menu .widget .menu{
	text-align: center;
}

.HIG-c-solutions-menu .widget .menu li.current_page_item,
.HIG-c-solutions-menu .widget .menu li.current_page_item:hover > a{
	font-weight:800;
	text-decoration: none; 
	cursor: default;
}

.HIG-c-solutions-menu .widget .menu li a{
	color: white;
}

.ult-sticky.ult-stick-full-width{
	z-index: 100 !important;
}


@media only screen and (min-width: 771px) {
	.gradientOverlay .upb_bg_overlay{
		background-image: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0));
	}

	.HIG-c-solutions-menu .widget .menu li{
		display: inline;
		padding: 0 20px;
		border-right: 2px solid rgba(242, 242, 242, 0.6);
	}

	.HIG-c-solutions-menu .widget .menu li:first-child{
		margin-right: 15px;
		font-size: 19px;
	}

	.HIG-c-solutions-menu .widget .menu li:last-child{
		border-right: none !important;
	}

	.footer .wf-container section:first-child{
	width: 50%;
}

}

@media only screen and (max-width: 770px) {
	.gradientOverlay .upb_bg_overlay{
		background-color: rgba(0,0,0,0.4) !important;
		background-image: none;
	}

	.HIG-c-solutions-menu ul li{
		display: block ;
	}

	.HIG-c-solutions-menu ul li:first-child{
		display: block !important;
		border-right: none !important;
	}

	.HIG-c-solutions-menu ul li:first-child{
		margin-right: 0px !important;
	}

	.HIG-c-solutions-menu ul li:first-child::after {
		font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c9";
		color: #f4f4f4;
		padding-left: 12px;
	}

	.HIG-c-solutions-menu ul li{
		display: none;
	}

	.reverse-row {
		flex-direction: column-reverse !important;
		display: flex;
	}

	.hide-on-mobile{
		display: none;
	}
	
	.center-align-on-mobile{
		text-align: center;
	}

}

/* Custom header of post-page. */
#HIG-blog-header{
	width: 1450px;
	padding: 90px 50px 0 50px;
}

.HIG-blog-header-wrapper{
	position: relative;
	margin: -90px 0 0 0 ;
}

.HIG-blog-bg{
  	width: 100vw;
  	position: absolute;
  	margin-left: -50vw;
	left: 50%;
	top: 0;
	bottom: 0;
	z-index: 0;
	background-position: center;
	background-size: cover; 
	background-repeat: no-repeat; 
	background-color: rgba(0, 0, 0, 0);
	background-attachment: scroll; 
}

.HIG-blog-bg::after{
	content: '';
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

@media only screen and (max-width: 770px) {
	.HIG-blog-bg::after{
		background-color: rgba(0,0,0,0.4) !important;
		background-image: none !important;
	}

	#HIG-blog-header{
		padding: 90px 15px 0 15px; 
	}
}

.HIG-blog-content{
	position: relative;
	padding: 110px 0;
}

.HIG-blog-content h1, 
.HIG-blog-content p{
	color: #fff;
	margin-top: 10px;
}

.HIG-blog-box{
	max-width: 600px;
}

.HIG-blog-box .back{
	padding: 0 0 10px 0;
	font-size: 18px;
	line-height: 24px;
	color: #f2f2f2;
}

.HIG-blog-box .back i{
	margin-right: 10px;
}

.HIG-blog-box .back:hover > span{
	text-decoration: underline;
}

/* Category tag used on posts and in preview (masonry grid)*/
.category, 
.fancy-categories a{
	color: #ffffff;
	font-weight: 800;
	font-size: 0.8em;
	background-color: rgb(0, 123, 196);
	border-radius: 100px;
	display: inline;
	padding: 4px 12px;
	margin-right: 10px;
}

.fancy-date a{
	border-radius: .85rem;
}

.fancy-date {
	pointer-events: none;
}

.fancy-categories {
	pointer-events: none;
}

.entry-meta{
	pointer-events: none;
}
/* Sidebar widget share buttons
This styling is required because the buttons lose their colour when they are added to the sidebar.
*/
#share-widget .share-link-description{
	display: none;
}

.share-buttons a{
	border-radius: .85rem;
	border-width: 2px;
}

.share-buttons a.facebook{
	color: #4c69c7 !important;
}

.share-buttons a.twitter{
	color: #2abeeb !important;
}

.share-buttons a.linkedin{
	color: #007bc7 !important;
}

.share-buttons a.whatsapp{
	color: #36b74d !important;
}

/* Klantcases portfolio filter buttons*/
.filter-categories a.act{
	border-radius: .85rem !important;
}

.vc_tta-panels-container{
	margin-top: 60px !important;
}

.solution-switcher .vc_tta-tab a{
	border-radius: .85rem !important;
	padding: 8px 14px 7px 14px !important;
	font: 500 15px / 19px "Poppins", Helvetica, Arial, Verdana, sans-serif !important;
	background: #ffffff;
	border: none !important;
}

.solution-switcher .vc_tta-tab a:hover{
	color: #007bc4 !important;
	background: #fff !important;
}

.solution-switcher .vc_tta-tab.vc_active a{
	background: #007bc4 !important;
	color: #ffffff !important;
}

.solution-switcher .solution{
	border-radius: .85rem;
}

/* Cookie notice banner*/
#CybotCookiebotDialog{
	max-width: 360px !important;
	width: 80% !important;
	left: 2% !important;
	top: auto !important;
	bottom: 2% !important;
	border-radius: .85rem !important;
	padding: 10px 15px !important;
	height: auto !important; 
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText{
	margin-bottom: 14px;
	font-size: 13px;
	line-height: 18px;
	color: rgb(89, 89, 89);
}

#CybotCookiebotDialogBodyContentTitle{
	color: #595959 !important;
	font: normal 600 17px / 26px "Open Sans", Helvetica, Arial, Verdana, sans-serif !important;
}

#CybotCookiebotDialogBodyButtonAccept, 
.mpLabelRow .submitButton{
  	display: inline-flex;
    color: rgb(255, 255, 255);
  	background-color: rgb(0, 123, 196) !important;
  	margin-bottom: 5px;
  	border: none !important;
  	padding-left: 20px !important;
  	padding-right: 20px !important;
  	font: normal 500 15px / 20px "Poppins", Helvetica, Arial, Verdana, sans-serif !important;
}

#CybotCookiebotDialogBodyButtons{
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
}

/* Footer and Bottom bar */
.contact-info .color-primary{
	font-weight: 600;
}

#bottom-menu .menu-item-text span{
	font-weight: 600;
}

.footer ul li.current_page_item a,
.footer ul li a:hover{
	color: #007bc4 !important;
}

/* Spacing of elements on contact page */
.contactformulier{
	overflow:hidden;
	max-width: 420px;
	margin: 0 auto;
	border-radius: .85rem;
}
.contactline{
	margin: 0 0 10px 0;	
}

.contactline i{
	color: #007bc4;
	margin-right: 20px;
}

.wpcf7-response-output{
	border-bottom-left-radius: .85rem;
	border-top-left-radius: .85rem;
}

/* Menu */
.dt-mega-menu-wrap{
	box-shadow: none !important;
	border: 1px solid #ddd;
	border-top: none;
	border-bottom-left-radius: .85rem;
	border-bottom-right-radius: .85rem; 
	text-align: center !important;
}

.dt-mega-parent.first{
	margin-left: -40px;
}

.dt-mega-parent{
	text-align: center;
	border-radius: .75rem;
	margin-right: 10px;
	background-color: rgb(234, 234, 234);
	transition: background 0.25s ease 0s, color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, filter 0.25s ease 0s, border 0.25s ease 0s;
}

.dt-mega-parent:hover{
	cursor: pointer;
	filter: brightness(90%);
}

.main-nav > li:last-of-type a, 
#mobile-menu > li:last-child a{
	background-color: rgb(234, 234, 234);
	color: rgb(96, 96, 96);
	border-radius: .85rem;
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 15px;;
	transition: background 0.25s ease 0s, color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, filter 0.25s ease 0s, border 0.25s ease 0s;
}

#mobile-menu > li:last-child a{
	margin-left: -15px;
	margin-right: -15px;
}

#primary-menu > li:last-child a:hover, 
#mobile-menu > li:last-child a:hover,
#primary-menu > li:last-child.current-menu-item,
#mobile-menu > li:last-child.current-menu-item
 {
	filter: brightness(90%);
	color: rgb(96, 96, 96) !important;
}

#primary-menu > li:last-child a:hover > span > span, 
#mobile-menu > li:last-child a:hover > span> span,
#primary-menu > li:last-child.current-menu-item a > span > span, 
#mobile-menu > li:last-child.current-menu-item a > span> span{
	color: rgb(96, 96, 96) !important;
}

.dt-close-mobile-menu-icon{
	border-radius: 6px;
}

.menu-icon{
	width: 65px; 
	margin-bottom:-15px;
}

.home-icon{
	margin: 0 auto; 
	display: flex; 
	width:160px; 
	height: 120px;
}

/* This line makes sure the megamenu is aligned with the floating header as well*/
.show-phantom .main-nav > li > a{
	margin: 10px 13px; 
}


/* Kleine pijl naar die naast het menu-item Oplossingen staat en aanduidt dat het een dropdown megamenu is*/
.top-header .main-nav.level-arrows-on>li.has-children>a .menu-text { 
    padding-right: 15px;
}

/* Styling voor de zin onderaan in het mega-menu (koppeling).*/

.dt-mega-parent.new-row{
	padding: 0px !important;
	width: 100%;
	background: none;
	margin-left: -20px;
}

.dt-mega-parent.new-row a{
	padding: 5px 0px !important;
	color: #007bc4 !important;
}

.dt-mega-parent.new-row a span{
	margin: 0 auto;
}

/* Styling voor de chevron op de homepagina*/
#homechevron{
	border-radius: 5px;
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 20px;
	position: relative;
	transform: rotate(135deg);
	vertical-align: top;
	width: 20px;
	color: white;
	z-index: 100;
	left: calc(50% - 5px);
	opacity: 0.5;
	transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

#scrollstop:hover{
	cursor: pointer;
}

#scrollstop:hover #homechevron{
	opacity: 0.8;	
}	

/* Newsletter modal */
.modal{
	height: 100vh;
	overflow: auto;
	width: 100%; 
  	position: fixed !important;
  	z-index: 99999;
  	margin: 0;
  	top: 0;
  	left: 0;
  	background-color: rgba(0, 0, 0, 0.7);
  	align-items: center;
  	justify-content: center;
  	display: none;
}

.dialog{
	width: 95%;
	max-width: 840px;
	background-color: rgb(255, 255, 255);
	min-height: 300px;
	max-height: 95%;
	margin: 0 auto 0 auto;
	overflow: auto;
	border-radius: .85rem;
	padding: 30px 45px;
	height: auto;
	display: block;
	float: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
	
.close-button {
	float:right;
	margin-top: -20px;
	margin-right: -20px;
}

.close-button.news{
	margin-right: 0px;
}

.close-button i{
	font-size: 1.5em;
	 color: rgb(96, 96, 96);
  	background-color: rgb(234, 234, 234);
  	padding: 12px;
  	border-radius: 100px;
  	width: 22px;
  	height: 22px;
  	display: flex; 
  	align-items: center;
  	justify-content: center;
}

.close-button i:hover{
	filter: brightness(90%); 
	cursor: pointer;
}

.newsletterModal{
	font-size: 1.0rem;
	color: #777777;
}

.newsletterModal a{
	color: #007bc4 !important;
}

.newsletterModal a:hover{
	color: #005c93 !important;
}

.newsletterModal .close-button.news{
	margin-top: 0;
}

.newsletterModal .column{
	display: inline-block;
}

.newsletterModal .column:nth-child(2){
	float: right;
}


.HIG-language-selector{
	float: right;
	margin-top: -70px; 
}

.HIG-language-selector img{
	border-radius: 100px;
	width: 2rem; 
	height: 2rem;
	border: 1px solid #ddd;
	opacity: 0.6;
	-webkit-transition: opacity 0.25s ease-in-out;
  	-moz-transition: opacity 0.25s ease-in-out;
  	-ms-transition: opacity 0.25s ease-in-out;
  	-o-transition: opacity 0.25s ease-in-out;
 	transition: opacity 0.25s ease-in-out;
}

.HIG-language-selector img.active, 
.HIG-language-selector img:hover{
	opacity: 1;
	border: 1px solid #ddd;
}

.post,
.post-thumbnail,
.widget,
.scroll-top
{
	border-radius: .85rem !important;
}

.post-thumbnail-rollover,
.post-thumbnail-rollover img,
.post-thumbnail-rollover:after{
	border-top-left-radius: .85rem !important;
	border-top-right-radius: .85rem !important;
}

.dt-mega-menu-wrap .sidebar .widget, 
.dt-mega-menu-wrap .sidebar-content .widget{
	border-top: none !important;	
}

.mobile-main-nav .next-level-button{
	color: inherit;

}

/* Support page*/
.supportbox > div {
	border-radius: .85rem !important;
	transition: background 0.25s ease 0s, color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, filter 0.25s ease 0s, border 0.25s ease 0s !important;
	text-align: center;
}

.supportbox:hover > div {
	filter: brightness(90%);
  	cursor: pointer;
}

.supportbox i{
	font-size: 60px;
	margin: 15px 0 0px 0;
}

.aanbevolen::before{
	content: 'Aanbevolen';
	float: left;
	position: absolute;
	margin-top: -30px;
	font-weight: bold;
	color: green;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.recommended::before{
	content: 'Recommended';
	float: left;
	position: absolute;
	margin-top: -30px;
	font-weight: bold;
	color: green;
	display: inline-block;
	width: 100%;
	text-align: center;
}

/* Quote in WP Bakery */
.shortcode-blockquote{
	margin: 38px 40px 38px 20px;
	border-left: 6px solid #007bc4 !important;
	border-radius: .85rem;
	background: #f9f9f9 !important;
	display: inline-block;
}

.dt-breadcrumbs-shortcode li.current{
	font-weight: 700;
}

/*Contactform*/
.consent, .mpFormText{
	font-size: 13px;
	line-height: 18px;
	color: #909090;
}

label, .mandatorySign{
	font-size: 14.5px;
	color: #aaaaaa;
}

textarea{
	resize: none;
}

input[type="text"], 
input[type="search"],  
input[type="tel"],  
input[type="url"],  
input[type="email"],  
input[type="number"],  
input[type="date"],  
input[type="range"],  
input[type="password"]{
	height: 34px !important;
}

input[type="text"], 
input[type="search"],  
input[type="tel"],  
input[type="url"],  
input[type="email"],  
input[type="number"],  
input[type="date"],  
input[type="range"],  
input[type="password"],
textarea{
	padding-left: 10px !important;
	border: none !important;
	border-bottom: 2px solid #e7e7e7 !important;
	background-color: rgba(255, 255, 255, 0) !important;
	font-size: 16px !important;
	
	margin-bottom: 0px !important;
	transition: border 0.2s linear;
	color: #53545a !important;
}

input[type="text"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus,  
input[type="url"]:focus,  
input[type="email"]:focus,  
input[type="number"]:focus,  
input[type="date"]:focus,  
input[type="range"]:focus,  
input[type="password"]:focus, 
textarea:focus{
	border-bottom: 2px solid #007bc4 !important;
}

label:focus-within{
	color: #007bc4 !important;
}

.mpFormField .input:focus ~ .descriptionLabel{
	color: #007bc4 !important;
}

.wpcf7-not-valid.wpcf7-validates-as-required, 
.mpQuestionTable.error .mpFormField input
{
	border-bottom: 2px solid rgb(213, 0, 0) !important;
}

.mpErrorRow{
	text-align: right;
}

.mpErrorSummary{
	display: none !important;
}

.wpcf7-not-valid-tip, 
.mpErrorRow .error{
	text-align: right;
	font-size: 12px !important;
	color: rgb(213, 0, 0) !important;
}

.mpLabelRow{
	display: grid !important;
	margin-bottom: 8px;
}

.mpFormTable{
	width: 100%;
}

.mpQuestionTable{
	width: 100%;
}

.mpFormTable input[type="radio"], 

.mpFormField input[type="checkbox"] {
	width: 30px;
}

.mpFormField input{
	width: 100%;
}

.content table,
.content td,
.content th {
  border: none!important;
}