@charset "UTF-8";
/* 
// Sparkes - Style Sheet
// version: 1.0
*/









/* Contact Form 7 */
.wpcf7-form {
}
.wpcf7-spinner {
	display: block;
	text-align: center;
	margin: 0 auto;
}
.wpcf7-form label {
	/*font-size: 14px;*/
	margin: 0 0 8px 0;
	display: inline-block;
}
.wpcf7-form label .labels {
	min-width: 110px;
	display: inline-block;
	color: #fff;
	vertical-align: middle;
}
.wpcf7-form label input {
	margin: 0 10px 0px 0;
	
}
.wpcf7-stripe {
	max-width: 500px;
}
.wpcf7 .preview {
	background: rgba(255,255,255,0.06);
	padding: 30px 30px 0;
	border-radius: 20px;
	display: inline-block;
	margin: 0 30px 20px 0px;
	vertical-align: top;
	font-size: 14px;
	line-height: 14px;
}
.wpcf7 .details {
	display: inline-block;
	vertical-align: top;
	margin: 0 30px 20px 0px;
	text-align: left;
}
.wpcf7 .details .pay-info {
	color: #fff;
	margin: 10px 0 0px;
	display: inline-block;
}
.wpcf7 .details .styled {
	font-size: 18px;
	color: #3cf;
}
.wpcf7 .details .styled input,
.wpcf7 .details .styled input:hover,
.wpcf7 .details .styled input:active {
	background: none;
	font-size: 18px !important;
	padding: 0px;
	color: #3cf;
	box-shadow: none !important;
}
.wpcf7-acceptance {
	font-size: 14px;
}
.wpcf7-acceptance input {
	-webkit-appearance: revert;
	-moz-appearance: revert;
}

.wpcf7 .preview {
	text-align: left;
}
.wpcf7 .preview input {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	color: #fff;
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 200px;
}
.wpcf7 .preview .styled {
	color: #fff;
}
.wpcf7 .preview .styled input {
	width: 100px;
}
.wpcf7 .preview span {
	min-width: 100px;
	display: inline-block;
}

.wpcf7 .credit_card_details {
	display: block;
	max-width: 426px;
	margin: -25px 0 0 0;
}
.wpcf7 .credit_card_details .StripeElement {
	border-radius: 20px;
	border: 0;
}

.wpcf7 .wpcf7-response-output {
	/*display: inline-block !important;*/
	vertical-align: top;
	max-width: 800px;
	margin: 0px auto !important;
	border-radius: 20px !important;
}
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	font-size: 14px;
	line-height: 14px;
	color: red;
	margin: 3px 0 0 0;
}
#please-wait {
	border-radius: 20px !important;
	max-width: 160px;
	margin: 10px auto !important;
}

.cf7sa-transaction-details {
	width: auto !important;
	margin: 0 auto !important;
	display: inline-block !important;
	float: unset !important;
	background: #333;
	padding: 20px;
	border-radius: 20px;
	border: 0px;
	border-bottom: none !important;
	color: #fff !important;
	font-size: 14px !important;
}
.cf7sa-transaction-details th {
	color: #888 !important;
	text-transform: capitalize !important;
	padding: 0 10px 0 0;
	font-size: 12px !important;
	line-height: 12px !important;
	font-weight: normal !important;
}
.cf7sa-transaction-details tr {
	color: #fff !important;
	border-top: 0 !important;
	padding: 0 !important;
}
.cf7sa-transaction-details td {
	border-top: 0 !important;
	padding: 0 !important;
}
input[name="postcode"] {
	text-transform: uppercase;
}






.view-disabled-dates label:first-of-type {
	margin: 0 0 5px 0;
	display: inline-block;
}
.view-disabled-dates .options {
	background: #333;
	padding: 15px;
	border-radius: 20px;
	font-size: 14px;
	line-height: 14px;
	display: inline-block;
	vertical-align: middle;
	margin: 10px 10px;
}





/* Jquery Date picker */
input.hasDatepicker {
	text-align: center;
}
input.hasDatepicker:after {
	padding: 0px 0px 0px 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f073";
	font-weight: 900;
}
#ui-datepicker-div {
	background: #333;
	color: #fff;
	padding: 0px;
	border-radius: 20px;
	text-align: center;
	width: unset !important;
}
.ui-datepicker a {
	text-decoration: none;
	color: #fff;
}
.ui-datepicker-group {
	display: inline-block;
}
.ui-datepicker-calendar {
	margin: 0 20px 20px;
}
.ui-datepicker-header {
	padding: 20px 20px 10px;
	padding: 0px;
}
.ui-datepicker table td {
	padding: 0px;
	text-align: center;
	border-radius: 10px;
}
.ui-datepicker table td.booked a {
	background: red;
}
.ui-datepicker table th {
	padding: 5px;
	text-align: center;
}
.ui-datepicker-prev,
.ui-datepicker-next {
	background: #888;
	padding: 4px 8px;
	border-radius: 10px;
	color: #222;
	font-size: 14px;
	line-height: 14px;
}
.ui-datepicker-next {
	float: right;
}
.ui-datepicker-prev {
	float: left;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
	background: #3cf;
	border-radius: 10px;
	color: #222;
}
.ui-datepicker-prev:before {
	padding: 0px 5px 0px 0px;
	font-family: "Font Awesome 5 Free";
	content: "\f104";
	font-weight: 900;
}
.ui-datepicker-next:after {
	padding: 0px 0px 0px 5px;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
}
.ui-state-default {
	padding: 8px;
	display: block;
	border-radius: 10px;
	margin: 2px;
}
td.ui-datepicker-week-end a,
td.ui-datepicker-week-end span {
	background: #3c3c3c;
}
.ui-state-highlight {
	color: #222;
}
.ui-state-active {
	color: #222;
}
.ui-datepicker-today {
	background: #888;
}
.ui-datepicker-current-day {
/* 	background: #3cf; */
}
.ui-datepicker-current-day a {
/* 	color: #222 !important; */
}
.ui-datepicker-calendar td:hover a {
	color: #fff !important;
	background: #3cf !important;
}
.ui-datepicker-title {
	margin: 0 0 10px;
}
td.ui-datepicker-unselectable span {
	color: #666;
	
}
.ui-datepicker-unselectable.undefined:before {
	color: rgba(255,255,255,0.1);
	font-family: "Font Awesome 5 Free";
	content: "\f05e";
	font-weight: 900;
	position: absolute;
	margin: 2px 0px 0 -12px;
	display: inline-block;
	font-size: 24px;
	line-height: 34px;
	color: #3cf;
}
td.ui-datepicker-unselectable span:hover {
	background: #444 !important;
	color: #666 !important;
}
.ui-datepicker-inline {
	width: unset !important;
	background: #333;
	display: inline-block !important;
	padding: 0px;
	border-radius: 20px;
}
td.ui-state-default:hover,
/*.ui-datepicker-unselectable:hover,*/
td.ui-datepicker-week-end:not(.ui-state-disabled):hover {
	background: #3cf !important;
	color: #222 !important;
	border-radius: 10px;
}

.date-start a:before,
.date-end a:before {
	content: "FROM";
	position: absolute;
	background: #484;
	margin: -24px 0 0 -35px;
	padding: 4px 5px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	line-height: 12px;
	border-radius: 5px 5px 0px 5px;
}
.date-end a:before {
	content: "FINISH";
}
.date-end:last-of-kind a:before {
	content: "FINISH";
}





.key {
	margin: 10px 0 0;
}
.key span {
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: top;
	margin: 0 15px 0 2px;
	border-radius: 6px;
}
.key .current {
	background: #3cf;
}
.key .booked {
	background: red;
}





.dp-highlight .ui-state-default {
	background: #484;
	color: #FFF;
}
.ui-datepicker.ui-datepicker-multi  {
 	width: calc(100% - 40px) !important;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: none;
	margin: 0 10px;
}
#datepicker {
	/*height: 300px;
	overflow-x: scroll;*/
}
#datepicker table {
	border: none;
	margin: 0px;
}
#datepicker td {
	border: none;
	font-size: 16px;
	line-height: 16px;
}
.ui-widget {
	font-size: 100%;
}









.hire-button {
	margin: 0 0 50px 0;
	padding: 10px 0px;
}
.hire-button a {
	background: #222;
	padding: 15px 20px;
	border-radius: 20px;
	display: inline-block;
	margin: 0 0 0 0px;
	color: #3cf;
	font-size: 20px !important;
	line-height: 20px !important;
	text-transform: uppercase;
}
.hire-button a i {
	margin: 0 0 0 5px;
}
.hire-button a:hover {
	background: #3cf;
	color: #222;
}
.hire-button h3 {
	line-height: 16px !important;
	border: 0px !important;
	padding: 0px !important;
	text-transform: unset !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	margin: 0 0 0px 0 !important;
	color: #fff !important;
}









.hire-page-links,
.cube-features,
.cube-tools {
	margin: 0 0px 30px;
}
.hire-page-links a,
.cube-features a,
.cube-tools a {
	border: 1px solid #3cf;
	background: #3cf;
	color: #111 !important;
	padding: 20px;
	font-size: 40px;
	line-height: 40px;
	display: inline-block;
	width: calc(100% - 62px);
	margin: 0 10px 20px;
	vertical-align: top;
	border-radius: 10px;
}
.cube-features a {
	font-size: 25px;
	line-height: 28px;
	background: #222;
	color: #fff !important;
	border-color: #222;
}
.cube-tools a {
	font-size: 20px;
	line-height: 22px;
	background: #222;
	border-color: #222;
	color: #fff !important;
	font-weight: 500;
}
.hire-page-links a:hover,
.cube-features a:hover,
.cube-tools a:hover {
	border: 1px solid #888;
	background: #888;
	color: #111 !important;
}
.hire-page-links a:after,
.cube-features a:after {
	content: "Find out more";
	font-size: 12px;
	line-height: 12px;
	float: right;
	border: 1px solid #111;
	padding: 5px 8px;
	background: #111;
	color: #fff;
	border-radius: 4px;
}
.hire-page-links a span,
.cube-features a span,
.cube-tools a span {
	font-size: 14px;
	line-height: 18px;
	display: block;
	margin: 10px 0 0;
	min-height: 60px;
}
.cube-features a span,
.cube-tools a span {
	min-height: 0px;
}
.hire-page-links a div,
.cube-features a div,
.cube-tools a div {
	font-weight: 600;
}
.cube-features a div {
	min-height: 56px;
}
.cube-tools a div {
	min-height: 40px;
	font-weight: 500;
	font-size: 20px;
	line-height: 20px;
}



/* Social Links */

a.social {
	font-size: 24px;
	line-height: 24px;
	padding: 5px;
	display: inline-block;
	vertical-align: middle;
	color: #888;
}
a.social {
	color: #bbb;
}
a.social.instagram:hover {
	color: #FCAF45;
}
a.social.youtube:hover {
	color: #FF0000;
}

a.alternate {
	color: #aaa !important
}
a.alternate:hover {
	color: #3cf !important;
}


/* Live Page */
.page-template-live-page {
	background: #000 !important;
}
.page-template-live-page .entry-content {
	background: transparent !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 100vw;
	height: 100vh;
}
.page-template-live-page .live {
	margin: 0px;
	width: 100vw !important;
}
.page-template-live-page header,
.page-template-live-page footer {
	display: none !important;
}
.page-template-live-page .site {
	padding: 0px;
	margin: 0px !important;
	max-width: 100%;
}
.page-template-live-page .live-box {
	text-align: center;
	max-width: calc(100vw - 20px);
	/*height: 130px;*/
	transform: translateY(-50%);
	top: 50%;
	position: relative;
	margin: 0 auto;
	padding: 0px;
}
.page-template-live-page .live-box .comment {
	color: #fff;
	font-family: helvetica !important;
	font-weight: 700;
	font-size: 50px;
	line-height: 55px;
}





.admin-menu {
	position: fixed;
	bottom: 10px;
	right: 10px;
	padding: 5px;
	background: #222;
	z-index: 9999;
}
.admin-menu a:link,
.admin-menu a:visited {
	font-size: 16px;
	line-height: 16px;
	margin: 5px;
	color: #888;
}
.admin-menu a:hover {
	color: #3cf !important;
}
.admin-menu a.admin:link,
.admin-menu a.admin:visited {
	display: inline-block;
	background: #e60000;
	color: #fff;
	padding: 2px 4px;
}
.admin-menu a.admin:hover {
	color: #e60000 !important;
	background: #fff;
}
.menu-mastermenu-container {
	display: inline-block;
}








li.get-a-quote {
	
}
li.get-a-quote a {
	background: #3cf;
	color: #111 !important;
	padding: 5px 10px !important;
	border-radius: 4px;
	margin: -5px 0;
}
li.get-a-quote a:hover {
	background: #222;
	color: #fff !important;
}


.highlight {
	color: #3cf !important;
}
.h3 .highlight {
	font-weight: 900;
	font-size: 24px;
}
.intro {
	font-size: 14px;
	max-width: 800px;
	margin: 10px auto;
	line-height: 20px;
}






/* Home Page */
.home .entry-header {
/* 	display: none; */
}
.home .site-content {
	margin-top: 0px;
}
.home .booking {
	/*padding-top: 120px;*/
	padding-top: calc(50vh - 193px);
	position: relative;
}

/* Hire page */
.page-id-158 .entry-header {
	display: none;
}







/* Hire Form */
.booking-box {
	min-height: calc(100vh - 0px);
	clip-path: inset(0 0 0 0);
	margin: 0 auto 100px;
	background: linear-gradient(0deg, #000 0%, #333 100%);
}
.booking {
	margin: 0 auto 0px;
	padding: calc(50vh - 303px) 0;
	position: relative;
}
.booking .title {
	font-size: 40px;
	line-height: 40px;
	color: #3cf;
	font-weight: 500;
	text-transform: uppercase;
	max-width: 1000px;
	margin: 0 auto;
}
.booking h2 {
	margin: 10px auto 0px !important;
}
.booking h3 {
	color: #bbb !important;
	font-size: 18px !important;
}
.booking label {
	/*min-width: 120px;*/
	margin: 0 10px 0 0;
	display: inline-block;
}
.radio-list label {
	display: inline-block;
	margin: 0 2px 10px;
	color: #fff;
	background: #333;
	padding: 15px 20px;
	border-radius: 20px;
	vertical-align: top;
	text-align: center;
	max-width: 220px;
}
.radio-list label:hover {
	background: #3cf;
	color: #000;
}
.radio-list label span {
	display: block;
	font-size: 14px;
	margin: 5px 0 0;
	min-height: 14px;
	line-height: 14px;
	opacity: 0.5;
}
.radio-list label .top {
	font-size: 25px;
	line-height: 25px;
	margin: 0 0 5px;
	font-weight: 600;
	min-height: 25px;
}
.radio-list label .and {
	font-size: 18px;
	line-height: 18px;
	display: inline-block;
	opacity: 0.5;
}
.radio-list label .descript {
	font-size: 12px;
	line-height: 14px;
	opacity: 0.8;
	margin: 5px 0;
}
.radio-list label.selected {
	/*background: #888;
	color: #000;*/
	box-shadow: 0 0 0px 2px #3cf;
}
.radio-list label.selected:before {
	content: "selected";
	position: absolute;
	text-align: center;
	background: #3cf;
	margin: -24px 0 0 -30px;
	display: block;
	transform: rotate(-8deg);
	padding: 5px 10px;
	border-radius: 7px;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 12px;
	color: #222;
}
.radio-list label input {
	display: block;
	margin: 0 auto 10px;
	display: none;
}
.radio-list img {
	max-width: 130px !important;
	display: block;
	margin: 0 auto 10px;
	opacity: 0.4;
}
.radio-list label:hover img {
	filter: invert();
	opacity: 1;
}
.radio-list .image {
	width: 100px;
	height: 100px;
	display: inline-block;
}
.extras .radio-list .image {
	height: 77px;
}
.equipment label i {
	line-height: 65px;
	font-size: 30px;
	color: #888;
}
.extras label i {
	line-height: 100px;
	font-size: 30px;
	color: #888;
}
.sound label i {
	line-height: 130px;
	font-size: 30px;
	color: #888;
}

.info {
	font-size: 14px;
	line-height: 16px;
	margin: 10px 0 0 0;
}
.info-inline {
	margin: 0px 0 0px 0;
}
.info span {
	color: #fff;
}
.info i {
	color: #fff;
	margin: 0 2px 0;
}
.booking input,
.booking select,
.booking textarea {
	/*font-family: inherit;
	font-size: 16px;
	color: #FFF;
	padding: 15px 20px;
	border-radius: 20px;
	background: #333;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none !important;*/
	margin: 0 0 12px;
}
.booking button.submit,
.booking submit,
.wpcf7-submit {
	padding: 15px 20px;
	font-size: 16px !important;
	line-height: 16px !important;
	font-weight: 600;
	color: #222;
	background: #fff !important;
	border-radius: 30px;
	box-shadow: 0 0 1px 5px #3cf !important;
	border: 5px solid #111 !important;
}
.booking input[type="submit"]:hover,
.booking input[type="submit"]:active,
.booking input[type="submit"]:focus,
.booking .submit:hover,
.booking .submit:active,
.booking .submit:hover,
.wpcf7-submit:hover,
.wpcf7-submit:active,
.wpcf7-submit:hover {
	color: #222;
	background: #3cf !important;
	box-shadow: 0 0 1px 5px #fff !important;
	border: 5px solid #111 !important;
}
a.calc {
	font-size: 14px;
	line-height: 14px;
	color: #3cf;
	background: #333;
	padding: 8px 14px;
	display: inline-block;
	margin: 10px 10px 0;
	border-radius: 20px;
}
a.calc:hover {
	background: #3cf;
	color: #222 !important;
}
a.calc.sub {
	color: #888;
}
a.input,
button.input {
	font-size: 14px;
	line-height: 14px;
	color: #3cf !important;
	padding: 10px 15px;
	border-radius: 30px;
	background: #222;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none !important;
	margin: 0 10px 0 0;
	white-space: pre;
}
a.input:hover,
button.input:hover {
	color: #fff;
	background: #333;
}
.hire-form {
	text-align: center;
	max-width: 1400px;
	margin: 0 auto;
}
.button-group {
	margin: 0px 0 0;
}
.button-group input.basic {
	color: #222;
	-webkit-text-fill-color: #222;
	opacity: 1;
	font-weight: inherit;
}

.total {
	font-size: 18px;
	line-height: 24px;
	display: inline-block;
	text-align: right;
}
.total.preview {
	font-size: 12px;
	line-height: 12px;
	position: fixed;
	top: 120px;
	right: -100%;
	background: #222;
	padding: 20px 20px;
	border-radius: 30px;
	display: none;
	z-index: -1;
}
.total.preview.visible {
	display: inline-block;
}
.total.preview .buttons {
	margin: 10px 0 0 0;
	text-align: center;
}
.preview small {
	font-size: 14px !important;
	line-height: 14px !important;
	/*display: block !important;
	margin: 0 0 5px 100px !important;*/
	color: #fff !important;
}
.preview small input {
	font-size: 14px !important;
	line-height: 14px !important;
	/*color: #888 !important;*/
	width: 70px !important;
}
.preview small span {
	min-width: unset !important;
}

.total h2 {
	text-align: center;
	margin: 0 0 10px !important;
}
.line {
	border-top: 1px solid #444;
	margin: 2px 0;
}
.line-gap {
	margin: 10px 0;
}
.wpcf7 .form-total {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 5px 0;
	margin: 5px 0;
	width: 100%;
}
.total .deposit input,
.total .deposit .price-icon {
	color: #fff;
}
.price-icon {
	color: #ccc;
	font-size: 16px;
	line-height: 16px;
	margin: 0 0 0 5px;
	min-width: 10px;
}
.deposit {
	display: block;
	margin: 20px;
	color: #fff;
	font-size: 20px;
	line-height: 20px;
}
.deposit input {
	color: #3cf;
	-webkit-text-fill-color: #3cf;
	opacity: 1;
	font-weight: inherit;
	font-size: 20px !important;
	line-height: 20px !important;
}
input.basic,
input.basic:hover,
input.basic:focus {
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 16px;
	box-shadow: none !important;
	border: none !important;
	margin: 0px;
	width: 74px;
	border-radius: unset;
}
#delivery2 ,
#delivery2:hover,
#delivery2:focus {
	font-size: inherit !important;
	color: #888 !important;
	-webkit-text-fill-color: #888 !important;
	opacity: 1;
	width: 56px;
}
input.discount,
input.discount:hover {
	width: 84px;
}





/* price table */
.price-table {
	color: #fff !important;
	font-size: 18px !important;
	line-height: 20px !important;
	border: 0px !important;
}
.price-table tr {
	
}
.price-table td {
	border: 0px !important;
}
.price-table th {
	text-transform: capitalize !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #888 !important;
	padding: 0 20px 0 0;
	text-align: right;
	font-weight: 500;
	font-weight: 500 !important;
}
.price-table .sub {
	font-size: 14px !important;
	line-height: 18px !important;
	color: #888 !important;
	padding-bottom: 0px;
	padding-right: 20px;
}
.price-table .sub2 {
	font-size: 14px !important;
	line-height: 18px !important;
	padding-bottom: 0px;
}
.price-table .sub2 input {
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}
.price-table .options-total {
	border-top: 1px solid #333;
}
.price-table .sub-total {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}
.price-table .final {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	color: #3cf;
}




/* Intro Video box */
.video-box {
	overflow: hidden !important;
	height: calc(100vh - 0px);
	width: 100vw;
	margin: 0px 0 0px 0;
}
.video-box video {
	height: 100vh;
	width: 100vw;
	object-fit: cover;
	display: block;
	margin: 0px;
}
/*.video-box-showreel {
	object-fit: unset;
}*/
.video-arrow {
	position: absolute;
	/*bottom: 30px;*/
	width: 100vw;
	text-align: center;
	font-size: 50px;
	color: #fff;
	z-index: 4000;
	margin: calc(100vh - 100px) 0 0 0;
}
.video-arrow i {
	color: #fff;
	padding: 10px 20px;
}
.video-arrow i:hover {
	color: #3cf;
}
.video-top {
	background: transparent;
	position: absolute;
	z-index: 3000;
	padding: 0;
	width: 100%;
	height: calc(100vh - 0px);
	position: absolute;
	top: 0px;
	text-align: center;
}
.video-top span.center {
	margin: 0px auto 0 !important;
	/*white-space: pre-wrap;*/
	transform: translateY(-50%);
	top: calc(50% - 0px);
	position: relative;
	display: inline-block;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border-radius: 20px;
	padding: 20px;
	font-size: 20px;
	line-height: 24px;
	text-transform: uppercase;
}
/* end */



.full-screen {
	overflow: hidden !important;
	height: calc(100vh - 0px);
	width: 100vw;
	margin: 0px 0 0px 0;
	text-align: center;
}

.full-screen .video-arrow {
	position: absolute;
	bottom: unset;
	margin: calc(100vh - 100px) 0 0 0;
}
.full-screen span.center {
	transform: translateY(-50%);
	top: calc(50% - 0px);
	position: relative;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 20px;
	margin: 0vh 0 0 0vw;
	display: inline-block;
	font-size: 20px;
	line-height: 24px;
	border-radius: 20px;
	text-transform: uppercase;
}
.home .full-screen span.center {
	top: calc(50% + 0px);
}
.demo-box {
	background: url("/wp-content/uploads/2023/01/led-cubes-v1.jpg") no-repeat 50% 50% #000;
	background-size: 100% auto;
}
.demo-box span {
	
}
.diagram-box {
	background: #222;
	/*background: url("/wp-content/uploads/2022/07/diagram-cube-dj-people-2.png") no-repeat 50% 50% #222;*/
}
.diagram-box .right span h2 {
	font-size: 20px;
	line-height: 20px;
	color: #3cf;
	font-weight: 500;
	text-transform: uppercase;
}
.diagram-box .right span {
	text-align: left;
}

.area {
	
}
.area .left,
.area .right {
	width: 60vw;
	height: 100vh;
	display: inline-block;
	vertical-align: top;
}
.area .right {
	background: #3cf;
	width: 40vw;
}
.area span.center {
	max-width: 70%;
	background: none;
	padding: 0;
	border-radius: 0;
	top: calc(50% - 0px);
	text-transform: unset;
	font-size: 16px;
	line-height: 18px;
	color: #222;
}
.area span.center h2 {
	color: #222 !important;
}





ul.cube-uses {
	max-width: 600px;
	text-align: left;
	font-size: 14px;
	line-height: 20px !important;
	margin: 0 auto 0px !important;
	padding: 0 40px;
}
ul.cube-uses li {
	color: #bbb;
	font-weight: 500;
	margin: 0 0 15px;
}
ul.cube-uses li:before {
	position: absolute;
	margin: 2px 0 0 -25px;
}
ul.cube-uses li b {
	display: block;
	display: block;
	color: #fff;
	font-size: 18px;
}






/* Placeholder */
::placeholder { /* Safari, etc etc */
    opacity: 1 !important; /* Firefox */
    color: #222 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	opacity: 1 !important;
    color: #222 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
opacity: 1 !important;
    color: #222 !important;
}








.option {
	display: none;
}
/*.hide.visible,*/
.option.visible {
	display: block;
}
.option .box,
.start-box {
	background: rgba(255,255,255,0.04);
	border-radius: 10px;
	min-width: unset;
	padding: 20px;
	margin: 0 auto 0px;
	display: inline-block;
}
.start-box {
	/*background: rgba(255,255,255,0.06);
	padding: 30px 30px 20px;*/
}
.form-arrow {
	display: block;
}
.form-arrow i {
	font-size: 30px;
	line-height: 30px;
	margin: 20px auto;
}
.option.equipment .top {
	min-height: 50px;
}
.radio-list {
	margin: 30px 0 0 0;
}

input.postcode {
	max-width: 100px;
	text-transform: uppercase;
}
.postcode-error {
	display: block;
	max-width: 400px;
	font-size: 12px;
	line-height: 14px;
	color: #fff;
	margin: 15px auto 5px;
}
.text-total,
.text-total input,
.text-total .price-icon {
	color: #3cf;
}












/* FAQ */
.single-question {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}
.single-question .question {
	font-size: 20px;
	line-height: 20px;
	margin: 0 auto 0px;
	color: #fff;
	display: inline-block;
	padding: 10px 20px 10px;
	border-radius: 20px 20px;
	background: #222;
}
.single-question .question:hover {
	color: #fff;
	background: #333;
	cursor: pointer;
}
.single-question.expand .question {
	color: #3cf;
	background: #333;
	padding: 10px 20px 3px;
	border-radius: 20px 20px 0 0;
}
.single-question .answer {
	font-size: 16px;
	line-height: 16px;
	height: 0px;
	overflow: hidden;
	margin: -3px 0 0 0;
}
.single-question.expand .answer {
	height: auto;
}
.single-question .answer p {
	margin: 0 0 0 0;
	position: relative;
	background: #333;
	padding: 20px 20px 20px;
	border-radius: 20px 20px;
	color: #fff;
}


/*transition: all 2s ease-in-out;*/




/* settings */
form.settings {
	background: #333;
	padding: 20px;
	border-radius: 20px;
	margin: 0px 0;
	display: inline-block;
}
form.settings label {
	display: block;
	margin: 0 10px 10px 0;
	vertical-align: top;
}
form.settings label span {
	min-width: 150px;
	display: inline-block;
	vertical-align: top;
	margin: 5px 10px 0 0;
}
form.settings label input,
form.settings label textarea {
	vertical-align: top;
	margin: -5px 5px 5px 0;
	border: 0;
}
form.settings label small {
	display: block;
}
form.settings label i {
	margin: 15px 10px 0px 5px;
	font-size: 20px;
	line-height: 20px;
	vertical-align: top;
	color: #888;
}
form.settings label select {
	border: 5px solid #333;
	margin: 5px 10px 0 0;
	box-shadow: 0 0 0px 4px #888;
}








/* Emails */
.all-emails {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 0 -10px;
}
.all-emails .single-email {
	margin: 0px 10px 30px;
	display: inline-block;
	padding: 20px;
	vertical-align: top;
	border-radius: 10px;
	background: #222;
	box-shadow: 0 0 1px 1px #333;
	max-width: 380px;
	width: 100%;
}
.all-emails .single-email:hover {
	box-shadow: 0 0 1px 1px #fff;
}
.all-emails .single-email.stripe:before {
	font-family: "FontAwesome" !important;
	content: "\f429";
	position: absolute;
	margin: -28px 0 0 -10px;
	font-size: 40px;
	line-height: 20px;
	color: #635bff;
	background: #222;
	padding: 0 10px;
}
.all-emails .single-email.stripe:hover:before {
	/*color: #3cf !important;*/
}
.all-emails .single-email.unread {
	box-shadow: 0 0 1px 1px #888;
}
.all-emails .single-email a.read,
.all-emails .single-email a.unread {
	float: right;
	margin: -5px -5px 0 0;
	color: #333;
	padding: 0;
	font-size: 20px;
	line-height: 20px;
	cursor: pointer;
	display: inline-block;
}
.all-emails .single-email a.read:hover:before,
.all-emails .single-email a.unread:hover:before {
	color: #3cf;
}
.all-emails .single-email a.read:before {
	font-family: "FontAwesome" !important;
	content: "\f2b6";
}
.all-emails .single-email a.unread:before {
	font-family: "FontAwesome" !important;
	content: "\f0e0";
	color: #408430;
}

.all-emails .single-email a.delete {
	float: right;
	margin: -5px 10px 0 0;
	color: #333;
	padding: 0;
	font-size: 20px;
	line-height: 20px;
	cursor: pointer;
	display: inline-block;
}
.all-emails .single-email a.delete:hover {
	color: #3cf;
}

.all-emails .single-email.expand {
	box-shadow: 0 0 1px 1px #3cf;
}
.all-emails .email-title {
	font-size: 16px;
	line-height: 16px;
	margin: 0 0 10px;
}
.all-emails .email-date {
	display: block;
	color: #888;
	margin: 0 0 5px;
}
.all-emails .form-name {
	font-size: 20px;
	line-height: 20px;
}
.all-emails span {
	font-size: inherit;
	line-height: inherit;
	margin: inherit;
	display: block;
	vertical-align: top;
	/*white-space: pre-line;*/
}
.all-emails .data {
	vertical-align: top;
	max-height: 72px;
	overflow: hidden;
	transition: all 2s ease-in-out;
}
.all-emails .single-email.expand .data {
	max-height: unset;
}
.all-emails .value {
	max-width: calc(100% - 140px);
	width: 100%;
	float: right;
	text-align: left;
}

.all-emails .heading {
	min-width: 130px;
	display: inline-block;
	padding: 0 10px 0 0;
	text-align: left;
	font-size: inherit;
	text-transform: capitalize;
	line-height: inherit;
	margin: inherit;
	color: #888;
}






/* Slider Plugin */
.software-gallery {
	padding: 60px 5%;
	background: #222;
}
.software-gallery h4 {
	color: #3cf;
	text-align: center;
	margin: 0 0 40px;
}
#sp-wp-carousel-free-id-720.sp-wpcp-720 .swiper-button-prev i,
#sp-wp-carousel-free-id-720.sp-wpcp-720 .swiper-button-next i {
/* 	margin-top: -70px; */
}
#sp-wp-carousel-free-id-720.sp-wpcp-720 .wpcp-swiper-dots .swiper-pagination-bullet {
	background-color: #444 !important;
}
#sp-wp-carousel-free-id-720.sp-wpcp-720 .wpcp-swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #3cf !important;
}
.wpcp-carousel-section.wpcp-image-carousel .wpcp-single-item .wpcp-all-captions {
	padding: 20px 20px 20px !important;
	text-align: center;
}





/* POPUP */
.popup {
	position: fixed;
	width: 100vw;
	left: 0px;
	top: 0px;
	z-index: 9999;
	height: 100vh;
	background: #3cf !important;
	text-align: center;
}
.popup h2 {
	color: #222 !important;
	display: inline-block;
	font-size: 50px;
	line-height: 50px;
	margin: calc(50vh - 25px) 0 0 0 !important;
	font-weight: 400;
}
.popup h2 span {
	text-transform: uppercase;
	font-weight: 800;
}



/* Email Navigation */
.email-nav {
	
}
.email-nav a {
	padding: 6px 8px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 0 8px 10px 0;
	display: inline-block;
}



.narrow {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}
.narrow ul {
	text-align: left;
	display: inline-block;
	background: #333;
	display: inline-block;
	padding: 20px;
	margin: 0px 0 20px !important;
}
.narrow li {
	list-style: circle;
	margin: 0 0 0 20px !important;
}
.narrow .gap {
	display: block;
	height: 60px;
}

.narrow.basic {
	color: #bbb;
	text-align: left;
	font-size: 14px;
}
.narrow.basic h2 {
	margin-bottom: 0px;
}
.narrow.basic span {
	color: #fff;
}
.narrow.basic li {
	margin: 0 30px 10px;
	color: #bbb;
}
.narrow.basic li:before {
	margin: 0 0px 10px -20px;
	position: absolute;
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}



/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.hire-page-links a {
		width: calc(33.333% - 62px);
	}
	.cube-features a {
		width: calc(25% - 62px);
	}
	.cube-tools a {
		width: calc(20% - 62px);
	}
	.total.preview {
		right: 5%;
	}
	.option .box,
	.start-box {
		padding: 40px 40px 30px;
		border-radius: 20px;
		min-width: 300px;
	}
}

















/* PLUGIN */
.sparkes-plugin {
	width: calc(100% - 20px) !important;
	background: #222;
	color: #fff;
	padding: 20px;
	margin: 0px 0 0 -20px;
	min-height: calc(100vh - 70px);
}
.sparkes-plugin h1 {
	color: #fff;
	display: inline-block;
	vertical-align: top;
	margin: 19px 0 0 15px;
}
.sparkes-plugin h2 {
	color: #888;
	margin: 0 0 20px 0;
}
.sparkes-plugin a {
	color: #fff;
	text-decoration: none;
}
.sparkes-plugin a:hover {
	color: #3cf;
}
.sparkes-plugin a span {
	
}
.sparkes-plugin button {
	padding: 10px 15px;
	border: none;
	border-radius: 20px;
	text-transform: uppercase;
	font-weight: 700;
}
.sparkes-plugin button:hover {
	background: #3cf;
}
.sparkes-plugin input,
.sparkes-plugin textarea {
	border: none;
	padding: 10px 10px;
	border-radius: 20px;
	font-size: 14px;
	line-height: 18px;
}
.sparkes-plugin .notice,
.sparkes-plugin div.error,
.sparkes-plugin div.updated {
	background: transparent !important;
}







/* Google recaptcha */
.grecaptcha-badge {
	display: none !important;
}




.nav-menu .highlight {
	background: rgba(255,255,255,0.0);
	padding: 8px 8px;
	border-radius: 20px;
	margin: -8px -8px -8px 0;
	box-shadow: 0 0 5px 2px #fff;
}




/* Intro */
.welcome {
	padding: 0px 20px 0;
	margin: 20px auto 0px;
	max-width: 1000px;
	font-size: 16px;
	line-height: 24px;
}
.welcome h2 {
}

/* contact */
.contact {
	background: #3cf;
	color: #222;
	padding: 20px;
	border-radius: 20px;
	font-size: 18px;
	line-height: 40px;
}
.contact a {
	background: rgba(0,0,0,0.3);
	padding: 5px 10px;
	border-radius: 6px;
	white-space: nowrap;
}
.contact a:hover {
	background: rgba(0,0,0,0.8);
}
.contact i {
	font-size: 24px;
	margin: 0 10px 0 0;
}




/* Model */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}
.modal-name {
  position: absolute;
  top: 30px;
  left: 5%;
  color: #3cf;
  font-size: 24px;
	line-height: 24px;
  text-align: center;
  max-width: 90vw;
}
.modal-info {
	position: absolute;
  	top: 70px;
  	left: 5%;
	text-align: left;
}
.modal-description {
  	color: #fff;
  	font-size: 14px;
	max-width: 200px;
	text-align: left;
	background: #222;
	padding: 15px;
	border-radius: 10px;
}
.modal-description ul {
	list-style: inside !important;
	margin: 0 !important;
}
.modal-description li {
	margin: 0 !important;
	color: #888 !important;
}
.pixels {
	color: #fff;
	background: #222;
	margin: 0 0 10px;
	padding: 15px;
	display: inline-block;
	font-size: 16px;
	line-height: 16px;
	border-radius: 10px;
	font-weight: 600;
}
.pixels span {
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	color: #888;
}
.image-modal.show {
  display: flex;
}

.image-modal .modal-content {
  object-fit: contain;
	image-rendering: auto;
	width: auto;
  	height: auto;
  	max-width: min(90vw, 100%);
  	max-height: min(90vh, 100%);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 5%;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
	line-height: 40px;
}

.image-modal .modal-media {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.image-modal .modal-content {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

#modalImage, #modalVideo {
  display: none;
}
.descript-button {
	display: none;
	color: #888;
	line-height: 14px;
	padding: 6px 0;
}
.descript-button:hover {
	color: #3cf;
}

/* Showcase */
.showcase-item {
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
  	margin: 0 0 20px 0;
  	padding: 0px;
  	border-radius: 0px;
	vertical-align: top;
	position: relative;
  	overflow: hidden;
	display: inline-block;
	width: 100%;
	border-radius: 20px;
}
.showcase-media {
	vertical-align: top;
}
.showcase-item .spec {
  	position: absolute;
  	top: 0;
  	left: 20px;
	text-align: left;
  	transform: translateY(-100%);
  	opacity: 0;
  	transition: transform 0.4s ease, opacity 0.4s ease;
	z-index: 1000;
}
.showcase-item .spec i {
	color: #222;
	background: #ddd;
	font-size: 16px;
	line-height: 16px;
	vertical-align: top;
	padding: 8px;
	border-radius: 0 5px 5px 0;
}
.showcase-item .spec h2 {
	color: #222;
	background: #fff;
	padding: 8px;
	margin: 0px 0px 0px 0 !important;
	font-size: 16px !important;
	line-height: 16px !important;
	display: inline-block;
	border-radius: 5px 0 0 5px;
	vertical-align: top;
	font-weight: 600;
}
.showcase-item .spec .descript-spec {
	color: #ccc;
	background: rgba(0,0,0,0.7);
	padding: 8px;
	margin: 10px 0 0px;
	font-size: 13px;
	line-height: 16px;
	max-width: 150px;
	border-radius: 5px;
	display: none;
}
.showcase-item .spec .descript-button {
	display: none;
}
.showcase-item .spec .descript-spec ul {
	margin: 0px 0 0px;
	font-size: 11px;
	line-height: 11px;
	list-style: inside;
}
.showcase-item .spec .descript-spec li {
	margin: 1px 0 1px;
	color: #ccc;
}
.showcase-item:hover .spec {
	transform: translateY(20px);
  	opacity: 1;
}
.showcase-media a {
	position: relative;
	z-index: 100;
	display: block;
}

.showcase-columns:hover img {
/* 	filter: blur(5px) saturate(10%); */
}
.showcase-media a:hover img {
/* 	filter: blur(0px) saturate(100%); */
	filter: brightness(150%);
}

.showcase-content {
	font-size: 12px;
	line-height: 13px;
}
.showcase-media img,
.showcase-media video {
  	border-radius: 0px;
  	margin-bottom: 0px !important;
	width: 100vw !important;
	display: block;
}
.showcase-columns {
  	column-count: 4;
	column-gap: 20px;
	padding: 20px;
}

@media (max-width: 1500px) {
  .showcase-columns {
    column-count: 3;
  }
}

@media (max-width: 900px) {
  .showcase-columns {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  	.showcase-columns {
    	column-count: 1;
  	}
	.modal-name {
		font-size: 18px;
		line-height: 18px;
	}
	.descript-spec {
		display: none;
	}
	.descript-spec.active {
		display: inline-block;
	}
	.descript-button {
		display: block;
	}
	.modal-info {
		top: 60px;
	}
	.pixels,
	.modal-description {
		padding: 10px;
	}
}