/*!
Theme Name: Swamp Motel Award Submissions
Theme URI: http://underscores.me/
Author: Swamp Motel
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: swamp-motel-award-submissions
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Swamp Motel Award Submissions is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
	background-size: cover!important;
	background-attachment: fixed!important;
	margin: 0!important;
	padding: 0!important;
	line-height: 1.3!important;
	font-size: 17px;
}

/* CUSTOM CSS RESET THINGS */
* {
	box-sizing: border-box;
}

/* NAVIGATION */

nav {
	position: fixed; 
	width: 100%;
	padding: 20px 5%;
	top: 0;
	z-index: 100;
    box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.7);
}
.nav-items {
	display: flex;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}

.nav-items img {
	height: 40px;
}

.nav-items a {
	margin-left: 50px;
	font-size: 20px;
	text-decoration: none;
}

 
@media only screen and (max-width: 1100px)  {
	.nav-items  {
		width: 94%;
		padding: 10px 3%;
	}
	.nav-items > img {
		height: 45px;
	}
	.nav-items a {
		margin-left: 30px;
		font-size: 18px;
	}
}

@media only screen and (max-width: 800px)  {
	.nav-items  {
		width: 94%;
		padding: 10px 3%;
	}
	.nav-items > img {
		height: 30px;
	}
	.nav-items a {
		margin-left: 20px;
		font-size: 16px;
	}
}


/* MAIN BLOCKS */

.content {
	width: 90%;
	max-width: 1100px;
	margin: 100px auto;
}

.section {
	width: 100%;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	margin-top: -210px;
	padding-top: 210px;
	margin-bottom: 150px;
	/* scroll-margin-top: 100px; */
}

.section > * {
	flex: 1 1 50%;
}

.isklander .section-break-line {
	display: none;
}

@media only screen and (max-width: 1100px)  {
	.content {
		width: 95%;
	}
}

@media only screen and (max-width: 800px)  {
	.section {
		flex-wrap: wrap;
		margin-top: -150px;
		padding-top: 150px;
		margin-bottom: 125px;
	}
	/* I HAVE ADDED THESE TO TRY AND BREAK UP THE CONTENT A BIT IN MOBILE MODE, MIGHT BE A NICER WAY TO DO IT... */
	.isklander .section-break-line {
		display: block;
		margin-top: -90px;
    	margin-bottom: 50px;
	}
	.enz .section:after {
		content:' ';
		width: 50px;
		margin: 40px auto 0 auto;
		border-top: 10px dotted white;

	}
}

/* REUSABLES */
.TrailerContainer {
	margin-left: 10px;
	margin-right: 10px;
	flex: 1 1 100%;
}
.TrailerBox {
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 at 40% Wide*/
	position: relative;
	height: 0;
	margin: 0 auto;
}

.TrailerBox iframe {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
}

@media (min-aspect-ratio: 10/7) {
	.TrailerBox {
		width: 80%;
		padding-bottom: 45%; /* 16:9 at 80% Wide*/
	}
}

.text {
	padding-right: 85px;
}


@media only screen and (max-width: 1000px)  {
	.text {
		padding-right: 70px;
	}
}

@media only screen and (max-width: 900px)  {
	.text {
		padding-right: 60px;
	}
}

@media only screen and (max-width: 800px)  {
	.text {
		padding-right: 20px;
	}
}

@media only screen and (max-width: 600px)  {
	.text {
		padding-right: 10px;
	}
}

/*! ENZ */

body.enz {
	background: #c0c69e;
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	background-position: top;
	background-size: 2000px!important;
}
.enz .content {
	margin-top: 290px;
}

@media only screen and (max-width: 1100px)  {
	.enz .content {
		margin-top: 250px;
	}
}

@media only screen and (max-width: 800px)  {
	.enz .content {
		margin-top: 220px;
	}
}

@media only screen and (max-width: 600px)  {
	.enz .content {
		margin-top: 165px;
	}
}
.enz .section {
	align-items: center;
}


/* ENZ: NAV */

.enz nav {
	background-position: top;
	background-size: 2000px;
	padding-bottom: 0;
	box-shadow: none;
	height: 160px;
}

.enz .deloitte {
	position: absolute;
    z-index: 101;
    width: 150px;
    left: calc(50% - 160px);
	top: 50%;
	transform: translate(-50%,-50%);
}

.enz .logo {
	position: absolute;
	width: 140px;
	height: 140px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.enz .logo img {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease-in-out;
}


.enz .logo .option-0 {
	transform: rotate(27deg);
}
.enz .logo .option-1 {
	transform: rotate(47deg);
}
.enz .logo .option-2 {
	transform: rotate(67deg);
}

.enz nav a {
	color: #ffffff;
	text-transform: uppercase;
}
.enz nav a:hover {
	text-shadow: -1px 0px 15px #CECECE;
}

.enz .nav-items {
	display: block;
	position: absolute;
	border: none;
	width: fit-content;
	margin: 0;
	padding:0;
	top: 50%;
	left: calc(50% + 50px);
	transform: translate(0,-50%);
}
.enz .nav-items a {
	display: block;
	transition: all 0.4s;
}

.enz .nav-items a.active {
	color: #287259;
	text-shadow: 0px 0px 3px white;
}



@media only screen and (max-width: 800px)  {
	.enz nav {
		height: 120px;
	}
	.enz .nav-items {
		left: calc(50% + 45px);
	}
	.enz .nav-items a {

	}
	.enz .deloitte {
		width: 110px;
		left: calc(50% - 120px)
	}
	.enz .logo {
		width: 100px;
		height: 100px;
	}
}

@media only screen and (max-width: 600px)  {
	.enz nav {
		height: 100px;
	}
	
	.enz .nav-items {
		left: calc(50% - 10px);
	}
	.enz .nav-items a {
		
	}
	.enz .deloitte {
		width: 90px;
		left: calc(50% - 130px)
	}
	.enz .logo {
		width: 80px;
		height: 80px;
		left: calc(50% - 45px)
	}
}

/* ENZ: OPENING / CASE STUDY / QUOTES / VIRTUAL /ENGAGING */
/* NOTE: Probably stupid to keep replicating this explicitly, could tidy this up as it's something we do re-use a lot. Probably won't bother as it's a one off */

.enz .opening .image-container,
.enz .cstudy .image-container,
.enz .quotes .image-container,
.enz .virtual .image-container,
.enz .engaging .image-container{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.enz .opening .image-container > *,
.enz .cstudy .image-container > *,
.enz .quotes .image-container > *,
.enz .virtual .image-container > *,
.enz .engaging .image-container > *{
	display: block;
	width: 100%;
}

.enz .opening .image-container > *,
.enz .cstudy .image-container > *,
.enz .quotes .image-container > *,
.enz .engaging .image-container > *{
	border: solid 1px;
}

@media only screen and (max-width: 800px)  {
	.enz .opening .image-container,
	.enz .cstudy .image-container,
	.enz .quotes .image-container,
	.enz .virtual .image-container,
	.enz .engaging .image-container{
		flex: 0 0 auto;
		width: 100%;
		margin-top: 20px;
	}
}

.enz .opening .text {
	flex: 1 1 60%;
}

.enz .cstudy .text {
	flex: 1 1 65%;
}

.enz .quotes .quote {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 50px;
	padding-right: 50px;
}

.enz .quotes .quote {
	text-align: left;
}
.enz .virtual .laptop-container {
	position: relative;
	align-self: center;
}
.enz .virtual .laptop-container .in-laptop-frame {
	position: absolute;
	z-index: -1;
	width: 78%;
	top: 7%;
}


.enz .gif-gallery {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.enz .gif-gallery .image-container {
	width: 30%;
	flex: 1 1 auto;
	border: solid 1px;
	height: fit-content;
	margin: 0 10px;
	overflow: hidden;
}
.enz .gif-gallery .image-container:nth-last-child(1) {
	margin-bottom: 0px;
}
.enz .gif-gallery .image-container video {
	width: 100%;
	margin-bottom: -6px;
}

@media only screen and (max-width:800px) {
	.enz .gif-gallery {
		flex-wrap: wrap;
	}
	.enz .gif-gallery .image-container {
		width: 100%;
		margin: 10px auto;
	}
}


/*! ISKLANDER */

@import url("//hello.myfonts.net/count/3ea671");
@font-face {
    font-family: "LogoBold";
    src: url('fonts/New_Wayfinder_CF_Bold.woff2') format('woff2'), 
	url('fonts/New_Wayfinder_CF_Bold.woff') format('woff');}
@font-face {
    font-family: "LogoDemiBold";
    src: url('fonts/New_Wayfinder_CF_DemiBold.woff2') format('woff2'), 
	url('fonts/New_Wayfinder_CF_DemiBold.woff') format('woff');}

body.isklander{
	background: #000000;
	color: #ffffff;
	font-family: calmetta, sans-serif;
	font-weight: 300;
}
.isklander .content {
	margin-top: 220px;
}

.isklander h2 {
	font-family: LogoDemiBold;
}

.isklander .section {
	align-items: center;
}
.isklander .text {
	padding-right: 50px;
}


@media only screen and (max-width: 1100px)  {
	.isklander .text {
		padding-right: 20px;
	}
}

@media only screen and (max-width: 800px)  {
	.isklander .content {
		margin-top: calc(28% - 40px); /* The image is % based, so this should be too */
	}
	.isklander .text {
		padding-right: 0px;
	}
}

@media only screen and (max-width:450px) {
	.isklander .content {
		margin-top: 28%;
	}
}

/* ISKLANDER: NAV */

.isklander nav {
	text-align: center;
	padding: 0;
}
.isklander nav img {
	width: 600px;
    margin: -31px auto -31px;
}
.isklander nav a {
	color: #ffffff;
	font-weight: 300;
	margin-right: 50px;
}
.isklander nav a:hover {
	text-shadow: -1px 0px 15px #CECECE;
}
.isklander nav .nav-items {
	width: 100%;
	justify-content: center;
	border-style: solid;
	border-width: 1px 0 1px 0;
}

.isklander .nav-items a.active {
	text-decoration: underline;
}

@media only screen and (max-width: 1100px)  {
	.isklander .nav-items a {
		margin-right: 30px;
	}
}

@media only screen and (max-width: 800px)  {
	.isklander .nav-items a {
		margin-right: 20px;
	}
	.isklander nav img {
		width: 80%;
		margin: -31px auto -31px;
	}
}

@media only screen and (max-width:450px) {
	.isklander nav img {
		margin: -16px auto -16px;
	}
}

/* ISKLANDER: OPENING */

.isklander .opening .image-container {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.isklander .opening .image-container img {
	display: block;
	width: 100%;
}


@media only screen and (max-width: 800px)  {
	.isklander .opening .image-container {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 20px;
	}
}

/* ISKLANDER: INNOVATION */

.isklander .innovation .image-container {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.isklander .innovation img {
	display: block;
	margin: 0 auto;
	width: calc(100% - 20px);
}

@media only screen and (max-width: 800px)  {
	.isklander .innovation .image-container {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 20px;
	}
}

/* ISKLANDER: RESULTS */

.isklander .results .image-container {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.isklander .results img {
	display: block;
	margin: 0 auto;
	width: calc(100% - 20px);
}

@media only screen and (max-width: 800px)  {
	.isklander .results .image-container {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 20px;
	}
}

/* ISKLANDER: REVIEWS */

.isklander .reviews {
	display: flex;
	align-items: start;
	justify-content: space-between;
}
.isklander .reviews img {
	width: 100%;
}
.isklander .reviews .review-item {
	flex: 0 0 auto;
	width: 32%;
	text-align: center;
}

.isklander .reviews .review p {
	margin-bottom: 0;
}
.isklander .reviews .review img {
	margin: 10px;
	width: 100px;
}

@media only screen and (max-width: 800px)  {
	.isklander .reviews .review {
		margin-bottom: 1em;
	}
	.isklander .reviews .review-item {
		width: 100%;
		text-align: center;
	}
}


/* ISKLANDER: TRILOGY */

.isklander .trilogy .images {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.isklander .trilogy .images img {
	display: block;
	flex: 0 0 auto;
	width: 65%;
	margin: 10px auto;
}

@media only screen and (max-width: 1000px)  {
	.isklander .trilogy .images img {
		width: 80%;
		margin: 10px auto;
	}
}

@media only screen and (max-width: 900px)  {
	.isklander .trilogy .images img {
		width: 90%;
		margin: 10px auto;
	}
}

@media only screen and (max-width: 800px)  {
	.isklander .trilogy .images {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 20px;
	}

	.isklander .trilogy .images img {
		flex: 0 0 auto;
		width: 100%;
	}
}


/*! PANIC */

body.panic {
	background: #000000;
	color: yellow;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
}

.panic .content {
	margin-top: 100px;
}

@media only screen and (max-width: 1100px)  {
	.panic .content {
		margin-top: 100px;
	}
}

@media only screen and (max-width: 800px)  {
	.panic .content {
		margin-top: 90px;
	}
}




/* PANIC: NAV */

.panic nav {
	background-color: #000000;
}
.panic nav a {
	color: yellow;
}
.panic nav a:hover {
	text-shadow: -1px 0px 15px #CECECE;
}

.panic .nav-items a.active {
	text-decoration: underline;
}


/* PANIC: OPENING */

.panic .opening .image-container {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.panic .opening .image-container img {
	display: block;
	width: 100%;
	padding: 15px 15% 0;
}

.panic .opening .tape_heading {
	width: 450px;
    font-size: 42px;
    padding: 64px 0 86px 55px;  
}

@media only screen and (max-width: 1100px)  {
	.panic .opening .tape_heading {
		width: 300px;
		font-size: 28px;
		padding: 43px 0 51px  30px;
	}
}

@media only screen and (max-width: 800px)  {
	.panic .opening .image-container img {
		padding: 15px 15% 0 15%;
	}
}


/* PANIC: SNAKE */

.panic .snake div { 
	padding: 0 10px;
	min-width: 350px;
	margin-bottom: 20px;
}
.panic .snake div img {
	display: block;
	border: solid 1px;
	width: 100%;
}

/* PANIC: CASE STUDY VIDEO */


/* PANIC: PREQUEL */

.panic .prequel .tape_heading {
	width: 450px;
    font-size: 40px;
    padding: 9px 0 89px 43px;
}

.panic .prequel {
	margin-bottom: 100px;
}


@media only screen and (max-width: 1100px)  {
	.panic .prequel .tape_heading {
		width: 300px;
		font-size: 27px;
		padding: 6px 0 60px 30px;
	}
}


/* PANIC: PLOT */
.panic .plot .text {
	padding-right: 0;
	padding-left: 40px;
}
.panic .plot {
	margin-bottom: 100px;
}


@media only screen and (max-width: 800px)  {
	.panic .plot .text {
		padding-right: 0;
		padding-left: 0;
	}
	.panic .plot {
		flex-wrap: wrap-reverse;
	}
}

/* PANIC: QUOTES */
.panic .quotes {
	align-items: center;
	margin-bottom: 100px;
}

.panic .quotes > div {
	flex: 0 0 300px;
	font-size: 36px;
}

@media only screen and (max-width: 1100px)  {
	.panic .quotes > div {
		flex: 0 0 250px;
		font-size: 28px;
	}
}


@media only screen and (max-width: 900px)  {
	.panic .quotes > div {
		flex: 0 0 200px;
		font-size: 24px;
	}
}

@media only screen and (max-width: 800px)  {
	.panic .quotes > div {
		flex: 0 0 80%;
		font-size: 24px;
	}
}


/* PANIC: RESULTS */

.panic .results .list {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	width: 100%;
	font-size: 25px;
}
.panic .results .list .item {
	flex: 0 1 auto;
	width: 20%;
}
.panic .results span {
	display: block;
	font-size: 50px;
	font-weight: 900;
	margin: 16px 0;
	line-height: 1;
}

.panic .results .tape_heading {
	width: 450px;
    font-size: 46px;
    padding: 64px 0 95px 53px;
}
@media only screen and (max-width: 1100px)  {
	.panic .results .tape_heading {
		width: 300px;
		font-size: 31px;
		padding: 43px 0 63px 45px;
	}
}

@media only screen and (max-width: 980px)  {
	.panic .results .list {
		flex-wrap: wrap;
		gap: 25px;
	}
	.panic .results .list .item {
		flex: 0 1 auto;
		width: 40%;
	}
}

@media only screen and (max-width: 510px)  {
	.panic .results .list {
		flex-wrap: wrap;
		gap: 25px;
	}
	.panic .results .list .item {
		flex: 0 1 auto;
		width: 90%;
	}
}

/* PANIC: LAPTOP FRAMES */
.panic .laptop-container {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	align-self: center;
}
.panic .laptop-container > * {
	width: 100%;
	display: block;
}

.panic .laptop-container .in-laptop-frame {
	position: absolute;
	z-index: -1;
	width: 78%;
	top: 6%;
}

@media only screen and (max-width: 800px)  {
	.panic .laptop-container {
		width: 100%;
		flex: 0 0 auto;
	}
}

/* PANIC: SPEECH BUBBLES */

.panic .speech {
	position: relative;
	min-width: 200px;
	text-align: center;
	line-height: 1.4em;
	margin: 60px auto 60px auto;
	background-color: #404040;
	border-width: 2px;
	border-style: solid;
	border-radius: 40px;
	padding: 20px;
	color: yellow;
    font-size: 37px;
	font-weight: 900;
}

.panic .speech:before,
.panic .speech:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

.panic .speech:before {
	border: 25px solid;
	border-color: #DDD transparent transparent #DDD;
}

.panic .speech:after {
	border: 25px solid;
	border-color: #404040 transparent transparent #404040;
}

/* Bottom Right */
.panic .speech-bottomright-yellow {
	color: yellow;
	border-color: white;
}
.panic .speech-bottomright-yellow:before {
	right: 30px;
	bottom: -50px;
	border-color: #DDD #DDD transparent transparent;

}
.panic .speech-bottomright-yellow:after {
	right: 32px;
	bottom: -45px;
	border-color: #404040 #404040 transparent transparent;
}

/* Bottom Right */
.panic .speech-bottomright-white {
	color: white;
	border-color: yellow;
}

.panic .speech-bottomright-white:before {
	right: 30px;
	bottom: -50px;
	border-color: yellow yellow transparent transparent;

}
.panic .speech-bottomright-white:after {
	right: 32px;
	bottom: -45px;
	border-color: #404040 #404040 transparent transparent;
}

/* Top Right */
.panic .speech-topright-yellow {
	color: yellow;
	border-color: white;
}
.panic .speech-topright-yellow:before {
	right: 30px;
	top: -50px;
	border-color: transparent #DDD #DDD transparent;

}
.panic .speech-topright-yellow:after {
	right: 32px;
	top: -45px;
	border-color: transparent #404040 #404040 transparent;
}

/* Top Left */
.panic .speech-topleft-yellow {
	color: yellow;
	border-color: white;
}
.panic .speech-topleft-yellow:before {
	left: 30px;
	top: -50px;
	border-color: transparent transparent #DDD #DDD;

}
.panic .speech-topleft-yellow:after {
	left: 32px;
	top: -45px;
	border-color: transparent transparent #404040 #404040;
}


/* PANIC: TAPE HEADINGS - NOTE: Sizing is set per section */

.panic .tape_heading {
	background-size: contain;
	background-repeat: no-repeat;
    color: #000000;
    text-align: left;
	font-weight: 900;
	margin-right: -20px; /* to offset any padding */
	margin-left: -20px;
}

.panic .prequel .tape_heading span, .panic .virtual .tape_heading span {
	display: block;
	color: yellow;
}




/* PANIC: TRAILER */

.panic .trailer {
	margin-bottom: 50px;
}

.panic .TrailerBox iframe {
	height: calc(100% - 1px);
	border: solid 1px yellow;
}


/* PANIC: VIRTUAL */

.panic .virtual .tape_heading {
	width: 450px;
    font-size: 44px;
    padding: 64px 0 24px 45px;
}

.panic .virtual {
	margin-bottom: 75px;
}

@media only screen and (max-width: 1100px)  {
	.panic .virtual .tape_heading {
		width: 300px;
		font-size: 36px;
		padding: 34px 0 8px 28px;
	}
}



/* PANIC: INFLUENCER */

.panic .influencer .speech {
	width: 345px;
	display: inline;
    float: right;
}
.panic .influencer .stories {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 30px;
}
.panic .influencer .stories img {
	display: block;
	border: solid 1px yellow;
	width: 22%;
}

.panic .influencer .text, .panic .results .text {
	width: 100%;
	position: relative;
}

.panic .influencer .tape_heading {
	width: 450px;
    font-size: 40px;
    padding: 66px 0 94px 49px;  
}


@media only screen and (max-width: 1100px)  {
	.panic .influencer .tape_heading {
		width: 300px;
		font-size: 26px;
		padding: 44px 0 72px 38px;
	}
}
@media only screen and (max-width: 800px)  {
	.panic .influencer .stories {
		flex-wrap: wrap;
		gap: 25px;
	}
	.panic .influencer .stories img {
		width: 45%;
	}
	.panic .influencer {
		margin-bottom: 50px;
	}
}


/* FOOTER */

.copyright-notice {
	text-align: center;
	margin: 20px;
    font-size: 12px;
}