@blue: #0173ba;
@light_blue: #3c8ddc;
@blue_left_bar: #528cd6;
@blue_font: #046db7;
@blue_font_transparent: #046db799;
@blue_cal_list: #046db7;
/*@blue_btn: #347abe;*/
@blue_btn: #2478CC;
@cal_grey: #707070;
@grey: #636363;
@dark_grey: #363636;
@light_grey: #ebebeb;
a {
	color: @light_blue;
	text-decoration: none;
}
p {
    font-size: 1em;
}
.btn {
	background-color: @blue_btn;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	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 - 334px)";
				.item {
					height: inherit;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: center;
					background-size: cover;
                    background-color: @blue_btn;
					.item-wrapper {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.item-title, .item-subtitle, .btn {
							width: 80%;
							color: white;
							margin-right: 3rem;
							text-align: right;
						}
						.item-title {
							font-size: 2.8em;
							font-weight: 700;
							text-transform: uppercase;
						}
						.item-subtitle {
							font-size: 1.5em;
						}
						.btn {
							color: white;
							font-weight: 600;
							width: fit-content;
							width: -moz-fit-content;
						}
					}
				}
			}
			.slick-dots {
                bottom: 16px;
				li {
                    width: 2rem;
                    height: 2rem;
					button:before {
						font-size: 2rem;
                        color: @light_blue;
                        opacity: 0.5;
					}
                    &.slick-active button:before {
                        color: @blue_btn;
                        opacity: 1;
                    }
				}
			}
		}
	}
	#welcome {
/*        background-color: @light_blue;*/
		background-color: @blue_btn;
		color: white;
		width: 100%;
        position: relative;
		.container {
			height: 160px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.welcome-title {
			font-size: 1.8em;
			font-weight: 600;
		}
		.welcome-content {
			// width: 45%;
			text-align: center;
			margin-bottom: 0;
			font-size: 1.2em;
		}
        .welcome-container {
            display: flex;
            > div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 0.5rem;
                padding: 1rem;
            }
        }
        .images {
            align-items: center;
            width: 16.7%;
            img {
                max-height: 150px;
                max-width: 100%;
            }
        }
        .content {
            width: 66.6%;
        }
        .btn {
            position: absolute;
            bottom: 2rem;
/*            right: 10rem;*/
            right: 1rem;
            background-color: rgba(255,255,255,.8);
            border-radius: 7px;
            color: @light_blue;
            font-size: 1.8rem;
            &:hover i {
                -webkit-animation: bounce 2s infinite;
                -moz-animation: bounce 2s infinite;
                animation: bounce 2s infinite;
            }
        }
        @keyframes bounce {
            20%, 53%, 80%, 0%, 100% {
              -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
              animation-timing-function: cubic-bezier(0.215,.61,.355,1);
              -webkit-transform: translateY(0);
              transform: translateY(0);
            }
            40%, 43% {
              -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
              animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
              -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
            }
            70% {
              -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
              animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
              -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
            }
            90% {
              -webkit-transform: translate3d(0,-4px,0);
              transform: translateY(-4px);
            }
	    }
    }

	.content-left, .sidebar-right {
		display: flex;
		flex-direction: column;
	}
    .content-left {
        justify-content: space-between;
    }
    .sidebar-right {
        justify-content: flex-start;
    }
	.content-left .top-section {
		margin: 0 -15px;
		#intro {
			padding: 2rem 1rem 0 0;
			#btn_go_to_news {
				position: absolute;
				top: 32px;
				left: 15rem;
			}
			.intro-title {
				font-weight: 800;
				border-left: 6px solid @blue_left_bar;
				padding-left: 9px;
				margin: 0 0 1rem;
				line-height: 0.8;
				font-size: 2.5em
			}
			.intro-subtitle {
				font-weight: 500;
				color: @blue_font;
				padding-left: 15px;
				font-size: 1.9em;
			}
			.intro-notice {
				font-size: 1.2em;
				padding-left: 15px;
				margin: -5px 0 8px;
			}
			.intro-content {
				padding-left: 15px;
				color: @blue_font;
				margin-bottom: 2rem;
				font-size: 1em;
				p {
					display: none;
					&:first-child {
						display: block;
					}
				}
			}
		}
	}
	#programs {
		.col-12 {
			padding: 0 1px 2px;
			&:first-child {
				padding-left: 0;
			}
			.bg-img {
				border: 2px solid @light_blue;
				border-bottom: 0;
				background-size: cover;
				background-position: center;
                background-color: @blue_btn;
				display: flex;
				height: 115px;
				align-items: center;
				justify-content: center;
				.title {
					font-size: 1.8em;
					color: white;
					font-weight: 600;
					text-align: center;
				}
			}
			.content {
				border: 2px solid @light_blue;
				border-top: 0;
				padding-top: 18px;
				padding-bottom: 18px;
				text-align: center;
				background-color: @light_grey;
                display: flex;
				a {
					line-height: 1.7;
					color: black;
					font-weight: 400;
				}
			}
		}
	}
	#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: 170px;
            background-color: @blue_font_transparent;
			position: absolute;
			top: 0;
			left: 0;
			.slick-list {
				height: 24rem !important;
                padding: 0 !important;
			}
			.item {
				height: 100px;
/*                background-size: cover;*/
                position: relative;
                margin: 10px;
                margin-bottom: 1rem;
                .bg_image {
                    width: 100%;
                    object-fit: cover;
                    opacity: 0.8;
                    filter: brightness(25%);
                }
                i {
                    display: block;
                    position: absolute;
                    top: 20%;
                    left: 37%;
                    color: white;
                    font-size: 3rem;
                }
				.title {
/*					background-color: @light_blue;*/
					color: white;
                    text-shadow: 1px 1px 2px #000000;
					/*display: flex;
					justify-content: center;
					height: 100%;
					align-items: center;*/
					font-weight: 600;
					text-align: center;
                    position: absolute;
                    bottom: -20px;
                    width: 100%;
                    line-height: 1;

				}
				&.slick-current {
                    .bg_image {
                        filter: none;
                    }
                    i {
                        display: none;
                    }
                    .title {
					    /*color: @blue_font;
					    background-color: @light_grey;*/
				    }
                }
			}
		}
	}
	.sidebar-right {
		background-color: @light_grey;
		.calendar-header {
			text-align: center;
			margin: 10px auto;
			font-size: 2em;
			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;*/
				background-color: @blue_btn;
			}
			.fc-toolbar.fc-header-toolbar {
				margin-bottom: 0;
			}
			.fc-body .fc-row {
				min-height: 2.3rem;
			}
			.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;
			}
			.fc-day-number {
				float: none;
				font-size: 1.2em;
				font-weight: 600;
			}
			&.fc {
				text-align: center;
			}
			.fc-content{
				margin-top:0;
			}
			.sidebar-event, .fc-more-cell {
				overflow: hidden;
				bottom: 0;
				text-indent: -100rem;
				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;
				}
			}
            .alert-info {
                color: @blue_btn;
                background-color: white;
            }
            .fc-title {
                background-color: @blue_btn;
            }
		}
		#calendar-list {
			margin: 1em 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;
			a {
				font-weight: 600;
				font-size: 1.4em;
			}
		}
		#main-links {
			display: flex;
			flex-direction: column;
			.links {
				margin: 2px;
				img {
					width: ~'calc(100% + 14px)';
					margin: 0 -8px;
				}
                position: relative;
                &.inactive {
                    &::after {
                        display: none;
                        position: absolute;
                        content: 'Under Construction';
                        font-weight: 600;
                        font-size: 1.4em;
                        color: white;
                        top: 0;
                        left: -7px;
                        bottom: 0;
                        right: -7px;
                        background-color: rgba(0,0,0,.5);
                        text-align: center;
                    }
                    &:hover::after {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
			}
		}
	}
}
@media only screen and (max-width: 1199px) {
    main #welcome {
        .images img {
            max-height: 80px;
        }
        .btn {
            right: 1rem;
            bottom: 0.5rem;
        }
    }
    main #video_slider .sub_slide {
        width: 160px;
        .item {
            height: 80px;
            margin-bottom: 1.4rem;
            .title {
                font-size: 14px;
                bottom: -30px;
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
	main {
		.content-left #programs .col-md-6 {
			.bg-img {
				height: 84px;
				.title {
					font-size: 1.5em;
				}
			}
			.content {
				padding: 2px 0;
			}
		}
		#video_slider {
			.main_slide .item {
				height: 25.3rem;
			}
			.sub_slide {
				.slick-list {
					height: 21.7em !important;
				}
				.item {
/*					height: 70px;*/
				}
			}
		}
		.sidebar-right {
			.calendar-header {
				font-size: 1.8em;
			}
			.btn a {
				font-size: 1.2em;
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	main {
		#main_slider .slide {
            .slick-list .slick-track {
			    height: 42vw;
                .item .item-wrapper .item-title {
                    font-size: 1.6em;
                }
		    }
            .slick-dots {
                bottom: 0;
                li button:before {
                    font-size: 1.3rem;
                }
            }
        }
		#welcome {
/*			height: 226px;*/
			.welcome-content {
				padding: 12px 0;
			}
            .welcome-container {
                padding-top: 1rem;
                padding-bottom: 1rem;
                flex-direction: column;
                .images {
                    flex-direction: row;
                }
                .no-images {
                    padding: 0;
                }
            }
            .images, .content {
                width: 100%;
            }
		}
		.content-left {
			.top-section #intro {
				.intro-title {
					font-size: 1.6em;
				}
				.intro-subtitle {
					font-size: 1.2em;
				}
				.intro-notice {
					font-size: 1.2em;
				}
			}
			#programs .col-md-6 {
				.bg-img {
					height: 70px;
					.title {
						font-size: 1.3em;
					}
				}
				.content {
					padding: 0;
				}
			}

		}
		#video_slider {
			.main_slide .item {
				height: 19rem;
			}
			.sub_slide {
                width: 130px;
				.slick-list {
					height: 14.3rem !important;
				}
				.item {
					height: 60px;
                    margin-bottom: 0;
                    i {
                        top: 26%;
                        left: 37%;
                        font-size: 2rem;
                    }
                    .title {
                        display: none;
                    }
				}
			}
		}
		.sidebar-right {
			.calendar-header {
				font-size: 1.2em;
			}
			.btn {
				padding: 2px 6px;
				a {
					font-size: 0.9em;
				}
			}
			#main-links {
				height: 35.65rem;
				justify-content: space-between;
			}
		}
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	main {
		.sidebar-right {
			#calendar-sidebar {
				.fc-body .fc-row {
					min-height: 1.7rem;
				}
				.fc-day-top {
					padding-top: 0;
				}
				.fc-day-number {
					font-size: 0.9em
				}
			}
			#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: 0.9em;
						.title {
							font-weight: 400;
							padding-bottom: 4px;
						}
					}
				}
			}
		}
	}
}
@media only screen and (max-width: 425px) {
	main {
		#main_slider .slide {
			.slick-list .slick-track {
                height: 13rem;
                .item .item-wrapper {
				    .item-title {
					    font-size: 1em;
					    width: 100%;
				    }
				    .item-subtitle {
					    font-size: 0.9em;
					    width: 100%;
					    p {
						    margin-bottom: 4px;
						    line-height: 1.3;
					    }
				    }
				    .btn {
					    font-weight: 400;
					    padding: 0 12px;
				    }
				    .item-title, .item-subtitle, .btn {
					    margin-right: 0;
				    }
			    }
            }
			.slick-dots {
				bottom: 0;
				line-height: 0.6;
				li {
					height: 16px;
                    width: 1rem;
					button {
						height: 16px;
						&:before {
							font-size: 0.8rem;
						}
					}
				}
			}
		}
		#welcome {
			display: flex;
			align-items: center;
			height: auto;
            .container {
                height: auto;
                padding: 15px;
            }
			.row {
				margin-left: 0;
				margin-right: 0;
			}
			.welcome-title {
				font-size: 1.2em;
			}
			.welcome-content {
				font-size: 1em;
				padding: 0;
			}
            .btn {
                font-size: 1rem;
                bottom: 0;
                right: 5px;
            }
		}
		.content-left {
			.top-section #intro {
				.intro- {
					&title {
						font-size: 1.4em;
						margin-bottom: 8px;
					}
					&subtitle {
						font-size: 1.2em;
					}
					&notice {
						font-size: 1em;
					}
					&content {
						font-size: 0.8em;
						margin-bottom: 1rem;
					}
				}

			}
			#programs {
				.bg-img {
					height: 84px;
					.title {
						font-size: 1.4em;
					}
				}
				.content {
					padding: 8px 0;
				}
			}
			#video_slider {
				.main_slide .item {
					height: 300px;
				}
				.sub_slide {
					width: 110px;
					.slick-list {
						height: 12rem !important;
					}
					.item {
						height: 50px;
                        i {
                            font-size: 1.6rem;
                            top: 24%;
                        }
						.title {
							font-size: 0.8em;
						}
					}
				}
			}
		}
		.sidebar-right {
			.calendar-header {
				font-size: 1.4em;
			}
			.btn a {
				font-size: 1em;
			}
			#main-links {
				height: inherit;
			}
		}
	}
}
@media only screen and (max-width:1399px) {
  main #main_slider .slide .slick-list .slick-track .item .item-wrapper {
    line-height: 1.2;
    .item-title, 
    .item-subtitle {
      width: 90%;
    }
  }
}
@media only screen and (max-width:991px) {
  main #main_slider .slide .slick-list .slick-track .item .item-wrapper {
    .item-title, 
    .item-subtitle {
      width: 100%;
    }
  }
  main #main_slider .slide .slick-list .slick-track {
    height: calc(100vh - 457px);
  }
  main #welcome .container {
    height: 224px;
  }
}
@media only screen and (max-width:575px) {
  #top_header .top-left{
    font-size: 14px;
  }
  main #main_slider .slide .slick-list .slick-track {
    height: 400px;
  }
}