html {
    color: #311A4B;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #FC4343;
    text-shadow: none;
}

::selection {
    background: #FC4343;
    text-shadow: none;
}

audio,
canvas,
iframe,
img,
svg {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/*FONTS*/


@font-face {
    font-family: 'Aventa';
    src: url('../fonts/aventa/Aventa-Black.woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aventa';
    src: url('../fonts/aventa/Aventa-Medium.woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aventa';
    src: url('../fonts/aventa/Aventa-Thin.woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


/*BODY*/


body{
	font-family: 'Aventa', Helvetica Neue, Helvetica, Arial, serif;
	font-weight:normal;
	font-size:16px;
	letter-spacing:-0.2px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

.fade-in.loaded {
	opacity: 1;
}

body.home{
	background: #A76DFF;
}

article {
	width: 960px;
	margin: 0 auto 80pt;
}

h1, h2, p, a {
	font-family: 'Aventa', Helvetica Neue, Helvetica, Arial, serif;
}

h1, h2 {
	font-weight: 900;
	color: #000;
}

h1 {
	font-size: 40pt;
	line-height: 40pt;
	text-transform: uppercase;
	margin: 0 0 80pt;
	padding: 5pt 0 0;
}

h2{
	font-size: 16pt;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 20pt 0;
	background: rgb(255, 255, 255);
	z-index: 1;
	margin: 80pt auto 0;
}

nav .container {
	width: 960px;
	margin: 0 auto;
}

#hero {
	width: 100%;
}

.home p{
	position: absolute;
	bottom: 100px;
	width: 100%;
	margin:0 0 20px;
	text-align:center;
}

p{
	font-size: 12pt;
	line-height: 20pt;
	color: #555;
	letter-spacing: .2pt;
	margin-bottom: 50px;
}

.home a{
	color:#FFDE63;
	border:3px solid #FFDE63;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	padding:20px;
	background:none;
	display:inline-block;
	position: relative;
	margin: 10px;
	width: auto;
}

.homelink {
	font-size: 12pt;
	color: #FF6166;
	letter-spacing: 4pt;
	text-decoration: none;
	text-transform: uppercase;
	padding: 20px 0;
}

.work article a {
	color: #FF6166;
	font-weight: 900;
	text-decoration: none;
}

.chevron {
	margin: -4px 5px 0 0;
}

.home header{
	padding-top: 200px;
	background:#FFDA63;
	text-align: center;
	overflow: hidden;
}

.meteor {
	stroke-dasharray: 50 3000;
	animation: dash 10s ease-out infinite 1.5s;
}

hr {
	border: 0;
	border-top: 1pt solid #eee;
	margin: 100pt 0 20pt 0;
}

lottie-player, .video-container {
	display: inline-block;
	width:47%;
	height:300px;
	margin: 6% 6% 0 0;
	background: #FFFDF4;
	border-radius: 30px;
	float: left;
}

lottie-player:nth-child(even) {
	margin-right: 0;
}

.video-container {
	padding: 5%;
	width: 37%;
	display: inline-table;
}

video {
	width: 100%;
	object-fit: contain;
	display: inline-block;
	box-shadow: 0pt 10pt 23pt rgba(80, 0, 0, 0.15);
}

@keyframes dash {
	0% {
		stroke-width: 11;
		stroke-dashoffset: 1500;
		stroke-dasharray: 200 2000;
		opacity: 1;
	}
	7% {
		stroke-width: 7;
	}
	9% {
		opacity: 1;
	}
	10% {
		stroke-width: 0;
		stroke-dashoffset: 0;
		stroke-dasharray: 0 2000;
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.no-scroll {
	overflow: hidden;
}


/*GRIDS*/

.grid {
	width: 100%;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: repeat(12,1fr);
	gap: 50pt;
}

.sixth {
	grid-column: span 2;
}

.quarter {
	grid-column: span 3;
}

.third {
	grid-column: span 4;
}

.half {
	grid-column: span 6;
}

.full {
	grid-column: span 12;
}

.grid-item img {
	width: 100%;
	box-shadow: 0pt 10pt 23pt rgba(80, 0, 0, 0.15);
	border-radius: 30px;
	overflow: hidden;
	transform: none;
	transition: transform .2s;
}

.grid-item img:hover {
	transform: translateY(-3pt) scale(1.01);
	transition: transform .2s;
}

/*Detail Pages Adjustments*/

.grid.detail {
	gap: 20pt;
}

.grid.detail img{
	border-radius: 10px;
}

.subgrid {
	display: grid;
	grid-template-columns: subgrid;
	grid-auto-rows: max-content;
	gap: 20pt;
}

/*MEDIA QUERIES*/

@media only screen and (max-width: 960px) {
	.grid {
		grid-template-columns: repeat(6,1fr);
	}
	.grid.overview {
		gap:20pt;
	}
	.grid.overview img {
		border-radius: 10px;
	}
	.grid.overview .third {
		grid-column: span 3;
	}
	.grid.detail .full {
		grid-column: span 6;
	}
	.grid.detail .third {
		grid-column: span 6;
	}
}

@media only screen and (max-width: 1920px) {
	.home header {
		padding-top: 120px;
	}

	#hero {
		width: 150%;
		margin-left: -24%;
	}

	.home p {
		bottom: 50px;
	}
}

@media only screen and (max-width: 1000px) {
	.home header {
		padding-top: 120px;
	}

	#hero {
		width: 200%;
		margin-left: -50%;
	}
}

@media only screen and (max-width: 1280px) {
	article {
		width: 80%;
		margin: 0 10% 40pt;
	}
	nav .container {
		width: 80%;
		margin: 0 10% 0;
	}
}

@media only screen and (max-width: 640px) {
	article  {
		margin: 0 10% 40pt;
	}
	lottie-player {
		width: 100%;
	}
	.video-container {
		width: 80%;
		padding: 10%;
	}
	.sticky {
		margin: 40pt auto 0;
	}
	.work h1 {
		font-size: 30pt;
		line-height: 35pt;
		margin: 0 0 50pt;
	}
}

@media only screen and (max-width: 500px) {
	.home header {
		padding-top: 0px;
	}
	.submit {
		display: block !important;
		margin: 20px 50px;
	}
	#hero {
		width: 250%;
		margin-left: -75%;
	}
	.home p {
		bottom: 0;
	}
    .home a {
        padding: 12px;
		width: 100%;
    }
	.home a.half {
		display: inline-block;
		width: calc(50% - 50px);
	}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}


/*HELPERS*/


.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/*PRINT*/


@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}