.purple {
	color: #9ba1d5;
}


.slick-next {
	right: 100px;
	top: 100% !important;
}

.slick-prev {
	left: 100px;
	top: 100% !important;
}

section.social_ads .slick-next {
	right: -80px;
	top: 0% !important;
	transform: rotate(90deg);
}

section.social_ads .slick-prev {
	left: -10px;
	top: 91% !important;
	transform: rotate(90deg);
}

.slick-prev:before,
.slick-next:before {
	font-size: 70px !important;
}


section.title {
	padding-top: 150px;
	text-align: center;
	color: white;
}

section.title h1 {
	display: inline-block;
	font-size: 8rem;
	text-transform: uppercase;
	position: relative;
	letter-spacing: -4px;
}

section.title h1 span {
	color: #9ba1d5;
}

section.title h1 em {
	position: absolute;
	right: 37px;
	top: 5em;
	font-size: 27px;
	opacity: 0.8;
	letter-spacing: -1px;
}

section.logos,
section.website_ads,
section.social_ads,
section.packages_ads,
section.ads {
	position: relative;
}

section.website_ads,
section.packages_ads {
	background-color: rgb(0 0 0 / 45%);
}

section.social_ads .wrap,
section.packages_ads .wrap,
section .wrap {
	padding: 3em calc((100% - 800px)/ 2);
	position: relative;
	left: -25px;
}

section.website_ads .wrap {
	padding: 50px calc((100% - 900px)/ 2);
}

section.logos {
	padding: 0px calc((100% - 1000px)/ 2);
}

section.packages_ads .wrap {
	left: -50px;
}

section.ads .wrap {
	padding-bottom: 6em;
}

section.packages_ads .wrap {
	padding: 6em calc((100% - 900px)/ 2);
}

section.social_ads .wrap {
	padding-top: 2em;
}

section.logos .wrap {
	padding: 0;
	left: 0;
}

.left_float {
	color: white;
	font-size: 3em;
	text-transform: lowercase;
	position: absolute;
	left: 100px;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	opacity: 0.5;
}

.center_float {
	font-size: 3em;
	text-transform: capitalize;
	position: relative;
	text-align: center;
	color: white;
	opacity: 0.5;
}

section.social_ads .center_float {
	margin-top: 1em;
}

section.logos .center_float {
	margin: 0.5em 0em;
}

.social,
.package,
.ad {
	margin: 0em 0em;
}

.package img,
.ad img {
	width: auto;
	height: 400px;
	display: block;
	margin: 0 auto;
	filter: grayscale(1);
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
	transition: all 0.5s;
	cursor: pointer;
}

.package img {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
}

.social img {
	width: 100%;
	height: auto;
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
	cursor: pointer;
}

.package img {
	width: 350px;
	height: auto;
}

.slick-current .package img,
.slick-current .ad img {
	filter: grayscale(0);
	-webkit-transform: scale(1);
	transform: scale(1);
}

section.website_ads .wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-top: 50px;
}

.flip-card {
	background-color: transparent;
	width: 30%;
	height: 435px;
	perspective: 1000px;
	cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.flip-card-inner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	background-color: #bbb;
	color: black;
}

.flip-card-front h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: white;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	width: 55%;
}

/* Style the back side */
.flip-card-back {
	background-color: #1f1f1f;
	color: white;
	transform: rotateY(180deg);
}

.flip-card-back div {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-ransform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 80%;
	font-size: 18px;
	font-weight: 400;
	text-transform: lowercase;
}

.flip-card-back div a {
	color: white;
}

section.logos .wrap {
	margin-top: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

section.logos .wrap .logo {
	width: 150px;
}

section.logos .wrap .logo img {
	display: block;
	margin: 0 auto;
	width: 80%;
	height: auto;
}

#about {
	padding: 200px calc((100% - 800px)/ 2);
	position: relative;
	background-color: rgb(0 0 0 / 45%);
}

#about p {
	text-align: center;
	color: #9ba1d5;
	opacity: 0.5;
	font-size: 25px;
	line-height: 35px;
}

#contact {
	position: fixed;
	right: -150%;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 95%);
	transition: all 0.5s;
}

#contact.open {
	right: 0;
}

#contact .wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#contact .wrap a {
	font-size: 24px;
	display: inline-block;
	margin: 0em 1em;
	text-decoration: none;
	font-weight: 300;
}