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

/* HERO IMAGE ---------------------------------------------------------------------------------------------------- */
#hero {
	background:#E9ECF1 url("/images/web/background-home-hk.jpg") no-repeat 80% 70%;
	background-size:cover;
	border-bottom:1px solid #E7E7E7;
}
#hero .headline-set { height: auto;}
#hero .container .row > div { display: flex; justify-content: center; align-items: flex-start; height: 60%;}
/* MEDIA QUERY | EXTRA SMALL < 576px ---------------------------------------------------------------------------------------------------- */
@media (max-width:575.98px) {
    #hero { background-position:75% 30%; background-size:cover;  min-height: 280px;}
    #hero .headline-set h1 { font-size: 1.5rem;margin-top: 10px;}
    #hero .container .row > div { display: flex; justify-content: center; align-items: flex-end; height: 100%;}
    #hero .headline-set { margin:10px 0px 20px 0px; padding:15px; background-color:rgb(255,255,255,0.85); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25); }
    #hero .headline-set p, li {font-size: .875rem;line-height: 1rem;margin: 5px 0;}
}
/* MEDIA QUERY | SMALL > 576px ---------------------------------------------------------------------------------------------------- */
@media (min-width:576px) and (max-width:767.98px) { 
    #hero { background-position:70% 20%; background-size:cover; min-height:300px;}
    #hero .headline-set { margin:20px 0px 0px 0px; }
    #hero a.btn { width:75%; }
    #hero a.btn + .btn { margin:10px 0px 0px 0px; }
}

/* MEDIA QUERY | MEDIUM > 768px ---------------------------------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:991.98px) {
    #hero { background-position:75% 20%; background-size:cover; min-height: 300px;}
    #hero .headline-set { margin:20px 0px 0px 0px; }
    #hero .headline-set h1 { font-size: 2rem; color: #222;}
}
/* MEDIA QUERY | LARGE > 992px ---------------------------------------------------------------------------------------------------- */
@media (min-width:992px) and (max-width:1199.98px) {
    #hero { background-position:73% 20%; background-size:cover; min-height: 300px;}
    #hero .headline-set { margin:20px 0px 0px 0px; }
    #hero .headline-set h1 { font-size: 2rem; color: #222;}
}
/* MEDIA QUERY | EXTRA LARGE > 1200px ---------------------------------------------------------------------------------------------------- */
@media (min-width:1200px) {
    /* HERO ---------- */
    #hero { background-position:70% 30%; background-size:cover;min-height: 300px;}
    #hero .headline-set { margin:20px 0px 0px 0px; }
}