/*
Theme Name: olunkwa
Theme URI: https://alecmapesfrances.com
Author: alec m-f
Author URI: https://alecmapesfrances.com
Description: olunkwa july 2019
Version: 2019.1

olunkwa WordPress Theme © 2019 alec m-f
olunkwa is distributed under the terms of the GNU GPL
*/

* {
  font-smooth: subpixel-antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-y: scroll;
  height:100%;
  overflow-x: hidden !important;
}

/* 01 VARIABLES & SELECTION BEHAVIOR */

*:focus {
  outline: 0;
}

:root {
  --text-color:#222578;
  --background-color:white;
  --nav-size:6rem;
  --slide-arrow-size:4rem;
}

::selection {
	background: var(--text-color);
	color:var(--background-color);
}

.noselect {
  -webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}

.noclick {
  pointer-events: none;
}

::-moz-::selection {
	background: var(--text-color);
	color:var(--background-color);
}

.mhm-menu-separator {
  opacity:0;
}

/* 02 ANIMATIONS */


@keyframes modalanimation {
	0% {left:inherit;}
	99% {left:100%;}
	100% {display:none;}
}

/* 03 TYPOGRAPHY & COLOR */

@font-face {
    font-family: 'Pillowlava';
    src: url('./fonts/Pilowlava-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Kal';
    src: url('./fonts/kal-reg.otf') format('opentype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GRB';
    src: url('./fonts/Graebenbach-Bold.otf') format('opentype');
	font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GRB';
    src: url('./fonts/Graebenbach-BoldItalic.otf') format('opentype');
	font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'GRB';
    src: url('./fonts/Graebenbach-Medium.otf') format('opentype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GRB';
    src: url('./fonts/Graebenbach-MediumItalic.otf') format('opentype');
	font-weight: normal;
    font-style: italic;
}



@font-face {
    font-family: 'Univers';
    src: url('./fonts/FreeUniversal-Regular.ttf') format('truetype');
        font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Univers';
    src: url('./fonts/FreeUniversal-Italic.ttf') format('truetype');
        font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Univers';
    src: url('./fonts/FreeUniversal-Bold.ttf') format('truetype');
        font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Univers';
    src: url('./fonts/FreeUniversal-BoldItalic.ttf') format('truetype');
        font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Venus';
    src: url('./fonts/VenusURWBold.otf') format('opentype');
        font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'grot';
    src: url('./fonts/GrotesqueMT.otf') format('opentype');
        font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'grot';
    src: url('./fonts/GrotesqueMT-Bold.otf') format('opentype');
        font-weight: bold;
    font-style: normal;
}









body {
  color:var(--text-color);
  font-size: 1rem;
  line-height: 1.333;
  margin:0;
  font-weight:normal;
  font-family: 'Kal', serif;
}

p {
  margin-block-start: 0;
  margin-block-end: 0.75rem;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  margin-bottom:0.75rem;
}

h1 {
  font-family: 'Venus', sans-serif;
  font-size: 2.5rem;
  text-transform:uppercase;
  line-height: 1.1;
  margin:0 0 1.125rem 0;
  font-weight:bold;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.1;
  margin:0;
  font-weight:normal;
  font-family: 'Kal', serif;
}

h3 {
  font-size:1rem;
  line-height:1.15;
  margin:0;
  font-weight:bold;
  font-family: 'Venus', 'Arial', sans-serif;
}

h4 {
  font-size:1.125rem;
margin:0;
font-weight:bold;
font-family: 'Venus', sans-serif;
}

h5 {
  	font-size:1.125rem;
  margin:0;
  font-weight:bold;
  font-family: 'Kal', serif;
}

h6 {
  font-family: 'Venus', sans-serif;
  font-size:1rem;
  font-variant-caps: all-small-caps;
  margin:0;
  font-weight:bold;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  line-height: 1.1;
  margin-inline-end:0.25rem;
  margin-bottom:0.375rem;
}

.h1 {
  font-family: 'Venus', sans-serif;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight:bold;
}

.h2 {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight:normal;
  font-family: 'Kal', serif;
}

.h3 {
   font-size:0.875rem;
  line-height:1.1;
  margin:0;
  font-weight:bold;
  font-family: 'Venus', 'Arial', sans-serif;
}

.h4 {
  font-size:1.125rem;
margin:0;
font-weight:normal;
font-family: 'Kal', serif;
}

.h5 {
  font-size:1.125rem;
  font-weight: bold;
  font-family: 'Kal', serif;
}

.h6 {
  font-family: 'Venus', sans-serif;
  font-size:1rem;
  font-variant-caps: all-small-caps;
  font-weight:bold;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  line-height: 1.1;
}

.blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption {
	color:var(--text-color);
	font-size: 1rem;
}

.wp-block-separator {
  border:none;
  border-bottom:none;
  height:1.125rem;
  margin:0;
}

.dot-separator {
  font-family: 'Venus', sans-serif;
  font-size: 1.25rem;
  line-height: 0;
  font-weight:bold;
}

.date-style {
  font-family: 'Venus', 'Arial', sans-serif;
  font-size: 0.875rem;
  line-height: 0;
  font-weight:bold;
}

.two-col {
  columns:2;
}

.two-col p:first-of-type{
  break-after: column;
}


/* 03.5 LINK TYPOGRAPHY */

a {
	color:var(--text-color);
	text-decoration: none;
	cursor:pointer;
}

#nav a:hover {
	font-style:italic;
}

.container a:hover {
  font-style:italic;
}

.dark, .dark a {
  color:white;
}

.enter-arrow a:hover {
	border:none;
  color:transparent !important;
	-webkit-text-stroke-width: 0.02em;
   -webkit-text-stroke-color: white;
   cursor: pointer;
}

.dark.alt-link:hover {
	border:none;
  color:transparent !important;
	-webkit-text-stroke-width: 0.05em;
   -webkit-text-stroke-color: white !important;
}

.dark.alt-link:active {
	color:white;
}

.alt-link:hover {
  border-bottom: none;
	text-decoration: none !important;
  font-style: normal !important;
  color:transparent;
-webkit-text-stroke-width: 0.05rem;
   -webkit-text-stroke-color: var(--text-color);
}

.alt-link:active {
  color:var(--text-color);
}

/* 04 NAVIGATION TYPOGRAPHY */


#nav ol, ul {
  list-style-type: none;
  padding-inline-start:0px;
}

#nav ul .sub-menu {
  padding-inline-start:1rem;
}

#nav ul li:last-child {
  margin-bottom: 1rem;
}

#nav a[aria-current="page"] {
  margin-left: -0.75rem;
  pointer-events: none;
}

#nav a:not([href]):hover {
  font-style: normal;
  cursor:default;
}

#nav a[href="#"] {
  opacity:0;
  pointer-events: none;
}

#nav a[aria-current="page"]::before {
  font-family: 'Venus';
  font-weight:bold;
  font-size: 0.875rem;
  content:"•";
  padding-right: 0.4rem;
  line-height: 0;
}

.entry-links [aria-current="page"] {
  font-style: italic;
}


.enter-arrow {
	font-family: 'GRB';
	font-weight: bold;
  transform:rotate(90deg);
	position:absolute;
	bottom:20px;
	right:32px;
	z-index: 998;
	font-size:6rem;
  text-decoration: none;
}


/* 05 LAYOUT */

body {
	background-color:var(--background-color);
	margin:0px;
	padding:0px;
}



article img {
  width:100%;
  height:100%;
}

article {
  max-width: 75%;
}

.single-page-wrapper {
	display: flex;
  justify-content: space-between;
  align-items:flex-start;
	flex-grow:0;
  width:100vw;
}

.front-page-wrapper {
  height:calc(100vh - 2rem);
  width:100vw;
	display: flex;
  justify-content: space-between;
  align-items:flex-start;
	flex-grow:0;
}


.vertical-scroll-wrapper {
	width:100vw;
	display: flex;
  justify-content:space-between;
  align-items:flex-start;
}

.container {
    margin:0 0 2rem 2rem;
    padding-right:2rem;
    width:66vw;
}

.container-text-page {
  margin:0 0 2rem 2rem;
  padding-right:2rem;
  width:calc(66vw - 3rem);
}

.wide-container {
    margin:2rem;
    width:72%;
}

.post-L {
  margin:2rem 0 2rem 0;
  display: flex;
  width:100%;
  justify-content: flex-start;
}

.post-R {
  margin:2rem 0 2rem 0;
  display: flex;
  width:100%;
  justify-content:flex-end;
}

.running-header {
  width:100%;
  min-height:2rem;
  margin:0;
  display: flex;
  align-items:center;
  justify-content: center;
  z-index: 999;
}

.running-header-video-page {
  width:100%;
  min-height:2rem;
  margin:0;
  display: flex;
  align-items:center;
  justify-content: center;
  position:absolute;
  z-index: 999;
}

#nav {
	z-index: 998;
  left:calc(66vw + 2rem);
  margin:4.0625rem 6rem 3rem 3rem;
  position: absolute;
  flex-grow: 0;
}

#nav.dark {
  margin:6.0625rem 6rem 3rem 3rem;
}

.sticky-top {
  position: -webkit-sticky;
  position:sticky;
  top:3rem;
}

.center {
  height:100%;
  margin:auto;
  text-align: center;
}

.outline-text {
  color:transparent;
-webkit-text-stroke-width: 0.05rem;
   -webkit-text-stroke-color: var(--text-color);
}

.bottom {
  position:absolute;
  bottom:1.25rem;
}

.hidden {
	opacity:0;
}

#splash {
  background-image: url('splash.gif');
	background-repeat: no-repeat;
	background-size: cover;
	height:100vh;
	overflow:hidden;
  z-index: 997;
  position: relative;
}

.s-margin {
  margin:1rem;
}

.wp-block-column-small {
  flex-basis:calc(25% - 16px);
}

.wp-block-columns {
	display:flex !important;
}

.col-1 {
	width:16vw;
	text-align:left;
}

.col-2 {
	width:16vw;
	text-align:left;
}

.col-3 {
  width:16vw;
	text-align:left;
}

.col-4 {
  width:16vw;
	text-align:left;
}


.video-caption {position:absolute; bottom:7%; width:90vw; text-align: center; color:white;}

.video-holder {
position: absolute;
border:none !important;
height:100vh !important;
width: 100vw !important;
z-index: 0;
display:flex;
justify-content: center;
flex-wrap:wrap;
}

.video-holder iframe {
height: 100% !important;
border:none !important;
top: 0; left: 0;
width: 100% !important;
z-index:-1;
}

.page-template-video-page {
  background-color: black;
}

.draggable {
  cursor: pointer;
}

/* 06 CAROUSEL */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width:70vw;
  height: 50vh;
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  bottom:0;
  width: auto;
    padding: 0;
  user-select: none;
  line-height: 1;
}

/* Position the "next button" to the right */
.prev {
  margin-right:1.5rem;
}

/* Caption text */
.caption {
  font-size:1rem;
  font-family: 'Kal', serif;
  line-height:1.1;
  width:100%;
  text-align: right;
  z-index: 999;
  pointer-events: none;
}

.dot-container {
  width:70vw;
  display:flex;
  justify-content: space-between;
}

.fixed {
  position: fixed;
  top: 3rem;
  left:3rem;
  width:3rem;
}

.active {
  color: var(--text-color);
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 500ms;
  animation-name: fade;
  animation-duration: 500ms;
}

@-webkit-keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

.mobile-only {
  display: none;
}

/* 07 MOBILE */

@media (max-width: 800px) {

  #splash {
    background-image: url('splash-mobile.gif');
  }

.running-header {
  min-height:0.75rem;
  width: calc(100% - 3rem);
  justify-content: space-between;
  align-items: flex-start;
  margin:0.75rem 1.5rem 0 1.5rem;
}

.running-header div {
  max-width:66%;
}

.running-header-video-page {
  min-height:0.75rem;
  width: calc(100% - 3rem);
  justify-content: space-between;
  align-items: flex-start;
  margin:0.75rem 1.5rem 0 1.5rem;
  display:flex;
  top:0;
  left:0;
  position:absolute;
  background-color:transparent;
}

.running-header-video-page div {
  max-width:66%;
}


.single-page-wrapper {
  flex-wrap:wrap;
}

.front-page-wrapper {
  flex-wrap:wrap;
  height:100vh;
}

body {
  font-size: 1.25rem;
}

h1 {
  font-size: 2.25rem;
  text-align: center;
}

h3 {
  font-size:1.125rem;
}

h6 {
  font-size:1.25rem;
  line-height: 1;
  text-align:center;
  margin-bottom:0.5rem;
  margin-top:0.125rem;
}

.wp-block-separator {
  border:none;
  border-bottom:none;
  height:0.75rem;
  margin:0;
}

#nav {
  position:relative;
  left:auto;
  padding-top:0.75rem;
  padding-bottom: 1.5rem;
  margin:0 2rem 1.5rem 1.5rem;
  width:100%;
}

#nav a:hover {
	font-style:normal;
}

#nav a[aria-current="page"]::before {

}

.container {
  width:calc(100vw - 3rem);
  min-height:calc(100vh - 3rem);
  margin:0 1.5rem 0 1.5rem;
  padding:0;
}

.container-text-page {
  width:calc(100vw - 3rem);
  min-height:calc(100vh - 3rem);
  margin:0 1.5rem 0 1.5rem;
  padding:0;
}

.logo {
  display: none;
}

.mobile-only {
  display:block;
}

.mobile-hidden {
  min-height:1px !important;
}

.video-holder {
  position:relative;
}

.enter-arrow {
  bottom:72px;
}

}