/* ---------------------------------------------------------------hier maak ik een aantal css variable voor de kleuren */
:root {
  --lightgray: #d6d6d6; /* nav text kleur en lijnen in main*/
  --wit: #fff;
}



/* ---------------------------------------------------------------hier worden de fonts ingeladen */
@font-face {
  font-family: "SFProText-Light";
  src: url("../fonts/SFProText-Light.woff") format("woff");
}
@font-face {
  font-family: "SFProText-Regular";
  src: url("../fonts/SFProText-Regular.woff") format("woff");
}
@font-face {
  font-family: "SFProText-Medium";
  src: url("../fonts/SFProText-Medium.woff") format("woff");
}



/* ---------------------------------------------------------------hier doe ik wat vaste pagina stijl */
*, *::after, *::before {
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
.tiny{
  display: block;
}
body{
  background-color: var(--wit);
}
*:focus{
  outline-offset: 5px;
  outline: 4px solid #2997ff;
  animation: blink 1s linear infinite;
}
section{
  overflow: hidden;
}
section .animate{
  opacity: 0;
  transform: translateY(50px);
  transition: .7s;
}
a{
  color: #06c;
}
a:hover{
  color: #06c;
  text-decoration: underline;
}



/* ---------------------------------------------------------------hier begint de stijl voor de nav */
nav{
  position: fixed;
  width: 100vw;
  height: 48px;
  display: flex;
  justify-content: center;
  z-index: 1;
}
nav .bg{
  background: rgba(0,0,0,.8);
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: saturate(150%) blur(25px);
}
nav .mainnav{
  position: relative;
  height: 100%;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  max-width: 980px;
}
nav .mainnav .desktopview{
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: "SFProText-Light", Arial;
}
nav .mainnav .desktopview a{
  text-decoration: none;
  color: var(--lightgray);
  font-size: .85em;
}
nav .mainnav .desktopview a:hover{
  color: var(--wit);
}
nav .mainnav li{
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
nav .mainnav li:last-child{
  padding-right: 1.5em;
}
nav .mainnav svg{
  width: 18px;
  height: 100%;
  fill:var(--lightgray);
}
nav .mainnav svg:hover{
  fill:var(--wit);
}
nav .burger{
  position: relative;
  width: 17px;
  height: 17px;
  cursor: pointer;
}
nav .burger span{
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--lightgray);
}
nav .burger span{
  top: calc(30% - 1px);
  transition: .3s;
}
nav .burger span + span{
  top: calc(70%);
}
nav .burger:hover span{
  background: var(--wit);
}
nav .burger .clicked:first-of-type{
  top: calc(50%);
  transform: rotate(-45deg);
}
nav .burger .clicked:nth-child(2){
  top: calc(50%);
  transform: rotate(45deg);
}
nav .expand{
  position: fixed;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  padding-top: 48px;
  background: black;
  color: var(--wit);
  width: 100%;
  font-family: "SFProText-Light", Arial;
  z-index: 90;
  transform: translateY(-100%);
  transition: .8s;
  display: block;
}
nav .clicked{
  transform: translateY(0%);
}
nav .expand ul{
  border-top: 1px solid #424245;
  padding: 0em 1em 1em 1em;
  position: relative;
  opacity: 0;
  transition: .5s .3s;
}
nav .clicked ul{
  opacity: 1;
}
nav .expand li{
  padding: 0em 0em;
  transition: .5s .3s;
  list-style-type: none;
}
nav .clicked li{
  padding: 1em 0em;
}
nav .expand li + li{
  border-top: 1px solid #424245;
}
nav .expand li a{
  color: #cccccc;
  text-decoration: none;
}
nav .expand li a:hover{
  color:var(--wit);
}



/* ---------------------------------------------------------------algemene main code*/
main{
  padding-top: 48px;
}
main .blacksection{
  background: black;
  color: #f5f5f7;
}
main .whitesection{
  background: #fbfbfd;
  color: #1d1e20;
}
main section{
  text-align: center;
  overflow-x: hidden;
}
main section:not(:first-child){
  margin-top: 1em
}
main section p{
  color: #86868b;
  font-family: "SFProText-Light", Arial;
  padding-top: 1em;
}
main section h2{
  font-family: "SFProText-Regular", Arial;
  padding-top: 1.2em;
  font-size: 2em;
}
main section h3{
  font-family: "SFProText-Light", Arial;
  font-size: 1.2em;
  padding-top: .3em;
}
main section .buttons{
  padding-top: 1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
main section .buttons a{
  text-decoration: none;
  font-family: "SFProText-Light", Arial;
  font-size: 1.2em;
  margin: .5em;
}
main .blacksection .buttons a{
  color: #2997ff;
}
main .whtiesection .buttons a{
  color: #0066cc;
}
main section .buttons a:Hover{
  text-decoration: underline;
}
main section .sectionimg{
  width: 100%;
  height: 250px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 1em;
}
main section:first-of-type .sectionimg{
  background-image: url(../images/12pro.jpg);
}
main section:nth-of-type(2) .sectionimg{
  background-image: url(../images/12.jpg);
}
main section:nth-of-type(3){
  padding-bottom: 1em;
}
main section:nth-of-type(3) .sectionimgcontainer{
  display:flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 2em);
  left: 50%;
  margin-left: 1em;
  overflow: hidden;
}
main section:nth-of-type(3) .sectionimgcontainer img{
  width: calc(100% - 2em);
  margin-top: 2em;
  max-width: 300px;
  animation: rotatingplus 20s linear infinite;
}
main section:nth-of-type(3) .sectionimgcontainer img:nth-of-type(2){
  animation: rotatingmin 20s linear infinite;
}



/* ---------------------------------------------------------------custom css voor de mac pagina*/
#mac section:first-of-type{
  background-color: var(--wit);
  font-family: "SFProText-light", Arial;
}
#mac section{
  padding: 1em;
}
#mac section a{
  color: #0066cc;
  text-decoration: none;
}
#mac section a:hover{
  text-decoration: underline;
}
#mac section:first-of-type h2:first-of-type{
  margin-bottom: 1em;
}
#mac .macchoices{
  text-align: left;
  display: flex;
  flex-direction: row;
  max-width: 800px;
}
#mac .option{
  width: 50%;
  padding: 3em;
  position: relative;
}
#mac .option:first-of-type::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  border-right: 1px solid var(--lightgray);
  pointer-events: none;
}
#mac .option img{
  width: 100%;
}
#mac .colors{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#mac .colors .color{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  margin: 0em 1em 1em 0em;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.8);
  border:3px solid var(--wit);
  position: relative;
}
#mac .colors .color::before{
  content: "";
  position: absolute;
  width: 130%;
  height: 130%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0);
  transition: .3s
}
#mac .colors .color:hover::before{
  border: 1px solid rgba(0,0,0,.4);
}
#mac .colors .color:first-of-type{
  background-color: #b3b7b9;
}
#mac .colors .color:nth-of-type(2){
  background-color: #efdfd2;
}
#mac .colors .color:nth-of-type(3){
  background-color: #dfe2e1;
}
#mac .colors .color p{
  font-size: .7em;
  var(--wit)-space: nowrap;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + .1em);
  opacity: 0;
  transition: .3s;
}
#mac .colors .color:hover p{
  opacity: 1;
}
#mac .option ul{
  list-style-type: none;
}
#mac .option p:nth-last-of-type(3){
  color: #ef5602;
  text-transform: uppercase;
}
#mac .option h3:first-of-type{
  margin: .2em 0 .2em 0;
}
#mac .option h3{
  margin: 1em 0 .2em 0;
  font-family: "SFProText-Regular", Arial;
}
#mac .option li{
  margin: 1em 0 .2em 0;
  font-family: "SFProText-light", Arial;
}
#mac .option a:last-of-type{
  margin-top: 1em;
  display: inline-block;
  color: var(--wit);
  background-color: #0070c9;
  background: linear-gradient(rgba(66, 161, 236, 1),rgba(0, 112, 201, 1));
  border: 1px solid #07c;
  padding: .5em 3em;
  border-radius: 4px;
  transition: .3s;
}
#mac .option a:last-of-type:hover{
  text-decoration: none;
  background: linear-gradient(rgba(0, 112, 201, 1),rgba(0, 112, 201, 1));
}
#mac section:nth-of-type(2){
  background-color: #fafafa;
}
#mac section:nth-of-type(2) img{
  margin: 2em 0 3em 0;
  width: 90%;
  max-width: 900px;
}
#mac section:nth-of-type(3) img{
  margin: 2em 0 0em 0;
  width: 35%;
  max-width: 200px;
}
#mac section:nth-of-type(3){
  background-color: var(--wit);
}
#mac section:nth-of-type(3) p{
  max-width: 1000px
}



/* ---------------------------------------------------------------hier begint de code voor de footer*/
footer{
  background:#f5f5f7;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: left;
  margin-top: 1em;
  font-size: .93em;
}
footer a{
  text-decoration: none;
  font-family: "SFProText-Light", Arial;
  transition: .3s
}
footer a:hover{
  color: black;
  text-decoration: underline;
}
footer section{
  width: calc(100% - 2em);
  max-width: 1000px;
  border-bottom: 1px solid #d2d2d7;
  font-size: .8em;
  padding: 2em 0 1em 0;
}
footer section:nth-of-type(2) .footersectionrows a{
  color: #515154;
}
footer section:last-child{
  padding: 1em 0 2em 0;
}
footer section p{
  color:#86868b;
  font-family: "SFProText-Light", Arial;
}
footer section ul{
  list-style-type: none;
}
footer section ul li{
  padding-bottom: 1em;
}
footer section:nth-of-type(2) p:last-of-type{
  padding-top: 3em;
}
footer section:nth-of-type(2) div{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items: flex-start;
}
footer section:nth-of-type(2) div .footersectionrows{
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
footer section:nth-of-type(2) div .footersectionrows h3 span{
  transition: .3s;
}
footer section:nth-of-type(2) div .footersectionrows .active span{
  transform: rotate(45deg);
}
footer section:nth-of-type(2) h3{
  font-size: 1em;
  color: black;
  font-family: "SFProText-Medium", Arial;
  padding-bottom: 1em;
}
footer section:nth-of-type(2) h3 span{
  display: none;
}
footer section:nth-of-type(2) h3:not(:first-child){
  padding-top: 1em;
}
footer section:last-of-type{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer section:last-of-type div{
  display: flex;
  flex-direction: row;
}



/* ---------------------------------------------------------------een beetje code voor de easteregg*/
.easteregg{
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
}
.jobs{
  position: absolute;
  left: 0%;
  height: 90%;
  bottom: 0;
  transform: translateX(-100%);
}
.laser{
  position: absolute;
  height: 1vh;
  width: 1px;
  background-color: red;
  left: 24.5vh;
  top: 44.8%;
  opacity: .9;
  opacity: 0;
  border-radius: 30px;
  box-shadow: 0 0 4px 3px red;
}



/* ---------------------------------------------------------------hier beginnen de mediaqueries*/
@media only screen and (min-width: 740px) {
  .tiny{
    display: none;
  }
  main section{
    display: flex;
    flex-direction: column;
    align-items:center;
  }
  main section p{
    font-size: 1.1em;
  }
  main section p + p{
    padding-top: .2em;
  }
  main section h2{
    font-family: "SFProText-Regular", Arial;
    padding-top: 1.2em;
    font-size: 2.8em;
  }
  main section h3{
    font-family: "SFProText-Light", Arial;
    font-size: 1.4em;
    padding-top: .3em;
  }
  main section .sectionimg{
    height: 400px;
    width: 150%;

  }
  main section:first-of-type .sectionimg{
    background-image: url(../images/12probig.jpg);
  }
  main section:nth-of-type(2) .sectionimg{
    background-image: url(../images/12big.jpg);
  }
  main section:nth-of-type(3) .sectionimg{
    width: 400px;
  }
}



@media only screen and (min-width: 768px) {
  nav{
    height: 44px;
    padding: 0em 0em;
  }
  nav .mainnav svg{
    width: 16px;
  }
  nav .mainnav .desktopview{
    display: flex;
  }
  nav .mainnav li{
    width: 44px;
    height: 44px;
  }
  nav .mainnav li:first-child{
    display: none;
  }
  main{
    padding-top: 44px;
  }
  nav .expand{
    display: none;
  }
}



@media only screen and (min-width: 780px) {
  main section:nth-of-type(3) .sectionimgcontainer{
    flex-direction: row;
    justify-content:center;
    width: calc(100% - 2em);
    margin-left: 0em;
  }
  main section:nth-of-type(3) .sectionimgcontainer img{
    width: calc(100% - 2em);
    margin: 1em 1em;
    width: calc(100vw / 3.5);
  }
}



@media only screen and (max-width: 780px) {
  footer section:nth-of-type(2) div{
    flex-direction: column;
  }
  footer section:nth-of-type(2) div .footersectionrows {
    width: 100%;
  }
  footer section:nth-of-type(2) h3{
    font-size: .95em;
    color: black;
    font-family: "SFProText-medium", Arial;
    padding: .7em 0 .7em 0 !important;
    border-top: 1px solid #d2d2d7;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  footer section:nth-of-type(2) .first{
    border-top: none;
  }
  footer section:nth-of-type(2) h3 span{
    transition: .3s;
    display: block;
  }
  footer section:nth-of-type(2) div ul{
    display: none;
    padding: 1em 0 1em 1em;
  }
  #mac .macchoices{
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
  }
  #mac .option{
    width: 100%;
    padding: 3em;
    max-width: 450px;
  }
  #mac .option:first-of-type{
    border-bottom: 1px solid var(--lightgray);
  }
  #mac .option:first-of-type::after{
    border-right: 0px solid var(--lightgray);
  }
}



/* ---------------------------------------------------------------hier staan de animaties*/
@keyframes blink {
  0% {
    outline-offset: 5px;
    outline: 4px solid #2997ff;
  }
  50% {
    outline-offset: 0px;
    outline: 0px solid #2997ff;
  }
  100% {
    outline-offset: 5px;
    outline: 4px solid #2997ff;
  }
}

@keyframes rotatingplus {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotatingmin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes showjobs {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-55%);
  }
}

@keyframes hidejobs {
  from {
    transform: translateX(-55%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes laser {
  0%   {
    opacity: 0;
  }
  50%  {
    opacity: 1;
    width: 0px;
  }
  60%  {
    width: 500px;
    transform: translateX(0);
  }
  100% {
    transform: translateX(5000px);
  }
}