@font-face {
  font-family: 'DomaineDisplay';
  src: url('https://cnda.condenast.co.uk/product/vogue-beauty-awards-2021/static/fonts/DomaineDisplayWeb-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'GTWalsheimProLight';
  src: url('https://cnda.condenast.co.uk/product/vogue-beauty-awards-2021/static/fonts/GT-Walsheim-Pro-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'GTWalsheimProBold';
  src: url('https://cnda.condenast.co.uk/product/vogue-beauty-awards-2021/static/fonts/GT-Walsheim-Pro-Bold.woff2') format('woff2');
}

:root {
	--white: #fff;
	--off-white: #fcfcfc;
	--silk-grey: #e0e0e0;
	--chalice-grey: #a9a9a9;
	--timeless-gray: #888;
	--dove-grey: #000000;
	--monument-grey: #444;
	--pearl-black: #000000;
	--totem-red: #ee0000;
	--midnight-blue: #003a66;
	--jacaranda: #3e0339;
	--vogue-red: #ee0000;
	--font-serif-1: adobe-caslon-pro, serif;
	--font-serif-2: Baskerville, adobe-caslon-pro, serif;
	--font-sans-1: Nobel, "Gill Sans", Arial, sans-serif;
	--font-sans-2: "Gill Sans", Nobel, Arial, sans-serif;
	--small-breakpoint: 320px;
	--medium-breakpoint: 768px;
	--large-breakpoint: 1100px
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

body {
	background-color: #fcfcfc;
	background-color: var(--off-white);
	overflow-x: hidden
}

.is-hidden {
	display: none
}

@media (min-width:1100px) {
	.header-wrapper {
		display: table;
		width: 100%
	}
}

.header__image {
	background-image: url(https://cnda.condenast.co.uk/product/vogue-beauty-awards-2021/static/images/vg-bwa-hero1.jpg);
	background-position: 100%;
	background-size: cover;
	position: relative
}

@media (min-width:1100px) {
	.header__image {
		display: table-cell;
		vertical-align: middle;
		width: 50%
	}
}

.header__image-wrapper {
	padding-top: 75%
}

@media (min-width:768px) {
	.header__image-wrapper {
		padding-top: 66.66666%
	}
}

@media (min-width:1100px) {
	.header__image-wrapper {
		padding-top: 103.125%
	}
}

.header__image-credit {
	bottom: 4px;
	color: #fff;
	color: var(--white);
	font-family: 'GTWalsheimProLight';
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 10px;
	position: absolute;
	right: 2px;
	text-transform: uppercase;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
	-ms-transform: translateX(100%) rotate(-90deg);
	transform: translateX(100%) rotate(-90deg)
}

@media (min-width:1100px) {
	.header__image-credit {
		bottom: 4px;
		left: 4px;
		right: auto;
		-ms-transform-origin: left top;
		transform-origin: left top;
		-ms-transform: translateY(100%) rotate(-90deg);
		transform: translateY(100%) rotate(-90deg)
	}
}

.header__content {
	position: relative
}

@media (min-width:1100px) {
	.header__content {
		background-image: url(https://cnda.condenast.co.uk/product/vogue-beauty-awards-2021/static/images/vg-bwa-hero2.jpg);
		/*background-position: 50%;*/
		background-size: cover;
		display: table-cell;
		position: relative;
		vertical-align: middle;
		width: 50%
	}
	.header__content:before {
		background-color: #fff;
		background-color: var(--white);
		bottom: 0;
		content: "";
		left: 0;
		margin: 60px;
		position: absolute;
		right: 0;
		top: 0;
        display: none
	}
}

.header__content-wrapper {
	margin: 30px auto 38px;
	max-width: 228px;
	position: relative
}

@media (min-width:768px) {
	.header__content-wrapper {
		max-width: 324px
	}
}

.header__content-description {
	font-family: Baskerville, adobe-caslon-pro, serif;
	font-family: var(--font-serif-2);
	font-size: 18px;
	font-style: italic;
	line-height: 20px;
	margin-bottom: 0;
	margin-top: 24px;
	text-align: center
}

.header__logo {
	margin: 30px auto 20px
}

.header__logo img {
	display: block;
	max-width: 324px;
    margin-left: auto;
    margin-right: auto;
}

.header__sponsor {
	font-size: 0
}

.header__sponsor-prefix {
	color: #05171d;
	color: var(--pearl-black);
	font-family: Nobel, Gill Sans, Arial, sans-serif;
	font-family: var(--font-sans-1);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 14px;
	margin: 20px 0 16px;
	text-align: center;
	text-transform: uppercase
}

@media (min-width:1100px) {
	.header__sponsor-prefix {
		margin-top: 26px
	}
}

.header__sponsor-images {
	display: table;
	left: 50%;
	margin: 16px 0 38px;
	position: relative;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%)
}

.header__sponsor-image {
	display: table-cell;
	vertical-align: middle
}

.header__sponsor-image img {
	height: 30px
}

.header__sponsor-image+.header__sponsor-image {
	padding-left: 16px
}

.header__description {
	color: #05171d;
	color: var(--pearl-black);
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 38px auto 60px;
	max-width: 1008px;
	padding: 40px 60px;
	border-bottom: 1px solid rgb(202, 204, 206);
	text-align: center
}

@media (min-width:1100px) {
	.header__description {
		font-size: 16px;
		line-height: 1.5;
		margin: 0px auto 42px
	}
}

.form.has-error--email .form__submit-error--email,
.form.has-error--recaptcha .form__submit-error--recaptcha,
.form.has-error--vote .form__submit-error--vote {
	display: block
}

.form-wrapper {
	margin: 0 auto;
	max-width: 1008px
}

@media (min-width:1100px) {
	.form-wrapper {
		padding: 0 60px
	}
}

@media (min-width:1100px) {
	.form__sections {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 -12px
	}
}

.form__section {
	margin: 64px 0;
	width: 100%
}

@media (min-width:1100px) {
	.form__section {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 0 0 118px;
		padding: 0 12px;
		width: 50%
	}
}

.form__section-header {
	margin: 64px 0 30px;
	padding: 0 20px
}

@media (min-width:1100px) {
	.form__section-header {
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		margin: 0 0 42px;
		padding: 0
	}
}

.form__section-number {
	color: #05171d;
	color: var(--pearl-black);
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 16px;
	margin: 0 0 10px;
	text-align: center;
	text-transform: uppercase
}

@media (min-width:1100px) {
	.form__section-number {
		margin-bottom: 14px
	}
}

.form__section-title {
	color: #05171d;
	color: var(--pearl-black);
	font-family: "GTWalsheimProBold", sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 24px;
	margin: 0 0 10px;
	text-align: center;
	text-transform: uppercase
}

@media (min-width:1100px) {
	.form__section-title {
		margin-bottom: 14px
	}
}

.form__section-description {
	color: #666;
	color: var(--dove-grey);
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	text-align: center
}

@media (min-width:1100px) {
	.form__section-options {
		box-orshadow: 0 2px 4px 0 rgba(0, 0, 0, .06)
	}
}

.form__section-option {
	border: 1px solid #e0e0e0;
	border: 1px solid var(--silk-grey)
}

.form__section-option+.form__section-option {
	border-top: none
}

@media (min-width:1100px) {
	.form__section-option {
		overflow: hidden
	}
	.form__section-option:first-child,
	.form__section-option:first-child .card {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px
	}
	.form__section-option:last-child,
	.form__section-option:last-child .card {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px
	}
}

.form__section-option label {
	cursor: pointer
}

.option-radio {
	display: none
}

.option-radio:checked+.card .card__button {
	border-color: #ad2308;
	border-color: var(--totem-red)
}

.option-radio:checked+.card .card__button:after {
	background-color: #ad2308;
	background-color: var(--totem-red);
	border-radius: 50%;
	bottom: 0;
	content: "";
	left: 0;
	margin: 5px;
	position: absolute;
	right: 0;
	top: 0
}

.option-radio:checked+.card .card__image:after {
	background-color: #ad2308;
	background-color: var(--totem-red);
	border-radius: 16px;
	color: #fff;
	color: var(--white);
	content: "Selected";
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 11px;
	font-weight: 400;
	left: 50%;
	letter-spacing: .09em;
	line-height: 11px;
	padding: 11px 0;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: calc(100% - 16px)
}

@media (min-width:1100px) {
	.option-radio:checked+.card .card__image:after {
		width: calc(100% - 24px)
	}
}

.option-radio:checked+.card .card__title {
	color: #05171d;
	color: var(--pearl-black)
}

.option-radio[disabled]+.card .card__button {
	background-color: #f9f9f9!important;
	border: 2px solid #e0e0e0!important;
	border: 2px solid var(--silk-grey)!important
}

.option-radio[disabled]+.card .card__button:after {
	background-color: var(--chalice-grey)!important;
	background-color: #a9a9a9!important
}

.option-radio[disabled]+.card .card__title {
	color: #666!important;
	color: var(--dove-grey)!important
}

.option-radio[disabled]+.card .card__image:after {
	background-color: var(--chalice-grey)!important;
	background-color: #a9a9a9!important
}

.form__submit {
	margin: 0 auto;
	width: 100%
}

.form__submit-wrapper {
	margin: 0 auto;
	max-width: 648px;
	padding: 0 20px
}

@media (min-width:1100px) {
	.form__submit-wrapper {
		padding: 0
	}
}

.form__submit-title {
	color: #05171d;
	color: var(--pearl-black);
	font-family: "GTWalsheimProBold", sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 24px;
	margin: 0 0 10px;
	padding-top: 30px;
	position: relative;
	text-align: center;
	text-transform: uppercase
}

@media (min-width:1100px) {
	.form__submit-title {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 16px;
		padding-top: 58px
	}
}

.form__submit-title:before {
	background-color: rgb(202, 204, 206);
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	top: 0;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	width: calc(100vw - 40px);
	max-width: 1320px
}

@media (min-width:1100px) {
	.form__submit-title:before {
		width: calc(100vw - 120px)
	}
}

.form__submit-description {
	color: #666;
	color: var(--dove-grey);
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	margin: 10px 0 38px;
	text-align: center
}

@media (min-width:1100px) {
	.form__submit-description {
		font-size: 16px;
		line-height: 24px;
		margin: 16px 0 44px
	}
}

.form__submit-description a {
	color: #a9a9a9;
	color: var(--chalice-grey);
	font-style: italic;
	text-decoration: underline
}

.form__submit-error {
	color: #ad2308;
	color: var(--totem-red);
	display: none;
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 12px;
	margin-bottom: 8px
}

.form__submit-error--email {
	margin-top: 18px
}

@media (min-width:1100px) {
	.form__submit-error--email {
		margin-top: 24px
	}
}

.form__submit-error--email+.form__submit-email {
	margin-top: 8px
}

.form__submit-error--vote {
	margin-top: 20px
}

@media (min-width:1100px) {
	.form__submit-error--vote {
		margin-top: 24px
	}
}

.form__submit-error--vote+.form__submit-button {
	margin-top: 8px
}

.form__submit-email {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #F2F2F2;
	border-radius: 0;
	border: none;
	color: #05171d;
	color: var(--pearl-black);
	display: block;
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 16px;
	font-weight: 400;
	height: 60px;
	line-height: 16px;
	margin: 38px 0 24px;
	padding: 0 20px;
	width: 100%
}

.form__submit-email--error {
	border-color: #ad2308;
	border-color: var(--totem-red)
}

.form__submit-options {
	margin: 24px 0
}

@media (min-width:1100px) {
	.form__submit-options {
		margin: 24px 0 32px
	}
}

.form__submit-option+.form__submit-option {
	margin-top: 12px
}

.form__submit-option label {
	cursor: pointer;
	display: table
}

.form__submit-detail {
	color: #666;
	color: var(--dove-grey);
	display: table-cell;
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 12px;
	padding-left: 16px;
	vertical-align: middle
}

.option-checkbox {
	display: none
}

.option-checkbox:checked+.form__submit-checkbox {
	background-position-x: -20px
}

.form__submit-checkbox {
	background-color: #fff;
	background-color: var(--white);
	background-image: url(https://cnda.condenast.co.uk/product/vogue-beauty-awards-2021/static/images/vg-icon-checkbox.png);
	background-size: 40px 20px;
	border: 2px solid #e0e0e0;
	border: 2px solid var(--silk-grey);
	width: 24px;
	height: 24px;
	float: left
}

.g-recaptcha {
	margin-bottom: 20px
}

@media (min-width:1100px) {
	.g-recaptcha {
		margin-bottom: 24px
	}
}

.form__submit-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #ad2308;
	background-color: var(--totem-red);
	border-radius: 0;
	border: none;
	color: #fff;
	color: var(--white);
	cursor: pointer;
	display: block;
	font-family: "GTWalsheimProBold", sans-serif;
	font-size: 16px;
	font-weight: 400;
	height: 60px;
	letter-spacing: .09em;
	line-height: 16px;
	margin: 20px 0 36px;
	text-align: center;
	text-transform: uppercase;
	width: 100%
}

.form__submit-button:focus {
	background-color: #991900
}

@media (min-width:1100px) {
	.form__submit-button {
		width: 144px
	}
	.form__submit-button:hover {
		background-color: #2D2E2F
	}
}

.form__submit-legal {
	color: #a9a9a9;
	color: var(--chalice-grey);
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 14px;
	margin-bottom: 64px
}

@media (min-width:1100px) {
	.form__submit-legal {
		margin-bottom: 118px
	}
}

.form__submit-legal a {
	color: #a9a9a9;
	color: var(--chalice-grey);
	font-style: normal;
	text-decoration: none;
	border-bottom: 1px solid #EE0000
}

.form__success {
	margin: 0 auto;
	width: 100%
}

.form__success-wrapper {
	margin: 0 auto;
	max-width: 648px;
	padding: 0 20px
}

@media (min-width:1100px) {
	.form__success-wrapper {
		padding: 0
	}
}

.form__success-title {
	color: #05171d;
	color: var(--pearl-black);
	font-family: "GTWalsheimProBold", sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 24px;
	margin: 0 0 10px;
	padding-top: 30px;
	position: relative;
	text-align: center;
	text-transform: uppercase
}

@media (min-width:1100px) {
	.form__success-title {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 16px;
		padding-top: 58px
	}
}

.form__success-title:before {
	background-color: #05171d;
	background-color: var(--pearl-black);
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	top: 0;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	width: calc(100vw - 40px);
	max-width: 1320px
}

@media (min-width:1100px) {
	.form__success-title:before {
		width: calc(100vw - 120px)
	}
}

.form__success-description {
	color: #666;
	color: var(--dove-grey);
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	margin: 10px 0 38px;
	text-align: center
}

@media (min-width:1100px) {
	.form__success-description {
		font-size: 16px;
		line-height: 24px;
		margin: 16px 0 44px
	}
}

.form__success-description a {
	color: #a9a9a9;
	color: var(--chalice-grey);
	font-style: italic;
	text-decoration: underline
}

.pinterest {
	margin: 38px 0 46px
}

@media (min-width:1100px) {
	.pinterest {
		margin: 44px 0 52px
	}
}

.share {
	margin: 46px 0 64px
}

@media (min-width:1100px) {
	.share {
		margin: 52px 0 118px
	}
}

.share__title {
	color: #05171d;
	color: var(--pearl-black);
	font-family: "GTWalsheimProBold", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 16px;
	margin: 0 0 18px;
	text-align: center;
	text-transform: uppercase
}

.share__list {
	font-size: 0;
	list-style: none;
	text-align: center
}

.share__list-item {
	border-radius: 50%;
	border: 1px solid #e0e0e0;
	border: 1px solid var(--silk-grey);
	display: inline-block;
	position: relative;
	height: 40px;
	width: 40px
}

.share__list-item:before {
	content: none
}

.share__list-item+.share__list-item {
	margin-left: 8px
}

@media (min-width:1100px) {
	.share__list-item--mobile {
		display: none
	}
}

.share__button {
	border-radius: 50%;
	display: inline-block;
	height: 38px;
	width: 38px
}

.share__button svg {
	height: 100%;
	margin: 0 auto;
	width: 16px
}

.share__button:hover svg {
	fill: #fff
}

.share__button--email svg {
	fill: #666
}

.share__button--email:hover {
	background-color: #666
}

.share__button--twitter svg {
	fill: #1da1f2
}

.share__button--twitter:hover {
	background-color: #1da1f2
}

.share__button--facebook svg {
	fill: #3b5998
}

.share__button--facebook:hover {
	background-color: #3b5998
}

.share__button--whatsapp svg {
	fill: #25d366
}

.share__button--whatsapp:hover {
	background-color: #25d366
}

.share__button--pinterest svg {
	fill: #bd081c
}

.share__button--pinterest:hover {
	background-color: #bd081c
}

.card {
	background-color: #fff;
	background-color: var(--white)
}

.card:hover .card__title {
	color: #05171d;
	color: var(--pearl-black)
}

.card-wrapper {
	display: table;
	height: 96px;
	position: relative;
	width: 100%
}

@media (min-width:1100px) {
	.card-wrapper {
		height: 120px
	}
}

.card__button {
	background-color: #f9f9f9;
	border-radius: 50%;
	border: 2px solid #e0e0e0;
	border: 2px solid var(--silk-grey);
	height: 24px;
	width: 24px;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 20px
}

@media (min-width:1100px) {
	.card__button {
		left: 24px
	}
}

.card__title {
	color: #666;
	color: var(--dove-grey);
	display: table-cell;
	font-family: "GTWalsheimProLight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	padding-left: 64px;
	padding-right: 108px;
	vertical-align: middle;
	width: 100%
}

@media (min-width:1100px) {
	.card__title {
		font-size: 14px;
		line-height: 22px;
		padding-left: 64px;
		padding-right: 136px
	}
}

.is-chrome.is-linux .card__title,
.is-chrome.is-macos .card__title,
.is-safari.is-macos .card__title {
	padding-top: 6px
}

@media (min-width:1100px) {
	.is-chrome.is-linux .card__title,
	.is-chrome.is-macos .card__title,
	.is-safari.is-macos .card__title {
		padding-top: 8px
	}
}

.card__image {
	height: 96px;
	width: 96px;
	position: absolute;
	right: 0
}

@media (min-width:1100px) {
	.card__image {
		height: 120px;
		width: 120px
	}
}

.card__image img {
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%
}
