/*----------------------------------------------------------------------------------*
 * logo.css
 * FRAM Logo 
 *
 * (c) Softoo Systems, 2011
 * www.softoo.co.th
 *
 * Dependencies:
 * jQuery
 *
 *-----------------------------------------------------------------------------------*/

#logo {
	display: flex;
	align-items: flex-end;
}
#logo > div:first-child {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #0a0a96;
	mask: radial-gradient(circle 12px at 78% 50%, #0000 100%, #fff);
	clip-path: polygon(0% 0%,100% 0%,100% 40%,70% 40%,70% 100%,0% 100%,0% 0%);
}
#logo.outlined > div:first-child {
	border:1.5px solid #fff;
	mask: radial-gradient(circle 10.5px at 78% 50%, #0000 100%, #fff);
}
#logo.outlined > div:first-child::after {
	content: "";
	position: absolute;
	width: 22px;
    height: 22px;
    right: -1px;
    top: 28%;
    background: blue;
    border: 1.5px solid #fff;
    border-radius: 50%;
}
#logo > div:first-child > div {
	position: absolute;
	width: 80%;
	height: 80%;
	right: 0px;
	top: 5px;
	border-radius: 50%;
	background-color: #328cfa;
	overflow: hidden;
}
#Xlogo > div:first-child > div::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

#logo > div:first-child > div::after {
	content: "";
	position: absolute;
	display: block;
	border-radius: 50%;
	width: 75%;
	height: 75%;
	top: 6px;
	right: 0;
	background-color: #a7d9f3;
}
#logo > div:last-child {
	position: relative;
	top: 6px;
	left: -20px;
	padding: 0px 0px 0px 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: unset;
}
#logo.outlined > div:last-child {
	left: -19px;
}
#logo > div:last-child > div:first-child {
	position: relative;
	top: 6px;
	color: #ff0000;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 3px;
}
#logo.outlined > div:last-child > div:first-child {
	text-shadow:-2px -2px 0 #fff,
				 2px -2px 0 #fff,			
				-2px  2px 0 #fff,
				 2px  2px 0 #fff;
	letter-spacing: 6px;
}
#logo > div:last-child > div:last-child {
	position: relative;
	top: -4px;
	font-size: 0.64rem;
	white-space: nowrap;
}