@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------
1. Mobile
2. iPad
3. large desktop
4. Other
*/

/* 1. Mobile responsive css 767px
-----------------------------------*/
@media (max-width:767px) {

    /*--------- Header --------*/
    header nav{display: none;}
    .home header {position: relative;}
    .mobile-nav{display: block;}
    #hamburger {display: block;}  
    .mobile-nav {position: fixed;right: 0;top: 0;z-index: 1;width: 270px;overflow-y: auto;height: 100vh;display: none;}
    .menu-open .mobile-nav{display: block;}
    #hamburger{width: 30px;height: 30px;position: relative;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;float: right;top: 30px;}
    #nav-icon1 span, #nav-icon3 span, #nav-icon4 span {display: block;position: absolute;height: 9px;width: 100%;background: #d3531a;border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
    #hamburger span {display: block;position: absolute;height: 3px;width: 50%;background: #1f4387;opacity: 1;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
    #hamburger span:nth-child(even) {left: 50%;border-radius: 0 9px 9px 0;}
    #hamburger span:nth-child(odd) {left:0px;border-radius: 9px 0 0 9px;}
    #hamburger span:nth-child(1), #hamburger span:nth-child(2) {top: 0px;}
    #hamburger span:nth-child(3), #hamburger span:nth-child(4) {top: 10px;}
    #hamburger span:nth-child(5), #hamburger span:nth-child(6) {top: 20px;}
    #hamburger.open span:nth-child(1),#hamburger.open span:nth-child(6) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
    #hamburger.open span:nth-child(2),#hamburger.open span:nth-child(5) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
    #hamburger.open span:nth-child(1) {left: 5px;top: 7px;}
    #hamburger.open span:nth-child(2) {left: calc(50% - 5px);top: 7px;}
    #hamburger.open span:nth-child(3) {left: -50%;opacity: 0;}
    #hamburger.open span:nth-child(4) {left: 100%;opacity: 0;}
    #hamburger.open span:nth-child(5) {left: 5px;top: 12px;}
    #hamburger.open span:nth-child(6) {left: calc(50% - 5px);top: 12px;}
    .mobile-nav-title {font-size: 32px;padding: 15px;background: #20b1e7;color: #fff;}
    .mobile-nav ul {margin: 0;}
    .mobile-nav li {display: inline-block;width: 100%;position: relative;vertical-align: top;}
    .mobile-nav li a {font-size: 20px;border-bottom: 1px solid #dfdfdf;width: 100%;display: inline-block;padding: 10px 0 10px 15px;font-weight: 500;text-transform: uppercase;}
    .mobile-nav li.active > a {color: #eb6a24;}
    .mobile-nav ul ul {display: none;background: #e3e3e3;}
    .mobile-nav ul ul li a {border-color: #d2d1d1;font-size: 18px;padding-left: 20px;text-transform: none;}
    .search-submit {left: inherit;right: 8px;background-size: 20px;top: 0;}
    .search-bar {padding: 5px 0;}
    .search-bar input[type="text"] {text-align: left;padding-left: 15px;font-size: 18px;padding-right: 40px;}
    .search-bar.search-active input[type="text"] {padding-left: 15px;}
    .arrow {position: absolute;top: 8px;right: 9px;float: right;padding: 17px 3px 17px 4px;width: 30px;height: 30px;display: inline-block;-webkit-transition: 0.4s ease;transition: 0.4s ease;text-align: left;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
    .arrow:before, .arrow:after {position: absolute;display: inline-block;width: 12px;height: 3px;content: "";background-color: #1f4387;-webkit-transition: 0.4s ease;transition: 0.4s ease;}
    .arrow:after {position: absolute;top: 12px;left: 9px;-webkit-transform: rotate(90deg);transform: rotate(90deg);}
    .active.arrow {-webkit-transform: rotate(45deg) translate(-5px, -5px);transform: rotate(45deg) translate(-5px, -5px);}
    .active.arrow:before {-webkit-transform: translate(10px, 0);transform: translate(10px, 0);}
    .active.arrow:after { -webkit-transform: rotate(90deg) translate(10px, 0);transform: rotate(90deg) translate(10px, 0);}
    .search-bar {display: inline-block;width: 100%;}
    .search-bar.search-active input[type="text"],
    .search-bar input[type="text"]{width: 100%;height: 38px;line-height: 38px;}
    .search-bar input[type="text"], .search-bar input[type="search"]{/*padding: 5px 10px;*/}
    body.menu-open #main-container{margin-left: -270px !important;transition: 0.3s;-webkit-transition: 0.3s;box-shadow: -2px -21px 17px -1px #222;}
    #main-container{transition: 0.3s;-webkit-transition: 0.3s;display: block;width: 100%;position: relative;z-index: 99;height: auto}
    header .header-top{padding-top: 0px;padding-bottom: 0;}
    .filter-bar input[type="text"], .filter-bar input[type="search"]{width: 175px;}
    .container-lg{padding-left: 20px;padding-right: 20px;}
    header{position: fixed !important;top: 0;left: 0;right: 0;width: 100%; transition: 0.3s;-webkit-transition: 0.3s;} 
    .menu-open header {left: -270px;}
    .home-banner {margin-bottom: 20px;}


    /*------- footer -----*/
    footer{padding: 20px 0;-webkit-transition: 0.3s;transition: 0.3s;position: relative;left: 0;}
    .menu-open #main-container + footer {left: -270px;}
    .home #main-container{height: auto}
    .error-page-cover p{font-size: 18px;}
    .error-page-cover ul li{font-size: 16px;}
    .error-page-cover {padding-bottom: 40px;}
    .error-page-cover h1{line-height: 36px;}
    .footer-left ul li a img{width: 12px;}
    .footer-left{float:none;}

    /*----- home page  part ----*/
    .viewport-panel{height: auto;min-height: auto;}
    .viewport-panel .scenes-detail{padding-top: 50px;}
    .scenes-outer{text-align: center;}
    .v-center {margin-top: 30px;display: block;}
    .clouds-bottom {padding-bottom: 50px;}
    .scroll-more{z-index: 99;}
    .title-img{width: 60px;}
    .title-content{width: calc(100% - 75px);}

    /*--------- Resource --------*/
    .page-content {padding-top: 0;}
    body:not(.home) .page-content{/*padding-top: 40px;*/} 
    .top-title {padding-top: 0;}
    .full-links a{width: auto;margin-bottom: 4px;}
    .full-links{flex-wrap: wrap;}
    .home-banner .glyphicon {font-size: 26px;}

    /*  */
    .colm-left {width: 100%;padding-right: 0;}
    .colm-right {width: 100%;}
    .newsletter-top {padding: 0 0 10px;text-align: left;}
    .social-icons-cover{padding: 0;text-align: left;}
    .social-icons-cover .footer-left {text-align: left;padding-top: 0;}
    .inner-banner .item img{height: 280px;}
    .inner-banner.slider-complete .right-arrow,
    .inner-banner.slider-complete .left-arrow{top: 130px;}
    .pagination{margin: 0;}
    .top-event-btn a{font-size: 18px;}
    .event-content-cover {margin-bottom: 20px;padding-bottom: 20px;}

    .top-event-btn {padding: 0 0 30px;}
    .search-bar form{height: auto;}

    .error-page-cover{padding-top: 30px;}
    .header-top .header-logo img {max-height: 30px;width: auto;}
    .header-top .event-title {font-size: 14px;}
    .header-logo {padding-left: 0;padding-right: 20px;margin-bottom: 0;}
    header .header-top{box-shadow: 0px 7px 16px rgb(217,217,216)}
    
    header .brand{margin: 14px 0 10px;}
    .header-logo .brand {margin-top: 5px;}
    .header-logo {margin-top: 6px;}
 
}
@media (min-width:641px) and (max-width:767px) {

    /*------ Typography ------*/
    h1, .mega-title h3{font-size: 40px;line-height: 1.4;}
    h2{font-size: 24px;line-height: 1.4;}

    /*----- Header -----*/
    .countdown {padding-bottom: 20px;}
    .countdown .cd-inner {width: 50%;}
    .countdown .cd-inner:nth-child(2n) {border: 0;}
    .countdown .remains-days{font-size: 17px;}
    .countdown .days-title{font-size: 16px;}
    .countdown .days-title{font-size: 18px;}
    .countdown .event-title{display: inline-block;vertical-align: middle;padding-right: 15px;font-size: 16px;}
    .countdown .event-date{display: inline-block;vertical-align: middle;width: auto;}

    /*------ Footer -------*/
    .footer-right li {padding: 0 10px;border-width: 2px}
    .footer-right li a {font-size: 17px;}
    .footer-left ul li a {width: 34px;height: 34px;}

    /*------- Homepage -------*/
    .welcometext .page-header h1{font-size: 40px;line-height: 48px;}
    .title-img img {width: 44px;height: auto;}
    .title-img .count {font-size: 60px;}
    .title-img {height: 45px;}
    .title-content {width: calc( 100% - 140px );}
    .content-accordion .panel-title a {font-size: 20px;}
    .brand img {max-width: 150px;}
    .welcometext .page-header {padding-top: 15px;margin-top: 0;}
    .home-banner .left-arrow{left: 10px;}
    .home-banner .right-arrow{right: 10px;}
    /*.home-banner .left-arrow{left: 10px;top: inherit;-webkit-transform: inherit;transform: inherit;bottom: -20px;}
    .home-banner .right-arrow{right: 10px;top: inherit;-webkit-transform: inherit;transform: inherit;bottom: -20px;}*/
    .home-banner .carousel-indicators {bottom: -13px;}
    .boxes-cover{padding-top: 20px;}

    /*--------- Resource Detail page --------*/
    .resource-content ul li {font-size: 13px;}
    .resource-detail img{float: none}
    .colm-right > a {width: 50%;float: left;padding-right: 10px;}
    .colm-right > a:nth-child(2n) {padding-left: 0;padding-right: 15px;}
    .colm-right{margin-top: 30px;}
    .box-cover{margin-bottom: 20px;}
    .people-detail .box-cover{margin: auto;margin-bottom: 30px;display: block;max-width: 300px}
    #content-area {margin-top: 118px;}
    .all-event-cover {margin-bottom: 30px;}
    .caption-content h3, .caption-content h2{font-size: 28px;}
    .home-banner .carousel-inner .item > img{max-height: 360px;}
    .home-banner .left-arrow{left: -15px;top: 160px;}
    .home-banner .right-arrow{right: -15px;top: 160px;}
    .home-banner .carousel, .inner-banner.slider-complete .carousel {padding: 0 10px;}
    .inner-banner .carousel {padding: 0;}

    .box-inner-slider {margin-bottom: 40px;}
    .box-inner-slider .slick-dots{bottom: -25px;}
    .inner-title h2 {margin-bottom: 10px;}

}
@media(max-width: 640px){

    /*------ Typography ------*/
    h1, .mega-title h3{font-size: 26px;line-height: 1.4;}
    h2{font-size: 20px;line-height: 1.4;}
    h3 {font-size: 20px;line-height: 1.4;}

    /*----- Header -----*/
    .countdown { margin-top: 15px;border-top: 2px dotted #1f4387;border-bottom: 2px dotted #1f4387;margin-bottom: 15px;padding-bottom: 6px;padding-top: 6px;float: none}
    .countdown .remains-days:after{top:4px;}
    .countdown .remains-days:before{bottom: 5px}
    .countdown .days-title {font-size: 16px;}
    .countdown .cd-inner {width: 100%;border-bottom: 1px dotted #ECECEC;padding: 0 0 5px 0;margin-bottom: 5px;border-right: 0;float: none}
    .countdown .cd-inner:last-child {margin-bottom: 0;border-bottom: 0;padding-bottom: 0;}
    .countdown .remains-days {font-size: 20px;}
    .countdown .remains-days:before,
    .countdown .remains-days:after{height: 17px;}
    .countdown .event-title {display: inline-block;}
    .countdown .event-date {width: auto;margin-left: 10px;}

    /*------ Footer -------*/
    .footer-left {display: block;margin: 0 auto;padding-top: 20px;text-align: center;float: none;}
    .footer-right li {padding: 5px 0;width: 100%;border-bottom: 1px dotted #1BB2E8;text-align: center;background-image: none}
    .footer-right li a {font-size: 20px;}
    .footer-right {width: 100%;padding-top: 25px;}


    /*------- Homepage -------*/
    .welcometext .page-header h1{font-size: 26px;line-height: 36px;}
    .brand img {max-width: 140px;}
    .welcometext .page-header {padding-top: 10px;margin: 0;}
    .search-bar.search-active input[type="text"] {width: 100%;}
    .title-img .count {font-size: 50px;padding: 0 15px 0 10px;line-height: 0.8;}
    .title-img img {width: 38px;}
    .title-img {height: auto;}
    .viewport-panel .scenes-detail {padding-top: 30px;}
    .content-accordion .panel-title a {font-size: 18px;line-height: 1.2;}
    .content-accordion .left-arrow.left,
    .content-accordion .right-arrow.right{font-size: 18px;}
    .home-banner .left-arrow{left: -15px;}
    .home-banner .right-arrow{right: -15px;}
    /*.home-banner .left-arrow{left: 10px;top: inherit;-webkit-transform: inherit;transform: inherit;bottom: -20px;}
    .home-banner .right-arrow{right: 10px;top: inherit;-webkit-transform: inherit;transform: inherit;bottom: -20px;}*/
    .home-banner .carousel-indicators {bottom: -25px;}
    .home-banner .carousel,
    .inner-banner.slider-complete .carousel{padding: 0 10px;}
    .inner-banner .carousel {padding: 0;}
    .home-caption{padding: 15px;}
    .home-caption p {font-size: 18px;}

    /*--------- Resource Detial page --------*/
    .resource-title h2 {font-size: 22px;margin-bottom: 5px;}
    .resource-content ul li {width: 100%;margin-bottom: 10px;font-size: 13px;padding-right: 0;}
    .resource-title {margin-bottom: 15px;}
    .resource-content ul {margin: 5px 0;}
    .filter-bar input[type="text"]:focus  {width: 160px;}

    .colm-right{margin-top: 20px;text-align: center;}
    .right-sidebar-cover {padding: 30px 0;}
    .box-cover{margin-bottom: 20px;}
    .people-detail .box-cover{margin: auto;margin-bottom: 30px;display: block;max-width: 300px}
    #content-area {margin-top: 118px;}
    .caption-content p{font-size: 16px;}
    .home-banner .item,
    .inner-banner.slider-complete .item{padding-bottom: 0;}
    .inner-banner .item {padding-bottom: 0;}
    .boxes-cover{padding-top: 20px;}
    .event-content-cover{flex-wrap: wrap;}
    .top-event-date {margin-bottom: 20px;}
    .all-event-cover {margin-bottom: 30px;}
    .caption-content h3, .caption-content h2{font-size: 22px;margin-bottom: 0;}

    .home-banner .carousel-inner .item > img{max-height: 100%;height:180px;}
    .home-banner .left-arrow{top: 80px;}
    .home-banner .right-arrow{top: 80px;}
    .home-banner .carousel-inner{min-height: auto !important}

    .box-inner-slider {margin-bottom: 40px;}
    .box-inner-slider .slick-dots{bottom: -25px;}
    .inner-title h2 {margin-bottom: 10px;}
}
/* 2. iPad responsive css 768px to 1023px
-----------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {

    /* header */
    header .brand{width: 180px;}
    .countdown {float: none;padding-top: 20px;text-align: center;width: 100%;display: inline-block;vertical-align: top;border-top: 1px solid #eaeaea;margin-top: 10px;}
    .countdown .event-inner{display: inline-block;vertical-align: top;float: none;padding: 0px 14px;}
    .countdown .event-inner:last-child{border-right-width: 0;}
    .countdown .days-title,
    .countdown .remains-days{display: block;text-align: center;margin: 0;}
    header .search-bar {border: 1px solid #eeeeee;border-radius: 3px;padding-bottom: 6px;margin: 15px 0;}
    header .header-top {padding: 10px 0;}
    body:not(.home) .page-content{/*padding-top: 370px !important*/;}
    .home-banner .left-arrow{left: 10px;top: 180px;}
    .home-banner .right-arrow{right: 10px;top: 180px;}

    /* footer */
    .footer-right li{padding: 0 10px;}
    .footer-right li a{font-size: 18px;}

    /*--------- home page ------------*/
    .viewport-panel .scenes-detail{padding-top: 50px;}
    .scenes-outer{text-align: center;}
    .welcometext .page-header {/*padding-top: 300px;*/}
    .scenes{margin-top: 30px;margin-bottom: 20px;}

    /*----------- Resource page -------------*/
    .page-content {/*padding-top: 250px;*/}
    .top-title h1{font-size: 31px;}
    body:not(.home) .page-content{/*padding-top: 280px;*/}
    .top-filter select{font-size: 18px !important;}
    .countdown .event-title{font-size: 17px;}
    .countdown .remains-days{font-size: 24px;}
    .resource-detail .alignright{float: none;}
    .countdown .cd-inner{padding:0 10px;display: inline-block;float: none;vertical-align: top;}
    .countdown .cd-inner:last-child{border-width: 0;}

    .home-banner .carousel-inner .item > img{max-height: 400px;}
    .caption-content h3, .caption-content h2{font-size: 32px;}
    .home-banner .carousel, .inner-banner.slider-complete .carousel{padding: 0 20px;}
    .inner-banner .carousel {padding: 0;}
    .home-banner .left-arrow{left: -12px;}
    .home-banner .right-arrow{right: -12px;}
    .countdown .cd-inner{width: 100%;}
    .countdown{display: -webkit-box;display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex; flex-wrap: wrap;}
    .countdown > a {width: 25%;}
    .see-upcoming-events{text-align: center;width: 100%;}

    .box-inner-slider {margin-bottom: 60px;}
    .breadcrumb-cover{padding: 0 25px;}
}

/* 3. large desktop responsive css 1025px to 1200px
----------------------------------------------------*/
@media (min-width:1024px) and (max-width:1200px) {  
    /*----- Header -----*/
    .countdown .days-title {font-size: 18px;}

    /*------- Homepage -------*/
    .countdown .remains-days {font-size: 18px;}
    .home-banner .left-arrow{left: 10px;}
    .home-banner .right-arrow{right: 10px;}

    /*----------- Resource page -------------*/
    .top-title{padding-top: 0;}
    body:not(.home) .page-content{/*padding-top: 250px;*/}

    .caption-content h3, .caption-content h2{font-size: 40px;}
    .home-banner .carousel, .inner-banner.slider-complete .carousel{padding: 0 15px;}
    .inner-banner .carousel {padding: 0;}
    .home-banner .left-arrow{left: -15px;}
    .home-banner .right-arrow{right: -15px;}

    .box-inner-slider {margin-bottom: 80px;}
    .breadcrumb-cover{padding: 0 25px;}
}

/* 4. Other media-query
------------------------------------------------*/
@media (min-width:481px) and (max-width:640px) {    
    .filter-bar input[type="text"], 
    .filter-bar input[type="search"] {padding-left: 30px;font-size: 18px;width: 145px;}
    .top-filter li:last-child {padding-right: 0;margin-right: 0;}
    .top-filter select, .top-filter b, .select-cover .customSelect{font-size: 18px;}
    .top-filter b {margin-right: 10px;}
    .top-filter li {margin-right: 5px;padding-right: 5px;}

    /*-------- Resource detail page -------*/
    .right-sidebar img {float: none;}

}
@media (max-width:1200px){
    .home-banner.inner-banner + .top-link-cover{padding: 0;}
    .left-sidebar-cover{padding-top: 0;}
    .all-event-cover{padding-top: 10px;}
    .right-sidebar-cover{padding-top: 0;}
    .box-inner-slider{padding: 0 30px;}
    .box-inner-slider .slick-next{right: 5px; }
    .box-inner-slider .slick-prev{left: 5px;right: auto !important}
}
@media (max-width:480px){
    /*-------- Header --------*/
    .countdown .remains-days {font-size: 18px;}
    .countdown .event-title {font-size: 16px;}

    /*------- resource -------*/
    .boxes-cover [class*=' col-'] {width: 100%;}
    .filter-bar input[type="text"], .filter-bar input[type="search"] {width: 100%;background: #fff;}
    .filter-bar {width: 100%;}
    .top-filter li {margin-right: 6px;padding-right: 6px;}
    .top-filter select, .top-filter b, .select-cover .customSelect{font-size: 15px;}
    .top-filter b {margin-right: 8px;}
    .filter-bar input[type="text"], .filter-bar input[type="search"]{font-size: 18px;}
    .boxes-cover {padding-top: 20px;}
    .box-cover{margin-bottom: 20px;}
    .select-cover .customSelect {font-size: 16px;margin-right: 14px;}
    .box-cover {max-width: 265px;}
    .people-detail .box-cover{margin: auto;margin-bottom: 30px;display: block;max-width: 300px}

    /*-------- Resource detail page -------*/
    .right-sidebar img {width: 100%;}
    .top-filter .back-to-site {font-size: 18px;margin-bottom: 10px;}
    .resource-content ul li img {margin-right: 6px;}
    .filter-bar input[type="text"]:focus{width:100%;}
    .filter-bar input[type="text"], .filter-bar input[type="search"] {text-align: left;}

    /*  */
    .council-logo-cover [class*= 'col-'] {width: 100%;}
    .left-sidebar-cover [class*= 'col-']{width: 100%;}
    .right-side-content {margin-bottom: 20px;}
    .left-inner-bar {margin-bottom: 10px;padding-bottom: 10px;}
    .inner-banner .item img {height: 200px;}
    .inner-banner.slider-complete .right-arrow, .inner-banner.slider-complete .left-arrow {top: 90px !important;}
    .btn-lg{font-size:15px;}
}
@media (min-width:1201px) and (max-width:1300px) { 
    .home-banner .right-arrow{right: -30px;}   
    .home-banner .left-arrow{left: -30px;}
}
@media (max-width:992px) { 
	.resource-content blockquote{width:90%;float:none;text-align:center;border-left:none;color:#194189;font-family: 'Helvetica',sans-serif;font-style:normal;font-weight:400;position:relative;font-size:2em;line-height:33px;margin-left:0;margin:0 auto;padding:10px 20px 10px 0;right:0;}
	.resource-content blockquote::after{position:absolute;content:'”';font-size:98px;line-height:0px!important;display:inline;margin-left:8px;bottom:0px;right:0px;color:#eb6a24;}
}

@media (min-width:992px) and (max-width:1190px) { 
    .pull_quote blockquote {margin-left:0px;}
}
@media (min-width:992px) {
	.back-to-dashboard{display:none;}
}