/* -----------------------------------------------------------------------

	ROUSER

----------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}
html, body {
	background-color: black;
	color: white;
	font-family: 'Source Code Pro', monospace;
	font-size: 10px;
	font-weight: 400;
}
* {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
}
h1, h2, h3, h4 { font-weight: 600; margin-bottom: 1.3rem; text-transform: uppercase; }
a, .btn, p, ul, .nav span, #services #services_grid div, #work #work_counters div, .footer .copyright, #contact #contact_grid div, #word_grid div, #quotes { font-size: 1.3rem; }
.tagline { font-size: 1.3em; font-weight: 600; margin-bottom: 1em; text-transform: uppercase; }
h2, nav ul li a { font-size: 2.6rem; }
#welcome p { font-size: 1.95rem; margin-bottom: 1.5em; }
li { line-height: 1.5; }
p {
	line-height: 1.5em;
	margin-bottom: 1.5rem;
}
p:last-child { margin-bottom: 0; }
a {
	color: white;
	font-weight: 600;
	text-decoration: none;
}
a.textlink { border-bottom: 1px solid; }
a:hover { color: rgba(255,255,255,0.4); }
.btn {
	border: 1px solid white;
	display: inline-block;
	font-weight: 600;
	line-height: 1;
	margin: 1rem 0 0 2rem;
	padding: 1.3rem;
	cursor: pointer;
	text-transform: uppercase;
}
.btn:first-of-type, .servbtn:first-of-type, .btn.email_copy {
	margin: 1.3rem 0 0 calc(-1.3rem - 1px);
}
.btn:hover {
	border-color: rgba(255,255,255,0.4);
	color: white;
}
.btn:after {
	content: '_';
	display: inline-block;
	-webkit-animation: blink 1s steps(2, start) infinite;
	        animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
	to { visibility: hidden; }
}
.tooltip {
	display: flex;
	font-style: italic;
	overflow: hidden;
	margin-top: 1.3rem;
	opacity: 0;
}
.email_copy:hover + .tooltip { opacity: 1; }
.logo:hover, #toggle:hover { opacity: 0.4; }

/* Header */

header {
	display: flex;
	justify-content: space-between;
	padding: 3.5rem;
	pointer-events: none;
	position: fixed;
	width: calc(100% - 7rem);
	z-index: 9999;
}
	header #logo,
	header #toggle {
		pointer-events: all;
	}
	.home #logo {
		display: none;
	}
	header img {
		display: block;
		height: 7rem;
	}

/* Menu */

nav {
	background-color: rgba(0, 0, 0, 0.8);
	height: calc(100% - 28rem);
	opacity: 0;
	padding: 14rem 0;
	pointer-events: none;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 999;
}
nav.open {
	opacity: 1;
	pointer-events: all;
}
	nav ul {
		display: inline-flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-evenly;
		list-style: none;
		margin: 0 auto;
	}
		nav ul li { display: block; }
nav .nav { height: 100%; }
	.nav {
		display: flex;
		flex-wrap: wrap;
		font-weight: 600;
		justify-content: space-between;
		padding: 0 14rem;
	}
		.nav > div {
			border-right: 1px solid white;
			display: table;
			width: calc(25% - 1px);
		}
		.nav > div:last-child {
			border-right: 0 none;
		}
			.nav > div > div {
				display: table-cell;
				padding: 6rem 0;
				text-align: center;
				vertical-align: middle;
			}
				.nav span {
					display: block;
					margin-bottom: 1.75rem;
				}
				.nav a {
					display: block;
					line-height: 2.3rem;
				}

/* Main */

section { position: relative; }

/*.fade { opacity: 0; transition: opacity 0.8s ease-out; }*/

.full {
	align-items: center;
	display: flex;
	min-height: 100vh;
	width: 100%;
}
	.middle {
		margin: 0 auto;
		max-width: 128rem;
		width: calc(100% - 28rem);
		z-index: 9;
	}
	.full .middle,
	.horizontal .middle { margin-top: 10rem; }
	#start .middle { margin-top: 0; }
	#start video { width: 100%; }

.narrow {
	padding: 0 7rem;
	width: calc(100% - 14rem);
}

/* Hero */

.hero {
	align-items: center;
	display: flex;
	height: 100vh;
	width: 100%;
}
.hero_parent {
	overflow: hidden;
	position: absolute;
}
	.hero_child {
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
	}

body.home .hero_parent { background-image: url(img/hero/hero_home_grey.jpg); }
body.home .hero_child { background-image: url(img/hero/hero_home_mix.jpg); }
body.about .hero_parent { background-image: url(img/hero/hero_about_grey.jpg); }
body.about .hero_child { background-image: url(img/hero/hero_about_mix.jpg); }
body.advertising .hero_parent { background-image: url(img/hero/hero_advertising_grey.jpg); }
body.advertising .hero_child { background-image: url(img/hero/hero_advertising_mix.jpg); }
body.contact .hero_parent { background-image: url(img/hero/hero_contact_grey.jpg); }
body.contact .hero_child { background-image: url(img/hero/hero_contact_mix.jpg); }
body.design .hero_parent { background-image: url(img/hero/hero_design_grey.jpg); }
body.design .hero_child { background-image: url(img/hero/hero_design_mix.jpg); }
body.production .hero_parent { background-image: url(img/hero/hero_production_grey.jpg); }
body.production .hero_child { background-image: url(img/hero/hero_production_mix.jpg); }
body.strategy .hero_parent { background-image: url(img/hero/hero_strategy_grey.jpg); }
body.strategy .hero_child { background-image: url(img/hero/hero_strategy_mix.jpg); }
body.forartssake .hero_parent { background-image: url(img/hero/hero_forartssake_grey.jpg); }
body.forartssake .hero_child { background-image: url(img/hero/hero_forartssake_mix.jpg); }

/* Home | Start */

#start .middle { mix-blend-mode: screen; }
	#start #logo_grid {
		column-gap: 4rem;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		max-height: calc(100vh - 22rem);
	}
		#start #logo_grid div { width: calc(33.3% - 4rem); }
			#start #logo_grid div video { display: block; width: 100%; }

/* Home | Welcome */

/* #welcome { text-align: center; } */

/* Home | Services */

	#services #serv_one { position: relative; }
	.divider {
		height: 2px;
		position: absolute;
		right: 0;
		top: calc(50% + 6rem);
		width: 28rem;
		transform: translateX(50%);
		display: none; /* REMEMBER TO REMOVE ONCE FIXED */
	}
		.divider .bar {
			background-color: white;
			height: 2px;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 0;
		}
	#services #services_grid {
		column-gap: 2rem;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 6rem;
		row-gap: 1rem;
	}
		#services #services_grid div {
			font-weight: 600;
			height: 1em;
			line-height: 1em;
			width: calc(50% - 1rem);
		}

/* Home | Work */

#work {}
#work .middle { z-index: 99; }
#work .middle .narrow:last-child { margin-top: 14rem; }
	#work #work_counters {
		column-gap: 1rem;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 8rem;
	}
		/*#work #work_counters div {
			display: inline-table;
			font-weight: 600;
			height: 1em;
			line-height: 1em;
			max-width: 24rem;
			text-align: center;
			width: 100%;
		}
		#work #work_counters img { display: inline-block; width: 100%; }*/
		#work #work_counters p { line-height: 1em; margin-bottom: 2em; text-align: center; }

		.fullscreen_video {
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
			.ticker {
				display: inline-flex;
				width: 180px;
			}
			.ticker_single {
				display: inline-flex;
				width: 90px;
			}
			.ticker, .ticker_single {}
				.ticker_L,
				.ticker_R{
					width: 50%;
				}
				.ticker_C {
					width: 100%;
				}
					.t_row { overflow: hidden; position: relative; width: 100%; }
					.row1, .row2, .row3 { margin-bottom: 25px; }
					.row1, .row3, .row4 { height: 25px; }
					.row3 div, .row4 div { top: -75px; }
					.row2 { height: 100px; }
					.ticker_num {
						background-image: url(/img/numbers.png);
						background-position: 0 0;
						background-repeat: repeat-y;
						background-size: contain;
						height: 8000px;
						left: 0;
						position: absolute;
						top: 0;
						width: 100%;
					}

/* Home | About */

#about .middle { padding: 21rem 0; }
#quotes .middle { padding-bottom: 21rem; }
	#about .columns { display:flex; align-items: center; flex-wrap: wrap; }
		#about .left { padding: 0 7rem; width: calc(50% - 14rem); }
		#about .right {
			aspect-ratio: 1/1;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			display: flex;
			width: 50%;
		}
		#inview { opacity: 0; width: 100%; }

/* Home | Contact */

#contact .middle { padding-bottom: 21rem; }
	#contact #contact_grid,
	#word_grid {
		column-gap: 1rem;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 6rem;
		row-gap: 1rem;

	}
		#contact #contact_grid div,
		#word_grid div {
			font-weight: 600;
			line-height: 1em;
			text-transform: uppercase;
			width: calc(20% - 1rem);
		}

/* Subpages */

.hero {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*.home .hero { background-image: url(/img/hero_home.jpg); }
.strategy .hero { background-image: url(/img/hero_strategy.jpg); }
.advertising .hero { background-image: url(/img/hero_advertising.jpg); }
.design .hero { background-image: url(/img/hero_design.jpg); }
.digital .hero { background-image: url(/img/hero_digital.jpg); }
.about .hero { background-image: url(/img/hero_about.jpg); }
.contact .hero { background-image: url(/img/hero_contact.jpg); }*/
.hero .title {
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	--minFontSize: 32px;
	--maxFontSize: 160px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	margin: 0;
}

.hero .middle { margin-top: 0; z-index: 2; }
.content .middle { padding: 21rem 0; }

.video_full {
	height: 100%;
	opacity: 80%;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}
	.video_full iframe {
		height: 100%;
		left: 50%;
		position: absolute;
		top: 50%;
		width: 178vh;
		-webkit-transform: translate(-50%,-50%);
		   -moz-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		     -o-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);
	}

/* Subpage | Work */

	.backtowork {
		display: none;
		left: 3.5rem;
		margin-top: 1.3rem;
		position: fixed;
		top: 11.8rem;
		z-index: 9999;
	}
	body.case .backtowork { display: block; }
	.backtowork a {
		display: block;
		margin-bottom: 0.5rem;
	}
.portfolio {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 21rem;
}
	.port {
		align-items: center;
		aspect-ratio: 16/9;
		display: flex;
		position: relative;
		text-transform: uppercase;
		width: 50%;
		min-height: 540px;
	}
	.port:after {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		content: '';
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 0;
	}
	.port:hover:after { opacity: 0.6; }
	.port_tisa:after { background-image: url(/img/work/tisa_thumb.jpg); }
	.port_bridgetobrisbane:after { background-image: url(/img/work/bridgetobrisbane_thumb.jpg); }
	.port_brisbaneroar:after { background-image: url(/img/work/brisbaneroar_thumb.jpg); }
	.port_aec:after { background-image: url(/img/work/electoralcommission_thumb.jpg); }
	.port_emporiummelbourne:after { background-image: url(/img/work/emporiummelbourne_thumb.jpg); }
	.port_fincorp:after { background-image: url(/img/work/fincorp_thumb.jpg); }
	.port_goldcoast:after { background-image: url(/img/work/goldcoast_thumb.jpg); }
	.port_griffithuniversity:after { background-image: url(/img/work/griffithgna_thumb.jpg); }
	.port_hans:after { background-image: url(/img/work/hans_thumb.jpg); }
	.port_jev:after { background-image: url(/img/work/jev_thumb.jpg); }
	.port_kinabank:after { background-image: url(/img/work/kinabank_thumb.jpg); }
	.port_omaka:after { background-image: url(/img/work/omaka_thumb.jpg); }
	.port_qfes:after { background-image: url(/img/work/floodedforgetit_thumb.jpg); }
	.port_qldhealth_healthandfitness:after { background-image: url(/img/work/healthandfitnessage_thumb.jpg); }
	.port_qldhealth_straightanswers:after { background-image: url(/img/work/straightanswers_thumb.jpg); }
	.port_queenslandrail:after { background-image: url(/img/work/queenslandrail_thumb.jpg); }
	.port_providence:after { background-image: url(/img/work/providence_thumb.jpg); }
	.port_triffid:after { background-image: url(/img/work/triffid_thumb.jpg); }
	.port div { z-index: 99; max-width: 570px; }
	.port:nth-child(odd) div { width: 100%; margin: 0; right: 0; position: absolute; padding-right: 40px; box-sizing: border-box; }
	.port:nth-child(even) div { width: 100%; margin: 0; left: 0; position: absolute; padding-left: 40px; box-sizing: border-box; text-align: right; }
		.port h2 { line-height: 1; }
		.port p { font-weight: 600; line-height: 1.3; margin: 1.3rem 0 0; }
		.port .servcie_type { display: block; margin-top: 0.5rem; }
		.port:nth-child(even) .btn { margin-left: 0; margin-right: calc(-1.3rem - 1px); }

	.disclaimer { padding: 7rem 7rem 0; text-align: center; width: calc(100% - 14rem); }

/* Subpage | About */

.bios { padding-bottom: 21rem; }
	.bio_holder  {
		column-count: 2;
		column-gap: 14rem;
		display: flex;
	}
		.bio { width: 100%; }
			.bio img { display: block; margin-bottom: 8rem; width: 100%; }

.clients { padding: 21rem 0; }
/*	.clients h2 { padding-bottom: 2.8rem; }*/
	#client_grid {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		margin-top: 2.8rem;
	}
		#client_grid img { width: 16.66%; }

body.about .middle { padding-bottom: 0; }
body.about #about .middle { padding-top: 0; }

.quote_heading, .quote_row {
    padding-bottom: 5.2rem;
}
.quote_name {
    padding-top: 1.3rem;
}
.quote_name, .quote_title {
	font-weight: 600;
	text-transform: uppercase;
}

/* Subpage | Case Study */

.work .columns { display:flex; align-items: center; }
	.work .left, .work .right {
		aspect-ratio: 1/1;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		width: 50%;
	}
	.work .fullwidth, .work .fullwidth img { width: 100%; }
	.work .left, .work .right, .work .fullwidth { margin-bottom: 21rem; }
.portrait .video { width: auto; height: 100%; }
.nextprev {
	display: flex;
	justify-content: center;
	margin: 0 auto 21rem;
}
	.nextprev a {
		line-height: 2rem;
	}
	.nextprev span {
		background-color: white;
		height: 2rem;
		margin: 0 3.5rem;
		width: 1px;
	}

/* Footer */

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 3.5rem;
	width: calc(100% - 7rem);
}
	.footer div,
	.footer img {
		height: 7rem;
	}
	.footer .copyright {
		line-height: 7rem;
	}
	.footer img {
		display: inline-block;
	}
	.footer_l { display: flex; }
		.footer_l a { display: inline-block; }
		.footer_l .socials {
			display: flex;
			margin-left: 12rem;
		}
			.footer_l .socials a { margin-left: 2rem; }
				.footer i {
					font-size: 2.4rem;
					height: 7rem;
					line-height: 7rem;
					vertical-align: top;
				}

/* This Way */

.thisway_arrow {
	bottom: 3.5rem;
	height: 7rem;
	left: 0;
	position: fixed;
	width: 7rem;
	z-index: 99;
}
	.thisway_arrow img {
		height: 1.4rem;
		left: 50%;
		position: absolute;
		top: 50%;
		width: 1.4rem;
		-webkit-transform: translate(-50%,-50%);
		   -moz-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		     -o-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);
		-webkit-transform-origin: center;
		   -moz-transform-origin: center;
		    -ms-transform-origin: center;
		     -o-transform-origin: center;
		        transform-origin: center;
		-webkit-animation: arrow 1s infinite;
		        animation: arrow 1s infinite;
	}
	@keyframes arrow {
		0% {
			margin-top: 0;
		}
		50% {
			margin-top: 3px;
		}
		100% {
			margin-top: 0;
		}
	}
.thisway_arrow.rotate {
	-webkit-transform: rotate(-90deg);
	   -moz-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	     -o-transform: rotate(-90deg);
	        transform: rotate(-90deg);
}

/* Scrollable Left/Right */

html, body {
	overflow-x: intial;
}
section.horizontal {
	overflow-x: hidden;
	overflow-y: intial;
}
section.horizontal .pin-wrap,
section.horizontal .animation-wrap {
	display: flex;
	height: 100vh;
	position: relative;
	z-index: 1;
}
section.horizontal .item {
	align-items: center;
	display: flex;
	flex: 0 0 100vw;
	height: 100vh;
	position: relative;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
section.horizontal .animation-wrap.to-right {
	counter-reset: item;
	float: left;
}

/* Scrollbar */

/** {
	scrollbar-color: white black;
	scrollbar-width: auto;
}
*::-webkit-scrollbar { width: 2px; }
*::-webkit-scrollbar-track { background: black; }
*::-webkit-scrollbar-thumb {
	background-color: white;
	border-radius: 0;
}*/

/* Progress */

.progress-bar-wrapper {
	height: 12rem;
	overflow: hidden;
	position: fixed;
	right: calc(7rem - 1px);
	top: calc(50% - 7rem);
	width: 2px;
	z-index: 999;
}
	.progress {
		background-color: rgba(255,255,255,0.4);
		border-bottom: 12rem solid white;
		top: 0;
		height: 0%;
		position: absolute;
		width: 2px;
	}

/* Toggle */

#toggle {
	cursor: pointer;
	height: 7rem;
	margin-left: auto;
	position: relative;
	width: 7rem;
}
	#toggle span {
		background: white;
		display: block;
		height: 2px;
		left: 50%;
		opacity: 1;
		position: absolute;
		width: 4rem;
		-webkit-transform: rotate(0deg) translate(-50%,-50%);
		   -moz-transform: rotate(0deg) translate(-50%,-50%);
		     -o-transform: rotate(0deg) translate(-50%,-50%);
		        transform: rotate(0deg) translate(-50%,-50%);
		-webkit-transform-origin: center center;
		   -moz-transform-origin: center center;
		     -o-transform-origin: center center;
		        transform-origin: center center;
	}
	#toggle span:nth-child(1) { top: 33%; }
	#toggle span:nth-child(2){ top: 66%; }

/* Vimeo Player */

.vimeo_holder { opacity: 1; position: relative; }
.video { width: 100%; }
.columns div.playbtn {
	background-image: url('/img/playpause.png');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
    position: absolute;
    height: 6rem;
    width: 6rem !important;
    opacity: 0;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.columns div.playbtn.sprite { background-position: bottom left; }
.vimeo_holder:hover div.playbtn,
.vimeo_holder.initial div.playbtn { opacity: 1; }

/* Transitions */

a, .btn, nav, .thisway_arrow, .port:after, .tooltip, .logo, #toggle {
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	    -ms-transition: all .25s ease-in-out;
	     -o-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}
.playbtn, .tooltip {
	-webkit-transition: opacity .25s ease-in-out;
	   -moz-transition: opacity .25s ease-in-out;
	    -ms-transition: opacity .25s ease-in-out;
	     -o-transition: opacity .25s ease-in-out;
	        transition: opacity .25s ease-in-out;
}

/* Responsive */
@media all and (max-width: 1600px) {
	.port div { max-width: 100% }
	.port:nth-child(odd) div { padding-left: 21rem; }
	.port:nth-child(even) div { padding-right: 21rem; }
}

@media all and (max-width: 1200px) {
	.port div { width: auto; }
	.port:nth-child(odd) div { margin: 0 7rem 0 14rem; }
	.port:nth-child(even) div { margin: 0 14rem 0 7rem; padding-right: 3.5rem; text-align: left; padding-left: 0; width: auto; }
	.port:nth-child(even) .btn { margin-right: 0; margin-left: calc(-1.3rem - 1px); }
}
@media all and (max-width: 1000px) {
	#start #logo_grid div { width: calc(50% - 4rem); }
	#start #logo_grid div:nth-child(3) { display: none; }
	.work .columns { display: block; }
	.left, .right { width: 100% !important; }
	.port div { margin: 0 7rem !important; }
	#about .left { padding: 0 7rem 0 0; width: calc(50% - 7rem); }
	.columns div { padding: 0 !important; width: 100%; }
	.columns .right { margin-top: 7rem; }
	#client_grid img { width: 20%; }
	.bio_holder { column-count: 1; display: block; }
	.bio_holder .bio:first-child { margin-bottom: 14rem; }
	.port:nth-child(odd) div { padding: 0; width: auto; left: 0; }
	.port:nth-child(even) div {  }
}
@media all and (max-width: 800px) {
	.align_l { background-position: center left; }
	.align_r { background-position: center right; }
	.align_gna { background-position: 70% center; }
	.align_hans { background-position: 20% center; }
	.align_qfes { background-position: 20% center; }
	.align_qr { background-position: 70% center; }
	.align_emporium { background-position: 60% center; }
	#start #logo_grid div { width: 100%; }
	#start #logo_grid div:nth-child(2),
	.progress-bar-wrapper { display: none; }
	.port { width: 100%; }
	.port div { margin: 0 auto !important; text-align: center; padding: 0 3.5rem; }
	.port .btn:first-of-type { margin: 1.3rem 0 0 0; }
	.middle { width: calc(100% - 14rem); }
	.narrow { padding: 0; width: auto; }
	.nav { padding: 0; }
	.port:nth-child(even) div { text-align: center; width: 100%; padding: 0 3.5rem; }
}
@media all and (max-width: 680px) {
	#client_grid img { width: 25%; }
    nav { vertical-align: middle; display: table; }
    nav .nav { display: table-cell; vertical-align: middle; }
	footer .nav { padding: 3.5rem 0; border-top: 1px solid white; border-bottom: 1px solid white; }
	.nav > div { border: none; width: 100%; }
	.nav > div > div { padding: 1.75rem 0; }
	#contact #contact_grid div, #word_grid div { width: calc(25% - 1rem); }
	a.servbtn { display: table; margin: 1.3rem 0 0 calc(-1.3rem - 1px); }
	.footer_l .socials { margin-left: 7rem; }
}
@media all and (max-width: 586px) {
	html, body { overflow-x: initial; }
	.footer_l { justify-content: inherit; width: 100%; }
	.footer .copyright { width: 100%; text-align: center; }
	.footer_l .socials { margin-left: 0; }
}
@media all and (max-width: 520px) {
	.middle { width: calc(100% - 7rem); }
	#contact #contact_grid div, #word_grid div { width: calc(33.3% - 1rem); }
	#client_grid img { width: 33.3%; }
}
@media all and (max-width: 480px) {
	.port div { margin: 0 7rem; }
}
@media all and (max-width: 380px) {
	.footer_l { display: inline-table; }
	.footer_l > * { text-align: center; width: 100%; }
	.footer_l .socials { display: inline-block; margin: 0; }
	.footer_l .socials a { margin: 0 1rem; }
	#contact #contact_grid div, #word_grid div { width: calc(50% - 1rem); }
	.port { aspect-ratio: 4/3; }
}
@media all and (max-width: 280px) {
	.port { aspect-ratio: 1/1; }
}
@media all and (min-width: 178vh) {
	.video_full iframe { height: 56.3vw; width: 100%; }
}