:root {
  --background-1: rgba(255,255,255,1);
	
  --primary-1: rgba(15,16,56,1);
  --primary-2: rgba(45,46,81,1);
  --primary-3: rgba(75,76,106,1);
  --primary-4: rgba(105,106,131,1);
  --primary-5: rgba(135,136,155,1);
  --primary-6: rgba(165,166,180,1);
  --primary-7: rgba(195,196,205,1);
  --primary-8: rgba(225,225,230,1);
  
  --secondary-1: rgba(250,179,96,1);
  --secondary-2: rgba(251,188,116,1);
  --secondary-3: rgba(251,198,136,1);
  --secondary-4: rgba(252,207,156,1);
  --secondary-5: rgba(252,217,176,1);
  --secondary-6: rgba(253,226,195,1);
  --secondary-7: rgba(254,236,215,1);
  --secondary-8: rgba(254,245,235,1);
  
  --grey-1: rgba(80,80,80,1);
  --grey-2: rgba(150,150,150,1);
  --grey-3: rgba(200,200,200,1);
  
  --text-light: rgba(255,255,255,1);
  --text-medium: rgba(80,80,80,1);
  --text-dark: rgba(60,70,80,1);
  
  --page-width: 95vw;
}
@font-face {
	font-family: standard;
	font-style: normal;
	src: url('../fonts/DMSans-Light.ttf');
}
@font-face {
	font-family: display;
	font-style: normal;
	src: url('../fonts/OpenSans-SemiBold.ttf');
}
@font-face {
	font-family: standard-medium;
	font-style: normal;
	src: url('../fonts/Manrope-Medium.ttf');
}
@font-face {
	font-family: menu;
	font-style: normal;
	src: url('../fonts/InterTight-Medium.ttf');
}
@font-face {
	font-family: titles;
	font-style: normal;
	src: url('../fonts/DMSans-Bold.ttf');
}
@font-face {
	font-family: script;
	font-style: normal;
	src: url('../fonts/Lobster-Regular.ttf');
}
@font-face {
	font-family: slab;
	font-style: normal;
	src: url('../fonts/RobotoSlab-Regular.ttf');
}
@font-face {
	font-family: lobster;
	font-style: normal;
	src: url('../fonts/LobsterTwo-Regular.ttf');
}
@font-face {
	font-family: urbanist;
	font-style: normal;
	src: url('../fonts/Urbanist-Regular.ttf');
}

body {
	margin: 0;
	background-color: var(--background-1);
	background-position: top;
	background-size: cover;
	font-family: standard;
	overflow-X: hidden;
}
/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: rgba(200,200,200,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background-color: rgba(100,100,100,1);
	border-radius: 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(50,50,50,1);
}
::-webkit-scrollbar-button {
	display: none;
}
p, li, a {
	font-family: standard;
	color: var(--text-dark);
	font-weight: normal;
	margin: 5px;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	font-family: titles;
	letter-spacing: -0.06em;
	font-weight: normal;
	margin: 5px;
	line-height: 1.1em;
}
h1 {
	color: var(--text-dark);
}
h2, h3, h4, h5, h6 {
	color: var(--text-dark);
}
p {
	margin: 15px 5px 5px 5px;
}
p, li {
	color: var(--text-dark);
}

h1 {font-size: 60px;}
h2 {font-size: 60px;}
h3 {font-size: 45px;}
h4 {font-size: 35px;}
h5 {font-size: 30px;}
h6 {font-size: 28px;}
p {font-size: 18px;}

@media (max-width: 900px) {
h1 {font-size: 49px;}
h2 {font-size: 49px;}
h3 {font-size: 34px;}
h4 {font-size: 31px;}
h5 {font-size: 29px;}
h6 {font-size: 27px;}
p {font-size: 17px;}
}

@media (max-width: 600px) {
h1 {font-size: 47px;}
h2 {font-size: 47px;}
h3 {font-size: 32px;}
h4 {font-size: 29px;}
h5 {font-size: 27px;}
h6 {font-size: 25px;}
p {font-size: 16px;}
}

.plaintext h1, .plaintext h2, .plaintext h3, .plaintext h4, .plaintext h5  {font-size: 50px;}

@media (max-width: 900px) {
.plaintext h1, .plaintext h2, .plaintext h3, .plaintext h4, .plaintext h5  {font-size: 45px;}
}

@media (max-width: 600px) {
.plaintext h1, .plaintext h2, .plaintext h3, .plaintext h4, .plaintext h5  {font-size: 40px;}
}

.handwriting {
	font-family: script;
}
.slab {
	font-family: slab;
}
.fontlarger {
	font-size: 25px;
}
.fontlargest {
	font-size: 35px;
	font-weight: 500;
}
.redDisplay {
	color: rgba(255,145,115,1);
	text-shadow: 0px 0.05em 0px rgba(60,70,80,1);
}

/*==============================*/
/* Heights and widths           */
/*==============================*/
.h100 {height: 100%;}


/*==============================*/
/* Header and logo              */
/*==============================*/
header {
	position: fixed;
	box-sizing: border-box;
	top: 0px;
	height: 60px;
	width: 100%;
	background-color: rgba(255,255,255,0);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: 0.5s all ease-in-out;
	z-index: 99999;
}
header.on {
	height: 60px;
}
header .header-container {
	position: relative;
	padding: 0px 3vw;
	height: 100%;
	max-width: var(--page-width);
	margin: auto;
	border-radius: 35px;
	background-color: rgba(255,255,255,0);
	transition: 1s all cubic-bezier(.05,.95,.05,1);
}
@media (max-width: 900px) {
  header .header-container {
	padding: 0px 3vw;
  }
}

header.show .header-container {
	background-color: rgba(255,255,255,0);
}
.logo {
	position: relative;
	float: left;
	left: 0px;
	top: 10px;
	height: 40px;
	width: 126px;
	border: 0px solid var(--primary-1);
	border-radius: 0px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 99999;
	transition: 0.4s all ease-in-out;
}

.homelogo {
	position: absolute;
	right: 152px;
	top: 23px;
	height: 30px;
	width: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 99999;
}

/*==============================*/
/* Menu button                  */
/*==============================*/
.judjangnav {
	position: relative;
	float: right;
	top: 10px;
	margin-left: 10px;
	height: 40px;
	width: 40px;
	z-index: 9999999999999999999999999999999999;
}
.judjangnav:hover {
	cursor: pointer;
}
.judjangnavfilter {
	position: fixed;
	height: 0px;
	width: 0px;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0);
	transition: 0.5s background-color ease-in-out;
	z-index: 999;
}
.judjangnavfilter.on {
	height: 100vh;
	width: 100vw;
	background-color: rgba(255,255,255,0);
}

.judjangnav-dot {
	position: fixed;
	width: 8px;
	height: 8px;
	border-radius: 3px;
	background-color: rgba(60,70,80,1);
}
.judjangnav.on .judjangnav-dot {
	background-color: rgba(60,70,80,1);
}
.judjangnav-dot.a {
	top: 20px;
	right: calc(3vw + 5px);
	transition: 0.2s all ease-in-out 0s;
}
.judjangnav-dot.b {
	top: 20px;
	right: calc(3vw + 15px);
	transition: 0.2s all ease-in-out 0.1s;
}
.judjangnav-dot.c {
	top: 20px;
	right: calc(3vw + 25px);
	transition: 0.2s all ease-in-out 0.2s;
}
.judjangnav-dot.d {
	top: 30px;
	right: calc(3vw + 25px);
	transition: 0.2s all ease-in-out 0.3s;
}
.judjangnav-dot.e {
	top: 30px;
	right: calc(3vw + 15px);
	transition: 0.2s all ease-in-out 0.4s;
}
.judjangnav:hover .judjangnav-dot {
	transition: 0.3s all ease-in-out;
}

.judjangnav:hover .judjangnav-dot.a {
	top: 20px;
	right: calc(3vw + 15px);
}
.judjangnav:hover .judjangnav-dot.b {
	top: 20px;
	right: calc(3vw + 25px);
}
.judjangnav:hover .judjangnav-dot.c {
	top: 30px;
	right: calc(3vw + 25px);
}
.judjangnav:hover .judjangnav-dot.d {
	top: 30px;
	right: calc(3vw + 15px);
}
.judjangnav:hover .judjangnav-dot.e {
	top: 30px;
	right: calc(3vw + 5px);
}

.judjangnav.on .judjangnav-dot.a {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 60px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.b {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 110px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.1s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.c {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 160px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.2s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.d {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 210px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.3s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.e {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 260px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.4s, 0.2s background-color ease-in-out;
}

@media (max-width: 450px) {
.judjangnav.on .judjangnav-dot.a {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 60px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.b {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 110px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.1s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.c {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 160px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.2s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.d {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 210px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.3s, 0.2s background-color ease-in-out;
}
.judjangnav.on .judjangnav-dot.e {
	width: 120px;
	height: 40px;
	border-radius: 20px;
	top: 260px;
	right: calc(3vw + 50px);
	transition: 0.3s all ease-in-out 0.4s, 0.2s background-color ease-in-out;
}
}

.judjangnav-dot.on:hover {
	background-color: rgba(130,140,150,1);
	transition: 0s all ease-in-out;
}

.judjangnav-dot p {
	opacity: 0;
	visibility: hidden;
	font-family: titles;
	font-size: 14px;
	line-height: 40px;
	letter-spacing: -0.03em;
	color: rgba(255,255,255,1);
	margin: 0;
	width: 100%;
	text-align: center;
	transition: 0.3s all ease-in-out 0s;
}
.judjangnav-dot.on p {
	opacity: 1;
	visibility: visible;
}
.judjangnav-dot.on.a p {
	transition: 0.3s all ease-in-out 0.1s;
}
.judjangnav-dot.on.b p {
	transition: 0.3s all ease-in-out 0.2s;
}
.judjangnav-dot.on.c p {
	transition: 0.3s all ease-in-out 0.3s;
}
.judjangnav-dot.on.d p {
	transition: 0.3s all ease-in-out 0.4s;
}
.judjangnav-dot.on.e p {
	transition: 0.3s all ease-in-out 0.5s;
}


/*==============================*/
/* Buttons                      */
/*==============================*/
.menu-item-button {
	position: relative;
	float: right;
	left: 0px;
	top: 10px;
	height: 40px;
	width: 120px;
	border: 0px solid var(--primary-1);
	border-radius: 0px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 99999;
	transition: 0.4s all ease-in-out;
}
.menu-item-button-inner {
	position: absolute;
	box-sizing: border-box;
	margin: auto;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: 100%;
	border: 0px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(60,70,80,1);
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1.6) 0.1s;
}
.menu-item-button p {
	position: relative;
	top: 14px;
	font-family: titles;
	letter-spacing: -0.03em;
	font-size: 14px;
	text-decoration: none;
	margin: 0px 20px 0px 20px;;
	line-height: 12px;
	text-align: center;
	color: rgba(250,190,60,1);
	transition: 0.2s all ease-in-out;
}
.menu-item-button:hover {
	transition: 0.2s all ease-in-out;
}
.menu-item-button:hover .menu-item-button-inner {
	width: 40px;
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1);
}
.menu-item-button:hover p {
	transition: 0.2s all ease-in-out;
	animation-name: menuitembutton;
	animation-duration: 0.2s;
	animation-iteration-count: 1;
}
@keyframes menuitembutton {
  0% {bottom: 0px;}
  50% {bottom: 12px;}
  51% {bottom: -12px;}
  100% {bottom: 0px;}
}

.custombutton {
	position: relative;
	display: inline-block;
	font-family: titles;
	font-size: 14px;
	text-decoration: none;
	line-height: 40px;
	height: 40px;
	padding: 0px 20px;
	width: fit-content;
	color: rgba(255,255,255,1);
	border: 0px solid var(--primary-1);
	border-radius: 20px;
	background-color: rgba(60,70,80,1);
	transition: 0.1s all ease-in-out;
}
.custombutton:hover {
	cursor: pointer;
	color: rgba(250,190,60,1);
}
.customsubbutton {
	position: relative;
	display: inline-block;
	font-family: titles;
	font-size: 14px;
	text-decoration: none;
	line-height: 40px;
	height: 40px;
	padding: 0px 20px;
	width: fit-content;
	color: rgba(255,255,255,1);
	border: 0px solid var(--primary-1);
	border-radius: 20px;
	background-color: rgba(60,70,80,1);
	transition: 0.1s all ease-in-out;
	
}
.customsubbutton:hover {
	cursor: pointer;
	color: rgba(250,190,60,1);
}
.asp_product_buy_btn_container {
	width: 100%;
	text-align: center;
}

.qidd-button {
	position: relative;
	margin: 17px 5px 25px 5px;
	height: 45px;
	width: fit-content;
	padding: 0px 15px 0px 15px;
	border: 1.5px solid var(--primary-1);
	border-radius: 30px;
	background-image: linear-gradient(var(--primary-2), var(--primary-2));
	background-size: 100% 0%;
	background-position: bottom;
	background-repeat: no-repeat;
	transition: 0.2s background-size ease-in-out 0.4s, 0.2s padding ease-in-out 0.2s;
}
.qidd-button p {
	font-family: menu;
	font-size: 12px;
	text-decoration: none;
	margin: 0;
	line-height: 45px;
	text-align: center;
	color: var(--primary-1);
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	transition: 0.2s all ease-in-out 0.4s;
}
.qidd-button:hover {
	cursor: pointer;
	padding: 0px 30px 0px 15px;
	border: 1.5px solid var(--primary-1);
	border-radius: 30px;
	background-size: 100% 100%;
	transition: 0.2s background-size ease-in-out 0s, 0.2s padding ease-in-out 0.2s, 0.2s border-radius ease-in-out 0.2s;
}
.qidd-button-arrow-1 {
	content: "";
	position: absolute;
	top: 18px;
	right: 13px;
	width: 8px;
	height: 8px;
	transform: scale(0,0);
	border-right: 1.5px solid rgba(255,255,255,0);
	border-bottom: 1.5px solid rgba(255,255,255,0);
	transition: 0.2s all ease-in-out 0s;
}
.qidd-button:hover .qidd-button-arrow-1 {
	transform: scale(1,1);
	border-right: 1.5px solid var(--secondary-1);
	border-bottom: 1.5px solid var(--secondary-1);
	transition: 0.2s all ease-in-out 0.4s;
}
.qidd-button-arrow-2 {
	content: "";
	position: absolute;
	transform: rotate(45deg) scale(0,0);
	top: 10px;
	right: 7px;
	width: 13px;
	height: 13px;
	border-bottom: 1.5px solid rgba(255,255,255,0);
	background-color: rgba(255,255,255,0);
	transition: 0.2s all ease-in-out 0s;
}
.qidd-button:hover .qidd-button-arrow-2 {
	transform: rotate(45deg) scale(1,1);
	border-bottom: 1.5px solid var(--secondary-1);
	transition: 0.2s all ease-in-out 0.4s;
}
.qidd-button:hover p {
	color: var(--secondary-1);
	transition: 0.2s all ease-in-out;
}

/*==============================*/
/* Navigation menu              */
/*==============================*/
nav {
	position: absolute;
	float: right;
	right: 0;
	padding: 20px 0px;
	height: 40px;
}
.menu-items {
	visibility: visible;
}
.menu-items p, .menu-items a {
	font-family: menu;
	font-size: 15px;
	float: left;
	padding: 0;
	margin: 0 5px;
	line-height: 40px;
	transition: 0.2s all ease-in-out;
}
.menu-items p:hover {
	cursor: pointer;
	color: var(--secondary-1);
}

.menu-button {
	visibility: hidden;
}
@media (max-width: 1px) {
.menu-items {
	visibility: hidden;
	opacity: 0;
	padding-top: 80px;
	top: 0;
	left: 0;
	position: fixed;
	height: 100vh;
	width: 100vw;
	background-color: rgba(255,255,255,0.8);
	z-index: 9999;
	transition: 0.3s all ease-in-out;
}
.menu-items p {
	opacity: 0;
	font-size: 30px;
	float: none;
	text-align: center;
	padding: 0;
	margin: 0 10px;
	line-height: 60px;
	transition: 0.3s opacity ease-in-out 0.3s;
}
.menu-items.on {
	opacity: 1;
	visibility: visible;
}
.menu-items.on p {
	opacity: 1;
}
.menu-items.on p:hover {
	color: rgba(100,100,100,1);
}
.menu-button {
	visibility: visible;
	position: absolute;
	top: 17px;
	right: 0;
	margin-right: 20px;
	height: 25px;
	width: 30px;
	z-index: 99999;
}
.menu-button:hover {
	cursor: pointer;
}
.menu-line {
	position: absolute;
	height: 4px;
	width: 100%;
	background-color: rgba(0,0,0,1);
	transition: 0.2s all ease-in-out;
}
.menu-line.top {top: 0px;}
.menu-line.middle {top: 11px;}
.menu-line.bottom {top: 22px;}

.menu-button.on .menu-line.top {
	top: 11px;
	transform: rotate(45deg);
}
.menu-button.on .menu-line.middle {
	opacity: 0;
}
.menu-button.on .menu-line.bottom {
	top: 11px;
	transform: rotate(-45deg);
}
}

/*==============================*/
/* Page layout                  */
/*==============================*/
.container {
	position: relative;
	box-sizing: border-box;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0px;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.container.full-width{width: 100%;}
.container.part-width{max-width: 1000px;}

.h100 {min-height: 100%;}
.h90 {min-height: 90%;}
.h80 {min-height: 80%;}
.h70 {min-height: 70%;}
.h60 {min-height: 60%;}
.h50 {min-height: 50%;}
.h40 {min-height: 40%;}
.h30 {min-height: 30%;}
.h20 {min-height: 20%;}
.h10 {min-height: 10%;}
.vh100 {min-height: 100vh;}
.vh90 {min-height: 90vh;}
.vh80 {min-height: 80vh;}
.vh70 {min-height: 70vh;}
.vh60 {min-height: 60vh;}
.vh50 {min-height: 50vh;}
.vh40 {min-height: 40vh;}
.vh30 {min-height: 30vh;}
.vh20 {min-height: 20vh;}
.vh10 {min-height: 10vh;}

.w100 {min-width: 100%;}
.w90 {min-width: 90%;}
.w80 {min-width: 80%;}
.w70 {min-width: 70%;}
.w60 {min-width: 60%;}
.w50 {min-width: 50%;}
.w40 {min-width: 40%;}
.w30 {min-width: 30%;}
.w20 {min-width: 20%;}
.w10 {min-width: 10%;}

.offset {margin-top: -40px;}
.white {background-color: rgba(255,255,255,1);}
.light {background-color: var(--primary-8);;}
.curved {border-radius: 20px;}

/*==============================*/
/* IPAD ANIMATION               */
/*==============================*/
.ipad-container {
	position: relative;
	margin-top: 60px;
	min-height: calc(440vh - 60px);
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.ipad-container h1, .ipad-container h2, .ipad-container h3, .ipad-container h4, .ipad-container h5, .ipad-container h6, .ipad-container p {
	text-shadow: 0px 0px 10px rgba(255,255,255,1);
}
.ipad-window {
	position: absolute;
	top: 50vh;
	left: 50%;
	transform: translateX(-50%);
	height: calc(90vh - 60px);
	width: calc(65vh - 60px);
	box-shadow: 15px 15px 10px rgba(0,0,0,0.3);
	border-radius: 33px;
	background-color: rgba(0,0,0,0);
	overflow: hidden;
	transition: transform 0.5s cubic-bezier(.42,.1,.58,1), width 0.5s cubic-bezier(.42,.1,.58,1), height 0.5s cubic-bezier(.42,.1,.58,1), rotate 0.5s cubic-bezier(.42,.1,.58,1), filter 0.5s cubic-bezier(.42,.1,.58,1), left 0.5s cubic-bezier(.42,.1,.58,1), right 0.5s cubic-bezier(.42,.1,.58,1), bottom 0.5s cubic-bezier(.42,.1,.58,1), margin-top 0.5s cubic-bezier(.42,.1,.58,1);	
	
	animation-duration: 5s;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes ipadwindow {
  0% {rotate: -4deg; margin-top: 0px;}
  100% {rotate: 4deg; margin-top: 10px;}
}

.ipad-window.fix {
	position: fixed;
	top: calc(3vh + 60px);
	left: calc(50% - 65vh - 60px);
	rotate: -5deg;
	transform: translateX(0%);
}
.ipad-window.final {
	left: 50%;
	transform: translateX(-50%);
}
.ipad-window.out {
	transform: translateX(-50%) scale(0,0);
}

@keyframes ipadreset {
  100% {rotate: 0deg; margin-top: 0px;}
}

.ipad {
	position: absolute;
	opacity: 0;
	left: 0%;
	height: calc(90vh - 60px);
	width: calc(65vh - 60px);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0.5s cubic-bezier(.42,.1,.58,1);
}
.ipad.on {
	opacity: 1;
}

@media (max-width: 450px) {
	.ipad-window, .ipad {
		height: calc(80vh - 60px);
		width: calc(58vh - 60px);
	}
}

@media (max-width: 450px) {
	.ipad-window.fix, .ipad-window.fix .ipad {
		height: calc(50vh - 60px);
		width: calc(36vh - 60px);
	}
	.ipad-window.fix {
		position: fixed;
		top: calc(3vh + 60px);
		left: calc(-10vw);
		rotate: -5deg;
		transform: translateX(0%);
	}
	.ipad-window.final {
		left: 50%;
		transform: translateX(-50%);
	}
	.ipad-window.out {
		transform: translateX(-50%) scale(0,0);
	}
	.ipad-window.final, .ipad-window.final .ipad {
		height: calc(80vh - 60px);
		width: calc(58vh - 60px);
	}
}


.ipad-window.fixed .ipad {
	rotate: -5deg;
}
.ipad.fix {
	position: fixed;
	top: calc(5vh + 60px);
}
#ipadl {
	position: fixed;
	visibility: hidden;
	top: calc(5vh + 60px);
}
#ipadr {
	position: fixed;
	visibility: hidden;
	top: calc(5vh + 60px);
}
#ipadl.fixl {
	position: fixed;
	visibility: visible;
	margin-top: 20px;
	top: calc(5vh + 60px);
	left: calc(50% - 150px);
}
#ipadr.fixr {
	position: fixed;
	visibility: visible;
	margin-top: 20px;
	top: calc(5vh + 60px);
	left: calc(50% + 150px);
}
.ipad.a {
	top: 60vh;
}
.ipad.b {
	top: 20vh;
	left: 20vw;
	transform: translateX(-50%) rotate(-10deg) scale(0.8, 0.8);
}

#ipadScreen {
	position: absolute;
	opacity: 0;
	top: 3.7%;
	left: 5%;
	height: 92.6%;
	width: 90%;
	border-radius: 1%;
	background-color: rgba(255,255,255,1);
	z-index: 999999;
	transition: all 0.5s ease-in-out;
}
#ipadScreen.on {
	opacity: 1;
}
#ipadScreen h2 {
	position: absolute;
	font-family: script;
	top: 50%;
	transform: translateY(-50%);
	padding: 10%;
	text-align: center;
	color: rgba(255,145,115,1);
}

.ipad-circle {
	position: fixed;
	border-radius: 50%;
	border: 0px solid rgba(0,0,0,0.2);
	z-index: -1;
	animation-duration: 10s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.79,.3,.91,.34);
}
#ipad-circle-1 {
	background-color: rgba(175,220,235,0.5);
	animation-name: circle1;
}
#ipad-circle-2 {
	background-color: rgba(175,220,235,0.5);
	transform: translate(-50%, -50%);
	animation-name: circle2;
}
#ipad-circle-3 {
	background-color: rgba(175,220,235,0.5);
	transform: translate(-50%, -50%);
	animation-name: circle3;
}

@keyframes circle1 {
  0% {top: 50%; left: 50%; height: 0vw; width: 0vw; opacity: 1; filter: blur(0px);}
  100% {top: 20%; left: 0%; height: 4vw; width: 4vw; opacity: 0; filter: blur(0px);}
}
@keyframes circle2 {
  0% {top: 100%; left: 100%; height: 6vw; width: 6vw;}
  25% {top: 65%; left: 80%; height: 3vw; width: 3vw;}
  50% {top: 20%; left: 50%; height: 5vw; width: 5vw;}
  65% {top: 85%; left: 90%; height: 2vw; width: 2vw;}
  100% {top: 20%; left: 0%; height: 4vw; width: 4vw;}
}
@keyframes circle3 {
  0% {top: 100%; left: 0%; height: 4vw; width: 4vw;}
  20% {top: 45%; left: 20%; height: 5vw; width: 5vw;}
  45% {top: 60%; left: 30%; height: 2vw; width: 2vw;}
  70% {top: 25%; left: 50%; height: 7vw; width: 7vw;}
  100% {top: 80%; left: 90%; height: 5vw; width: 5vw;}
}

.ipad-title {
	position: fixed;
	opacity: 1;
	top: 30vh;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.ipad-title.in {
	opacity: 1;
	top: 20vh;
}
.ipad-title h1 {
	font-family: display;
	text-align: center;
	color: rgba(50,50,50,1);
}
.ipad-title h6 {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	color: rgba(255,145,115,1);
}
.ipad-text-1 {
	position: absolute;
	top: 140vh;
	width: 50vw;
	min-width: 250px;
	right: 3vw;
}
.ipad-text-2 {
	position: absolute;
	top: 240vh;
	width: 50vw;
	min-width: 250px;
	right: 3vw;
}
.ipad-text-X {
	position: absolute;
	text-align: center;
	top: 200vh;
	width: 94vw;
	max-width: 800px;
	left: 50%;
	transform: translateX(-50%);
}
.ipad-text-X h2 {
	font-family: script;
	text-align: center;
	color: rgba(255,145,115,1);
}


/*==============================*/
/* GRID CONTAINERS              */
/* title, cols-2, cards         */
/*==============================*/
.grid-container {
	position: relative;
	display: grid;
	padding: 0px 3vw;
	margin: auto;
    margin-top: 50px;
	width: 100%;
	column-gap: 30px;
	row-gap: 30px;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.grid-container.nocustomfields {
	margin-top: 120px;
	min-height: 100vh;
}
.grid-container.title {
    min-height: calc(100vh - 70px);
	grid-template-columns: 50% auto;
}
.grid-container.image_text {
	min-height: 60vh;
	grid-template-columns: auto;
}
.grid-container.image_animation {
	height: calc(300vh - 60px);
	grid-template-columns: auto;
}
.grid-container.cols-1 {
	grid-template-columns: auto;
}
.grid-container.cols-2 {
	grid-template-columns: 50% auto;
}
.grid-container.blocks {
	grid-template-columns: 32% 32% 32%;
	row-gap: 15px;
	column-gap: 2%;
}
@media (max-width: 900px) {
	.grid-container.blocks {
		grid-template-columns: auto;
		row-gap: 40px;
	}
}

.grid-container.packages {
	grid-template-columns: 33.3% 33.3% auto;
	row-gap: 15px;
	column-gap: 15px;
}
@media (max-width: 900px) {
	.grid-container.packages {
		grid-template-columns: auto;
		row-gap: 2px;
	}
}
.grid-container.cards {
	grid-template-columns: 50% auto;
}
.grid-container.cards_large {
	grid-template-columns: 50% auto;
}
@media (max-width: 900px) {
    .grid-container.title {
        grid-template-columns: auto;
    }
    .grid-container.cols-1 {
        
    }
	.grid-container.cols-2 {
		grid-template-columns: auto;
	}
	.grid-container.cards {
	grid-template-columns: auto;
	}
	.grid-container.cards_large {
		grid-template-columns: auto;
	}
}

/*==============================*/
/* IMAGE ANIMATION              */
/*==============================*/
.image_animation_container {
	position: relative;
	margin-top: 60px;
}

.image_animation_image {
	position: fixed;
	height: calc(100vh - 80px);
	width: 50%;
	left: 20px;
	border-radius: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media (max-width: 900px) {
	.image_animation_image {
		left: 10px;
		height: calc(100vh - 80px);
		width: calc(100% - 20px);
	}
}

.image_animation_content_container {
	position: relative;
	float: right;
	padding: 0px 5vw;
	box-sizing: border-box;
	width: 50%;
	height: fit-content;
}
@media (max-width: 900px) {
	.image_animation_content_container {
		width: 80%;
	}
}
.image_animation_content_wrapper {
	position: relative;
	width: 100%;
	min-height: 100vh;
}
.image_animation_content_inner {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 900px) {
	.image_animation_content_inner {
		top: 60%;
		transform: translateY(0%);
		background-color: rgba(255,255,255,1);
		border-radius: 20px;
		padding: 20px;
	}
}


.image_animation_content {
	opacity: 0;
	padding: 0px 5vw;
	position: absolute;
	box-sizing: border-box;
	margin-top: 30vh;
	width: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: 0.3s all ease-in-out;
}
.image_animation_content.on {
	opacity: 1;
	margin-top: 0;
}
#image_animation_content_1 {
	top: 50vh;
}
#image_animation_content_2 {
	top: 125vh;
}
#image_animation_content_3 {
	top: 200vh;
}





.image_animation_bookmark {
	position: relative;
	height: 50vh;
	width: 100%;
}
.image_animation_text {
	opacity: 0;
	padding: 0px 5vw;
	position: fixed;
	box-sizing: border-box;
	width: 50%;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: 0.5s opacity ease-in-out;
}
.image_animation_text.on {
	opacity: 1;
}
.image_animation_text span {
	position: relative;
	opacity: 0;
	top: 0px;
	transform: scale(0,0);
}
.image_animation_text.on span {
	animation-name: letter;
	top: 0px;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes letter {
  0% {transform: scale(0,0); top: 0px; opacity: 0;}
  100% {transform: scale(1,1); top: 0px; opacity: 1;}
}
.image_animation_text.off {
	opacity: 1;
	transition: 1s top ease-in-out;
	top: -100% !important;
}

/*==============================*/
/* GRID ITEMS                   */
/*==============================*/
.grid-item {
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	border-radius: 20px;
	background-color: rgba(255,255,255,0);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-clip: border-box;
}
.grid-item.full-width {
	grid-column: span 2;
	align-items: center;
}
.grid-container .grid-item.image {
	min-height: 0;
}
.grid-container.title .grid-item {
	justify-content: end;
}
@media (max-width: 900px) {
	.grid-item.full-width {
		grid-column: span 1;
	}
	.grid-container .grid-item.image {
		min-height: 50vh;
	}
	.grid-container.title .grid-item {
		justify-content: start;
	}
}

.grid-container.image_text .grid-item {
	justify-content: center;
	align-items: center;
	padding: 20px;
}
.grid-container.image_text .grid-item h1, .grid-container.image_text .grid-item h2, .grid-container.image_text .grid-item p {
	text-shadow: 0px 0px 20px rgba(0,0,0,1);
}

.grid-container.blocks .grid-item {
	padding: 20px;
	height: 100%;
	width: 100%;
	border: 0px solid var(--primary-8);
	border-radius: 15px;
	box-sizing: border-box;
	background-color: rgba(235,235,235,1);
}

.grid-container.blocks .grid-item h1, .grid-container.blocks .grid-item h2, .grid-container.blocks .grid-item h3, .grid-container.blocks .grid-item h4, .grid-container.blocks .grid-item h5, .grid-container.blocks .grid-item h6, .grid-container.blocks .grid-item p {
	color: var(--text-dark);
}

.grid-container.blogposts {
	grid-template-columns: 25% 25% 25% 25%;
	row-gap: 0px;
	column-gap: 0px;
	padding: 0;
	margin: 0;
}
@media (max-width: 900px) {
	.grid-container.blogposts {
		grid-template-columns: 33.3% 33.3% 33.3%;
		row-gap: 0px;
	}
}
@media (max-width: 700px) {
	.grid-container.blogposts {
		grid-template-columns: 50% 50%;
		row-gap: 0px;
	}
}
@media (max-width: 600px) {
	.grid-container.blogposts {
		grid-template-columns: auto;
		row-gap: 0px;
	}
}
.grid-container.blogposts a {
	margin: 0;
}
.grid-container.blogposts .grid-item {
	padding: 0;
	margin: 0;
	height: 25vw;
	width: 100%;
	border: 0px solid var(--primary-8);
	border-radius: 0px;
	box-sizing: border-box;
	overflow: hidden;
}
@media (max-width: 900px) {
	.grid-container.blogposts .grid-item {
		height: 33vw;
	}
}
@media (max-width: 700px) {
	.grid-container.blogposts .grid-item {
		height: 50vw;
	}
}
@media (max-width: 600px) {
	.grid-container.blogposts .grid-item {
		height: 80vw;
	}
}
.blogpostimage {
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 0px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1.6);
}
.grid-item:hover .blogpostimage {
	filter: brightness(80%);
	-webkit-filter: brightness(80%);
	-moz-filter: brightness(80%);
	-o-filter: brightness(80%);
	-ms-filter: brightness(80%);
}
.blogpostexcerpt {
	position: absolute;
	box-sizing: border-box;
	bottom: 0;
	right: 0;
	padding: 20px;
	width: 90%;
	background-color: rgba(0,0,0,0.4);
}
.grid-container.blogposts .grid-item h4, .grid-container.blogposts .grid-item p {
	color: rgba(255,255,255,1);
}
.grid-container.blogposts .grid-item h4 {
	font-size: 18px;
}
.grid-container.blogposts .grid-item p {
	font-size: 14px;
}

.grid-container.fullblocks {
	grid-template-columns: auto auto auto;
	row-gap: 0px;
	column-gap: 0px;
	padding: 0px;
}
@media (max-width: 900px) {
	.grid-container.fullblocks {
		grid-template-columns: auto;
		row-gap: 0px;
	}
}
.grid-container.fullblocks .grid-item {
	padding: 20px;
	min-height: 100vh;
	width: 100%;
	border: 0px solid var(--primary-8);
	border-radius: 0px;
	box-sizing: border-box;
}
@media (max-width: 900px) {
	.grid-container.fullblocks .grid-item {
		min-height: 50vh;
	}
}

.grid-container.fullblocks .grid-item h1, .grid-container.fullblocks .grid-item h2, .grid-container.fullblocks .grid-item h3, .grid-container.fullblocks .grid-item h4, .grid-container.fullblocks .grid-item h5, .grid-container.fullblocks .grid-item h6, .grid-container.fullblocks .grid-item p {
	color: var(--text-dark);
}
.grid-container.fullblocks.threequarters .grid-item {
	min-height: 75vh;
}
.grid-container.fullblocks.half .grid-item {
	min-height: 50vh;
}

.grid-container.pagetitle {
	grid-template-columns: auto;
	row-gap: 0px;
	column-gap: 0px;
	padding: 0px;
	background-color: rgba(236,230,216,1);
	min-height: 40vh;
	margin-top: 0px;
	padding: 80px 3vw 30px 3vw;
}
.grid-container.pagetitle .grid-item {
	max-width: 900px;
	margin: auto;
}

.grid-container.packages .grid-item {
	padding: 25px;
	outline: 2px solid rgba(255,255,255,1);
	outline-offset: -7px;
	background-color: var(--primary-8);
}
.package-container {
	position: relative;
	padding: 20px;
	height: 100%;
	width: 100%;
	border: 0px solid var(--primary-8);
	border-radius: 15px;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.package-header {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.package-header img {
	margin-left: 50%;
	margin-top: -50px;
	margin-bottom: 20px;
	transform: translateX(-50%);
}
.package-content {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
	box-sizing: border-box;
}
.package-footer {
	position: relative;
	bottom: 20px;
	width: 100%;
	box-sizing: border-box;
}

.grid-item.narrow {
	max-width: 900px;
	margin: auto;
}
.grid-item.padded {
	padding: 100px 20px;
}
.grid-item.pricing {
	padding: 25px;
	outline: 5px solid rgba(255,255,255,1);
	outline-offset: -10px;
	background-color: var(--primary-8);
}
.grid-item.shaded {
	background-color: rgba(230,230,230,1);
	padding: 100px;
}
.grid-item.shaded h1, .grid-item.shaded h2, .grid-item.shaded h3, .grid-item.shaded h4, .grid-item.shaded h5, .grid-item.shaded h6, .grid-item.shaded p {
	color: rgba(0,0,0,1);
}

.grid-item.yellow {
	background-color: rgba(236,230,216,1);
}
.grid-item.red {
	background-color: rgba(238,198,184,1);
}
.grid-item.purple {
	background-color: rgba(185,135,230,0.3);
}
.grid-item.blue {
	background-color: rgba(176,225,229,1);
}
.grid-item.turquoise {
	background-color: rgba(100,215,225,0.3);
}



.grid-item h1 {
	
}
.grid-item h2 {
	
}
.grid-item h3 {
	
}
.grid-item h4 {
	
}
.grid-item h5 {
	
}
.grid-item h6 {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.grid-item.justify-left{justify-content: left;}
.grid-item.justify-right{justify-content: right;}
.grid-item.align-start{align-items: start;}
.grid-item.align-centre{align-items: center;}
.grid-item.align-end{align-items: end;}
.grid-item.justify-start{justify-content: start;}
.grid-item.justify-centre{justify-content: center;}
.grid-item.justify-end{justify-content: end;}
.grid-item.vertical{flex-direction: column;}
.grid-item.s-1{grid-column-start: 1;}
.grid-item.s-2{grid-column-start: 2;}
.grid-item.s-3{grid-column-start: 3;}
.grid-item.s-4{grid-column-start: 4;}
.grid-item.s-5{grid-column-start: 5;}
.grid-item.s-6{grid-column-start: 6;}
.grid-item.s-7{grid-column-start: 7;}
.grid-item.s-8{grid-column-start: 8;}
.grid-item.s-9{grid-column-start: 9;}
.grid-item.s-10{grid-column-start: 10;}
.grid-item.s-11{grid-column-start: 11;}
.grid-item.s-12{grid-column-start: 12;}

.grid-item.e-1{grid-column-end: 1;}
.grid-item.e-2{grid-column-end: 2;}
.grid-item.e-3{grid-column-end: 3;}
.grid-item.e-4{grid-column-end: 4;}
.grid-item.e-5{grid-column-end: 5;}
.grid-item.e-6{grid-column-end: 6;}
.grid-item.e-7{grid-column-end: 7;}
.grid-item.e-8{grid-column-end: 8;}
.grid-item.e-9{grid-column-end: 9;}
.grid-item.e-10{grid-column-end: 10;}
.grid-item.e-11{grid-column-end: 11;}
.grid-item.e-12{grid-column-end: 12;}

.grid-item.justify-centre img{
    margin-left: 50%;
	transform: translateX(-50%);
}

/*==============================*/
/* GRID VARIABLES               */
/*==============================*/
.bg-transparent {
    background-color: rgba(255,255,255,0);
}
.bg-light {
    background-color: rgba(255,255,255,1);
}
.bg-medium {
    background-color: var(--primary-5);
}
.bg-dark {
    background-color: var(--primary-3);
}


/*==============================*/
/* QIDD CARD                    */
/*==============================*/
.qidd-card {
	position: relative;
	width: 100%;
	min-height: 150px;
}
.qidd-card-image {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
	width: 150px;
	height: 150px;
	border-radius: 20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.qidd-card-content {
	position: relative;
	margin-left: 180px;
	top: 50%;
	transform: translateY(-50%);
}


/*===================================
 ACCORDIAN
=====================================*/
.grid-item.accordian-image {
	min-height: calc(100vh - 80px);
	overflow: hidden;
}
@media (max-width: 900px) {
	.grid-item.accordian-image {
		min-height: 70vh;
	}
	.grid-item.accordian-content {
		min-height: 30vh;
	}
}
.accordian-item {
	position: relative;
}
.grid-item.accordian-image.full {
	min-height: calc(100vh - 80px);
}
.grid-item.accordian-image.threequarters {
	min-height: calc(75vh - 80px);
}
.grid-item.accordian-image.half {
	min-height: calc(50vh - 80px);
}

/*===================================
 POST FRONT PAGE
=====================================*/
.grid-item.postpage-image, .grid-item.postpage-content {
	min-height: calc(70vh - 80px);
	overflow: hidden;
}
@media (max-width: 900px) {
	.grid-item.postpage-image {
		min-height: 70vh;
	}
	.grid-item.postpage-content {
		min-height: 30vh;
	}
}
.postpage-item {
	position: relative;
}




/*==============================*/
/* Page misc                    */
/*==============================*/
.background-fade {
	position: relative;
	margin-top: -50px;
	width: 100vw;
	height: 50px;
	background-image: linear-gradient(to top, rgba(195,196,205,1), rgba(195,196,205,0));
}

/*==============================*/
/* Footer                       */
/*==============================*/

.grid-container.footer {
	margin-top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 200px;
	padding: 20px 50px;
	grid-template-columns: 50% 50%;
	column-gap: 20px;
	row-gap: 20px;
	align-items: center;
	justify-content: center;
	border-top: 2px dotted rgba(180,180,180,1);
}
.grid-container.footer .grid-item {
	flex-direction: column;
}
.grid-container.footer .grid-item.left {
	text-align: left;
}
.grid-container.footer .grid-item.right {
	text-align: right;
}
.grid-container.footer .grid-item.left p {
	font-size: 14px;
}
.grid-container.footer .grid-item.right p {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.06em;
	transition: 0.4s all cubic-bezier(0.5,0.8,0,1.6);
}
.grid-container.footer .grid-item.right a {
	text-decoration: none;
}
.grid-container.footer .grid-item.right p:hover {
	letter-spacing: 0.1em;
}


/*==============================*/
/* Buttons                      */
/*==============================*/
.button, .getpaid-submit {
	margin: 10px auto;
	padding: 0px 15px;
	height: 45px;
	width: 150px;
	border-radius: 5px;
	background-color: var(--primary-1);
	background-image: linear-gradient(to bottom right, var(--primary-1) 60%, var(--primary-2) 60%);
	transition: 0.2s all ease-in-out;
}
.button:hover, .getpaid-submit:hover {
	cursor: pointer;
}
.button p, .button a, .getpaid-submit p {
	font-family: titles;
	font-size: 16px;
	text-decoration: none;
	margin: 0;
	line-height: 45px;
	text-align: center;
	color: var(--secondary-1);
}
.button:hover p, .button:hover a, .getpaid-submit:hover p {
	color: rgba(255,255,255,1);
}

.button {
	padding: 0px 10px !important;
	border-radius: 25px;
	background-color: var(--primary-1);
	background-image: linear-gradient(to bottom right, var(--primary-1) 60%, var(--primary-2) 60%);
	transition: 0.2s all ease-in-out;
}
.button p {
	text-transform: none !important;
	letter-spacing: 0px !important;
}

/*==============================*/
/* Reveal animations            */
/*==============================*/

.reveal {
	opacity: 1 !important;
	transform: translate(0px, 0px) !important;
	transition: 2s all cubic-bezier(.05,.95,.05,1), 1s opacity ease-in-out;
}

.reveal-fly-left {
	opacity: 0;
	transform: translateX(-100%);
	transition: 2s all cubic-bezier(.05,.95,.05,1), 1s opacity ease-in-out;
}
.reveal-fly-right {
	opacity: 0;
	transform: translateX(100%);
	transition: 2s all cubic-bezier(.05,.95,.05,1), 1s opacity ease-in-out;
}
.reveal-fade {
	opacity: 0;
	transition: 2s all cubic-bezier(.05,.95,.05,1), 1s opacity ease-in-out;
}

.original {
	opacity: 0;
	top: 200px;
	transition: 2s top cubic-bezier(.05,.95,.05,1), 1s opacity ease-in-out;
}

.image-open-horizontal {
	position: absolute;
	height: 100%;
	width: 50%;
	background-color: var(--primary-8);
	transition: 1s all cubic-bezier(.19,.6,.93,.19);
}
.image-open-horizontal.left {
	left: 0;
}
.image-open-horizontal.right {
	right: 0;
}
.image-open-horizontal.left.open {
	left: -50%;
}
.image-open-horizontal.right.open {
	right: -50%;
}


/*==============================*/
/* Get Paid plugin              */
/*==============================*/

#getpaid-payment-modal {
	z-index: 99999999999999999999999999;
	font-family: standard;
}
.getpaid h1, .getpaid h2, .getpaid h3, .getpaid h4, .getpaid h5, .getpaid h6 {
	font-family: titles !important;
}

label, input, .getpaid-payment-form-element {
	font-family: standard !important;
}

/*==============================*/
/* Google ReCaptcha             */
/*==============================*/
.grecaptcha-badge {
	visibility: hidden;
}

/*==============================*/
/* Frontpage animation          */
/*==============================*/
.frontdiv-wrapper {
	position: relative;
	height: 100%;
	width: 100%;
}
.frontdiv-item {
	position: relative;
	height: 25%;
	width: 100%;
}
.frontdiv-box {
	position: relative;
	float: left;
	top: 50%;
	transform: translateY(-50%);
	height: 10vh;
	width: 	10vh;
	border: 10px solid rgba(255,145,115,1);
	border-radius: 10px;
}
.frontdiv-tick {
	position: absolute;
	top: -25%;
	left: -25%;
	height: 150%;
	width: 150%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(0,0);
	animation-name: tick1;
	animation-duration: 0.5s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes tick1 {
  0% {transform: scale(0,0);}
  95% {transform: scale(1.1,1.1);}
  100% {transform: scale(1,1);}
}
.frontdiv-label {
	position: relative;
	float: left;
	top: 50%;
	transform: translateY(-50%);
}

.scroller {
	position: relative;
	min-height: 160px;
	width: 100%;
	background-color: rgba(175,220,235,1);
	border-radius: 20px;
}
.scroller-item {
	position: relative;
	height: 100%;
	width: 100%;
}
.scroller-item-image {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%) scale(0,0);
	width: 120px;
	height: 120px;
	border-radius: 20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	animation-name: scrollerimage;
	animation-duration: 0.5s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes scrollerimage {
  0% {transform: translateY(-50%) scale(0,0);}
  100% {transform: translateY(-50%) scale(1,1);}
}
.scroller-item-text {
	position: relative;
	margin-left: 180px;
	top: 50%;
	transform: translateY(-50%);
}
.scroller-item-text h2, .scroller-item-text h3, .scroller-item-text h4, .scroller-item-text h5, .scroller-item-text h6 {
	font-size: 14px;
}	

.frontpage .image-laptop {
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 50%;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}
.frontpage .image-mobile {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30%;
	height: 60%;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}

/*==============================*/
/* Stripe payments styling      */
/*==============================*/

.asp_product_item_top, .asp_product_description, .asp_price_container {
	display: none;
}
.asp_product_item {
	border: none !important;
}