@import url('https://fonts.googleapis.com/css?family=Open+Sans:800|Roboto+Slab:100,300,400,700');
/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
/* @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:100, 400'); */

body {
	margin: 0;
	/* padding-bottom: env(safe-area-inset-bottom, 1200px); */
	font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
	/* background: black; */
	
	
}

body,
button,
input,
select,
textarea {
	font-family: "Open Sans", 'Helvetica', 'Arial', sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

b,
strong {
	font-weight: bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
    display: inline-block;
    font-family: "Courier 10 Pitch", Courier, monospace;
    color: #ddca7e;
    background: #282c34;
	padding: .5em .8em;
    border-radius: .2em;
}

code,
kbd,
tt,
var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

.site-subtitle {
	font-family: 'Roboto Slab', serif;
}


/*--------------------------------------------------------------
General styling
--------------------------------------------------------------*/
* {
	box-sizing: border-box;
}

h1,
h2,
h3 {
	text-align: center;
	margin: 1em 0 .5em;
	padding: 0;
}

p {
	margin: 0;
	padding: .5em 0;
}

p:first-child {
	padding: 0 0 .5em;
}

p:last-child {
	padding: .5em 0 0;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


/* Promo section */

.logo,
.site-title {
	/* text-align: center; */
}

.logo {
	font-size: 8em;
}

.site-title {
	margin-top: -1em;
	margin-bottom: 3em;
}

/* Splash section */

.splash {
	background: #FFF6E5;
	padding-bottom: 2em;
}

.splash-content {
	padding: 1.5em;
}

@media screen and (min-width: 600px) {
	.splash-text {
		columns: 2;
		column-gap: 2em;
	}

	.splash-text p {
		padding-top: 0;
	}
}

/* cards section */

.cards {
	padding: 2em 1em 1em;
	background: #3E454C;
}

.cards ul {
	margin: 0;
	padding: 0;
}

.cards li {
	margin-bottom: 1em;
	background: white;
	list-style-type: none;
}

.card {
	padding: 1.5em;
}

/* More section */

.more {
	padding: 2em;
}

/* Twins section */

.twin {
	padding: 2em;
	background: #2185C5;
	color: white;
}

.twin:last-of-type {
	background: #FF7F66;
}

/* Colophon section */
.colophon {
	padding: 2em;
	background: hsl(0, 0%, 10%);
	color: white;
	text-align: center;
}

.colophon a {
	color: white;
}

.colophon a:hover,
.colophon a:focus {
	border-bottom: 1px solid white;
}


/*--------------------------------------------------------------
Use flex to create a three-card layout
--------------------------------------------------------------*/

@media screen and (min-width: 700px) {
	@supports (display: flex) {

		.cards ul {
			display: flex;
			justify-content: space-around;
		}

		.cards li {
			width: 31%;
		}

	}
}

/*--------------------------------------------------------------
Basic responsive layout for all browsers:
--------------------------------------------------------------*/

.site {
	max-width: 50em;
	margin: 0 auto;
}

/*--------------------------------------------------------------
CSS Grid layout for modern browsers:
--------------------------------------------------------------*/

.btn {
color: white;
text-decoration: none;
border: white solid 1px;
border-radius: 5px;
padding: .1em .5em;
background: #0077B5;
margin-left: .5em;
}

footer {
	/* padding: .8em; */
	padding: .8em 2em 2.5em;
	font-size: .8em;
}

/* @media screen and (max-width: 500px) {
	footer {
	padding: .8em .8em 3em;
	}
} */

footer i {
	margin-right: .5em;
}

footer p {
padding: 0 !important;
}

.btn a, .btn a:visited {
	/* text-decoration: none; */
	color: white;
}

.web {
	/* background: linear-gradient(to bottom, #eef08a, #819a2d); */
	/* background: rgb(235, 235, 235); */
}

.graphic {
	background: linear-gradient(to bottom, #ffd76b, #bfa900);
}

.photo {
	background: linear-gradient(to bottom, rgb(199, 223, 255), rgb(89, 160, 255));
	background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(205, 226, 255));
	background: white;


}

.video {
	background: linear-gradient(to bottom, rgb(229, 210, 255), rgb(220, 125, 255));
	background: white;
}

.active {
	/* color: red !important; */
	color: #eec856;
	font-weight: 700;
	border-bottom: 1px solid #eec856;
}

footer {
	background: #586D74;
	color: white;
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
}

footer p {
	padding: 1em;
}

.gallery-item-detail {
	position: absolute;
	z-index: 1;
	background: black;
	height: 100%;
	width: 100%;
	overflow: hidden;
	/* transition: opacity 3s ease-in-out; */
	/* opacity: 0; */
	/* display: block; */
}

.revealed {
	/* display: block; */
	transition: opacity 3s ease-in-out;
	opacity: .9;
}



.fade-out {
	transition: opacity .3s ease-in-out;
     opacity: 0;
}

.hidden {
	/* display: none; */
	visibility: hidden;
	/* transition: opacity 3s ease-in-out; */
			/* opacity: 0; */
}

.fade-in {
	/* opacity: .5; */

	transition: opacity .3s ease-in-out;
     opacity: 1;
}



@supports (grid-area: auto) {

	/* .front.side img {
		object-fit: cover;
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 20px;
	} */

	.container h1,
	.container h2,
	.container h3,
	.container p {
		text-align: left;
		padding: 0;
	}

	.container h1 {
		font-size: 1.5em;
		text-align: center;
		/* margin: auto; */
		/* padding: auto; */
	}

	/* .container h1:hover {
transform: scale(2);
transition: 1s;
	} */

	.container {
		/* height: 50vh; */
		border-radius: 7px;
	}

	/* .container,  */
	.super-container {
		/* overflow: hidden; */
        /* display: grid; */
        position: relative;
		/* grid-template: 1fr / 1fr; */
  grid-area: flip;
	transform-style: preserve-3d;
	/* will-change: transform; */
	/* backface-visibility: hidden;
	-webkit-backface-visibility: hidden */
	/* transition: all 0.7s ease; */
	/* transition: transform .7s ease; */
    /* transform-origin: center center; */
	/* transform-origin: center center -75vh; */
    /* perspective: 1000px; */
            /* animation-name: slideout;
    animation-duration: 1s;
animation-direction: reverse;
            animation-timing-function: ease; 
             animation-fill-mode: both; */
    }
    
    .no-animation {
        /* animation: none; */
    }

	.super-front {
        position: absolute;
        width: 100%;
        /* height: 100%; */
        height: auto;
		grid-area: frontAndBack;
		/* transform: translateZ(60vh); */
		/* transform: translateZ(50px); */
		/* height: 60vh; */
		/* width: 100%; */
        /* background-color: red; */
        /* animation-duration: 1s;
            animation-name: slidein;
            animation-timing-function: ease;
            animation-fill-mode: backwards;
            animation-direction: reverse; */
		
	}

	.super-back {
		grid-area: frontAndBack;
		/* align-self: flex-start; */
		/* background-color: rgba(250, 250, 250, 0.178); */
        width: 100%;
				position: absolute;
				/* backface-visibility: hidden; */
				/* overflow: hidden; */
        /* width: 100%; */
        /* height: 100%; */
        height: auto;
		transform: 
		/* rotateX(-90deg) 
		translateZ(30vh) 
		translateY(30vh); */
		rotateY(-90deg) 
		/* translateZ(-100vw)  */
		translateZ(50vw) 
		/* translateX(50vw) */
		/* translateX(100vw) */
		translateX(-50vw)
		;
		
		/* height: 60vh; */
		/* background-color: blue; */
	}

	.web-content {
        position: relative;
        display: grid;
        height: 60vh;
        transition: .5s ease-in;
        /* transition: 3s ease-out; */
        /* grid-template: 1fr / 1fr; */
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:
            "flip"
				;
				/* will-change: transform; */
				
	}
	
	.perspective {
				perspective: 800px;
				perspective-origin: 50% 50%;
				
	}
    
    .web-content .super-content {

    }

	/* .flip,  */
	.super-flip {
		/* transform:  */
		/* rotateX(90deg)
		translateZ(30vh)  */
		/* rotateY(90deg) */
		/* translateX(-25vh) */
		/* translateX(-25vh) */
		/* translateX(50vw) */
		/* translateZ(25vh) */
		/* translateZ(-50vw)  */
		/* translateZ(50vw)  */
        /* ; */
        animation-duration: 1s;
            animation-name: slidein;
            animation-timing-function: ease;
						animation-fill-mode: forwards;
						width: 100vw;
						/* width: 100%; */
						/* overflow-x: scroll; */
		}
		
		/* .youtube-player, .youtube-player img {
			will-change: transform;
		}

		.gallery-item-detail.hidden.fade-out {
			will-change: transform;
		} */

    .super-flop {
        animation-duration: 1s;
            animation-name: slideout;
            animation-timing-function: ease;
            /* animation-fill-mode: backwards; */
            /* animation-fill-mode: forwards; */
            animation-direction: reverse;
    }
    
    @keyframes slidein {
        from {}

        25% {
            transform:
				translateZ(-150vw);

        }

        50% {
            transform:
				rotateY(90deg) translateX(175vw) translateZ(50vw);
        }

        to {
            transform:
                rotateY(90deg)
                translateX(55vw)
				translateZ(50vw);
        }
    }

    @keyframes slideout {
		from {}
		
        25% {
            transform:
				translateZ(-150vw);
        }

        50% {
            transform:
				rotateY(90deg) translateX(175vw) translateZ(50vw);
		}

        to {
            transform:
                rotateY(90deg)
                translateX(50vw)
				translateZ(50vw)
				/* perspective(0); */
        }
    }

	.super-flipper {
		/* color: rgba(108, 24, 226, 0); */
		/* display: block !important; */
		position: absolute;
		align-self: center;
		/* position: sticky; */
		/* position: -webkit-sticky; */
		/* transform: 
		translateZ(11px)
		translateX(11px)
		translateY(11px)
		; */
		cursor: pointer;
		display: block;
		/* top: 130px;
		left: 20px; */
		/* z-index: 99999; */
		font-size: 3em;
		/* font-size: 10em; */
		align-self: flex-start;
		text-shadow: 7px 7px 100px rgba(0, 0, 0, 0.1);
		/* bottom: 0; */
		/* right: 10px; */
		/* cursor: zoom-in; */
		/* transition: all .3s ease;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden; */
	}

	.scroll-down {
		position: absolute;
		left: 50%;
		bottom: 50px;
		display: block;
		text-align: center;
		font-size: 20px;
		z-index: 100;
		text-decoration: none;
		text-shadow: 0;
	  width: 30px;
	  height: 30px;
	  border-bottom: 2px solid #fff;
	  border-right: 2px solid #fff;
	  z-index: 9;
	  left: 50%;
	  -webkit-transform: translate(-50%, 0%) rotate(45deg);
	  -moz-transform: translate(-50%, 0%) rotate(45deg);
	  transform: translate(-50%, 0%) rotate(45deg);
		/* -webkit-animation: fade_move_down 4s ease-in-out infinite; */
		/* -moz-animation:    fade_move_down 4s ease-in-out infinite; */
		animation:         fade_move_down 4s ease-in-out infinite;
	}

	/*animated scroll arrow animation*/
/* @-webkit-keyframes fade_move_down {
	0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
  }
  @-moz-keyframes fade_move_down {
	0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
  } */
  @keyframes fade_move_down {
	0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
	50%  { opacity: 1;  }
	100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
  }

	.push {
		/* z-index: 10000; */
		/* will-change: transform; */
		/* backface-visibility: hidden; */
		color: rgba(108, 24, 226, 1);
		text-shadow: 7px 7px 38px rgba(0, 0, 0, 0.9);
	}

	.fade {
		background: rgb(41, 41, 41);
		transition: .5s;
	}

	.fadeInText {
		color: white;
		transition: .5s;
	}

	/* .container {
		position: relative;
	} */

	.front.side .content h1 {
		color: white;
		text-align: center;
	}
	
	/* .side,  */
	.super-side {
		/* position: absolute; */
		/* text-align: center; */
		/* width: 100%; */
		/* height: 100%; */
		/* padding: 20px 50px; */
		/* color: #fff; */
		/* transform-style: preserve-3d; */
		/* overflow: hidden; */
		/* -webkit-backface-visibility: hidden; */
		/* backface-visibility: hidden; */
		/* border-radius: 20px; */
	}

	.super-side.super-back .super-content {
		/* -webkit-backface-visibility: hidden; */
		/* backface-visibility: hidden; */
		/* margin-top: -40px; */
		z-index: 0;
		/* position: relative; */
	}


	/* .content,  */
	.super-content {
		/* transform: translatez(70px) scale(0.8); */
		/* transform: translatez(10px); */
		line-height: 1.5em;
		height: 100%;
		/* height: auto; */
        width: 100%;
        /* width: auto; */
        
		/* align-self: center; */
		
	}


	.front .content, 
	.container
	/* .super-front .super-content  */
	{
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.content h1 {
		/* position: static; */
		/* margin-bottom: 1em; */
	}

	.content p {
		margin: 1em 0;
	}

	.flipper {
		color: white;
		display: block;
		position: absolute;
		font-size: 1em;
		bottom: 5px;
		/* right: 100px; */
		right: 5px;
		cursor: pointer;
		/* box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); */
		box-shadow: 0 5px 38px rgba(200, 200, 200, 0.9);
		border-radius: 50%;
		border-radius: 99em;
		/* background: rgba(200, 200, 200, 0.1); */
		
	}

	

	#flipper-1 {
		/* background: red; */
		position: relative;
		height: 100%;
		width: 100%;
		/* perspective: 10000px; */
	}

	#flipper-1 video {
		position: absolute;
		top: 0; 
		left:0;
		width: 100%; 
		height: 100%; 
		z-index: -1;
		object-fit: cover;
		border-radius: 7px;
backface-visibility: hidden;

	}

	.self-flipper {
		position: relative;
		height: 100%;
		width: 100%;
		cursor: pointer;
	}

	.self-flipper video {
		position: absolute;
		top: 0; 
		left:0;
		width: 100%; 
		height: 100%; 
		z-index: -1;
		object-fit: cover;
		border-radius: 7px;
/* backface-visibility: hidden; */
	}

	/* .self-flipper::after {
		cursor: pointer;

		content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: rgba(0, 0, 0, 0.7);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 3px 3px;
z-index: 1;
border-radius: 7px;
backface-visibility: hidden;
	} */

	/* #flipper-1::after {
		content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: rgba(0, 0, 0, 0.7);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 3px 3px;
z-index: 1;
border-radius: 7px;
backface-visibility: hidden;
	} */

	.self-flipper > * {
		/* z-index: 100; */
/* backface-visibility: hidden; */

	}

	.self-flipper {
box-shadow: 5px 5px 9px -4px rgba(0,0,0,0.75);
transition: .5s;

		
	}

	.self-flipper:hover {
		color: rgb(175, 1, 255);
		box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.75);
		/* transform: scale(1.05); */
		transition: .4s;
	}



	
	.content p {
		/* margin-top: 50px; */
		line-height: 1.5em;
	}
	/* .content h1:before,  */
	/* .super-content h1:before {
		content: "";
		position: absolute;
		bottom: -20px;
		height: 3px;
		background-color: #3e3;
		width: 70px;
		left: 50%;
		transform: translateX(-50%);
	} */
	/* .front, */
	

	.super-front > *:not(:first-child) {
		/* grid-area: frontAndBack; */
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 1em;
		padding: 1em;
		height: 60vh;
		color: white;
		/* filter: blur(20px); */
		/* filter: brightness(10%); */
		/* position: absolute; */
		/* z-index: 2; */
		/* display: flex; */
		/* align-items: center; */
		/* flex-direction: column; */
		/* background-size: 100vh;
		background-size: cover; */
		/* background-image: url(../img/mattosborne-shot-web.jpg); */
		/* background: linear-gradient(0deg,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(../img/mattosborne-shot-web.jpg); */
	}

	.container {
		/* background: linear-gradient(0deg,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(../img/mattosborne-shot-web.jpg); */
		/* background: linear-gradient(0deg,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)); */
		background: black;

	}

	.front-text {
		/* color: white; */
	}
	/* .back */
	.super-container > div {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	}

	.super-container {
		width: 100%;
	/* will-change: transform; */

		/* overflow: hidden; */
		/* backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
  transform-style: preserve-3d; */
	}
	

	.super-back .super-content > * {
		display: grid;
		grid-template: 1fr / 1fr;
		padding: .5em;
		grid-gap: 1em;
		align-items: center;
        grid-template-areas: 
        "title"
        "image"
        "details"
		;
		
		/* margin: 0 2em 1em; */
		/* flex-wrap: wrap; */
		/* align-content: stretch; */
		}
		
		.back-card {
			max-width: 700px;
			margin: auto;
			/* z-index: 999; */
			/* background: grey; */
			padding: 1em;
			background: rgb(238, 238, 238);
			border: rgb(221, 221, 221) solid 1px;
			border-radius: 25px;
		}
    
    @media screen and (min-width: 900px) {
        .super-back .super-container > * {
            display: grid;
            grid-template: 1fr / 1fr 1fr;
            padding: 1em;
            grid-gap: 1em;
			align-items: center;
			justify-content: center;
			grid-template-areas: 
			"title title"
			"image details"
			;
            /* flex-wrap: wrap; */
            /* align-content: stretch; */
        }

	}

	.super-front .super-content {
		max-width: 50em;
		margin: auto;
		/* backface-visibility: hidden; */
	}
	
	.webapp {
/* z-index: 0; */
/* pointer-events: none; */

	}

    .webapp-pic {
		position: relative;
		grid-area: image;
		/* margin: 1em 0; */
    }

    .webapp-title {
        grid-area: title;
	}
	
	.webapp:before {
		/* content: "X";
		position: absolute;
		line-height: .8em;
		top:30px;
		left:0;
		padding: .5em;
		margin: 0;
		border-radius: 25px;
		background-color: rgba(0, 0, 0, 0.171); */
	}

    .webapp-details {
		/* max-height: 50vh; */
        /* overflow: scroll; */
		grid-area: details;
		background: rgba(255, 255, 255, 0.308);
		padding: 1em;
		border-radius: 5px;
		font-family: 'Roboto Slab', serif;
		font-weight: 300;
		color: rgb(34, 34, 34);
	}

	.webapp-details a {
		cursor: hand;
	}

	.webapp-details .notable {
		font-size: .8em;
		line-height: 1.3em;
	}


	.webapp-pic img {
max-width: 25em;
margin: auto;
	}


	/* .container:hover {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	} */
	form {
		text-align: left;
	}

	
	.back h1 {
		font-size: 1.5em;
	}
	form label,
	form input {
		display: block;
	}
	form input,
	form textarea {
		background: transparent;
		border: 0;
		border-bottom: 2px solid #444;
		padding: 5px;
		width: 100%;
		color: #fff;
	}
	form label {
		margin: 15px 0;
	}
	form input[type="submit"] {
		display: block;
		width: auto;
		margin: 10px auto;
		padding: 5px 10px;
		border: 3px solid #555;
		border-radius: 4px;
		color: #fff;
		cursor: pointer;
	}


	
	.inbody {
		/* background: #5E00E6; */
		/* background: hsla(265, 100%, 45%, .9); */
		background: rgba(0, 0, 0, 0.5);
	}

	.navbar {
        width: 100%;
        /* width: auto; */
        /* overflow: hidden; */
		/* display: flex; */
		/* justify-content: center; */
        /* z-index: 1000; */
        
		/* padding: .5em 1em .5em .1em; */
		padding: .5em;
		/* transform: translateZ(300px); */
	}

	

	.navbar-content {
        /* display: flex; */
        /* overflow: hidden; */
		/* flex-direction: row; */
		/* z-index: 1000; */
		/* width: 100%; */
		/* max-width: 1000px; */
		/* justify-content: space-between; */
		/* justify-content: space-around; */
		/* justify-content: space-between; */
	}

	/* .navbar-content {
		max-width: 1000px;
	} */

	.nav {
        display: flex;
        /* overflow-x: hidden; */
        /* justify-content: space-around; */
        /* flex-shrink: 2; */
		/* width: auto; */
		/* width: 100%; */
		/* width: 10em; */
	}

	.nav li {
		/* font-size: .5em; */
		/* transition: transform 0.3s ease; */
		/* animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-name: rotate-nav; */
		/* transform: rotate(-45deg); */
	}

	/* @keyframes rotate-nav {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(-45deg);
		}
	} */

	.masthead-content {
        /* position: absolute; */
        /* position: relative;  */
		background: rgba(0, 0, 0, 0.9);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 3px 3px;
/* z-index: 1000; */
display: flex;
justify-content: center;
align-content: center;
	}

	.masthead-content p, .masthead-content h2 {
color: white;
position: relative;
margin: auto;
font-family: 'Roboto Slab', serif;
padding: .2em;
/* font-size: 5em; */
font-size: calc(40px + (200 - 70) * ((100vw - 300px) / (1600 - 300))) !important;
font-weight: 800;
text-align: left;
line-height: .9em;
/* background: linear-gradient(60deg, white 0%, white 10%, black 50%, white 90%, white 100%); */
background: linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 33%, rgba(255, 0, 89, 1) 66%, rgba(0, 179, 255, 1) 100%);
/* background-size: 200% auto; */
background-size: 400% 400%;
background-clip: text;
/* background-repeat: no-repeat; */
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
	animation: shine 3s ease forwards 1;
	will-change: transform;
  /* -webkit-box-decoration-break: clone; */
  
/* text-transform: uppercase; */
/* padding: 0 2em; */
	}
.masthead-content h2:before {
	content: "";
	background-size: 400% 400%;
	background: linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 33%, rgba(255, 0, 89, 1) 66%, rgba(0, 179, 255, 1) 100%);
	animation: shiner 3s linear 1;
/* background-clip: text; */
/* -webkit-background-clip: text; */
color: transparent;
width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;


}
	
	@keyframes shine {
		/* to {
		  background-position: 200% center;
		} */
		0% {
			background-position: 100% 0%
		}
		100% {
			background-position: 15% 100%
		}
		}
		
		@keyframes shiner {
			to {
				transform: translateX(-960px);
			}
		}

	/* .masthead-content img {
        position: absolute;
		z-index: -1000;
        height: 100%;
        
    } */
    
    .masthead-content video {
        position: absolute;
        /* position: relative; */
        width: 100%;
		z-index: -1000;
		height: 100%;
    }
    
     /* .masthead-content img:after{
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(150, 150, 150, 0.8);
        background-image: radial-gradient(black 33%, transparent 33%);
        background-size: 3px 3px;
        z-index: 1000;
     } */

	.navbar {
		/* position: fixed; */
		position: absolute;
        color: white;
        /* overflow: hidden; */
		/* padding: 1em; */
		
	}

	.navbar h1 {
text-align: left;

	}

	/* .branding {
		height: 2em;
	} */

	/* .logo img {
		width: auto;
	} */

	.masthead-content h1 {
		font-size: .7em;
		margin-left: .2em;
	}

	.full-bleed {
		object-fit: cover;
		height: auto;
		/* position: relative; */
		filter: grayscale(50%);
	}

	.branding {
		/* grid-column: 2/3;
		grid-row: 1/2; */
		/* display: flex; */
		
		/* grid-template-columns: minmax(4em, 5em) 12em;
		grid-template-columns: 50px 1fr;
		grid-template-rows: repeat(2, 2.5em);
		grid-template-rows: 1fr 1fr;
		text-align: center; */
		/* justify-self: center; */
		/* align-items: center; */
		/* justify-content: center; */
		/* margin-top: 2em; */
	}

	.logo {
		/* grid-column: 1/2; */
		/* grid-row: 1/3; */
		/* align-self: center; */
		height: 25px;
		width: 25px;
		/* flex-shrink: 2; */
	}
	.site-title {
		grid-column: 2/3;
		grid-row: 1/3;
		margin: 0;
		padding: 0;
		/* text-align: center; */
		bottom: 0;
		color: white;
		margin: 0;
		font-size: 1.8em;
		font-weight: 400;
		/* padding-left: 105px; */
		/* align-self: center; */
		line-height: .9em;
	}
	.site-subtitle {
		display: none;
	}

	.branding {
		/* grid-column: 2/3;
		grid-row: 1/2; */
		/* display: grid; */
		/* grid-template-columns: minmax(4em, 5em) 12em; */
		/* grid-template-rows: repeat(2, 2.5em); */
		/* text-align: center; */
		/* justify-self: center; */
		/* align-items: center; */
		/* margin-top: 2em; */
	}

	.logo {
		/* grid-column: 1/2; */
		/* grid-row: 1/3; */
		/* align-self: center; */
		
	}
	.site-title {
		/* grid-column: 2/3; */
		/* grid-row: 1/3; */
		margin: 0;
		padding: 0;
		/* text-align: center; */
		bottom: 0;
		color: white;
		margin: 0;
		font-size: 1.8em;
		font-weight: 400;
		/* padding-left: 105px; */
		/* align-self: center; */
		line-height: .9em;
	}
	.site-subtitle {
		/* grid-column: 2/3;
		grid-row: 2/3; */
		margin: 0;
		padding: 0;
		display: block;
		font-family: 'Roboto Slab', serif;
		font-size: .6em;
		font-weight: 100;
		/* align-self: center; */
	}

	nav {
        /* overflow: hidden; */
        
	/* min-width: 0; */
	/* min-height: 0; */
		/* flex-shrink: 1; */
		/* display: none; */
	}

	
	.nav {
        /* overflow: hidden; */

		display: flex;
		/* flex-grow: 0; */
		align-items: center;
		justify-content: space-around;
		list-style-type: none;
		color: white;
		/* flex-shrink: 2; */
	}
	.nav li {
		/* flex: 1; */
	}
	.nav li a {
		text-decoration: none;
		color: white;
		/* margin: 0 -.5em; */
		padding: 0 5px;
		/* padding: .1em; */
		/* background: red; */
	}

	.nav li .active {
		color: #eec856;
	}
	/* .branding, .nav {
		padding: 2em;
	} */






	.web-content .super-front .super-content {
		/* display: flex;
		flex-direction: column; */
		/* height: 50vh; */
		/* display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 1em;
		padding: 1em;
		height: auto;
		height: 100%;
		position: relative;
		align-items: center;
  justify-content: center; */
	}


	@media screen and (min-width: 300px) {
		.site {
			max-width: none;
			/* padding: 2em; */
			/* background-color: red; */
		}

		.masthead-content h1 {
			font-size: 1em;
			margin-left: .2em;
		}

		nav {
			/* display: flex; */
		}

		.branding {
			display: flex;
			/* grid-column: 2/3; */
			/* grid-row: 1/2; */
			/* display: grid; */
			/* grid-template-columns: minmax(4em, 5em) 12em; */
			/* grid-template-rows: repeat(2, 2.5em); */
			/* text-align: center; */
			/* justify-self: center; */
			/* align-items: center; */
			/* margin-top: 2em; */
		}
	
		.logo {
			/* grid-column: 1/2; */
			/* grid-row: 1/3; */
			/* align-self: center; */
			height: 50px;
			width: 50px;
		}
		.site-title {
			grid-column: 2/3;
			grid-row: 1/3;
			margin: 0;
			padding: 0;
			/* text-align: center; */
			bottom: 0;
			color: white;
			margin: 0;
			font-size: 2em;
			font-weight: 400;
			/* padding-left: 105px; */
			align-self: center;
			line-height: .9em;
		}
		.site-subtitle {
			/* grid-column: 2/3;
			grid-row: 2/3; */
			margin: 0;
			padding: 0;
			display: block;
			font-family: 'Roboto Slab', serif;
			font-size: .6em;
			font-weight: 100;
			align-self: center;
		}
	
		nav {
		
            /* flex-shrink: 1; */
            
		}
		.nav {
            /* overflow-x: hidden; */
			display: flex;
			flex-grow: 0;
			align-items: center;
			justify-content: space-around;
			list-style-type: none;
			color: white;
		}
		.nav li {
			/* flex: 1; */
			font-size: 1em;
		}
		.nav li a {
			text-decoration: none;
			color: white;
			/* margin: 0 .5em; */
			margin: 0 1em;
		}
		.branding, .nav {
			padding: 0em;
		}
	

		 

		/* .masthead-content, .main-area > * > *, footer {
			display: grid;
			grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
			grid-row-gap: 1em;
			padding: 1em 0;
		} */

		/* .masthead-content, */
		/* .web-content, */
		.graphic-content,
		.photo-content,
		.footer {
			display: grid;
			grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
			grid-row-gap: 1em; 
			padding: 1em 0;
		}

		.photo-content {
			height: 100%;
			justify-content: flex-end;
			grid-template-rows: auto minmax(0, 1fr) auto;
		}

		/* .web-content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-gap: 1em;
			padding: 1em;
		} */

		.super-container {
			/* height: auto;
			clear: both;
			display: flex;
			align-items: center;
  justify-content: center; */
			/* display: inline-block; */
			/* overflow: auto; */
		}

		.web-content {
			height: auto;
			clear: both;
			/* max-width: 700px; */
			/* display: flex; */
			/* display: inline-block; */
			/* overflow: auto; */
		}

		.web-content > * {
			/* grid-column: span 1; */
			/* grid-row: 1; */
		}

		.red-square {
			background: red;
		}
		.blue-square {
			background: blue;
		}

		.masthead-content {
			padding: 0;
		}
		.main-area > * > * > * {
			/* grid-column: 2 span; */
		}

		.main-area .video-content .video-card {
			grid-column: 2 span;
		}
		.main-area > * > * > * img {
			/* grid-column: 1; */
			/* grid-row: 1/3; */
		}

		.web-content .card {
			/* grid-column: 4 span; */
		}

		.main-area h3 {
			/* grid-column: 2; */
			/* grid-row: 1;  */
		}

		.video {
			/* display: grid; */
			grid-template-columns: 1fr repeat(2, minmax(auto, 30em)) 1fr;
			grid-template-columns: minmax(1em, 1fr) repeat(2, minmax(auto, 30em)) minmax(1em, 1fr);
			/* grid-gap: 4em; */
		}

		.video-content {
			grid-column: 2/4;
			display: grid;
			/* grid-template-columns: 1fr 1fr; */
			grid-gap: 1em;
			padding: 1em;
			max-width: 50em;
			margin: auto;
		}

		.video-content > * {
			/* grid-column:  */
		}

		.iframe {
			/* width: 100%; */
			position: relative;
    overflow: hidden;
    padding-top: 56.25%;
		}

		.main-area .card-text {
			/* grid-column: 2; */
			/* grid-row: 2; */
		}
		/* .main-area > * > * > *:first-child {
			grid-column: 1/5;
			grid-row: 1/2;
		} */

		.graphic-content > *:first-child,
		.photo-content > *:first-child,
		.video-content > *:first-child {
			grid-column: 1/5;
			grid-row: 1/2;
		}

		.card-subtitle {
			grid-column: 1/5;
			grid-row: auto; 
			text-align: center;
			margin: 0;
			padding: 1em 0;
		}

		.web-content {
			/* grid-template-rows: auto auto; */

		}

		/* .masthead-content {
			display: grid;
			grid-template-columns: repeat(3fr);
		} */
		
		/* .masthead-content > * {
			grid-column: 1/5;
			grid-row: 1/5;
		} */

		/* .masthead-content img {
			grid-column: 1/5;
			grid-row: 1/2;
		} */

		

		.card {
			display: grid;
			grid-column: 1/4;
			align-items: initial;
			/* grid-template-columns: 1fr; */
			/* grid-template-columns: 10em auto; */
			/* grid-template-rows: repeat(3, 1fr); */
		}

		.card h3 {
			align-self: flex-end;
			grid-column: 2;
			padding: 0;
		}

		.card img {
			/* grid-column: 1; */
			grid-row: 1/3;
			align-self: center;
		}

		.card-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			/* justify-content: center; */
			padding: 0 1em;
			font-family: 'Roboto Slab', serif;
			font-weight: 300;
		}

		.video-card-text {
			/* display: flex; */
			/* flex-direction: column; */
			/* align-items: center; */
			/* justify-content: center; */
			/* padding: 0 1em; */
			font-family: 'Roboto Slab', serif;
			font-weight: 300;
		}

		.video-card-text p {
			padding: 0;
		}

		
		.card-text p {
			padding: .3em;
			margin: 0;
		}

		.card-text p:first-child {
			padding-top: 0;
		}

		.video-card {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
		}

		.video-card .iframe {
			/* align-self: center; */
			position: relative;
    overflow: hidden;
    padding-top: 56.25%;
		}

		.rframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}

		.gallery {
			grid-column: 2/4;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			/* grid-template-columns: repeat(6, minmax(10em, 20em)); */
			/* grid-template-columns: 10em; */
			/* grid-template-columns: auto auto; */
			/* grid-template: repeat(auto-fill, 10em) / repeat(auto-fill, 10em); */
			/* grid-template-columns: repeat(auto-fit, minmax(100px, 2fr)); */
			justify-content: center;
			/* align-items: flex-end; */
			/* grid-auto-rows: 10em; */
			/* grid-auto-flow: column; */
			/* flex-wrap: wrap; */
			/* width: 100%; */
			grid-template-rows: repeat(3, 1fr);
			/* grid-template-rows: repeat(10em, 1fr); */
			/* grid-template-rows: 5em; */
			/* max-height: 90vh; */
			/* height: 90vh; */
			/* height: 100%; */
			/* min-height: 70vh; */
			/* max-height: 100vh; */
		}

		.gallery > * {
			flex-grow: 0;
			flex-shrink: 1;
		}
		.gallery-item {
			/* display: inline; */
			object-fit: cover;
			/* max-width: 3em; */
			/* grid-column: span 1; */
			/* grid-row: span 1; */
		}

		.gallery-item img {
			object-fit: cover;
			display: block;
			border: 0;
			width: 100%; 
			height: 100%;
		}

		

		.iframe {
			/* display: flex; */
			/* flex-wrap: wrap; */
			/* flex-grow: 1; */
			/* object-fit: cover; */
			/* display: grid; */
			/* width: 100%; */
			/* height: 25em; */
			/* position: relative;
			display: block;
			height: 0;
			padding: 0;
			overflow: hidden;
			padding-bottom: 56.25%; */
			/* min-height: 15em; */
			/* max-height: 200px; */
			/* width: 100%; */
			/* align-self: flex-start; */
			/* justify-content: center;  */
			/* display: flex; */
    /* flex-direction: row; */
	/* overflow: hidden; */
	display: block;
	/* height: 100%; */
	position: relative;
    overflow: hidden;
    padding-top: 56.25%;
		}

		.iframe-inner {
			/* flex: 1;
			overflow: auto;
			 */
		}
		.iframe > * {
			/* object-fit: cover; */
			/* align-self: stretch; */
			/* display: inline-block; */
			/* flex: 1 1 auto; */
			/* flex: 1; */
			/* width: 100%; */
			/* height: 100%; */
			/* border: none; */
			/* height: auto; */

			/* position: absolute;
			top: 0;
			bottom: 0;
			left: 0;*/
			width: 100%;
			height: 100%;
			/* height: 25em;  */
			border: 0;
		}
		
	}

	.main-area {
		/* margin-top: 1em; */
		padding-top: 1em;
		transition: 1s;
		/* background: blue; */
	}

	div#comparison {
		width: 60vw;
		height: 60vw;
		max-width: 600px;
		max-height: 600px;
		overflow: hidden;
	  }
	  
	  div#comparison figure {
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg);
		background-size: cover;
		position: relative;
		font-size: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	  }
	  
	  div#comparison figure>img {
		position: relative;
		width: 100%;
	  }
	  
	  div#comparison figure div {
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);
		background-size: cover;
		position: absolute;
		width: 50%;
		box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		bottom: 0;
		height: 100%;
	  }
}




.box-with-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
	/* font: 26vmax/1 Open Sans, Impact; */
	font-size: calc(70px + (200 - 70) * ((100vw - 300px) / (1600 - 300))) !important;
font-weight: 800;
text-align: left;
line-height: .9em;
}
.box-with-text:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0vmax 0vmax 10vmax 10vmax purple, 15vmax 0vmax 10vmax 10vmax violet, 30vmax 0vmax 10vmax 10vmax teal, 45vmax 0vmax 10vmax 10vmax orangered, 60vmax 0vmax 10vmax 10vmax yellow, 75vmax 0vmax 10vmax 10vmax crimson, 90vmax 0vmax 10vmax 10vmax yellowgreen, 105vmax 0vmax 10vmax 10vmax orange, 120vmax 0vmax 10vmax 10vmax darkturquoise, 135vmax 0vmax 10vmax 10vmax pink, 0vmax 15vmax 10vmax 10vmax steelblue, 15vmax 15vmax 10vmax 10vmax turquoise, 30vmax 15vmax 10vmax 10vmax coral, 45vmax 15vmax 10vmax 10vmax skyblue, 60vmax 15vmax 10vmax 10vmax darkviolet, 75vmax 15vmax 10vmax 10vmax gold, 90vmax 15vmax 10vmax 10vmax purple, 105vmax 15vmax 10vmax 10vmax violet, 120vmax 15vmax 10vmax 10vmax teal, 135vmax 15vmax 10vmax 10vmax orangered, 0vmax 30vmax 10vmax 10vmax yellow, 15vmax 30vmax 10vmax 10vmax crimson, 30vmax 30vmax 10vmax 10vmax yellowgreen, 45vmax 30vmax 10vmax 10vmax orange, 60vmax 30vmax 10vmax 10vmax darkturquoise, 75vmax 30vmax 10vmax 10vmax pink, 90vmax 30vmax 10vmax 10vmax steelblue, 105vmax 30vmax 10vmax 10vmax turquoise, 120vmax 30vmax 10vmax 10vmax coral, 135vmax 30vmax 10vmax 10vmax skyblue, 0vmax 45vmax 10vmax 10vmax darkviolet, 15vmax 45vmax 10vmax 10vmax gold, 30vmax 45vmax 10vmax 10vmax darkslateblue, 45vmax 45vmax 10vmax 10vmax purple, 60vmax 45vmax 10vmax 10vmax violet, 75vmax 45vmax 10vmax 10vmax teal, 90vmax 45vmax 10vmax 10vmax orangered, 105vmax 45vmax 10vmax 10vmax yellow, 120vmax 45vmax 10vmax 10vmax crimson, 135vmax 45vmax 10vmax 10vmax yellowgreen, 0vmax 60vmax 10vmax 10vmax orange, 15vmax 60vmax 10vmax 10vmax darkturquoise, 30vmax 60vmax 10vmax 10vmax pink, 45vmax 60vmax 10vmax 10vmax steelblue, 60vmax 60vmax 10vmax 10vmax turquoise, 75vmax 60vmax 10vmax 10vmax coral, 90vmax 60vmax 10vmax 10vmax skyblue, 105vmax 60vmax 10vmax 10vmax darkviolet, 120vmax 60vmax 10vmax 10vmax gold, 135vmax 60vmax 10vmax 10vmax darkslateblue;
  -webkit-animation: shadows-cells 2.5s linear infinite;
          animation: shadows-cells 2.5s linear infinite;
}
.box-with-text:after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  display: block;
  border: 4px solid black;
}

.text {
  position: relative;
  display: block;
  background: black;
  color: white;
  mix-blend-mode: darken;
}

@-webkit-keyframes shadows-cells {
  25% {
    box-shadow: 0vmax 0vmax 10vmax 10vmax coral, 15vmax 0vmax 10vmax 10vmax skyblue, 30vmax 0vmax 10vmax 10vmax darkviolet, 45vmax 0vmax 10vmax 10vmax gold, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax violet, 90vmax 0vmax 10vmax 10vmax teal, 105vmax 0vmax 10vmax 10vmax orangered, 120vmax 0vmax 10vmax 10vmax yellow, 135vmax 0vmax 10vmax 10vmax crimson, 0vmax 15vmax 10vmax 10vmax yellowgreen, 15vmax 15vmax 10vmax 10vmax orange, 30vmax 15vmax 10vmax 10vmax darkturquoise, 45vmax 15vmax 10vmax 10vmax pink, 60vmax 15vmax 10vmax 10vmax steelblue, 75vmax 15vmax 10vmax 10vmax turquoise, 90vmax 15vmax 10vmax 10vmax coral, 105vmax 15vmax 10vmax 10vmax skyblue, 120vmax 15vmax 10vmax 10vmax darkviolet, 135vmax 15vmax 10vmax 10vmax gold, 0vmax 30vmax 10vmax 10vmax darkslateblue, 15vmax 30vmax 10vmax 10vmax purple, 30vmax 30vmax 10vmax 10vmax violet, 45vmax 30vmax 10vmax 10vmax teal, 60vmax 30vmax 10vmax 10vmax orangered, 75vmax 30vmax 10vmax 10vmax yellow, 90vmax 30vmax 10vmax 10vmax crimson, 105vmax 30vmax 10vmax 10vmax yellowgreen, 120vmax 30vmax 10vmax 10vmax orange, 135vmax 30vmax 10vmax 10vmax darkturquoise, 0vmax 45vmax 10vmax 10vmax pink, 15vmax 45vmax 10vmax 10vmax steelblue, 30vmax 45vmax 10vmax 10vmax turquoise, 45vmax 45vmax 10vmax 10vmax coral, 60vmax 45vmax 10vmax 10vmax skyblue, 75vmax 45vmax 10vmax 10vmax darkviolet, 90vmax 45vmax 10vmax 10vmax gold, 105vmax 45vmax 10vmax 10vmax darkslateblue, 120vmax 45vmax 10vmax 10vmax purple, 135vmax 45vmax 10vmax 10vmax violet, 0vmax 60vmax 10vmax 10vmax teal, 15vmax 60vmax 10vmax 10vmax orangered, 30vmax 60vmax 10vmax 10vmax yellow, 45vmax 60vmax 10vmax 10vmax crimson, 60vmax 60vmax 10vmax 10vmax yellowgreen, 75vmax 60vmax 10vmax 10vmax orange, 90vmax 60vmax 10vmax 10vmax darkturquoise, 105vmax 60vmax 10vmax 10vmax pink, 120vmax 60vmax 10vmax 10vmax steelblue, 135vmax 60vmax 10vmax 10vmax turquoise;
  }
  45% {
    box-shadow: 0vmax 0vmax 10vmax 10vmax yellowgreen, 15vmax 0vmax 10vmax 10vmax orange, 30vmax 0vmax 10vmax 10vmax darkturquoise, 45vmax 0vmax 10vmax 10vmax pink, 60vmax 0vmax 10vmax 10vmax steelblue, 75vmax 0vmax 10vmax 10vmax turquoise, 90vmax 0vmax 10vmax 10vmax coral, 105vmax 0vmax 10vmax 10vmax skyblue, 120vmax 0vmax 10vmax 10vmax darkviolet, 135vmax 0vmax 10vmax 10vmax gold, 0vmax 15vmax 10vmax 10vmax purple, 15vmax 15vmax 10vmax 10vmax violet, 30vmax 15vmax 10vmax 10vmax teal, 45vmax 15vmax 10vmax 10vmax orangered, 60vmax 15vmax 10vmax 10vmax yellow, 75vmax 15vmax 10vmax 10vmax crimson, 90vmax 15vmax 10vmax 10vmax yellowgreen, 105vmax 15vmax 10vmax 10vmax orange, 120vmax 15vmax 10vmax 10vmax darkturquoise, 135vmax 15vmax 10vmax 10vmax pink, 0vmax 30vmax 10vmax 10vmax steelblue, 15vmax 30vmax 10vmax 10vmax turquoise, 30vmax 30vmax 10vmax 10vmax coral, 45vmax 30vmax 10vmax 10vmax skyblue, 60vmax 30vmax 10vmax 10vmax darkviolet, 75vmax 30vmax 10vmax 10vmax gold, 90vmax 30vmax 10vmax 10vmax darkslateblue, 105vmax 30vmax 10vmax 10vmax purple, 120vmax 30vmax 10vmax 10vmax violet, 135vmax 30vmax 10vmax 10vmax teal, 0vmax 45vmax 10vmax 10vmax orangered, 15vmax 45vmax 10vmax 10vmax yellow, 30vmax 45vmax 10vmax 10vmax crimson, 45vmax 45vmax 10vmax 10vmax yellowgreen, 60vmax 45vmax 10vmax 10vmax orange, 75vmax 45vmax 10vmax 10vmax darkturquoise, 90vmax 45vmax 10vmax 10vmax pink, 105vmax 45vmax 10vmax 10vmax steelblue, 120vmax 45vmax 10vmax 10vmax turquoise, 135vmax 45vmax 10vmax 10vmax coral, 0vmax 60vmax 10vmax 10vmax skyblue, 15vmax 60vmax 10vmax 10vmax darkviolet, 30vmax 60vmax 10vmax 10vmax gold, 45vmax 60vmax 10vmax 10vmax darkslateblue, 60vmax 60vmax 10vmax 10vmax purple, 75vmax 60vmax 10vmax 10vmax violet, 90vmax 60vmax 10vmax 10vmax teal, 105vmax 60vmax 10vmax 10vmax orangered, 120vmax 60vmax 10vmax 10vmax yellow, 135vmax 60vmax 10vmax 10vmax crimson;
  }
  75% {
    box-shadow: 0vmax 0vmax 10vmax 10vmax teal, 15vmax 0vmax 10vmax 10vmax orangered, 30vmax 0vmax 10vmax 10vmax yellow, 45vmax 0vmax 10vmax 10vmax crimson, 60vmax 0vmax 10vmax 10vmax yellowgreen, 75vmax 0vmax 10vmax 10vmax orange, 90vmax 0vmax 10vmax 10vmax darkturquoise, 105vmax 0vmax 10vmax 10vmax pink, 120vmax 0vmax 10vmax 10vmax steelblue, 135vmax 0vmax 10vmax 10vmax turquoise, 0vmax 15vmax 10vmax 10vmax coral, 15vmax 15vmax 10vmax 10vmax skyblue, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax gold, 60vmax 15vmax 10vmax 10vmax darkslateblue, 75vmax 15vmax 10vmax 10vmax purple, 90vmax 15vmax 10vmax 10vmax violet, 105vmax 15vmax 10vmax 10vmax teal, 120vmax 15vmax 10vmax 10vmax orangered, 135vmax 15vmax 10vmax 10vmax yellow, 0vmax 30vmax 10vmax 10vmax crimson, 15vmax 30vmax 10vmax 10vmax yellowgreen, 30vmax 30vmax 10vmax 10vmax orange, 45vmax 30vmax 10vmax 10vmax darkturquoise, 60vmax 30vmax 10vmax 10vmax pink, 75vmax 30vmax 10vmax 10vmax steelblue, 90vmax 30vmax 10vmax 10vmax turquoise, 105vmax 30vmax 10vmax 10vmax coral, 120vmax 30vmax 10vmax 10vmax skyblue, 135vmax 30vmax 10vmax 10vmax darkviolet, 0vmax 45vmax 10vmax 10vmax gold, 15vmax 45vmax 10vmax 10vmax darkslateblue, 30vmax 45vmax 10vmax 10vmax purple, 45vmax 45vmax 10vmax 10vmax violet, 60vmax 45vmax 10vmax 10vmax teal, 75vmax 45vmax 10vmax 10vmax orangered, 90vmax 45vmax 10vmax 10vmax yellow, 105vmax 45vmax 10vmax 10vmax crimson, 120vmax 45vmax 10vmax 10vmax yellowgreen, 135vmax 45vmax 10vmax 10vmax orange, 0vmax 60vmax 10vmax 10vmax darkturquoise, 15vmax 60vmax 10vmax 10vmax pink, 30vmax 60vmax 10vmax 10vmax steelblue, 45vmax 60vmax 10vmax 10vmax turquoise, 60vmax 60vmax 10vmax 10vmax coral, 75vmax 60vmax 10vmax 10vmax skyblue, 90vmax 60vmax 10vmax 10vmax darkviolet, 105vmax 60vmax 10vmax 10vmax gold, 120vmax 60vmax 10vmax 10vmax darkslateblue, 135vmax 60vmax 10vmax 10vmax purple;
  }
}

@keyframes shadows-cells {
  25% {
    box-shadow: 0vmax 0vmax 10vmax 10vmax coral, 15vmax 0vmax 10vmax 10vmax skyblue, 30vmax 0vmax 10vmax 10vmax darkviolet, 45vmax 0vmax 10vmax 10vmax gold, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax violet, 90vmax 0vmax 10vmax 10vmax teal, 105vmax 0vmax 10vmax 10vmax orangered, 120vmax 0vmax 10vmax 10vmax yellow, 135vmax 0vmax 10vmax 10vmax crimson, 0vmax 15vmax 10vmax 10vmax yellowgreen, 15vmax 15vmax 10vmax 10vmax orange, 30vmax 15vmax 10vmax 10vmax darkturquoise, 45vmax 15vmax 10vmax 10vmax pink, 60vmax 15vmax 10vmax 10vmax steelblue, 75vmax 15vmax 10vmax 10vmax turquoise, 90vmax 15vmax 10vmax 10vmax coral, 105vmax 15vmax 10vmax 10vmax skyblue, 120vmax 15vmax 10vmax 10vmax darkviolet, 135vmax 15vmax 10vmax 10vmax gold, 0vmax 30vmax 10vmax 10vmax darkslateblue, 15vmax 30vmax 10vmax 10vmax purple, 30vmax 30vmax 10vmax 10vmax violet, 45vmax 30vmax 10vmax 10vmax teal, 60vmax 30vmax 10vmax 10vmax orangered, 75vmax 30vmax 10vmax 10vmax yellow, 90vmax 30vmax 10vmax 10vmax crimson, 105vmax 30vmax 10vmax 10vmax yellowgreen, 120vmax 30vmax 10vmax 10vmax orange, 135vmax 30vmax 10vmax 10vmax darkturquoise, 0vmax 45vmax 10vmax 10vmax pink, 15vmax 45vmax 10vmax 10vmax steelblue, 30vmax 45vmax 10vmax 10vmax turquoise, 45vmax 45vmax 10vmax 10vmax coral, 60vmax 45vmax 10vmax 10vmax skyblue, 75vmax 45vmax 10vmax 10vmax darkviolet, 90vmax 45vmax 10vmax 10vmax gold, 105vmax 45vmax 10vmax 10vmax darkslateblue, 120vmax 45vmax 10vmax 10vmax purple, 135vmax 45vmax 10vmax 10vmax violet, 0vmax 60vmax 10vmax 10vmax teal, 15vmax 60vmax 10vmax 10vmax orangered, 30vmax 60vmax 10vmax 10vmax yellow, 45vmax 60vmax 10vmax 10vmax crimson, 60vmax 60vmax 10vmax 10vmax yellowgreen, 75vmax 60vmax 10vmax 10vmax orange, 90vmax 60vmax 10vmax 10vmax darkturquoise, 105vmax 60vmax 10vmax 10vmax pink, 120vmax 60vmax 10vmax 10vmax steelblue, 135vmax 60vmax 10vmax 10vmax turquoise;
  }
  45% {
    box-shadow: 0vmax 0vmax 10vmax 10vmax yellowgreen, 15vmax 0vmax 10vmax 10vmax orange, 30vmax 0vmax 10vmax 10vmax darkturquoise, 45vmax 0vmax 10vmax 10vmax pink, 60vmax 0vmax 10vmax 10vmax steelblue, 75vmax 0vmax 10vmax 10vmax turquoise, 90vmax 0vmax 10vmax 10vmax coral, 105vmax 0vmax 10vmax 10vmax skyblue, 120vmax 0vmax 10vmax 10vmax darkviolet, 135vmax 0vmax 10vmax 10vmax gold, 0vmax 15vmax 10vmax 10vmax purple, 15vmax 15vmax 10vmax 10vmax violet, 30vmax 15vmax 10vmax 10vmax teal, 45vmax 15vmax 10vmax 10vmax orangered, 60vmax 15vmax 10vmax 10vmax yellow, 75vmax 15vmax 10vmax 10vmax crimson, 90vmax 15vmax 10vmax 10vmax yellowgreen, 105vmax 15vmax 10vmax 10vmax orange, 120vmax 15vmax 10vmax 10vmax darkturquoise, 135vmax 15vmax 10vmax 10vmax pink, 0vmax 30vmax 10vmax 10vmax steelblue, 15vmax 30vmax 10vmax 10vmax turquoise, 30vmax 30vmax 10vmax 10vmax coral, 45vmax 30vmax 10vmax 10vmax skyblue, 60vmax 30vmax 10vmax 10vmax darkviolet, 75vmax 30vmax 10vmax 10vmax gold, 90vmax 30vmax 10vmax 10vmax darkslateblue, 105vmax 30vmax 10vmax 10vmax purple, 120vmax 30vmax 10vmax 10vmax violet, 135vmax 30vmax 10vmax 10vmax teal, 0vmax 45vmax 10vmax 10vmax orangered, 15vmax 45vmax 10vmax 10vmax yellow, 30vmax 45vmax 10vmax 10vmax crimson, 45vmax 45vmax 10vmax 10vmax yellowgreen, 60vmax 45vmax 10vmax 10vmax orange, 75vmax 45vmax 10vmax 10vmax darkturquoise, 90vmax 45vmax 10vmax 10vmax pink, 105vmax 45vmax 10vmax 10vmax steelblue, 120vmax 45vmax 10vmax 10vmax turquoise, 135vmax 45vmax 10vmax 10vmax coral, 0vmax 60vmax 10vmax 10vmax skyblue, 15vmax 60vmax 10vmax 10vmax darkviolet, 30vmax 60vmax 10vmax 10vmax gold, 45vmax 60vmax 10vmax 10vmax darkslateblue, 60vmax 60vmax 10vmax 10vmax purple, 75vmax 60vmax 10vmax 10vmax violet, 90vmax 60vmax 10vmax 10vmax teal, 105vmax 60vmax 10vmax 10vmax orangered, 120vmax 60vmax 10vmax 10vmax yellow, 135vmax 60vmax 10vmax 10vmax crimson;
  }
  75% {
    box-shadow: 0vmax 0vmax 10vmax 10vmax teal, 15vmax 0vmax 10vmax 10vmax orangered, 30vmax 0vmax 10vmax 10vmax yellow, 45vmax 0vmax 10vmax 10vmax crimson, 60vmax 0vmax 10vmax 10vmax yellowgreen, 75vmax 0vmax 10vmax 10vmax orange, 90vmax 0vmax 10vmax 10vmax darkturquoise, 105vmax 0vmax 10vmax 10vmax pink, 120vmax 0vmax 10vmax 10vmax steelblue, 135vmax 0vmax 10vmax 10vmax turquoise, 0vmax 15vmax 10vmax 10vmax coral, 15vmax 15vmax 10vmax 10vmax skyblue, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax gold, 60vmax 15vmax 10vmax 10vmax darkslateblue, 75vmax 15vmax 10vmax 10vmax purple, 90vmax 15vmax 10vmax 10vmax violet, 105vmax 15vmax 10vmax 10vmax teal, 120vmax 15vmax 10vmax 10vmax orangered, 135vmax 15vmax 10vmax 10vmax yellow, 0vmax 30vmax 10vmax 10vmax crimson, 15vmax 30vmax 10vmax 10vmax yellowgreen, 30vmax 30vmax 10vmax 10vmax orange, 45vmax 30vmax 10vmax 10vmax darkturquoise, 60vmax 30vmax 10vmax 10vmax pink, 75vmax 30vmax 10vmax 10vmax steelblue, 90vmax 30vmax 10vmax 10vmax turquoise, 105vmax 30vmax 10vmax 10vmax coral, 120vmax 30vmax 10vmax 10vmax skyblue, 135vmax 30vmax 10vmax 10vmax darkviolet, 0vmax 45vmax 10vmax 10vmax gold, 15vmax 45vmax 10vmax 10vmax darkslateblue, 30vmax 45vmax 10vmax 10vmax purple, 45vmax 45vmax 10vmax 10vmax violet, 60vmax 45vmax 10vmax 10vmax teal, 75vmax 45vmax 10vmax 10vmax orangered, 90vmax 45vmax 10vmax 10vmax yellow, 105vmax 45vmax 10vmax 10vmax crimson, 120vmax 45vmax 10vmax 10vmax yellowgreen, 135vmax 45vmax 10vmax 10vmax orange, 0vmax 60vmax 10vmax 10vmax darkturquoise, 15vmax 60vmax 10vmax 10vmax pink, 30vmax 60vmax 10vmax 10vmax steelblue, 45vmax 60vmax 10vmax 10vmax turquoise, 60vmax 60vmax 10vmax 10vmax coral, 75vmax 60vmax 10vmax 10vmax skyblue, 90vmax 60vmax 10vmax 10vmax darkviolet, 105vmax 60vmax 10vmax 10vmax gold, 120vmax 60vmax 10vmax 10vmax darkslateblue, 135vmax 60vmax 10vmax 10vmax purple;
  }
}

.youtube-player {
	position: relative;
	padding-bottom: 56.23%;
	/* Use 75% for 4:3 videos */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background: #000;
	margin: 5px;
}

.youtube-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: transparent;
}

.youtube-player img {
	bottom: 0;
	display: block;
	left: 0;
	margin: auto;
	max-width: 100%;
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	height: auto;
	cursor: pointer;
	-webkit-transition: .4s all;
	-moz-transition: .4s all;
	transition: .4s all;
}

.youtube-player img:hover {
	-webkit-filter: brightness(75%);
}

.youtube-player .play {
	height: 72px;
	width: 72px;
	left: 50%;
	top: 50%;
	margin-left: -36px;
	margin-top: -36px;
	position: absolute;
	background: url("//i.imgur.com/TxzC70f.png") no-repeat;
	cursor: pointer;
}