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

@media only screen and (min-width: 481px) and (max-width: 1160px) {
	.soc li a {width: 40px; line-height: 50px;}
	.container, .container-sm {
		max-width:initial;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1160px) {
.quicklink h3 {font-size:16px;line-height: 18px;}
.quicklink .follow-us {width:20%}
.soc li a {-webkit-border-radius: 30px;-moz-border-radius: 30px; border-radius: 30px;margin-right: 5px;}
#quicklinks .soc {}
	
.news-box .img-wrapper {width: 120px; height: 80px;}
.news-box .text { width: calc(100% - 140px);}

}

@media only screen and (min-width: 769px)  {
.navtop, .navbottom {margin: 50px 0 5px 0;}

.navbar {
    border-radius: 4px;
}

.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

.navbar-nav {
    float: left;
    margin: 0;
	flex-direction: inherit;
}

.navbar-right {
    float: right !important;
    margin-right: -15px;
}

.navbar-right .submenu .dropdown-menu {
    left: 100%;
    top: 75px;
    display: none;
}

.navbar-right .dropdown-menu {
    right: 0;
    left: auto;
}

.navbar-header {
    float: left;
}
.navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.carousel-indicators {
    bottom: 0px;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}

.modal-dialog {
    max-width: 600px;
    width: 600px;
    margin: 30px auto;
}

#modal-size .modal-dialog {
    max-width: 1140px;
    width: 100%;
    margin: 30px auto;
}

}

@media only screen and (min-width: 0px) and (max-width: 1199px) {
.img-wrapper.pp {width: 200px; height: 200px; margin-right: 10px;}
.img-wrapper.pp-group {width: 200px; height: 200px;}
	
.timeline ul li div { width: 250px;}
.timeline ul li:nth-child(even) div { left: -274px; /*250+30-6*/}
	
.album-box {width: 220px; margin: 12px 5px;}
.album-img {width: 100%; height: 130px;}
}

@media only screen and (min-width: 0px) and (max-width: 991px) {
	

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
	margin-right: 0px;
	margin-left: 0px;
}
	
.navbar-brand img {
    height: 85px;
}
.news-box .text p {width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.img-wrapper.pp-group {width: 170px; height: 170px;}

.sort-box.float-right {float:none;}
	

.shavee-box-wrapper.top5  .shavee-box {width: 130px;}
.shavee-box-wrapper.top5 .shavee-box .img-wrapper {width: 130px; height: 130px;}

	.new-format .point {width: calc(50% - 8px);}
	.new-format .point.blank {display: none;}

}

@media only screen and (min-width: 0px) and (max-width: 768px) {

.navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-nav {
    margin: 7.5px -15px;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}


.dropdown-menu {
    position: static!important;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.open > .dropdown-menu {
    display: block;
}

.navbar-right {
	padding:0 15px;
}
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.nav > li {
    position: relative;
    display: block;
}

.navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
	font-weight:700;
}

.navbar-right .submenu .dropdown-menu li {
    padding-left: 25px;
}

.nav > li > a {
    padding: 10px 10px;
    color: #000000;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #eee;
    border-color: #337ab7;
}

.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
}


.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}


.navtop, .navbottom {margin: 10px 0 5px 0;}

.carousel, .carousel-inner .item, .carousel-inner .active {height: 400px;}
#slider-overlay {padding: 20px; width: 50%; height: auto; left: 2%; background:url('../images/slider-overlay-bg.gif') #d1213f no-repeat right bottom;}
#slider-overlay h1 { font-size: 33px; line-height: 40px; margin: 10px 0;}
#slider-overlay p {line-height: 18px;}
#slider-overlay .btn-blue {min-width: auto; width: 42%; height: 40px; padding: 7px 12px;}
#slider-overlay .btn-orange {min-width: auto; width: 42%; height: 40px; padding: 7px 12px;}
#slider-overlay .btn, #slider-overlay a.btn {font-size: 16px; margin: 10px 2%;}
	
#slider-overlay h1.kmspks-banner {font-size: 30px; line-height: 33px;}
#slider-overlay h2.kmspks-banner {font-size: 16px; line-height: 18px;}

#slider-overlay h1.event-banner {font-size: 30px; line-height: 33px;}
#slider-overlay .event-logo-wrapper {margin-top: 30px;}
	
/*#quicklinks {height: auto; margin: 0;}
.dline {display: none;}
.quicklink {display: inline-block; width: 45%; margin: 10px 2%; border-bottom: 1px solid #dddddd;}
#quicklinks .followus {width: 95%;}
.quicklink img {display: inline-block; margin: 10px; width: 50px;}
.quicklink h3 {display: inline-block; font-size:16px;line-height: 18px; width: calc(100% - 100px); text-align: left; margin: 10px; vertical-align: middle;}
#quicklinks .followus h3 {text-align: center; width: 100%; margin: 10px 0;}*/
	
.dline {width: 35px;height: 120px; background-size: 35px 120px;}
.quicklink { width: calc(20% - 40px); height: 100%; display: inline-block; vertical-align: middle;}
.quicklink img {display: block; margin: 7px auto; max-width: 40px; width: 70%;}
.quicklink h3 {font-size:14px;line-height: 16px; margin: 10px 0;}
.soc li a {-webkit-border-radius: 30px;-moz-border-radius: 30px; border-radius: 30px;margin-right: 5px;}
#quicklinks .soc { text-align: center;}
	
.news-box .img-wrapper {width: 120px; height: 80px;}
.news-box .text { width: calc(100% - 140px);}
	
#content {padding: 30px 0; min-height: 600px;}
	
#sidebar {padding: 12px 8px; margin-top: 20px;}
#sidebar h2 {font-size:24px;line-height: 30px;}
#sidebar ul li {padding: 8px 5px;}
	
.shavee-box {width: 140px; margin:10px 10px 20px 0;}
.shavee-box h4 {font-size:15px; line-height:17px; min-height: 50px;}
.shavee-box .img-wrapper {width: 140px; height: 140px;}

	
}




@media only screen and (min-width: 0px) and (max-width: 767px) {
.login-form {border-right: none; border-bottom: 1px solid #dddddd; padding-bottom: 20px;}
.no-account-wrapper {margin-top: 0;}
.no-account {border-bottom: 1px solid #dddddd; padding: 20px 0;}
	
.navbar-brand img {height: 55px;width:auto;}
.navbar {z-index: 99;}
.navbar-header, #walkin-form .navbar-header {height: 80px;}
.navbar-collapse {background: #ffffff; border-top: 1px solid #dddddd; margin-top: 10px;}
.navbar-toggle {margin-top: 30px;}
	
.img-wrapper.pp-group {margin: 0 auto;}
	
.message-wrapper:before {top: 40px; left: -10px; font-size:150px;}
.message-wrapper:after { bottom: 0px; right: -10px; font-size:150px;}

.shavee-box {width: 130px;}
.shavee-box .img-wrapper {width: 130px; height: 130px;}
	
.album-box {margin: 10px 5px; width: calc(33% - 12px);}
.album-img {width: 100%; height: auto;}
	
#walkin-form .op-wrapper {margin:0 0 15px 0;}
	
.isstripe .field-full, .isstripe .field-no {width: 100%; margin-right: 0; display:block;}
	
#slider-overlay .event-logo-wrapper {margin-top: 20px;}
#slider-overlay .event-logo-wrapper img {width: 50px;}
	
	.partner-salons .partner {width: calc(100% / 2 - 20px);}
}


@media only screen and (min-width: 0px) and (max-width: 480px) {
	
h1 {font-size:27px;line-height: 32px; margin-bottom: 5px;}
h2 {font-size:24px;line-height: 30px;}
h3 {font-size:16px;line-height: 18px;}
h4 {font-size:16px;line-height: 18px;}


.carousel, .carousel-inner .item, .carousel-inner .active {height: 180px;}
.carousel {}
#slider-overlay {width: 95%; left: 50%; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 170px; padding: 0px 15px; background-size: 190px 250px;}
#slider-overlay h1 { font-size: 30px; line-height: 36px; margin: 10px 0;}
#slider-overlay p {line-height: 16px; font-size: 13px;}
	
#slider-overlay h1.kmspks-banner {font-size: 27px; line-height: 30px;}
#slider-overlay h2.kmspks-banner {font-size: 16px; line-height: 18px;}
	
.fill.slide1 {background-image:url('../images/ambassador-howejun.jpg');}
.fill.slide2 {background-image:url('../images/ambassador-clement.jpg');}
.fill.slide3 {background-image:url('../images/hfh-homepage-banner-2023b.jpg');}
.fill.slide4 {background-image:url('../images/slider4-mobile.jpg');}
.fill.slide5 {background-image:url('../images/slider5-mobile.jpg');}

	
.carousel-indicators {display: none;}
#quicklinks {margin: 0 0 15px 0;}
.dline {display: none;}
.quicklink {display: inline-block; width: 95%; margin: 10px 2% 0 2%; border-bottom: 1px solid #dddddd;}
.quicklink img {display: inline-block; margin: 10px; width: 50px;height:auto;}
.quicklink h3 {display: inline-block; font-size:16px;line-height: 18px; width: calc(100% - 100px); text-align: left; margin: 10px; vertical-align: middle;}
#quicklinks .quicklink.follow-us {border-bottom:none;}
#quicklinks .follow-us .soc {float:right;}	
#quicklinks .follow-us h3 {width:auto;}

#news-top .col-xs-12 {margin-bottom: 10px;}

.credit-footer {text-align: center;}
.credit-footer img {height: auto; max-width: 100%;}
.credit-footer .soc {float: none;}
	
.message-wrapper:before {top: 40px; left: -10px; font-size:120px;}
.message-wrapper:after { bottom: 0px; right: -10px; font-size:120px;}
	
#page-title .container-fluid .col-md-12 {height: 120px;}
	
.breadcrumb {margin: 5px 0;}
.breadcrumb a, .breadcrumb a:visited, .breadcrumb a:active, .breadcrumb a:focus, .breadcrumb li {font-size: 12px; line-height: 14px;}
.breadcrumb > .active {font-size: 12px; line-height: 14px;}
.breadcrumb > li + li:before { padding: 0 3px;}
	
#content {padding: 30px 0; min-height: 300px;}
	
.option-box-three {width: 100%; margin-right: 1%; padding: 10px 5px; vertical-align: middle;}
.option-box-two {width: 100%; margin-right: 1%; padding: 10px 5px; height: 140px; vertical-align: middle;}
.option-box-three img, .option-box-two img {margin: 0 auto 5px auto; width: 60%;}
.login-pop-up .option-box-two {height: 215px;}

.reason {font-size: 14px; line-height: 18px;}
	
.img-wrapper.pp {width: calc(49% - 10px); min-height: 170px; height: auto;}
.img-wrapper.pp.before:after, .img-wrapper.pp.after:after {top: 0; bottom: auto;}
.img-wrapper.pp img {top: 0;left: 0; margin-right: -0;-ms-transform:none; -webkit-transform:none; transform:none;}
	
.shavee-box, .shavee-box-wrapper.top5  .shavee-box {width: calc(49% - 10px); margin: 10px 10px 10px 0;}
.shavee-box .img-wrapper, .shavee-box-wrapper.top5  .shavee-box .img-wrapper {width: 100%; height: auto; min-height: 175px;}
	
.merchandise-box, .album-box {margin: 10px 5px; width: calc(50% - 12px);}
.merch-img, .album-img {width: 100%; height: auto;}
	
.sponsor-logo .radio-logo {display: inline-block; width: 100%; margin: 0;}

#slider-overlay .event-logo-wrapper {margin-top: 50px;}
#slider-overlay .event-logo-wrapper img {width: 50px;}
	
	.quicklink.announcement { width: 100%; }
	
	.partner-salons .partner {width: 100%;}
	
	
	
	
	#donate-social-buttons {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		gap: 8px 0px;
	}
	
	#donate-social-buttons .donate.minwidth.fullwidth {
		width:100%!important;
	}

	#donate-social-buttons .btn-fb, 
	#donate-social-buttons .btn-wa, 
	#donate-social-buttons .btn-li{
		width:32%;
	}

	#donate-social-buttons .btn.donate.minwidth {
		min-width:49%;
		width:49%;
	}

	form#join-form .btn.minwidth {
		width:100%!important;
	}


	#join-form {
		min-width:49%;
		width:49%;
	}
}



/* MOBILE MAX 360px */

@media only screen and (min-width: 0px) and (max-width: 360px) {

	.carousel {}
	
	.option-box-three, .option-box-two {height: auto;}
	.option-box-three h3, .option-box-two h3 {font-size: 14px;}
	.login-pop-up .option-box-two {height: 175px;}
		
	.target-box .target-amount, .target-box .amount-raised {margin-right: 15px;}
		
	.img-wrapper.pp {min-height: 140px;}	
	.shavee-box .img-wrapper, .shavee-box-wrapper.top5  .shavee-box .img-wrapper {width: 100%; height: auto; min-height: 150px;}


	.btn.minwidth {
		min-width:100%;
	}
	
	
}



@media screen and (max-width: 600px) {
.timeline {margin: 20px 0;}
.timeline ul li { margin-left: 10px; padding-top: 5px; }
	.timeline ul li:first-child {padding-top: 0;}
.timeline ul {padding: 0;}

.timeline ul li div { width: calc(100vw - 91px); }

.timeline ul li:nth-child(even) div { left: 30px; }

.timeline ul li:nth-child(even) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
}	
.timeline ul li:nth-child(4n+2) div::before {border-color: transparent #ff7200 transparent transparent;}
.timeline ul li:nth-child(4n+4) div::before {border-color: transparent #51bac0 transparent transparent;}
	
.timeline ul li div time { font-size: 21px;line-height: 24px;}
.timeline h2 {font-size:30px; line-height:32px; position:static;; Left:auto; width:auto;}

.horizontal-scoll {
	clear:both;
	overflow-x:auto;
}
}


@media (min-width: 1200px) {
.container {
    max-width: 1170px;
    width: 1170px;
}
}