/* Font */
@font-face {
	font-family: 'Roboto';
	font-weight: 100;
	font-style: normal;
	src: url(../font/Roboto-Thin.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-weight: 200;
	font-style: normal;
	src: url(../font/Roboto-ExtraLight.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-weight: 300;
	font-style: normal;
	src: url(../font/Roboto-Light.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: normal;
	src: url(../font/Roboto-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	font-style: normal;
	src: url(../font/Roboto-Medium.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-weight: 600;
	font-style: normal;
	src: url(../font/Roboto-SemiBold.ttf) format('truetype');
}
@font-face {
	font-family: 'Roboto';
	font-weight: 700;
	font-style: normal;
	src: url(../font/Roboto-Bold.ttf) format('truetype');
}

/* Define */
:root {
	--bs-primary: #57628a;
	--text-color: #57628a;
}


/* Main */
html,
body {
	font: 400 16px/1.5 'Roboto';
	color: var(--text-color);
	min-height: 100%;
}
.main-content {
	padding: 10px 20px 20px;
}
img {
	max-width: 100%;
}
.separator > div {
	border-right: 1px solid rgba(255, 255, 255, 0.6);
}


/* Typo */
h3 {
	font-size: 24px;
}
h4 {
	font-size: 18px;
	font-weight: 400;
}
.bg-main {
	background-image: url(../img/background/bg.png);
	background-size: cover;
	background-position: top cover;
	background-repeat: no-repeat;
}
.bg-card {
	background-color: rgba(62, 108, 244, 0.2);
}


/* Button */
.btn {
	--bs-btn-border-radius: 10px;
}
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #3d4872;
	--bs-btn-hover-border-color: #3d4872;
	--bs-btn-focus-shadow-rgb: ;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #2f3a62;
	--bs-btn-active-border-color: #2f3a62;
	--bs-btn-active-shadow: ;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}


/* Responsive */
@media (max-width: 992px) { 
	.separator > div {
		border: none;
	}
}
@media (max-width: 767px) {
	.main-content {
		padding: 10px 15px 15px;
	}
}