body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ccc !important;
	position: relative;
}

.swal2-title {
	margin-left: 5px !important;
}

#staysmart_sign {
	position: fixed;
	top: 10px;
	right: 10px;
	opacity: 0.7;
	color: white;
	font-size: 16px;
	cursor: pointer;
	-webkit-text-stroke-width: .8px;
    -webkit-text-stroke-color: #8c00c9;
	transition: opacity 0.3s ease-in-out;
}

#staysmart_sign:hover {
	opacity: 1;
}

#staysmart_sign p {
	margin: 0;
}

a {
	text-decoration: none !important;
}

#main_logo {
	display: inline-flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-name: start_logo;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	color: #ccc;
}

#main_logo span {
	font-size: 48px;
	font-weight: bold;
	-webkit-text-stroke-width: 2.5px;
    -webkit-text-stroke-color: #3C3D3D;
}

#main_frame {
	width: 300px;
	background-color: #ccc;
	opacity: 0;
	animation-name: start_frame;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-delay: 0.5s;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border-radius: 8px;
}

.myCard {
	/* display: block; */
	margin: 10px;
	/* min-height: 200px; */
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

/* ANIMATION*/

@keyframes start_logo {
  from {top: 50%; opacity: 0}
  to {top: 10%; opacity: 1}
}

@keyframes start_frame {
  from {opacity: 0;}
  to {opacity: 1;}
}