@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Raleway:400,700&display=swap');

body {
	background-color: #F8F8F8;
    font-family: 'Raleway', sans-serif;
	color: #080808;
}

body.page-node-type-video {
	background-color: #080808;
	color: #F8F8F8;
}

header {
	margin-bottom: 35px;
}

header a, .region-header a {
	color: #080808;
	text-decoration: none;
}

header a:hover, .region-header a:hover {
	text-decoration: underline;
}

.layout-content {
	margin: 0 5px;
}

@media only screen and (min-width: 850px) {
	.layout-content {
		margin: 0 35px;
	}
}

#block-videojockey-local-tasks {
	text-align: center;
}

#block-mainnavigation ul.menu {
	margin-left: 0;
	padding: 0;
	list-style: none outside;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
	font-size: calc(50% + 0.5vw);
	font-weight: 600;
	letter-spacing: calc(2px + 0.05vw);
}

#block-mainnavigation ul.menu a.is-active, #block-mainnavigation ul.menu li.menu-item--active-trail a {
	text-decoration: underline;
}

#block-mainnavigation ul.menu li + li::before {
	content: "\25AA";
	margin: 0 20px;
}

#block-frontpageblurb, #block-contactdetails {
	position: relative;
}

#block-frontpageblurb::before, #block-contactdetails::before {
	content: '';
	width: 100%;
	height: 100%;
	background: url("../img/overlay.png") rgba(0,0,0,0.7) left top repeat;
	z-index: 1;
	position: absolute;
	opacity: 0.4;
}

#block-frontpageblurb .field--name-field-body, #block-contactdetails .field--name-field-body {
	max-width: 490px;
	margin: auto;
	padding: 25px;
	color: #fff;
	position: relative;
	z-index: 2;
}

#block-contactdetails .field--name-field-body {
	width: max-content;
}

body.page-node-type-video header a, body.page-node-type-video .region-header a {
	color: #F8F8F8;
}

.site-name {
	text-align: center;
	text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
	font-size: calc(100% + 4vw);
	font-weight: 600;
	letter-spacing: calc(10px + 0.1vw);
}

.page-title {
	text-align: center;
	text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
	font-size: calc(100% + 2vw);
	font-weight: 600;
	letter-spacing: calc(10px + 0.1vw);
}


div[data-drupal-messages] {
	margin: 20px;
}

div[data-drupal-messages] a {
	color: #007bff !important;
}

.reorder-thumbnails .view-header {
	text-align: center;
}

.thumbnail-grid > .view-header h3 {
	text-align: center;
	text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
	font-size: calc(50% + 0.5vw);
	font-weight: 600;
	letter-spacing: calc(2px + 0.05vw);
}

.thumbnail-grid > .attachment-before .view-content {
	display: none;
}

.thumbnail-grid > .view-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
	position: relative;
}

@media only screen and (min-width: 1200px) {
	.thumbnail-grid > .view-content {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		position: relative;
	}
}

.thumbnail-grid .thumbnail {
	position: relative;
	overflow: hidden;
	margin: 10px;
}

.thumbnail-grid .thumbnail-text-container {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
	text-align: center;
	transform: translateY(100%);
	pointer-events: none;
	transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1);
}

.thumbnail-grid .thumbnail:hover .thumbnail-text-container {
	transform: translateY(0%);
}

.thumbnail-grid .thumbnail-text-container > .thumbnail-text {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #F8F8F8;
	text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	letter-spacing: calc(3px + 0.1vw);
	line-height: initial;
}

.thumbnail-grid .thumbnail-text-container > .thumbnail-text > .thumbnail-title {
	font-size: calc(55% + 2vw);
	line-height: calc(55% + 1vw);
}

.thumbnail-grid .thumbnail-text-container > .thumbnail-text > .thumbnail-subheading {
	font-size: calc(50% + 0.5vw);
	line-height: calc(55% + 2vw);
}

.thumbnail-grid .thumbnail-text-container > .thumbnail-text > .thumbnail-category {
	font-size: calc(45% + 0.4vw);
}

.thumbnail-grid .thumbnail-slideshow::before {
	content: '';
	width: 100%;
	height: 100%;
	background: url("../img/overlay.png") rgba(0,0,0,0.7) left top repeat;
	z-index: 500;
	position: absolute;
	pointer-events: none;
	opacity: 0;
	transition: opacity 600ms cubic-bezier(0.7, 0, 0.3, 1);
}

.thumbnail-grid .thumbnail:hover .thumbnail-slideshow::before  {
	opacity: 0.4;
}
  
.thumbnail-grid .thumbnail-slideshow .slick-track {
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  }
  
.thumbnail-grid .thumbnail-slideshow .slide {
    height: 100%;
    position: relative;
    z-index: 1;
}
    
.thumbnail-grid .thumbnail-slideshow img {
      width: 100%;
      transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
      transform: scale(1.4);
}
    
.thumbnail-grid .thumbnail-slideshow .slick-active img {
      transform: scale(1.2);
}
.thumbnail-grid .thumbnail-slideshow .slick-active ~ .slide img {
      transform: scale(1);
}

.page-node-type-video .region-content {
	max-width: 1280px;
	margin: auto;
}

.node--type-video .group-left {
	padding-right: 20px;
}

.node--type-video .field--name-field-video {
	max-width: 1280px;
	margin: auto;
	padding: 10px 0;
}

.node--type-video .field--name-field-thumbnails {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.node--type-video .field--name-field-thumbnails > .field__item:first-child {
	grid-column: span 3;	
}
.node--type-video .field--name-field-thumbnails > .field__item {
	margin: 2px;
}
.node--type-video .field--name-field-thumbnails > .field__item img {
	height: auto;
	width: 100%;
}

.contact-form .form-text, .contact-form .form-email, .contact-form .form-textarea {
	width: 100%;
	padding: 5px 10px;
}

.text-formatted.quickedit-field {
	border: 1px solid transparent;
	position: relative;
}

.text-formatted.quickedit-field:hover {
	border: 1px dashed #ffffff;
}

:not(.quickedit-entity-active) > .text-formatted.quickedit-field:hover::before {
	content: 'Double-click to edit this field';
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	color: yellow;
	background-color: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
	font-size: calc(50% + 0.5vw);
	font-weight: 600;
	letter-spacing: calc(2px + 0.05vw);
}

.quickedit-entity-active .text-formatted.quickedit-field:hover::before {
	display: none !important;
}