@charset "UTF-8";

/* CSS Document */
/* Path: dist/css/styles_extra.css */

/* import the ttf font liberation_sans from folder fonts */
@font-face {
	font-family: 'Couture';
	src: url('../fonts/couture-bld.otf') format('truetype');
}

@font-face {
	font-family: 'LiberationSans-Regular';
	src: url('../fonts/couture-bld.otf') format('truetype');
}


.animated-title {
	color: white;
	font-family: "Couture";
	font-weight: 900;
	font-size: 39px;
	animation: animateTitle 1.5s ease-in-out forwards;
	margin: 60px;
	text-align: center;
}

@keyframes animateTitle {
	from {
		letter-spacing: 0px;
	}
	to {
		letter-spacing: 20px;
	}
}

#aStyle a {
	font-family:"Couture";
}

.icon--cart {
	height: 25px;
    width: 25px;
	fill: black;
}

.social-icon {
}

.social-fill-light {
	fill: white;
}

.social-fill-dark {
	fill: var(--color-2-lightest);
}

.socials-phone {
	display: flex;
    justify-content: center;
	flex-direction: row-reverse;
	z-index: 103;
}

.about-text-intro {
	font-family: "LiberationSans-Bold";
	font-size: var(--text-lg);
	color: black;
	align-self: center;
}

.intro__content-text-container {
	justify-content: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 50px;
}

.s-intro__content a {
	color: var(--color-text-light);
	text-decoration: underline;
}

:root {
    --center-x: calc(50vw - 250px); /* Half of the form width (500px / 2) */
}

.centered-form-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	height: 500px;
	z-index: 100;
    position: absolute; /* Position absolute to the video container */
    top: 50%;
    left: var(--center-x); /* Center horizontally relative to the viewport */
    transform: translateY(-50%);
}

.centered-form {
	flex-direction: row;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 900px;
	height: 500x;
	z-index: 200;
}

.centered-button {
	align-self: center;
	margin: 0;
	background-color: hsla(127, 8%, 14%, 1);
	border-width: 0px;
	color: white;
	font-size: 25px;
}

.centered-input {
	margin: 0;
	background-color: #FFF;
	width: 50vw;
    max-width: 400px;
}

.logo_png {
	width: 	60%;
	top      : 50%;
	transform: translate(-50%, -50%);
	left            : calc(50%);
	position   		: absolute;
	/*cursor: pointer;*/
	margin-bottom:0px;
}

/*
.egen_logo {
	top      : 50%;
	transform: translate(-50%, -50%);
	left            : calc(50%);
	position   		: absolute;
	font-weight: 900;
	font-size: 39px;
	letter-spacing: 20px;
}*/

@media (max-width: 768px) {
	.logo_png {
		left : calc(50% + 0px);
		width: 	80%;
	}
	/*.pinsec{
		max-height:40vh;
	}*/
}

/*
@keyframes animateTitle {
	from {
		letter-spacing: 0px;
	}
	to {
		letter-spacing: 20px;
	}
}*/

.vid-container {
	width: 100vw;
	height: 50vw;
}
 
.f_content {
	position: relative;
	width: 100%;
	height: 500px;
 /* Set the height of your footer */
}

.background-img {
	/*clip-path: inset(0% 0 0 50);*/
	height: 100%;
	max-width: none;
	
    position: absolute; /* Position absolute to the video container */
    
	bottom: 0;
    left: var(--center-x);
    transform: translateX(-25%);
}

.background-im {
	bottom:0px;
	margin-bottom:0px;
	padding:0px;
	max-width: 100%;
	max-height:none;
	width: auto;
	height: auto;
	position: absolute;
}

.pinsec{
	background-color:var(--color-2-dark);
	height:90vh;
	overflow:hidden;
}