/*
OPTION 1
Built for Syngency & Bootstrap 4
Both Artist & Model offices share black on white color scheme
*/

/*
BASE STYLES
======================================================
*/

:root {
	--color-bg: #fff;
	--color-bg-alt: #f4f4f4;
	--color-text: #333;
	--color-text-highlight: #aaa;

	--transition-speed-fast: 0.2s;
	--transition-speed-medium: 0.35s;
	--transition-speed-slow: 0.6s;
	--transition-func: cubic-bezier(0.215, 0.610, 0.355, 1);

	--scrollbar-width: 0px;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Banks & Miles Single Line Regular', Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.025em;
	color: var(--color-text, #333);
	background-color: var(--color-bg, #fff);
}

header, footer, nav, main, section, aside {
	position: relative;
}

/* h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	text-transform: uppercase;
} */

h1, .h1 { 
	font-size: 1.75rem;
	text-transform: uppercase;
}
h2, .h2 { 
	font-size: 1.5rem;
}
h3, .h3 { 
	font-size: 1.3rem;
}
h4, .h4 { 
	font-size: 1.15rem;
}
h5, .h5 { font-size: 0.8rem; }
h6, .h6 { font-size: 0.65rem; }

h5, .h5, h6, .h6,
label,
.btn {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
	margin-bottom: 0.75rem;
}
.rte p+h2, .rte ul+h2, .rte ol+h2, .rte blockquote+h2, .rte table+h2, .rte hr+h2, .rte iframe+h2, .rte embed+h2, .rte div+h2,
.rte p+h3, .rte ul+h3, .rte ol+h3, .rte blockquote+h3, .rte table+h3, .rte hr+h3, .rte iframe+h3, .rte embed+h3, .rte div+h3,
.rte p+h4, .rte ul+h4, .rte ol+h4, .rte blockquote+h4, .rte table+h4, .rte hr+h4, .rte iframe+h4, .rte embed+h4, .rte div+h4,
.rte p+h5, .rte ul+h5, .rte ol+h5, .rte blockquote+h5, .rte table+h5, .rte hr+h5, .rte iframe+h5, .rte embed+h5, .rte div+h5,
.rte p+h6, .rte ul+h6, .rte ol+h6, .rte blockquote+h6, .rte table+h6, .rte hr+h6, .rte iframe+h6, .rte embed+h6, .rte div+h6 {
	margin-top: 2rem;
}

a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}
.rte a {
	text-decoration: underline;
}
.rte a:hover,
.rte a:focus {
	text-decoration: none;
}

header a, nav a, footer a,
a.font-alt, a .font-alt, .font-alt a,
header .a, nav .a, footer .a,
.a.font-alt, .a .font-alt, .font-alt .a {
	text-decoration: none !important;
}

a:hover, a:focus,
.a:hover, .a:focus {
	color: inherit;
	/* text-decoration: none; */
}

.a {
	text-decoration: none;
	cursor: pointer;
}

b, strong {
	font-weight: 700;
}

img, svg {
	max-width: 100%;
	height: auto;
}

label {
	font-size: 0.8rem;
	color: inherit;
	border: none;
	border-radius: 0;
}

hr {
	border-top-color: rgba(180,180,180,0.5);
}

.form-control {
	font-size: 0.9375rem;
	font-weight: 400 !important;
	border-radius: 0;
	border-width: 1px;
	border-color: #eee;
	background-color: #fff;
	box-shadow: none !important;
}
.form-control:focus {
	border-color: #ddd;
	background-color: #fff;
	box-shadow: none;
}


/* Buttons */
.btn {
	padding: 0.75rem 1rem;
	font-size: 1rem;
	text-transform: uppercase;
	color: #444;
	border-color: #f4f4f4;
	background-color: #f4f4f4;
	border-radius: 0;
	box-shadow: none !important;
	outline: none !important;
}
.btn-sm {
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary.disabled, .btn-primary:disabled {
	color: #000;
	border-color: #ddd;
	background-color: #ddd;
}
.btn-primary:active {
	color: #000 !important;
	border-color: #ddd !important;
	background-color: #ddd !important;
}
.btn-secondary {
	color: #fff;
	border-color: #222;
	background-color: #222;
}

.scroll-top {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}
.scroll-top:hover,
.scroll-top:focus {
	opacity: 1;
}


/*
HEADER
======================================================
*/

header.site-header {
	z-index: 10;
}
header.site-header a {
	position: relative;
	z-index: 11;
}

header .brand {
	position: relative;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
  font-size: 1.5rem;
	line-height: 1.2;
	z-index: 1;
}
header .brand img,
header .brand svg {
	width: 100px;
}
body.template-home header .brand img,
body.template-home header .brand svg {
	width: 200px;
}
body.office-artists.template-home header .brand img,
body.office-artists.template-home header .brand svg {
	width: 125px;
}


@media (min-width: 992px) {
	body.template-not-home header.site-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
}


/*
MAIN NAVIGATION
======================================================
*/

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	margin-bottom: 0.25rem; /* For block nav items */
}
nav a {
	display: block;
	outline: none !important;
	cursor: pointer;
}

nav.site-nav-overlay {
	position: fixed;
	top: -100%; /* Keep off-screen initially */
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 1.125rem;
	text-transform: uppercase;
	background-color: var(--color-bg);
	z-index: 100;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-2rem); /* Slight offset for a subtle slide-in)
	/* Fast fade out, delayed transform, delayed position shift */
	transition: opacity var(--transition-speed-fast) var(--transition-func), transform 0s linear var(--transition-speed-medium), top 0s linear var(--transition-speed-medium);
}
nav.site-nav-overlay .nav-container {
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 5rem;
	padding-right: calc(40px + var(--scrollbar-width));
	padding-bottom: 5rem;;
	padding-left: max(40px, 5vw);
	width: calc(100% + var(--scrollbar-width));
	height: 100%;
	overflow-y: scroll;
}

nav.site-nav-overlay a {
	display: inline-block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	line-height: 1;
}
nav.site-nav-overlay a:not(.nav-region):hover,
nav.site-nav-overlay a:not(.nav-region):focus {
	color: var(--color-text-highlight) !important;
}

nav.site-nav-overlay .nav-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	padding-top: 1rem;
	padding-right: 1.5rem;
}
nav.site-nav-overlay .nav-header a {
	position: relative;
	padding: 0.75rem;
	z-index: 10;
}
nav.site-nav-overlay .has-sub-nav {
	position: relative;
}
nav.site-nav a.sub-nav-toggle {
	cursor: pointer;
}
nav.site-nav-overlay .sub-nav {
	display: none;
	padding: 0.25rem 0 0.75rem 1rem;
}
nav.site-nav-overlay .has-sub-nav > .nav-region + .sub-nav {
	padding-left: 0;
}
nav.site-nav-overlay .sub-nav.pad-items-tight a {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

nav.site-nav-overlay a.nav-region {
	position: relative;
	padding-left: 20px;
	margin-left: -20px;
	font-size: 1.625em;
}
/* Circle before nav region */
nav.site-nav-overlay a.nav-region::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	left: 0;
	display: block;
	width: 10px;
	height: 10px;
	background: transparent;
	border: 1px solid #333;
	border-radius: 50%;
}
nav.site-nav-overlay a.nav-region:hover::before,
nav.site-nav-overlay a.nav-region:focus::before,
nav.site-nav-overlay .is-open > a.nav-region::before {
	background: #333;
}

nav.site-nav-overlay .nav-pages {
	margin-top: 4rem;
}

nav.site-nav-overlay .nav-footer {
	padding-top: 2.5rem;
}

body.has-overlay-nav {
	padding-right: var(--scrollbar-width);
	overflow: hidden;
}
body.has-overlay-nav nav.site-nav-overlay {
	top: 0; 
	opacity: 1;
	transform: translateY(0);
	/* Slow fade in, slow slide in */
	transition: opacity var(--transition-speed-slow) var(--transition-func), transform var(--transition-speed-slow) var(--transition-func);
}

@media (min-width: 768px) {
	nav.site-nav-overlay {
		font-size: 1.25rem;
	}
	nav.site-nav-overlay .nav-main {
		max-width: 75vw;
		z-index: 1;
	}
	nav.site-nav-overlay .nav-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding-right: 2.5rem;
		padding-bottom: 3.5rem;
	}
}
@media (min-width: 1200px) {
	nav.site-nav-overlay {
		font-size: 1.375rem;
	}
	nav.site-nav-overlay a.nav-region {
		margin-left: -28px;
		padding-left: 25px;
	}
}


/* Nav togglers */
a.nav-open {
	position: relative;
	width: 30px;
	height: 22px;
	cursor: pointer;
	outline: none !important;
	z-index: 100;
}
a.nav-open .bar {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--color-text);
	transition: transform var(--transition-speed-fast) var(--transition-func);
}
a.nav-open:hover .bar {
	background: var(--color-text-highlight);
}
a.nav-open .bar:nth-child(1) {
	top: 0%;
}
a.nav-open .bar:nth-child(2) {
	top: calc(50% - 1px);
}
a.nav-open .bar:nth-child(3) {
	top: calc(100% - 2px);
}
a.nav-open:hover .bar:nth-child(1),
a.nav-open:focus .bar:nth-child(1) {
	transform: translateY(-2px);
}
a.nav-open:hover .bar:nth-child(3),
a.nav-open:focus .bar:nth-child(3) {
	transform: translateY(2px);
}

.template-home a.nav-open {
	margin-bottom: 4rem;
	width: 40px;
	height: 30px;
}


/*
GENERAL CONTENT
======================================================
*/

main {
	margin: 0 auto;
	width: 100%;
}
main.is-narrow {
	max-width: 1280px;
}

body.template-not-home main {
	padding-top: 2rem;
}
@media (min-width: 992px) {
	body.template-not-home main {
		padding-top: 10rem;
	}
}

.model-name {
	text-transform: uppercase;
}

ul.measurements {
	text-transform: uppercase;
}
ul.measurements li:not(:last-child) {
	margin-bottom: 0.25rem;
}
ul.measurements label {
	margin-bottom: 0;
	font-size: inherit;
	letter-spacing: inherit;
}
ul.measurements span {
	font-weight: 600;
}




/*
HOME
======================================================
*/

/* Models home is dark full-screen, needs white content */
body.office-models.template-home {
  background: #000;
}
body.office-models.template-home header,
body.office-models.template-home main,
body.office-models.template-home footer {
  color: #fff;
}
body.office-models.template-home a.nav-open .bar {
  background-color: #fff;
}


.slider-home {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	overflow: hidden;
}
.slider-home .slide {
	width: 100vw;
	height: 100vh;
}

.template-home header .header-inner {
	padding-top: 50px !important;
	min-height: calc(100vh - 100px);
}



.home-regions {
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.home-region {
	z-index: 10;
}
.home-region a.nav-region-toggle {
	padding: 1rem;
	display: block;
	cursor: pointer;
}
.home-region a.nav-region-toggle span {
	position: relative;
}
.home-region a.nav-region-toggle span::before {
	content: '';
	display: inline-block;
	position: relative;
	margin-left: 0.625rem;
	margin-right: 0.625rem;
	width: 8px;
	height: 8px;
	vertical-align: calc(0.5em - 7px);
	background: transparent;
	border: 1px solid #fff;
	border-radius: 50%;
}
.home-region a.nav-region-toggle:hover span::before,
.home-region a.nav-region-toggle:focus span::before {
	background-color: #fff;
}

@media (min-width: 576px) {
	.home-regions {
		position: fixed;
		top: calc(50% - 50px);
		left: 8vw;
		width: 84vw;
		transform: translateY(-50%);
		font-size: 1.25rem;
	}
	.home-region.region-left {
		writing-mode: sideways-lr;
	}
	.home-region.region-right {
		writing-mode: sideways-rl;
	}
	.home-region a.nav-region-toggle span::before {
		margin-left: 0;
		margin-right: 0;
	}
	.home-region.region-left a.nav-region-toggle span::before {
		margin-top: 0.625em;
	}
	.home-region.region-right a.nav-region-toggle span::before {
		margin-bottom: 0.625em;
	}
}

@media (min-width: 992px) {
	.home-regions {
		font-size: 1.375rem;
	}
}

@media (min-width: 1200px) {
	.home-regions {
		font-size: 1.5rem;
	}
}

@media (min-width: 1600px) {
	.home-regions {
		font-size: 1.75rem;
	}
}


/*
DIVISION
======================================================
*/

.division-region-filters {
	margin-left: -0.75rem;
	margin-right: -0.75rem;
}
.division-region-filters a {
	cursor: pointer;
}
.division-region-filters a.active {
	color: #fff;
}

a.model {
	text-decoration: none;
}
a.model .headshot {
	position: relative;
	overflow: hidden;
}
a.model .headshot-img {
	height: 0;
	padding-top: 128%;
	background-color: #000;
	transform: scale3d(1,1,1);
	transform-origin: left 40%;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a.model:hover .headshot-img,
a.model:focus .headshot-img {
	transform: scale3d(1.1,1.1,1);
}
a.model .headshot .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a.model:hover .headshot .overlay,
a.model:focus .headshot .overlay {
	opacity: 1;
}
a.model ul.measurements {
	font-size: 0.9rem;
	transform: translateX(-50%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a.model:hover ul.measurements,
a.model:focus ul.measurements {
	transform: translateX(0);
}
a.model ul.measurements label {
	position: absolute;
	display: block;
	width: 75px;
}
a.model ul.measurements span {
	display: block;
	padding-left: 80px;
}
a.model .model-name {
	font-size: 1rem;
}

a.model .headshot-img {
	background-color: #f4f4f4;
}
a.model .headshot .overlay {
	background-color: rgba(255,255,255,0.6);
}


/*
MODEL
======================================================
*/

.model-gallery a.gallery-item {
	overflow: hidden;
	cursor: zoom-in;
}
.model-gallery .gallery-image {
	padding-top: 140%;
	height: 0;
}
.model-gallery .gallery-image.is-landscape {
	padding-top: 70%;
}
.model-gallery.gallery-thumbs .gallery-image {
	padding-top: 100% !important;
}
.model-gallery .gallery-image.is-cover {
	padding-top: 140% !important;
}
.model-gallery a.gallery-item {
	transform: scale3d(1,1,1);
	transform-origin: center 30%;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.model-gallery a.gallery-item:hover .gallery-image,
.model-gallery a.gallery-item:focus .gallery-image {
	transform: scale3d(1.08,1.08,1);
}

.model-info .model-name {
	font-size: 1.75rem;
	/* font-weight: 600; */
}
.model-info .measurements {
	font-size: 0.8rem;
}
.model-info .measurements li {
	margin: 0.25rem 0.5rem;
}

.model-info .instagram a {
	font-size: 1.2rem;
	text-decoration: none !important;
}
.model-info .instagram .followers {
	padding: 0.25em 0.75em;
	font-size: 0.8rem;
	text-transform: uppercase;
	border-radius: 1rem;
}

.model-nav ul {
  gap: 0.5rem;
}
.model-nav .link-gallery.active {
	opacity: 0.4;
	pointer-events: none;
}


/*
PACKAGE
======================================================
*/

.gallery-package .measurements {
	font-size: 0.8rem;
}
.gallery-package .measurements li {
	margin: 0.25rem 1rem 0.25rem 0;
}

.gallery-package .gallery-image:hover {
	cursor: zoom-in;
}
.gallery-package .gallery-image img {
	transform: scale3d(1,1,1);
	transform-origin: center 40%;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-package .gallery-image:hover img,
.gallery-package .gallery-image:focus img {
	transform: scale3d(1.08,1.08,1);
}


/*
SUBMISSION FORM
======================================================
*/

.submission-form .male,
.submission-form .female {
	display: none;
}

.submission-form .image-button.checked .needs-upload,
.submission-form .image-button:not(.checked) .has-upload {
	display: none;
}


.image-button {
	position: relative;   
}

.image-button input {
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
	opacity: 0;
}


/*
SEARCH / OVERLAYS
======================================================
*/

.site-veil {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg-alt);
	opacity: 0;
	z-index: 100;
	transform: translateX(-100%);
	transition: opacity 0.2s ease, transform 0s linear 0.3s;
}
.js--search-visible .site-veil {
	opacity: 0.8;
	transform: translateX(0);
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.overlay-search {
	position: fixed;
	top: 15px;
	right: 15px;
	left: auto;
	margin: 0 auto;
	width: 400px;
	max-width: 100%;
	z-index: 110;
	transform: translateY(-300%);
}
.js--search-visible .overlay-search {
	transform: translateY(0);
}
.overlay-search .search-close {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 1.25rem;
	cursor: pointer;
	z-index: 9999;
}
.overlay-search a.model-result {
	font-weight: normal;
	color: #444 !important;
	text-decoration: none !important;
}
.overlay-search a.model-result:hover,
.overlay-search a.model-result:focus {
	background-color: #eee;
}
.overlay-search .model-result .thumbnail {
	width: 50px;
	height: auto;
	min-height: 50px;
	background-color: #ddd;
}

.overlay-search button.submit {
	position: absolute;
	top: 0;
	right: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none !important;
}


.input-minimal {
	border-width: 0 0 1px 0;
	border-bottom-color: #ddd;
	border-radius: 0;
	background: transparent;
	outline: none !important;
}
.input-minimal::-ms-clear {
	display: none; /* Prevent IE's X icon showing up in input box */
}
.input-minimal.inverse {
	border-bottom-color: #888;
	color: #a6a5a4;
	caret-color: #a6a5a4;
}



/*
FOOTER
======================================================
*/




/*
UTILITY STYLES
======================================================
*/

.text-white      { color: #fff !important; }
.text-grey       { color: #888 !important; }
.text-black      { color: #000 !important; }

.bg-white        { background-color: #fff !important; }
.bg-grey-light    { background-color: #ddd !important; }
.bg-grey-dark    { background-color: #444 !important; }
.bg-black        { background-color: #000 !important; }

.x-small {
	font-size: 60%;
}

.va-push-down {
	vertical-align: -12%;
}

.bg-cover {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.bg-cover.bg-top {
	background-position: center top;
}

.container-fluid {
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1840px;
}
.sm-gutters {
	margin-left: -5px;
	margin-right: -5px;
}
.sm-gutters>.col, .sm-gutters>[class*=col-] {
	padding-right: 5px;
	padding-left: 5px;
}
.xs-gutters {
	margin-left: -2px;
	margin-right: -2px;
}
.xs-gutters>.col, .xs-gutters>[class*=col-] {
	padding-right: 2px;
	padding-left: 2px;
}
/* Gutter-matched margin */
.mb-gutter {
	margin-bottom: 30px;
}
.mb-sm-gutter {
	margin-bottom: 10px;
}
.mb-xs-gutter {
	margin-bottom: 4px;
}

#css-sizers {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1000;
	pointer-events: none;
}


/*
RESPONSIVE / MEDIA QUERIES
======================================================
*/

/* Mobile nav overrides */
@media all and (max-width: 1199px) {


}

/* SM: Small devices (landscape phones, 576px and up) */
@media all and (min-width: 576px) {
	header .brand {
		font-size: 1.75rem;
	}
}

/* MD: Medium devices (tablets, 768px and up) */
@media all and (min-width: 768px) {
	.model-info {
		padding-top: 25%;
		background-color: var(--color-bg-alt);
	}
	.model-info .measurements {
		font-size: 0.9rem;
	}
	.model-info .measurements li {
		margin: 0.25rem 0;
	}
	.model-info .measurements label {
		display: inline-block;
		width: 80px;
	}
	.model-info .model-buttons {
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

/* LG: Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.model-info .model-name {
		font-size: 2rem;
	}
	.model-info .measurements,
	.gallery-package .measurements {
		font-size: 1rem;
	}
	.model-info .model-buttons {
		top: 0;
		bottom: auto;
	}
}

/* XL: Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	header .brand {
		font-size: 2.25rem;
	}

	body.template-home header .brand {
		margin-bottom: 2rem;
		transform: scale(1.75);
	}
}

/* XXL: Ultra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {

}

/* XXXL: Way large devices (large desktops / hi-res, 2000px and up) */
@media (min-width: 2000px) {

}