@charset "UTF-8";

/* ••••••••••••••••••••••••••••••••
© 2008-now Harris Blondman
All rights reserved
www.harrisblondman.nl
•••••••••••••••••••••••••••••••• */


/* ! Notes *//*
================================ */
/* #note -> Projects, when getting ajax project in container, the scroll is triggered before the resize */
/* #note -> Possibility to play with page limit in case of lagging, bring down the limit */


/* #todo -> pop state recheck */
/* #todo -> Clean projets, delete projects */
  /* #todo -> move projects to Admin folder (to make) */
/* #todo -> move doesn't work through categories */
/* #todo -> export template/profile processwire when done (backup) */




/* ! Development *//*
================================ */


/* ! Structure *//*
================================ */
body {
/* #note -> Default, center */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

hr {
  display: none;
}

.assistive-text {
  display: none;
}


.container-main {
/* #note -> Default, center */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.header {
/* #note -> Default, center */
  width: auto;
  margin-top: 1em;
  margin-right: auto;
  margin-bottom: 1em;
  margin-left: auto;
  text-align: left;
}

.site-description {
  display: none;
}

.branding {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.branding h1 {
  display: inline-block;
  padding-right: calc(1.5em / 8);
  padding-left: calc(1.5em / 8);
}
.branding h1 a {
  display: inline-block;
  margin-right: calc(-0.55em / 8);
  margin-left: calc(-0.55em / 8);
}

.menu ul {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.menu-0 ul,
.menu-1 ul,
.menu-2 ul {
  padding-right: 1.5em;
  padding-left: 1.5em;
}
.menu li {
  display: inline-block;
  margin-right: 0.5em;
}
.menu li:last-child {
  margin-right: 0;
}

.menu-0 li {
/*   height: 6.5rem; */
  height: 0.963em;
}
.menu-1 li {
/*   height: 3.8rem; */
  height: 1.126em;
}
.menu-2 li {
/*   height: 2.1rem; */
  height: 1.244em;
}

.body-home .access-0 .menu-1,
.body-home .access-0 .menu-2,
.body-page .access-0 .menu-1,
.body-page .access-0 .menu-2 {
  display: none;
}


.bodier {
/* #note -> Default, center */
  width: auto;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}


/* #note -> General scroll title and text
--------------------------------------------*/
.entry-header {
  height: 1.2em;
  overflow: hidden;
}
.entry-header .header-container-scroll {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;

  padding-right: 1.5em;
  padding-left: 1.5em;
}
.entry-header h2,
.entry-header p {
  height: 3em;
}



/* #note -> Blog
--------------------------------------------*/
.body-home .container-scroll {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.body-home .container-scroll .entry-images,
.body-home .container-scroll .pagereference {
  display: inline-block;
  text-align: center;
}
.body-home .container-scroll .entry-images .entry-image, 
  .body-home .container-scroll .entry-images .entry-image p {
  display: inline-block;
}
.body-home .container-scroll .entry-images .entry-image img {
  display: inline-block;
  vertical-align: middle;
}

.body-home .entry {
  margin-bottom: 1em;
}
.body-home .entry h2 {
  height: 1.2em;
}

.body-home .entry-images-size-1 img {
/* #note -> Corresponding height in CSS and PHP */
  height: 25vh;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-home .entry-images-size-2 img {
  height: 50vh;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-home .entry-images-size-3 img {
  height: 75vh;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-home .entry-image {
  margin-right: 0.5em;

  -webkit-transition: margin-right 0.8s ease-in-out;
  -moz-transition: margin-right 0.8s ease-in-out;
  -o-transition: margin-right 0.8s ease-in-out;
  -ms-transition: margin-right 0.8s ease-in-out;
  transition: margin-right 0.8s ease-in-out;
}
.body-home .switch-resizeblog .entry-image {
  margin-right: 1.5em;
}

.body-home .entry-image:last-of-type {
  margin-right: 0;
}
.body-home .switch-resizeblog img {
/* #fix -> 2017-08-25 add margin bottom when full screen */
/*   height: calc(100vh - 1.2em); */
  height: calc(100vh - 2.4em);
}

.body-home .pagereference {
  width: 2em;
  vertical-align: top;
  margin-left: 1.5em;
}
.body-home .pagereference p {
  width: 100%;
  height: 100%;

  text-align: center;
  vertical-align: bottom;
  transition: ease-in-out 0.8s; 
}
.body-home .pagereference p a {
  padding: 1vh 2vh 1vh 2vh;
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translatey(-50%);
}

.body-home .entry-images-size-1 .pagereference p {
  height: 25vh;
}
.body-home .entry-images-size-2 .pagereference p {
  height: 50vh;
}
.body-home .entry-images-size-3 .pagereference p {
  height: 75vh;
}

.body-home .switch-resizeblog .pagereference p {
/*   height: calc(100vh - 1.2em) !important; */
/* #fix -> 2018-02-05 made difference in container-scroll height */
   height: calc(100vh - 2.4em);
}


/* #note -> video added 2019-03-27 */
.body-home .entry .container-scroll .videos {
  display: inline-block;
  vertical-align: middle;
}
.body-home .entry-images-size-1 video {
/* #note -> Corresponding height in CSS and PHP */
  height: 25vh;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-home .entry-images-size-2 video {
  height: 50vh;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-home .entry-images-size-3 video {
  height: 75vh;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-home .switch-resizeblog .videos video {
/* #fix -> 2017-08-25 add margin bottom when full screen */
/*   height: calc(100vh - 1.2em); */
  height: calc(100vh - 2.4em);

}

/* #note -> Projects
--------------------------------------------*/
.body-projects .sort-title {
  height: 1.2em;
  overflow: hidden;
}
.body-projects .sort-title-scroll {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.body-projects .sort-title-scroll p  {
  white-space: nowrap;
  height: 1em;

  padding-right: 1.5em;
  padding-left: 1.5em;
}


.body-projects .container-scroll {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0em;
  padding-left: 1.5em;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}


.body-projects .container-ajax {
  margin-top: 0em;
  margin-bottom: 1em;

  -webkit-transition: margin-top 0.8s ease-in;
  -moz-transition: margin-top 0.8s ease-in;
  -o-transition: margin-top 0.8s ease-in;
  -ms-transition: margin-top 0.8s ease-in;
  transition: margin-top 0.8s ease-in;
}
.body-projects .container-ajax.container-ajax-project {
  margin-bottom: 0em;
}
.body-projects .container-ajax.full-height {
  margin-top: 1em;
  margin-bottom: 1em;
}

.body-projects .container-ajax-project {
  height: 0;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-projects .container-ajax-project.full-height {
  height: calc(100vh);
}

.body-projects .container-ajax .container-scroll {
  height: 0;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-projects .container-ajax.full-height .container-scroll {
  height: calc(100vh - 1.2em);
}
.body-projects .container-ajax .header-container-scroll h2, 
.body-projects .container-ajax .header-container-scroll p {
  font-size: 0.1em;
  line-height: 0.1em;

  -webkit-transition: font-size ease-in-out 0.8s, line-height 0.8s ease-in-out;
  -moz-transition:font-size ease-in-out 0.8s, line-height 0.8s ease-in-out;
  -o-transition: font-size ease-in-out 0.8s, line-height 0.8s ease-in-out;
  -ms-transition: font-size ease-in-out 0.8s, line-height 0.8s ease-in-out;
  transition: font-size ease-in-out 0.8s, line-height 0.8s ease-in-out;
}
.body-projects .container-ajax.full-height .header-container-scroll h2,
.body-projects .container-ajax.full-height .header-container-scroll p {
  font-size: 1em;
  line-height: 1.3em;
}


.body-projects .container-scroll .entry {
  display: inline-block;
  margin-right: 1.5em;

}
.body-projects .container-scroll .entry-header {
  width: 100%;
  height: calc(1.2em * 0.666);
  overflow: hidden;
}
.body-projects .container-scroll .entry-header-scroll {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.body-projects .entry .entry-header-scroll h2  {
  white-space: nowrap;
  height: 3em;
  vertical-align: top;
  }

.body-projects .container-scroll .entry .entry-image-single-image {
  margin: 0;
}
.body-projects .container-scroll .entry p {
  vertical-align: middle;
}
.body-projects .container-scroll .entry img {
  height: 25vh;
}

/* #note -> Ajax container in Projects 
--------------------------------------------*/
.body-projects .container-ajax .entry-header {
  height: 0em;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-projects .container-ajax.full-height .entry-header {
  height: 1.2em;
}

.body-projects .entry .container-scroll {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.body-projects .entry .container-scroll .entry-image {
  display: inline-block;
}
.body-projects .entry .container-scroll .entry-image p {
  display: inline-block;
  margin-right: 1.5em;
}

.body-projects .entry .container-scroll .entry-image img {
  display: inline-block;
  vertical-align: middle;
  height: 1px;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}

.body-projects .full-height .entry .container-scroll .entry-image img {
/* #fix -> 2017-08-25 add margin bottom when full screen */
/*   height: calc(100vh - 1.2em); */
  height: calc(100vh - 2.4em);
}


/* #note -> video added 2019-03-26 */

.body-projects .entry .container-scroll .videos {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1.5em;

}
.body-projects .entry .container-scroll .videos  video {
  width: auto;
  height: 1px;

  -webkit-transition: height 0.8s ease-in-out;
  -moz-transition: height 0.8s ease-in-out;
  -o-transition: height 0.8s ease-in-out;
  -ms-transition: height 0.8s ease-in-out;
  transition: height 0.8s ease-in-out;
}
.body-projects .full-height .entry .container-scroll .videos video {
  height: calc(100vh - 2.4em);
  cursor: pointer;
}




/* #note -> Single project
--------------------------------------------*/
.body-project .container-scroll {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;

  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.body-project .container-scroll .entry images{
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
}
.body-project .container-scroll .entry-image,
  .body-project .container-scroll .entry-image p {
  display: inline-block;
  margin-right: 1em;
}
.body-project .container-scroll .entry-image img {
  display: inline-block;
  vertical-align: middle;
  height: 100vh;
}
/* #note -> Project fallback
--------------------------------------------*/
.body-project .menu-1,
.body-project .menu-2,
.body-project .footer {
  display: none;
}

.body-project .container-scroll {
  margin-bottom: 1.5em;
}


/* #note -> Page
--------------------------------------------*/
.body-page .entry-header {
  display: none;
}
.entry-footer {
  margin-bottom: 1.5em;
  padding-right: 1.5em;
  padding-left: 1.5em;
}
.entry-footer h3:first-of-type {
  margin-top: 0;
}
.entry-footer h3 {
  margin-top: 0.5em;
}

.entry-footer {
  padding-right: calc(50vw - 1.5em);
}

.entry-footer p + p {
  text-indent: 1em;
  margin-bottom: 0;
}

.body-page p {
  display: block;
}


h2 {
  display: inline-block;
}

p {
  display: inline-block;
}

.footer {
/*   display: none; */
/* #note -> Default, center */
  width: auto;
  margin-right: auto;
  margin-bottom: 2.5em;
  margin-left: auto;
  padding-right: 1.5em;
  padding-left: 1.5em;
  text-align: left;
}
.flag-handheld-true .footer {
  margin-bottom: 4em;
}
.body-page .access-4 {
  display: none;
}
.access-2 {
  display: none;
}
.flag-ajax-false .access-2 {
  display: block;
}
.access-4 {
  display: block;
}
.flag-ajax-false .access-4 {
  display: none;
}

.footer .colophon {
  display: none;
}


/* ! Styling *//*
================================ */
@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'Simplon Norm';
  src: 
    url(../fonts/SimplonNorm-Medium-WebXL.woff2) format('woff2'), 
    url(../fonts/SimplonNorm-Medium-WebXL.woff) format('woff'),
    url(../fonts/SimplonNorm-Medium-WebXL.ttf) format('truetype');
}


body {
  background-color: rgba(255, 255, 255, 1);
  font-size: 27px;
  font-family:
    'Simplon Norm',
    Helvetica,
    sans-serif;
  color: rgba(0, 0, 0, 1);
  line-height: 1.2em;
}

.branding {
  text-transform: uppercase;
}
.branding h1{
  padding-top: calc(1em / 13.5);
  font-size: 8em;
  line-height: 0.7em;
}

.menu {
  text-transform: uppercase;
}
.menu-0 li {
  font-size: 4em;
  line-height: 1em;
}
.menu-1 li {
  font-size: 2em;
  line-height: 1em;
}
.menu-2 li {
  font-size: 1em;
  line-height: 1em;
}

a {
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
}
a:link,
a:visited {
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: none;
}
a:focus {
  text-decoration: none;
}
.entry-header p a,
.entry-footer a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}

.sort-title {
  text-transform: uppercase;
}
.body-home .header-container-scroll h2 {
  line-height: 1.3em;
}
.body-projects .entry-header-scroll h2 {
  font-size: 0.666em;
  line-height: 1.3em;
}

.entry-footer h3 {
  font-size: 2em;
  line-height: 1.2em;
  text-transform: uppercase;
}
.entry-footer ul {
  list-style-position: inside;
  list-style-type: none;
}
.entry-footer ul li {
  padding: 0;
}
.entry-footer ul li::before {
  content: '\25CF';
  padding-right: 0.5em;
}


.flag-ajax-false .menu-0 .current-menu a {
  border-bottom: 5px solid currentColor;
  display: inline-block;
  line-height: 0.76em;
}
.flag-ajax-false .menu-1 .current-menu a {
  border-bottom: 5px solid currentColor;
  display: inline-block;
  line-height: 0.89em;
}
.flag-ajax-false .menu-2 .current-menu a {
  border-bottom: 5px solid currentColor;
  display: inline-block;
  line-height: 1em;
}

.flag-ajax-true.body-home .menu-0 .menu-item a,
.flag-ajax-true.body-projects .menu-0 .menu-item a,
.flag-ajax-true.body-project .menu-0 .menu-item a,
.flag-ajax-true.body-page .menu-0 .menu-item a {
  border-bottom: 5px solid currentColor;
  display: inline-block;
  line-height: 0.76em;
  width: 0%;
}
.switch-menu-transition.flag-ajax-true.body-home .menu-0 .menu-item a,
.switch-menu-transition.flag-ajax-true.body-projects .menu-0 .menu-item a,
.switch-menu-transition.flag-ajax-true.body-project .menu-0 .menu-item a,
.switch-menu-transition.flag-ajax-true.body-page .menu-0 .menu-item a {
  -webkit-transition: : width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  -ms-transition: width 1s;
  transition: width 1s;
}
.flag-ajax-true.body-home .menu-0 .menu-item a:hover,
.flag-ajax-true.body-projects .menu-0 .menu-item a:hover,
.flag-ajax-true.body-project .menu-0 .menu-item a:hover,
.flag-ajax-true.body-page .menu-0 .menu-item a:hover {
  width: 100%;
}
.flag-ajax-true.body-home .menu-0 .menu-item-home a,
.flag-ajax-true.body-projects .menu-0 .menu-item-projects a,
.flag-ajax-true.body-project .menu-0 .menu-item-projects a,
.flag-ajax-true.body-page .menu-0 .menu-item-page a {
  width: 100%;

}
.flag-ajax-true .menu-1 a {
  border-bottom: 5px solid currentColor;
  display: inline-block;
  line-height: 0.89em;
  width: 0%;
}
.switch-menu-transition.flag-ajax-true .menu-1 a {
  -webkit-transition: : width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  -ms-transition: width 1s;
  transition: width 1s;
}
.flag-ajax-true .menu-1 a:hover {
  width: 100%;
}
.flag-ajax-true .menu-1 a.ajax-current {
  width: 100%;
}

.flag-ajax-true .menu-2 a {
  border-bottom: 5px solid currentColor;
  display: inline-block;
  line-height: 1em;
  width: 0%;

}
.switch-menu-transition.flag-ajax-true .menu-2 a {
  -webkit-transition: : width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  -ms-transition: width 1s;
  transition: width 1s;
}
.flag-ajax-true .menu-2 a:hover {
  width: 100%;
}
/* #todo -> for Joris */
.flag-ajax-true .menu-2 a.ajax-current {
  width: 100%;
}


.footer .access-4 p a {
  font-size: 1em;
  line-height: 1em;
}

.credits {
 display: none;
}
.body-page .credits {
 display: block;
}
.credits {
  font-size: 0.5em;
  line-height: 1.2em;
}

/* #fix -> 2018-04-16 */
.credits p a {
  text-decoration: underline;
}
.credits p a:link,
.credits p a:visited {
  text-decoration: underline;
}
.credits p a:hover,
.credits p a:active {
  text-decoration: none;
}
.credits p a:focus {
  text-decoration: underline;
}



/* ! Manipulation *//*
================================ */

/*
Option 1: classic
------------------------ */

/*
.body-projects .loading .entry-image {
  transform: scale(1);

  animation-name: loadingproject;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes loadingproject {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.5);
  }
}
*/

/* Option 2: underline
------------------------ */

/*
.body-projects .entry-image img {
  transform: scale(1);

  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.body-projects .loading .entry-image img{
  transform: scale(0.8);
}

.body-projects .entry-image {
  border-bottom: 5px solid currentColor;
  width: 0;
  height: calc(25vh - 5px);

  -webkit-transition: width 0.8s ease-in-out;
  -moz-transition: width 0.8s ease-in-out;
  -o-transition: width 0.8s ease-in-out;
  -ms-transition: width 0.8s ease-in-out;
  transition: width 0.8s ease-in-out;
}
.body-projects .loading .entry-image {
  border-bottom: 5px solid currentColor;
  width: 100%;
}
*/

/* Option 3: disappear
------------------------ */

/*
.body-projects .container-scroll .entry,
.body-projects .container-scroll .entry .entry-image-single-image,
.body-projects .container-scroll .entry img,
.body-projects .container-scroll .entry .entry-header {
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.body-projects .container-scroll .entry.loading,
.body-projects .container-scroll .entry.loading .entry-image-single-image,
.body-projects .container-scroll .entry.loading img,
.body-projects .container-scroll .entry.loading .entry-header {
  width: 1px !important;
  margin-right: 0;

  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
*/


/* Option 4: Black blink
------------------------ */
.body-projects .entry-image-single-image .entry-image img {
  opacity: 1;

  -webkit-transition: opacity 0.8s ease-in-out;
  -moz-transition: opacity 0.8s ease-in-out;
  -o-transition: opacity 0.8s ease-in-out;
  -ms-transition: opacity 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out;
}

.body-projects .loading .entry-image-single-image .entry-image img {
  opacity: 0.5;
  -webkit-animation: loadingproject 0.5s ease-in-out infinite alternate forwards;
  animation: loadingproject 0.5s ease-in-out infinite alternate forwards;
}
@keyframes loadingproject {
  0% { opacity: 1; }
  100% { opacity: 0.5; }
}

.body-projects .loading-selected .entry-image-single-image .entry-image img {
  opacity: 0.5;
}

.body-projects .loading .entry-image-single-image .entry-image p,
.body-projects .loading-selected .entry-image-single-image .entry-image p {
  background-color: black;
}



/* ! Interface *//*
================================ */
/*
body, 
input, 
button, 
select, 
textarea {
  text-rendering: optimizelegibility;
}
*/

input, 
button, 
select, 
textarea {
  border-radius: 0;
  appearance: none;
}


body, 
input, 
button, 
select, 
textarea {
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.body-home .entry h2 a, 
.flag-ajax-true .entry h2 a {
  pointer-events: none;
}

.body-home .entry img:hover {
  cursor: pointer;
}
.body-home .entry.switch-resizeblog img:hover {
  cursor: zoom-out;
}

.body-projects .entry:hover {
  cursor: pointer;
}

.body-projects .container-ajax img:hover {
  cursor: e-resize;
}

.body-projects .container-ajax .entry-image:last-of-type img:hover {
  cursor: w-resize;
}

.body-projects .container-ajax .entry-image:only-of-type img:hover {
  cursor: default;
}

.container-ajax .entry:hover {
  cursor: auto;
}




/* ! Responsive *//*
================================ */
/*
@media screen and (min-width: 1601px) {
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1440px) {
}
*/
@media screen and (max-width: 1280px) {
  .entry-footer {
  padding-right: calc(25vw - 1.5em);
  }
}
/*
@media screen and (max-width: 1120px) {
}

@media screen and (max-width: 960px) {
}

@media screen and (max-width: 800px) {
}


*/

@media screen and (max-width: 750px) and (orientation: landscape),
screen and (max-width: 480px) {
  body {
  font-size: 15px;
  }

  .flag-ajax-true.body-home .menu-0 .menu-item a,
  .flag-ajax-true.body-projects .menu-0 .menu-item a,
  .flag-ajax-true.body-project .menu-0 .menu-item a,
  .flag-ajax-true.body-page .menu-0 .menu-item a {
    border-bottom: 3px solid transparent;
  }
  .flag-ajax-true.body-home .menu-0 .menu-item-home a,
  .flag-ajax-true.body-projects .menu-0 .menu-item-projects a,
  .flag-ajax-true.body-project .menu-0 .menu-item-projects a,
  .flag-ajax-true.body-page .menu-0 .menu-item-page a {
    border-bottom: 3px solid currentColor;
  }
  .flag-ajax-true .menu-1 a {
    border-bottom: 3px solid transparent;
  }
  .flag-ajax-true .menu-1 a.ajax-current {
    border-bottom: 3px solid currentColor;
  }
  .flag-ajax-true .menu-2 a {
    border-bottom: 3px solid transparent;

  }
  .flag-ajax-true .menu-2 a.ajax-current {
    border-bottom: 3px solid currentColor;
  }

  .body-projects .sort-title {
  font-size: 2em;
  line-height: 1em;
  }
  .body-projects .sort-title-scroll p  {
  padding-right: calc(1.5em / 2);
  padding-left: calc(1.5em / 2);
  }
  .body-projects .container-scroll .entry-header {
    height: calc(1.2em * 1);
  }
  .body-projects .entry-header-scroll h2 {
  font-size: 1em;
  }

  .entry-footer {
  padding-right: 1.5em;
  }

  .footer .access-4 p a,
  .body-home .pagereference p a {
  font-size: 2em;
  }

  .body-home .pagereference {
    width: calc((5em / 15) * 27);
  }
}
/*
@media screen and (max-width: 320px) {
}
*/

/*
@media screen and (min-width: 0) {
}

@media screen and (min-width: 320px) {
}

@media screen and (min-width: 480px) {
}

@media screen and (min-width: 640px) {
}

@media screen and (min-width: 800px) {
}

@media screen and (min-width: 960px) {
}

@media screen and (min-width: 1120px) {
}

@media screen and (min-width: 1280px) {
}

@media screen and (min-width: 1440px) {
}

@media screen and (min-width: 1600px) {
}
*/


/* ! Print *//*
================================ */
/*
@media print {
}
*/


/* ! Utilities *//*
================================ */

/* Blocks, General
-------------------------------- */
.flag-blocks-true  p {                                               background-color: rgba(255, 255, 255, 0.5); }
.flag-blocks-true  li {                                              background-color: rgba(255, 255, 255, 0.5); }
.flag-blocks-true  li li {                                           background-color: transparent; }
.flag-blocks-true  dt, .flag-blocks-true dd {                        background-color: rgba(255, 255, 255, 0.5); }
.flag-blocks-true  address {                                         background-color: rgba(255, 255, 255, 0.5); }
.flag-blocks-true  h1, .flag-blocks-true h2, .flag-blocks-true h3, 
.flag-blocks-true  h4, .flag-blocks-true h5, .flag-blocks-true h6 {  background-color: rgba(255, 255, 255, 0.5); }
.flag-blocks-true  form {                                            background-color: rgba(255, 255, 255, 0.5); }

/* Blocks, Structure
-------------------------------- */
.flag-blocks-true  .container-main {                                 background-color: rgba(0, 0, 0, 0.1); }

.flag-blocks-true    .header {                                       background-color: rgba(0, 0, 0, 0.1); }
.flag-blocks-true      .branding {                                   background-color: rgba(127, 255, 255, 0.25); }
.flag-blocks-true        .site-title {                               background-color: rgba(255, 127, 255, 0.25); }
.flag-blocks-true        .site-description {                         background-color: rgba(255, 255, 127, 0.25); }
.flag-blocks-true      .header .access {                             background-color: rgba(127, 255, 255, 0.25); }
.flag-blocks-true        .header .access .assistive-text {           background-color: rgba(255, 127, 255, 0.25); }
.flag-blocks-true        .header .access .menu {                     background-color: rgba(255, 255, 127, 0.25); }
.flag-blocks-true        .header .access .menu-1 {                   background-color: rgba(255, 150, 0, 0.25); }
.flag-blocks-true        .header .access .menu-2 {                   background-color: rgba(255, 150, 255, 0.25); }


.flag-blocks-true    .bodier {                                       background-color: rgba(0, 0, 0, 0.1); }
.flag-blocks-true      .content {                                    background-color: rgba(0, 0, 0, 0.1); }
.flag-blocks-true        .content .entry-first {                     background-color: rgba(255, 127, 127, 0.25); }
.flag-blocks-true        .content .entry {                           background-color: rgba(0, 0, 0, 0.1); }
.flag-blocks-true          .content .entry-container {               background-color: rgba(127, 255, 127, 0.25); }
.flag-blocks-true            .content .entry .entry-header {         background-color: rgba(127, 127, 255, 0.25); }
.flag-blocks-true            .content .entry .entry-bodier {         background-color: rgba(127, 255, 255, 0.25); }
.flag-blocks-true            .content .entry .entry-footer {         background-color: rgba(255, 127, 255, 0.25); }
.flag-blocks-true            .content .entry .entry-video {          background-color: rgba(255, 255, 127, 0.25); }
.flag-blocks-true            .content .entry .entry-images {         background-color: rgba(127, 255, 255, 0.25); }

.flag-blocks-true    .footer {                                       background-color: rgba(0, 0, 0, 0.1); }
.flag-blocks-true      .footer .access {                             background-color: rgba(127, 255, 255, 0.25); }
.flag-blocks-true        .footer .access .assistive-text {           background-color: rgba(255, 127, 255, 0.25); }
.flag-blocks-true        .footer .access .menu {                     background-color: rgba(255, 255, 127, 0.25); }
.flag-blocks-true      .colophon {                                   background-color: rgba(255, 127, 127, 0.25); }
.flag-blocks-true        .content-colophon {                         background-color: rgba(127, 255, 127, 0.25); }
.flag-blocks-true          .colophon .assistive-text {               background-color: rgba(127, 127, 255, 0.25); }
.flag-blocks-true          .colophon .legal {                        background-color: rgba(127, 255, 255, 0.25); }
.flag-blocks-true          .colophon .copyright-notice {             background-color: rgba(255, 127, 255, 0.25); }

/* .flag-blocks-true          .entry {                                  background-color: rgba(255, 0, 0, 0.25); } */
.flag-blocks-true          .entry .container-scroll {                background-color: rgba(255, 0, 0, 0.25); }
.flag-blocks-true          .entry .container-scroll .entry-images {  background-color: rgba(0, 0, 255, 0.25); }
.flag-blocks-true          .entry .container-scroll .entry-image {  background-color: rgba(0, 255, 0, 0.25); }

/* ! Index, Structure *//*
================================ */

/* Display & Visibility
--------------------------------
display
flex
visibility
opacity
 */

/* Position
--------------------------------
position
top
right
bottom
left
z-index
clip
 */

/* Float & Clear
--------------------------------
float
clear
 */

/* Width & Height
--------------------------------
width
  min-width
  max-width
height
  min-height
  max-height
overflow
  overflow-x
  overflow-y
 */

/* Margin
--------------------------------
margin
  margin-top
  margin-right
  margin-bottom
  margin-left
 */

/* Padding
--------------------------------
padding
  padding-top
  padding-right
  padding-bottom
  padding-left
 */

/* Text
--------------------------------
text-align
vertical-align
white-space
text-overflow
direction
unicode-bidi
 */

/* Table
--------------------------------
table-layout
empty-cells
border-spacing
border-collapse
caption-side
 */


/* ! Index, Manipulation *//*
================================ */

/* Animation
--------------------------------
will-change
animation
keyframes
 */

/* Transition
--------------------------------
will-change
transition
 */

/* Transform
--------------------------------
will-change
transform
transform-origin
transform-style
backface-visibility
perspective
perspective-origin
 */


/* ! Index, Styling *//*
================================ */

/* Background
--------------------------------
background
  background-color
  background-image
  background-repeat
  background-attachment
  background-position
background-origin
background-size
background-clip
 */

/* Border
--------------------------------
border
  border-top
  border-right
  border-bottom
  border-left
    border-width
    border-style
    border-color
 */

/* Font
--------------------------------
font
  font-style
  font-variant
  font-weight
  font-size
  font-family
font-size-adjust
color
text-decoration
text-shadow
text-transform
text-stroke
 */

/* Text
--------------------------------
line-height
word-spacing
letter-spacing
text-indent
font-stretch
 */

/* Media
--------------------------------
fill
  fill-opacity
  fill-rule
stroke
  stroke-opacity
  stroke-width
  stroke-linecap
  stroke-dasharray
filter
 */

/* List
--------------------------------
list-style
  list-style-type
  list-style-position
  list-style-image
marker-offset
 */

/* Generated
--------------------------------
content
quotes
counter-reset
counter-increment
 */


/* ! Index, Interface *//*
================================ */

/* Miscellaneous
--------------------------------
border-radius
outline
  outline-color
  outline-style
  outline-width
appearance
text-rendering
cursor
pointer-events
overflow-scrolling
 */


/* ! Index, Miscellaneous *//*
================================ */

/* Vendor Prefixed
--------------------------------
  -webkit-attribute: value;
  -moz-attribute: value;
  -o-attribute: value;
  -ms-attribute: value;
  attribute: value;
*/