*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* Fonts */

h1 { font-family: "Montserrat"; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 80px;} 
h2 { font-family: "Montserrat"; font-size: 32px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 56px; }
h3 { font-family: "Montserrat"; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 32px; }
h4 { font-family: "Montserrat"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 24px; }
p { font-family: "Raleway"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 200; line-height: 24px;}
#link {font-weight: 600; display:inline; vertical-align: middle;}
blockquote { font-family: "Montserrat"; font-size: 24px; font-style: italic; font-variant: normal; font-weight: 200; line-height: 48px; } 
pre { font-family: "Raleway"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 16px; }

/* Colors */
.white {background-color:white;}

/* Lottie */
#instagram {height:32px; display:inline-block;}
#linkedin {height:32px; display:inline-block;}
#email {height:32px; display:inline-block;}
#download {height:32px; display:inline-block; float:right; z-index:1000;}

.instagramlink {display:; cursor: pointer;}
.linkedinlink {display:; cursor: pointer;}
.emaillink {display:; cursor: pointer;}
.downloadlink {display:; cursor: pointer;}

.sociallink {width: 64px; height: 64px; padding: 16px 16px 16px 16px; margin: 8px 0px 8px 0px; background-color:#fcfdff; border-radius: 32px; overflow: hidden; display: inline-block;}

/* Light Mode */
body {background-color: #F6F6F7;}

h1, h2, h3, h4, p, a, blockquote, pre {
color: #1A1C33;}

a {font-weight: 600;}
a:hover{color: #1A1C33;}

/* Responsive */
.row {}

/* Menu */
.menu { height: 56px; width: 100%; display: block; margin-bottom: 80px;}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Style the links inside the navigation bar */
#topnav a {
  float: left;
  display: block;
  color: #ccc;
  text-align: center;
  padding: 16px 16px 16px 0px; 
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
}

/* Change the color of links on hover */
#topnav a:hover {
  color: #1A1C33;
    font-weight:700;
    
}

/* Add an active class to highlight the current page */
#topnav a.active {
color: black;
font-weight:700;

}

/* Hide the link that should open and close the topnav on small screens */
#topnav .icon {
  display: none;
}

/*switch styling */
.switch-wrapper {
    width: fit-content;
    display: flex;
    margin-right: 0;
    margin-left: auto;
 }

.SunMoon::before {
  content: "\01F31E"; 
}

.switch-icon {
    margin-right: 8px;
}

.switch-icon p {
    font-size: 24px;
    display: table-cell;
    height: 56px;
    margin: 0px;
    vertical-align: middle;
}

.switch {
  position: relative;
  float: right;
  display: inline-block;
  width: 56px;
  height: 32px;
  margin-top: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: #ccc;
}

input:focus + .slider {
  box-shadow: 0 0 0px #ccc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 32px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Intro */
.intro {margin-bottom: 32px;}
.introfoto { border-radius: 8px; overflow: hidden; max-height:600px; transition: box-shadow 0.6s;}
.introfoto img {max-width: 100%; top:0; left:0;}
.introfoto img:last-child {display:none}
.introfoto:hover img:first-child{display:none}
.introfoto:hover img:last-child{display:inline-block}

.button { margin-left:24px; border-radius: 32px; background-color: #1a1c33; border: none; width: 140px; cursor: pointer; position: absolute; bottom: 0;
  left: 0;}
.button p {color:white; font-weight: 600; text-align: center; vertical-align: middle; padding: 8px;}
.button:hover {background-color: #1a1c33;}

.hover{-webkit-box-shadow: 0px 2px 2px 0px rgba(219,219,219,0.2); -moz-box-shadow: 0px 2px 2px 0px rgba(219,219,219,0.2); box-shadow: 0px 2px 2px 0px rgba(219,219,219,0.2); transition: box-shadow 0.6s;}
.hover:hover{-webkit-box-shadow: 0px 0px 24px 8px rgba(219,219,219,1); -moz-box-shadow: 0px 0px 24px 8px rgba(219,219,219,1); box-shadow: 0px 0px 24px 8px rgba(219,219,219,1);}

/* Card */
.projectcard {height: 600px; width: 100%; margin-bottom:32px; border: none; border-radius: 8px; overflow: hidden; transition: box-shadow 0.6s; background-color: #fcfdff;}
#inactive {background-color: #fcfdff; opacity: 0.6; cursor:not-allowed;}
a:hover {text-decoration: none;}

.projectcardimage {height: 600px; padding: 32px;}
.projectcardimage img {display: block;  max-height:100%; margin-left: auto; margin-right: auto; }
.left {margin-top: -148px;}
.left img {display: block;  max-height:100%; margin-left: auto; margin-right: auto; transform-origin: bottom left; transition: transform 0.6s;}
.right img {display: block;  max-height:100%; margin-left: auto; margin-right: auto; transform-origin: bottom right; transition: transform 0.6s;}
.left img:hover {transform: rotate(-4deg); transform-origin: bottom left;}
.right img:hover {transform: rotate(4deg); transform-origin: bottom right;} 

.cardtext {padding: 32px; margin-bottom:0px; align-self: bottom; z-index: 10;}
.cardtext h1 {}
.cardtext h3 {font-style:normal; font-variant:normal; font-weight: 400;  color: #ccc;}

.logo {padding: 32px; height: auto;  display: flex; flex-wrap: wrap;} 
.column {flex: 50%; max-width: 50%;  padding: 0 16px;}
.column img{max-height: 40px; max-width: 100%; margin: 56px 0px; filter: grayscale(100%); display: block;}


/* Projectpages */

/* Header */

.projectimage {align-items: center; width: 320px; display: block;  margin-left: auto; margin-right: auto;}
.projectimage img {max-width: 100%;}
.projectimagesmall {align-items: center; display: block;  margin-left: auto; margin-right: auto;}
.projectimagesmall img {width: 50vw; padding-bottom: 24px;}
#centered { display: block; margin-left: auto; margin-right: auto;}
.projectheader{position:relative; overflow:hidden; height: 60vh; 
box-shadow: 1px -9px 5px 0px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 1px -9px 5px 0px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 1px -9px 5px 0px rgba(0,0,0,0.2) inset;}
#projectheader {margin-bottom: 80px;}
.projectdata {margin:16px 0px;}
.headerbg {
object-fit: cover;
width: 100%;
position:absolute;
top:0;
bottom:0;
left:0;
z-index:-1;
}

/* Content */
.contentimage {border-radius: 8px; overflow: hidden; max-width: 100%; margin-top: 0; margin-left: 0; margin-bottom:16px;}
.contentvideo {border-radius: 8px; overflow: hidden; max-width: 100%; margin-top: 0; margin-left: 0; padding: 80px; width:400px; align-self: center;}
.contentvideowide {border-radius: 8px; overflow: hidden; max-width: 100%; margin-top: 0; margin-left: 0; padding: 80px; align-self: center;}
.contentimage img {max-width: 100%; top:0; left:0; height: auto;}
#contentvideo {max-width: 100%; top:0; left:0; border-radius: 8px; }
.paragraph {margin: 64px 0px 64px 0px; max-width: 80%; display: block;  margin-left: auto; margin-right: auto;}
.paragraph-center {max-width: 80%; display: block; position: absolute; top: 50%; transform: translateY(-50%);}
.projectdata {display: inline; width:100%;}

/*backgroundcolor*/
#grandvision {background-color: #002d724d}
#grandvisionbg{
background: url(..//images/home/grandvisionbg.svg) bottom center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#clixx {background-color:#00c07821}
#clixxbg{
background: url(..//images/home/clixxbg.svg) bottom center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#simyo {background-color:#d9e6e6}
#simyobg{
background: url(..//images/home/Background%20SVG%20simyo%20test.svg) bottom center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#kpn {background-color:#EFF3F5}
#kpnbg 
{background: url(..//images/home/kpnbg.svg) bottom center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#isso {background-color:#00AFC3}
#issobg{
background: url(..//images/home/issobg.svg) bottom center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#digitalartbg{
background: url(..//images/home/digitalartbg.svg) bottom center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

/* Bottomnavigation */
.bottomnavigation {display: block; clear: both;}
.bottomnavigation .previous {float: left; text-align: center; min-width: 148px; padding:16px; background-color: #fcfdff; border-radius:16px;}
.bottomnavigation .next { float: right; text-align: center; min-width: 148px; padding:16px; background-color: #fcfdff; border-radius:16px;}

/* Over */
.spacer {width: 100%; height: 80px;}
.over-picture {height:fit-content; border-radius: 8px; overflow: hidden;}
.over-picture img {height: auto; width: 100%; border-radius: 8px;}
.sticky-top{top: 72px;}
.fixed-bottom{position: fixed; left: auto; bottom: 24px; right: 32px;}
.item{clear:both; margin-bottom:24px;}
.subitem{height: 32px; clear:both;}
.alignleft{float:left; }
.alignright{float:right;}
#CV {transition: 0.2s; min-width: 64px;}

/* Footer */
.footer {display: block; clear: both; margin: 80px 0px 80px 0px;}
.footer-content {}
.footer-content p, pre {text-align: center;}

/* Responsive rules */
/*MD*/
@media screen and (max-width: 768px) {
  body {
  }
    h1 {font-size: 32px; line-height: 64px;}
    h2 {font-size: 24px; line-height: 48px;}
    h3 {font-size: 20px; line-height: 32px;}
    h4 {}
    blockquote {font-size: 20px; line-height: 40px;}
    
    .menu {margin-bottom: 40px;}
    .introfoto {max-height: 524px;}
    .projectcard {height: 524px;}
    .projectcardimage {height: 500px;}
    .projectcardimage small {height: auto;}
    .over-picture {border-radius: 8px; height: fit-content; margin-bottom:40px;}  
    .left {margin-top: 0px;}
    
    .spacer {height:40px;}
    
    .projectheader{height: auto;}
    .headerbg { bottom:0; top: none;}
}

/*LG*/
@media screen and (max-width: 992px) and (min-width: 768px)  {
  body {
  }
    h1 {font-size: 32px; line-height: 64px;}
    h2 {font-size: 24px; line-height: 48px;}
    h3 {font-size: 20px; line-height: 32px;}
    h4 {}
    blockquote {font-size: 20px; line-height: 40px;}
    
    .menu {margin-bottom: 64px;}
    .introfoto {max-height: 524px;}
    .projectcard {height: 524px;}
    .projectcardimage {height: 500px;}
    .projectcardimage small {height: auto;}
    .over-picture {border-radius: 8px; height: fit-content; margin-bottom:64px;}
    .left {margin-top: 0px;}
    
    .spacer {height:64px;}
    
    .projectheader{height: auto;}
    .headerbg { bottom:0; top: none;}
}