/*********
DCT - CTAs
*********/

.dct-cta {
	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

/* DCT - CTAs > Animations */
@-webkit-keyframes dctSpinner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

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

/* DCT - CTAs > Title */
.dct-cta__title {
	line-height: 125%;
	font-size: 125%;
	font-weight: 600;
}

/* DCT - CTAs > Content */
.dct-cta__content p {
	font-size: 100%;
}

.dct-cta__content p:not(:last-child) {
	margin: 0 0 1em 0;
}

.dct-cta__content p:last-child {
	margin: 0;
}

/* DCT - CTAs > Forms > Labels / inputs */
.dct-cta__label {
	display: block;
}

.dct-cta__input {
	padding-left: 1rem;
	padding-right: 1rem;
	border: 1px solid #bbb;
	background-color: #fff;
	color: #000;
}

.dct-cta__input::-webkit-input-placeholder {
	color: #555;
}

.dct-cta__input::-moz-placeholder {
	color: #555;
}

.dct-cta__input:-ms-input-placeholder {
	color: #555;
}

.dct-cta__input::placeholder {
	color: #555;
}

.dct-cta__label:hover > .dct-cta__input,
.dct-cta__label:focus > .dct-cta__input,
.dct-cta__input:hover,
.dct-cta__input:focus {
	border-color: #000;
	background-color: #f6f6f6;
}

.dct-cta__input,
.dct-cta__btn {
	-webkit-appearance: none;
	-moz-appearance: none;
	border-style: solid;
	border-width: 1px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 100%;
	border-radius: 3px;
	box-sizing: border-box;

	-webkit-transition: all cubic-bezier(.46,.03,.52,.96) .15s;
	transition: all cubic-bezier(.46,.03,.52,.96) .15s;
}

/* DCT - CTAs > Forms > Buttons */
.dct-cta__btn {
	display: block;
	padding: 0;
	border-color: #000;
	background-color: #000;
	text-align: center;
	color: #fff;
}

.dct-cta__btn:disabled {
	opacity: .75;
}

.dct-cta__btn:not(:disabled) {
	opacity: 1;
}

.dct-cta__btn:not(:disabled):hover {
	cursor: pointer;
	text-decoration: none;
}

.dct-cta__btn:not(:disabled):hover,
.dct-cta__btn:not(:disabled):focus {
	background-color: #333;
	color: #000;
}

.dct-cta__btn-text {
	display: block;
	padding-left: 1rem;
	padding-right: 1rem;
	font-weight: 600;
}

.dct-cta__btn:before {
	-webkit-transition: all cubic-bezier(.46,.03,.52,.96) .15s;
	transition: all cubic-bezier(.46,.03,.52,.96) .15s;
}

.dct-cta__btn-loading {
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
	border: 3px solid rgba(255,255,255,.25);
	border-top: 3px solid #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	box-sizing: border-box;

	-webkit-animation: dctSpinner .75s linear infinite;
	animation: dctSpinner .75s linear infinite;
}

/* DCT - CTAs > CTA: Signup */
.dct-cta--signup {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.dct-cta--signup .dct-cta__title {
	margin-bottom: 1rem;
}

.dct-cta--signup__dialogs {
	text-align: center;
}

.dct-cta--signup__dialog {
	display: none;
	padding: 16px;
	line-height: 120%;
	border-radius: 3px;
}

.dct-cta--signup__dialog--success {
	background-color: #bec;
	color: #266;
}

.dct-cta--signup__dialog--error {
	background-color: #fcc;
	color: #622;
}

/* DCT - CTAs > CTA: Signup > Grid fallbacks */
.dct-cta--signup .dct-cta__grid {
	margin-top: 1rem;
}

.dct-cta--signup .dct-cta__label {
	float: left;
	width: calc(100% - 150px);
}

.dct-cta--signup .dct-cta__btn {
	float: right;
	width: 140px;
}

/* DCT - CTAs > CTA: Subscribe */
.dct-cta--subscribe {
	width: 100%;
	box-sizing: border-box;
}

.dct-cta--subscribe .dct-cta__btn {
	border: 0;
}

/* DCT - CTAs > CTA: Subscribe > Grid */
.dct-cta--subscribe .dct-cta__flex {
	margin-left: auto;
	margin-right: auto;
}

.dct-cta--subscribe .dct-cta__title {
	margin-top: 0;
	margin-bottom: 1rem;
}

.dct-cta--subscribe .dct-cta__image-wrap {
	text-align: center;
}

.dct-cta--subscribe .dct-cta__content {
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	box-sizing: border-box;
}

/* >=480px */
@media only screen and (min-width: 480px) {

	/* DCT - CTAs > CTA: Sign Up */
	.dct-cta--signup__dialog--success:before {
		content: '\e904';
		display: inline-block;
		margin-right: 6px;
		font-family: 'Blaize-Icons', sans-serif;
		font-size: 18px;
	}
}

/* <=767px */
@media only screen and (max-width: 767px) {

	/* DCT - CTAs > CTA: Subscribe */
	.dct-cta--subscribe {
		padding: 20px;
	}

	.dct-cta--subscribe .dct-cta__flex {
		max-width: 100%;
	}

	.dct-cta--subscribe .dct-cta__image-wrap {
		display: none;
	}
}

/* >=768px */
@media only screen and (min-width: 768px) {

	.dct-cta__grid:after,
	.dct-cta__flex:after {
		content: '';
		display: block;
		clear: both;
	}

	/* DCT - CTAs > CTA: Subscribe */
	.dct-cta--subscribe {
		padding: 20px;
	}

	.dct-cta--subscribe .dct-cta__flex {
		max-width: 80%;
	}

	.dct-cta--subscribe .dct-cta__image-wrap {
		float: left;
		width: 50%;
	}

	.dct-cta--subscribe .dct-cta__image-wrap + .dct-cta__content {
		float: right;
		padding-left: 20px;
		width: 50%;
	}
}

/******
Flexbox
******/

@supports (display: -ms-flex) or (display: flex) {

	.dct-cta__flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.dct-cta__flex:after {
		display: none;
	}

	/* DCT - CTAs > CTA: Signup */
	.dct-cta--signup .dct-cta__label {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
	}

	.dct-cta--signup .dct-cta__btn {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
	}

	.dct-cta--signup__dialog {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.dct-cta--signup__dialog--js-active {
		display: -ms-inline-flexbox;
		display: inline-flex;
	}

	/* DCT - CTAs > CTA: Subscribe */
	.dct-cta--subscribe .dct-cta__flex {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.dct-cta__image-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		-webkit-box-flex: 1;
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;

		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.dct-cta--subscribe .dct-cta__image-wrap,
	.dct-cta--subscribe .dct-cta__content {
		float: none;
		width: auto;
	}

	/* >=768px */
	@media only screen and (min-width: 768px) {

		.dct-cta--subscribe .dct-cta__content {
			-webkit-box-flex: 0;
			-ms-flex: 0 1 50%;
			flex: 0 1 50%;
		}

		.dct-cta--subscribe--contained .dct-cta__flex {
			-ms-flex-flow: column nowrap;
			flex-flow: column nowrap;

			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}

		.dct-cta--subscribe--contained .dct-cta__image-wrap {
			margin-bottom: 1em;
		}
	}

	/* >=768px */
	@media only screen and (min-width: 768px) {

		.dct-cta__image-wrap {
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}
	}
}

/***
Grid
***/

@supports ((display: -ms-grid) or (display: grid)) {

	.dct-cta__grid {
		display: -ms-grid;
		display: grid;
	}

	.dct-cta__grid:after {
		display: none;
	}

	/* DCT - CTAs > Grids > Unset fallbacks */
	.dct-cta--signup .dct-cta__label,
	.dct-cta--signup .dct-cta__btn {
		float: none;
		width: auto;
	}

	/* DCT - CTAs > CTA: Signup > Grid */
	.dct-cta--signup .dct-cta__grid {
		-ms-grid-columns: 1fr minmax(100px, auto);
		grid-template-columns: 1fr minmax(100px, auto);
		grid-gap: .5rem .5rem;
	}
}
