@charset "utf-8";
/* ----------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------*/
@media (min-width: 1200px){
	
	.header .navbar-nav .nav-item .nav-link {
        padding: 0 10px;
        font-size: 16px;
    }
	
	.header .navbar-nav .nav-item .dropdown-menu {
        border-radius: 0;
        border: 0;
        border-top: 2px solid #7D1D4B;
        margin: -2px 0 0 0;
    }
	
	.co-organizer h5 {
        font-size:16px;
    }
}


@media (min-width: 992px){
	.header .logo {
		height: 80px;
	}

	.header.header-dark .navbar-nav .nav-item .nav-link {
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        font-size: 20px;
	}

    .header .navbar-nav .nav-item .nav-link {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        font-size: 20px;
	}
	
	.header .navbar-nav .nav-item .nav-link:focus,
    .header .navbar-nav .nav-item .nav-link:hover {
        color:#00FFF;
    }
	.header .navbar-nav .nav-item .dropdown-menu {
        margin: -2px 0 0 0;
        min-width: 200px;
        width: 200px;
	}
	
	.header.fixed .navbar-nav .nav-item .nav-link{
		height: 40px;
		line-height: 40px;
	}	
	
	.bannerintro2 {
		display: none;
	}
	
	.organizers .row .col_one_fifth {
		width: 20%;
		margin-right: 0;
	}

}

@media (max-width:991px){
	.header .navbar, .header.fixed .navbar {
		background: #071A25;
	}
	
	.header .navbar-brand {
        margin: 0 auto;
        transform: translate(-30px, 0);
	}
	
	.header .navbar-toggler {
    transform: scale(.6);
    position: relative;
	}
	
	
    .header .navbar-nav .nav-item:focus,
    .header .navbar-nav .nav-item:hover{
        background: rgba( 16, 42, 56, 0.5);
        box-shadow: inset 0px 0px 50px 0px #000;
        -webkit-box-shadow: inset 0px 0px 50px 0px #000;
        -moz-box-shadow: inset 0px 0px 50px 0px #000;
        -o-box-shadow: inset 0px 0px 50px 0px #000;
    }
	
	.bannerintro {
		display: none;
	}
	
	.bannerintro2 {
		color: #FFF;
		background: #071A25;
		padding: 10px 0;
	}

	/* Portfolio - Items
	-----------------------------------------------------------------*/

	.portfolio .portfolio-item { width: 33.33333333%; }

	.organizers .row .col_one_fifth {
		width: 50%;
		margin-right: 0;
	}

	.organizers .row .col_one_fifth.col_last {
		width: 100%;
		margin-right: 0;
	}
	
    .co-organizer .col_two_third{
        width: 100%;
    }
	
	/* Footer
	-----------------------------------------------------------------*/
	
	.footer .col_one_fourth,
	.footer .col_three_fourth,
	.footer .col_one_fifth {
		width: 100%;
	}
	
	.content.resources_bg {
		background-size: auto 80%;
		background-position: center center;
	}

}


@media (max-width:775.98px){
	.bannericon {
		display: none;
	}
	.link {
		padding: 10px 0;
	}
	.link .row .col_one_fifth,
	.link .row .col_three_fifth {
        margin: 0px 0;
        width: 100%;
        padding: 0 0;
	}
	.link-type {
        display: none;
    }
	
	.link .col_three_fifth .col_one_third {
		width: 100%;
		margin-right:0;
	}

	.events-list .events-items a {
		display: inline-table;
        flex-flow: row nowrap;
    }
	.events-list .events-items .events-date,
	.events-list .events-items .events-type {
		display: inline-block;
	}
	.activity .events-list .events-items .events-date {
		text-align: left;
	}
	.activity .events-list .events-items .events-date,
    .activity .events-list .events-items .events-tit {
        width: 100%;
    }
	
	.news .events-list .events-items .events-date,
	.news .events-list .events-items .events-type {	
        width: 50%;
    }
    .news .events-list .events-items .events-tit {
        width: 100%;
    }
	
	.countdown h1 { font-size: 3em;}
    .countdown h2 { font-size: 2.8em; }
    .countdown h3 { font-size: 2.5em; }
    .countdown h4 { font-size: 2em; }
    .countdown h5 { font-size: 1.8em; }
	
    .new-countdown .countdown-amount {
        font-size: 4rem;
		line-height: 5rem;
    }
    .new-countdown .countdown-period {
        font-size: 1rem;
    }
	
	/* Portfolio - Items
	-----------------------------------------------------------------*/

	.portfolio:not(.portfolio-1) { margin: 0 -6px -6px 0; }

	.portfolio:not(.portfolio-1) .portfolio-item { padding: 5px 5px; }

	/* Portfolio - Items - 5 & 6 Columns
	-----------------------------------------------------------------*/

	.portfolio:not(.portfolio-1) .portfolio-item { width: 50%; }

	/* Portfolio - Items - Descriptions
	-----------------------------------------------------------------*/

	.portfolio:not(.portfolio-1) .portfolio-desc { padding: 15px 5px 10px; }

	.portfolio:not(.portfolio-1) .portfolio-desc h3 { font-size: 16px; }

	.portfolio:not(.portfolio-1) .portfolio-desc span { font-size: 14px; }

	.portfolio-notitle:not(.portfolio-1) .portfolio-desc {
		height: 78px;
		padding: 15px 5px;
		bottom: -79px;
	}

	.portfolio-full.portfolio-notitle:not(.portfolio-1) .portfolio-desc,
	.portfolio-nomargin.portfolio-notitle:not(.portfolio-1) .portfolio-desc {
		bottom: -78px;
		border-bottom: 0;
	}

	/* Portfolio - Items - Overlay
	-----------------------------------------------------------------*/

	.portfolio-notitle:not(.portfolio-1) .portfolio-item:hover .portfolio-overlay a.left-icon,
	.portfolio-notitle:not(.portfolio-1) .portfolio-item:hover .portfolio-overlay a.right-icon,
	.portfolio-notitle .iportfolio:hover .portfolio-overlay a.left-icon,
	.portfolio-notitle .iportfolio:hover .portfolio-overlay a.right-icon { margin-top: -55px !important; }

	.portfolio:not(.portfolio-1) .portfolio-item:hover .portfolio-overlay .portfolio-desc ~ a { margin: 20px 0 0 !important; }

	.portfolio:not(.portfolio-1) .portfolio-item:hover .portfolio-overlay .portfolio-desc ~ a.right-icon {
		margin-left: 5px !important;
		margin-right: 0 !important;
	}

	.portfolio.portfolio-nomargin,
	.portfolio.portfolio-full { margin: 0 !important; }
	
	
	.co-organizer .col_one_third,
    .co-organizer .col_two_third{
		margin-right: 0px;
        width: 100%;
		font-size:16px;
	}
	
	/* Itempage - Aside
	-----------------------------------------------------------------*/

	aside {
		margin: 0 10px;
		top: -32px;
		width: 70px;
		padding: 3px 5px 8px;
	}
	aside:before,
	aside:after {
		content: "";
		position: absolute;
		left: 0;
		border-style: solid;
		border-width: 0 35px 10px;
	}
	
	aside:before {
		bottom: -10px;
	}
	
	aside:after {
		bottom: -13px;
		border-top-width: 3px;
	}
	
	aside span {
		display: block;
	}
	aside span.year {
		padding-top: 5px;
		line-height: 1rem;
		font-family: "PT Mono", monospace;
	}
	aside span.day {
		font-size: 30px;
		line-height: 30px;
		font-family: "PT Serif", monospace;
	}
	aside span.month {
		line-height: 1rem;
		font-family: "PT Mono", monospace;
	}
	aside span.title {
		padding-top: 15px;
		font-size: 20px;
		line-height: 25px;
		letter-spacing: 2px;
		font-family: 'Lato', 'Noto Sans TC', '微軟正黑體', 'Arial', sans-serif;
	}

}

@media (max-width:575px){
	.container, .container-sm {
		max-width: 480px;
	}
	
	.link {
		padding: 0px 0;
	}
	.link .container{
		max-width: none;
	}
	.link .row .col_one_fifth{
        margin: 0px 0;
        width: 100%;
        padding: 0 0;
	}
	
	.map{
		width: 100%;
		height: 300px;
	}

	.bannertitle h2 {
		padding: 10px 20px;	
		font-size: 2.5rem;
		text-align: center;
	}
	.bannertitle h2>span:not(.nocolor) {
		font-size: 2rem;
	}
}

@media (max-width: 479px) {	
	
	.countdown h1 { font-size: 2.8em;}
    .countdown h2 { font-size: 2.5em; }
    .countdown h3 { font-size: 2em; }
    .countdown h4 { font-size: 1.8em; }
    .countdown h5 { font-size: 1.5em; }
	
	.new-countdown .countdown-amount {
        font-size: 3rem;
		line-height: 3rem;
    }
    .new-countdown .countdown-period {
        font-size: 1rem;
    }

	
}

@media (min-width: 40em) {
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

}