body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}a{text-decoration:none;}

@font-face {
	font-family: SKModernist;
	font-weight: normal;
	src: url(sk-modernist-regular-webfont.eot);
	src: url(sk-modernist-regular-webfont.eot?#iefix) format('embedded-opentype'),
	    url(sk-modernist-regular-webfont.woff2) format('woff2'),	
	    url(sk-modernist-regular-webfont.woff) format('woff'),
		url(sk-modernist-regular-webfont.ttf) format('truetype'),
		url(sk-modernist-regular-webfont.svg#SKModernist) format('svg');
}

@font-face {
	font-family: SKModernist;
	font-weight: bold;
	src: url(sk-modernist-bold-webfont.eot);
	src: url(sk-modernist-bold-webfont.eot?#iefix) format('embedded-opentype'),
		url(sk-modernist-bold-webfont.woff2) format('woff2'),	
	    url(sk-modernist-bold-webfont.woff) format('woff'),
		url(sk-modernist-bold-webfont.ttf) format('truetype'),
		url(sk-modernist-bold-webfont.svg#SKModernist) format('svg');
}

body {
	font-family: SKModernist,sans-serif;
	font-size: 16px;
}

strong {
	font-weight: 700;
}

nav {
	align-items: center;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	display: flex;
	justify-content: space-between;
	left: 0;
	padding: 1rem;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
}

nav > div {
	white-space: nowrap;
}

nav svg {
	vertical-align: middle;
}

nav .vb-logo-txt {
	margin-left: 1rem;
}

nav .vb-nav-link {
	color: #5c5c5c;
	font-size: 1.125rem;
	font-weight: 500;
	margin-right: 3rem;
	text-decoration: none;
}

nav .vb-nav-btn {
	background-color: #89e83f;
	border-radius: 0.5rem;
	color: #fff;
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	padding: 1.25rem 2rem;
	text-transform: uppercase;
	white-space: nowrap;
}

footer {
	background-color: #fff;
	padding: 1rem;
	text-align: center;
}

footer ul li {
	display: inline-block;
	line-height: 1;
	margin: 0 1rem 0.5rem;
}

footer ul li img {
	height: 24px;
	width: 24px;
}

footer p {
	color: #5c5c5c;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.25;
}

footer a {
	color: inherit;
	text-decoration: none;
}

.vb-audio-player-wrap {
	position: relative;
}

.vb-audio-player {
	align-items: center;
	background-color: #fff;
	border: 0.375rem solid #000;
	border-radius: 1rem;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	outline: none;
	padding: 1.5rem 2rem;
	user-select: none;
	width: 100%;
}

#vb-preview-all-responses .vb-audio-player {
	border: none;
}

.vb-audio-player .vb-player-btn {
	border: none;
	border-radius: 50%;
	cursor: pointer;
	outline: none;
}

.vb-audio-player .vb-player-btn:disabled {
	cursor: default;
	opacity: 0.2;
}

.vb-audio-player .vb-current-time,
.vb-audio-player .vb-total-time {
	color: #000;
	font-family: Questrial,sans-serif;
	font-size: 1.5rem;
	line-height: 1;
}

.vb-audio-player .vb-player-slider {
	background-color: #c4c4c4;
	border-radius: 0.125rem;
	cursor: pointer;
	flex-grow: 1;
	height: 0.25rem;
	margin: 0 1.875rem;
	position: relative;
}

.vb-audio-player .vb-player-slider-pin {
	border-radius: 0.75rem;
	height: 1.5rem;
	left: -0.75rem;
	pointer-events: all;
	position: absolute;
	top: -0.625rem;
	width: 1.5rem;
}

.vb-record-tip {
	left: -7rem;
	margin-top: -3rem;
	position: absolute;
}

#vb-create .vb-record-tip {
	left: -7rem;
	margin-top: -2rem;
	position: absolute;
}

#vb-preview .vb-record-tip {
	left: -6.5rem;
	margin-top: -3rem;
	position: absolute;
}

.vb-record-warning {
	color: #9375a7;
	font-size: 1.5rem;
	margin: 0.5rem 0;
}

#vb-home header,
#vb-create header,
#vb-preview header,
#vb-share header {
	padding: 8.5rem 5% 4rem;
	text-align: center;
}

#vb-home header,
#vb-what-is-voicebox {
	background-color: #dceffe;
}

#vb-home header img {
	display: block;
	margin: 0 auto 1.5rem;
	max-width: 100%;
}

#vb-create header h1,
#vb-preview header h1,
#vb-share header h1 {
	font-size: 3.1875rem;
	font-weight: 400;
	line-height: 1.25;
	white-space: pre-line;
}

#vb-create header p {
	color: #343434;
	font-size: 1.375rem;
	margin: 1.5rem 0;
}

#vb-what-is-voicebox,
#vb-create-main,
#vb-preview-main {
	background-color: #dceffe;
	padding: 5%;
}

#vb-what-is-voicebox > div,
#vb-create-form,
#vb-create-details,
#vb-record-response > div,
#vb-record-submitted > div,
#vb-preview-responses {
	margin: 0 auto;
	max-width: 680px;
	position: relative;
}

#vb-record-submitted > div {
	max-width: 730px;
}

#vb-what-is-voicebox svg {
	height: auto;
	margin: 1rem auto 1.5rem;
	max-width: 45%;
}

#vb-what-is-voicebox dt {
	font-size: 3rem;
	line-height: 1.2;
}

#vb-what-is-voicebox dd {
	font-size: 1.375rem;
	margin-top: 1rem;
}

#vb-about-text > * {
	font-size: 1.375rem;
	margin: 1rem auto;
	max-width: 650px;
}

#vb-about-text h3 {
	font-weight: 700;
}

#vb-home-examples {
	background-color: #ace1ff;
	padding: 5% 0;
}

#vb-home-how-works h2,
#vb-home-ways-use h2,
#vb-create-form h2,
#vb-create-details h2,
#vb-preview-responses h2 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4%;
}

#vb-home-examples h2,
#vb-record-response h2,
#vb-record-phone h2,
#vb-record-what-next h2 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
}

#vb-record-what-next h2 {
	font-size: 2.75rem;
}

#vb-home-how-works h2,
#vb-home-examples h2 {
	font-size: 4rem;
}

#vb-create-form form {
	overflow: hidden;
}

#vb-create-form label,
#vb-create-details label,
#vb-record-response label {
	font-size: 1.875rem;
	font-weight: 700;
}

#vb-create-form p {
	font-size: 1rem;
	margin-top: 0.25rem;
}

#vb-create-form input,
#vb-record-response input,
#vb-create-form textarea,
#vb-create-details textarea {
	background-color: #fff;
	border: 0.375rem solid #000;
	border-radius: 0.5rem;
	box-sizing: border-box;
	display: block;
	font-size: 1.25rem;
	margin: 1rem 0 1.5rem;
	max-width: 100%;
	width: 100%;
}

#vb-create-form input,
#vb-record-response input {
	padding: 3%;
}

#vb-create-form textarea {
	height: 8.5rem;
	min-height: 8.5rem;
	padding: 3%;
}

#vb-create-details textarea {
	height: 16.75rem;
	min-height: 16.75rem;
	padding: 3% 2%;
}

.vb-submit-btn {
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 0.5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 2rem 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	width: 100%;
}

.vb-submit-btn:disabled {
	cursor: default;
	opacity: 0.2;
}

#vb-home header .vb-create-btn,
#vb-create-form .vb-submit-btn,
#vb-footer-create .vb-create-btn {
	background-color: #fd73a4;
}

#vb-create-details .vb-submit-btn {
	background-color: #5c93ff;
}

#vb-preview-main .vb-submit-btn,
#vb-record-response .vb-submit-btn {
	background-color: #a038e0;
}

#vb-preview-publish .vb-submit-btn {
	background-color: #3d7bf3;
}

.vb-create-btn {
	color: #fff;
	cursor: pointer;
	border-radius: 0.5rem;
	box-sizing: border-box;
	display: inline-block;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1;
	max-width: 650px;
	padding: 1.25rem 2rem;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	width: 100%;
}

#vb-home header .vb-create-btn {
	max-width: 675px;
}

.vb-text-btn {
	background: none;
	border: 3px solid #000;
	border-radius: 1.2rem;
	cursor: pointer;
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.5rem 12%;
	text-transform: uppercase;
}

#vb-create-player {
	margin: 1rem 0 2rem;
}

#vb-create .vb-player-btn,
#vb-create .play-pause-btn,
#vb-preview .vb-player-btn,
#vb-preview .play-pause-btn,
#vb-record .vb-player-btn,
#vb-record .play-pause-btn {
	align-items: center;
	display: flex;
	height: 3.375rem;
	justify-content: center;
	width: 3.375rem;
  padding: 0;
}

.play-pause-btn svg {
  width: 20px;
}

#vb-create .vb-player-btn,
#vb-create .vb-player-slider-pin {
	background-color: #fd73a4;
}

#vb-preview .vb-player-btn,
#vb-record .vb-player-btn,
#vb-preview .vb-player-slider-pin,
#vb-record .vb-player-slider-pin {
	background-color: #cc79ff;
}

#vb-record-listen-overlay .vb-player-btn,
#vb-record-listen-overlay .play-pause-btn,
#vb-record-listen-overlay .vb-player-slider-pin,
#vb-record-listen-overlay .pin {
	background-color: #91ed49;
}

#vb-preview-all-responses .vb-player-btn,
#vb-preview-all-responses .vb-player-slider-pin {
	background-color: #83adff;
}

#vb-create .vb-record-btn,
#vb-preview .vb-record-btn,
#vb-record .vb-record-btn,
#vb-create .vb-playback-btn,
#vb-preview .vb-playback-btn,
#vb-record .vb-playback-btn {
	margin-right: 1rem;
}

#vb-preview-all-responses .vb-delete-btn {
	background-color: #ff9f9f;
}

#vb-home-how-works,
#vb-home-ways-use {
	padding: 5%;
	overflow: hidden;
}

#vb-home-how-works {
	background-color: #eccdff;
}

#vb-home-ways-use > div {
	display: grid;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
	grid-template-columns: repeat(3,1fr);
	margin: 1rem auto;
	max-width: 675px;
}

#vb-home-how-works h2,
#vb-home-examples h2,
#vb-home-ways-use dl,
#vb-home-ways-use h2 {
	text-align: center;
}

#vb-home-ways-use dl svg {
	max-width: 100%;
}

#vb-home-ways-use dl dd {
	color: #5c5c5c;
	font-size: 1.125rem;
	margin: 8% 0 8% 10%;
}

#vb-create-details ul {
	font-size: 1.5rem;
	margin: 8% 3% 0;
}

#vb-create-details ul li {
	align-items: center;
	background-position: left center;
	background-repeat: no-repeat;
	color: #343434;
	display: flex;
	margin: 2rem 0;
	min-height: 5rem;
	padding-left: 5rem;
}

#vb-create-details ul li:first-of-type {
	background-image: url(details1.svg);
}

#vb-create-details ul li:nth-of-type(2) {
	background-image: url(details2.svg);
}

#vb-create-faq {
	background-color: #e3fff3;
	color: #343434;
	padding: 5%;
}

#vb-create-faq h3 {
	color: inherit;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
}

#vb-create-faq p {
	font-size: 1.375rem;
	margin-bottom: 1.5rem;
}

#vb-record header {
	background-color: #e6f4ff;
	margin-top: 5.5rem;
	padding: 1rem;
	text-align: center;
}

#vb-record header p {
	color: #878585;
	display: inline-block;
	font-size: 1.25rem;
	margin: 0 0.5rem;
	vertical-align: bottom;
}

#vb-record header p a {
	color: #000;
	text-decoration: underline;
}

#vb-record-response,
#vb-record-submitted {
	background-color: #e6bdff;
	padding: 5%;
}

#vb-record-phone {
	background-color: #c0ecff;
	padding: 5%;
}

#vb-record-what-next {
	background-color: #ffe386;
	padding: 5%;
}

#vb-record-phone > div,
#vb-record-what-next > div {
	margin: 0 auto;
	max-width: 750px;
}

#vb-record-response h1 {
	color: #800dc6;
	font-size: 3.5rem;
	line-height: 1.1;
	margin-bottom: 1rem;
	position: relative;
	text-align: center;
	z-index: 1;
}

#vb-record-response h1 strong {
	font-weight: 700;
}

#vb-record-phone h3 {
	color: #353535;
	font-size: 1.75rem;
	font-weight: 700;
}

#vb-record-response > div > div p,
#vb-record-phone p,
#vb-record-what-next p {
	color: #353535;
	font-size: 1.375rem;
	margin: 1rem auto 2rem;
}

#vb-record-phone h3 + p {
	margin: 0 auto 0.5rem;
}

#vb-record-phone p em {
	color: #ff89b3;
}
#vb-record-submitted {
	text-align: center;
}

#vb-record-submitted svg {
	height: auto;
	max-width: 50%;
  margin-top: 5em;
}

#vb-record-submitted h2 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}

#vb-record-submitted p {
	font-size: 1.25rem;
}

#vb-preview header {
	margin-bottom: 1.5rem;
}

#vb-preview header p {
	color: #999;
	font-size: 1.5rem;
	padding-top: 1rem;
	text-align: center;
}

#vb-preview-main ul {
	margin-bottom: 6%;
}

#vb-home-how-works ul li,
#vb-preview-main ul li {
	align-items: center;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 73px 56px;
	display: flex;
	line-height: 1.25;
	min-height: 4rem;
	padding-left: 5.5rem;
}

#vb-home-how-works ul li:first-of-type {
	background-image: url(setup.svg);
}

#vb-home-how-works ul li:nth-of-type(2) {
	background-image: url(record.svg);
}

#vb-home-how-works ul li:nth-of-type(3) {
	background-image: url(stitch.svg);
}

#vb-home-how-works ul li:nth-of-type(4) {
	background-image: url(share.svg);
}

#vb-preview-main ul li:first-of-type {
	background-image: url(preview.svg);
}

#vb-preview-main ul li:nth-of-type(2) {
	background-image: url(record.svg);
}

#vb-preview-main ul li:nth-of-type(3) {
	background-image: url(delete.svg);
}

#vb-preview-main ul li:nth-of-type(4) {
	background-image: url(publish.svg);
}

#vb-preview-responses > div {
	background-color: #fff;
	border: 0.375rem solid #000;
	border-radius: 1rem;
}

#vb-preview-no-responses {
	color: #515151;
	margin: 25% auto;
	max-width: 372px;
}

#vb-preview-no-responses h3 {
	font-size: 2.875rem;
}

#vb-preview-no-responses p {
	font-size: 1.5rem;
}

#vb-preview-no-responses p a {
	color: #3d7bf3;
	text-decoration: underline;
}

#vb-preview-all-responses > div + div::before {
	content: '';
	display: block;
	border-top: 2px solid #c4c4c4;
	margin: 0 auto;
	width: 90%;
}

#vb-preview-all-responses dl {
	font-size: 1.75rem;
	padding: 1.5rem 2rem 0;
}

#vb-preview-all-responses dl dt {
	display: inline;
	font-weight: 700;
}

#vb-preview-all-responses dl dd {
	display: inline;
}

#vb-preview-all-responses dl dd::before {
	content: '\2002 | \2002';
}

.vb-preview-delete-response {
	font-size: 1.25rem;
	padding: 1.5rem 2rem;
}

.vb-preview-delete-response .vb-no-btn,
.vb-preview-delete-response .vb-yes-btn {
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: 700;
	height: 3.375rem;
	padding: 0.75rem 1rem;
	text-transform: uppercase;
	width: 6.25rem;
}

.vb-preview-delete-response .vb-no-btn {
	background-color: #d4d4d4;
	color: #848484;
}

.vb-preview-delete-response .vb-yes-btn {
	background-color: #ff9f9f;
	color: #fff;
}

.vb-preview-response-deleted {
	align-items: center;
	box-sizing: border-box;
	display: grid;
	font-size: 1.5rem;
	grid-column-gap: 1.5rem;
	grid-template-columns: 3rem 1fr;
	min-height: 163px;
	padding: 1.5rem 2rem;
}

#vb-preview-custom-intro {
	background-color: #feda61;
	border-radius: 1rem;
	box-sizing: border-box;
	font-size: 1.5rem;
	margin: 12% auto -2rem;
	max-width: 725px;
	padding: 2.5% 5% 3rem;
	position: relative;
}

#vb-preview-custom-intro > svg {
	position: absolute;
	top: -3.5rem;
}

#vb-preview-custom-intro h2 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
}

#vb-preview-custom-intro h3 {
	font-size: 2rem;
	font-weight: 700;
}

#vb-preview-custom-intro p {
	margin: 1rem 0;
}

#vb-preview-custom-intro a {
	color: #a038e0;
}

#vb-preview-custom-intro ol li {
	font-weight: 700;
	list-style-type: decimal;
	margin: 1rem 0 1rem 2rem;
}

#vb-intro-player-wrap {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 725px;
	padding: 0 1.5%;
	position: relative;
}

#vb-preview-publish {
	background-color: #fff6ec;
	padding: 5%;
}

#vb-preview-publish > div {
	margin: 0 auto;
	max-width: 675px;
}

#vb-preview-publish h2 {
	font-size: 2.875rem;
	font-weight: 700;
	line-height: 1.2;
}

#vb-preview-publish p {
	font-size: 1.5rem;
	margin: 1.5rem 0;
}

#vb-publish-success-overlay,
#vb-record-listen-overlay {
	align-items: center;
	background-color: rgba(0,0,0,0.4);
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 11;
}

#vb-publish-success-overlay > div {
	background-color: #fff;
	border-radius: 1rem;
	box-sizing: border-box;
	margin: 1rem;
	max-width: 575px;
	padding: 2rem 5% 3rem;
	text-align: center;
}

#vb-publish-success-overlay svg {
	max-width: 100%;
}

#vb-publish-success-overlay h2 {
	font-size: 2.875rem;
	font-weight: 700;
}

#vb-publish-success-overlay p {
	font-size: 1.5rem;
	margin-top: 1rem;
}

#vb-record-listen-overlay .vb-overlay-close {
	cursor: pointer;
	position: absolute;
	right: 2rem;
	top: 2rem;
}

#vb-record-listen-overlay .vb-overlay-note {
	position: absolute;
	right: 5rem;
	top: -6rem;
}

#vb-record-listen-overlay > div {
	background-color: #c7ff9b;
	border-radius: 1rem;
	box-sizing: border-box;
	font-size: 1.5rem;
	margin: 7rem 1rem;
	max-width: 675px;
	padding: 3rem 2%;
	position: relative;
}

#vb-record-listen-overlay h2 {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
}

#vb-record-listen-overlay p:first-of-type {
	color: #477622;
	font-weight: 700;
}

#vb-record-listen-overlay blockquote {
	color: #496038;
	font-style: italic;
	padding: 0 5.5rem;
	position: relative;
}

#vb-record-listen-overlay blockquote::before {
	content: url(quotes-left.svg);
	left: 0;
	position: absolute;
	top: 0;
}

#vb-record-listen-overlay blockquote::after {
	bottom: -0.5rem;
	content: url(quotes-right.svg);
	position: absolute;
	right: 0;
}

#vb-record-listen-overlay .vb-audio-player {
	margin: 2rem auto;
}

#vb-record-response .vb-text-btn {
	margin: 0 auto 1rem;
}

#vb-share-player-wrap,
.vb-home-example-wrap {
	background-color: #9ee2ff;
	border-radius: 1rem;
	margin: 0 auto 16rem;
	max-width: 910px;
}

.vb-home-example-wrap {
	margin-bottom: 10rem;
	margin-top: 2rem;
}

#vb-share-player-wrap > div,
.vb-home-example-wrap > div {
	margin: 0 6%;
	padding: 4% 0 4rem;
	position: relative;
}

#vb-share-player-wrap dl dt,
.vb-home-example-wrap dl dt {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
}

#vb-share-player-wrap dl dd,
.vb-home-example-wrap dl dd {
	font-size: 1.5625rem;
	line-height: 1.5;
	margin: 0.5rem 0 0;
}

#vb-share-player {
	bottom: -5.5rem;
	padding: 1rem 2rem;
	position: absolute;
}

.vb-example-player-wrap {
	bottom: -7.25rem;
	position: absolute;
	width: 100%;
}

.vb-example-player {
	padding: 1rem 2rem;
}

#vb-share-player .play-pause-btn {
	background-color: #2bbfff;
}

.vb-home-example-wrap.birthday,
.vb-home-example-wrap.birthday .vb-example-player .play-pause-btn,
.vb-home-example-wrap.birthday .vb-example-player .slider .gap-progress,
.vb-home-example-wrap.birthday .vb-example-player .slider .gap-progress .pin {
	background-color: #3d7bf3;
}

.vb-home-example-wrap.convo,
.vb-home-example-wrap.convo .vb-example-player .play-pause-btn,
.vb-home-example-wrap.convo .vb-example-player .slider .gap-progress,
.vb-home-example-wrap.convo .vb-example-player .slider .gap-progress .pin {
	background-color: #ffb526;
}

.vb-example-player + p {
	color: #606060;
	font-size: 1.125rem;
	margin-top: 0.5rem;
}

#vb-share #vb-faq {
	background-color: #d3ffb0;
	padding: 5%;
}

#vb-record #vb-faq {
	background-color: #cefffc;
	padding: 5%;
}

#vb-faq dl {
	margin: 0 auto;
	max-width: 780px;
}

#vb-faq dl dt {
	font-size: 3rem;
	font-weight: 700;
	margin-top: 2rem;
}

#vb-faq dl dd {
	color: #353535;
	font-size: 1.375rem;
}

#vb-faq ul li {
	align-items: center;
	background-position: left center;
	background-repeat: no-repeat;
	display: flex;
	margin: 0.5rem 0;
	min-height: 5rem;
	padding-left: 5rem;
}

#vb-faq ul li:first-of-type {
	background-image: url(faq1.svg);
}

#vb-faq ul li:nth-of-type(2) {
	background-image: url(faq2.svg);
}

#vb-faq ul li:nth-of-type(3) {
	background-image: url(faq3.svg);
}

#vb-faq ul li:nth-of-type(4) {
	background-image: url(faq4.svg);
}

#vb-footer-create {
	background-color: #000;
	color: #fff;
	padding: 5rem 6%;
	text-align: center;
}

#vb-footer-create h2 {
	font-size: 3.125rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 auto 2rem;
	max-width: 650px;
}

#vb-create header svg,
#vb-create-faq .vb-create-faq-answer svg,
#vb-preview header svg,
#vb-record-response > div > div svg,
#vb-record-phone svg,
#vb-record-what-next svg,
#vb-preview-custom-intro svg,
#vb-preview-publish svg,
#vb-share header svg,
#vb-faq > div > svg {
	display: none;
}

/* @media screen and (min-width: 1350px) {
	#vb-share-player-wrap {
		margin-left: auto;
		margin-right: auto;
	}
	#vb-share-player-wrap > div {
		margin-left: 6%;
		margin-right: 6%;
	}
} */

/* modified audio player styles */

#vb-share-player .volume, #vb-share-player .download,
.vb-example-player .volume, .vb-example-player .download {
	display: none;
}
#vb-instructions-player .volume, #vb-instructions-player .download { display: none; }
.response_preview .volume, .response_preview .download { display: none; }

@keyframes spin {
  from {
    transform: rotateZ(0); }
  to {
    transform: rotateZ(1turn); } }


  .vb-audio-player.player-accessible .play-pause-btn:hover,
  .vb-audio-player.player-accessible .controls:hover,
  .vb-audio-player.player-accessible .volume__button:hover,
  .vb-audio-player.player-accessible .volume__controls:hover,
  .vb-audio-player.player-accessible .download:hover {
    outline: dotted 1px #999; }
  .vb-audio-player svg,
  .vb-audio-player img {
    display: block; }
  .vb-audio-player .holder {
    position: relative; }
    .vb-audio-player .holder .loading .loading__spinner {
      position: absolute;
      left: calc(50% - 10px);
      top: calc(50% - 10px);
      width: 16px;
      height: 16px;
      border: 2px solid #b0b0b0;
      border-right-color: rgba(0, 0, 0, 0);
      border-radius: 50%;
      animation: spin 0.4s linear infinite; }
    .vb-audio-player .holder .play-pause-btn {
		background-color: #2bbfff;
		border-radius: 50%;
		padding: 1.69rem;
      visibility: hidden;
      cursor: pointer;
      outline: none; }
      .vb-audio-player .holder .play-pause-btn:focus {
        outline: none; }
  .vb-audio-player .slider {
    flex-grow: 1;
    background-color: #c4c4c4;
    cursor: pointer;
    position: relative; }
    .vb-audio-player .slider .gap-progress {
      background-color: #2bbfff;
      border-radius: inherit;
      position: absolute;
      pointer-events: none; }
      .vb-audio-player .slider .gap-progress .pin {
        height: 24px;
        width: 24px;
        border-radius: 12px;
        background-color: #2bbfff;
        position: absolute;
        pointer-events: all; }
        .vb-audio-player .slider .gap-progress .pin::after {
          content: "";
          display: block;
          background: rgba(0, 0, 0, 0);
          width: 200%;
          height: 200%;
          margin-left: -50%;
          margin-top: -50%;
          border-radius: 50%; }
          .response_preview .controls {
            margin-right: 24px;
           }
  .vb-audio-player .controls {
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1;
    color: #000;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    margin-left: 24px;
    outline: none; }
    .vb-audio-player .controls .controls__slider {
      margin-left: 1em;
      margin-right: 0.75em;
      border-radius: 2px;
      height: 4px; }
      .vb-audio-player .controls .controls__slider .controls__progress {
        width: 0;
        height: 100%; }
        .vb-audio-player .controls .controls__slider .controls__progress .progress__pin {
          right: -12px;
          top: -10px; }
    .vb-audio-player .controls span {
      cursor: default;
			font-family: Questrial,sans-serif; }
    .vb-audio-player .controls:focus {
      outline: none; }
  .vb-audio-player .volume {
    position: relative; }
    .vb-audio-player .volume .volume__button {
      cursor: pointer;
      outline: none; }
      .vb-audio-player .volume .volume__button:focus {
        outline: none; }
      .vb-audio-player .volume .volume__button.open path {
        fill: #44bfa3; }
    .vb-audio-player .volume .volume__controls {
      width: 30px;
      height: 135px;
      background-color: rgba(0, 0, 0, 0.62);
      border-radius: 7px;
      position: absolute;
      left: -3px;
      bottom: 52px;
      flex-direction: column;
      align-items: center;
      display: flex;
      z-index: 2;
      outline: none; }
      .vb-audio-player .volume .volume__controls .volume__slider {
        margin-top: 12px;
        margin-bottom: 12px;
        width: 0.375rem;
        border-radius: 3px; }
        .vb-audio-player .volume .volume__controls .volume__slider .volume__progress {
          bottom: 0;
          height: 100%;
          width: 0.375rem; }
          .vb-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin {
            left: -5px;
            top: -8px; }
      .vb-audio-player .volume .volume__controls:focus {
        outline: none; }
      .vb-audio-player .volume .volume__controls.hidden {
        display: none; }
      .vb-audio-player .volume .volume__controls.top {
        bottom: 52px;
        left: -3px; }
      .vb-audio-player .volume .volume__controls.middle {
        bottom: -54px;
        left: 54px; }
      .vb-audio-player .volume .volume__controls.bottom {
        bottom: -164px;
        left: -3px; }
  .vb-audio-player .download {
    display: none;
    margin-left: 16px;
    cursor: pointer;
    outline: none; }
    .vb-audio-player .download:focus {
      outline: none; }
  .vb-audio-player:focus {
    outline: none; }

.vb-audio-player .message__offscreen {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal; }
  
@media screen and (max-width: 980px) {
	.vb-record-tip {
		display: none;
	}
}
	
@media screen and (min-width: 938px) {
	#vb-create header,
	#vb-preview header,
	#vb-share header {
		align-items: center;
		display: grid;
		margin: 8rem auto 3rem;
		max-width: 830px;
		padding: 1rem;
		text-align: left;
	}
	#vb-create header {
		column-gap: 1rem;
		grid-template-columns: 28% auto;
		margin: 10rem auto 5rem;
	}
	#vb-preview header {
		column-gap: 2rem;
		grid-template-columns: 25% auto;
		margin: 10rem auto 1.5rem;
	}
	#vb-preview header > div:not(:first-of-type) {
		grid-column-start: 1;
		grid-column-end: span 2;
	}
	#vb-preview header p {
		padding: 0;
	}
	#vb-share header {
		column-gap: 2rem;
		grid-template-columns: 18% auto;
		margin: 8rem auto 3rem;
	}
	#vb-create header svg,
	#vb-preview header svg,
	#vb-record-response > div > div svg,
	#vb-record-phone svg,
	#vb-record-what-next svg,
	#vb-preview-custom-intro svg,
	#vb-share header svg,
	#vb-faq > div > svg {
		display: inline-block;
		max-width: 100%;
	}
	#vb-preview-custom-intro h2 {
		margin-left: 15rem;
	}
	#vb-what-is-voicebox > div {
		column-gap: 2rem;
		display: grid;
		grid-template-columns: 45% auto;
		max-width: 750px;
	}
	#vb-record-response > div > div {
		column-gap: 2rem;
		display: grid;
		grid-template-columns: 32% auto;
		margin: 3rem auto 5rem;
	}
	#vb-record-response .vb-text-btn {
		margin: 0;
	}
	#vb-record-phone > div {
		column-gap: 2rem;
		display: grid;
		grid-template-columns: 28% auto;
		margin: 0 auto;
	}
	#vb-record-what-next > div {
		align-items: center;
		column-gap: 2rem;
		display: grid;
		grid-template-columns: 30% auto;
		margin: 0 auto;
	}
	#vb-faq {
		padding: 5% 0;
	}
	#vb-faq > div {
		column-gap: 1rem;
		display: grid;
		grid-template-columns: 28% auto;
		margin: 0 auto;
		max-width: 750px;
		overflow: hidden;
	}
	#vb-faq dl {
		margin: 0 5% 0 0;
		max-width: 470px;
	}
}

@media screen and (max-width: 937px) {
	#vb-share-player-wrap,
	.vb-home-example-wrap {
		margin-left: 0.375rem;
		margin-right: 0.375rem;
	}
	#vb-share-player-wrap > div,
	.vb-home-example-wrap > div {
		margin: 0 calc(6% - 0.375rem);
	}
	#vb-faq dl dt:first-of-type {
		margin-top: 0;
	}
}

@media screen and (min-width: 769px) {
	#vb-home header {
		background: #dceffe url(home-bg-icons.svg) no-repeat center 8.5rem;
		padding: 15rem 5% 10rem;
	}
	#vb-create-faq > div {
		column-gap: 2rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin: 0 auto;
		max-width: 680px;
	}
	#vb-create-faq h3 {
		color: inherit;
		font-size: 2.5rem;
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 4rem;
	}
	#vb-create-faq h3.inactive {
		color: #878787;
	}
	#vb-create-faq h3:not(.inactive)::after {
		background-color: #ffb526;
		border-radius: 3rem;
		content: '';
		display: block;
		height: 1rem;
		margin-top: 0.75rem;
		width: 7.5rem;
	}
	#vb-create-faq .vb-create-faq-answer {
		align-items: center;
		column-gap: 2rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-start: 1;
		grid-column-end: span 2;
		grid-row-start: 2;
	}
	#vb-create-faq .vb-create-faq-answer.inactive {
		display: none;
	}
	#vb-create-faq .vb-create-faq-answer svg,
	#vb-preview-publish svg {
		display: inline-block;
	}
	#vb-record-response h1 {
		min-height: 7.5rem;
	}
	#vb-record-response h1::before,
	#vb-record-response h1::after {
		position: absolute;
		top: -1.1rem;
		z-index: -1;
	}
	#vb-record-response h1::before {
		content: url(response-left.svg);
		left: -2rem;
	}
	#vb-record-response h1::after {
		content: url(response-right.svg);
		margin-top: 0.5rem;
		right: -2rem;
	}
  #vb-record-submitted > div {
		align-items: center;
		column-gap: 2rem;
		display: grid;
		grid-template-columns: 32% auto;
		margin: 3rem auto 5rem;
		text-align: inherit;
	}
	#vb-record-submitted svg {
		display: inline-block;
		margin: 0;
		max-width: 100%;
	}
	#vb-record-submitted h2 {
		font-size: 3rem;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
	}
	#vb-record-submitted p {
		color: #353535;
		font-size: 1.375rem;
	}
	#vb-preview header {
		margin-bottom: 4rem;
	}
	#vb-preview header p {
		font-size: 2.5rem;
		padding-bottom: 1rem;
	}
	#vb-home-how-works {
		padding-bottom: 1rem;
	}
	#vb-home-how-works ul,
	#vb-preview-main ul {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		margin: calc(1px - 5% - 4rem) auto 6%;
		max-width: 720px;
	}
	#vb-home-how-works ul {
		margin: 5% auto;
	}
	#vb-home-how-works ul li,
	#vb-preview-main ul li {
		align-items: flex-start;
		background-position: center top;
		background-size: contain;
		justify-content: center;
		padding: 10rem 0.75rem 0;
		text-align: center;
	}
	#vb-preview-publish > div:first-of-type {
		display: grid;
		grid-template-columns: 45% 1fr;
	}
	#vb-preview-publish p:last-of-type {
		margin-bottom: 4rem;
	}
}

@media screen and (min-width: 650px) {
	#vb-what-is-voicebox {
		background: #dceffe url(home-bg-clouds.svg) no-repeat center 3.5rem;
		padding: 5rem 5% 20rem;
	}
	#vb-about {
		background: #dceffe url(home-bg-clouds.svg) no-repeat center 6.5rem;
	}
	#vb-about #vb-what-is-voicebox {
		background: none;
		padding: 8.5rem 5% 4rem;
	}
	#vb-about-text {
		padding: 0 5% 5%;
	}
	#vb-what-is-voicebox > div {
		column-gap: 2rem;
		display: grid;
		grid-template-columns: 45% auto;
		max-width: 750px;
	}
	#vb-what-is-voicebox svg {
		display: inline-block;
		margin: 0;
		max-width: 100%;
	}
	#vb-what-is-voicebox dl dt {
		margin-top: 2rem;
	}
	.vb-preview-delete-response {
		align-items: center;
		display: grid;
		grid-column-gap: 0.5rem;
		grid-template-columns: 1fr 6.25rem 6.25rem;
		padding: 1.5rem 2rem;
	}
}

@media screen and (max-width: 649px) {
	nav .vb-logo-txt {
		display: none;
	}
	nav .vb-nav-btn {
		padding: 1rem;
	}
	nav .vb-nav-link,
	footer p {
		font-size: 1rem;
	}
	nav .vb-nav-btn,
	#vb-footer-create .vb-create-btn {
		font-size: 0.75rem;
	}
	#vb-create header,
	#vb-preview header,
	#vb-share header {
		padding: 6.5rem 5% 2rem;
	}
	#vb-create header h1,
	#vb-preview header h1,
	#vb-record-response h1,
	#vb-share header h1,
	#vb-home-how-works h2,
	#vb-home-examples h2 {
		font-size: 2.5rem;
	}
	#vb-what-is-voicebox dt,
	#vb-home-ways-use h2,
	#vb-create-form h2,
	#vb-create-details h2,
	#vb-create-faq h3,
	#vb-preview-responses h2,
	#vb-preview-custom-intro h2,
	#vb-preview-publish h2,
	#vb-record-response h2,
	#vb-record-phone h2,
	#vb-record-what-next h2,
	#vb-share-player-wrap dl dt,
	.vb-home-example-wrap dl dt,
	#vb-footer-create h2,
	#vb-faq dl dt {
		font-size: 2rem;
	}
	#vb-create-form label,
	#vb-create-details label,
	#vb-create-form form button,
	#vb-create-details button,
	#vb-preview-main .vb-submit-btn,
	#vb-preview-no-responses h3,
	#vb-preview-custom-intro h3,
	#vb-preview-publish button,
	#vb-record-response .vb-submit-btn {
		font-size: 1.5rem;
	}
	#vb-about-text > *,
	#vb-what-is-voicebox dd,
	#vb-create header p,
	#vb-create-faq p,
	#vb-create-details ul,
	#vb-preview-no-responses p,
	#vb-preview-all-responses dl,
	.vb-preview-response-deleted,
	#vb-preview-custom-intro p,
	#vb-preview-custom-intro ol li,
	#vb-preview-publish p,
	#vb-record-response > div > div p,
  #vb-record-response p,
	#vb-record-phone p,
	#vb-record-what-next p,
	#vb-share-player-wrap dl dd,
	.vb-home-example-wrap dl dd,
	#vb-faq dl dd,
	.vb-audio-player .vb-current-time,
	.vb-audio-player .vb-total-time {
		font-size: 1.25rem;
	}
	#vb-create-form form input,
	#vb-create-form form textarea,
	#vb-create-details textarea,
	.vb-record-warning {
		font-size: 1rem;
	}
	#vb-about #vb-what-is-voicebox {
		padding-top: 6.5rem;
	}
	#vb-about-text {
		background-color: #dceffe;
		padding: 5%;
	}
	#vb-faq ul li {
		background-size: 45px;
		padding-left: 4rem;
	}
	#vb-preview-no-responses {
		margin: 10% 15%;
	}
	#vb-share-player-wrap {
		margin-bottom: 6rem;
	}
	#vb-share-player {
		bottom: -3rem;
	}
	.vb-audio-player {
		padding: 0.75rem 1rem;
	}
	.vb-audio-player .holder .play-pause-btn {
		padding: 1.25rem;
	}
	.vb-audio-player .play-pause-btn__icon {
		height: 1.25rem;
		width: 1.25rem;
	}
	.vb-audio-player .controls {
		font-size: 1rem;
	}
	#vb-create .vb-player-btn,
	#vb-preview .vb-player-btn,
	#vb-record .vb-player-btn {
		height: 3rem;
		width: 3rem;
	}
	#vb-create-player .vb-record-btn,
	#vb-intro-player .vb-record-btn {
		margin-right: 0;
	}
	.vb-audio-player .vb-player-slider {
		margin: 0 1.5rem;
	}
	#vb-create-player .vb-current-time,
	#vb-intro-player .vb-current-time {
		display: none;
	}
	#vb-footer-create {
		padding: 2.5rem 6%;
	}
	#vb-footer-create .vb-create-btn {
		padding: 1rem;
	}
	.vb-preview-delete-response {
		padding: 1rem;
		text-align: center;
	}
	.vb-preview-delete-response .vb-no-btn,
	.vb-preview-delete-response .vb-yes-btn {
		font-size: 1.25rem;
		margin: 1rem 0.5rem 0;
	}
	#vb-preview-all-responses dl {
		padding: 1rem 1rem 0;
	}
	#vb-record-listen-overlay > div {
		padding: 4rem 1rem 1rem;
	}
	#vb-record-listen-overlay .vb-audio-player {
		margin-bottom: 1rem;
	}
	#vb-record-listen-overlay blockquote {
		font-size: 1.25rem;
		padding: 0;
	}
	#vb-record-listen-overlay blockquote::before,
	#vb-record-listen-overlay blockquote::after {
		display: none;
	}
	#vb-record header {
		margin-top: 4.75rem;
	}
	#vb-record header p {
		margin-bottom: 0.5rem;
	}
	#vb-home header {
		padding: 7rem 5% 0;
	}
	#vb-what-is-voicebox {
		text-align: center;
	}
}

@media screen and (max-width: 549px) {
	#vb-home-ways-use > div {
		grid-template-columns: repeat(2,1fr);
	}
	#vb-home-ways-use dl dd {
		font-size: 1rem;
		margin: 0.5rem 0;
	}
}

@media screen and (max-width: 399px) {
	nav .vb-nav-link {
		margin-right: 1rem;
	}
	#vb-record-listen-overlay > div {
		font-size: 1.25rem;
	}
	#vb-record-listen-overlay h2 {
		font-size: 2rem;
	}
	#vb-record header p {
		font-size: 1rem;
	}
	#vb-publish-success-overlay svg,
	#vb-record-listen-overlay blockquote {
		display: none;
	}
}

@media screen and (max-width: 320px) {
	.vb-audio-player .controls .controls__current-time,
	.vb-audio-player .controls .controls__total-time,
	#vb-record-listen-overlay .vb-current-time {
		display: none;
	}
	#vb-intro-player-wrap .vb-player-slider {
		visibility: hidden;
	}
	.vb-audio-player .controls .controls__slider {
		margin: 0;
	}
}

/* Aaron */
#vb-share-player-wrap a:hover {
  text-decoration: underline;
}
.vb-create-faq-question.inactive {
  cursor: pointer;
}
#vb-create-details {
  margin-top: 55px;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 80px;
  left: 36%;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 16px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 16px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 64px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 112px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(48px, 0);
  }
}