*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	/* font-family:  Helvetica, 'Microsoft JhengHei UI','Microsoft JhengHei', 微軟正黑體, 微软正黑体, Arial, sans-serif; */
}


html {
	height: 100%;
	/*
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	*/
}

body {
	background: #fff;
	margin: 0px;
	padding: 0px;
	height: 100%;
	text-rendering: optimizelegibility;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	color: #4D4D4D;
	font-family:  Helvetica, 'Microsoft JhengHei UI','Microsoft JhengHei', 微軟正黑體, 微软正黑体, Arial, sans-serif;
	font-size: 17px;
}

.greyscale_all {
    filter: grayscale(100%);
}

a {
	text-decoration: none;
	cursor: pointer;
	color: inherit;
	word-wrap: break-word;
	-ms-word-break: break-word;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	list-style: none;
	display: block;
}

h1, h2, h3 {
	font-weight: bold;
}

#main{
	width: 100%;
	max-width: 1250px;
	margin: 0px auto;
	position: relative;
	/* min-height: 100%; */
	min-width: 780px;
	/* overflow-x: hidden; */
	/* overflow-y: hidden; */
}


.header {
	width: 100%;
}

.image-responsive {
	width: 100%;
	height: auto;
	position: relative;
}


.numNav li,
.m_menu li,
.subPage-left-panel li,
.subPage_menu li {
	list-style: outside none none;
	cursor: pointer;
	text-align: center;
}

.numNav li.prevPage{
}

.numNav li.nextPage{
}


/* category */
#catBrowser {
	text-align: center;
	width: 100%;
}

.catBrowser-wrapper{
	margin-left: auto;
	margin-right: auto;
	position: relative;
}


.catBrowser-wrapper ul{
	/* white-space: nowrap; */
	padding: 0px;
	margin: 0;
	display: table;
	width: 100%;
	table-layout: fixed;
}

.catBrowser-wrapper li{
	display: table-cell;
	height: 100%;
}

.catBrowser-wrapper li a {
	width: 100%;
	height: 100%;
	text-align: center;
	display: inline-table;
}

.catBrowser-item span,
.catBrowser-items .subNav li a {
	color: #FFF;
}
.catBrowser-item span {
	font-size: 24px;
	display: inline-flex;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	margin: 10px 0px;
	font-weight: 600;
}

.catBrowser-item.cat_1, .catBrowser-items .cat_1 .subNav li, .m_menu ul > ul.cat_1, .cat_1 .subPage-title:before, .cat_1 .subPage_menu  { background-color: #D90C26;}
.catBrowser-item.cat_2, .catBrowser-items .cat_2 .subNav li, .m_menu ul > ul.cat_2, .cat_2 .subPage-title:before, .cat_2 .subPage_menu  { background-color: #ff9223;}
.catBrowser-item.cat_3, .catBrowser-items .cat_3 .subNav li, .m_menu ul > ul.cat_3, .cat_3 .subPage-title:before, .cat_3 .subPage_menu  { background-color: #96d516;}
.catBrowser-item.cat_4, .catBrowser-items .cat_4 .subNav li, .m_menu ul > ul.cat_4, .cat_4 .subPage-title:before, .cat_4 .subPage_menu  { background-color: #905fd0;}
.catBrowser-item.cat_5, .catBrowser-items .cat_5 .subNav li, .m_menu ul > ul.cat_5, .cat_5 .subPage-title:before, .cat_5 .subPage_menu  { background-color: #f254a1;}
.catBrowser-item.cat_6, .catBrowser-items .cat_6 .subNav li, .m_menu ul > ul.cat_6, .cat_6 .subPage-title:before, .cat_6 .subPage_menu  { background-color: #0081c9;}
.catBrowser-item.cat_7, .catBrowser-items .cat_7 .subNav li, .m_menu ul > ul.cat_7, .cat_7 .subPage-title:before, .cat_7 .subPage_menu  { background-color: #2eb5ef;}

.cat_1 .subPage-content, .cat_1 button.tagBtn { border-color: #D90C26; }
.cat_2 .subPage-content, .cat_2 button.tagBtn { border-color: #ff9223; }
.cat_3 .subPage-content, .cat_3 button.tagBtn { border-color: #96d516; }
.cat_4 .subPage-content, .cat_4 button.tagBtn { border-color: #905fd0; }
.cat_5 .subPage-content, .cat_5 button.tagBtn { border-color: #f254a1; }
.cat_6 .subPage-content, .cat_6 button.tagBtn { border-color: #0081c9; }
.cat_6 .subPage-content, .cat_7 button.tagBtn { border-color: #2eb5ef; }


.catBrowser-items .cat_1 .subNav li:hover, .m_menu ul > ul.cat_1>li:hover { background-color: #f2382f;}
.catBrowser-items .cat_2 .subNav li:hover, .m_menu ul > ul.cat_2>li:hover { background-color: #ffc55e;}
.catBrowser-items .cat_3 .subNav li:hover, .m_menu ul > ul.cat_3>li:hover { background-color: #c6e44e;}
.catBrowser-items .cat_4 .subNav li:hover, .m_menu ul > ul.cat_4>li:hover { background-color: #bb9ce2;}
.catBrowser-items .cat_5 .subNav li:hover, .m_menu ul > ul.cat_5>li:hover { background-color: #f370ab;}
.catBrowser-items .cat_6 .subNav li:hover, .m_menu ul > ul.cat_6>li:hover { background-color: #fb933d;}
.catBrowser-items .cat_7 .subNav li:hover, .m_menu ul > ul.cat_7>li:hover { background-color: #fb933d;}


.catBrowser-item.cat_4  { width:18%;}

.catBrowser-item .catBrowser-icon {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 26px;
	width: 26px;
}

.subPage-content table {
	width: 100%;
}
.subPage-content a {
    text-decoration: underline;
    color: #384fce;
    display: inline-block;
}
.subPage-content .tabBtn a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.yrrecordphoto button.tagBtn{
	border: 0px;
	text-align: center;
	padding: 5px 17px;
}

.yrrecordphoto .tagBtnGroup{
	overflow-x: hidden;
	overflow-y: hidden;
	height: 37px;
	position: relative;
	background-color: #208dd0;
}

.yrrecordphoto .tagBtnContainer{
	background-color: #208dd0;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0px 33px;
	padding-bottom: 30px;
	white-space: nowrap;
}

.yrrecordphoto .tagBtn {
	color: #FFF;
	background-color: transparent;
	font-weight: 400;
}
.yrrecordphoto .tagBtn.curr {
	color: #FBB426;
	background-color: transparent;
}

.yrrecordphoto button.tagBtn:not(.curr):hover {
	color: #FF9000;
}

.catBrowser-label:before{
	content: "\A";
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 26px;
	width: 26px;
	margin-right: 8px;
}

.cat_1 .catBrowser-label:before { background-image: url("../images/swh_icon_schoolreview.svg");}
.cat_2 .catBrowser-label:before { background-image: url("../images/swh_icon_schinfo.svg");}
.cat_3 .catBrowser-label:before { background-image: url("../images/swh_icon_LAT.svg");}
.cat_4 .catBrowser-label:before { background-image: url("../images/swh_icon_support.svg");}
.cat_5 .catBrowser-label:before { background-image: url("../images/swh_icon_performance.svg");}
.cat_6 .catBrowser-label:before { background-image: url("../images/swh_icon_HTSPTA.svg");}
.cat_7 .catBrowser-label:before { background-image: url("../images/swh_icon_alumni.svg");}

.catBrowser-items .subNav{
	display: none;
	position: relative;
}

.catBrowser-items .subNav li{
	display: block;
}

.catBrowser-items .subNav li a{
	padding: 14px 4px;
	font-weight: 600;
	font-size: 18px;
	word-break: break-word;
}

.catBrowser-items .btnGp{
	z-index: 300;
	position: absolute;
	background-color: #FFF;
	box-shadow: 1px 5px 4px RGBA(42, 42, 42, 0.56);
	width: 100%;
}

.home_page_section{
	margin: 15px 0px;
	display: block;
	/* overflow: auto; */
}

.is-hide2 {
	display: none !important;
}

.is-hide {
	display: none;
}

.tab_topic_title {
	font-size: 20px;
}

.subPage_menu {
	position: absolute;
	right: 0px;
	z-index: 200;
	box-shadow: 1px 1px 8px RGBA(42, 42, 42, 0.56);
	margin-top: 10px;
}
.subPage_menu ul {
	padding: 11px 0px;
	display: none;
}

.subPage_menu li {
	padding: 1.7vw 5vw;
	font-size: 4.2vw;
}

.back_menu_icon, .sub_menu_icon {
	position: absolute;
	cursor: pointer;
}

.back_menu_icon {
	height: 100%;
	width: 8vw;
	left: 6%;
	top: 0px;
	background: url("../images/icon_back_arrow.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
}

.sub_menu_icon {
	height: 100%;
	width: 8vw;
	right: 7%;
	top: 0px;
	transition: ease 0.5s all;
	background: url("../images/icon_menu_arrow.png") no-repeat;
	background-size: 98% auto;
	background-position: center;
}

.sub_menu_icon.isUp {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* container */
#container {
	width: 100%;
	position: relative;
	height: auto;
}

#container .home_page_section:nth-child(1){
	max-height: 440px;
	height: 40vw;
	min-height: 308px;
}

.sect_1_2 {
	height: 100%;
}

#intraLogin{
	background: #0cd2f2;
	border-bottom: 7px solid #0890b5;
	display: block;
	height: 79%;
}

.intra_login_header {
	color: #FFF;
	background: #1192cc;
	text-align: center;
	font-size: 30px;
	padding: 4px 10px;
	display: inline-flex;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	width: 100%;
	line-height: 69px;
	margin: 0px auto;
}

.intraIcon {
	background-image: url("../images/intranet_icon.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 71px;
	width: 66px;
	margin-right: 15px;
	display: block;
	margin-left: 18%;
}

input {
	 border: 3px solid #e5e5e5;
	 padding: 8px 10px;
	 font-size: 19px;
	 border-radius: 0;
	 color: #404040;
	 margin: 8px 0px;
	 display: block;
	 outline: none;
	 width: 100%;
}

#login_form{
	padding: 6% 8%;
}

#login_form input {
	margin: 8px 0px;
	height: 42px;
}

.intra_login_footer {
	text-align: center;
}

.btn {
	color: #FFF;
	height: 44px;
	display: block;
	padding: 0px 33px;
	outline: medium none;
	border: 0px none;
	line-height: 35px;
	font-size: 20px;
	text-decoration: none;
	transition: all 0.1s linear 0s;
	cursor: pointer;
	margin: 12px auto;
	color: #272727;
	background-color: #CCC;
}

.btn:hover {
	background-color: #444;
	color: #FFF;
}

.btn.active {
	color: #FFF;
	background-color: #026b99;
}

.btn.active:hover {
	background-color: #2899CB;
}

.intra_login_footer a {
	color: #FFF;
	text-decoration: underline;
}

.shortcut {
	background-size: contain!important;
	background-position: center!important;
	background-color: #FFF!important;
	width: 100%;
	/*margin-top: 4px;*/
	height: 25%;
}


/* Photo Sider 1 */
.controlBtnGtp {
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0px 14px;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
}

.controlBtnGtp .controlBtnDot {
	border: 4px solid #FFF;
	border-radius: 6px;
	margin: 6px 4px;
	cursor: pointer;
}

#sider1 .photo-container{
	background-color: #000;
}

.photo_sider{
	height: 100%;
	width: 100%;
	/* background-color: #c1e061; */
	display: block;
	/* padding: 9px; */
	position: relative;
}

.photo-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.photo_display_area {
	height: 100%;
	display: inline-block;
	width: 100%;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 1.8s;
	overflow: hidden;
}

.photo_disply_area img{
	width: 100%;
	height: auto;
}

.photo_sider .photo-container .photo{
	height: 100%;
	width: 100%;
	background-size: cover !important;
	background-position: center!important;
	background-repeat: no-repeat !important;
	position: absolute;
	display: none;
}

.photo_sider .photo-container .photo.curr,
.photo_sider .photo-container .photo.next,
.photo_sider .photo-container .photo.prev {
	display: block;
}

.photo_sider .photo-container .photo.next{
	left: 100%;
}
.photo_sider .photo-container .photo.prev{
	left: -100%;
}

.moveLeft .photo,
.moveRight .photo{
	/*-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;*/
	-webkit-transition: -webkit-opacity 400ms ease-in-out;
	transition: opacity 400ms ease-in-out;
}

.photo_sider .photo_display_area.moveRight .photo.curr,
.photo_sider .photo_display_area.moveRight .photo.next
{
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	/*-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);*/
}

.photo_sider .photo_display_area.moveLeft .photo.curr,
.photo_sider .photo_display_area.moveLeft .photo.prev{
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	/*-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);*/
}


#sider1.photo_sider .controlBtnGtp {
	/* background-color: RGBA(41, 41, 41, 0.38); */
	border-radius: 5px;
}

#sider1 .controlBtnGtp .controlBtnDot {
	border: 6px solid RGBA(219, 219, 219, 0.51);
}
#sider1 .controlBtnGtp .controlBtnDot.curr {
	border: 6px solid #FFF;
}

.arrowControl {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	cursor: pointer;
	background-size: 100%!important;
}

.arrowControl.left {
	background: url("../images/arrow_gr_left.png") no-repeat;
	left: 25px;
}

.arrowControl.right {
	background: url("../images/arrow_gr_right.png") no-repeat;
	right: 24px;
}

.video-section {
	height: 570px;
}

.contentNameTag{
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: auto;
	min-width: 96%;
	max-width: 500px;
	min-height: 20%;
	max-height: 89px;
}

.contentNameTag .name-tag-contents{
	background: #6DC3C1; 
	width: 155px; 
	height: 89px;
}

.name-tag-contents .name-tag-img{
	width: 90px; 
	float: left; 
	padding: 21px 15px;
}

.name-tag-contents .name-tag-title{
	float: left; 
	width: 55px; 
	color: white; 
	padding: 14px 0px;
	font-size: 20px;
	font-weight: bold;
}

.contentName{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	margin: auto;
	min-width: 96%;
	max-width: 500px;
	min-height: 20%;
	max-height: 300px;
	z-index:10;
}

.content-name{
	/* margin-top: 25px; */
	margin-top: 2%;
	text-align: center;
	color: #274F74;
}

.link-div {
	display: inline-block;
	width: 49%;
}

.link-div-teacher-title {
	position: absolute;
	left: 65%;
    top: 20%;
	color: white;
	font-size: 25px;
	font-weight: bold;
}

.link-div-intranet-title {
    position: absolute;
    left: 58%;
    top: 20%;
    color: white;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

.responsive-image {
	width: 100%;
	height: auto;
}

.nav_2_sub_section{
	height: 380px;
	display: flex;
}

#links_an_calendar{
	float: left;
	display:inline-block;
	width: 32%;
	background-color: #f2f2f2;
	margin-right: 10px;
}

#news_list{
	float: left;
	display:inline-block;
	width: 35%;
	/* background-color: #f2f2f2; */
	margin-right: 10px;
}

#video{
	float: right;
	display:inline-block;
	width: 31.2%;
	background-color: #f5f5f5;
}

.links{
	/* height: 180px; */
	padding-bottom: 20px;
}

.calendar{
	height: 200px;
}

#school_calendar .calendar_img {
	display: inline-block;
    vertical-align: middle;
	width: 26px;
	margin-right: 10px;
}

#school_calendar .heading-calendar-list{
	background-color: #ff9635;
	padding: 8px 12px;
}

#school_calendar .canlendar_title{
	display: inline-block;
	vertical-align: middle;
	color: white;
	font-weight: bold;
	font-size: 22px;
}

#school_calendar .canlendar_title_detail{
	float: right;
	display: inline-block;
	vertical-align: middle;
	color: white;
	font-weight: bold;
	font-size: 18px;
	padding-top: 2px;
}

#news_list .heading_news_list {
	background-color: #96D516;
	padding: 8px 12px;
}

#news_list .news_list_img{
	display: inline-block;
    vertical-align: middle;
	width: 26px;
	margin-right: 10px;
}

#news_list .news_list_title{
	display: inline-block;
    vertical-align: middle;
	color: white;
	font-weight: bold;
	font-size: 22px;
}

#news_list .news_div {
	padding-left: 15px;
}

#news_list .news_topic {
	/* padding: 10px 5px; */
	padding-left: 3px;
	color: #274F74;
	width: 90%;
	font-size: 22px;
}

#news_list .date {
	padding: 0px 5px;
}

#news_list .view_icon {
	margin-left: 20px;
	margin-right: 10px;
	width: 20px;
}

#news_list .news_link {
	position: relative;
	border-bottom: 1px solid #ccc;
}

#news_list .list_detail{
	height: 520px;
	overflow-y: auto;
	background: #f2f2f2;
}

#video .heading_video {
	background-color: #E9665A;
	padding: 8px 12px;
}

#video .video_img{
	display: inline-block;
    vertical-align: middle;
	width: 26px;
	margin-right: 10px;
}

#video .video_title{
	display: inline-block;
    vertical-align: middle;
	color: white;
	font-weight: bold;
	font-size: 22px;
}
#video .video_detail{
	margin-top: 50px;
	background-color: #f5f5f5;
	/* height: 110%; */
	height: 470px;
}

.students_section {
	/* height: 15vh; */
}

.students_bar {
	width: 100%;
	height: 100%;
	/* padding: 3% 20px; */
	display: flex;
}

#students .students_campus_tv {
	width: 20%;
	height: 100%;
	/* background: #3FC6BE; */
	display: inline-block;
	position: relative;
	/* margin-right: 0.8vw; */
}

#students .students_campus_album {
	width: 20%;
	height: 100%;
	/* background: #F6BB6D; */
	display: inline-block;
	position: relative;
	/* margin-right: 0.8vw; */
}

#students .students_scouts {
	width: 20%;
	height: 100%;
	/* background: #907CA1; */
	display: inline-block;
	position: relative;
	/* margin-right: 0.8vw; */
}

#students .students_chinese_history {
	width: 20%;
	height: 100%;
	/* background: #3C6787; */
	display: inline-block;
	position: relative;
	/* margin-right: 0.8vw; */
}

#students .students_stem {
	width: 20%;
	height: 100%;
	/* background: #FB807C; */
	display: inline-block;
	position: relative;
	/* margin-right: 0.8vw; */
}

#students .students_reading {
	width: 20%;
	height: 100%;
	/* background: #3C6787; */
	display: inline-block;
	position: relative;
}

#students .icon_div {
	/* height: 55%; */
	position: relative;
	text-align: center;
}

#students .icon {
	/* width: 13vw;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -30%); */
}

#students .students_section_title {
	width: 100%;
	height: 45%;
	/* background: #44A49D; */
	position: absolute;
	bottom: 0;
	left: 0%;
	text-align: center;
	color: white;
	font-weight: 700;
	line-height: 320%;
	font-size: 22px;
}

.heading_event_photo{
	background-color: #3FC6BE;
	text-align: center;
	padding: 5px;
}

.event_photo_img{
	display: inline-block;
    vertical-align: middle;
	width: 26px;
	margin-right: 10px;
}

.event_photo_title{
	display: inline-block;
    vertical-align: middle;
	color: white;
	font-weight: bold;
	font-size: 22px;
}

#event_photo {
	background-color: #f2f2f2;
	padding: 15px 0px;
}

#event_photo .section_topic {
	background: url("../images/event_photo_bg.png") no-repeat;
	background-size:  auto 100%;
	background-position: center right;
	background-color: #ee962e;
}

#event_photo .section_topic:before {
	background: url("../images/event_photo_icon.png") no-repeat;
	background-size: contain;
	background-position: center;
}

.event_photo_container ul {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 29px;
	margin: 6px 2px;
	position: relative;
}

.event_photo_container li{
	display: inline-block;
	padding: 2px 12px;
	vertical-align: top;
}
.event_photo_container li a{
	display: block;
	width: 206px;
	background: white;
	padding: 8px 8px 0px 8px;
	box-shadow: 0px 0px 5px #aaaaaa;
}

.event_photo_container .event_desc{
	/* padding: 12px 4px; */
	padding-bottom: 12px;
	padding-left: 4px;
	padding-right: 4px;
	display: block;
	white-space: normal;
	color: #126aad;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	height: 73px;
	overflow: hidden;
}

.event_photo_container .photo{
	height: 124px;
	width: 186px;
	background-repeat: no-repeat!important;
	background-size: contain !important;
	margin: 0px auto;
}

.event_photo_slider {
	height: 235px;
	width: 100%;
	text-align: center;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0px 40px;
	position: relative;
}

.hscroll_btn {
	position: absolute;
	height: 230px;
	width: 19px;
	top: 18px;
	cursor: pointer;
	background-size: 80%;
	background-position: center 54%;
	margin: 0px 11px;
}

.hscroll_btn.scrollL{
	left: 0px;
}
.hscroll_btn.scrollR{
	right: 0px;
}

.yrrecordphoto .hscroll_btn{
	top: 2px;
	height: 33px;
	width: 23px;
	opacity: 0;
}


.yrrecordphoto .hscroll_btn:hover{
	opacity: 0.5;
}

.yrrecordphoto .hscroll_btn.scrollL{
	left: 0px;
	background: url("../images/arrow_left.gif") no-repeat;
	background-size: 50% 90%;
	background-position: center left;
	width: 10vw;
	max-width: 40px;
}
.yrrecordphoto .hscroll_btn.scrollR{
	right: 0px;
	background: url("../images/arrow_right.gif") no-repeat;
	background-size: 50% 90%;
	background-position: center right;
	width: 10vw;
	max-width: 40px;
}


#event_photo .hscroll_btn.scrollL{
	background: url("../images/swh_arrow_left.svg") no-repeat;
}
#event_photo .hscroll_btn.scrollR{
	background: url("../images/swh_arrow_right.svg") no-repeat;
}


#notice.home_page_list .list_topic{
	background-color: #0ec6b4;
}


#notice .section_topic {
	background: url("../images/notice_bg.png") no-repeat;
	background-size:  auto 100%;
	background-position: center right;
	background-color: #ee962e;
}

#notice .section_topic:before {
	background: url("../images/notice_icon.png") no-repeat;
	background-size: contain;
	background-position: center;
}

.read_more {
	background-color: #d5d5d5;
	text-align: center;
	padding: 12px 0px;
	text-decoration: underline;
	color: #000;
}

.footer1-display-inline-block {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 20px;
}

.footer {
	/* margin-top: 5vh; */
}

.footer .footer1 {
	width: 100%;
	/* height: 12vh; */
	background: #C8DAC6;
	color: black;
	text-align: center;
	position: relative;
	font-size: 18px;
	font-weight: bolder;
}

.footer .footer1 .footer1_info {
	/* position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
	padding-top: 30px;
}

.footer .footer1 .school_name {
	/* width: 100vw; */
}

.footer .footer1 .school_chinese_name {
	display: inline-block;
}

.footer .footer1 .school_english_name {
	display: inline-block;
}

.footer .footer1 .school_tel {
	display: inline-block;
	margin-right: 10px;
}
.footer .footer1 .school_fax {
	display: inline-block;
	margin-right: 20px;
}
.footer .footer1 .school_email {
	display: inline-block;
	margin-right: 15px;
}

.footer .footer1 .school_chinese_address {
	display: inline-block;
}
.footer .footer1 .school_english_address {
	display: inline-block;
}


.footer .footer2 {
	width: 100%;
	/* height: 8vh; */
	background: #44A49D;
	color: white;
	text-align: center;
	position: relative;
}

.footer .footer2 .footer2_right {
	/* position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
	padding-top: 20px;
	padding-bottom: 30px;
}

.footer .footer2 .copyright{
	/* width: 100vw; */
}

.home_page_list {
	width: 50%;
	float: left;
}


.enroll_btn{
	background: url("../images/apply_ban.png") no-repeat;
	background-size: contain;
	background-position: center;
}

.enroll_btn img{
	width: 100%;
	opacity: 0;
}

.slogan{
	background: url("../images/flower_ban.png") no-repeat;
	background-size: contain;
	background-position: center bottom;
	width: 100%;
	text-align: center;
	padding-top: 46px;
	padding-bottom: 10px;
	font-size: 30px;
}


.staffGroup,
.videoGroup,
.photoGroup {
	overflow-y: hidden;
}

.yrrecordphoto .photoGroup{
	position: relative;
	background-color: #FFF;
}

.folder {
	max-width: 31%;
	float: left;
	margin: 4px;
	border: 1px solid #cbc9cf;
  	background-color: #FFF;
	/* height: 265px; */
	width: 20vw;
}

.yrrecordphoto .folder {
	border: 0px;
	max-width: 100%;
	float: none;
	width: 90%;
	height: 35vw;
	margin: 0px auto;
	max-height: 430px;
}

.folder a {
	width: 100%;
	height: 100%;
	padding: 11px;
	position: relative;
	overflow: hidden;
}

.folder .album_thumbnail {
	width: 100%;
	height: 130px;
	display: block;
	margin-bottom: 12px;
}

.yrrecordphoto .folder .album_thumbnail {
	height: 100%;
	width: 100%;
}

.yrrecordphoto .folder .album_thumbnail:before{
  display: none;	
}

.yrrecordphoto .numNavGp{
	position: absolute;
	width: 100%;
	top: 42%;
}

.photoGroup .item{
	max-width: 30%;
	float: left;
	margin: 7px;
	height: 160px;
	width: 20vw;
}

.photoGroup .item a {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.photoGroup .item .album_thumbnail {
	width: 100%;
	height: 100%;
	display: block;
}

.staffGroup .album_thumbnail {
	width: 90%;
	height: 60%;
	display: block;
	margin-bottom: 12px;
}

.staff_title {
	padding: 0px 10px;
}

.folder .staff_title p, .folder .album_title p {
	color: #353535;
	font-size: 16px;
	line-height: initial;
	margin-bottom: 4px;
}

.album_title {
	white-space: normal;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 63px;
    overflow: hidden;
}

.folder .staff_title p {
	margin-bottom: 4px;
	font-size: 13px;
}

.showHW_result .loadingImg,
.staffDetail .loadingImg {
	border: none;
	width: 20%;
}

.event_photo_topic
{
	cursor: pointer;
}
/* External Link */
.heading_sponsors{
	background-color: #F2A744;
	text-align: center;
	padding: 5px;
	position: relative;
}
.leaningpltform_img{
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	margin-right: 10px;
}
.learnpltform_title{
	color: white;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
	font-size: 22px;
}
.external_link {
	width: auto;
	display: table-cell;
	background-color: #F7F5E4;
	padding: 30px 40px;
}
.external_link .is-link {
	cursor: pointer;
	float: left;
	width: 20%;
	padding: 5px;
}

.external_link img {
	width: 100%;
}
.fb_link {
	width: 500px;
	display: table-cell;
	vertical-align: top;
}
.fb_link h2{
	color: #d8502b;
}

/* Sub Page Content */
.subPage-main{
	height: 100%;
	width: 100%;
	padding: 18px 0px;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	margin: 0px;
	background-color: #FFF;
}

.subPage-left-panel {
	max-width: 310px;
	width: 30%;
	border-right: 3px solid #298ece;
	min-width: 180px;
}

.subPage-right-panel {
	width: 100%;
	overflow: hidden;
	padding: 0px 20px;
	padding-right: 40px;
}

.subPage_menu ul,
.subPage-left-panel ul{
	text-align: center;
	background-color: #f7f7f7;
	padding: 0px 11px;
}

.subPage-left-panel ul{
	margin: 0px 20px;
}

.subPage-left-panel ul:before,
.subPage-left-panel ul:after{
	content: '\A';
	display: block;
	height: 16px;
	margin: 0px -11px;
}


.subPage_menu ul:before,
.subPage_menu ul:after{
	content: '\A';
	display: block;
	height: 3.7vw;
	margin: 0px -11px;
}

.subPage_menu ul:before,
.subPage-left-panel ul:before{
	background: url("../images/left_menu_top.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
	background-color: transparent;
}
.subPage_menu ul:after,
.subPage-left-panel ul:after{
	background: url("../images/left_menu_bottom.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
}

.subPage_menu li a,
.subPage-left-panel li a{
	padding: 0px 9px;
	/*display: table;*/
	display: block;
}

.subPage_menu li a>li,
.subPage-left-panel li a>li{
	padding: 18px 10px;
	display: table-cell;
	word-break: break-word;
	/*! white-space: nowrap; */
}
.subPage_menu li a>li{
	padding: 10px 10px;
}

.subPage_menu li a:before,
.subPage-left-panel li a:before{
	content: '\A';
	display: table-cell;
	height: 16px;
	width: 16px;
	background: url("../images/pin.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
}

.subPage_menu li a:before{
	height: 2vw;
	width: 4vw;
}

.subPage_menu li.curr a:before,
.subPage-left-panel li.curr a:before{
	background: url("../images/pin_curr.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
}


.subPage-left-panel li.curr:after{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #298ece;
	font-size: 0px;
	vertical-align: middle;
	position: absolute;
	right: 0px;
	top: 41%;
}

.subPage_menu li,
.subPage-left-panel li{
	text-align: left;
	font-weight: 800;
}

.subPage-left-panel li{
	font-size: 17px;
}

.subPage_menu li{
	font-size: 3.7vw;
}

.subPage_menu>ul>li,
.subPage-left-panel>ul>li {
	border-bottom: 1px solid #DADADA;
	position: relative;
}

.subPage_menu>ul>li:last-child,
.subPage-left-panel>ul>li:last-child {
	border-bottom: 0px;
}

.subPage_menu li.curr,
.subPage_menu li:hover,
.subPage-left-panel li.curr,
.subPage-left-panel li:hover{
	color: #298ece;
	position: relative;
}

.subPageHeader {
	/*position: relative;*/
}

.subPage-Sect-title, .subPage-title {
	font-size: 10px;
	padding: 3px 33px;
	width: 60%;
	display: block;
	position: relative;
	z-index: 2;
	/* z-index: 0; */
	padding-top: 10px;
}

.subPage-Sect-title h1, .subPage-title{
	color: #FFF;
}

.subPage-title:before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0em; left: 0;
	z-index: -1;
	border-bottom: none;
	border-radius: 0px 12px 0 0;
	transform: perspective(14px) rotateX(2deg);
	transform-origin: left;
	transform-origin-y: 0px;
}

.subPage-title-slogan {
	position: absolute;
	right: 0px;
	bottom: 0px;
	max-width: 40%;
}

.subPage-title h1 {
	display: inline-block;
}

.classIcon{
	background-size: auto 100% !important;
	background-position: center left !important;
	display: inline-block;
	width: 5vw;
	height: 20px;
	margin-left: 7px;
	vertical-align: sub;
}

.icon-21 {background: url("../images/icon_cid_21.png") no-repeat;}
.icon-22 {background: url("../images/icon_cid_22.png") no-repeat;}
.icon-23 {background: url("../images/icon_cid_23.png") no-repeat;}
.icon-24 {background: url("../images/icon_cid_24.png") no-repeat;}
.icon-25 {background: url("../images/icon_cid_25.png") no-repeat;}
.icon-26 {background: url("../images/icon_cid_26.png") no-repeat;}
.icon-27 {background: url("../images/icon_cid_27.png") no-repeat;}
.icon-28 {background: url("../images/icon_cid_28.png") no-repeat;}
.icon-29 {background: url("../images/icon_cid_29.png") no-repeat;}
.icon-30 {background: url("../images/icon_cid_30.png") no-repeat;}
.icon-31 {background: url("../images/icon_cid_31.png") no-repeat;}

.subPage-content {
	background-color: #FFFBF0;
	padding: 11px 30px;
	line-height: 170%;
	border-top: 6px solid;
	border-bottom: 6px solid;
}

.subPage-content li {
	list-style-position: inside;
	text-indent: -1em;
	margin-left: 1em;
}

.subPage-content li a{
  display: inline;
}

.subPage-content h2{
	color: #276EBB;
	font-size: 23px;
	margin: 12px 0px;
	line-height: normal;
}
.selectClassSect h2 span{
	font-size: 66%;
	font-weight: 400;
}
.subPage-content h3 {
	color: #276EBB;
	font-size: 16px;
}
.subPage-content h4 {
	color: #E17337;
	font-size: 16px;
}

.subPage-content input,
.subPage-content textarea {
	border: 3px solid #e5e5e5;
	outline: none;
	width: 100%;
	padding: 8px 10px;
	font-size: 19px;
	border-radius: 0;
	color: #404040;
	margin: 8px 0px;
}

.subPage-content input{
	height: 42px;
	display: block;
}

.subPage-content .float_img{
	text-align: center;
	display: inline-block;
	vertical-align: top;
}

.backBtn,
.showHW_btn,
.submit_btn {
	color: #FFF;
	height: 38px;
	padding: 0px 23px;
	outline: medium none;
	border: 0px none;
	font-size: 18px;
	text-decoration: none;
	transition: all 0.1s linear 0s;
	background-color: #298ece;
	cursor: pointer;
	margin: 12px 5px;
	margin-top: 0px;
	white-space: nowrap;
	display: table;
}

.backBtn {
	margin-top: 20px;
}

.tagBtn{
	text-decoration: none;
	outline: medium none;
}


.subPage-content img {
	width: 100%;
}

.showHW_btn:hover,
.submit_btn:hover{
	background-color: #59b1e9;
}

/* Homework */
.selectSchDay_btn,
.selectForm_btn,
.selectClass_btn {
	color: #FFF;
	cursor: pointer;
	position: relative;
	text-align: center;
	margin: 4px;
	height: 8.2vw;
	display: table;
	max-width: 320px;
	max-height: 70px;
	background-color: #ea6a00;
	font-size: 21px;
}

.selectSchDay_btn{
	width: 30vw;
	height: 8.2vw;
	display: table;
	max-width: 320px;
	max-height: 70px;
	background-color: #ea6a00;
	font-size: 21px;
}


.selectSchDay_btn,
.selectForm_btn {
	background-color: #ea6a00;
}
.selectClass_btn{
	background-color: #39b54a;
}

.selectSchDay_btn span{
	display: table-cell;
	vertical-align: middle;
}

.selectSchDay_btn span>div {
	display: inline-block;
	margin: 0px 8px;
}

.selectSchDay_btn.is-active:hover, 
.selectForm_btn.is-selected, 
.selectForm_btn:hover{
	background-color: #ffaa00;
}


.selectClass_btn:hover{
	/*background-color: #2c742c;*/
	background-color: #F2BB20;
}

.selectClass_btn.is-selected,
.selectClass_btn.is-selected:hover{
	/*background-color: #5ded5d;*/
	background-color: #F2BB20;
}

.selectForm_Gp {
	margin-bottom: 20px;
}

.selectForm_Gp, .selectEachClass_Gp{
	position: relative;
	width: 100%;
	display: table;
}

.selectForm_btn,
.selectClass_btn{
	float: left;
	display: table;
	font-size: 27px;
	width: 8.8vw;
	height: 8.8vw;
	max-width: 112px;
	max-height: 112px;
}

.selectForm_btn span,
.selectClass_btn span{
	display: table-cell;
	vertical-align: middle;
}

.selectEachClass_Gp {
	display: none;
	overflow: auto;
	margin-bottom: 34px;
}

.selectEachClass_Gp.is-selected {
	display: block;
}

.selectEachClass_Gp .classGp {
	overflow: auto;
	/* border-bottom: 1px solid #BCBCBC; */
	border-bottom: 0px solid #BCBCBC;
	padding: 9px 0px;
}
h2.is-disabled{
	display: none;
}
.showHW_btn {
	font-size: 24px;
	padding: 8px 24px;
	padding-top: 11px;
}
.showHW_btn.is-disabled{
	background-color: #CCCCCC;
	color: #FFFFFF;
	cursor: not-allowed;
}
.showHW_btn span{
	display: table;
}
.showHW_btn span p{
	display: table-cell;
	vertical-align: middle;
	padding-left: 11px;
}

.showHW_btn span:before {
	content: '\A';
	background: url("../images/icon_hw.png") no-repeat;
	background-size: 100% auto;
	background-position: center -12%;
	display: table-cell;
	height: 40px;
	width: 35px;
	vertical-align: middle;
}

.showHW_result {
	display: none;
}

/* Contact Us */
.contact_us{
	width: 70%;
}

.status{
	height: 50px;
	display: block;
	font-size: 20px;
	font-weight: 700;
}

.is-success {
	color: #49CF0E;
}

.is-fail {
	color: #D40000;
}


.hw_detail h2 {
	margin-top: 10px;
}

.hw_detail img{
	width: 70%;
}


.tabMenu {
	display: block;
	position: relative;
}

.tabMenu .hscroll_btn{
	display: none;
}

.width_66_100 {
	width: 65% !important;
	padding: 7px;
}

.width_50_50,.width_50_100 {
	width: 49% !important;
	padding: 7px;
}

.width_33_50 img,
.width_50_50 img{
	width: 100%;
}

.width_33_50 p,
.width_50_50 p{
	font-size: 12px;
}

.width_25_50 {
	width: 24% !important;
	padding: 7px;
}

.width_33_33,
.width_33_50,
.width_33_100 {
	width: 32% !important;
	padding: 7px;
}


button.tagBtn {
	background-color: transparent;
	border: 0px none;
	/*padding: 0px 10px;
	padding-left: 0px;*/
}
button.tagBtn,
.tabBtn {
	margin: 3px 3px;
	padding: 5px 17px;
	cursor: pointer;
	white-space: nowrap;
	color: #D6EDEC;
	font-weight: 800;
	font-size: 18px;
	display: inline-block;
	line-height: initial;
	background-color: #04B5B5;
}



button.tagBtn:last-child,
.tabBtn:last-child {
	border-right: 0px;
}

button.tagBtn.curr,
.tabBtn.curr {
	color: #008E8A;
	background-color: #D6EDEC;
}

button.tagBtn:not(.curr):hover,
.tabBtn:not(.curr):hover {
	color: #008E8A;
	background-color: #D6EDEC;
}

.tabBtn2 {
	margin: 3px 3px;
	padding: 5px 17px;
	cursor: pointer;
	white-space: nowrap;
	color: #D6EDEC;
	font-weight: 800;
	font-size: 18px;
	display: inline-block;
	line-height: initial;
	background-color: #04B5B5;
}

.tabBtn2 a {
	color: #D6EDEC;
	text-decoration: none;
}

.tabContentContainer {
	padding: 10px;
}

/* Outer */
.popup {
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0,0,0,0.75);
	z-index: 600;
}

/* Inner */
.popup-inner {
	/*! max-width:700px; */
	width:auto;
	padding:9px;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	box-shadow:0px 2px 6px rgba(0,0,0,1);
	border-radius:3px;
	background:#FFF;
}

.popup-loading {
	background: url("../images/loading_spinner.gif") no-repeat;
	background-size: 100% 100%;
	
	width: 80px;
	height: 80px;
}

.popup-inner img{
	border: 0px;
	display: block;
	width: auto;
	height: auto;
	max-height: 80vh;
	max-width: 80vw;
}

.popup-content p {
	margin: 10px;
}


.popup-inner.center_text p{
	font-size: 5vw;
}

.popup-inner .popupChgImgBtn {
	position: absolute;
	top: 50%;
	cursor: pointer;
	height: 7%;
	width: 5%;
	min-width: 30px;
	min-height: 27px;
}

.popup-inner .prevImgBtn {
	background: url("../images/arrow_left_w.gif") no-repeat;
	background-size: auto 100%;
	background-position: left;
	left: -4.2vw;
}

.popup-inner .nextImgBtn {
	background: url("../images/arrow_right_w.gif") no-repeat;
	background-size: auto 100%;
	background-position: right;
	right: -4.2vw;
}

.popup-inner .playSlideShowBtn{
	background: url("../images/icon_playBtn.png") no-repeat;
	background-size: auto 100%;
	height: 4vw;
	width: 4vw;
	position: absolute;
	cursor: pointer;
	left: 48%;
	top: 102%;
}
.popup-inner .playSlideShowBtn.playing{
	background: url("../images/icon_pauseBtn.png") no-repeat;
	background-size: auto 100%;
}

.popup-inner .preLoadImg{
	display:none;
}

/* Close Button */
.popup-close {
	width:30px;
	height:30px;
	padding-top:4px;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	transition:ease 0.25s all;
	-webkit-transform:translate(50%, -50%);
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgb(0, 0, 0);
	font-family:Arial, Sans-Serif;
	font-size:20px;
	text-align:center;
	line-height:100%;
	color:#FFF;
}

.popup-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgb(0, 0, 0);
	text-decoration:none;
}

.numNavGp {
	position: relative;
	height: 30px;
	margin-top: 7px;
}

.numNav {
	display: block;
	right: 10px;
	position: absolute;
}

.numNav ul {
	display: inline-flex;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
}

.numNav li {
	cursor: pointer;
	padding: 0px 3px;
}
.numNav li::before {
	display: none;
}
.numNav li.curr {
	color: #298ece;
}
.numNav li:hover {
	color: #70c1f5;
}

.yrrecordphoto .prevNumGp,
.yrrecordphoto .nextNumGp,
.yrrecordphoto .numli{
	display: none!important;
}


.yrrecordphoto .prevPage,
.yrrecordphoto .nextPage{
	width: 40px;
	height: 40px;
}

.yrrecordphoto .numNav{
	position: relative;
	width: 94%;
	margin: 0px auto;
	right: 0px;
}

.yrrecordphoto .prevPage{
	background: url("../images/arrow_blue_left.png") no-repeat;
	background-size: 100% 100%;
	background-position: center;
	left: -20px;
	position: absolute;
}

.yrrecordphoto .nextPage{
	background: url("../images/arrow_blue_right.png") no-repeat;
	background-size: 100% 100%;
	background-position: center;
	right: -15px;
	position: absolute;
}

.tabContent table {
	width: 100%;
}
.tabContent table td {
	padding: 10px 20px;
}

.tbl_bkgd_1 tbody {
	background-color: #fff5c2;
}

.tbl_bkgd_1 td {
	padding: 5px 10px;
}

.tbl_bkgd_1 thead td{
	color: #FFF;
	background-color: #fa7c54;
}

.tbl_align_left     {text-align: left;}
.tbl_align_center {text-align: center;}
.tbl_align_right   {text-align: right;}

.tbl_align_left_col1 td:nth-child(1) {text-align: left;}
.tbl_align_left_col2 td:nth-child(2) {text-align: left;}
.tbl_align_left_col3 td:nth-child(3) {text-align: left;}
.tbl_align_left_col4 td:nth-child(4) {text-align: left;}
.tbl_align_left_col5 td:nth-child(5) {text-align: left;}
.tbl_align_left_col6 td:nth-child(6) {text-align: left;}
.tbl_align_left_col7 td:nth-child(7) {text-align: left;}

.tbl_align_center_col1 td:nth-child(1) {text-align: center;}
.tbl_align_center_col2 td:nth-child(2) {text-align: center;}
.tbl_align_center_col3 td:nth-child(3) {text-align: center;}
.tbl_align_center_col4 td:nth-child(4) {text-align: center;}
.tbl_align_center_col5 td:nth-child(5) {text-align: center;}
.tbl_align_center_col6 td:nth-child(6) {text-align: center;}
.tbl_align_center_col7 td:nth-child(7) {text-align: center;}

.tbl_align_right_col1 td:nth-child(1) {text-align: right;}
.tbl_align_right_col2 td:nth-child(2) {text-align: right;}
.tbl_align_right_col3 td:nth-child(3) {text-align: right;}
.tbl_align_right_col4 td:nth-child(4) {text-align: right;}
.tbl_align_right_col5 td:nth-child(5) {text-align: right;}
.tbl_align_right_col6 td:nth-child(6) {text-align: right;}
.tbl_align_right_col7 td:nth-child(7) {text-align: right;}

.tbl_equal_width {
	table-layout: fixed;
}

.input {
    position: relative;
    display: block;
}

.tooltip {
	position: absolute;
	z-index: 1;
	left: -9999px;
	padding: 2px 8px 3px;
	font-size: 1vw;
	line-height: 17px;
	font-weight: 400;
	background: rgba(0, 0, 0, 0.9);
	color: #fff;
	opacity: 1;
	transition: margin 0.3s, opacity 0.3s;
	-o-transition: margin 0.3s, opacity 0.3s;
	-ms-transition: margin 0.3s, opacity 0.3s;
	-moz-transition: margin 0.3s, opacity 0.3s;
	-webkit-transition: margin 0.3s, opacity 0.3s;
}

.tooltip:after {
	content: '';
	position: absolute;
}

.tooltip-bottom-left {
	top: 100%;
	margin-top: 15px;
}

.tooltip-bottom-left:after {
	bottom: 100%;
	left: 16px;
	border-right: 4px solid transparent;
	border-bottom: 4px solid rgba(0, 0, 0, 0.9);
	border-left: 4px solid transparent;
}

.showtooltip {
	opacity: 1;
	left: auto;
	margin-top: 5px;
}

.input input:focus+.tooltip-bottom-left {
	right: auto;
	left: -9999px;
	margin-top: 15px;
	opacity: 0;
}

.input input:focus+.tooltip-bottom-left {
	left: 100%;
	margin-left: 5px;
}

textarea:focus,
input:focus {
    border-color: #1590de;
}

.overlay {
	background-color: rgb(0, 0, 0);
	visibility: visible;
	opacity: 0.6;
	position: fixed;
	z-index: 300;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#forgetPW_form{
	position: absolute;
	max-width: 400px;
	min-width: 365px;
	background-color: #F9F6F1;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
	z-index: 400;
	left: 4%;
}

.forgetPW_box_header {
    font-size: 22px;
    margin: 0px;
    border-bottom: 1px solid #C9C9C9;
    background-color: #E0DCD9;
}
.forgetPW_box_header h1 {
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    margin: 0px 10px;
    padding: 10px;
    color: #0B4053;
}
.forgetPW_box_body {
    display: block;
    padding: 16px 50px;
}


.forgetPW_box_body,
.forgetPW_box_body p,
.forgetPW_box_body input{
    font-size: 16px;
}

.forgetPW_box_footer {
    display: block;
    border-top: 1px solid #EEE;
    box-shadow: 0px 1px 0px #FFF inset;
    margin-bottom: 0px;
    text-align: right;
    background-color: #E0DCD9;
    padding: 5px 30px 13px;
    overflow: auto;
}

.forgetPW_box_footer .btn {
	float: right;
	margin-left: 8px;
}
.fb_link h2 {
	color:#d8502b;
}

.fb_iframe_widget{
	float: right;
}
a.btn{
	
	padding: 4px 33px;
}

a:hover {
	text-decoration: none !important;
}

.mobile-only {
	display: none;
}

.temporary-hide {
	display: none;
}

.temporary-black-background {
	/* background: black !important; */
	opacity: 0.1;
}

.fade-in {
	animation: fadeIn linear 2s;
	-webkit-animation: fadeIn linear 2s;
	-moz-animation: fadeIn linear 2s;
	-o-animation: fadeIn linear 2s;
	-ms-animation: fadeIn linear 2s;
  }
  @keyframes fadeIn {
	0% {
	  opacity:0.3;
	}
	100% {
	  opacity:1;
	}
  }
  
  @-moz-keyframes fadeIn {
	0% {
	  opacity:0.3;
	}
	100% {
	  opacity:1;
	}
  }
  
  @-webkit-keyframes fadeIn {
	0% {
	  opacity:0.3;
	}
	100% {
	  opacity:1;
	}
  }
  
  @-o-keyframes fadeIn {
	0% {
	  opacity:0.3;
	}
	100% {
	  opacity:1;
	}
  }
  
  @-ms-keyframes fadeIn {
	0% {
	  opacity:0.3;
	}
	100% {
	  opacity:1;
  	}
  }

@media screen and (max-width: 1200px) {
	.catBrowser-item span {
		font-size: 16px;
	}

	.slogan{
		font-size: 2.5vw;
	}
	
	.subPage-content {
		padding: 1.1vw 1.4vw;
	}

	.folder {
		margin: 0.3vw;
		/*height: 19vw;*/
		width: 22vw;
		max-width: 32%;
		opacity: 1;
	}
	.folder a {
		padding: 11px;
	}
	.folder .album_thumbnail {
		margin-bottom: 0.6vw;
	}
	.folder .staff_title p, .folder .album_title p {
		font-size: 1.4vw;
		margin-bottom: 0.1vw;
	}
	
	.classIcon{
		height: 2vw;
	}
	
	.yrrecordphoto .tagBtnGroup{
		height: 3.3vw;
	}
	
	.yrrecordphoto .hscroll_btn{
		height: 2.9vw;
		width: 1.9vw;
	}
	.subPage-left-panel ul {
	    margin: 0px 5px;
	}
	.subPage-left-panel li {
		/*font-size: 1.8vw;*/
	}
	.subPage-left-panel li a::before {
		height: 1.7vw;
		width: 1.7vw;
	}

	/* .link-div {
		display: block;
	} */

	.link-div-teacher-title {
		position: absolute;
		left: 60%;
		top: 20%;
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
	}
	
	.link-div-intranet-title {
		position: absolute;
		left: 58%;
		top: 20%;
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
	}

	.students_section {
		/* height: 13vh; */
	}
	
	#students .icon {
		width: 15vw;
		/* position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -30%); */
	}

	#students .students_section_title {
		/* background: #44A49D; */
		/* width: 100%;
		height: 45%;
		position: absolute;
		bottom: -8%;
		text-align: center;
		color: white;
		font-weight: 700;
		line-height: 250%; */
		width: 100%;
		height: 45%;
		/* background: #44A49D; */
		position: absolute;
		bottom: 0;
		/* left: -5%; */
		text-align: center;
		color: white;
		font-weight: 700;
		line-height: 320%;
		font-size: 16px;
	}

	#links_an_calendar{
		width: 32%;
		background-color: #f2f2f2;
	}
	
	#news_list{
		width: 35%;
		background-color: #f2f2f2;
	}
	
	#video{
		width: 31%;
		background-color: #f2f2f2;
	}

	/* .glyphicon-chevron-right::before {
		font-family: initial;
	} */
}


@media screen and (max-width: 1000px) {

	#main {
		padding: 0px 2vw;
	}

	#main {
		padding: 0px 2vw;
	}

	.header,
	.footer  {
		margin: 0px;
	}

	.catBrowser-label:before{
		height: 2.5vw;
		width: 2.5vw;
		margin-right: 0.9vw;
	}

	.intra_login_header {
		font-size: 1.9vw;
		line-height: 7vw;
	}

	.footer {
		margin: 0px;
		/* padding: 20px 4vw; */
		padding-top: 20px;
		margin-left: -2vw;
		width: 110vw;
	}

	#login_form input{
		font-size: 1.9vw;
		height: 4.4vw;
	}

	.login_btn {
		font-size: 2.3vw;
		height: 4.6vw;
		margin: 0.5vw auto;
	}

	.intraIcon {
		height: 7.4vw;
		width: 7vw;
	}

	#login_form{
		padding: 3% 8%;
	}
	.yrrecordphoto .tagBtnGroup{
		height: 4.4vw;
	}
	
	.yrrecordphoto .hscroll_btn{
		height: 3.8vw;
		width: 3.3vw;
	}
	.yrrecordphoto .prevPage, .yrrecordphoto .nextPage {
			width: 4.2vw;
			height: 4.2vw;
	}
	
	.yrrecordphoto .nextPage{
		right: -1.8vw;
	}
	
	.yrrecordphoto .prevPage{
		left: -1.8vw;
	}

	#links_an_calendar{
		width: 32%;
		background-color: #f2f2f2;
	}
	
	#news_list{
		width: 34%;
		background-color: #f2f2f2;
	}
	
	#video{
		width: 31%;
		background-color: #f2f2f2;
	}

}