/* 2020 Koen van der Marel */

/* Font faces */
@font-face {
  font-family: 'Segoe UI Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Regular'), url('../webfonts/Segoe UI.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Segoe UI Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Italic'), url('../webfonts/ UI Italic.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Segoe UI Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Bold'), url('../webfonts/ UI Bold.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Segoe UI Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Bold Italic'), url('../webfonts/ UI Bold Italic.woff') format('woff');
  }

/* Body basic instellingen */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Segoe UI Regular';
}

html {
    scroll-behavior: smooth;
    overflow: hidden;
}

/* Fade in */
@-webkit-keyframes fadein {
    from {opacity:0}
    to {opacity:1}
}

@keyframes fadein {
    from {opacity:0}
    to {opacity:1}
}

/* Fade out */
@-webkit-keyframes fadeout {
    from {opacity:1}
    to {opacity:0}
}

@keyframes fadeout {
    from {opacity:1}
    to {opacity:0}
}

/* Images */
img.background {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;  
}

@media only screen and (min-width: 1600px) {
    img.background {
        background-size: 100%;
    }
  }

img.img_me {
    margin-top: 5%;
    width: 15em;
    height: 15em;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    object-fit: cover;
}

img.img_proj {
  width: 70%;
  padding-top: 10%;
}

/* Inner div */
div.me {
    content: '';
    opacity: 0;
    animation-duration: 1s;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -15vw;
    width: 30vw;
    height: 80%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .div.me {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

div.begin {
  animation-duration: 0.3s;
}

div.exweb, .exserv, .caps, .arag, .gmodcity {
  opacity: 0;
  display: none;
  animation-duration: 0.3s;
}

div.grid {
    position: absolute;
    vertical-align: bottom;
    bottom: 0;
    margin-bottom: 5%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

div.grid_proj {
  position: absolute;
  vertical-align: bottom;
  bottom: 0;
  margin-bottom: 5%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

div.icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 10px;
}

div.icons i {
    cursor: default;
}

div.icons i:hover {
    transform: scale(1.0);
}

div.project_grid {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 0 10px 0;
}

div.project_grid img {
    grid-row-start: 1;
    grid-row-end: 3;
    width: 80%;
    margin: auto;
}

/* Text */
h1 {
    font-family: "Segoe UI Regular";
    color: white;
    font-weight: 100;
    margin: auto;
}

.project_grid h1 {
    font-size: 25px;
}

h2 {
    font-family: "Segoe UI Regular";
    color: white;
    font-size: medium;
    font-weight: 100;
    width: 80%;
    margin: auto;
}

p {
    font-family: "Segoe UI Regular";
    color: white;
    font-size: medium;
    font-weight: 100;
    width: 80%;
    margin: 10px auto 10px auto;
}

div.project_grid h1 {
    font-weight: bold;
    padding: 10px 10px 10px 10px;
    transition: box-shadow 2s ease-in-out;
}

div.btn-terug {
  position: absolute;
    width: 3rem;
    height: 3rem;
    top: 5%;
    margin-left: 3%;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer; 
    z-index: 1001; /* Sit on top of everything */
  /*  opacity: 0;  Hide buttons until carousel is initialised 
    transition:opacity 1s;*/
}

div.btn-terug:after {
  content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 55%;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: translate(-50%, -50%) rotate(135deg);
    
}

/* Material icons */
.white {
    color: #FFF;
    cursor: pointer;
    transition: all .1s ease-in-out;
}

.white2 {
  color: #FFF;
  transition: all .1s ease-in-out;
}

.white:hover {
    transform: scale(1.5);
}

/* Carrousel */
/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
    overflow: hidden;
    width: 90%;
    height: 25vh;
    margin: auto;
    padding: 0 5% 0 5%;
    
     display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    font-weight: bold;
    font-size: 32px;
    flex: 1;
}
  
  /* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
  .carousel-wrapper * {
    box-sizing: border-box;
  }
  
  /* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
  .carousel {
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    height: 100%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
      
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 20vh;
    width: 100%;
}
  
  /* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
  .carousel__photo {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    margin: auto;
    padding: 1rem 4rem;
    z-index: 100;
    transition: transform .5s, opacity .5s, z-index .5s;
  }
  
  /* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
  .carousel__photo.initial,
  .carousel__photo.active {
    opacity: 1;
    position: relative;
    z-index: 900;
  }

  .carousel__photo.active h1 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .project_grid h1:hover {
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  }
  
  /* Set 'z-index' to sit behind our '.active' item. */
  .carousel__photo.prev,
  .carousel__photo.next {
    z-index: 800;
  }
  
  /* Translate previous item to the left */
  .carousel__photo.prev {
    transform: translateY(-100%);
  }
  
  /* Translate next item to the right */
  .carousel__photo.next {
    transform: translateY(100%);
  }
  
  /* Style navigation buttons to sit in the middle, either side of the carousel. */
  .carousel__button--prev,
  .carousel__button--next {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer; 
    z-index: 1001; /* Sit on top of everything */
  /*  opacity: 0;  Hide buttons until carousel is initialised 
    transition:opacity 1s;*/
  }
  
  .carousel__button--prev {
    left:0;
  }
  
  .carousel__button--next {
    right:0;
  }
  
  /* Use pseudo elements to insert arrows inside of navigation buttons */
  .carousel__button--prev::after,
  .carousel__button--next::after {
    content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 54%;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: translate(-50%, -50%) rotate(135deg);
    
  }
  
  .carousel__button--next::after {
    left: 47%;
    transform: translate(-50%, -50%) rotate(-40deg);
  }

@media only screen and (max-width: 1200px) {
    div.me {
        width: 45%;
        left: 42.5vw;
    }
  }

@media only screen and (max-width: 850px) {
    div.me {
        width: 60%;
        left: 35vw;
    }
  }

@media only screen and (max-width: 600px) {
    div.me {
        width: 90%;
        left: 50vw;
        transform: translateX(-30vw);
    }

    .project_grid h1 {
      font-size: small;
      width: 100%;
    }
  }