/*
Theme Name: l2p-23
Version: 1.3
*/



@import url(./fonts.css);

div,h1,h2,h3,h4,p {
	box-sizing: border-box;
/*
	padding:0;
	margin:0;
*/
}
body {
	background-color: var(--bg-color);
	margin: 50px 0 0 0;
	padding: 0;
	color: #fff;
	position: static;
	transform-origin: left top;
	opacity:0;
	transition: opacity 0.5s;
	font-size: 22px;
}
#content {
	width: 1920px;
	transform-origin: left top;
}

.postdate {
	font-size: 10px;
	color:var(--bg-lightblue);
}


#top {
	padding: 0 50px;
/*
	margin-top: 50px;
*/
	margin-bottom: 30px;
}
#logo img {
	width: 400px; 
	height: auto;
	margin-top: -10px;
}
/*
??
*/
.rf {float: right; display: inline-block}
.lf {float: left; display: inline-block}
.break {clear: both;}

#menu ul li a{
	text-decoration: none; 
	color: var(--bg-blue);
}
#menu ul li ul li a,
#menu ul li ul,
#menu ul li ul li {
	display: block;
	min-width: 200px;
}
#menu ul li ul { padding: 10px 10px;}
#menu ul li {
	display: inline-block;
	padding: 0 40px 0 0;
}
#menu {
	margin-top: 20px;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: Dosis-VariableFont_wght;
	font-weight: bold;
	font-size: 16pt;
	text-transform: uppercase;
}

#menu ul li ul {
	display: none;
	position: absolute;
	z-index: 100;
	background-color: var(--bg-color);
	font-size: 16pt;
}
#menu ul li:hover > ul {
	display: block;
}

#menu ul li ul li:first-child {
	border-top: none;
}
#menu ul li ul li {
	display: block;
	border-top: solid 1px var(--bg-blue);
	padding: 10px;
}
#menu ul li:hover > a {
	color: #000;
}

#menu ul li ul li ul {
	display:none;
	position: absolute;
  left: 200px;
  margin-top: -47px;
  border: solid 1px var(--bg-blue);
}

#menu ul li ul li ul > li:first-child {
	border-top: none;
}
#menu ul li ul li ul li {
	display: block;
	border-top: solid 1px var(--bg-blue);
	padding: 10px;
}




#maincontainer {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(autofill, 120px);
	min-height: calc(1080-200);
	grid-auto-rows: 147px; 
	gap: 20px;
	padding: 20px 50px;
	justify-items: stretch;
	align-items: start;
	z-index: 1;
/*
	grid-auto-flow: dense;
*/
}
#maincontainer .item:hover .toolbox a{
color: #000;
font-size: 14px;
}
#maincontainer .item:hover .toolbox {
	display: block;
	
}

#maincontainer .item > div p {
/*
	margin:0;
	padding: 0;
*/
}
#maincontainer .item > div {
	padding: 0;
	height: 100%;
	box-sizing: border-box;
	overflow-y: scroll;
	scrollbar-width: none;
}

#maincontainer .item table thead td{
	padding-bottom: 10px;
	font-weight: bold;
}
#maincontainer .item table td{
	vertical-align: top;
}
#maincontainer .item table {
	width: 100%;
}

#maincontainer .item {
	display: inline-grid;
	
	border-radius: 21px;
	background-position: center;
	background-size: cover;
	position: relative;
	height: 100%;
	overflow: hidden;
	padding: 50px 50px 0px 50px;
}

.toolbox a{ display: block; width: 100%;padding: 3px 10px 0px 3px;}
.toolbox a:hover{ background-color: #F00; }

.toolbox {
	position: absolute;
	right: 0;
	background-color: #fff;
	display: none;
	z-index:100;
	top:0;
}

#footer > div {
	padding-left: 20px;
	padding-top: 65px;
	color: #fff;
	pointer-events:all;
}

#footer {
	margin-top: 0;
	z-index: 2;
	padding-top: 120px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 50px;
/*
	height: 200px;
*/
	position: relative;
	background-size: cover;
	display: grid; 
	grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
	font-weight: bold;
	width:1920px;

	transform-origin: left top;
/*
	position: absolute;
	bottom:0;
*/
	
	pointer-events:none;
}
#footer a {
	color: #fff;
	text-decoration: none;
}
#footer > div {
/*
	font-family: Poppins-Regular;
*/
	font-size: 18px;
	
}
#footer ul li { display: block;}
#footer ul { 
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

form[name="contactform"] input:focus,
form[name="contactform"] textarea:focus,
form[name="contactform"] input,
form[name="contactform"] textarea {
	border-radius: 21px;
	background-color: var(--bg-lightblue);
	width: 100%;
	color: #fff;
	font-size: 24pt;
	padding: 6px 10px;
	border:0;
	outline:0;
	font-family: Poppins-Medium;
	font-variant: small-caps;
	margin-bottom: 25px;
	box-sizing: border-box;
}

form[name="contactform"] input.smallbtn {width: 200px;}

#pressbtns img { width: 17px; margin-left: 10px;}
#pressbtns {
	position: absolute;
	right: 15px;
	bottom: 10px;
}
#press .quoted:first-child {display: block;}
#press .quoted {display: none;}


.quoted.news a:hover,
.quoted.faq a:hover {
	color: var(--bg-lightblue);
}
.quoted.news a,
.quoted.faq a {
	text-decoration: none;
	color: #FFF;
}
/************************************************************************************** 

request form 

**************************************************************************************/
textarea#lic_other {
	width: 100%;
	border: solid 2px #14A9C4;
	height: 120px;
}

.reqform  .form:first-child {
	display: block;
}

.reqform form {
	position: relative;
	
	border-radius: 24px;
	background-color: #14A9C4a0;
}
.reqform form:before {
border-radius: 24px;
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .2; 
  z-index: -1;
  background-position: -100px -30px;
  background-size: 600px auto;
  background-repeat: no-repeat;
  background-image: url('/wp-content/uploads/2024/07/home-calculate.png');
}

.reqform  .form {
/*
	width: 100%;
*/
	/* display: block; */
	/* overflow: auto; */
	word-spacing: none;
	padding: 20px 0 0 0;
/*
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0;
*/
	
/*
	border: solid 2px #14A9C4;
*/
}

.reqform  .formcontent{
	/* position: absolute;
	left: 0px;
	white-space: nowrap; */
}

.reqform  {
	position: relative;
	width: 100%;
	height: 300px;
	margin: 0 auto;
	
}

.reqform  .buttons a {
	float: right;
	display: inline-block;
	padding: 10px 15px;
	margin-right: 20px;
	margin-bottom: 20px;
	color: #14A9C4;
	text-transform: uppercase;
	font-size: 14px;
	border-radius: 18px;
	
	background-color: #114559;
/*
	border-left: solid 2px #14A9C4 !important;
*/
	text-decoration: none;
}



.reqform .buttons {
	height: 50px;
}

/* text boven aan een form */
.reqform .formtext {
	width: 600px;
	border-bottom: solid 2px #fff;
	padding-bottom: 15px;
	white-space: normal;
}

.reqform label {
	margin-right: 15px;
}

.reqform input[type="text"] {
	border: none;
	background-color: transparent !Important;
	border-bottom: solid 2px #14A9C4;
	color: #fff;
/*
	#14A9C4;
*/
	width: 300px;
	margin-left: 0px;
}

.reqform .submenu.showsubmenu {
}

.form.personalia .submenu{
	margin-left: 0;
}

.reqform .submenu {
	display: none;
	margin-left: 20px;
}

.reqform ul li{
	white-space: normal;
	position: relative;
	padding: 3px 30px;
	
}
.reqform ul li.line {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: solid 2px #14A9C4;
}

.reqform ul {
	list-style-type: none!important;
	padding: 0;
	margin: 0 0 20px 0 !important;
}

.reqform ul li ul{
	list-style-type: none!important;
	padding: 5px 0;
	margin: 0 !important;
}

.noleftmargin {
	margin-left: 0 !important;
}

#calcresultcontent table {
/*
	width: 900px;
*/
}
#calcresultcontentfinal,
#calcresult,
#calcresultfinal,
#calcresultcontent {
	padding: 20px;
	white-space: normal;
}

/* forms for licenses */



.form.personalia > ul > li > label {
	width: 200px !important;
	display: block;
	float: left;
}

.calc .form.personalia ul li label,
.reqform .form.personalia ul li label {
	width: 300px !important;
}

.calcform .form.personalia ul li div.submenu,
.reqform .form.personalia ul li div.submenu {
	margin: 3px 0 0 0;
}
.calcform .form.personalia ul li div.submenu ul li,
.reqform .form.personalia ul li div.submenu ul li {
	margin: 5px 0;
	padding: 0;
}
.submenu.personalia {
	/* margin-bottom: 5px; */
}
.form table tr {
	
}
.form table tr td{
	white-space: normal;
	width: 150px;
}

.form table tr td:first-child{
	width: auto;
}
.form table {
/*
	width: 580px;
*/
}

.calcform .form table tbody tr:nth-child(even)  {
	text-align: right;
	background-color: #14A9C4 !important;
}

.calcform  .form table tbody tr:nth-child(even) td {
	/* color: #14A9C4 !important; */
}

.reqform .form table tbody tr:nth-child(even)  {
	text-align: right;
	background-color: #46CAF4 !important;
}

.reqform  .form table tbody tr:nth-child(even) td {
	color: #fff !important; 
}


.form table thead tr:first-child th {
	text-align: left;
}
.form table thead tr th {
	text-align: right;
	padding-right: 10px;
}

.form table tbody tr td  {
	margin-bottom: 50px !important;
	padding: 7px 7px;
}

.form input.requiredfield[type="text"] {
	border-bottom-color: #14A9C4 !important;
}
.reqform .form input.requiredfield[type="text"] {
	color: #fff;
	border-bottom-color: #46CAF4 !important;
}
.form {
	display: none;
}

#maincontainer .item[data-gr="1"] { padding: 20px 20px;}
#maincontainer .item[data-gc="4"][data-gr="1"] { padding: 20px;}
#maincontainer .item[data-gc="2"][data-gr="2"] { padding: 20px;}
#maincontainer .item[data-gc="6"][data-gr="6"]  { }
#maincontainer .item[data-gc="2"][data-gr="1"]  { font-size: 12px;}
#maincontainer .item[data-gc="2"][data-gr="3"]  { font-size: 12px; padding: 20px;}

@media only screen and (max-width: 850px) {
  #maincontainer .item,
  #maincontainer {
    display: block;
    min-height: 200px;
    margin-bottom: 30px;
    padding: 30px 15px;
  }
  #top {padding: 15px;}
  #logo {float: none;display: block;}
  #logo img  {float: none; width: 100%;}
  #menu {float: none;display: block; }
  #menu ul {font-size: 10pt;}
  #content {width: 100vw;  display: block;}
  body {margin: 5px;}
  #footer {display: grid; font-size: 10px; width: 100vw; padding: 10px; grid-template-columns: 0.8fr 1fr 0 1fr 1fr;}
  #footer > div { padding: 10px; margin-top: 100px; display: block; font-size: 10px; width: auto; font-size: 9px;}
  #footer a {font-size: 10px;}
  
}

.menu-item-120 ul.sub-menu {
	right: 0!important;
}

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
}

table.lightblue {
	background-color: var(--bg-lightblue2);
	padding: 10px;
	border-radius: 10px;
}

@container quoted (max-width: 200px) {
  .quoted {
    font-size: 10px!important;
  }
}

@container quoted (max-width: 600px) {
  .quoted {
    font-size: 16px!important;
  }
}

@container quoted  (min-width: 900px) {
  .quoted {
    font-size: 64px!important;
  }
}
.table2cols td {
    vertical-align:top;
    width:50%;
    
}
.table2cols td:nth-child(1) {
    padding-right:10px;
}
.table2cols td:nth-child(2) {
    padding-left:10px;
}