@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace:wght@400&display=swap');

@font-face {
	font-family: 'Thirsty Caps Regular';
	font-style: normal;
	font-weight: normal;
	src: local('../fonts/ThirstyCaps.woff'), url('../fonts/ThirstyCaps.woff') format('woff');
}

@font-face {
	font-family: 'aaaiight';
	font-style: normal;
	font-weight: normal;
	src: local('../fonts/aaaiight.woff'), url('../fonts/aaaiight.woff') format('woff');
}


body {
	font-family: 'Covered By Your Grace', cursive;
	font-size: 14px;
	line-height: 30px;
	color: #000000;
	
	/*background: url("../images/design.jpg") no-repeat center top;*/

}

.title {
	font-family: 'Thirsty Caps Regular', Georgia, Times, serif;
}

.aaaiight {
	font-family: 'aaaiight', Georgia, Times, serif;
}

body,
p,
h1,
h2,
h3 {
	margin: 0px;
	padding: 0px;
}

h1,
h2,
h3 {
	font-weight: normal;
}

img {
	border: none;
}

a {
	color: #000;
	text-decoration: none;
}

.desktop {
	display: block;
}

.mobile {
	display: none;
}

#fullpage {
	/*max-width:1600px;*/
	margin: 0px auto;

}

.scrollwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: auto;

}

main {
	padding: 0px 0px;
}

section {
	box-sizing: border-box;
}

.section_start {
	padding: 0px 0px 10px;
}

main p {
	text-transform: uppercase;
}


.green {
	color: #00b4ff;
}

.flex {
	display: flex;
}


.tablet {
	display: none !important;
}

.fp-section,
.fp-slide,
.fp-tableCell {
	height: auto !important;
}


.cta {
	text-transform: uppercase;
}

/****************************************/
/*****************HEADER*****************/
/****************************************/

@keyframes slideInTop {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

header {
	text-align: center;
	padding: 0px 0px 50px;
	margin: 0px auto;
	position: fixed;
	width: 100%;
	left: 0px;
	z-index: 100;
	background: url(../images/main_menu_bg.png) no-repeat center bottom;
	background-size: cover;
	box-sizing: border-box;
	top: 0px;

	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-name: slideInTop;
}

header nav {
	padding: 40px 0px 0px;
	background-color: #d23327;
}

nav a {
	position: relative;
	padding: 0px 30px 20px;
	display: inline-block;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 3.5em;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	/*transition-property: color;
	transition-duration: 100ms;*/
}

header nav a img {
	position: absolute;
	left: 30px;
	right: 30px;
	height: 14px;
	bottom: -10px;
}

header nav a:hover span {
	color: #2a2a26;
	background: url(../images/top_link_underline.png) center bottom no-repeat;
	background-size: 100% 14px;
	/*text-decoration: underline;*/
}




/****************************************/
/******************TOP*******************/
/****************************************/

h1 {
	font-size: 4.5em;
	line-height: 1;
	position: relative;
	align-self: center;
}



.section_bg {
	width: 100%;
	object-fit: cover;
	vertical-align: top;
}

.section_img {
	width: 100%;
	height: auto;
}


section.home {
	opacity: 0;
	transform: translateY(-20%);
	transition-property: transform opacity;
	transition-duration: 500ms;
	transition-delay: 300ms;
	margin: 100px 0px 0px;
	background-color: #f6f4f4;
	/*display: none;*/
}

section.visible {
	opacity: 1;
	transform: translateY(0%);
}

section.home .copy {
	max-width: 1800px;
	text-align: center;
	margin: auto;
	padding: 100px 30px 0px;
}

section.home .copy h1 {
	font-size: 12em;
	position: relative;
	display: inline-block;

}


section.home .copy .txt {
	color: #bd2d23;
	font-size: 4.5em;
	line-height: 1;
	margin: 50px 0px 40px;

}


section.home .copy h1 span.title_line {
	position: absolute;
	width: 100%;
	bottom: 5px;
	left: 0px;
	display: block;
}

section.home .copy h1 span.title_line img {
	position: absolute;
	width: 100%;
	left: 0px;
	vertical-align: top;
}



section.home .cta {
	font-size: 4.5em;
	line-height: 1;
	background: url(../images/cta1_line.png) center bottom no-repeat;
	background-size: contain;
	position: relative;
	transition-property: color;
	transition-duration: 300ms;


}

section.home .cta_holder {
	opacity: 0;
	transform: translateY(100%);
	transition-property: transform opacity;
	transition-duration: 500ms;
	transition-delay: 700ms;
}

section.home .cta_holder.visible {
	opacity: 1;
	transform: translateY(0%);
}


section.home .cta:hover {
	color: #bd2d23;
}

section.home .cta .cta_arrow {
	transition-property: left;
	transition-duration: 300ms;
	position: absolute;
	left: -80%;
}

section.home .cta:hover .cta_arrow {
	left: -70%;
}



@keyframes arrowRight {
	0% {
		left: -80%;
	}

	50% {
		left: -70%;
	}

	100% {
		left: -80%;
	}
}


section.home .cta .cta_arrow.visible {

	animation-delay: 1.5s;
	animation-duration: .4s;
	animation-iteration-count: 2;
	animation-name: arrowRight;
	animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}


@keyframes secondUp {
	from {

		transform: translateY(100%);
	}

	to {

		transform: translateY(0%);
	}
}


._second {

	margin: -45px 0px 0px;

	position: relative;
	z-index: 10;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-name: secondUp;


	/*display:none;*/
}

._second h2 {
	
	font-weight: bold;
}

._second .section_top {
	background: url(../images/yellow_bleed.png) center top no-repeat;
	background-size: 100% 100%;
	height: 50px;
}

._second .section_body {
	background: #fbbb4d;
	min-height: 1000px;
	padding: 0px 0px 0px;
	overflow: hidden;
	position: relative;
}

._second .fu_hearts {
	display: flex;
}

._second .fu_hearts p {
	width: 20%;
	text-align: center;
}

._second .fu_hearts p img {
	width: 80%;
	height: auto;
	transform: scale(50%);
	opacity: 0;
	transition-property: transform opacity;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

._second .fu_hearts p img._1 {
	transition-delay: 100ms;
}

._second .fu_hearts p img._2 {
	transition-delay: 200ms;
}

._second .fu_hearts p img._3 {
	transition-delay: 300ms;
}

._second .fu_hearts p img._4 {
	transition-delay: 400ms;
}

._second .fu_hearts p img._5 {
	transition-delay: 500ms;
}

._second .fu_hearts p img.visible {
	opacity: 1;
	transform: scale(100%);
}

._second .cta_1 {
	background: url(../images/cta_underline_1.png) center bottom no-repeat;
	background-size: contain;
	padding-bottom: 8px;
}

._second .cta_1:hover {
	color:#d92c20;
}

._second .cta_2 {
	background: url(../images/cta_underline_2.png) center bottom no-repeat;
	background-size: contain;
	padding-bottom: 8px;
}

._second .cta_2:hover {
	color:#ea2261;
}

.row {
	display: flex;
	width: 100%;
	padding: 40px 50px;
	max-width: 1800px;
	box-sizing: border-box;
	margin: auto;
}

.row_float {
	
	width: 100%;
	padding: 40px 50px;
	max-width: 1800px;
	box-sizing: border-box;
	margin: auto;
}

.row .block {
	width: 50%;
	padding: 0px 30px;
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(20%);
	transition-duration: 400ms;
	transition-property: opacity transform;

}

.row_float .block {
	width: 50%;
	padding: 0px 30px;
	text-align: center;
	opacity: 0;
	transform: translateY(20%);
	transition-duration: 400ms;
	transition-property: opacity transform;
	box-sizing: border-box;

}

/* .row .block._1 {
	background: url(../images/blood.png) center no-repeat;
	background-size: contain;
} */


._second .block._2 {
	margin-top: 40px;
}

.row .block._2 {
	transition-delay: 100ms;
}

.row .block._3 {
	transition-delay: 200ms;
}

.row .block._4 {
	transition-delay: 300ms;
	padding-bottom: 50px;
}

.row .block.visible, .row_float .block.visible {
	opacity: 1;
	transform: translateY(0%);
}

.row .block._2 img, .row_float .block._2 img  {
	width: 80%;
	height: auto;
}


.row .block h2, .row_float .block h2 {
	font-size: 10em;
	line-height: 1;
	/*text-transform: uppercase;*/
	font-weight: normal;
}

.row .block._3 h2, .row_float .block._3 h2 {
	font-size: 9em;
}

.row .block._4 h2, .row_float .block._4 h2 {
	font-size: 7em;
}

.row .block._1 h2, .row_float .block._1 h2 {
	font-size: 10em;
}


.row .block p, .row_float .block p {
	font-size: 4em;
	line-height: 1;
	margin: 40px 0px 80px;
}

.row .cta, .row_float .cta {
	position: relative;
	text-transform: uppercase;
	font-size: 4em;
}

.row .cta._3, .row_float .cta._3 {
	padding: 70px 70px;
	box-sizing: border-box;
	background: url(../images/cta_outline.png) center no-repeat;
	background-size: 360px auto;
	min-width: 360px;
}

.row .cta._3:hover, .row_float .cta._3:hover {
	padding: 70px 70px;
	background: url(../images/cta_Filled.png) center no-repeat;
	background-size: contain;
}

.row .cta._3 span, .row_float .cta._3 span {
	transform: rotate(-3deg);
	display: inline-block;
}



.row .cta._4 {
	padding: 0px 0px 25px;
	background: url(../images/cta_4_underline.png) center bottom no-repeat;
	background-size: contain;
}

.row .cta._4 span {
	transform: rotate(7deg);
	display: inline-block;
}

.row .cta._4 .cta_4_arrow_1 {
	transition-property: left top;
	transition-duration: 300ms;
	position: absolute;
	left: -130px;
	top: -30px;
}


.row .cta._4 .cta_4_arrow_2 {
	transition-property: right top;
	transition-duration: 300ms;
	position: absolute;
	right: -110px;
	top: 30px;
}


.row .cta._4:hover .cta_4_arrow_1 {
	left: -115px;
	top: -30px;
}

.row .cta._4:hover .cta_4_arrow_2 {
	right: -95px;
	top: 30px;
}



.finger {
	position: absolute;
	bottom: -50px;
	left: 0px;
	transition-property: transform;
	transition-duration: 0.35s;
	transform: translateX(-90%) translateY(100%) rotate(150deg);
}

.finger.visible {
	position: absolute;
	bottom: -100px;
	left: -65px;
	transform: translateX(0%) translateY(0%) rotate(15deg);
}

.btm_copy {

	padding: 0px 0px 300px;
	background-color: #32a4c8;
	color: white;
}

.btm_copy .divider {
	width: 100%;
	height: auto;

	transition-property: opacity;
	transition-duration: .5s;
}

.btm_copy .divider.visible {
	opacity: 1;
	width: 100%;
	height: auto;
}


.btm_copy p {

	width: 70%;
	font-size: 4em;
	line-height: 1;
	text-align: center;
	margin: auto;
	text-transform: uppercase;

	opacity: 0;
	transition-property: opacity;
	transition-duration: .5s;
}

.btm_copy p.visible {
	opacity: 1;
}

.section_btm {
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 0px;
	left: 0px;
}

section._third {
	position: relative;
}


section._third .copy_holder {
	position: absolute;
	width: 50%;
	top: 0px;
	right: 0px;
	height: 100%;
}


section._third .copy {
	position: absolute;
	right: 5%;
	top: 10%;
	width: 80%;
	text-align: center;
	color: #000;
}

section._third .copy h1 {
	font-size: 12em;
	position: relative;
	display: inline-block;
}


section._third .copy .txt {
	color: #000;
	font-size: 4.5em;
	line-height: 1;
	margin: 20px 0px 40px;

}


section._third .cta {
	font-size: 4.5em;
	line-height: 1;
	background: url(../images/cta_3rd_underline.png) center bottom no-repeat;
	background-size: contain;
	position: relative;
	color: #fff;
	transition-property: color;
	transition-duration: 300ms;
}

section._third .cta_holder {
	opacity: 0;
	transform: translateY(100%);
	transition-property: transform opacity;
	transition-duration: 500ms;
	transition-delay: 700ms;
}

section._third .cta_holder.visible {
	opacity: 1;
	transform: translateY(0%);
}


section._third .cta:hover {
	color: #000000;
}

section._third .cta .cta_arrow {
	transition-property: left;
	transition-duration: 300ms;
	position: absolute;
	left: -150px;
}

section._third .cta:hover .cta_arrow {
	left: -130px;
}

section._third .skull {
	position: absolute;
	left: -30%;
	bottom: 50px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 500ms;
	max-width: 20%;
}

section._third .skull.visible {
	opacity: 1;
}






section._fourth {
	position: relative;
	background-color: #dccfc4;
	padding: 150px 0px 100px;
	overflow: hidden;
}

section._fourth .copy_holder {
	position: relative;
	width: 55%;
}


section._fourth .copy {
	position: relative;
	padding: 0px 0px 0px 22.5%;
	text-align: center;
	color: #000;
}

section._fourth .copy h1 {
	font-size: 12em;
	position: relative;
	display: inline-block;
}


section._fourth .copy .txt {
	color: #000;
	font-size: 4.5em;
	line-height: 1;
	margin: 20px 0px 0px;
}


.snake,
.xes,
.heart,
.anchor {
	position: absolute;
}

.snake {
	width: 20%;
	transform: translateX(-100%);
	transition-property: transform;
	transition-duration: 1.4s;
}

.snake.visible {
	transform: translateX(0%);
}

.xes,
.heart,
.anchor {
	opacity: 0;
	transition-duration: .25s;
	transition-property: opacity;
	width: 10%;
	left: 7.5%;
}

.xes.visible,
.heart.visible,
.anchor.visible {
	opacity: 1;
}

.anchor {
	transition-delay: .25s;
	top: 25%;
}

.xes {
	transition-delay: .35s;
	top: 55%;
}

.heart {
	transition-delay: .45s;
	top: 85%;
}

section._fourth .eyes {
	position: absolute;
	right: 10%;
	top: 200px;
	transform: translateX(150%);
	transition-property: transform;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	width: 35%;
	max-width: 500px;

}

section._fourth .eyes.visible {
	transform: translateX(0%);
}




section._fifth {
	position: relative;
}


section._fifth .copy_holder {
	position: absolute;
	width: 45%;
	top: 50px;
	left: 8%;
	height: 100%;
}


section._fifth .copy {
	position: absolute;
	left: 0%;
	top: 15%;
	width: 80%;
	text-align: center;
	color: #dccfc4;
}

section._fifth .copy h1 {
	font-size: 12em;
	position: relative;
	display: inline-block;

}


section._fifth .copy .txt {
	color: #dccfc4;
	font-size: 4.5em;
	line-height: 1;
	margin: 20px 0px 40px;
}




section._sixth {
	position: relative;
}


section._sixth .copy_holder {
	position: absolute;
	width: 100%;
	top: 45%;
	transform: translateY(-50%);
	overflow: hidden;
}


section._sixth .copy {
	max-width: 800px;
	width: 55%;
	margin: auto;
	text-align: center;
	color: #dccfc4;
	position: relative;
	overflow: hidden;
}

section._sixth .copy h1 {
	font-size: 12em;
	position: relative;
	display: inline-block;

}

section._sixth .copy h1.visible {
	opacity: 1;
	transform: scale(100%);
}


section._sixth .copy .txt {
	color: #dccfc4;
	font-size: 4.5em;
	line-height: 1;
	margin: 30px 0px 40px;


}


section._sixth .copy .rude_logo {
	position: absolute;

	bottom: -200px;
	right: 0px;
	width: 60%;
	max-width: 400px;
}



.bit {
	opacity: 0;
	transition-duration: .25s;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pop {
	transform: scale(25%);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.bit._1 {
	transition-delay: 1.25s;
}

.bit._2 {
	transition-delay: 1.5s;
}

.bit._3 {
	transition-delay: 1.75s;
}



.bit.visible {
	opacity: 1;
	transform: scale(100%);
}

.rewritten {
	position: relative;
	white-space: nowrap;
}


.scribble {
	position: absolute;
	width: 110%;
	top: 35%;
	left: 0px;
}

.aaaiight {
	position: absolute;
	right: 0px;
	bottom: -5px;
	color: #cf3226;
	font-size: .65em;
}

footer {
	position: relative;
}


.holder {
	position: absolute;
	width: 100%;
	top: 15%;

}

.btns {

	text-align: center;
	color: #fff;
	font-size: 2.35em;
	display: flex;
	justify-content: center;
	align-items: center;

}

.mob_row {
	display: flex;
}

.btns .btn {
	/*display: inline-block;*/
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	height: 320px;
	padding: 100px 70px 0px;
	box-sizing: border-box;

}

.btns .btn._1 {
	background-image: url(../images/btn_bg_1.png);
}

.btns .btn._girl {
	background-image: url(../images/btn_bg_girl.png);
}

.btns .btn._2 {
	background-image: url(../images/btn_bg_2.png);
}

.btns .btn._3 {
	background-image: url(../images/btn_bg_3.png);
}

.btns .btn._4 {
	background-image: url(../images/btn_bg_4.png);
}

.btns .btn a {
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
}

.btns .btn a:hover {
	color: #000;
}


.copyright {
	text-align: center;
	color: #fff;
	font-size: 2.5em;
	text-transform: uppercase;
	padding: 50px 30px;
}







.copy h1 {

	opacity: 0;
	transform: scale(50%);
	transition-property: transform opacity;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.75);
	transition-delay: 300ms;

}

.copy h1.visible {
	opacity: 1;
	transform: scale(100%);
}



.copy .txt {

	opacity: 0;
	transform: translateY(30%);
	transition-property: transform opacity;
	transition-duration: 300ms;
	transition-delay: 600ms;

}

.copy .txt.visible {
	opacity: 1;
	transform: translateY(0%);
}




.popup {
	top:0px; left:0px;
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
}

.popup ._bg {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0px; left:0px;
	background-color: rgba(0,0,0,0.65);
}

.popup ._msg {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

.popup ._msg a {
	position: absolute;
	left:10px;
	top:10px;
	max-width: 10%;
}

.popup ._msg a img {
	width: 100%;
}

.popup ._msg img {
	max-height: 80vh;
	max-width: 80vw;
}


/************** BURGER ****************/



.burger-menu {
	margin-top: 25px;
	cursor: pointer;
	display: none;
	position: absolute;
	top: 0px;
	left: 15px;
	width: 50px;
	height: 45px;
	background: url(../images/burger.png) no-repeat center;
	background-size: contain;
}

.burger-menu.change {
	background-image: url(../images/x-close.png);
}


.bar {
	transition: 0.4s;
}



.bar-1 {
	width: 5em;
	display: block;
	width: 40px;
	border-top: 6px solid white;
	padding-top: 6px;
	cursor: pointer;
	transition: 0.4s;
}



.bar-2 {
	width: 5em;
	display: block;
	width: 40px;
	border-top: 6px solid white;
	padding-top: 5px;
	display: fixed;
	transition: 0.4s;
}


.bar-3 {
	width: 5em;
	display: block;
	width: 40px;
	border-top: 6px solid white;
	padding-top: 5px;
	transition: 0.4s;
}


.change .bar-1 {
	-webkit-transform: rotate(-45deg) translate(-10px, 5px);
	transform: rotate(-45deg) translate(-10px, 8px);
}

.change .bar-2 {
	opacity: 0;
}

.change .bar-3 {
	-webkit-transform: rotate(45deg) translate(-10px, 5px);
	transform: rotate(45deg) translate(-10px, -5px);
}