/*
 Theme Name: Boring Machines
 Author:         Alice Cannava
 Template:       twentyseventeen                         
 Version:        1.0
 Table of Contents
 ------------------------------------
 ------------------------------------*/
/*------------------------------------*\
 1 > General
 \*------------------------------------*/
/*---Accessibility
 --*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}
/* colors */
/*#277CC0;*/
.white {
  color: #fff !important;
}
.bold {
  font-weight: 800;
}
.small {
  font-size: 85%;
}
/* fonts  */
::selection, ::-webkit-selection, ::-moz-selection {
  background: #3e4655;
  color: #fff;
  text-shadow: none;
}
/* global box-sizing */
*, *:after, *:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html {
  font-size: 100%;
}
body {
  color: #3e4655;
  font-family: "Gudea", sans-serif;
  font-weight: 400;
  font-size: 130%;
  line-height: 1.7;
  margin-top: 0;
}
/* clear */
.clear:before, .clear:after {
  content: ' ';
  display: table;
}
.clear:after {
  clear: both;
}
.clear {
  *zoom: 1;
}
/**** ELEMENTS ****/
a {
  animation-name: color-change;
  animation-delay: 0s;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  -webkit-animation-name: color-change;
}
a:hover {
  text-decoration: none;
  border-bottom: 2px solid;
}
.carousel-item a:hover {
  border: 0;
}
@-webkit-keyframes color-change {
  0% {
    color: #1c68eb;
  }
  20% {
    color: #390b66;
  }
  40% {
    color: #e22646;
  }
  60% {
    color: #f0c808;
  }
  80% {
    color: #1ebe39;
  }
  100% {
    color: #1c68eb;
  }
}
@-moz-keyframes color-change {
  0% {
    color: #1c68eb;
  }
  20% {
    color: #390b66;
  }
  40% {
    color: #e22646;
  }
  60% {
    color: #f0c808;
  }
  80% {
    color: #1ebe39;
  }
  100% {
    color: #1c68eb;
  }
}
@-ms-keyframes color-change {
  0% {
    color: #1c68eb;
  }
  20% {
    color: #390b66;
  }
  40% {
    color: #e22646;
  }
  60% {
    color: #f0c808;
  }
  80% {
    color: #1ebe39;
  }
  100% {
    color: #1c68eb;
  }
}
@-o-keyframes color-change {
  0% {
    color: #1c68eb;
  }
  20% {
    color: #390b66;
  }
  40% {
    color: #e22646;
  }
  60% {
    color: #f0c808;
  }
  80% {
    color: #1ebe39;
  }
  100% {
    color: #1c68eb;
  }
}
@keyframes color-change {
  0% {
    color: #1c68eb;
  }
  20% {
    color: #390b66;
  }
  40% {
    color: #e22646;
  }
  60% {
    color: #f0c808;
  }
  80% {
    color: #1ebe39;
  }
  100% {
    color: #1c68eb;
  }
}
a.white {
  color: #fff;
  animation: none;
  text-decoration: none;
}
a.white:hover, a.white:focus, a.white:active {
  outline: 0;
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid #fff;
}
.navbar-brand a:hover {
  border: 0;
}
h1 {
  font-weight: 600;
  font-size: 170%;
}
h2 {
  font-weight: 600;
  font-size: 170%;
  margin-top: 0;
  padding-top: 0;
}
h3 {
  font-size: 140%;
  font-weight: 800;
}
h4 {
  font-weight: 700;
  font-size: 100%;
  line-height: 1.45;
  margin-bottom: 0;
}
/* youtube emebed responsive stuff */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  margin-bottom: 1rem;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* embed responsive */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*------------------------------------*\
 STRUCTURE
 \*------------------------------------*/
/* Header */
header {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  transition: top 0.4s ease-in-out;
}
#nav {
  height: 80px;
  transition: top 0.3s ease-in-out;
  background: #3e4655;
  color: #fff;
  border-radius: 0;
}
.nav-box {
  position: relative;
  padding: 42px 0 0 0;
}
.navbar-main {
  display: block;
}
.navbar-brand {
  padding-bottom: 0;
  padding-top: 0.5rem;
  margin-right: 0;
}
.navbar-brand img {
  max-width: 176px;
}
/* toggle */
.toggle-container {
  min-width: auto;
}
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.9rem;
  line-height: 1;
  background-color: transparent;
  border-radius: 0;
  color: #3e4655;
  border: 0;
}
/* main menu */
.main-nav {
  padding-top: 0.6rem;
}
.main-nav li {
  display: inline-block;
  padding: 0 10px;
  line-height: 1;
}
.main-nav li.btn {
  margin-left: 0.8rem;
}
.main-nav li a {
  text-transform: uppercase;
  font-size: 100%;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #fff !important;
  animation: none;
}
.white a.nav-link, .ab-item {
  color: #fff !important;
  padding: 0 0 0.2rem 0;
}
.ab-item:hover {
  color: #1c68eb;
}
.white a.nav-link:hover {
  margin-bottom: -2px;
  color: #fff;
}
.main-nav li a:hover {
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 0.8;
}
.main-nav .current-menu-item a, .main-nav .active a {
  border-bottom: 2px solid #fff;
}
.main-nav .current-menu-item a:hover, .main-nav .active a:hover {
  margin-bottom: 0;
}
/* social menu */
.nav-social li {
  padding: 12px 9px 2px 9px;
  font-size: 132%;
}
.nav-social {
  min-width: 176px;
}
.nav-social li a:hover, .nav-social li a:focus, .nav-social li a:active {
  border: 0;
  opacity: 0.8;
}
/* structure two halves */
.split {
  height: calc(100vh - 80px);
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
}
.modal {
  width: 50%;
  right: 0 !important;
  background: #fff;
  left: auto !important;
  height: calc(100vh - 80px);
  padding: 2rem 3rem;
  overflow: auto;
}
.modal-wrapper {
  height: calc(100vh - 80px);
}
.link-to-archive.ajax {
  display: none;
}
.modal.show .link-to-archive.ajax {
  display: inline-block;
}
.modal.show .link-to-archive.not-ajax {
  display: none;
}
.modal.show .close-modal {
  display: none !important;
}
.close-modal.bottom {
  display: inline-block !important;
  cursor: pointer;
}
.modal.show .close-modal.bottom {
  display: inline-block !important;
}
.modal .loading {
  display: block;
  width: 200px;
  height: auto;
  margin: -100px auto 0 auto;
  padding: 48vh 0;
}
.admin-bar .split {
  top: 32px;
}
.left {
  left: 0;
  overflow: hidden;
}
.left.video {
  background-color: #000;
}
.left.colors-loop {
  animation-name: bg-color-change;
  animation-delay: 0s;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  -webkit-animation-name: bg-color-change;
}
.bg-blue {
  background: #1c68eb;
}
.bg-violet {
  background: #390b66;
}
.bg-pink {
  background: #e22646;
}
.right {
  right: 0;
  overflow-y: scroll;
  background: #fff;
}
.carousel, .carousel-inner, .carousel-item {
  height: 100%;
  text-align: center;
  vertical-align: middle;
}
.slider-img {
  max-width: 400px;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.video-bg {
  position: fixed;
  right: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
@keyframes bg-color-change {
  0% {
    background: #1c68eb;
  }
  20% {
    background: #390b66;
  }
  40% {
    background: #e22646;
  }
  60% {
    background: #f0c808;
  }
  80% {
    background: #1ebe39;
  }
  100% {
    background: #1c68eb;
  }
}
@-webkit-keyframes bg-color-change {
  0% {
    background: #1c68eb;
  }
  20% {
    background: #390b66;
  }
  40% {
    background: #e22646;
  }
  60% {
    background: #f0c808;
  }
  80% {
    background: #1ebe39;
  }
  100% {
    background: #1c68eb;
  }
}
/* layout modules */
.main {
  min-height: calc(100vh - 200px);
}
.page-title {
  font-weight: 800;
}
/* homepage */
/* covers or portraits slider */
.inner-logo {
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50% auto;
}
.carousel-inner {
  margin: 0 auto;
  max-height: auto;
}
/* single news preview */
.date {
  padding-bottom: 0;
  margin-bottom: 0;
  font-size: 95%;
  opacity: 0.8;
}
.article-content {
  margin-bottom: 0;
  padding-bottom: 0;
}
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  padding: 34px 0 0 0;
}
.more {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.link-to-archive i {
  vertical-align: -3px;
}
article:hover h2 a {
  border-bottom: 2px solid;
}
.thumb {
  -webkit-transition: opacity 1s;
  /* Safari */
  transition: opacity 1s;
}
article:hover .thumb {
  opacity: 0.75;
}
/* artists names in archive */
.post-type-archive-artists h2 {
  font-size: 146%;
  margin-bottom: 0.6em;
}
/*------------------------------------*\
 RESPONSIVE
 \*------------------------------------*/
@media (max-width: 991px) {
  .toggle-container {
    min-width: 176px;
  }
  .navbar-toggler {
    margin-top: 8px;
  }
  header {
    z-index: 999999;
  }
  .navbar-collapse {
    position: absolute;
    bottom: 70px;
    background: #3e4655;
    display: block;
    width: 100%;
    left: 0;
    padding-left: 0;
    padding-bottom: 12px;
    font-size: 90%;
  }
  .navbar-collapse ul.nav {
    display: block;
    text-align: center;
    padding-left: 0;
  }
  .split {
    width: 100%;
    position: relative;
    z-index: 1;
    top: auto;
  }
  .modal {
    width: 100%;
    right: auto;
    background: #fff;
    left: auto !important;
    height: auto;
    position: relative;
    padding: 0.6rem 1.4rem;
  }
  .left {
    height: 340px;
    overflow: hidden;
    position: relative;
  }
  .right {
    margin-bottom: 70px;
    overflow-y: visible;
    height: auto;
  }
  .video-bg {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    min-width: 100%;
  }
  .carousel-inner {
    margin: 0 auto;
    max-height: 270px;
    margin-top: 30px;
  }
  .carousel-inner img {
    max-height: 270px;
  }
  .centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 576px) {
  .toggle-container {
    min-width: 20px;
  }
}