@font-face {
  font-family: myFirstFont;
  src: url(../fonts/OpenSans-Light.ttf);
}

.custom-button {
	width: 100%;
	font-family: 'Tajawal'; 
}

.box {

}
.box-header {
	color: #fff; 
	text-align: center;
	padding: 10px;
	font-size: 20px;
}
.box-body {
	background-color: #eee; 
	padding: 20px;
	font-size: 15px; 
}

.p-0 {
	padding: 0px;
}

.mb-30 {
	margin-bottom: 30px;
}

.sitetitle {
        font-family: myFirstFont !important;
        color: #0f1f89; 
	font-size: 28px; 
	text-align: center;
	text-transform: uppercase;
	font-weight: 800; 
	letter-spacing: 0px;
	margin-top: 30px;
}
.row.metro-panel {
	margin-top: 10px; 
}
@media only screen and (max-device-width: 400px) {
    .sitetitle {
        font-family: myFirstFont !important;
        color: #0f1f89; 
	font-size: 22px; 
	text-align: center;
	text-transform: uppercase;
	font-weight: 800; 
	letter-spacing: 0px;
	margin-top: 30px;
        line-height: 28px; 
}
.box-title, .featured-box-title, .featured-title {
    position: absolute;
    bottom: 18px;
    left: 15px;
    font-size: 14px;
    text-align: center;
}
}