/***************************************************************************************************************************************************************************************/

/* HTML5 BOILERPLATE MINIFIED */

/***************************************************************************************************************************************************************************************/

*{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;}canvas{display:inline;}video{display:inline;}audio:not([controls]){display:none}[hidden]{display:none}html{color:#222;font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button{-webkit-appearance:button;color:#222;cursor:pointer;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;overflow:visible;vertical-align:middle}input{color:#222;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;vertical-align:middle}select{color:#222;font-family:sans-serif;font-size:100%;margin:0;vertical-align:middle}textarea{color:#222;font-family:sans-serif;font-size:100%;margin:0;overflow:auto;resize:vertical;vertical-align:top}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{bottom:-.25em;font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;top:-.5em;vertical-align:baseline}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0;white-space:normal}input[type="button"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="reset"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="radio"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}

/***************************************************************************************************************************************************************************************/

/* BODY STYLES */

/***************************************************************************************************************************************************************************************/

:root {
	--red: #dd1212;
	--red-pink: #ff0e58;
	--yellow: #F7E600;
	--white: #FFFFFF;
	--black: #000000;

	--body-font: "Gamja Flower", sans-serif;
	--heading-font: "Oldenburg", serif;

	--container-width: 90vw;
	--container-max-width: 1600px;
	--container-outer-padding: 50px;
	--container-outer-margin: calc((100vw - var(--container-width)) / 2);
	--viewport-edge: calc((var(--container-outer-margin) + var(--container-outer-padding)) * -1);
	--container-full-edge: calc(var(--text-spacing-xlarge) * -1);
	--one-column-width: ((100vw - (2 * (var(--container-outer-margin) + var(--container-outer-padding)))) - (11 * var(--gap))) / 12;
	--gap: 40px;
	--grid: repeat(12, minmax(0,1fr));
	--text-spacing-xxsmall: 8px;
	--text-spacing-xsmall: 16px;
	--text-spacing-small: 24px;
	--text-spacing-medium: 32px;
	--text-spacing-large: 40px;
	--text-spacing-xlarge: 48px;
	--text-spacing-xxlarge: 56px;
	--module-spacing-xsmall: 64px;
	--module-spacing-small: 80px;
	--module-spacing-medium: 96px;
	--module-spacing-large: 120px;
	--module-spacing-xlarge: 160px;
	--module-spacing-xxlarge: 200px;

	interpolate-size: allow-keywords;
}

html {
	font-size: 100%;
}

body {
	background: var(--red);
	color: var(--white);
	font: 1rem var(--body-font);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.svg-inline--fa {
	display: inline-block;
	font-size: inherit;
	height: 1em;
	overflow: visible;
	vertical-align: -0.125em;
}

.svg-inline--fa path {
	fill: currentColor;
}

a {
	text-decoration: none;
	transition: all .25s ease;
}

input[type=submit],
button {
	border: none;
	border-radius: 0;
	transition: all .25s ease;
}

img,
svg,
iframe,
picture {
	max-width: 100%;
}

img,
svg,
picture {
	height: auto;
}

.accessibility,
.screen-reader-text {
	backface-visibility: hidden;
	left: -999999999px;
	opacity: 0;
	position: absolute;
}

h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5,
h6,
.heading-6 {
	margin: 0;
}

h1,
.heading-1 {
	font: 600 calc(40rem / 16) / calc(60 / 40) var(--heading-font);
	letter-spacing: 0px;
}

h1.large,
.heading-1.large {
	font-size: calc(48rem / 16);
	line-height: calc(62 / 48);
	letter-spacing: .7px;
}

h2,
.heading-2 {
	font: 600 calc(32rem / 16) / calc(42 / 32) var(--heading-font);
	letter-spacing: .35px
}

p,
ul,
ol,
.regular-text,
.regular-text p,
.regular-text ul,
.regular-text ol,
.gform_confirmation_message {
	font: 400 calc(18rem / 16) / calc(33 / 18) var(--body-font);
	letter-spacing: 0;
}

p.large,
ul.large,
ol.large,
.large-text,
.large-text p,
.large-text ul,
.large-text ol,
.gform_confirmation_message {
	font: 400 calc(24rem / 16) / calc(38 / 24) var(--body-font);
	letter-spacing: .15px;
}

p.small,
ul.small,
ol.small,
.small-text,
.small-text p,
.small-text ul,
.small-text ol {
	font: 400 calc(16rem / 16) / calc(30 / 16) var(--body-font);
	letter-spacing: 0px;
}

/***************************************************************************************************************************************************************************************/

/* MAIN STYLES */

/***************************************************************************************************************************************************************************************/

.bee-mine {
	position: relative;
	overflow: hidden;
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bee-mine::before {
	background: var(--white) url('https://images.unsplash.com/photo-1584384689201-e0bcbe2c7f1d?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center;
	background-size: cover;
	content: '';
	position: absolute;
	height: 100dvh;
	width: 100dvw;
	z-index: -1;
	opacity: 1;
	mix-blend-mode: multiply;
	animation: background-fade-out 1s both ease-in-out;
	animation-delay: 4s;
}

@keyframes background-fade-out {
	0% {
		opacity: .2;
	}
	100% {
		opacity: .1;
	}
}

.bee-mine::after {
	background: var(--white) url('https://images.unsplash.com/photo-1569639399825-633d3c5b807a?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center;
	background-size: cover;
	content: '';
	position: absolute;
	height: 100dvh;
	width: 100dvw;
	z-index: -2;
	opacity: 1;
	animation: background-come-in 3s both ease-in-out;
	transition: all .5s ease-in-out;
	animation-delay: 3.75s;
}

@keyframes background-come-in {
	0% {
		background-position: 0 -20px;
	}
	100% {
		background-position: 0 -235px;
	}
}

.bee-mine .bee {
	display: inline-block;
	position: absolute;
	scale: 1.2;
	animation: fly 6s forwards ease-in-out;
	z-index: 1;
}

.bee-mine .text {
	animation: text-fade-in 1s both ease-in-out;
}

.bee-mine .text.will {
	animation-delay: 1.5s;
}

.bee-mine .text.you {
	animation-delay: 2.5s;
}

.bee-mine .text.word-bee {
	display: inline-block;
	animation: text-word-bee 1s both cubic-bezier(0.68, -0.6, 0.32, 1.6);
	animation-delay: 3.5s;
}

.bee-mine .text.my-valentine {
	color: var(--red);
	animation-delay: 4.5s;
}

.bee-mine .bee .regular-text {
	background: var(--white);
	padding: 2px 16px;
	color: var(--red);
	border-radius: 50px;
	position: absolute;
	top: 100%;
	right: 0;
	transform: rotateY(180deg);
	width: max-content;
	text-align: left;
	opacity: 0;
	transition: .5s ease-in-out
}

.bee-mine h1 {
	margin: 8px 0 24px;
}

.bee-mine .flex-container {
	animation: text-fade-in 1s both ease-in-out;
	animation-delay: 6s;
}

.bee-mine .btn {
	background: var(--white);
	padding: 12px 20px;
	border-radius: 50px;
	font: 600 calc(20rem / 16) / 1 var(--body-font);
	transition: .5s ease;
}

.bee-mine .btn:first-child:hover {
	background: var(--red);
	color: var(--white);
	scale: 1.2;
}

.bee-mine:has(.btn:first-child:hover) .good-choice {
	opacity: 1;
}

.bee-mine .btn:first-child:hover + .btn {
	opacity: 0;
}

.bee-mine .btn:nth-child(2) {
	border: solid 1px var(--white);
	color: var(--white);
	background-color: transparent;
	animation: text-fade-in 1s forward ease-in-out;
	animation-delay: 7s;
}

.bee-mine .btn:nth-child(2):hover {
	scale: 0.5;
	rotate: 360deg;
	/*opacity: 0 !important;*/
	/*pointer-events: none;*/
}

.bee-mine:has(.btn:nth-child(2):hover) .bad-choice {
	opacity: 1;
}

@keyframes text-fade-in {
	0% {
		opacity: 0;
		pointer-events: none;
	}
	100% {
		opacity: 1;
		pointer-events: auto;
	}
}

@keyframes text-word-bee {
	0% {
		transform: translateY(20px);
	}
	50% {
		color: var(--yellow);
		transform: translateY(0) scale(1.2);
	}
	100% {
		color: var(--yellow);
		transform: translateY(0) scale(1);
	}
}

@keyframes fly {
	0% {
		transform: translate(30px, 0) rotate(0);
	}
	25% {
		transform: translate(-70px, -15px) rotate(-5deg);
	}
	45% {
		transform: translate(-100px, 10px) rotate(-9deg);
	}
	65% {
		transform: translate(-90px, 35px) rotateY(180deg);
	}
	95% {
		transform: translate(250px, 15px) rotateY(180deg);
	}
	100% {
		transform: translate(250px, 12px) rotateY(180deg) scale(.95) rotate(3deg);
	}
}

.bee-mine .chosen-answer {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(0, 100px) scale(0.7);
	transition: all .5s ease-in-out;
}

.bee-mine .pre-chosen {
	transition: all .5s ease-in-out;
}

.bee-mine.chosen .pre-chosen {
	opacity: 0 !important;
	pointer-events: none;
	transform: translate(0, -100px) scale(0.7);
}

.bee-mine.chosen .chosen-answer {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0, 0) scale(1);
}

.bee-mine.chosen::after {
	scale: 1.2;
}