/* ==================================================================
Qing Zhao Portfolio CSS
Main Teal: #009da0
Main Teal Lite: #1ebbbe
Main Teal Dark: #007f82
Main Pink: #ff0080
//Test Gold: #ffaa00

================================================================== */

/* ==================================================================
	FONT IMPORTS
================================================================== */

@font-face {
	font-family: "BebasNeue";
	src: url('../fonts/bebasneue/bebasneue.otf') format('opentype');
}

@font-face {
	font-family: 'BebasNeueBold';
	src: url('../fonts/bebasneue/bebasneue_bold.otf') format('opentype');
}

@font-face {
	font-family: 'BebasNeueBook';
	src: url('../fonts/bebasneue/bebasneue_book.otf') format('opentype');
}

@font-face {
	font-family: 'BebasNeueLight';
	src: url('../fonts/bebasneue/bebasneue_light.otf') format('opentype');
}

@font-face {
	font-family: 'BebasNeueThin';
	src: url('../fonts/bebasneue/bebasneue_thin.otf') format('opentype');
}

@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'icons';
	src:url('../fonts/icons/icons.eot');
	src:url('../fonts/icons/icons.eot?#iefix') format('embedded-opentype'),
	url('../fonts/icons/icons.woff') format('woff'),
	url('../fonts/icons/icons.ttf') format('truetype'),
	url('../fonts/icons/icons.svg#icons') format('svg');
}

/* ==================================================================
	LAYOUT
================================================================== */

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'BebasNeueBold', 'Oswald', Helvetica, Arial, sans-serif;
	background: #333 url('../images/bg.jpg') 0 0 repeat;
	overflow: hidden;
}

::selection {
	background: #FF0080;
  	color: #fff;
}

::-moz-selection {
	background: #FF0080;
    color: #fff;
}

::-webkit-selection {
	background: #FF0080;
	color: #fff;
}

.container {
	position: absolute;
	max-width: 100%;
	width: 100%;
	min-width: 320px;
}

text {
	font-size: 60px;
	font-weight: 700;
	text-anchor: middle;
}

svg {
	width: 100%;
	visibility: hidden;
	overflow: visible;
	opacity: 1;
}

.maskText3 {
	opacity: 0;
}

#content {
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
}

/* Intro */

#content p {
	width: 100%;
	max-width: 660px;
	font-family: 'Patrick Hand', 'Open Sans', sans-serif;
	color: #fff;
	/* color: #ff0080; */
	font-size: 20px;
	line-height: 30px;
	margin: 10px auto;
}

#content p span {
	color: #ff0080;
	/* color: #009DA0; */
	-webkit-transition: color 0.25s ease-in-out;
	-moz-transition: color 0.25s ease-in-out;
	transition: color 0.25s ease-in-out;
}

#content p span:hover {
	color: #009DA0;	
	/* color: #fff; */
}

/* Buttons */

#content a#cta {
	display: inline-block;
	overflow: hidden;
	width: 220px;
	height: 100%;
	/* width: 13%; */
	background: #fff;
	padding: 13px 20px 10px;
	margin: 20px 5px;
	color: #009da0;
	font-size: 22px;
	-webkit-mask: url('../images/cta_hover.png');
	-moz-mask: url('../images/cta_hover.png');
	mask: url('../images/cta_hover.png');
	-webkit-mask-size: 3000% 100%;
	-moz-mask-size: 3000% 100%;
	mask-size: 3000% 100%;
	border: none;
	cursor: pointer;
	-webkit-animation: cta_anim 0.7s steps(29) forwards;
	-moz-animation: cta_anim 0.7s steps(29) forwards;
	animation: cta_anim 0.7s steps(29) forwards;
}

#content a#cta:hover, #content a#cta:active, #content a#cta:focus {
	background: #009da0;
	color: #fff;
	-webkit-animation: ani 0.7s steps(29) forwards;
	-moz-animation: ani 0.7s steps(29) forwards;
	animation: ani 0.7s steps(29) forwards;
}

/* Button hover */

@-webkit-keyframes cta_anim {
	from {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

@keyframes cta_anim {
	from {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

#content ul {
	list-style-type: none;
    display: inline-block;
}

#content ul li {
    float: left;
    margin-right: 20px;
}

#content ul li:last-child {
	margin-right: 0;
}

#content a {
	color: #fff;
    text-decoration: none;
    -webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
    -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
    -ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
    -o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
    transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, padding .3s ease;
}

#content a:hover, #content a:active, #content a:focus {
    color: #009da0;
}

/* ======================================================================
	PARTICLES
======================================================================*/

body .particle_text {
	position: relative;
}

body .particle_text:hover > .particle {
	z-index: -10;
}

body .particle_text.hearts:hover > .particle {
	opacity: 0;
	position: absolute;
	background-color: #ff0080;
	/* background-color: #009DA0; */
	-webkit-animation: hearts 3s ease-in infinite;
	animation: hearts 3s ease-in infinite;
	z-index: -1;
}

body .particle_text.hearts:hover > .particle:before,
body .particle_text.hearts:hover > .particle:after {
	position: absolute;
	content: "";
	border-radius: 100px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #ff0080;
	/* background-color: #009DA0; */
}

body .particle_text.hearts > .particle:before {
	transform: translateX(-50%);
}

body .particle_text.hearts > .particle:after {
	transform: translateY(-50%);
}

body .particle_text.confetti:hover > .particle {
	opacity: 0;
	position: absolute;
	-webkit-animation: confetti 3s ease-in infinite;
	animation: confetti 3s ease-in infinite;
}

body .particle_text.confetti > .particle.c1 {
	background-color: rgba(255, 0, 128, 0.5); /* pink */
	/* background-color: rgba(255, 255, 255, 0.25); white */
}

body .particle_text.confetti > .particle.c2 {
	background-color: rgba(255, 255, 255, 0.5); /* white */
	/* background-color: rgba(0, 157, 160, 0.5); teal */
}

body .particle_text.bubbles:hover > .particle {
	opacity: 0;
	position: absolute;
	background-color: rgba(255, 0, 128, 0.5); /* pink */
	-webkit-animation: bubbles 3s ease-in infinite;
	animation: bubbles 3s ease-in infinite;
	border-radius: 100%;
}

body .particle_text.lines:hover > .particle {
	position: absolute;
	background-color: rgba(255, 0, 128, 0.25); /* pink */
	-webkit-animation: lines 3s linear infinite;
	animation: lines 3s linear infinite;
}

body .particle_text.sunbeams:hover > .particle {
	position: absolute;
	background-color: rgba(255, 0, 128, 0.15); /* pink */
	-webkit-animation: sunbeams 3s linear infinite;
	animation: sunbeams 3s linear infinite;
}

body .particle_text.fire:hover > .particle {
	position: absolute;
	background-color: rgba(255, 193, 7, 0.5);
	border-radius: 40px;
	border-top-right-radius: 0px;
	-webkit-animation: fires 0.8s linear infinite;
	animation: fires 0.8s linear infinite;
	transform: rotate(-45deg);
	opacity: 0;
}

body .particle_text.fire:hover > .particle:before {
	position: absolute;
	content: "";
	top: 60%;
	left: 40%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 50%;
	border-radius: 40px;
	border-top-right-radius: 0px;
	background-color: rgba(251, 140, 0, 0.5);
}

@-webkit-keyframes hearts {
	0% {
		opacity: 0;
		transform: translate(0, 0%) rotate(45deg);
	}
	20% {
		opacity: 0.1;
		transform: translate(0, -20%) rotate(45deg);
	}
	100% {
		opacity: 0.6;
		transform: translate(0, -1000%) rotate(45deg);
	}
}

@keyframes hearts {
	0% {
		opacity: 0;
		transform: translate(0, 0%) rotate(45deg);
	}
	20% {
		opacity: 0.1;
		transform: translate(0, -20%) rotate(45deg);
	}
	100% {
		opacity: 0.6;
		transform: translate(0, -1000%) rotate(45deg);
	}
}

@-webkit-keyframes confetti {
	0% {
		opacity: 0;
		transform: translateY(0%) rotate(0deg);
	}
	10% {
		opacity: 1;
	}
	35% {
		transform: translateY(-800%) rotate(270deg);
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(2000%) rotate(1440deg);
	}
}

@keyframes confetti {
	0% {
		opacity: 0;
		transform: translateY(0%) rotate(0deg);
	}
	10% {
		opacity: 1;
	}
	35% {
		transform: translateY(-800%) rotate(270deg);
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(2000%) rotate(1440deg);
	}
}

@-webkit-keyframes bubbles {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0.4;
		transform: translate(0, -20%);
	}
	100% {
		opacity: 1;
		transform: translate(0, -1000%);
	}
}

@keyframes bubbles {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0.4;
		transform: translate(0, -20%);
	}
	100% {
		opacity: 1;
		transform: translate(0, -1000%);
	}
}

@-webkit-keyframes lines {
	0%, 50%, 100% {
		transform: translateY(0%);
	}
	25% {
		transform: translateY(100%);
	}
	75% {
		transform: translateY(-100%);
	}
}

@keyframes lines {
	0%, 50%, 100% {
		transform: translateY(0%);
	}
	25% {
		transform: translateY(100%);
	}
	75% {
		transform: translateY(-100%);
	}
}

@-webkit-keyframes fires {
	0% {
		transform: rotate(-70deg) translateY(0%);
	}
	25% {
		transform: rotate(-20deg) translateY(-5%);
		opacity: 1;
	}
	50% {
		transform: rotate(-70deg) translateY(-10%);
	}
	75% {
		transform: rotate(-20deg) translateY(-20%);
	}
	100% {
		transform: rotate(-70deg) translateY(-40%);
		opacity: 1;
	}
}

@keyframes fires {
	0% {
		transform: rotate(-70deg) translateY(0%);
	}
	25% {
		transform: rotate(-20deg) translateY(-5%);
		opacity: 1;
	}
	50% {
		transform: rotate(-70deg) translateY(-10%);
	}
	75% {
		transform: rotate(-20deg) translateY(-20%);
	}
	100% {
		transform: rotate(-70deg) translateY(-40%);
		opacity: 1;
	}
}

@-webkit-keyframes sunbeams {
	0% {
		transform: translateY(40%) rotate(0deg);
	}
	50% {
		transform: translateY(-40%) rotate(180deg);
	}
	100% {
		transform: translateY(40%) rotate(360deg);
	}
	0%, 14%, 17%, 43%, 53%, 71%, 80%, 94%, 100% {
		opacity: 0;
	}
	6%, 15%, 24%, 28%, 48%, 55%, 78%, 82%, 99% {
		opacity: 1;
	}
}

@keyframes sunbeams {
	0% {
		transform: translateY(40%) rotate(0deg);
	}
	50% {
		transform: translateY(-40%) rotate(180deg);
	}
	100% {
		transform: translateY(40%) rotate(360deg);
	}
	0%, 14%, 17%, 43%, 53%, 71%, 80%, 94%, 100% {
		opacity: 0;
	}
	6%, 15%, 24%, 28%, 48%, 55%, 78%, 82%, 99% {
		opacity: 1;
	}
}

/* Text Circle */

#content p span.circle {
	position: relative;
}

#content p span.circle svg {
	width: 100px;
	height: 50px;
	position: absolute;
	left: 90%;
	bottom: 15%;
	transform: translate(-50%, 7px) translateZ(0);
	fill: none;
	stroke: var(--stroke);
	stroke-linecap: round;
	stroke-width: 2px;
	stroke-dasharray: var(--offset, 69px) 278px;
	stroke-dashoffset: 361px;
	transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}

#content p span.circle:hover {
	stroke: #ff0080;
	--spacing: 4px;
	--offset: 180px;
	--stroke-delay: 0.1s;
}

/* ======================================================================
	MEDIA QUERIES
======================================================================*/

/* 1560px */

@media screen and (max-width: 1560px) {
	#content a#cta { width: 20%; }
}

/* 1020px */

@media screen and (max-width: 1020px) {
	#content a#cta { width: 28%; margin-top: 0; }
	#content p { width: 70%; margin-bottom: 40px; }

}

/* 768px */

@media screen and (max-width: 768px) {
	#content a#cta { width: 35%; }
	#content p { width: 80%; }
}

/* 640px */

@media screen and (max-width: 640px) {
	#content a#cta {
		width: 40%;
	}

}

/* 568px */

@media screen and (max-width: 568px) {
	text { font-size: 68px; }
	#content a#cta { width: 50%; }

	#content p {
		width: 85%;
		font-size: 16px;
		line-height: 21px;
	}

	.container {
		top: 20% !important;
	}


}

/* 420px */

@media screen and (max-width: 420px) {
	#content a#cta { width: 75%; }
}