/**********************
	BODY
**********************/

html {
	position: relative;
	min-height: 100%;
}

body {
	font-family: 'lilliput_stepsregular';
	font-size: 16px;
	text-transform: uppercase;
	color: #ffffff;
	background-color: rgba(27,20,100,1);
	

}

body.jdd .hRotate {
	animation: bgrotate 4s infinite;
}

body.bw {
	background-color: #929fca;
}

body.jdd .jaak,
body.bw .bart {
	display: block;
}

body.jdd .bart,
body.bw .jaak {
	display: none;
}

.home .prOverview {
	width: calc(100vw - 20px);
	margin: 0 auto;
}

.home.jdd .bgMover01 {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; 
	z-index: -1000000;
	background: linear-gradient(180deg, rgba(27,20,100,1) 0%, rgba(223,30,94,1) 100%);
	background-size: 400% 400%;
	animation: bgFlicker 4s ease infinite, bgrotate 4s infinite;
	overflow: hidden;
}

.home.bw .bgMover01 {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; 
	z-index: -1000000;
	background: linear-gradient(180deg, rgb(146, 159, 202) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
	background-size: 400% 400%;
	animation: bgFlicker 8s ease infinite;
	overflow: hidden;
}

.home.jdd .bgMover02 {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; 
	background-image: url("../images/bg-grid.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	animation: bgGridMove 20s ease infinite, flicker 0.15s infinite, bgrotate 4s infinite;
	height: 100%;	
}

.home .about-summary {
	background: rgba(232, 74, 75, 1);
	margin: 4em 0 3em;
	text-transform: uppercase;
}

.home.bw .about-summary {
	background: #6977a8;
}

.home .about-summary .padder {
	width: 80%;
	padding: 3em 0;
}

.home .about-summary h2 {
	font-size: 1.62em;
	line-height: 1em;
	color: rgba(255,255,255,0.5);
	margin: 0 0 1em 0;
}

.home .about-summary p {
	line-height: 1.25em;
}

.home .about-summary a {
	font-size: 1.25em;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

.home .about-summary a:hover {
	color: rgba(255,255,255,1);
}

.home .about-summary .live-dates {
	background: #F5A526;
	padding: 1.5em;
	margin: 1.5em 0 -1.5em;
}

.home.bw .about-summary .live-dates {
	background: #4c5a88;
}

.home.bw .about-summary .live-dates h2,
.home.bw .about-summary .live-dates .location {
	color: rgba(255,255,255,0.5);
}

.home .about-summary .live-dates h2,
.home .about-summary .live-dates .location {
	color: rgba(232, 74, 75, 1);
}

.home .about-summary .live-dates .event {
	border-top: 1px solid rgba(255,255,255,0.4);
	padding: 0.5em 0 1em;
}

.home .about-summary .live-dates .event-date {
	float: left;
	width: 3.25em;
	margin-right: 1em;
}

.home .about-summary .live-dates .event-info {
	float: left;
}

.home .about-summary .live-dates .location {
	line-height: 0.5em;
}

.box_shadows.tl:hover,
.box_shadows.tl.hovered {
  box-shadow: 4px 4px 0 #F5A526, 8px 8px 0 #F07539, 12px 12px #E84A4B, 16px 16px 0 #DF1E5E;
  animation: box_shadows_tl 1s linear infinite, box_shadows_move_tl 1s linear infinite;
}

.box_shadows.tr:hover,
.box_shadows.tr.hovered {
  box-shadow: -4px 4px 0 #F5A526, -8px 8px 0 #F07539, -12px 12px #E84A4B, -16px 16px 0 #DF1E5E;
  animation: box_shadows_tr 1s linear infinite, box_shadows_move_tr 1s linear infinite;
}

.box_shadows.br:hover,
.box_shadows.br.hovered {
   box-shadow: -4px -4px 0 #F5A526, -8px -8px 0 #F07539, -12px -12px #E84A4B, -16px -16px 0 #DF1E5E;
  animation: box_shadows_br 1s linear infinite, box_shadows_move_br 1s linear infinite;
}

.box_shadows.bl:hover,
.box_shadows.bl.hovered {
   box-shadow: 4px -4px 0 #F5A526, 8px -8px 0 #F07539, 12px -12px #E84A4B, 16px -16px 0 #DF1E5E;
  animation: box_shadows_bl 1s linear infinite, box_shadows_move_bl 1s linear infinite;
}

/**********************
	LOGO & BASELINE
**********************/

.logo {
	border: 0 !important;
}

.logo svg {
	width: 82%;
	max-width: 600px;
	display: inline-block;
	overflow: visible;
}

.logo.jaak svg .st0{ enable-background:new; }
.logo.jaak svg .st6{ fill:#ffffff; }
.logo.jaak svg .st5,
.logo.jaak svg .st4{ fill:#f5a526; }
.logo.jaak svg .st3{ fill:#f07539; }
.logo.jaak svg .st2{ fill:#e84a4b; }
.logo.jaak svg .st1{ fill:#df1e5e; }

.logo.bart svg .st1{ fill:#4c5a88; }

body.home.jdd .logo.jaak svg .st4 {
	animation: shake 3s linear infinite;
	transform-origin: center center;
}

body.home.jdd .logo.jaak svg .st3 {
	animation: shake 2.8s linear infinite, st3Color 0.8s linear infinite;
	animation-delay: 0.15s;
	transform-origin: center center;
}

body.home.jdd .logo.jaak svg .st2 {
	animation: shake 2.6s linear infinite, st2Color 0.6s linear infinite;
	animation-delay: 0.3s;
	transform-origin: center center;
}

body.home.jdd .logo.jaak svg .st1 {
	animation: shake 2.4s linear infinite, st1Color 0.4s linear infinite;
	animation-delay: 0.45s;
	transform-origin: center center;
}

.baseline {
	font-size: 1.25em;
	text-transform: uppercase;
}


/**********************
	PAGE BGs
**********************/

body.portfolio,
body.portfolio .bgMover01,
body.portfolio-detail,
body.portfolio-detail .bgMover01 {
	background: #f07539;
}

body.about,
body.about .bgMover01,
body.cookies-privacy,
body.cookies-privacy .bgMover01 {
	background: #e84a4b;
}

body.contact,
body.contact .bgMover01d {
	background: #df1e5e;
}

body.portfolio .bgMover01,
body.portfolio-detail .bgMover01,
body.about .bgMover01,
body.contact .bgMover01,
body.cookies-privacy .bgMover01 {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; 
	z-index: -1000000;
}

.bgMover02 {
	opacity: 0.4;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0; 
	height: 100%;
}

/****************************
	TEXT LAYOUT
****************************/

h1, .h1,
h2, .h2 {
	font-size: 2em;
	color: rgba(255,255,255,1);
}

h3 {
	font-size: 1.25em;
}

h1 {
	margin: 0;
	line-height: 1em;
	color: #ffffff;
}

h2, h3 {
	line-height: 1em;
	margin: 0;
}

.portfolio h2,
.portfolio h3,
.portfolio-detail h2,
.portfolio-detail h3 {
	color: #e84a4b;
}

.about h2,
.about h3,
.cookies-privacy h2,
.cookies-privacy h3 {
	color: #f5a526;
	color: rgba(255,255,255,0.5);
}

.contact h2,
.contact h3,
.contact a {
	/* color: #f5a526; */
	color: rgba(255,255,255,0.5);
}

.contact a {
	transition: 0.25s;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.4);
	padding-bottom: 2px;
}

.contact a:hover {
	transition: 0.25s;
	border-color: rgba(255,255,255,1);;
}

p {
	margin: 1em 0;
}

p.last {
	margin-bottom: 0;
}

p a {
	color: #ffffff;
}

p a:hover {
	color: rgba(255,255,255,0.5);
}

ul.menu,
ul.menu li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.portfolio-detail .detail {
	margin-top: 1.5em;
}

.portfolio-detail .detail a {
	text-decoration: none;
}

.portfolio-detail .detail a:hover {
	color: #E84A4B;
}

#page-head {
	padding: 2em 0;
}

.youtube-video-container {
	position: relative;
	overflow: hidden;
	max-width: 100vw;
	max-height: 100vh;
}

.youtube-video-container::after {
	display: block;
	content: "";
	padding-top: 56.25%;
}

.youtube-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.home .projectwrapper {
	float: left;
	width: calc(28.66vw - 7px);
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
}

.home .pr1,
.home .pr7 {
	margin-left: 9vw;
	margin-right: 0.5vw;
}

.home .pr2,
.home .pr5,
.home .pr8,
.home .pr11 {
	margin-left: 0.5vw;
	margin-right: 0.5vw;
}

.home .pr3,
.home .pr9 {
	margin-left: 0.5vw;
	margin-right: 3vw;
}

.home .pr4,
.home .pr10 {
	margin-left: 3vw;
	margin-right: 0.5vw;
}

.home .pr6,
.home .pr12 {
	margin-left: 0.5vw;
	margin-right: 9vw;
}

.project a {
	display: block;
	transition-duration: 0.25s;
	position: relative;
}

.project a:hover {
	z-index: 99998;
}

video,
.projectwrapper img {
	width: 100%;
	display: block;
}

.project .trail {
	position: absolute;
	bottom: 0;
	border-radius: 0 0 8px 8px;
}

.project .info {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: none;
	text-transform: uppercase;
	font-size: 2vw;
	line-height: 1em;
	color: #ffffff;
	padding: 1vw;
	text-align: center;
}

.project .previewinfo {
	display: none;
}

.project .previewinfo .client {
	color: #f07539;
}

body.bw .project .previewinfo .client {
	color: rgba(255,255,255,0.5);
}

body.portfolio .project .previewinfo,
body.home.bw .project .previewinfo {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	text-transform: uppercase;
	font-size: 1em;
	line-height: 1em;
	color: #ffffff;
	padding: 1vw;
	z-index: 1;
}

body.bw .project .info {
	background: rgba(76,90,136,0.75);
}

body.bw .project .previewinfo {
	padding-top: 3em !important;
	background: rgba(76,90,136,0.75);
	background: linear-gradient(0deg, rgba(76,90,136,0.75) 0%, rgba(76,90,136,0) 100%);
}

.project a:hover .previewinfo,
.project a.hovered .previewinfo {
	display: none !important;
}

.project video,
.project a:hover img {
	border-radius: 1px;
}

.project a:hover .info,
.project a.hovered .info {
	display: block;
}

.project .glitch {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: url("../images/glitch.gif");
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 2;
}


/****************************
	NAV ICON
****************************/

.navIcon {
	z-index: 11000;
	position: fixed;
	right: 2.5rem;
	width: 30px;
	height: 14px;
	margin-top: -14px;
	transition-duration: 0.25s;
}

.navIcon .icon {
	transition-duration: 0.25s;
	position: absolute;
	height: 14px;
	width: 30px;
}

.navIcon .icon:before {
	transition-duration: 0.25s;
	position: absolute;
	width: 30px;
	height: 2px;
	background-color: #ffffff;
	content: "";
	top: 0;
	left: 0;
	border-radius: 5px;
}

.navIcon .icon:after {
	transition-duration: 0.25s;
	position: absolute;
	width: 30px;
	height: 2px;
	background-color: #ffffff;
	content: "";
	top: 10px;
	left: 0;
	border-radius: 5px;
}

.navIcon.open .icon {
	transition: 0.25s;
}

.navIcon.open .icon:before{
	transform: rotateZ(45deg) scaleX(1) translate(4px, 4px);
}

.navIcon.open .icon:after{
	transform: rotateZ(-45deg) scaleX(1) translate(3px, -3px);
}

.navIcon:hover {
	cursor: pointer;
}


/****************************
	NAV OVERLAY
****************************/

.navOverlay {
	z-index: 10000;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
}

.navOverlay.open {
	display: block;
}

.navOverlay.main {
	background: rgba(27, 20, 100, 0.95);
}

.navOverlay.categories {
	background: rgba(240, 117, 57, 0.95);
}

.navOverlay .menu a {
	font-family: "lilliput_stepsregular";
	font-size: 1.75em;
	line-height: 2em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	border: 0;
	display: inline-block;
	margin: 0 auto;
}

.navOverlay .menu a span {
	display: none;
	padding: 0 1em;
}

.navOverlay .menu a.arrows span {
	display: inline-block;
}


/****************************
	BACK ARROW
****************************/

.arrow {
	z-index: 10000;
	position: fixed;
	width: 1.25rem;
	height: 1.25rem;
	background: transparent;
	border-top: 0.18rem solid #fff;
	border-right: 0.18rem solid #fff;
	box-shadow: 0 0 0 #fff;
	transition: all 200ms ease;
	margin-top: -0.5rem;
}

.arrow.left {
	left: 2.5rem;
	transform: translate3d(0,-50%,0) rotate(-135deg);
}

.arrow.right {
	right: 1.5rem;
	transform: translate3d(0,-50%,0) rotate(45deg);
}


/****************************
	DESIGN SWITCH
****************************/

.designSwitch {
	z-index: 10000;
	position: fixed;
	margin-top: -1.25rem;
	left: 2.5rem;
}

.designSwitch a {
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	border: 2px solid rgba(255,255,255,0);
	border-radius: 3px;
	line-height: 26px;
	width: 30px;
	height: 30px;
	text-align: center;
	margin: 0 4px 0 0;
}

.designSwitch a.active {
	border: 2px solid rgba(255,255,255,1);
}

.designSwitch svg {
	display: inline-block;
	margin-left: 1px;
}


/****************************
	FILTER
****************************/

.projectsfilter  {
	margin: 0 0 2.5em 0;
}

.projectsfilter .filter {
	font-size: 1.15em;
	display: inline-block;
	padding: 0.05em 1em;
	margin: -1px -1px 0 0;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #ffffff;
}

.projectsfilter .filter:hover {
	background: rgba(255, 255, 255, 0.2);
}

.projectsfilter .filter.active {
	color: rgba(240, 117, 57, 1);
	background: rgba(255, 255, 255, 1);
}

.projectsfilter .divider {
	display: none;
}


/****************************
	HELPERS
****************************/

.ns,
.hide,
.hidden {
	display: none;
}

.text-right {
	text-align: right;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.vertical-align-text {
	position: relative;
	top: 50%;
    transform: translateY(-50%);
}

.fixed {
	position: fixed !important;
}

.relative {
	position: relative;
}


/****************************
	FOOTER
****************************/

.sticky-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer-content {
	text-transform: uppercase;
	margin: 2.5em 0 0;
}

.home .footer-content {
	margin: 0;
}

.home.jdd .footer-content {
	background: #DF1E5E;
	border: 0;
}

.home.bw .footer-content {
	background: #4c5a88;
	border: 0;
}

.footer-content .padder {
	padding: 1.5em 0 0.75em;
	border: 1px solid rgba(255,255,255,0.4);
	border-bottom: 0;
}

.home .footer-content .padder {
	border: 0;
}

.footer-content a {
	transition: 0.25s;
	color: rgba(255,255,255,1);
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.4);
	padding-bottom: 2px;
}

.footer-content a:hover {
	transition: 0.25s;
	color: rgba(255,255,255,1) !important;
	border-color: rgba(255,255,255,1);;
}

.footer-content a.icon {
	border: none;
	font-size: 1.35em;
}

.footer-content .menu {
	display: inline-block;
	line-height: 1.5em;
}

.footer-content .menu li {
	float: left;
	margin: 0 1em;
	display: inline;
}

.footer-content .copy-disc {
	color: rgba(255,255,255,0.6);
	clear: both;
	font-size: 0.82em;
	margin-top: 0.5em;
}

.footer-content .copy-disc a {
	color: rgba(255,255,255,0.6);
}

.footer-content .menu a span {
	display: none;
}

#toTopBtn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 2em;
	height: 2em;
	padding: 0 !important;
	text-align: center;
	line-height: 2em;
	background: #DF1E5E;
	color: #ffffff;
	border: 0 !important;
	outline: none !important;
	border-radius: 100%;
	z-index: 999999999;
	font-size: 2em;
	display: none;
}

.webdesign a {
	font-size: 0.82em;
	border: 0;
}

.webdesign a span {
	line-height: 25px;
	border-bottom: 1px solid rgba(255,255,255,0.4);
	padding-bottom: 2px;
}

.webdesign svg {
	width: 25px;
	fill: #ffffff;
	margin-left: -4px;
}

/**********************
	CRT EFFECT
**********************/

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt,
.crt_separate {
  animation: textShadow 1.6s infinite;
}

.home.bw .crt,
.home.bw .crt_separate {
	animation: none !important;
}


#form {
	margin-top: 2em;
}

body.contact label {
	display: none;
}

.formrow {
	margin: 0 0 1em;
}

input,
textarea {
	width: 100%;
	background: none;
	border: 2px solid #ffffff;
	border-radius: 0;
	padding: 1em 1.5em;
	text-transform:uppercase;
	color: #ffffff;
	
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.5);
}

input[type="submit"] {
	width: auto !important;
}

.formrow.company {
	display: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}

button {
	width: auto;
	background: none;
	border: 2px solid #ffffff;
	border-radius: 0;
	padding: 1em 1.5em;
	text-transform:uppercase;
	color: #ffffff;
}

#cb-cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99999; border-radius: 0; background: rgba(27,20,100,1); color: #ffffff; border: 0; }
#cb-cookie-banner a { display: inline-block; color: rgba(232, 74, 75, 1); text-decoration: none; border-bottom: 1px solid rgba(232, 74, 75, 0.4); padding-bottom: 2px; }
#cb-cookie-banner a:hver { border-bottom: 1px solid rgba(232, 74, 75, 1); }
#cb-cookie-banner span { display: block; }
#cb-cookie-banner button { background: rgba(232, 74, 75, 1); border: 0; border-radius: 0; padding: 1em 1.5em; text-transform:uppercase; }
#cb-cookie-banner img { max-width: 100px; width: 100%; }


/****************************
	MOBILE
****************************/

main {
	padding: 2em 0;
}

.home main {
	padding: 0;
}

.text-padder {
	width: 90%;
}

.mobile {
	display: none;
}

.desktop {
	display: block;
}

@media only screen and (max-width: 991px) {

	main {
		padding: 1em 0;
	}
	
	.arrow.left,
	.designSwitch {
		left: 1em;
	}
	
	.navIcon {
		right: 1.5em;
	}

	.mobile {
		display: block;
	}
	
	.desktop {
		display: none;
	}

}

@media only screen and (max-width: 767px) {

	main {
		padding: 0 0;
	}
	
	.home .projectwrapper {
		width: calc(43.5vw - 10px);
	}

	.home .pr1,
	.home .pr5,
	.home .pr9 {
		margin-left: 9vw;
		margin-right: 0.5vw;
	}
	
	.home .pr2,
	.home .pr6,
	.home .pr10 {
		margin-left: 0.5vw;
		margin-right: 3vw;
	}
	
	.home .pr3,
	.home .pr7,
	.home .pr11 {
		margin-left: 3vw;
		margin-right: 0.5vw;
	}
	
	
	.home .pr4,
	.home .pr8,
	.home .pr12 {
		margin-left: 0.5vw;
		margin-right: 9vw;
	}

	.home .previewinfo {
		display: none !important;
	}

	.navIcon {
		right: 1rem;
		width: 24px;
		margin-top: -10px;
	}
	
	.navIcon .icon {
		width: 24px;
	}
	
	.navIcon .icon:before {
		width: 24px;
	}
	
	.navIcon .icon:after {
		width: 24px;
	}
	
	.navOverlay .menu a {
		font-size: 1.3em;
	}

	.baseline {
		font-size: 1em;
	}

	.designSwitch a {
		display: block;
	}

	.home .about-summary {
		margin: 3em 0;
	}

	.home .about-summary .padder {
		width: auto;
		padding: 3em 0 1.5em;
	}

	.text-padder {
		width: auto;
	}
	
	.margin-top-mobile {
		margin-top: 2.5em;
	}
	
	#cb-cookie-banner {
		text-align: center;
	}
	
	#cb-cookie-banner button {
		margin-top: 1em;
	}

	#cb-cookie-banner img {
		width: auto;
		margin-bottom: 1em;
	}
	
	.footer-content .menu li {
		float: none;
		margin: 1em 0;
		display: block;
	}

	.mobile-hide {
		display: none;
	}
	
	.mobile-block {
		display: block;
	}

}