@media (max-width: 576px) {
	.app-header-left-title-1 {
		display : none;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		display : none;
		Zposition : relative;
		Zleft : 1px;
	}
	#menuIcon {
		display : block!important; 
	}
	#app_logo {
		display : none !important; 
	}
	#main_menu_table {
		margin-left : 60px;
		background-color : blue;
	}
	.app-header {
		border-bottom : 0px solid blue !important;
	}
	.app-header-1 {
		background-color : transparent !important;
		height:0px;
	}
	.app-header-2 {
		background-color : transparent !important;
		height:0px;
	}
	.app-header-3 {
		background-color : transparent !important;
		height:0px;
	}
}
@media (max-width: 768px) {
	.app-header-left-title-1 {
		display : none;
		font-size :  8px;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		display : none;
		color : transparent; /* disply:none; does not work; so we patch with trasnparent; */
		margin-left : 60px;
		font-size : 16px;
	}

}

@media (max-width: 992px) {
	.app-header-left-title-1 {
		display : none;
		font-size : 10px;
		position : relative;
		left : 1px;
	}
	.app-header-left-title-2 {
		display : block;
		margin-left : 32px;
		font-size : 20px;
	}	
}

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

body {
	margin : 0px;
}

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


/* 
 ------------------------------------------------------------------------------
 header
 ------------------------------------------------------------------------------
 */
#menuIcon {
	display : none;
}
#main_menu {
	position : fixed; 
	top : -1px;
	z-index : 2;
	display : block;
	
}

.app-header {
	Zwidth : 100%;
	height : 90px;
	border-bottom : 2px solid blue;
color : white;
	
}
.app-header-1 {
	height : 130px;
	transition: height 1.5s, background-color 1.5s;
	Zbackground-color : rgba(255,255,255,0.2);

background-color : rgba(0, 0, 255, 0.2);
}
.app-header-2 {
	height : 110px;
	transition : height 1.5s, background-color 1.5s;
	Zbackground-color : rgba(255,255,255,0.6);
background-color : rgba(0, 0, 255, 0.6);
}
.app-header-3 {
	height : 90px;
	transition : height 1.5s, background-color 1.5s;
	
Zbackground-color : blue;	
	Zbackground-color : rgba(255,255,255,1.0);
background-color : rgba(0, 0, 255, 1.0);
}


.app-header-img {
	background-image : url('heading.jpg');
	background-repeat : no-repeat;
	background-size : cover;
	background-position : right center;
	height : 440px;
}
/*
.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 : blue;
color : white;
	width : 104px;
	display : inline-block;
	cursor : pointer;
	text-align : center;
	padding-bottom : 2px;
	margin-bottom : 4px;
}
.app-main-menu-item:hover {
	Zborder-bottom : 1px solid blue;
	transition : background-color 0.8s;
	background-color : rgb(50, 50, 255);
}
.app-main-menu-item-active {
	background-color : rgb(50, 50, 255);
}
a.app-main-menu-item:link {
	text-decoration : none;
	Zcolor : blue;
color : white;	
}
a.app-main-menu-item:visited {
	text-decoration : none;
	Zcolor : blue;
color : white;
}

#submenu_register {
	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; 
	background-repeat : no-repeat;
	min-height : 350px;
	background-position: 15px 0px;
}
.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 : blue;
	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(205, 208, 254);
	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 : blue;
}

.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, blue);
	height : 200px;
}
.app-footer-row-2 {
	border-top : 2px dotted white;
	background-color : blue;
	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 : blue;
}

.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;
}