/*
* NOTES
* - If you see a max width accompanying a flex property, it's because IE11 is confused by padding on flexed items...
*/


/*------------------------------------*\
    #RESET
\*------------------------------------*/

@import 'normalize.css';




/*------------------------------------*\
    #FONTS
\*------------------------------------*/

@import '../fonts/inter-ui.css';
@import '../fonts/sofiapro.css';




/*------------------------------------*\
    #VARIABLES AND NOTES
\*------------------------------------*/

/*
 * Colours with comments to make bulk change easier. CSS variables still not quite up to the challenge.
 */

.variables {

	color: #585858; /* Grey Text */
	color: #1d52d6; /* Blue Main */
	color: #10cfc9; /* Blue Teal */
	color: #0d397f; /* Blue Dark */
	color: #285fb7; /* Blue Dusk */
	color: #0ab3e8; /* Blue Teal Bright */
	color: #02ccd1; /* Blue Teal Text */
	color: #f2f2f2; /* Grey Pale */
	color: #e5e5e5; /* Grey Light */
}

/*
 * Common Breakpoints - always adjust for real scenarios.
 *
 * 320px/20em
 * 480px/30em
 * 768px/48em
 * 1024px/64em
 *
 */



/*------------------------------------*\
    #ACCESSIBILITY
\*------------------------------------*/

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

	.screen-reader-text:focus {
		background-color: #1d52d6; /* Blue Main */
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		clip-path: none;
		color: #fff;
		display: block;
		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. */
	}

	/* Responsive team pictures */
	.list-advisors__img {
		object-fit: cover;
	}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}






/*------------------------------------*\
    #HELPERS
\*------------------------------------*/

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

.clearfix:after {
	clear: both;
}

.list--nude,
.list--nude li,
form ol,
form ol li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*------------------------------------*\
    #ELEMENTS
\*------------------------------------*/

* {
	box-sizing: border-box;
}

body {
	background-color: #0d397f; /* Blue Dark */
	color: #585858; /* Grey Text */
	font-family: 'Inter UI', Verdana, sans-serif;
	font-size: 1em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
}

.inner {
	margin: 0 auto;
	max-width: 1340px;
	padding: 0 1.5em;
}

/*
 * Typography
 */

p {
	margin: 24px 0 0;
	margin: 1.5rem 0 0;
}

.small {
	font-size: 0.75rem;
	opacity: 0.7;
}

h1, h2, h3 {
	color: #0d397f; /* Blue Dark */
	font-family: 'SofiaProMedium', sans-serif;
	font-weight: 600;
	margin: 0;
}

h1, .heading--largest {
	font-size: 28px;
	font-size: 1.75rem;
	line-height: 1.2;
	text-align: center;
}

h2, .heading--large {
	font-size: 21px;
	font-size: 1.3125rem;
}

h3, .heading--medium {
	font-size: 18px;
	font-size: 1.125rem;
}

h4, .heading--regular {
	color: #585858; /* Grey Text */
	font-family: 'Inter UI', Verdana, sans-serif;
	font-size: 1rem;
	font-weight: 600;
}

.heading--caps {
	font-family: 'SofiaProRegular', sans-serif;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media screen and (min-width: 48em) {

	h1 {
		font-size: 60px;
		font-size: 3.75rem;
	}

	h2, .heading--large {
		font-size: 2.75rem;
	}

	h3, .heading--medium {
		font-size: 1.5rem;
	}

}

/*
 * Links
 */

a {
	color: #02ccd1; /* Blue Teal Text */
}

a:visited {

}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

/*
 * Images and Media
 */

img {
	display: block;
	height: auto;
	max-width: 100%;
}

/*
 * Forms and Buttons
 */

form ol li {
	margin-bottom: 0.75em;
}

label {
	color: #9e9e9e;
	display: block;
}

input,
textarea,
select {
	border: 3px solid #f2f2f2; /* Grey Pale */
	border-radius: 0;
	border-width: 0 0 3px;
	padding: 0.75rem;
	width: 100%;
}

input:focus,
textarea:focus,
select:focus {
	border-bottom-color: #0ab3e8;
}

select {
	-webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
	background-image: url(../images/ico-dd-arrow.svg);
	background-repeat: no-repeat;
	background-size: 12px, auto;
	background-position: 90% 1.5em;
padding-right: 2em;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
	border-bottom-color: red;
	border-width: 0 0 3px;
	box-shadow: none;
}

input[type="submit"],
input[type="button"],
button,
.btn {
	background-color: #0d397f; /* Blue Dark */
	border: none;
	border-radius: 0;
	color: #fff;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	padding: 12px 20px;
	padding: 0.75rem 1.25rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
button:hover,
button:focus,
button:active,
.btn:hover,
.btn:focus,
.btn:active {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

input[type="checkbox"],
input[type="radio"]{
	width: auto;
}

.btn-bright,
input[type="submit"].btn-bright,
input[type="button"].btn-bright,
button.btn-bright {
	background-color: #02ccd1; /* Blue Teal Text */
}

.btn-white {
	background-color: #fff;
	color: #0d397f; /* Blue Dark */
}

/*
 * Lists
 */

.list-ico-text li {
	overflow: hidden;
	padding: 0.75em;
	text-align: center;
}

.list-ico-text img {
	margin: 0 auto;
	width: 96px;
}

@media screen and (min-width: 48em) {

	.list-ico-text img {
		float: left;
		margin-right: 0.75em;
	}

	.list-ico-text p {
		margin-top: 0;
		padding-left: 108px;
	}

	.list-ico-text {
		display: flex;
		flex-wrap: wrap;
	}

	.list-ico-text li {
		flex: 1 1 50%;
		max-width: 50%;
		text-align: left;
	}

}

/*
 * Table
 */

table {
	border-collapse: collapse;
	margin: 1.5rem 0;
	width: 100%;
}

.table__wrap {
    overflow-x: auto;
	white-space: nowrap;
}

th {
	color: #a0b2ba;
	font-size: 0.875em;
	text-align: left;
}

th, td {
	background-color: #f0f7f7;
	border-bottom: 2px solid #e6eef1;
	padding: 0.75rem;
}

/*
 * Other
 */

hr {
	background-color: #1d52d6;
	border: none;
	height: 2px;
}

/*------------------------------------*\
    #HEADER
\*------------------------------------*/

.site-header {
	background-color: #1d52d6; /* Blue Main */
	min-height: 80px;
	padding: 24px 0;
	padding: 1.5rem 0;
}

.site-branding {
	text-align: center;
}

.site-branding a {
	display: block;
	margin: 0 auto;
	color: #fff;
	text-decoration: none;

}

.site-branding img {
	display: block;
	margin: 0 auto;
	width: 130px;
}

.homepage .site-branding a {
	display: none;

}

@media screen and (min-width: 48em) {

	.site-branding {
		padding: 0.75em;
	}

	.homepage .site-branding a {
		display: block;
	}

	.site-header {
		padding: 0;
	}

}

@media screen and (min-width: 64em) {

	.site-branding, .nav-secondary {
		width: 14.17910447761194%;
	}

	.nav-secondary {
		width: 17.117117%;
	}

	.site-header .inner {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.homepage .site-branding a {
		opacity: 0;
		transition: all 1s;
	}

	.homepage .headroom--not-top .site-branding a {
		opacity: 1;
		transition: all 1s;
	}

}

.headroom {
	position: fixed;
    will-change: transform;
    transition: transform 200ms linear;
	width: 100%;
	z-index: 100;
}
.headroom--pinned {

    transform: translateY(0%);

}
.headroom--unpinned {

    transform: translateY(-100%);
}

/*.headroom--top {
	position: static;
}*/

.header--has-toggled {
	background-color: #0d397f;
	height: 100%;
	overflow: scroll;
}

.header--has-toggled .site-branding {
	display: none;
}



/*------------------------------------*\
    #NAVIGATION
\*------------------------------------*/

.nav-primary > div {
	display: none;
	padding-bottom: 3rem;
}

.menu-toggle,
.nav-primary.toggled div {
	display: block;
}

.menu-toggle {
	color: #fff;
	left: 0.75em;
	position: absolute;
	top: 0.75em;
	z-index: 100;
}

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

 .hamburger:hover {
    opacity: 0.7;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
	left: 4px;
  top: 50%;
  margin-top: -2px; }

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #fff;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
	left: -4px;
    top: -10px;
	  width: 40px;
}

  .hamburger-inner::after {
    bottom: -10px;
width: 30px;}

.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {

    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
	border-radius: 3px;
	left: auto;
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
width: 40px;
}

.hamburger--collapse.is-active .hamburger-inner::after {
	border-radius: 3px;
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
width: 40px;
}

.hamburger--collapse.is-active .hamburger-inner::before {
	border-radius: 3px;
	left: auto;
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media screen and (min-width: 48em) {
	.menu-toggle {
		display: none;
	}
	.nav-primary > div {
		display: block;
	}
}

.nav--list {

}

.nav--list ul,
.nav--list li {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.nav--list a {
	display: block;
	text-decoration: none;
	transition: color 1s;
}
.nav-primary a,
.nav-secondary a {
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 0.375rem;
	position: relative;
	text-transform: uppercase;
}

.nav-primary ul li ul a {
	color: #285fb7;
}

.nav-primary a {
	color: #fff;
}

.nav-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-primary .is-active > a,
.nav-secondary .is-active > a {
	color: #02ccd1;
}

.nav-secondary a.has--highlight {
	color: #fff;
}

li.nav__logo {
	margin-top: 2.25rem;
	padding-bottom: 0.75rem;
}

.nav__logo img {
	margin: 0 auto;
	max-width: 45px;
}

@media screen and (min-width: 48em) {

	.nav--list li.nav__logo {
		display: none;
	}

	.nav-primary a,
	.nav-secondary a {
		color: #10cfc9; /* Blue Teal */
	}

	.nav-secondary a.has--highlight {
		color: #0d397f;
	}

	.nav--list a:hover,
	.nav--list a:focus,
	.nav--list a:active,
	.nav-primary .is-active > a,
	.nav-secondary .is-active > a {
		color: #fff;
		transition: color 0.2s;
	}

	.nav-primary {
		width: 100%;
	}

	.nav-primary > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 0;
	}

	.nav--list > div > ul > li,
	.submenu li {
		display: inline-block;
		/*position: relative;*/
	}

	.nav--list > div > ul > li > a {
		padding: 9px;
		padding: 0.5625rem;
	}

	.submenu {
		background-color: #0d397f; /* Blue Dark */
		display: none;
		left: 0;
		position: absolute;
		/*text-align: left;*/
		top: 100%;
		width: 100%;
	}

	.nav--list > div > ul > li:hover .submenu {
		display: block;
	}

	.submenu li a {
		padding: 0.75rem 0.375rem;
		text-align: left;
	}

	#visible-submenu {
		display: block;
	}


	/* This should be temporary - however you generate the navs should somehow trigger these styles :) */

	.voice-products .site-header,
	.product-vocalavatar .site-header,
	.product-vocalavatarapi .site-header,
	.product-customvoices .site-header {
		padding-bottom: 2.75em;
	}

	.voice-products .submenu,
	.product-vocalavatar .submenu,
	.product-vocalavatarapi .submenu,
	.product-customvoices .submenu{
		bottom: 0;
		display: block;
		top: auto;
	}

}

@media screen and (min-width: 64em) {

	.nav-primary {

		width: 82.835820895522388%;
	}

	.nav-menu {
		flex: 1 1 auto;
	}

	.nav-primary > div {
		justify-content: space-around;
	}

	.nav--list > div > ul > li > a {
		padding: 48px 12px;
		padding: 3rem 0.75rem;
	}

	.nav-secondary a.has--highlight {
		background-color: #0d397f;
		color: #fff;
		padding: 0.75rem 1.25rem;
		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}

	.nav-secondary a.has--highlight:hover,
	.nav-secondary a.has--highlight:active,
	.nav-secondary a.has--highlight:focus {
		/*background-color: #02ccd1;*/
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}

	.nav-primary .is-active > a::after {
		background-color: #0d397f;
		bottom: 1.5rem;
		content: '';
		height: 0.375rem;
		left: 50%;
		position: absolute;
		transform: translate(-50%,0);
		width: 0.375rem;
	}

	.nav-primary ul ul .is-active > a::after {
		background-color: #1d52d6;
		bottom: 0.375rem;
	}
	.nav-primary ul ul a {
		padding-bottom: 1.125rem;
		padding-top: 1.125rem;
	}

}


/*------------------------------------*\
    #CONTENT
\*------------------------------------*/

.page-section {
	padding-bottom: 1.5em;
}

@media screen and (min-width: 48em) {

	.page-section {
	padding-bottom: 4.5em;
}

}

.page-section--shaded {
	background-color: #f2f2f2; /* Grey Pale */
}

.page-section--white {
	background-color: #fff;
}

.page-section--shaded-split {
	position: relative;
	z-index: 2;
}

.page-section--shaded-split::before {
	background-color: #fff;
	content: "";
	height: 15em;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: -1;
}

.page-section__header {
	padding: 24px 0;
	padding: 1.5rem 0;
	text-align: center;
}

.page-section__header p {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

.page-section__header img {
	margin: 0 auto;
	width: 270px;
}

@media screen and (min-width: 48em) {

	.page-section__header {
		padding: 72px 0 24px;
		padding: 4.5rem 0 1.5rem;
	}

}

.page-section__footer {
	padding-top: 3em;
	text-align: center;
}


.site-content {
	background-color: #fff;
}

.content--basic {
	background-image: url(../images/bg-waves.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-bottom: 84px;
	padding-bottom: 5.25rem;
}

.content--basic .inner {
	max-width: 880px;
}

.content--basic h1 {
	margin-bottom: 60px;
	margin-bottom: 3.75rem;
}

.content--basic h1 + p:first-of-type {
	font-size: 1.3125em;
	line-height: 1.333333333333333;
}

@media screen and (min-width: 48em) {

	.content--basic {
		padding-bottom: 230px;
		padding-bottom: 14.375rem;
	}

	.content--basic h1 {
		margin-bottom: 84px;
		margin-bottom: 5.25rem;
	}

}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	.content--basic {
		background-image: url(../images/bg-waves@2x.png);
	}

}



/*------------------------------------*\
    #FOOTER
\*------------------------------------*/

.site-footer {
	background-color: #0d397f; /* Blue Dark */
	color: #fff;
	padding: 24px 0;
	padding: 1.5rem 0;
	text-align: center;
}

.site-footer .site-logo img {
	margin: 0 auto 1.5em;
	width: 50px;
}

.site-footer .link--list:nth-child(3),
.site-footer .link--list:nth-child(4) {
	float: left;
	padding-bottom: 1.5em;
	padding-top: 1.5em;
	width: 50%;
}

@media screen and (min-width: 48em) {

	.site-footer {
		padding: 48px 0;
		padding: 3rem 0;
		text-align: left;
	}

	.site-footer .inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.site-footer .legal {
		width: 100%;
	}

	.site-footer .link--list:nth-child(3),
	.site-footer .link--list:nth-child(4) {
		float: none;
		padding: 0;
		width: auto;
	}

}

@media screen and (min-width: 64em) {

	.site-footer .inner {
		justify-content: flex-start;
	}

	.site-footer .site-logo {
		width: 14.17910447761194%;
	}

	.site-footer .link--list:nth-child(2) {
		width: 20.149253731343284%;
	}

	.site-footer .link--list:nth-child(3),
	.site-footer .link--list:nth-child(4) {
		width: 14.17910447761194%;
	}

	.site-footer .link--list:nth-child(5) {
		margin-left: auto;
	}

	.site-footer .inner .legal {
		padding-left: 14.17910447761194%;
		padding-top: 3em;
		width: 100%;
	}

}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: #fff;
}

.link--list ul,
.link--list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.link--list a {
	color: #fff;
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
}

.link--list ul ul a {
	color: #285fb7; /* Blue Dusk */
}

.link--list a:hover,
.link--list a:focus,
.link--list a:active {
	color: #10cfc9;
}

.social-icons a {
	color: #285fb7; /* Blue Dusk */
}

.social-icons li {
	display: inline-block;
	margin: 0 0.375rem;
}

.social-icons a {
	font-size: 24px;
	font-size: 1.5rem;
}

.social-icons a:hover,
.social-icons a:focus,
.social-icons a:active {
	color: #10cfc9;
}

.site-footer .legal {
	color: #285fb7; /* Blue Dusk */
	font-size: 0.75em;
	font-weight: 700;
	padding-top: 24px;
	padding-top: 1.5rem;
}

.site-footer .legal .sep {
	display: inline-block;
	margin: 0 0.75rem;
}



.site-footer .legal a {
	display: inline-block;
	color: #285fb7; /* Blue Dusk */
	letter-spacing: 0.2em;
	margin-bottom: 0.375rem;
	text-decoration: none;
	text-transform: uppercase;
}

.site-footer .legal a:hover,
.site-footer .legal a:active,
.site-footer .legal a:focus {
	color: #10cfc9;
}

@media screen and (min-width: 64em) {

	.link--list:not(.social-icons) a {
		margin-bottom: 0.375rem;
	}

}

@media screen and (max-width: 30em) {

	.site-footer .legal .sep {
		display: none;
	}

}



/*------------------------------------*\
    #HERO
\*------------------------------------*/

.hero {
	text-align: center;
}

.hero img {
	margin: 0 auto;
}

.page-section__header--over-hero {
	background-color: #fff;
	margin: 0 auto;

	max-width: 768px;
	padding-top: 1.5em;
	position: relative;
}

@media screen and (min-width: 64em) {

	.page-section__header--over-hero {
		margin-top: -3em;
	}

}


/*------------------------------------*\
    #CTA PAGE
\*------------------------------------*/

.cta-page {
	background-color: #0ab3e8; /* Blue Teal Bright */
	color: #fff;
	padding: 1.5em 0;
	text-align: center;
}

.cta-page h2 {
	color: #fff;
	font-family: 'SofiaProMedium', sans-serif;
	font-size: 1.375em;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	margin-bottom: 6px;
	margin-bottom: 0.375rem;
	text-transform: uppercase;
}

.cta-page p {
	margin: 0;
	margin-bottom: 12px;
	margin-bottom: 0.75rem;
}

.cta-page .btn {
	background-color: #fff;
	color: #0ab3e8; /* Blue Teal Bright */
}

@media screen and (min-width: 48em) {

	.cta-page {
		padding: 3em 0;
		text-align: left;
	}

	.cta-page .inner {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		max-width: 960px;
	}

	.cta-page p {
		flex: 1 1 50%;
		padding: 0 1.5em;
		max-width: 50%;
	}

	.cta-page h2,
	.cta-page p {
		margin: 0;
	}

}

@media screen and (min-width: 64em) {

	.cta-page p {
		flex: 1 1 59%;
		max-width: 59%;
	}

}






/*------------------------------------*\
    #CTA NOTIFY
\*------------------------------------*/

.cta-notify {
	background-color: #fafafa;
	color: #585858; /* Grey Text */
	padding-left: 0.75em;
	padding-right: 0.75em;
	padding-top: 1.5em;
	text-align: center;
}

.cta-notify .inner {
	background-color: #e5e5e5; /* Grey Light */
	padding: 1.5em;
}

.cta-notify h2 {
	color: #585858; /* Grey Text */
	font-size: 1.375em;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	margin-bottom: 6px;
	margin-bottom: 0.375rem;
}

.cta-notify p {
	margin-bottom: 0.75em;
	margin-top: 0.75em;
}

.cta-notify img {
	margin: 0 auto 0.75em;
	width: 83px;
}

.cta-notify .btn {
	background-color: #fff;
	color: #585858; /* Grey Text */
}

@media screen and (min-width: 48em) {

	.cta-notify {

		text-align: left;
	}

	.cta-notify .inner {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		max-width: 960px;
		padding-left: 3em;
		padding-right: 3em;
	}

	.cta-notify .inner div {
		flex: 1 1 60%;
		padding: 0 0.75em;
		max-width: 60%;
	}

	.cta-notify h2 {
		margin: 0;
	}

	.cta-notify p {
		margin-bottom: 0;
	}

	.cta-notify img {
		margin: auto;
	}

}

@media screen and (min-width: 64em) {

	.cta-notify .inner div {
		flex: 1 1 70%;
		max-width: 70%;
	}

}




/*------------------------------------*\
    #ITEM GROUPINGS
\*------------------------------------*/

.s-voice-samples .page-section__content,
.s-our-products .page-section__content,
.s-our-products .page-section__content .inner,
.va-sample-list .page-section__content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*
 * Voice Samples
 */

.s-voice-samples .item,
.va-sample-list .item {
	flex: 1 1 100%;
	max-width: 100%;
	padding: 1.5em;
	text-align: center;
}

@media screen and (min-width: 30em) {



}

@media screen and (min-width: 48em) {

	.s-voice-samples .item {
		flex: 1 1 50%;
		max-width: 50%;
	}

	.va-sample-list .item {
		flex: 1 1 45%;
		max-width: 45%;
	}

}

@media screen and (min-width: 64em) {

	.s-voice-samples .item {
		flex: 1 1 20%;
		max-width: 20%;
	}

	.va-sample-list .item {
		flex: 1 1 30%;
		max-width: 30%;
	}

	.bv-sample-list .item {
		flex-basis: calc(25% - 2.25em);
		flex-grow: 1;
		flex-shrink: 1;
		max-width: calc(25% - 2.25em);
	}

}

.s-voice-samples .item:hover,
.s-voice-samples .is-playing {
	background-color: #f2f2f2; /* Grey Pale */
}

.s-voice-samples h3,
.va-sample-list h3{
	padding-top: 0.75rem;
}

.s-voice-samples img,
.va-sample-list img {
	margin: 0 auto 1.5em;
	width: 90px;
}

.s-voice-samples p,
.va-sample-list p {
	margin-top: 0.75rem;
}

.va-sample-list p {
	font-size: 14px;
	font-size: 0.875rem;
}

/*
 * Sample List Specific
 */

@media screen and (max-width: 30em) {

	.va-sample-list .page-section__content {
		margin: 0 -0.75em;
	}

}

.va-sample-list .item {
	background-color: #fff;
	color: #0d397f;
	box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.09);
	margin: 0.75em;
	padding: 1.5em;
}

@media screen and (min-width: 64em) {

	.va-sample-list .item {
		padding: 3em;
	}

	.bv-sample-list .item {
		margin-left: 1.125em;
		margin-right: 1.125em;
		padding-left: 0.75em;
		padding-right: 0.75em;
	}

}

/*
 * Product List
 */

.s-our-products-page {
	background-color: #fafafa;
}

.s-our-products-page .page-section__header {
	background-color: #fff;
	position: relative;
}

.s-our-products-page .page-section__header .inner {
	position: relative;
	z-index: 2;
}

.s-our-products-page .page-section__header::before {
	background-color: #fff;
	background-image: url(../images/bg-soundwave-grey.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
	border-bottom: 1.5em solid #fff;
	bottom: -8em;
	content: '';
	height: 366px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.s-our-products .page-section__content {
	align-items: center;

}



.s-our-products .item {
	background-color: #1d52d6; /* Blue Main */
	color: #fff;

	padding: 1.5em;
	position: relative;
	text-align: center;
	z-index: 3;
}

.login .s-our-products .item {
	transform: scale(1.1);
	margin: 25px;
}

@media screen and (min-width: 48em) {

	.s-our-products .item {
		flex: 1 1 33.333333333333333%;
	max-width: 33.333333333333333%;
	}

}

.s-our-products h3 {
	color: #fff;
}

.s-our-products img {
	margin: 0 auto 1.5em;

}

.s-our-products .btn {
	background-color: #fff;
	color: #1d52d6; /* Blue Main */
	margin-top: 1.5rem;
}

.s-our-products .item img {
	width: 150px;
}

.s-our-products .item:nth-child(1) {
	background-color: #0ab3e8; /* Blue Teal Bright */
}

.s-our-products .item:nth-child(1) .btn {
	color: #0ab3e8; /* Blue Teal Bright */
}

.s-our-products .item:nth-child(3) {
	background-color: #0d397f; /* Blue Dark */
}

.s-our-products .item:nth-child(3) .btn {
	color: #0d397f; /* Blue Dark */
}

@media screen and (min-width: 83.75em) {

	.s-our-products .page-section__content {
		padding-left: 3em;
		padding-right: 3em;
	}

}


@media screen and (max-width: 48em) {

	.s-our-products {
		padding-bottom: 0;
	}

	.s-our-products .page-section__content .inner {
	padding: 0;
}

}

@media screen and (min-width: 48em) {

	.s-our-products .page-section__content {
		margin: 0;
		padding-bottom: 3em;
		padding-top: 3em;
	}

	.s-our-products .item {
		padding: 3em;
	}

}

@media screen and (min-width: 64em) {

	.index .s-our-products .item:nth-child(2),
	.products .s-our-products .item:nth-child(2) {
		box-shadow: 0px 0px 76px 0px rgba(11, 44, 126, 0.53);
		transform: scale(1.1);
		z-index: 6;
	}

}






/*------------------------------------*\
    #ACCREDITATIONS LOGO LISTS
\*------------------------------------*/

.list-logos {
	text-align: center;
}

.list-logos li {
	display: inline-block;
	vertical-align: middle;
	margin: 0.475em;
}

.list-logos img {
	width: 150px;
}

/*------------------------------------*\
    #ETHICS
\*------------------------------------*/

.icon-lg-ethics {
	padding-top: 72px;
	width: 161px;
}






/*------------------------------------*\
    #VOCAL AVATAR
\*------------------------------------*/

.s-vocalavatar {
	background-color: #1d52d6; /* Blue Main */
	color: #fff;
}

.s-vocalavatar .page-section__header h1 {
	color: #fff;
}

.s-vocalavatar .page-section__header .btn {
	background-color: #fff;
	color: #1d52d6; /* Blue Main */
	margin-top: 1.5rem;
}

.s-vocalavatar .va-sample-list h2 {
	color: #fff;
	margin: 0 0 3rem 0;
	text-align: center;
}

.s-vocalavatar .va-sample-list {
	margin-bottom: -220px;
	padding-top: 3em;
	position: relative;
	z-index: 1;
}







/*------------------------------------*\
    #BRAND VOICES
\*------------------------------------*/

.s-customvoices-intro {
	background-color: #0ab3e8; /* Blue Teal Bright */;
	color: #fff;
	padding-bottom: 220px;
}

.s-customvoices-intro .page-section__header {
	padding-bottom: 3em;
}

.bv-sample-list {
	margin-top: -156px;
	margin-bottom: -156px;
	padding-bottom: 0;
}

.s-customvoices-intro .page-section__content > p {
	margin-left: auto;
	margin-right: auto;
	max-width: 480px;
	text-align: center;
}

.s-customvoices-intro h1,
.s-customvoices-intro h2 {
	color: #fff;
}

.s-customvoices-intro h2 {
	text-align: center;
}

.s-customvoices-intro .list-ico-text {
	padding: 1.5em 0 3em;
}

.bv-sample-list .audio-player {
	margin-top: 0.75em;
	width: 100%;
}

.bv-sample-list h3 {
	padding-top: 0;
}

@media screen and (min-width: 83.75em) {

	.s-customvoices-intro .list-ico-text {
		padding-left: 15%;
		padding-right: 15%;
	}

}

/*
 * List Steps
 */

.list--steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.list--steps li {
	padding: 0.75em;
	position: relative;
}

.list--steps h3 {
	color: #0d397f;
}

.list--steps p {
	font-size: 14px;
	font-size: 0.875rem;
}

.list--steps img {
	margin: 0 auto;
	width: 60px;
}

.list--steps span {
	background-color: #0ab3e8; /* Blue Teal Bright */
	border-radius: 50%;
	color: #fff;
	display: block;
	font-family: 'SofiaProMedium', sans-serif;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 3rem;
	margin: 0.75rem auto 1.875rem;
	position: relative;
	text-align: center;
	width: 3rem;
	z-index: 2;
}

.list--steps.dark span {
	background-color: #0d397f; /* Blue Dark */
}

@media screen and (min-width: 48em) {

	.list--steps li {
		flex: 1 0 33.333333333333333%;
		max-width: 33.333333333333333%;
	}

}

@media screen and (min-width: 64em) {

	.list--steps li::after {
		background-color: #0AB3E8;
		content: '';
		height: 3px;
		left: 50%;
		position: absolute;
		top: 6.625em;
		width: 100%;
		z-index: 1;
	}

	.list--steps li:last-child::after {
		display: none;
	}

	.list--steps li {
		flex: 1 0 20%;
		max-width: 20%;
		padding-left: 1.5em;
		padding-right: 1.5em;
		text-align: left;
	}

}



/*------------------------------------*\
    #VOCAL AVATAR API
\*------------------------------------*/

.s-vocalavatarapi {
	background-color: #0d397f; /* Blue Dark */
}

.s-vocalavatarapi {
	padding-bottom: 0;
}

.s-howworks {
	background-color: white;
	padding-top: 190px;
	min-height: 300px;
}


/*------------------------------------*\
    #WORK
\*------------------------------------*/

.work .site-content {
	overflow: hidden;
}

.casestudies {
	padding-top: 1.5em;
}

.casestudies .item {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 3em;

}

.casestudy__detail {
	flex: 0 1 514px;
	margin-bottom: 1.5em;
}

.casestudy__image {
	background-color: #f2f2f2; /* Grey Pale */
	position: relative;
	width: 420px;
}

.casestudy__category {
	background-color: #1d52d6; /* Blue Main */
	color: #fff;
	left: 0;
	padding: 0.75em;
	position: absolute;
	top: 0;
	width: 230px;
}

.casestudy__category img {
	width: 92px;
}

.cat--brand-voices {
	background-color: #0ab3e8;
}

@media screen and (min-width: 48em) {

	.casestudies .item {
		margin-bottom: 0;
		padding: 1.5em;
	}

	.casestudy__detail {
		padding: 1.5em 3em 1.5em 1.5em;
	}

	.casestudy__image::before {
		background-color: #f2f2f2; /* Grey Pale */
		content: "";
		height: 100%;
		position: absolute;
		right: -100vw;
		width: 100vw;
	}

	.casestudy__category {
		left: auto;
		right: -3em;
		top: -3em;
	}

	.casestudies .item:nth-child(2n-1) .casestudy__image {
		order: 1;
	}

	.casestudies .item:nth-child(2n-1) .casestudy__image::before {
		left: -100vw;
		right: auto;
	}

	.casestudies .item:nth-child(2n-1) .casestudy__category {
		left: -3em;
		right: auto;
	}

	.casestudies .item:nth-child(2n-1) .casestudy__detail {
		order: 2;
		padding-left: 3em;
		padding-right: 1.5em;
	}

}







/*------------------------------------*\
    #FAQs
\*------------------------------------*/

/*
 * Question and Answer List
 */

.list-questions {
	margin-bottom: 3em;
}

.list-questions li {
	font-family: 'SofiaProMedium', sans-serif;
	font-weight: 600;
	margin-top: 0.75em;
}

@media screen and (min-width: 48em) {

	.faqs .page-section__header {
		padding-bottom: 6em;
	}

}

.page-note {
	background-color: #f2f2f2; /* Grey Pale */
	padding: 1.5em;
}

.page-note p {
	font-size: 14px;
	font-size: 0.875rem;
}

.list-answers {
	padding-top: 3em;
}

.list-answers h3 {
	margin-top: 1.5rem;
}

.list-answers h3 + p {
	margin-top: 0.75rem;
}

@media screen and (min-width: 48em) {

	.list-questions__container,
	.list-answers__container {
		float: left;
		padding-right: 1.5em;
		width: 66.666666666666667%;
	}

	.list-questions__note {
		float: right;
		width: 33.333333333333333%;
	}

}

@media screen and (min-width: 64em) {

	.list-questions__container,
	.list-answers__container {
		padding-left: 230px;
		width: 75%;
	}

	.list-questions__note {
		width: 25%;
	}

	.page-note {
		padding: 3em;
	}

}







/*------------------------------------*\
    #TEAM
\*------------------------------------*/

.team-list .item {
	background-color: #f2f2f2; /* Grey Pale */
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.5em;
}



.team-list__content {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	order: 2;
	padding: 1.5em;
}

.team-list__image {
	order: 1;
}

.team-list__image img {
	width: 100%;
}

@media screen and (min-width: 30em) {

	.team-list__content,
.team-list__image {
	flex: 1 1 50%;
	max-width: 50%;
}

}

@media screen and (min-width: 48em) {

	.team-list {
		display: flex;
		flex-wrap: wrap;
		margin-left: -0.75em;
		margin-right: -0.75em;
	}

	.team-list .item {
		flex-basis: calc(33.333333333333333% - 1.5em);
		flex-grow: 1;
		flex-shrink: 1;
		margin-left: 0.75em;
		margin-right: 0.75em;
	}

	.team-list__content {
		padding-bottom: 3em;
	}

	.team-list__content,
.team-list__image {
	flex: 1 1 100%;
	max-width: 100%;
}

}

@media screen and (min-width: 64em) {

	.team-list .item {
		flex-basis: calc(50% - 1.5em);
	}

	.team-list__content,
.team-list__image {
	flex: 1 1 50%;
	max-width: 50%;
}

	@supports (display: grid) {

		  .team-list {
			  display: grid;
			  grid-template-columns: 25% 25% 25% 25%;
			  grid-auto-flow: row;
		  }

		.team-list .item:nth-child(1),
		.team-list .item:nth-child(3) {
			grid-column: 1 / 4;

		 }

		.team-list .item:nth-child(2) {

			grid-column: 4 / 5;
			grid-row: 1 / 3;
		}

		.team-list .item:nth-child(2) .team-list__content,
		.team-list .item:nth-child(2) .team-list__image {
			flex: 1 1 100%;
		}

		.team-list .item:nth-child(1) .team-list__content,
		.team-list .item:nth-child(3) .team-list__content {
			flex: 1 1 67.082035306334372%;
		}

		.team-list .item:nth-child(1) .team-list__image,
		.team-list .item:nth-child(3) .team-list__image {
			flex: 1 1 32.917964693665628%;
		}

		.team-list .item:nth-child(n+4) {
			grid-area: auto / span 2;
		}

		.team-list__content,
		.team-list__image {

			max-width: none;
		}

	}
}


.list-advisors .item {
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.5em;
}

.list-advisors__content {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	order: 2;
	padding: 1.5em;
}

.list-advisors__image {
	order: 1;
}

.list-advisors__image img {
	width: 100%;
}

@media screen and (min-width: 30em) {

.list-advisors .item {
	flex-flow: column nowrap;
	max-width: 50%;
}

}

@media screen and (min-width: 48em) {

.list-advisors .item {
	max-width: 33%;
}

}







/*------------------------------------*\
    #JOBS
\*------------------------------------*/

.image-strip {
	padding-bottom: 1.5em;
	padding-top: 1.5em;
	position: relative;
	text-align: center;
	z-index: 2;
}

.image-strip img {
	display: inline-block;

}

.image-strip.thirds img {
	margin: 0 2%;
	max-width: 265px;
	/*max-width: calc(33.333333333333333% - 4%);*/
}

.image-strip::before {
	background-color: #fff;
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.list-jobs {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1.5em;
	margin-right: -1.5em;
	padding-top: 1.5em;
}

.list-jobs .item {
	background-color: #fff;
	flex: 1 1 100%;
	margin: 1.5em;
	padding: 1.5em;
}

.list-jobs .item__content {
	font-size: 14px;
	font-size: 0.875rem;
}

@media screen and (min-width: 48em) {

.list-jobs .item {
	flex-basis: calc(((100/2)*1%) - 3em);
	flex-grow: 1;
	flex-shrink: 1;
	max-width: calc(((100/2)*1%) - 3em);
}

}







/*------------------------------------*\
    #FORM CONTEXT
\*------------------------------------*/

.form__container,
.contact__note {
	margin: 0 auto;
	max-width: 660px;
}

.form__container form {
	background-color: #fff;

	padding: 1.5em;
}

.form__container h2 {
	margin-bottom: 1.5rem;
}

@media screen and (min-width: 48em) {

	.form__container form {

		padding: 3em;
	}

	.form-row--split {
		float: left;

		width: 50%;
	}

		.form-row--split.actions {
		text-align: right;
	}

	.form-row--split.actions input {
		width: auto;
	}


}

.contact__note {
	padding: 3em;
}




.form__container .note {
	color: #c7c7c7;
	font-size: 12px;
	font-size: 0.75rem;
	padding-right: 1.5rem;
}

.form__container li {
	padding-top: 1.5em;
	position: relative;
	/*overflow: hidden;*/
}

.form__container .note {
	clear: both;
}

.form__container label {
  position: absolute;
  pointer-events: none;
  left: 0.75rem;
  top: 2.0625rem;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

label.label--checkbox {
	pointer-events: auto;
	position: static;
}

.form__container input:focus ~ label,
.form__container input:valid ~ label,
.form__container .has-content ~ label,
.form__container select:focus ~ label,
.form__container select:valid ~ label,
.form__container textarea:focus ~ label,
.form__container textarea:valid ~ label {
	color: #0ab3e8;
  top: 0;
  font-size: 14px;
	font-size: 0.875rem;
	text-transform: uppercase;
}

@media screen and (min-width: 64em) {

	.form__container h2 {
		padding-left: 3rem;
	}

}

.login .page-section__header,
.signup .page-section__header {
	padding-bottom: 3em;
}

.login .page-section__content,
.signup .page-section__content {
	padding-top: 3em;
}




/*------------------------------------*\
    #HOME
\*------------------------------------*/

.fullscreen-bg {
/*  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;*/
	background-color: #1D52D6;
	overflow: hidden;
	position: relative;
}

.fullscreen-bg__video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
}

/*@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../images/video-cover.png') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}*/


/*.hero-video {
	position: relative;
	text-align: center;
}

.hero-video video {
	max-width: 100%;
}*/

.hero-video .inner {
	color: #fff;

	max-width: 880px;
	padding-bottom: 6em;
	padding-top: 3em;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 5;
}

.hero-logo {
	margin: 0 auto 1.5em;
	width: 250px;
}

@media screen and (min-width: 48em) {

	.hero-logo {
		display: none;
	}

}


@media screen and (min-width: 64em) {

	.hero-logo {
		display: block;
	}

}

.hero-video h1 {
	color: #fff;
}

.hero-video .btn {
	background-color: #0ab3e8; /* Blue Teal Bright */
	margin: 0 auto;
}

.list--checkmarks {
	list-style: none;
	margin: 3em auto 3em;
	max-width: 500px;
	padding: 0;
	text-align: left;
}

.list--checkmarks li {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MC41IDYwLjUiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMTBjZmM5O308L3N0eWxlPjwvZGVmcz48dGl0bGU+YnVsbGV0LWNoZWNrbWFyazwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMC4yNSw1NkEyNS43NSwyNS43NSwwLDEsMCw0LjUsMzAuMjUsMjUuNzUsMjUuNzUsMCwwLDAsMzAuMjUsNTZaTTIwLjQ2LDMwLjkzbDYsNS42MkwzOC43OCwyMC43MmEyLjUsMi41LDAsMSwxLDMuOTQsMy4wN2wtMTQsMThhMi40OSwyLjQ5LDAsMCwxLTMuNjguMjhsLTgtNy41YTIuNSwyLjUsMCwxLDEsMy40Mi0zLjY0Wk0zMC4yNSw2MC41QTMwLjI1LDMwLjI1LDAsMSwxLDYwLjUsMzAuMjUsMzAuMjUsMzAuMjUsMCwwLDEsMzAuMjUsNjAuNVoiLz48L2c+PC9nPjwvc3ZnPg==);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	margin: 0.75em 0 0;
	padding-left: 2.25em;
}


/*
 * Sine Wave Hero
 */

#waves {
	width: 100%;
	position: absolute;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}




/*------------------------------------*\
    #AUDIO
\*------------------------------------*/

.audio-player {
	background-color: #02ccd1;
	border-radius: 1.5em;
	display: inline-block;
	position: relative;
	text-align: left;
	transition: width 2s;
	width: 3em;
}

.audio-player::after {
	content: '';
	border: 6px solid #fff;
	border-bottom: 6px solid #0D397F;
	border-left: 6px solid #0D397F;
    border-top: 6px solid #0D397F;
    border-radius: 50%;
    width: 100%;
	left: -0.375em;
	opacity: 0;
	position: absolute;
	top: -0.375em;
    height: 100%;
	-webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*.is-playing .audio-player {
	transition: width 2s;
	width: 100%;
}*/

.audio-player button {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	display: block;
	padding: 0.375rem;
	position: relative;
	z-index: 2;
}

.audio-player button img {
	height: 2.25rem;
	margin: 0;
	max-width: none;
	width: 2.25rem;
}


.is-playing .audio-player .play {
	display: none;
}

.is-paused .audio-player .play {
	display: block;
}

.is-playing .audio-player .pause {
	display: block;
}

.audio-player .pause,
.is-paused .audio-player .pause {
	display: none;
}

.is-playing .audio-player::after {
	opacity: 1;
}

.is-paused .audio-player::after {
	-webkit-animation-play-state: paused;
animation-play-state: paused;
}



.bars {
    height: 30px;
	left: 50%;
	opacity: 0;
    position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: all 1s;
    width: 40px;
	z-index: 1;
}

/*.is-playing .bars {
	opacity: 1;
	transition: all 3s;
}*/

.bar {
	animation: sound 0ms -800ms linear infinite alternate;
   background: #fff;

    height: 3px;
    position: absolute;
	transform: translate(0,-50%);
	top: 50%;
    width: 3px;
}

.is-paused .bar {
	animation-play-state: paused;
}

@keyframes sound {
    0% {
       opacity: .35;
        height: 3px;
    }
    100% {
        opacity: 1;
        height: 28px;
    }
}

.bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }