@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Sixtyfour+Convergence&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
body {
    font-family: "Calibri", sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
* {
	font-family: "Calibri", sans-serif;
}
@keyframes slide {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100vw)}
}
@keyframes levitate {
    0% {transform: rotate3d(0, 0, 0, 0deg)}
    25% {transform: rotate3d(90, 30, 20, 10deg) skewY(2deg);}
	50% {
		transform: scaleX(1.2);
	}
    75% {transform: rotate3d(-90, -30, -20, 10deg) skewY(-2deg);}
    100% {transform: rotate3d(0, 0, 0, 0deg)}
}
@keyframes fades {
    0% {background-color: red}
    10% {background-color: greenyellow}
    20% {background-color: blue}
    30% {background-color: orange}
    40% {background-color: mediumpurple}
    50% {background-color: cadetblue}
    60% {background-color: peachpuff}
    70% {background-color: gold}
    80% {background-color: snow}
    90% {background-color: turquoise}
    100% {background-color: red}
}
p {
    text-align: justify;
    font-size: 1.5em;
}


@keyframes grow {
    0% {transform: rotate(0deg) scale(100%)}
    50% {transform: rotate(180deg) scale(120%);}
    0% {transform: rotate(360deg) scale(100%);}

}

@keyframes slide2 {
    0% {transform: translateX(100vw)}
    100% {transform: translateX(0vw)}
}

a {
    text-decoration: none;
	color: inherit;
}
a:hover {
	font-weight: bold !important;
}

#icon {

}

.navbar {
    background-color: lightgray;
    background-image: linear-gradient(15deg, orange, #ffffff);
    padding: 1em;
}
.navbar ul {
    list-style: none;
    display: inline;


}
.navbar li {
    display: inline;
    font-size: 1.5em;
    padding: 0.75em;
    color: white;
		transition: 0.3ss;

    font-weight: bold;
}
.navbar li:hover {
    display: inline;
    font-size: 1.5em;
    padding: 0.75em;
    color: darkblue;
	transition: 0.3s;
    font-weight: bold;
}
.navbar ul div {
    display: inline;
    margin: 0;
    padding: 0.75em;

}

.content {
    background-color: whitesmoke;
}
.sides {
    padding: 2em 6em
}
.hbox {
    display: flex;
    flex: auto;
    justify-content: center;
}
.hbox > * {
    margin: 30px;
}
.card {
    background-color: white;
    border-radius: 10px;
    padding: 30px 70px ;
	width: 20vw !important;
    margin: 10px;
    text-align: center;
    transition: 0.3s;

}
.card p {
	font-size: 1.5em !important;
}
.card:hover {
    background-color: rgba(211, 211, 211, 0.62);
    padding: 30px 90px ;
    transition: 0.3s;
}
.card h2 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 2.5em;
}
.card button {
    font-family: "IBM Plex Mono", monospace;
    font-size: 3em;
    padding: 0.5em;
    border-radius: 15px;
    border: 0;
}

.triple div {
    width: 30%;
}
.double > * {
    width: 40%

}
.titlecover {
    /*background-color: greenyellow;*/
    padding: 3em;
    height: calc(100vh - 10.5em);
    margin: 0;
    /*background: url("assets/blue_blob.svg");*/
    /*background-size: cover;*/
    font-family: "IBM Plex Mono", monospace;
}

.titlecover h1 {
    background-image: linear-gradient(25deg, skyblue, slateblue 25%);
    -webkit-background-clip: text;
    font-size: 5em;
    -webkit-text-fill-color: transparent;
}
.titlecover h2 {
    font-size: 2em;
    color: black;
    margin-left: 30px;
    margin-top: -1em;
    font-family: "Rubik Mono One", monospace;
    font-weight: lighter;
}
.titlecover h3 {
    background-image: linear-gradient(25deg, darkorange, peru 25%);
    -webkit-background-clip: text;
    font-size: 2.5em;
    -webkit-text-fill-color: transparent;
    margin-left: 30px;
    margin-top: -1em;
}
#titlecover-background {
    z-index: -1 !important;
    position: absolute;
    margin-top: calc(-25vw - 3em);
    margin-left: calc(-25vw - 3em);
    width: 150vw;
    animation: grow 25s linear infinite;
    overflow: hidden

}
#contact1 {
    background-image: linear-gradient(25deg, blueviolet, skyblue );
    font-family: "IBM Plex Mono", monospace;
    font-weight: bold;
    color: whitesmoke;
    display: inline;
    font-size: 2.5em;
    padding: 0.5em 3em;
    border-radius: 15px;
    border: 0;
	    transition: 0.3s;

}
#contact1:hover {
    cursor: pointer;
    transition: 0.3s;
	transform: scale(1.05) rotate(2deg);
}

#bottomwaves {
    position: absolute;
    bottom: 0;
    width: 100vw;
    left: 0;
    height: 10vw;
    animation: slide 15s linear infinite;
}

#bottomwaves2 {
    position: absolute;
    bottom: 0;
    width: 100vw;
    left: 0;
    height: 10vw;
    animation: slide2 15s linear infinite;
}
.points {
    background-image: url('assets/steps.svg');
    background-size: contain;
    background-repeat: repeat-x;
    height: 30em;

}
#hyperclocked {
    background-image: linear-gradient(25deg, greenyellow, skyblue );
    font-family: "IBM Plex Mono", monospace;
    font-weight: bold;
    color: whitesmoke;
    display: inline;
    font-size: 2.5em;
    padding: 0.5em 3em;
    border-radius: 15px;
    border: 0;
}

#hyperclocked:hover {
    background-image: linear-gradient(25deg, #98dd2d, #7cbcd6);

}

.rightline {
    border-right: 3px solid black;
    padding-right: 60px;
}
.leftline {
    border-left: 3px solid black;
    padding-left: 60px;
}
.samples {
    background-color: white;
}
.round {
    border-radius: 50%;
}

.footer {
    background-color: lightgray;
}

.footer h2 {
    color: #8A2BE2FF;
}

.centre {
    text-align: center;
}

quote:before{
    content: '“';
}
quote:after{
    content: '”';
}
quote {
    font-family: "Caveat", cursive;
    font-size: 2em;
}
.headings > th {
    font-size: 1.5em
}
table {
    width: 100%;
}
table img {
    width: 25vw;
}
table img {
    cursor: pointer;
}
			.winbox {
    border-radius: 0.5em;
    background-image: linear-gradient(25deg, #98dd2d, #ffad05);
    box-shadow: 3px 3px 20px 10px lightgray;
}
.wb-min, .wb-max, .wb-full {
    display: none;
}

.wb-close {
    background-image: url("assets/icons/close.svg");
}
.wb-body{
    background-color: whitesmoke;
}


.storage {
    display: none;
}

.main-segment {
	padding: 4vw 15vw;
}
.main-segment:nth-of-type(even) {
	background-color: whitesmoke;
	color: black;
}
.main-segment:nth-of-type(odd){

	background-color: #230F01;
	color: lightgray ;
}
.light-segment {
	background-color: whitesmoke !important;
	color: black !important;
}
.dark-segment {
	background-color: #230F01 !important;
	color: lightgray !important;
}


.title-cover {
	height: auto;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	vertical-align: middle;
	padding: 10vw;
	color: white;

}
.alignbox {
	display: flex;
	justify-content: space-around;
	text-align: center;
	flex-shrink: 0;
	flex-grow: 0;
}
.leftalignbox {
	text-align: left !important;
	justify-content: space-around;
}
.footer {
	background-color: black;
	color: whitesmoke;
	padding: 4vw 15vw;
}
.alignbox div {
	padding: 2vw;
}
.memberships div {
	padding: 0.5vw;
	margin: 0.5vw;
}
.gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	flex-shrink: 0;
	flex-grow: 0;
	font-family: "Roboto" !important;
	color: white;

}
.gallery img {
	width: 20vw;
	height: 20vw;
	object-fit: cover;
	border-radius: 0;
	padding: 0;
	margin: 0;
	display: block;
	border-top-right-radius: 1vw;
	border-top-left-radius: 1vw;
}
.hidden {
	opacity: 0;
	position: absolute;
	z-index: 1;
	background-color: rgba(0,0,0,0.79);
	width: 18vw;
	height: 18vw;
	transform: translateY(-19.25vw) translateX(1vw);
	transition: 0.3s;
	border-radius: 0.5vw;
	display:block;

}
.hidden2 {
	opacity: 0;
	position: absolute;
	z-index: 1;
	background-color: lightsteelblue;
	width: 18vw;
	height: 26.5vw;
	transition: 0.3s;
	border-radius: 0.5vw;
	display:block;
	padding: 0;
	margin: 0;

}
price {
	font-size: 3vw;
	vertical-align: middle;
	height: 3vw;
	line-height: 3vw;
}

.gallery div:hover > .hidden, div:hover > .hidden2  {
	opacity: 1;
	transition: 0.3s;
}
.gallery .display {
	margin: 1vw;
}
.gallery h1 {
	font-weight: 100 !important;
	font-size: 1.5vw !important;
	padding: 0.4vw;
}

.caption {
	width: 20vw;
	height: 3vw;
	background-color: darksalmon;
	padding: 0;
	margin: 0;
	display: block;
	transform: translateY(-1.5vw);
	border-bottom-right-radius: 1vw;
	border-bottom-left-radius: 1vw;

}
.horizon-barrier {
	border-bottom: 0.1vw solid lightgray;
	margin: 1vw;
	background-color: whitesmoke;
}

.dark-horizon-barrier {
	border-bottom: 0.1vw solid lightgray;
	margin: 1vw;
}
.btnblack, .btnblack2 {
	width: 15vw;
	height: 6vw;
	margin: 2vw;
	padding: 2vw;
	font-size:1.5vw;
	background-color: black;
	color: white;
	font-weight: bold;
	border: none;
	border-radius: 0.5vw;
	text-transform: uppercase;
	transition: 0.3s;
}
.center {
	align-self: center;
	text-align: center;
}
.btnblack:hover {
	background-color: darkgray;
	transition: 0.3s;
}
.btnblack2:hover {
	background-color: whitesmoke;
	color: black;
	transition: 0.5s;
}
.btnwhite {
	width: 15vw;
	height: 6vw;
	margin: 2vw;
	padding: 2vw;
	font-size:1.5vw;
	background-color: whitesmoke;
	color: black;
	font-weight: bold;
	border: none;
	border-radius: 0.5vw;
	text-transform: uppercase;
	transition: 0.3s;
}
.btnwhite:hover {
	background-color: lightgray;
	transition: 0.3s;
}
.quote {
	background-color: lightgray;
	color: black;
	font-family: "Brush Script MT";
	padding: 3vw;
	border-radius: 1vw;
}
.quote p {
	font-size: 2vw;
}
.quote::before {
	content: '"';
	float: left;
	font-size: 3vw;
	font-family: "Slackside One";

}
.accent {
	padding: 2vw;
	background-color: whitesmoke;
	color: black;
	font-weight: bold;
	border-radius: 1vw;
	width: 10vw;
	height: auto;
	font-size: 1vw;
	text-align: center;
	transform: rotate(-15deg) translateX(-5vw);
	transition: 0.3s;

}
.accent:hover {
	transform: rotate(-10deg) translateX(-5vw);
	transition: 0.3s;
}
.whitebox {
	background-color:whitesmoke;
	color: black;
	padding: 2vw;
	border-radius: 1vw;
}
.blackbox {
	background-color: black;
	color: whitesmoke;
	padding: 2vw;
	border-radius: 1vw;
}
input {
	border-radius: 0vw;
	width: 5vw;
	padding: 0.5vw;
	font-size: 1vw;
	border: 0vw none transparent;
	width: 20vw;
	border-radius: 1em;
    margin-bottom: 0.5em;
}
input:focus {
	background-color: lightgray;
}
/*!* Text *!*/
/*p, li, td, a, label {font-size: 1vw;}*/

h1 {font-size: 2em;}

/*h2 {font-size: 1.75vw;}*/

/*h3 {font-size: 1.5vw;}*/

mega {
	font-size: 2.5em;
	font-weight: bold;
}

title-cover-text {
	font-family: "Roboto";
	font-size: 8vw;
	font-weight: 700;
	display: block;
}
title-cover-sub-text {
	font-family: "Script MT";
	font-size: 3vw;
	font-weight: 400;
	display: block;
}
.file > img {
	transition: 0.3s !important;
}

.file:hover > img {
	transform: scale(1.25) translateY(2vw)!important;
	transition: 0.3s;
	cursor: url("assets/icons/touch.svg"), pointer !important;
}

#hamburger:hover {

}

#trust {

}

#altering {
    animation: fades 25s linear infinite;
}

.flipped div {
	height: 50vh;
		transition: 1.5s !important;
}

.flipped div:hover > div {
	transform: rotateY(-360deg) rotateX(350deg) rotateZ(170deg) scale(-0.85);
	transition: 1.5s;
	background-color: rgba(211, 211, 211, 0.62);
    padding: 30px 70px !important;

}

.orange-gradient {
	background-image: linear-gradient(25deg, #ffc942, #82dd2d 25%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.spaced * {
	margin: 1vw;
	width: 50%;
}
#visit {
	background-image: linear-gradient(25deg, #ff9100, #9a62ed);
    font-family: "IBM Plex Mono", monospace;
    font-weight: bold;
    color: whitesmoke;
    display: inline;
    font-size: 2.5em;
    padding: 0.5em 3em;
    border-radius: 15px;
    border: 0;
	transition: 0.3s;
}

#visit:hover {
	transform: scale(1.05) rotate(2deg);
	transition: 0.3s;
}

.flipped div div p, .flipped div div img, .flipped div:hover > div h2  {
	transform: scale(0);
	transition: 1.2s;
	height: 0;

}
.flipped div:hover > div p, .flipped div:hover > div img, .flipped div div h2{
	transform: scale(1);
	height: auto;
	transition: 1.2s;
}

form label {
	float: left;
	font-size: 1.5em;
}
form input {
	float: right;
}

#tag {
	    background-image: linear-gradient(25deg, #b367ff, #2743ae);
    -webkit-background-clip: text;
    font-size: 5em;
    -webkit-text-fill-color: transparent;
		animation: levitate 2.5s infinite ease;

}