@import url("https://use.typekit.net/vlc4tbt.css");


:root {
   --primary-color: #313543;
   --secondary-color: #00d2b3;
   --background-color: #f3fafc;
   --secondary-color-hover: #00b99d;
}

#meijerslogo {
	position: absolute;
	margin-left: 15px;
	height: 60px;
	margin-top: 5px;
}

html, body, #form-bereken .infobereken:hover span {
   font-family: adelle-sans, sans-serif;
   font-size: 17px;
   font-weight: 300;
   line-height: 1.75em;
   color: var(--primary-color);
}

header {
   box-shadow: none !important;
}

.container,
nav {
   max-width: 1180px;
}

.button {
   text-transform: none;
   font-size: 18px;
}

.button i {
   display: none;
}

nav ul li a {
   font-weight: 500;
}

nav ul li a.active{ 
	color: var(--secondary-color);
}

#helpdeskblock {
   color: var(--primary-color);
}

h1 {
   font-size: 2.5em;
}

h1, h2, h3 {
	font-weight: 700;
}

nav ul li a:hover {
	color: var(--secondary-color);
}

nav ul li a.active {
	border-color: var(--secondary-color);
}

.fa-check {
	color: #fff;
	color: var(--secondary-color);	
}

.button, .button.per.active, #paginate a.curpage {
	color: #fff;
	background-color: var(--secondary-color);
   font-weight: 600;
}

#resultaten .nettolink a:hover .netto {
	color: var(--secondary-color);
}

.button:hover, .button.per.active:hover {
	background-color:  var(--secondary-color-hover);
}

.home-block.home-color .button, .button.per, #paginate a {
	background-color: var(--secondary-color);
}	

.button.per.active {
	background-color: var(--secondary-color);
}

.home-block.home-color .button:hover, .button.per:hover {
	background-color:  var(--secondary-color-hover);
}

#keuzeoptie_content_variabel .chartoptions a {
   width: 15% !important;
}

#home-1, #home-1 h1, .home-block.home-color h2 {
	color: var(--primary-color);
   color: white;
   text-shadow: 3px 3px 10px rgba(50, 50, 46, 0.5);
	font-weight: 600;
}

#home-1 {
   font-weight: 400;
   text-align: left;
   font-size: 18px;
   padding-bottom: 0px;
   padding-top: 125px;
}

#home-1 .container {
   padding-right: 625px;
}

#home-1 h1 {	
	font-size: 48px;
	line-height: 1.1em;
}

strong {
	font-weight: 700;
}

#home-3 {
	padding: 100px 0px;
}

#home-2 {
	padding-top: 80px;
}

#logo-at {
   margin-right: 50px;
}


/* - - - - - H E A D E R - - - - - */

header .container > span,
header .container > span i {
	color: var(--secondary-color);
	font-weight: bold;
}

header .container > span i {
	border-color: var(--secondary-color);
}

/* - - - - - H E A D E R  I N F O B L O C K - - - - - */

#home-teaser {
	background-color: var(--background-color);
   background-color: var(--secondary-color);
   border-radius: 15px ;
	color: var(--primary-color);
   color: white;
   padding: 30px;
   width: 500px;
   margin-right: -555px;
   margin-top: -390px;
}

#home-teaser h3 {
	font-size: 26px;
   font-weight: 600;
}

#home-teaser p {
   font-size: 14px;
   line-height: 1.6em;
}

#home-teaser .button {
   background-color: rgba(0,0,0,0.5);
}

#home-teaser .fa-check {
   color: rgba(0,0,0,0.5);
}

.home-img-1 {
	background-image:url(/img/307/meijers_bg.jpg);
}

/* - - - - - R E F E R E N C E S - - - - - */

.home-block.home-color {
	background-image: url(/img/ref3.jpg);
}

.home-block.home-color {
	color: rgba(255, 255, 255, 0.85);
}

.home-block.home-color .referentie .stars {
	color: rgba(107, 235, 255, 0.8);
}

.home-block.home-color .referentie h3 {
	color: #8befff;
}

.home-grey-dark{
	background-color: var(--background-color);
}
#home-3,
#home-4 {
   text-align: left;
}

/* - - - - - B E R E K E N - - - - - */

#tabs {
	background:;	
	/* background: -moz-linear-gradient(left,  #00a0dd 50%, #cccccc 50%);
	background: -webkit-gradient(linear, left top, right top, color-stop(50%,#00a0dd), color-stop(50%,#cccccc));
	background: -webkit-linear-gradient(left,  #00a0dd 50%,#cccccc 50%);
	background: -o-linear-gradient(left,  #00a0dd 50%,#cccccc 50%);
	background: -ms-linear-gradient(left,  #00a0dd 50%,#cccccc 50%);
	background: linear-gradient(to right,  #00a0dd 50%,#cccccc 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0dd', endColorstr='#cccccc',GradientType=1 ); */
   margin-top: 50px;
}

#tabs li {
	color: #fff;
	background-color: #f7ad50;
   border-radius: 10px 10px 10px 10px;
   margin-left: 0px;
   padding: 0px 20px !important;
   margin-right: 15px;
   width: 24%;
   box-sizing: border-box;
}

#tabs li:last-child {
   margin-right: 0px;
}

.arrow-right {
	border-left: 25px solid #f7ad50;
   display: none;
}

#tabs li.second, 
#tabs li.third,
#tabs li.fourth {
	background-color: #fff;
   color: var(--secondary-color);
   margin-left: 0px;
   border: 1px solid var(--secondary-color);
}

#tabs li.non-active.third .arrow-right, #tabs li.non-active.fourth .arrow-right {
	border-left-color: #EEE;
   display: none;
}

#tabs li.active.second {					background-color: #FE6672; color: #fff;border-color: #FE6672;}
#tabs li.active.second .arrow-right {		border-left-color: transparent;}

#tabs li.non-active.second {				background-color: #fff;}
#tabs li.non-active.second .arrow-right {	border-left-color: transparent;}

#tabs li.active.third {						background-color: var(--secondary-color);color: #fff;border-color: var(--secondary-color);}
#tabs li.active.third .arrow-right {		border-left-color: transparent;}

#tabs li.non-active.third {					background-color: #fff;}
#tabs li.non-active.third .arrow-right {	border-left-color: transparent;}
 
#tabs li.active.fourth {						background-color: #8DD0DE; color: #fff;border-color: #8DD0DE;}
#tabs li.active.fourth .arrow-right {		border-left-color: transparent;}


#form-errors {
   color: red;
}

#bereken-1 {
	background-image:url(/img/307/beach2.jpg);
	height: 250px;
   text-align: left;
}

.staticpage {
   line-height: 1.5em;
}

.staticpage strong {
   color: var(--secondary-color);
}

#bereken-1,
#bereken-1 h1 {
	color: var(--primary-color);
	font-weight: 600;
}

#bereken-1 h1 {
	color: var(--secondary-color)
}

#langselect img,
ul#langselect li, ul#langselect li a {
   height: 25px;
   margin-bottom: -7px;
}

#bereken-1 {
   font-weight: 400;
}

#bereken-1 h1 {
	margin-top: 75px;
	margin-bottom: 15px;
}

.berekennubutton {
	background-color: var(--secondary-color);
}

#bereken-1.resultatenheader {
	height: 250px;
}

#bereken_form #keuzeopties h4 {
	font-weight: 600;
	font-size: 1.5em;
}

#bereken_form #keuzeopties .keuzeoptie > div {
	text-align: center;
   background-color: var(--primary-color);
}

#bereken_form #keuzeopties .keuzeoptie.active > div {
	background-color: var(--secondary-color);
}

/* - - - - - R E S U L T A T E N - - - - -  */

.formulieringevuld {
	background-color: #fff;
   box-shadow: 0px 5px 20px rgba(94,101,120,0.2);
   color: var(--primary-color) !important;
   width: 100%;
   padding: 25px;
   padding-bottom: 50px;
   font-size: 16px;
}

.formulieringevuld a#berekenknop {
   bottom: 25px;
   right: 25px;
}

.formulieringevuld .halfblock .sort {
   width: 30%;
}

.formulieringevuld span {
   color: var(--primary-color) !important;
}

.formulieringevuld a {
	background-color: var(--secondary-color); 
	font-weight: 600;
}

.formulieringevuld a:hover {
	background-color:  var(--secondary-color-hover);
}

#beleggenuitganginfo, #beleggengrafiek, #beleggentabel {
   text-align: left;
}

.button.per {
   background-color: var(--primary-color);
}
	

/* - - - - - R E V I E W - - - - - */


.ervaring .aanbeveling {
	background-color: #e6671a;
}

.ervaring .person, .ervaring .title {
	color: #7baf1f;
	font-size: 25px !important;	
	text-transform: uppercase;
	font-weight: 100;
}

.ervaring .title {
	font-size: 18px !important;
}


.ervaring table tr td span.stars i {
	color: #7baf1f;
}

.ervaring table tr td span.stars.total i {
	color: #0d8293;
}


/* - - - - - F O O T E R - - - - -  */

footer {
	background-color: #fff;
	color: var(--primary-color);
}

#footer-links li a {
   text-decoration: none;
   color: var(--primary-color);
}

#footer-links li a:hover {
   text-decoration: none;
   color: var(--secondary-color);
}

@media (max-width: 960px) {
   #home-1 {
      padding-top: 50px;
   }

   #home-1 h1 {
      font-size: 36px;
   }

   #home-1 .container {
      padding-right: 0px;
   }

   #home-teaser {
      padding: 25px;
   }

   #bereken-1,
   #bereken-1.resultatenheader {
      height: 150px;
   }

   #bereken-1 h1 {
      margin-top: 20px;
   }

   #resultaten #perkeuze .button,
   #resultaten .button {
      text-align: center;
   }

   #resultaten #processing {
      text-align: center;
   }  

   #resultaten .resultaat_item > div.bedrag {
      padding-left: 15px;
   }

   #form-bereken input[type=text] {
      width: 48%;
      margin-right: 2%;
      margin-bottom: 2%;
      height: 40px;
   }

   #tabs li {
      width: 24% !important;  
      margin-right: 5px;
      border-radius: 5px;
   } 
   
   #berekennubutton {
      width: 100%;
      margin-top: 25px;
   }

}