/*@green: #81c255;*/

@green: #547B38;
@blue: #0173ba;
@light_grey: #e1e1e1;
/*@blue_font: #046db7;*/
@blue_font: #0362A6;
@dark_blue_font: #0362A6;
@cal_grey: #707070;
/*@light_blue: #3c8ddc;*/
@light_blue: #2478CC;
@grey: #636363;
/*@blue_cal_list: #046db7;*/
@blue_cal_list: #0365AB;
/*@btn_blue: #347abe;*/
@btn_blue: #0365AB;
@cal_sky: #D4EDF2;


a {
	color: @blue;
	text-decoration: none;
}
.btn {
	background-color: @blue;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
	padding: 0.375rem 1rem;
	a {
		color: white;
		&:hover {
			text-decoration: none;
		}
	}
}
body {
	font-weight: 300;
}
main {
	#main_slider {
		width: 100%;
		.slide {
			margin-bottom: 0;
			.slick-list .slick-track {
				height: ~"calc(100vh - 330px)";
/*				height: ~"calc(100vh - 230px)";*/
				.item {
					height: inherit;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: center;
					background-size: cover;
					.item-wrapper {
						// background-color: #00000033;
						// padding: 1rem;
						// width: 70%;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						// align-items: flex-start;
						.item-title, .item-subtitle, .btn {
							// margin-left: 30%;
							width: 70%;
							color: white;
							margin-right: 3rem;
							text-align: right;
							// text-align: left;
						}
						.item-title {
							font-size: 2.8rem;
							font-weight: 700;
							text-transform: uppercase;
						}
						.item-subtitle {
							font-size: 1.5rem;
						}
						.btn {
							// float: right;
							background-color: @green;
							// border-radius: 21px;
							color: white;
							font-weight: 600;
							width: fit-content;
							width: -moz-fit-content;
						}
					}
				}
			}
			.slick-dots {
				bottom: 16px;
				li {
					button:before {
						font-size: 20px;
					}
				}
			}
		}
	}
	#welcome {
		background-color: @light_grey;
		color: @dark_blue_font;
		width: 100%;
		height: 170px;
		display: flex;
		align-items: center;
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

		}
		/*.welcome-title {
			font-size: 1.8rem;
			font-weight: 600;
		}*/
		.welcome-content {
			// width: 45%;
/*			text-align: center;*/
			margin-bottom: 0;
			font-size: 2.2rem;
            font-weight: bold;
		}
	}
	.content-left, .sidebar-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.content-left .top-section {
		margin: 0 -15px;
		#intro {
			// margin: 50px 1rem 50px -15px;
			padding: 2rem 1rem 0 0;
			// #intro-update {
			// 	// border-left: 2px solid @blue;
			// 	margin-bottom: 2rem;
			// }
			#btn_go_to_news {
				position: absolute;
				top: 32px;
				left: 15rem;
				color: white;
			}
			.intro-title, h2 {
				font-weight: 800;
				border-left: 6px solid @blue;
				padding-left: 9px;
				margin: 0 0 1rem;
				line-height: 0.8;
				font-size: 2.5rem;
			}
			.intro-subtitle, h3 {
				font-weight: 500;
				color: @blue;
				padding-left: 15px;
				font-size: 1.9rem;
			}
			.intro-notice {
				font-size: 20px;
				padding-left: 15px;
				margin:0.8rem 0;
			}
			.intro-notice {
				font-size: 20px;
				padding-left: 15px;
				margin: -5px 0 8px;
			}
			.intro-content, p {
				padding-left: 15px;
				color: @blue;
/*				margin-bottom: 2rem;*/
				font-size: 1rem;
			}
            #update-content {
                padding-left: 0;
            }
		}
	}
	#video_slider {
		position: relative;
		margin-bottom: 2px;
		.main_slide {
			width: 100%;
			.item {
				width: 100%;
				height: 30rem;
				iframe, video {
					width: 100%;
					height: 100%;
				}
			}
		}
		.sub_slide {
			width: 150px;
			// max-height: 38vw;
			position: absolute;
			top: 0;
			left: 0;
			// bottom: 100px;
			.slick-list {
				height: 26rem !important;
			}
			.item {
				// width: 100px;
				height: 100px;
				.title {
					background-color: @blue;
					color: white;
					display: flex;
					justify-content: center;
					height: 100%;
					align-items: center;
					font-weight: 600;
					opacity: 0.7;
					text-align: center;
				}
				&.slick-current .title {
					color: @dark_blue_font;
					background-color: @light_grey;
				}
			}
		}
	}
	.sidebar-right {
		background-color: @light_grey;
		.calendar-header {
			text-align: center;
			margin: 10px auto;
			font-size: 2rem;
			color: @blue_font;
		}
		#calendar-sidebar {
			background-color: @cal_grey;
			color: white;
			.fc-center h2 {
				font-size: 1em;
				text-transform: uppercase;
				font-weight: 700;
				padding-top: 5px;
				padding-bottom: 3px;
			}
			.table-bordered thead th {
				background-color: @light_blue;
			}
			.fc-toolbar.fc-header-toolbar {
				margin-bottom: 0;
			}
			.fc-body .fc-row {
				min-height: 2.3em;
			}
			.fc-content-skeleton {
				thead {
					line-height: 1;
				}
			}
			.fc-more-cell > div {
				margin: 0;
				padding: 0;
				background-color: @blue_font;
				height: 19px;
				height:7px;
				margin-top:12px;
				> .fc-more{
					margin-top:0 !important;
					display:block;
				}
			}
			.fc-popover .fc-header {
				background-color: @light_blue;
			}
			.fc-day-top {
				line-height: 1;
				padding-top: 5px;
			}
            .alert-info {
                background-color: @cal_sky;
            }
			.fc-day-number {
				float: none;
				font-size: 1.2rem;
				font-weight: 600;
			}
			&.fc {
				text-align: center;
			}
			.fc-content{
				margin-top:0;
			}
			.sidebar-event, .fc-more-cell {
				overflow: hidden;
				bottom: 0;
				text-indent: -100em;
				background-color: @cal_grey;
				border: 0;
				height: 20px;
				margin: 0;
				padding: 0;
				border-radius: 0;
				.fc-content, .fc-more {
					background-color: @light_blue;
					height: 6px;
					width: 65%;
					margin: 3px auto 0;
				}
			}
			.fc-popover .sidebar-event {
				height: auto;
				text-indent: initial;
				margin: 1px 0;
				.fc-content {
					margin-top: 0;
					height: 19px;
				}
			}
		}
		#calendar-list {
			margin: 1rem 0;
			.fc-list-view {
				border-width: 0;
				background-color: unset;
			}
			.fc-header-toolbar {
				display: none;
			}
			.table {
				margin-bottom: 0;
				.fc-list-heading {
					display: none;
				}
				.fc-list-item {
					color: white;
					background-color: @light_grey;
					padding-bottom: 1rem;
					.fc-list-item-time {
						display: none;
					}
					.fc-list-item-marker {
						background-color: @grey;
						padding-right: 14px;
						text-align: center;
						width: 20%;
						vertical-align: middle;
						.day, .date {
							line-height: 1;
							color: @light_grey;
						}
						.day {
							font-size: 1.5em;
							font-weight: 600;
							text-transform: uppercase;
						}
						.date {
							font-size: 2.6em;
							font-weight: 800;
						}
					}
					.fc-list-item-title {
						padding-top: 0;
						border-top-color: @light_grey;
						border-bottom: 1px solid @grey;
						a {
							text-decoration: none;
						}
						.title, .time {
							line-height: 1;
							color: @blue_cal_list;
						}
						.title {
							padding-top: 2px;
							padding-bottom: 8px;
							font-weight: 600;
						}
					}
					&:last-child .fc-list-item-title {
						border-bottom: none;
					}
				}
			}
			.fc-list-empty-wrap2 {
				position: relative;
				background-color: @light_grey;
			}
		}
		.btn {
			width: 100%;
			margin-bottom: 1rem;
			background-color: @btn_blue;
			a {
				font-weight: 600;
				font-size: 1.4em;
			}
		}
		#main-links {
			display: flex;
			flex-direction: column;
			align-items: center;
			.link {
				margin: 2px;
				&:hover {
					cursor: pointer;
				}
				img {
					height: 14.9rem;
				}
			}
		}
	}
}
@media only screen and (max-width: 768px) {
	main {
		#main_slider .slide .slick-list .slick-track {
			height: 42vw;
		}
		#welcome {
			height: 60px;
			.welcome-content {
                font-size: 1.4rem;
				padding: 12px 0;
			}
		}
		.content-left {
			.top-section #intro {
				.intro-title, h2 {
					font-size: 1.6rem;
				}
				.intro-subtitle {
					font-size: 1.2rem;
				}
				.intro-notice, p {
					font-size: 1.2rem;
				}
			}

		}
		#video_slider {
			.main_slide .item {
				height: 19rem;
			}
			.sub_slide {
				.slick-list {
					height: 15.5rem !important;
				}
				.item {
					height: 70px;
				}
			}
		}
		.sidebar-right {
			.calendar-header {
				font-size: 1.2rem;
			}
			.btn {
				padding: 2px 6px;
				a {
					font-size: 0.9em;
				}
			}
			#main-links .link img {
				height: 9.35rem;
			}
		}
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	main {
		.sidebar-right {
			#calendar-sidebar {
				.fc-body .fc-row {
					min-height: 1.7em;
				}
				.fc-day-top {
					padding-top: 0;
				}
				.fc-day-number {
					font-size: 14px;
				}
			}
			#calendar-list {
				.table .fc-list-item {
					.fc-list-item-marker {
						padding: 3px;
						.day {
							font-size: 1em;
						}
						.date {
							font-size: 1.7em;
						}
					}
					.fc-list-item-title {
						padding: 0 2px 2px;
						font-size: 14px;
						.title {
							font-weight: 400;
							padding-bottom: 4px;
						}
					}
				}
			}
		}
	}
}
@media only screen and (max-width: 425px) {
	main {
		#main_slider .slide {
			.slick-list .slick-track {
				// height: ~'calc(100vh - 415px)';
				.item .item-wrapper {
					.item-title {
						font-size: 1.2rem;
						width: 100%;
					}
					.item-subtitle {
						font-size: 1rem;
						width: 100%;
					}
					.item-title, .item-subtitle, .btn {
						margin-right: 0;
					}
				}
			}
			.slick-dots {
				bottom: 0;
			}
		}
		#welcome {
			height: auto;
			.row {
				margin-left: 0;
				margin-right: 0;
			}
			.welcome-title {
				font-size: 1.2rem;
			}
			.welcome-content {
				font-size: 20px;
				padding: 8px 0;
			}
		}
		.content-left {
			.top-section #intro {
/*				.intro- {*/
					.intro-title, h2 {
						font-size: 1.4rem;
						margin-bottom: 8px;
					}
					.intro-subtitle {
						font-size: 1.2rem;
					}
					.intro-notice {
						font-size: 1rem;
					}
					.intro-content, p {
						font-size: 14px;
						margin-bottom: 1rem;
					}
/*				}*/

			}
			#programs {
				.bg-img {
					height: 84px;
					.title {
						font-size: 1.4rem;
					}
				}
				.content {
					padding: 8px 0;
				}
			}
			#video_slider {
				.main_slide .item {
					height: 164px;
				}
				.sub_slide {
					width: 110px;
					.slick-list {
						height: 7rem !important;
                        padding: 0 !important;
					}
					.item {
						height: 39px;
						.title {
							font-size: 12px;
						}
					}
				}
			}
		}
		.sidebar-right {
			.calendar-header {
				font-size: 1.4rem;
			}
			.btn a {
				font-size: 1em;
			}
			#main-links {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
		}
	}
}