/*
Theme Name: Uchronia
Theme URI: http://wordpress.org/themes/uchronia
Author: Rifke Sadleir
Author URI: https://rifke.world/
Description: 
Version: 1
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: 
Text Domain: uchronia

Uchronia WordPress Theme © 2018 Rifke Sadleir
Uchronia is distributed under the terms of the GNU GPL
*/

@font-face {
	font-family: 'lars';
	src: url('fonts/Lars-Light.eot');
	src: url('fonts/Lars-Light.eot?#iefix') format('embedded-opentype');
	src: url('fonts/Lars-Light.woff2') format('woff2'),
			 url('fonts/Lars-Light.woff') format('woff'),
			 url('fonts/Lars-Light.ttf') format('truetype');
}

.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/*BASE STYLES*/

html, body {
  width: 100%;
  padding: 0;
  margin: 0;
  transition: background-color 0.3s ease;
}

body {
  background-color: #fff;
  color: #000;
}

body.invertColours {
  background-color: #000;
  color: #fff;
}

#ajaxOuter {
  opacity: 1;
  transition: filter 1s ease, -webkit-filter 1s ease, opacity 1s ease;
}

body.ajaxing #ajaxOuter {
  opacity: 0;
  -webkit-filter: blur(6px);
  filter: blur(6px);
  transition: filter 0.3s ease, -webkit-filter 0.3s ease, opacity 0.3s 0.3s ease;
}

::-webkit-scrollbar {
  display: none;
}

div {
  box-sizing: border-box;
}

a,a:hover,a:visited {
  color: #000;
}

.invertColours a,
.invertColours a:hover,
.invertColours a:visited {
  color: #fff;
}

*, a {
  outline: none;
  cursor: none !important;
  font-family: 'lars', sans-serif;
  font-weight: normal;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-tap-highlight-color: transparent;
}

* {
  font-size: 16pt;
}

@media(min-width: 768px) {
  * {
    font-size: 18pt;
  }
}

@media(min-width: 1200px) {
  * {
    font-size: 20pt;
  }
}

/*AUTHOR'S STYLES*/

.aboutButton {
  cursor: pointer;
  padding-right: 0 !important;
}

.background-gradient {
  position: fixed;
  top: 0;
  left: -500vw;
  height: 100vh;
  width: 1400vw;
  background: rgb(250,16,76);
  background: linear-gradient(90deg, rgba(250,16,76,1) 8.333%, rgba(46,234,125,1) 24.999%, rgba(255,203,54,1) 41.665%, rgba(133,151,173,1) 58.331%, rgba(255,66,2,1) 74.997%, rgba(125,106,132,1) 100%);
  transition: opacity 0.4s ease;
  z-index: 3;
}

.menuVisibilityVisible .background-gradient {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.screensaver .background-gradient {
  opacity: 0;
  transition: opacity 2s ease;
}

.circle-container {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 80px;
  padding-bottom: 40px;
  height: 100vh;
  width: 100vw;
  transition: filter 1s ease, -webkit-filter 1s ease, opacity 0.4s ease;
  z-index: 1;
}

.iOS .circle-container,
.touchscreen .circle-container {
  padding-bottom: 100px !important;
}

@media(min-width: 768px) {
  .circle-container {
    padding-left: 100px;
    padding-right: 100px;
  }
}

@media(min-height: 500px) {
  .circle-container {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .iOS .circle-container,
  .touchscreen .circle-container {
    padding-bottom: 160px !important;
  }
}

.home .circle-container.opaque {
  opacity: 1 !important;
  transition: opacity 0.6s 0.4s ease;
}

body.ajaxing .circle-container {
  opacity: 0;
  -webkit-filter: blur(6px);
  filter: blur(6px);
  transition: filter 0.3s ease, -webkit-filter 0.3s ease, opacity 0.4s ease;
}

.screensaver .circle-container {
  opacity: 1;
  transition: opacity 1.2s 1s ease;
}

.circle {
  height: 100%;
  width: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background-color: #fc0;
  z-index: 2;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.postscreensaver .circle {
  background-color: #ffcb36;
  opacity: 0;
  transition: background-color 0.6s ease, opacity 1.2s ease;
}

.hover-projects .circle {
  background-color: #18194F;
}

.hover-workshops .circle {
  background-color: #2eea7d;
}

.hover-writing .circle {
  background-color: #ffcb36;
}

.hover-talks .circle {
  background-color: #8597AD;
}

.hover-exhibitions .circle {
  background-color: #FF4202;
}

.hover-manifesto .circle {
  background-color: navajowhite;
}

.hover-press .circle {
  background-color: #7D6A84;
}

.screensaver .circle {
  animation-name: circleanimation;
  animation-iteration-count: infinite;
  animation-duration: 60s;
}

.prescreensaver .circle {
  background-color: #ffcb36;
  transition: background-color 0.6s ease, opacity 0.6s ease;
}

@keyframes circleanimation {
  0%, 100% {
    background-color: #ffcb36;
  }
  17% {
    background-color: #8597AD;
  }
  34% {
    background-color: #FF4202;
  }
  51% {
    background-color: #18194F;
  }
  68% {
    background-color: #2eea7d;
  }
  85% {
    background-color: #7D6A84;
  }
}

.credit {
  font-size: 10pt;
}

.row-item {
  padding-bottom: 1.2em;
}

@media(max-width: 499px) {
  .img-holder-fixed {
    width: 100%;
    padding: 12px;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .img-holder-fixed img {
    width: 100%;
    height: auto;
  }
  .row-item-img-hover:hover .img-holder-fixed {
    opacity: 1;
    transition: opacity 0.4s ease;
  }
}

@media(min-width: 500px) {
  .img-holder-fixed {
    text-align: right;
    box-sizing: border-box;
    position: fixed;
    top: 90px;
    padding: 0;
    right: 25px;
    width: 40vw;
    height: 80vh;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .img-holder-fixed img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
  }
  .row-item-img-hover:hover .img-holder-fixed {
    opacity: 1;
    transition: opacity 0.4s ease;
  }
}

.container-fluid-vertical-padding {
  padding-top: 90px;
  padding-bottom: 90px;
}

.writing-link {
  text-decoration: none;
  color: #000;
  transition: color 0.4s 0.2s ease;
}

.invertColours .writing-link {
  color: #fff;
}

.writing-link * {
  color: inherit !important;
}

.writing-link:hover {
  color: #ffcb36;
  transition: color 0.4s ease;
}

.press-link,
.talks-link {
  text-decoration: none;
  color: #000;
  transition: color 0.4s 0.2s ease;
}

.invertColours .talks-link {
  color: #fff;
}

.press-link * {
  color: inherit !important;
}

.press-link:hover {
  color: #7D6A84;
  transition: color 0.4s ease;
}

.talks-link * {
  color: inherit !important;
}

.talks-link:hover {
  color: #8597AD;
  transition: color 0.4s ease;
}

.exhibitions-link {
  text-decoration: none;
  color: #000;
  transition: color 0.6s ease;
}

.invertColours .exhibitions-link {
  color: #fff;
}

.exhibitions-link * {
  color: inherit !important;
}

.exhibitions-link:hover {
  color: #FF4202;
  transition: color 0.4s ease;
}

.manifesto-link {
  text-decoration: none;
  color: #000;
  transition: color 0.6s ease;
}

.invertColours .manifesto-link {
  color: #fff;
}

.manifesto-link * {
  color: inherit !important;
}

.manifesto-link:hover {
  color: navajowhite;
  transition: color 0.4s ease;
}

#headerMenu {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 8px;
  z-index: 3;
  transition: height 0.4s 0.4s ease, background-color 1.2s 0.4s ease, filter 0.4s ease, -webkit-filter 0.4s ease, opacity 0.4s ease;
}

.menuVisibilityVisible #headerMenu {
  background-color: #fff;
  transition: height 0.4s ease, background-color 0.4s ease, filter 0.4s ease, -webkit-filter 0.4s ease, opacity 0.4s ease;
}

.invertColours #headerMenu {
  background-color: #000;
}

.invertColours .menuVisibilityVisible #headerMenu {
  background-color: #000;
}

.ajaxing #headerMenu,
.ajaxing.menuVisibilityVisible #headerMenu,
.home #headerMenu {
  background-color: transparent !important;
}

@media(min-width: 1200px) {
  #headerMenu {
    background: linear-gradient(66deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 75%);
    background-size: 400% 400%;
    background-position: 25% 0;
    z-index: 3;
    transition: height 0.2s 0.4s ease, background-position 0.2s 0.4s ease, filter 0.4s ease, -webkit-filter 0.4s ease, opacity 0.4s ease;
  }
  .menuVisibilityVisible #headerMenu {
    background: linear-gradient(66deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 75%);
    background-size: 400% 400%;
    background-position: 25% 0;
    transition: height 0.4s ease, background-position 0.4s ease, filter 0.4s ease, -webkit-filter 0.4s ease, opacity 0.4s ease;
  }
  .invertColours #headerMenu {
    background: linear-gradient(66deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%);
  }
  .invertColours.menuVisibilityVisible #headerMenu {
    background: linear-gradient(66deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%);
  }
}

.home #headerMenu {
  background: linear-gradient(66deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 75%);
  animation: none !important;
}

.invertColours.home #headerMenu {
  background: linear-gradient(66deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%);
}

@media(min-width: 1200px) {
  .invertColours.menuVisibilityVisible.home #headerMenu,
  .invertColours.home #headerMenu {
    background: linear-gradient(rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%);
  }
  .menuVisibilityVisible.home #headerMenu,
  .home #headerMenu {
    background: linear-gradient(rgba(255,255,255,1) 25%, rgba(255,255,255,0) 75%);
  }
}

.menuVisibilityVisible #ajaxOuter {
  pointer-events: none;
}

@media(min-width: 1200px) {
  #headerMenu {
    height: 60px;
  }
  .menuVisibilityVisible #headerMenu {
    height: 96px;
  }
}

@media(min-width: 1200px) {
  #headerMenu {
    height: 72px;
  }
  .menuVisibilityVisible #headerMenu {
    height: 133px;
  }
}

#menu {
  pointer-events: none;
  opacity: 0;
  padding-top: 6px;
  height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.menuVisibilityVisible #menu {
  overflow-x: visible !important;
  overflow-y: hidden;
  height: auto;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.4s 0.4s ease;
}

#menuRow {
  opacity: 0;
  pointer-events: none;
}

.menuVisibilityVisible #menuRow {
  opacity: 1;
  pointer-events: auto;
}

@media(min-width: 1200px) {
  #menu {
    padding-left: 25px;
    white-space: nowrap !important;
    transition: opacity 0.4s ease, height 0.1s 0.4s ease;
  }
  .menuVisibilityVisible #menu {
    height: 36px;
    transition: opacity 0.4s 0.4s ease;
  }
}

@media(min-width: 1200px) {
  .menuVisibilityVisible #menu {
    height: 42px;
  }
}

.menuVisibilityVisible #ajaxOuter {
  -webkit-filter: blur(6px);
  filter: blur(6px);
  opacity: 0.8;
}

.screensaver #ajaxOuter {
  -webkit-filter: blur(12px);
  filter: blur(12px);
  transition: filter 2.4s ease, -webkit-filter 2.4s ease, opacity 0.4s ease;
}

.screensaver #headerMenu {
  background: linear-gradient(66deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 75%);
  -webkit-filter: blur(12px);
  filter: blur(12px);
  transition: filter 2.4s ease, -webkit-filter 2.4s ease, height 0.4s ease, background-position 0.2s ease, filter 0.4s ease, -webkit-filter 0.4s ease, opacity 0.4s ease;
}

.invertColours.screensaver #headerMenu {
  background: linear-gradient(66deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%);
}

.menuVisibilityVisible .circle-container {
  -webkit-filter: blur(6px);
  filter: blur(6px);
}

.screensaver .circle-container {
  opacity: 1;
  transition: opacity 2s ease;
}

@media(max-width: 1199px) {
  #menu {
    width: 100%;
    display: block;
    position: fixed;
    left: 0;
    top: 60px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 200px;
    overflow-y: scroll;
    height: 100%;
    z-index: 2;
  }
  .menuVisibilityVisible #menu {
    height: 100%;
  }
}

.itemTitleHolder {
  transition: opacity 0.4s ease;
}

.menu-item {
  padding-right: 32px;
  white-space: nowrap !important;
  cursor: pointer !important;
}

@media(max-width: 1200px) {
  .menu-item {
    padding-right: 0;
  }
}

.menu-item a,
#logo a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.no-underline {
  text-decoration: none !important;
}

.readLessMoreButton {
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  color: #aaa;
}

@media(min-width: 500px) {
  .columns {
    column-count: 2;
  }
}

.ps p {
  margin-bottom: 1em;
}

.readLess .long {
  display: none !important;
}

.readMore .short {
  display: none !important;
}

.projectsText a:hover {
  color: #18194F;
}

.workshopsText a:hover {
  color: #2eea7d;
}

.writingText a:hover {
  color: #ffcb36;
}

.talksText a:hover {
  color: #8597AD;
}

.exhibitionsText a:hover {
  color: #FF4202;
}

.manifestoText a:hover {
  color: navajowhite;
}

.pressText a:hover {
  color: #7D6A84;
}

.itemTitle {
  white-space: nowrap;
  transition: color 0.3s ease;
}

.accentColor-projects .itemTitle {
  color: #18194F;
}
.accentColor-workshops .itemTitle {
  color: #2eea7d;
}
.accentColor-writing .itemTitle {
  color: #ffcb36;
}
.accentColor-talks .itemTitle {
  color: #8597AD;
}
.accentColor-exhibitions .itemTitle {
  color: #FF4202;
}
.accentColor-manifesto .itemTitle {
  color: navajowhite;
}
.accentColor-press .itemTitle {
  color: #7D6A84;
}

#cursor {
  position: fixed;
  pointer-events: none;
  width: 0;
  height: 0;
  z-index: 999;
  background-image: url('site-icons/about-32x32.png');
  background-size: cover;
  background-repeat: no-repeat;
  transition: width 0.2s ease, height 0.2s ease;
}

.accentColor-projects #cursor {
  background-image: url('site-icons/projects-32x32.png');
}
.accentColor-workshops #cursor {
  background-image: url('site-icons/workshops-32x32.png');
}
.accentColor-writing #cursor {
  background-image: url('site-icons/writing-32x32.png');
}
.accentColor-manifesto #cursor {
  background-image: url('site-icons/manifesto-32x32.png');
}
.accentColor-talks #cursor {
  background-image: url('site-icons/talks-32x32.png');
}
.accentColor-exhibitions #cursor {
  background-image: url('site-icons/exhibitions-32x32.png');
}
.accentColor-press #cursor {
  background-image: url('site-icons/press-32x32.png');
}

.hover-projects #cursor {
  background-image: url('site-icons/projects-32x32.png') !important;
}
.hover-workshops #cursor {
  background-image: url('site-icons/workshops-32x32.png') !important;
}
.hover-writing #cursor {
  background-image: url('site-icons/writing-32x32.png') !important;
}
.hover-manifesto #cursor {
  background-image: url('site-icons/manifesto-32x32.png');
}
.hover-talks #cursor {
  background-image: url('site-icons/talks-32x32.png') !important;
}
.hover-exhibitions #cursor {
  background-image: url('site-icons/exhibitions-32x32.png') !important;
}
.hover-press #cursor {
  background-image: url('site-icons/press-32x32.png') !important;
}

#cursor.active {
  width: 16px;
  height: 16px;
}

.manifestoNumber {
  padding-right: 1.2em;
}

.screensaver #cursor,
.screensaver #cursor.active {
  width: 0;
  height: 0;
}

.accentColor-projects *::selection {
  background-color: rgba(250,16,76,0.4);
}
.accentColor-workshops *::selection {
  background-color: rgba(46,234,125,0.4);
}
.accentColor-writing *::selection {
  background-color: rgba(255,203,54,0.4);
}
.accentColor-talks *::selection {
  background-color: rgba(133,151,173,0.4);
}
.accentColor-exhibitions *::selection {
  background-color: rgba(255,66,2,0.4);
}
.accentColor-manifesto *::selection {
  background-color: rgba(255,222,173,0.4);
}
.accentColor-press *::selection {
  background-color: rgba(125,106,132,0.4);
}

#headerMenu::selection,
#headerMenu *::selection,
.menuVisibilityVisible *::selection {
  background-color: transparent !important;
}

.siteCreditHolder {
	margin-left: 0 !important;
	position: fixed;
	bottom: 0;
	background: linear-gradient(0deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);
	width: 100%;
	background: #fff;
	padding-top: 1.2em;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

.siteCreditLink {
	font-size: 1em;
}

.siteCredit {
	font-size: 0.5em;
}

.invertColours .siteCreditHolder {
	background: linear-gradient(0deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}

.slideInner {
  max-height: 80vh;
}