.small-screen {
	display : none;
}
@media (max-width: 576px) {
	.app-header-left-title-1 {
		display : none;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		display : none;
		position : relative;
		left : 1px;
	}
	#main_menu_table {
		margin-left : 120px;
	}
	.small-screen {
		display : block;
	}
}
@media (max-width: 768px) {
	.app-header-left-title-1 {
		font-size : 10px;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		font-size : 16px;
	}

}

@media (max-width: 992px) {
	.app-header-left-title-1 {
		font-size : 14px;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		font-size : 20px;
	}	
}

@media (min-width: 992px) {
	.app-header-left-title-1 {
		font-size : 16px;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		font-size : 24px;
	}
}

body {
	margin : 0px;
}

/* 
 ------------------------------------------------------------------------------
 global
 ------------------------------------------------------------------------------
 */
.app-main-color {
	color : blueviolet;
}
.app-fz-08 {
	font-size : 0.8em;
}
.app-italic {
	font-style : italic;
}
.app-valign-middle {
	margin-top: auto;
	margin-bottom: auto;
}


/* 
 ------------------------------------------------------------------------------
 header
 ------------------------------------------------------------------------------
 */
.app-header-content {
	display : table-cell;
	vertical-align : middle;
}
.app-header {
	position : fixed;
	width : 100%;
	height : 90px;
	border-bottom : 2px solid blueviolet;
	
	display : table;
	z-index : 2;
	
background-color : blueviolet;
color : white;	
	
}
.app-header-1 {
	height : 90px;
	transition: height 1.5s, background-color 1.5s;
	Zbackground-color : rgba(255,255,255,0.2);

background-color : rgb(138, 43, 226, 0.2);
}
.app-header-2 {
	height : 70px;
	transition : height 1.5s, background-color 1.5s;
	Zbackground-color : rgba(255,255,255,0.6);
background-color : rgb(138, 43, 226, 0.6);
}
.app-header-3 {
	height : 50px;
	transition : height 1.5s, background-color 1.5s;
	Zbackground-color : rgba(255,255,255,1.0);
background-color : rgb(138, 43, 226, 1.0);	
}


.app-header-img {
	background-image : url('heading.jpg');
	background-repeat : no-repeat;
	background-size : cover;
	background-position : right center;
	height : 600px;
}
/*
.app-header-left-title-1 {
	font-size : 0.8em;
	position : relative;
	left : 1px;
}
.app-header-left-title-2 {
	font-size : 0.8em;
	position : relative;
	left : 1px;
}
*/


/* 
 ------------------------------------------------------------------------------
 main menu
 ------------------------------------------------------------------------------
 */
.app-main-menu-item {
	Zcolor : blueviolet;
color : white;
	width : 100px;
	display : inline-block;
	cursor : pointer;
	text-align : center;
	border-bottom : 1px solid transparent;
}
.app-main-menu-item:hover {
	Zborder-bottom : 1px solid blueviolet;
border-bottom : 1px solid white;	
	transition : border 2s;
}
.app-main-menu-item-active {
	font-weight : bold;
}
a.app-main-menu-item:link {
	text-decoration : none;
	Zcolor : blueviolet;
color : white;	
}
a.app-main-menu-item:visited {
	text-decoration : none;
	Zcolor : blueviolet;
color : white;
}

#submenu_register, #submenu_others {
	display : block;
	position : absolute;
	background-color : rgb(138,  43, 226);
	margin-top : 1px;
	color : white;
	width : 100px;
	font-weight : normal;
	font-size : 0.8em;
}

/* 
 ------------------------------------------------------------------------------
 home/index
 ------------------------------------------------------------------------------
 */
 
.app-our-mission {
	background-image : url(../img/divider.png); 
	background-size : cover; 
	min-height : 450px;
}
.app-office { 
	background-image : url(/plugins/app/img/office.jpg);
	background-size : cover;
	min-height : 300px;
}
 
/* 
 ------------------------------------------------------------------------------
 news
 ------------------------------------------------------------------------------
 */
.app-news {
	cursor : pointer;
}

div.row div.col ul.nav li.nav-item a.active {
	color : blueviolet;
	Zfont-weight : bold;
}
.app-news-news {
	content : url(/plugins/app/img/news.png);
	width : 200px;
	height : 200px;
}
.app-news-news:hover {
	content : url(/plugins/app/img/news_highlighted.png);
}
.app-news-courses {
	content : url(/plugins/app/img/courses.png);
	width : 200px;
	height : 200px;
}
.app-news-courses:hover {
	content : url(/plugins/app/img/courses_highlighted.png);
}
.app-news-announcements {
	content : url(/plugins/app/img/announcement.png);
	width : 200px;
	height : 200px;
}
.app-news-announcements:hover {
	content : url(/plugins/app/img/announcement_highlighted.png);
}
#app_content {
	min-height : 60vh;
	Zborder-width : 0px 1.25px 1.25px 1.25px;
	border-width : 0px 1.25px 0px 0px;
	border-style : solid;
	border-color : rgb(222, 226, 230);
}
 
.app-content-item-box {
	margin : 10px 0px 10px 0px;
	border-width : 1px 0px 1px 1px;
	border-style : solid;
	border-color : gray;
	background-color : rgb(240, 225, 250);
	padding : 12px;
	border-radius : 3px 0px 0px 3px;
}

.app-content-item-title {
	font-weight : bold;
}

.app-content-item-created {
	font-size : 0.6em;
} 
 
/* 
 ------------------------------------------------------------------------------
 register
 ------------------------------------------------------------------------------
 */
.app-register-sections-label {
	margin-bottom : 14px;
}
.app-register-section {
	border : 1px solid darkgray;
	border-radius : 5px;
	padding : 10px;
	cursor : pointer;
	font-weight : bold;
	background : rgba(230, 230, 230, 1);
	margin-top : 10px;
	display : inline-block;
}
.app-register-section:hover {
	border-color : blueviolet;
}

.app-register-frozen-member {
	background-color : rgba(0,0,200,0.4);
}


.app-register-hr {
	width : 100%; 
	color : gray; 
	Zheight : 1px;
	Zbackground-color : black;
}

.app-register-list-row:hover {
	background-color : rgba(240,240,240,1);
}

.app-register-list-cell {
	display : inline-block;
}
.app-register-parts {
	font-size : 0.8em;
}


.app-register-member-img {
	Zborder : 1px solid red;
	width : 70px;
	height : 70px;
}


/* 
 ------------------------------------------------------------------------------
 footer
 ------------------------------------------------------------------------------
 */
 .app-footer-row-1 {
	background-image : url(../img/footer.jpg);
	background-size : contain;
	background-repeat : repeat;
	height : 200px;
} 
.app-footer-rain {
	background-image : linear-gradient(transparent, blueviolet);
	height : 200px;
}
.app-footer-row-2 {
	border-top : 2px dotted indigo;
	background-color : blueviolet;
	height : 120px;
} 
.app-footer-logo {
	height : 100px;
}
.app-footer-facebook {
	width : 30px;
	padding : 4px;
	color : white;
	border : 1px solid white;
	border-radius : 3px;
	font-size : 22px;
	transition : background-color 1s, color 1s;
	cursor : pointer;
	position : relative;
	top : 3px;
}

.app-footer-facebook:hover{
	background-color : white;
	color : blueviolet;
}

.app-footer-cpr-cont {
	display : inline-block;
	position : relative;
	top : 6px;
	text-align : left;
}

.app-footer-cpr-1 {
	color : white;
	font-size : 16px;
	margin-bottom : 2px;
}
.app-footer-cpr-2 {
	color : gray;
	font-size : 12px;
}




.red {
	border : 1px solid red;
}