@charset "utf-8";
/* CSS Document */

body{font-family:"Raleway", serif; color:#2F2824; font-weight:500;}
h1, h2, h3, h4, h5, h6{font-family:"Raleway", serif; font-weight:700;}
a, a{color:#496778;}
.stripe article a:hover,
a:hover{color:#e1142d;}

.button{color:#2F2824; font-size:1.4rem; font-family:"Raleway", serif; font-weight:700; border:1px solid #109ECF; padding:8px 12px; text-align:left;}
.button:after{content: "➔"; color: #2f2824; margin-left: 24px;font-size: 16px; display: inline-block; vertical-align: middle;}
.button:hover{color:#109ECF; cursor: pointer;}
.button:hover:after{color:#109ECF;}
.button.red{color:#e1142d; border:1px solid #e1142d;}
.button.red:after{color:#e1142d;}
.button.red:hover{color:#2f2824; border:1px solid #2f2824;}
.button.red:hover:after{color: #2f2824;}
.button.full{height:48px; line-height:48px; padding:unset; border-radius: 0px 0px 4px 4px;}
.button.outline{border:4px solid white;}


.small-margin{margin:48px 0px;}
.smaller-margin{margin:24px 0px;}
.small-margin-top{margin-top:48px; margin-bottom:96px;}
.small-margin-bottom{margin-top:96px; margin-bottom:48px;}
.smaller-margin-top{margin-top:24px; margin-bottom:96px;}
.smaller-margin-bottom{margin-top:96px; margin-bottom:24px;}
.logo{aspect-ratio:6/5;}
.watermerk{background:url(../images/HKK-Watermerk.svg) no-repeat 100%; background-position: center; background-size:contain;}

/*colors and concditions*/
.content .content.bg-lightblue,
.video.bg-lightblue,
.photo.bg-lightblue,
.empty.bg-lightblue,
.form.bg-lightblue{background:rgba(18,158,207,0.09);}
.content .content.bg-lightgrey,
.video.bg-lightgrey,
.photo.bg-lightgrey,
.empty.bg-lightgrey,
.form.bg-lightgrey{background:rgba(169,174,179,0.09)}
.content .content.bg-white,
.video.bg-white,
.photo.bg-white,
.empty.bg-white,
.form.bg-white{background:white;}

.title-blue h1,
.title-blue h3,
.title-blue h2{border-bottom:2px solid #2f2824; width:fit-content; padding-bottom:3px; color:#3D4595;}
.title-red h1,
.title-red h3,
.title-red h2{border-bottom:2px solid #2f2824;  width:fit-content; padding-bottom:3px; color:#e1142D;}
.title-grey h1,
.title-grey h3,
.title-grey h2{border-bottom:2px solid #2f2824;  width:fit-content; padding-bottom:3px; color:#aaaeb3;}

.bg-lightgrey article a,
.bg-lightblue article a{color:#E1142D;}
.bg-lightgrey article a:hover,
.bg-lightblue article a:hover{color:#109ECF;}

/*form*/
/*error message*/
.message.fail{background:#E1142D; padding:12px;}
.message.fail * {color:#ffffff;}
.message.succes{background:rgb(18, 158, 207); padding:24px;}
.message.succes *{color:#ffffff;}
.boxes {font-size:1.4rem; font-family:"Raleway", serif; display:grid; grid-template-columns:32px auto;}
input[type="radio"],
input[type="checkbox"] { font: inherit; color: #2F2824; width: 1.08rem; height: 1.08rem; border: 0.15rem solid #AAAEB3; border-radius: 0.15rem; }
input[type="checkbox"]::before { background-color: rgb(18, 158, 207); }
input[type="checkbox"]:disabled { background: rgb(192, 192, 192); border: 0.15rem solid #AAAEB3; }
input[type="radio"] { background-color: var(--form-background); border-radius: 50%; border: 0.15rem solid #AAAEB3; }
input[type="radio"]::before { border-radius: 50%; background-color: rgb(18, 158, 207); }
input[type="radio"]:disabled { background: rgb(192, 192, 192); border: 0.15rem solid #AAAEB3; }
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="email"],
.form-grid input[type="time"],
.form-grid select,
.form-grid textarea,
.form-grid input[type="datetime-local"]{height: 24px; width:100%;  font-family:"Raleway", serif; line-height: 24px; padding:0 16px;  border: 1px solid #AAAEB3; color: #2F2824; background: #ffffff;}
.form-grid textarea,
.form-grid select{height:unset;  padding:0 12px;}
.form-grid textarea{resize:none; overflow:auto;}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {border-color:#109ECF; outline: none; box-shadow: 0 0 5px rgba(18,158,207,0.09); background-color: rgba(18,158,207,0.09);}
select.red,
textarea.red,
input.red{border:1px solid #E1142D !important; color:#E1142D !important;}
label.red,
textarea.red::placeholder,
input.red::placeholder{color:#E1142D;}
form .button{display:inline-block; margin-right:0; margin-left:auto; border:1px solid #3D4595; color:#3D4595; background:unset;}
form .button:after{color:#3D4595;}
form .button:hover{border:1px solid #109ECF;}
form button{margin: 24px 0 24px auto !important;}
/*sections*/
header{height:unset; position:relative;}

.logo{height:150px; display:block; margin: 0 auto;}

header .grid nav ul{justify-content:center;}
header .grid nav ul li{margin-right:24px; line-height:24px; font-size:1.8rem; font-weight:600;}
header .grid nav ul li:hover a:not(header .grid nav ul li.cta a){color:#e1142d;}


header{padding: 24px 0; padding-bottom:64px; position: relative;}

header .logo img{width: 100%; height: 100%; object-fit:contain;}
header nav ul{display:flex; justify-content:center;}
header nav ul li{font-family:"Raleway", serif; font-size:2.0rem; font-weight:700; margin-right:24px;}
header nav ul li:last-of-type{margin-right:unset;}
header nav ul li a{color:#129ecf;}
header nav ul li a:hover{color:#AAAEB3;}

.slider.wide .container,
.stripe.wide .container{width:calc(1260px + 120px); max-width:unset;}
.slider.full .container
.stripe.full .container{width: 100%; max-width:unset;}

.stripe.bg-lightblue .container{background:rgba(18,158,207,0.09);}
.stripe.bg-lightgrey .container{background:rgba(169,174,179,0.09)}

.stripe{ word-wrap: break-word;}
.stripe .photo.link{position: relative; aspect-ratio:1/1;}
.stripe .photo.link .button{position:absolute; bottom:24px; left:24px; margin:unset !important;}
.stripe .photo.link.album .button,
.stripe .photo.link .button{color:#ffffff; border:1px solid #ffffff; padding:12px;background:#109ECF; width:calc(100% - 60px);}
.stripe .photo.link.album .button:after{content:none;}
.stripe .photo.link.album .button:hover{background:white; color:#109ECF; border:1px solid #109ECF;}
.stripe .photo.link .button:hover{background:white; color:#109ECF;}
.stripe .photo.link .button:after{color:#109ECF; }

.stripe .photo.nolink .button{display:none;}

.stripe.extra-padding .container{padding:24px;}


.stripe.content-padding .content,
.stripe.content-padding .empty,
.stripe.content-padding .photo,
.stripe.content-padding .form,
.stripe.content-padding .video{padding:24px}

.form-grid h2{margin-bottom:unset !important;}

.stripe.links article a{position: relative;}
.stripe.links article a:hover:after{content:'➔'; margin-left:8px;}
.stripe.links article ul{list-style:none; margin:unset;}

/*footer*/
footer *{color:#A9AEB3;}
footer .logo{height: 70px;}
footer a{display:block;}
footer .grid{ border-top:1px solid #AAAEB3; padding-top:24px;}
footer address{font-style: normal;}
footer .copyright{border-top:1px solid #AAAEB3;  display:grid; grid-template-columns:repeat(12,1fr); font-family:"Raleway", serif; font-size:1.2rem}
footer .copyright div:last-of-type{text-align:right;}


section.slider .grid{height:inherit;}
section.slider {position: relative; overflow: hidden;}


.background.wide{position:absolute; width:100%; top:0; display:block;  z-index: -1; height:100%}
.stripe .background.wide{height:100%; }
section.slider .container article {padding:64px 24px; background:rgba(255,255,255,0.85)}
section.slider .container article .button{margin-top:24px;}
section.slider.left .block-5{grid-column-start:1; grid-column-end:span 5; margin:48px 0; padding:24px; text-align:left;}
section.slider.right .block-5{grid-column-start:7; grid-column-end:span 5; margin:48px 0; padding:24px; text-align:left;}


/*custom sections*/
section.services .grid{gap:24px;}
section.services .button{width: 100%; color:#2F2824; margin:unset;}

table, th,td{border:1px solid #109ECF; border-collapse:collapse; padding:4px;}
article table thead tr{font-size:2.0rem; font-weight:600; text-align:left;}


@media only screen and (max-width:1220px) 
{
   section.slider{height:unset;}
   section.slider .container article{padding:12px;}

   
  .slider.wide .container,
  .stripe.wide .container{width:unset; max-width:1260px;}
  .slider.full .container
  .stripe.full .container{width:unset; max-width:1260px;}
}

/*tablet: 768-1023*/
@media only screen and (max-width:1023px) 
{
  
  header{overflow:visible; padding-bottom:32px;}
  
  header .grid .menu a i{font-size:3.0rem; color:#129ecf; line-height:24px;}    
  header .grid nav ul{padding:24px; background:#129ecf; margin-left:unset;}
  header .grid nav ul li{width:100%; height:auto; min-height:48px;}
  header .grid nav ul li.language{min-height:24px;}
  header .grid nav ul li.language img{margin:unset; margin-right:0; margin-left:auto;}
  header .grid nav ul li:last-of-type a{margin-right:0; margin-left:auto; text-align:center; padding:0 8px; line-height:48px;}
  header .grid nav ul li a{color:white; height:48px; line-height:48px;}
  header .grid nav ul li a:active,
  header .grid nav ul li a:hover{color:white;}
  header .grid nav ul li a.on{color:#fccc00;}
  header .grid nav.open{top:205px;}

  .form-grid{grid-template-columns:1fr;}
  .form-grid .wide{grid-column:unset;}


 section.slider .background{position: relative; top:unset; grid-column:span 12;}
  section.slider .container article{padding:24px; grid-column:span 12;}
  section.slider .filler{display:none;}
  section.slider .container article h1{font-size:2.6rem; margin-bottom:12px;}

  section.slider.left .block-5{grid-column-start:unset; grid-column-end:span 12; margin:24px 0; padding:24px; text-align:left;}
  section.slider.right .block-5{grid-column-start:unset; grid-column-end:span 12; margin:24px 0; padding:24px; text-align:left;}

  footer .block-3{grid-column:span 12; text-align:center;}
  footer .block-4{grid-column:span 12; text-align:center;}
  footer .footer-menu .button{margin:auto;}

  footer .copyright .block-4{grid-column:span 4;}

  section .content.block-3,
  section .photo.link{grid-column:span 6;}
  section .empty{display:none;}

}

/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{



  .small-margin{margin:24px 0;}
  .smaller-margin{margin:12px 0;}
  .small-margin-top{margin-top:12px; margin-bottom:24px;}
.small-margin-bottom{margin-top:24px; margin-bottom:12px;}
  .smaller-margin{margin:12px 0;}
  .smaller-margin-top{margin-top:12px; margin-bottom:24px;}
.smaller-margin-bottom{margin-top:24px; margin-bottom:12px;}
    
  header .grid nav ul li:before{background:none;}
  header .grid nav ul li a i{display:none;}
  header .grid nav ul li:last-of-type{display:block; width:100%;}

  
  section .content.block-3, section .photo.link{grid-column:span 12;}

  section.slider .container article{grid-column-end:span 12; grid-column-start:unset;}

  section .button{width:100%; height:auto;}
  .stripe .photo.link .button{width:calc(100% - 48px);}

  footer address{text-align:center;}
  .footer-menu{text-align:center;}
  footer .copyright{text-align:center;}
  footer .copyright div:last-of-type{text-align:center;}
  footer .copyright .block-8,
  footer .copyright .block-4{grid-column:span 12;}

 
}

/*mobile s: 320-426*/
@media only screen and (max-width:426px)
{
    
  .stripe .photo.link .button{padding:4px; left:4px; bottom:4px; width:calc(100% - 8px);}
  .button:after{margin-left:4px;}
    
}