/**
 *
 */

@charset "UTF-8";
@font-face {
    font-family: "HKUST Alumni Reunion";
    src: url(../fonts/hkust-alumni-reunion/fonts/icomoon.eot?1tvy1u);
    src: url(../fonts/hkust-alumni-reunion/fonts/icomoon.eot?1tvy1u#iefix) format("embedded-opentype"), url(../fonts/hkust-alumni-reunion/fonts/icomoon.ttf?1tvy1u) format("truetype"), url(../fonts/hkust-alumni-reunion/fonts/icomoon.woff?1tvy1u) format("woff"), url(../fonts/hkust-alumni-reunion/fonts/icomoon.svg?1tvy1u#ust) format("svg");
    font-weight: 400;
    font-style: normal
}

.ust-ar {
    font-family: "HKUST Alumni Reunion"!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ar-book:before {
    content: ""
}

.ar-marker:before {
    content: ""
}

.ar-cart:before {
    content: ""
}

.ar-facebook:before {
    content: ""
}

.ar-instagram:before {
    content: ""
}

.ar-linkedin:before {
    content: ""
}

.ar-twitter:before {
    content: ""
}

.ar-arrow-down:before {
    content: ""
}

.ar-arrow-up:before {
    content: ""
}

.ar-flag:before {
    content: ""
}

.ar-plus:before {
    content: ""
}

.ar-check:before {
    content: ""
}

.ar-user:before {
    content: ""
}

.ar-clock:before {
    content: ""
}

.ar-bin:before {
    content: ""
}

.ar-airport-bus:before {
    content: ""
}

.ar-arrow-left:before {
    content: ""
}

.ar-arrow-right:before {
    content: ""
}

.ar-bin2:before {
    content: ""
}

.ar-bus:before {
    content: ""
}

.ar-bus-icon:before {
    content: ""
}

.ar-car-icon:before {
    content: ""
}

.ar-car-park:before {
    content: ""
}

.ar-double:before {
    content: ""
}

.ar-link1:before {
    content: ""
}

.ar-link2:before {
    content: ""
}

.ar-local-car:before {
    content: ""
}

.ar-mail:before {
    content: ""
}

.ar-mtr:before {
    content: ""
}

.ar-phone:before {
    content: ""
}

.ar-qrcode:before {
    content: ""
}

.ar-school-bus:before {
    content: ""
}

.ar-search:before {
    content: ""
}

.ar-shuttle-bus:before {
    content: ""
}

.ar-single:before {
    content: ""
}

.ar-taxi:before {
    content: ""
}

.ar-weather:before {
    content: ""
}

.ar-book2:before {
    content: ""
}

.ar-edit:before {
    content: ""
}

html {
    box-sizing: border-box;
    font-size: 18px
}

*,
:after,
:before {
    box-sizing: inherit
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent
}

body {
    font-family: "Fira Sans", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
    color: #2a4554;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    color: #00539e
}

p {
    text-indent: 0;
    direction: ltr
}

b,
strong {
    font-weight: 500
}

.asterisk:before {
    content: "*"
}

.middledot:before {
    content: "\00B7"
}

.blue {
    color: #00539e
}

sup {
    font-size: 10px;
    vertical-align: middle;
    display: inline-block;
    line-height: 6px;
    padding: 0 0 12px
}

img {
    max-width: 100%;
    height: auto
}

img.lazy-loading {
    width: auto!important;
    display: block;
    margin: 10px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: none!important;
    -webkit-transform: translate(-50%, -50%)!important;
    -moz-transform: translate(-50%, -50%)!important;
    -ms-transform: translate(-50%, -50%)!important;
    -o-transform: translate(-50%, -50%)!important;
    transform: translate(-50%, -50%)!important
}

.ofi-cover {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

.ofi-contain {
    height: 100%;
    min-width: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;'
}

a {
    text-decoration: none;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

a:hover {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

a.underline:hover {
    text-decoration: underline
}

@media only screen and (max-width:1260px) {
    a.has-children:after,
    span.has-children:after {
        position: absolute;
        right: 13px;
        font-family: fontAwesome;
        content: "\f107";
        font-size: 18px
    }
    a.has-children.active:after,
    a.has-children.is-expanded:after,
    a.has-children:hover:after,
    span.has-children.active:after,
    span.has-children.is-expanded:after,
    span.has-children:hover:after {
        content: "\f106"
    }
}

.btn {
    display: inline-block;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn.active,
.btn:hover {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

::-moz-selection {
    color: #fff;
    background: #00539e
}

::selection {
    color: #fff;
    background: #00539e
}

.page-content {
    min-width: 320px
}

.wrapper {
    max-width: 1410px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 15px;
}

.page-title,
.section-content,
.section-title {
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

main {
    padding: 154px 0 1px;
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    main {
        padding: 120px 0 1px;
    }
}

@media only screen and (max-width:750px) {
    main {
        padding: 74px 0 1px;
    }
}

@media only screen and (min-width:1024px) {
    main {
        min-height: calc(100vh - 307px)
    }
}

a:hover {
    color: #00539e
}

a.yellow:hover {
    color: #a68137
}

.btn {
    background: #DA864B;
    color: #fff;
    text-transform: uppercase;
    min-width: 200px;
    text-align: center;
    line-height: 64px;
    border: 1px solid #DA864B
}

.btn:hover {
    background: #854A00;
    color: #fff
}

.btn.btn-small {
    line-height: 45px
}

.btn.btn-nano {
    line-height: 1.3em;
    min-width: auto;
    padding: 0 5px;
    min-width: 70px;
}

.btn.btn-normal {
    padding: 0 28px;
    line-height: 46px
}

.btn.btn-yellow {
    background: #fff;
    color: #a68137;
    border: 1px solid rgba(166, 129, 55, .35)
}

.btn.btn-yellow:hover {
    background: #a68137;
    color: #fff
}

.form,
form {
    width: 100%
}

.f1 {
    width: 8.33333%!important
}

@media only screen and (max-width:1260px) {
    .f1 {
        width: 100%!important
    }
    .f1.inline {
        width: 8.33333%!important
    }
}

.f2 {
    width: 16.66667%!important
}

@media only screen and (max-width:1260px) {
    .f2 {
        width: 100%!important
    }
    .f2.inline {
        width: 16.66667%!important
    }
}

.f3 {
    width: 25%!important
}

@media only screen and (max-width:1260px) {
    .f3 {
        width: 100%!important
    }
    .f3.inline {
        width: 25%!important
    }
}

.f4 {
    width: 33.33333%!important
}

@media only screen and (max-width:1260px) {
    .f4 {
        width: 100%!important
    }
    .f4.inline {
        width: 33.33333%!important
    }
}

.f5 {
    width: 41.66667%!important
}

@media only screen and (max-width:1260px) {
    .f5 {
        width: 100%!important
    }
    .f5.inline {
        width: 41.66667%!important
    }
}

.f6 {
    width: 50%!important
}

@media only screen and (max-width:1260px) {
    .f6 {
        width: 100%!important
    }
    .f6.inline {
        width: 50%!important
    }
}

.f7 {
    width: 58.33333%!important
}

@media only screen and (max-width:1260px) {
    .f7 {
        width: 100%!important
    }
    .f7.inline {
        width: 58.33333%!important
    }
}

.f8 {
    width: 66.66667%!important
}

@media only screen and (max-width:1260px) {
    .f8 {
        width: 100%!important
    }
    .f8.inline {
        width: 66.66667%!important
    }
}

.f9 {
    width: 75%!important
}

@media only screen and (max-width:1260px) {
    .f9 {
        width: 100%!important
    }
    .f9.inline {
        width: 75%!important
    }
}

.f10 {
    width: 83.33333%!important
}

@media only screen and (max-width:1260px) {
    .f10 {
        width: 100%!important
    }
    .f10.inline {
        width: 83.33333%!important
    }
}

.f11 {
    width: 91.66667%!important
}

@media only screen and (max-width:1260px) {
    .f11 {
        width: 100%!important
    }
    .f11.inline {
        width: 91.66667%!important
    }
}

.f12 {
    width: 100%!important
}

@media only screen and (max-width:1260px) {
    .f12 {
        width: 100%!important
    }
    .f12.inline {
        width: 100%!important
    }
}

.form-row {
    margin: 0 0 10px
}

.form-row:after,
.form-row:before {
    content: "";
    display: table;
    line-height: 0
}

.form-row:after {
    clear: both
}

@media only screen and (max-width:1260px) {
    .form-row {
        margin: 0
    }
}

.form-row.extra {
    position: relative
}

.form-field {
    float: left;
    padding: 0 10px 10px
}

.form-field:after,
.form-field:before {
    content: "";
    display: table;
    line-height: 0
}

.form-field:after {
    clear: both
}

@media only screen and (max-width:1260px) {
    .form-field {
        margin: 0 0 20px
    }
}

@media only screen and (min-width:1024px) {
    .form-field.controls {
        position: absolute;
        bottom: 21px;
        right: 0
    }
}

@media only screen and (max-width:1260px) {
    .form-field.controls {
        text-align: right;
        margin-top: -20px;
        margin-bottom: 40px
    }
}

.form-actions {
    text-align: center;
    padding: 0 10px
}

input,
textarea {
    width: 100%;
    background: #f7f7f7;
    font-family: "Fira Sans", sans-serif;
    color: #2a4554;
    padding: 25px 20px;
    border: none;
    border-radius: 0;
    line-height: 1.25;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-weight: 300
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    font-weight: 300
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    font-weight: 300
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    font-weight: 300
}

input:focus,
textarea:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 5px rgba(0, 83, 158, .1);
    -moz-box-shadow: 0 0 5px rgba(0, 83, 158, .1);
    -ms-box-shadow: 0 0 5px rgba(0, 83, 158, .1);
    -o-box-shadow: 0 0 5px rgba(0, 83, 158, .1);
    box-shadow: 0 0 5px rgba(0, 83, 158, .1);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

input:disabled,
input[readonly=readonly],
input[readonly],
textarea:disabled,
textarea[readonly=readonly],
textarea[readonly] {
    cursor: not-allowed
}

input.error,
textarea.error {
    -webkit-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -moz-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -ms-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -o-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6)
}

.select2:disabled,
select:disabled {
    cursor: not-allowed
}

.select2.error,
select.error {
    -webkit-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -moz-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -ms-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -o-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6)
}

textarea {
    resize: vertical
}

label.error {
    display: block;
    color: #de3034;
    padding: 8px 0 0;
    line-height: 1.25;
    font-size: 14px;
    font-size: .77778rem
}

input[type=reset],
input[type=submit] {
    cursor: pointer;
    -webkit-appearance: none
}

input[type=submit] {
    background: #DA864B;
    color: #fff;
    padding: 0 20px;
    line-height: 46px;
    text-align: center;
}

input[type=submit]:hover {
    background: #854A00;
}

.form-card,
.toggle-card {
    cursor: pointer;
    position: relative;
    width: 680px;
    width: 48%;
    color: #2a4554;
    line-height: 1.25;
    font-size: 16px;
    font-size: .88889rem
}

.form-card__icon.bus:before,
.form-card__icon.car:before,
.toggle-card__icon.bus:before,
.toggle-card__icon.car:before {
    color: #b80000;
    font-family: "HKUST Alumni Reunion";
    font-size: 21px
}

.form-card__icon.bus:before,
.toggle-card__icon.bus:before {
    content: ""
}

.form-card__icon.car:before,
.toggle-card__icon.car:before {
    content: ""
}

.form-card__title,
.toggle-card__title {
    font-weight: 500;
    padding: 14px 0 8px
}

.form-card input[type=checkbox],
.form-card input[type=radio],
.toggle-card input[type=checkbox],
.toggle-card input[type=radio] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0
}

.form-card input[type=checkbox]:checked~div,
.form-card input[type=radio]:checked~div,
.toggle-card input[type=checkbox]:checked~div,
.toggle-card input[type=radio]:checked~div {
    border-bottom: 3px solid #00539e;
    -webkit-box-shadow: 0 0 10px 4px #e6e7e8;
    -moz-box-shadow: 0 0 10px 4px #e6e7e8;
    -ms-box-shadow: 0 0 10px 4px #e6e7e8;
    -o-box-shadow: 0 0 10px 4px #e6e7e8;
    box-shadow: 0 0 10px 4px #e6e7e8
}

.form-card input[type=checkbox].error~div,
.form-card input[type=radio].error~div,
.toggle-card input[type=checkbox].error~div,
.toggle-card input[type=radio].error~div {
    -webkit-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -moz-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -ms-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -o-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6)
}

.form-card input[type=checkbox]~div,
.form-card input[type=radio]~div,
.toggle-card input[type=checkbox]~div,
.toggle-card input[type=radio]~div {
    text-align: center;
    border: 1px solid #e6e7e8;
    border-bottom: 3px solid #b3cce2;
    padding: 49px 15px 36px;
    background: #fff;
    min-height: 185px
}

.form-toggle,
.toggle-row {
    cursor: pointer;
    position: relative
}

.form-toggle input[type=checkbox],
.form-toggle input[type=radio],
.toggle-row input[type=checkbox],
.toggle-row input[type=radio] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0
}

.form-toggle input[type=checkbox]:checked~div:after,
.form-toggle input[type=radio]:checked~div:after,
.toggle-row input[type=checkbox]:checked~div:after,
.toggle-row input[type=radio]:checked~div:after {
    content: "";
    background: #00539e;
    border: 1px solid #00539e;
    border-radius: 50%;
    display: block;
    width: 11px;
    height: 11px;
    position: absolute;
    top: 8px;
    left: 4px
}

.form-toggle input[type=checkbox].error~div,
.form-toggle input[type=radio].error~div,
.toggle-row input[type=checkbox].error~div,
.toggle-row input[type=radio].error~div {
    color: #de3034
}

.form-toggle input[type=checkbox].error~div:before,
.form-toggle input[type=radio].error~div:before,
.toggle-row input[type=checkbox].error~div:before,
.toggle-row input[type=radio].error~div:before {
    border: 1px solid #de3034;
    -webkit-box-shadow: 0 0 6px 3px #de3034;
    -moz-box-shadow: 0 0 6px 3px #de3034;
    -ms-box-shadow: 0 0 6px 3px #de3034;
    -o-box-shadow: 0 0 6px 3px #de3034;
    box-shadow: 0 0 6px 3px #de3034
}

.form-toggle input[type=checkbox]~div,
.form-toggle input[type=radio]~div,
.toggle-row input[type=checkbox]~div,
.toggle-row input[type=radio]~div {
    position: relative;
    padding: 0 0 0 35px
}

.form-toggle input[type=checkbox]~div:before,
.form-toggle input[type=radio]~div:before,
.toggle-row input[type=checkbox]~div:before,
.toggle-row input[type=radio]~div:before {
    content: "";
    border: 1px solid #a7a9ac;
    border-radius: 50%;
    display: block;
    width: 19px;
    height: 19px;
    position: absolute;
    top: 4px;
    left: 0
}

.form-toggle input[type=checkbox]~div span,
.form-toggle input[type=radio]~div span,
.toggle-row input[type=checkbox]~div span,
.toggle-row input[type=radio]~div span {
    vertical-align: top
}

.form-preview__section {
    padding: 79px 0 0
}

@media only screen and (max-width:750px) {
    .form-preview__section {
        padding: 25px 0 0
    }
}

.form-preview__title {
    color: #2a4554;
    padding: 0 10px 50px;
    line-height: 1.1;
    font-weight: 500;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 40px;
    font-size: 2.22222rem
}

.form-preview__content {
    position: relative
}

.form-preview__content+.form-preview__content {
    margin-top: 55px
}

@media only screen and (max-width:750px) {
    .form-preview__content+.form-preview__content {
        margin-top: 30px
    }
}

.form-preview .form-actions {
    text-align: left;
    padding: 79px 10px 150px
}

@media only screen and (max-width:750px) {
    .form-preview .form-actions {
        text-align: center;
        padding: 50px 10px 75px
    }
}

.form-preview .btn-back,
.form-preview .btn-proceed {
    width: 230px;
    margin: 0 5px 10px;
    padding: 0 20px;
    line-height: 65px
}

.form-preview .form-field.title {
    font-weight: 500
}

.is-active {
    color: #999!important
}

.is-hidden {
    display: none!important
}

.is-visually-hidden {
    position: absolute!important;
    overflow: hidden!important;
    clip: rect(0 0 0 0)!important;
    height: 1px!important;
    width: 1px!important;
    margin: -1px!important;
    padding: 0!important;
    border: 0!important
}

@media only screen and (max-width:1260px) {
    .is-desktop {
        display: none!important
    }
}

@media only screen and (min-width:1024px) {
    .is-tablet {
        display: none!important
    }
}

@media only screen and (max-width:750px) {
    .is-tablet {
        display: none!important
    }
}

@media only screen and (min-width:751px) {
    .is-mobile {
        display: none!important
    }
}

@media only screen and (min-width:1024px) {
    .is-tablet-mobile {
        display: none!important
    }
}

@media only screen and (max-width:750px) {
    .is-desktop-tablet {
        display: none!important
    }
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .is-desktop-mobile {
        display: none!important
    }
}

.pos-relative {
    position: relative
}

.pos-absolute {
    position: absolute
}

.pos-fixed {
    position: fixed
}

.pull-right {
    float: right
}

.pull-left {
    float: left
}

.v-middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.h-middle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.inline {
    display: inline-block
}

.block {
    display: block
}

.font-thin {
    font-weight: 300
}

.font-medium {
    font-weight: 400
}

.font-bold {
    font-weight: 700
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-nowrap {
    white-space: nowrap
}

.text-lowercase {
    text-transform: lowercase
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
    line-height: 0
}

.clearfix:after {
    clear: both
}

.fs0 {
    font-size: 0
}

.lh0 {
    line-height: 0
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,
.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff url(../img/loading.gif) center center no-repeat
}

@font-face {
    font-family: slick;
    src: url(../fonts/slick-1.8.0/slick.eot);
    src: url(../fonts/slick-1.8.0/slick.eot?#iefix) format("embedded-opentype"), url(../fonts/slick-1.8.0/slick.woff) format("woff"), url(../fonts/slick-1.8.0/slick.ttf) format("truetype"), url(../fonts/slick-1.8.0/slick.svg#slick) format("svg");
    font-weight: 400;
    font-style: normal
}

.slick-next,
.slick-prev {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: 0 0;
    color: transparent;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: 0;
    opacity: 0.8;
}

.slick-next:focus,
.slick-next:hover,
.slick-prev:focus,
.slick-prev:hover {
    outline: 0;
    background: 0 0;
    color: transparent
}

.slick-next:focus:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-prev:hover:before {
    opacity: 1
}

.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
    opacity: .25
}

.slick-next:before,
.slick-prev:before {
    font-family: slick;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    opacity: .75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    left: auto;
    right: -25px
}

.slick-prev:before {
    content: "←"
}

[dir=rtl] .slick-prev:before {
    content: "→"
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    left: -25px;
    right: auto
}

.slick-next:before {
    content: "→"
}

[dir=rtl] .slick-next:before {
    content: "←"
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    border: 0;
    background: 0 0;
    display: block;
    height: 20px;
    width: 20px;
    outline: 0;
    line-height: 0;
    font-size: 0;
    color: transparent;
    padding: 5px;
    cursor: pointer
}

.slick-dots li button:focus,
.slick-dots li button:hover {
    outline: 0
}

.slick-dots li button:focus:before,
.slick-dots li button:hover:before {
    opacity: 1
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "•";
    width: 20px;
    height: 20px;
    font-family: slick;
    font-size: 6px;
    line-height: 20px;
    text-align: center;
    color: #000;
    opacity: .25;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    color: #000;
    opacity: .75
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: relative
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px
}

.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select2-container .select2-search--inline {
    float: left
}

.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    padding: 0
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.select2-dropdown {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051
}

.select2-results {
    display: block
}

.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0
}

.select2-results__option {
    padding: 6px;
    user-select: none;
    -webkit-user-select: none
}

.select2-results__option[aria-selected] {
    cursor: pointer
}

.select2-container--open .select2-dropdown {
    left: 0
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-search--dropdown {
    display: block;
    padding: 4px
}

.select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.select2-search--dropdown.select2-search--hide {
    display: none
}

.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff
}

.select2-hidden-accessible {
    border: 0!important;
    clip: rect(0 0 0 0)!important;
    -webkit-clip-path: inset(50%)!important;
    clip-path: inset(50%)!important;
    height: 1px!important;
    overflow: hidden!important;
    padding: 0!important;
    position: absolute!important;
    width: 1px!important;
    white-space: nowrap!important
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: 700
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
    float: left
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px
}

.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999;
    margin-top: 5px;
    float: left
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: 700;
    margin-top: 5px;
    margin-right: 10px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-right: 2px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #333
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder {
    float: right
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #000 1px;
    outline: 0
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa
}

.select2-container--default .select2-search--inline .select2-search__field {
    background: 0 0;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto
}

.select2-container--default .select2-results__option[role=group] {
    padding: 0
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -2em;
    padding-left: 3em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -3em;
    padding-left: 4em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -4em;
    padding-left: 5em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -5em;
    padding-left: 6em
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb;
    color: #fff
}

.select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px
}

.select2-container--classic .select2-selection--single {
    background-color: #f7f7f7;
    border: 1px solid #aaa;
    border-radius: 4px;
    outline: 0;
    background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
    background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
    background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
    background-repeat: repeat-x
}

.select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: 700;
    margin-right: 10px
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
    background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
    background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
    background-repeat: repeat-x
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
    float: left
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
    border: none;
    border-right: 1px solid #aaa;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 1px;
    right: auto
}

.select2-container--classic.select2-container--open .select2-selection--single {
    border: 1px solid #5897fb
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: 0 0;
    border: none
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-image: -webkit-linear-gradient(top, #fff 0, #eee 50%);
    background-image: -o-linear-gradient(top, #fff 0, #eee 50%);
    background-image: linear-gradient(to bottom, #fff 0, #eee 50%);
    background-repeat: repeat-x
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
    background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
    background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
    background-repeat: repeat-x
}

.select2-container--classic .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    outline: 0
}

.select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-right: 2px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #555
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
    float: right;
    margin-left: 5px;
    margin-right: auto
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
    border: 1px solid #5897fb
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    outline: 0
}

.select2-container--classic .select2-search--inline .select2-search__field {
    outline: 0;
    box-shadow: none
}

.select2-container--classic .select2-dropdown {
    background-color: #fff;
    border: 1px solid transparent
}

.select2-container--classic .select2-dropdown--above {
    border-bottom: none
}

.select2-container--classic .select2-dropdown--below {
    border-top: none
}

.select2-container--classic .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto
}

.select2-container--classic .select2-results__option[role=group] {
    padding: 0
}

.select2-container--classic .select2-results__option[aria-disabled=true] {
    color: grey
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background-color: #3875d7;
    color: #fff
}

.select2-container--classic .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: #5897fb
}

.dev-mode .design {
    width: 1904px;
    height: 5610px;
    background-image: url(../img/mockup/design.png);
    background-position: left top;
    position: absolute;
    top: 0;
    left: calc(50%);
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center 0;
    pointer-events: none;
    z-index: 9999;
    display: none;
    opacity: 0
}

@media only screen and (max-width:750px) {
    .dev-mode .design {
        width: 375px;
        height: 3840px;
        background-image: url(../img/mockup/designm.png);
        left: 50%
    }
}

.dev-mode .design.show {
    display: block;
    opacity: .3
}

.dev-mode .control {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    display: block;
    width: 30px;
    height: 30px;
    margin: 10px;
    cursor: pointer;
    background: 0 0;
    border-radius: 5px;
    -webkit-transition: .3s .3s ease-in-out;
    -moz-transition: .3s .3s ease-in-out;
    -ms-transition: .3s .3s ease-in-out;
    -o-transition: .3s .3s ease-in-out;
    transition: .3s .3s ease-in-out
}

.dev-mode .control:hover {
    background: rgba(0, 0, 0, .3);
    -webkit-transition: .3s .3s ease-in-out;
    -moz-transition: .3s .3s ease-in-out;
    -ms-transition: .3s .3s ease-in-out;
    -o-transition: .3s .3s ease-in-out;
    transition: .3s .3s ease-in-out
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1050
}

@media only screen and (min-width:1024px) {
    header {
        background: #fff
    }
}

header .wrapper {
    max-width: 1385px
}

@media only screen and (max-width:1380px) {
    header .wrapper {
        padding: 0
    }
}

@media only screen and (max-width:1260px) {
    header .wrapper {
        background: rgba(42, 69, 84, .95);
        background-image: url(../img/line.png);
        background-position: bottom left;
        background-repeat: repeat-x;
        background-size: 100% 6px
    }
}

@media only screen and (max-width:1260px) and (max-width:750px) {
    header .wrapper {
        background-image: url(../img/line.png);
        background-size: 100% 4px
    }
}

.header-desktop {
    -webkit-box-shadow: 0 5px 5px 0 rgba(68, 68, 68, .2);
    -moz-box-shadow: 0 5px 5px 0 rgba(68, 68, 68, .2);
    -ms-box-shadow: 0 5px 5px 0 rgba(68, 68, 68, .2);
    -o-box-shadow: 0 5px 5px 0 rgba(68, 68, 68, .2);
    box-shadow: 0 5px 5px 0 rgba(68, 68, 68, .2)
}

@media only screen and (max-width:1260px) {
    .header-desktop {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        -o-box-shadow: none;
        box-shadow: none
    }
}

.header-desktop.active .header-desktop__trigger span {
    opacity: 0
}

.header-desktop.active .header-desktop__trigger span:first-child {
    opacity: 1;
    -webkit-transform: rotate(-45deg) translate(-7px, 0) scale(.7);
    -moz-transform: rotate(-45deg) translate(-7px, 0) scale(.7);
    -ms-transform: rotate(-45deg) translate(-7px, 0) scale(.7);
    -o-transform: rotate(-45deg) translate(-7px, 0) scale(.7);
    transform: rotate(-45deg) translate(-7px, 0) scale(.7)
}

@media only screen and (max-width:750px) {
    .header-desktop.active .header-desktop__trigger span:first-child {
        -webkit-transform: rotate(-45deg) translate(-6px, 1px) scale(.7);
        -moz-transform: rotate(-45deg) translate(-6px, 1px) scale(.7);
        -ms-transform: rotate(-45deg) translate(-6px, 1px) scale(.7);
        -o-transform: rotate(-45deg) translate(-6px, 1px) scale(.7);
        transform: rotate(-45deg) translate(-6px, 1px) scale(.7)
    }
}

.header-desktop.active .header-desktop__trigger span:last-child {
    opacity: 1;
    -webkit-transform: rotate(45deg) translate(0, -10px) scale(.7);
    -moz-transform: rotate(45deg) translate(0, -10px) scale(.7);
    -ms-transform: rotate(45deg) translate(0, -10px) scale(.7);
    -o-transform: rotate(45deg) translate(0, -10px) scale(.7);
    transform: rotate(45deg) translate(0, -10px) scale(.7)
}

@media only screen and (max-width:750px) {
    .header-desktop.active .header-desktop__trigger span:last-child {
        -webkit-transform: rotate(45deg) translate(0, -7px) scale(.7);
        -moz-transform: rotate(45deg) translate(0, -7px) scale(.7);
        -ms-transform: rotate(45deg) translate(0, -7px) scale(.7);
        -o-transform: rotate(45deg) translate(0, -7px) scale(.7);
        transform: rotate(45deg) translate(0, -7px) scale(.7)
    }
}

.header-desktop__trigger {
    display: none;
    cursor: pointer;
    /* position: absolute;
    left: 50%; */
    background-image: url(../img/trigger.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    /* -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); */
}

@media only screen and (max-width:1260px) {
    .header-desktop__trigger {
        display: block;
       /* width: 75px;
        height: 37.5px;
        bottom: -37.5px*/
    }
	
	 .header-desktop__trigger span {
		display: none !IMPORTANT;
		width: 26.4px;
		height: 2px;
		background: #fff;
		position: absolute;
		top: 15px;
		left: 24px
	}
}

@media only screen and (max-width:750px) {
    .header-desktop__trigger {
       /* width: 55px;
        height: 27px;
        bottom: -27px*/
    }
}

.header-desktop__trigger span {
    display: block;
    width: 26.4px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 15px;
    left: 24px
}

@media only screen and (max-width:750px) {
    .header-desktop__trigger span {
        width: 18px;
        height: 1px;
        top: 9px;
        left: 18px
    }
}

.header-desktop__trigger span:first-child {
    top: 9px
}

@media only screen and (max-width:750px) {
    .header-desktop__trigger span:first-child {
        top: 4px
    }
}

.header-desktop__trigger span:last-child {
    top: 21px
}

@media only screen and (max-width:750px) {
    .header-desktop__trigger span:last-child {
        top: 14px
    }
}

.header-desktop__menu {
    position: relative;
    z-index: 1
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu>ul {
        padding: 26px 15px 45px
    }
}

.header-desktop__menu a,
.header-desktop__menu li,
.header-desktop__menu span {
    display: inline-block;
    vertical-align: top;
    color: #6d6e71;
    font-size: 18px;
    font-size: 1rem
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu a,
    .header-desktop__menu li,
    .header-desktop__menu span {
        display: block;
        color: #fff
    }
}

.header-desktop__menu a.active,
.header-desktop__menu a:hover,
.header-desktop__menu li.active,
.header-desktop__menu li:hover,
.header-desktop__menu span.active,
.header-desktop__menu span:hover {
    color: #14345E;
	/*font-weight : 500;*/
	/*color: #a68137*/
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu a.active,
    .header-desktop__menu a:hover,
    .header-desktop__menu li.active,
    .header-desktop__menu li:hover,
    .header-desktop__menu span.active,
    .header-desktop__menu span:hover {
       
		 color: #a68137
    }
}

.header-desktop__menu a.active:before,
.header-desktop__menu a:hover:before,
.header-desktop__menu li.active:before,
.header-desktop__menu li:hover:before,
.header-desktop__menu span.active:before,
.header-desktop__menu span:hover:before {
    background: #14345E ;
	/*background: #a68137;*/
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.header-desktop__menu ul {
    width: 100%
}

@media only screen and (max-width:1384px) {
    .header-desktop__menu ul {
        text-align: center
    }
}

.header-desktop__menu ul>li {
    position: relative
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li {
        border-bottom: 1px solid rgba(255, 255, 255, .5)
    }
    .header-desktop__menu ul>li:last-child {
        border-bottom: none
    }
}

.header-desktop__menu ul>li:hover>ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.header-desktop__menu ul>li span,
.header-desktop__menu ul>li>a {
   /* text-align: center;*/
   /* min-width: 100px;*/
   /* padding: 12px 36px;*/
	padding-left:20px;
	padding-right:20px;
	padding-bottom:22px;
    position: relative;
	
}

@media only screen and (max-width:1384px) {
    .header-desktop__menu ul>li span,
    .header-desktop__menu ul>li>a {
        min-width: unset;
       /* padding: 12px 20px*/
	     padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 22px;
    }
}


@media only screen and (max-width:1305px) {
    .header-desktop__menu ul>li span,
    .header-desktop__menu ul>li>a {
        min-width: unset;
       /* padding: 12px 15px*/
		
		  padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 22px;
	
    }
}



@media only screen and (max-width:1200px) {
    .header-desktop__menu ul>li span,
    .header-desktop__menu ul>li>a {
        padding: 12px 20px
    }
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li span,
    .header-desktop__menu ul>li>a {
        text-align: left;
        padding: 12px 10px
    }
}

.header-desktop__menu ul>li span:before,
.header-desktop__menu ul>li>a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: 0 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li span:before,
    .header-desktop__menu ul>li>a:before {
        content: none
    }
}

.header-desktop__menu ul>li span.is-expanded~ul,
.header-desktop__menu ul>li>a.is-expanded~ul {
    opacity: 1
}

.header-desktop__menu ul>li>ul {
    position: absolute;
    top: 47px;
    left: 50%;
    width: 200px;
    background: #e6eff4;
    opacity: 0;
    -webkit-transform: translate(-50%, -25px);
    -moz-transform: translate(-50%, -25px);
    -ms-transform: translate(-50%, -25px);
    transform: translate(-50%, -25px);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (min-width:1024px) {
    .header-desktop__menu ul>li>ul {
        visibility: hidden
    }
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li>ul {
        width: 100%;
        background: 0 0;
        position: static;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        max-height: 0;
        overflow: hidden
    }
}

.header-desktop__menu ul>li>ul>li {
    display: block;
    text-align: center;
    border-bottom: 1px solid #b7c4cb
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li>ul>li {
        border-bottom: none
    }
}

.header-desktop__menu ul>li>ul>li:last-child {
    border-bottom: none
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li>ul>li:last-child {
        margin: 0 0 14px
    }
}

.header-desktop__menu ul>li>ul>li a,
.header-desktop__menu ul>li>ul>li span {
    padding: 12px 16px;
    color: #2a4554;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 700;
    line-height: 18px;
    font-size: 14px;
    font-size: .77778rem
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li>ul>li a,
    .header-desktop__menu ul>li>ul>li span {
        color: #a5c3ce;
        font-family: "Fira Sans", sans-serif;
        font-weight: 300;
        padding: 5px 25px;
        font-size: 16px;
        font-size: .88889rem
    }
}

@media only screen and (max-width:1260px) {
    .header-desktop__menu ul>li>ul>li a.active,
    .header-desktop__menu ul>li>ul>li a:hover,
    .header-desktop__menu ul>li>ul>li span.active,
    .header-desktop__menu ul>li>ul>li span:hover {
        color: #a68137
    }
}

.header-desktop__menu ul>li>ul>li a.active:before,
.header-desktop__menu ul>li>ul>li a:hover:before,
.header-desktop__menu ul>li>ul>li span.active:before,
.header-desktop__menu ul>li>ul>li span:hover:before {
    background: 0 0
}

.header-desktop__menu .enr-program {
    display: none
}

@media only screen and (max-width:1260px) {
    .user-logined .header-desktop__menu .enr-program {
        display: block
    }
}

.header-desktop__user {
    position: absolute;
    top: 0;
    right: 0;
    margin: 32px 0 0;
    padding: 0 0 15px;
    height: 50px
}

.header-desktop__user:after,
.header-desktop__user:before {
    content: "";
    display: table;
    line-height: 0
}

.header-desktop__user:after {
    clear: both
}

@media only screen and (max-width:1384px) {
    .header-desktop__user {
        margin: 32px 25px 0
    }
}

@media only screen and (max-width:1260px) {
    .header-desktop__user {
        position: static;
        height: auto;
        margin: 0;
        text-align: center
    }
}

.header-desktop__user-menu {
    float: right
}

@media only screen and (max-width:1260px) {
    .header-desktop__user-menu {
        float: none;
        width: 100%
    }
}

.header-desktop__user-menu .btn {
    display: inline-block;
    vertical-align: top;
    color: #003264;
	
	    background: #FFF;
    border-color: #FFF;
    min-width: unset;
     padding: 0 20px;
    line-height: 46px;
    text-transform: none;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    /*font-size: 14px;
    font-size: .77778rem;*/
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out
}

@media only screen and (max-width:1260px) {
    .header-desktop__user-menu .btn {
        min-width: 250px;
        font-size: 18px;
        font-size: 1rem
    }
}

.header-desktop__user-menu .user-menu {
    display: inline-block;
    vertical-align: top
}

.header-desktop__user-menu .user-menu a,
.header-desktop__user-menu .user-menu span {
    cursor: pointer
}

.header-desktop__user-menu .user-menu>li:hover>ul {
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.header-desktop__user-menu .user-menu ul {
    position: relative;
    background: #fdeac8;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    line-height: 45px;
    text-align: center;
    z-index: -1;
    opacity: 0;
    font-size: 14px;
    font-size: .77778rem;
    -webkit-transform: translateY(-25px);
    -moz-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.header-desktop__user-menu .user-menu ul li {
    border-bottom: 1px solid #e6d1a7
}

.header-desktop__user-menu .user-menu ul li:last-child {
    border-bottom: none
}

.header-desktop__user-menu .user-menu ul a,
.header-desktop__user-menu .user-menu ul span {
    color: #a68137
}

.header-desktop__social {
    float: left;
    height: 46px;
    width: 200px;
    padding: 16px 0;
    text-align: center
}

@media only screen and (max-width:1260px) {
    .header-desktop__social {
        float: none;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 24px 0 56px
    }
}

@media only screen and (max-width:1260px) {
    .header-desktop__fullmenu {
        overflow: hidden;
        overflow-y: auto;
        max-height: 70vh
    }
}

.header-desktop.active .header-desktop__fullmenu {
    max-height: unset
}

.header-menu-overlay {
    display: none
}

.site-logos {
    /*padding: 27px 0 15px*/
}

@media only screen and (max-width:1384px) {
    .site-logos {
       /* padding: 27px 25px 15px*/
    }
}

@media only screen and (max-width:1260px) {
    .site-logos {
        background: #fff;
        padding-bottom: 6px; /* 28px */
        background-image: url(../img/line.png);
        /*background-position: bottom left;*/
        background-repeat: repeat-x;
        background-size: 100% 6px
    }
}

@media only screen and (max-width:1260px) and (max-width:750px) {
    .site-logos {
        background-image: url(../img/line.png);
       /* background-size: 100% 4px*/
    }
}

@media only screen and (max-width:750px) {
    .site-logos {
       /* padding-top: 17px;
        padding-bottom: 14px*/
    }
}

.site-logos img {
    max-width: 250px
}

@media only screen and (max-width:750px) {
    .site-logos img {
        max-width: 152px
    }
}

.social {
    color: #bcbec0;
    padding: 0 10px;
    font-size: 17px;
    font-size: .94444rem
}

@media only screen and (max-width:1260px) {
    .social {
        background: #fff;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 0 4px;
        color: #00539e;
        text-align: center;
        font-size: 14px;
        font-size: .77778rem
    }
    .social:hover {
        background: #00539e;
        color: #fff
    }
}

@media only screen and (max-width:1260px) {
    .social:before {
        line-height: 30px
    }
}

.shopping-cart {
	padding-top:6px;
    display: inline-block;
    vertical-align: top;
    font-size: 21px;
    text-align: center;
    line-height: 44px;
    width: 46px;
    /*border: 1px solid #ecedee;*/
    margin: 0 10px 0 0;
    color: #00539e; 
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (max-width:1260px) {
    .shopping-cart {
        /*position: fixed;*/
        top: 0;
        right: 0;
		color: #FFF; 
        /*margin: 14px 25px 0*/
    }
}

@media only screen and (max-width:750px) {
    .shopping-cart {
        width: 40px;
        line-height: 38px;
        font-size: 18px;
        font-size: 1rem
    }
}

.shopping-cart:hover {
    color: #00498b;
    border: 1px solid rgba(0, 83, 158, .8);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.shopping-cart span {
    position: absolute;
    top: 5px;
    right: 3px;
    color: #fff;
    background: #a68137;
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 1
}

@media only screen and (max-width:750px) {
    .shopping-cart span {
        top: 5px;
        right: 1px
    }
}

.user:before {
    /*content: "\f007";
    display: inline-block;
    vertical-align: middle;
    font-family: fontAwesome;
    padding: 0 10px 0 0*/
}

.user:after {
    display: inline-block;
    vertical-align: middle;
    padding: 0 0 0 15px;
    font-family: fontAwesome;
    content: "\f107";
    font-size: 18px
}

.ar-home:before {
    content: "\f015";
    font-family: fontAwesome;
    font-size: 22px
}

footer {
    background: #00539e;
    padding: 0px 0 0
}

@media only screen and (max-width:1260px) {
    footer {
        padding: 0
    }
    footer>.wrapper {
        padding: 0 15px
    }
}

footer .social {
    color: #7eb6e0;
    padding: 0 12px;
    background: 0 0;
    font-size: 16px;
    font-size: .88889rem
}

footer .social:hover {
    color: #fff
}

.footer-menu:after,
.footer-menu:before {
    content: "";
    display: table;
    line-height: 0
}

.footer-menu:after {
    clear: both
}

@media only screen and (max-width:1380px) {
    .footer-menu {
        margin: 0 0 20px
    }
}

@media only screen and (max-width:1260px) {
    .footer-menu {
        text-align: center
    }
}

.footer-menu__brand {
    float: left;
    width: 100%;
    max-width: 465px;
    padding: 66px 0 94px
}

@media only screen and (max-width:1380px) {
    .footer-menu__brand {
        max-width: 30%
    }
}

@media only screen and (max-width:1260px) {
    .footer-menu__brand {
        float: none;
        max-width: unset;
        padding: 65px 0
    }
}

@media only screen and (max-width:750px) {
    .footer-menu__brand {
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        min-width: 285px
    }
}

.footer-menu__brand a {
    display: inline-block
}

.footer-menu__brand img {
    display: inline-block;
    max-width: 285px
}

.footer-menu__contact-main {
    float: left;
    width: 100%;
    max-width: 724px;
    padding: 28px 0 0
}

@media only screen and (max-width:1380px) {
    .footer-menu__contact-main {
        max-width: 70%
    }
}

@media only screen and (max-width:1260px) {
    .footer-menu__contact-main {
        float: none;
        max-width: unset;
        padding: 0
    }
}

@media only screen and (max-width:750px) {
    .footer-menu__contact-main {
        display: block;
        margin: 0 auto
    }
}

.footer-menu__social {
    float: left;
    padding: 51px 0 0
}

@media only screen and (max-width:1380px) {
    .footer-menu__social {
        width: 70%;
        padding: 6px 0 0;
        margin: 0 0 0 -10px
    }
}

@media only screen and (max-width:1260px) {
    .footer-menu__social {
        float: none;
        width: auto;
        max-width: unset;
        padding: 62px 0;
        margin: 0
    }
}

.footer-menu__contact-col {
    display: inline-block;
    vertical-align: top
}

@media only screen and (max-width:1260px) {
    .footer-menu__contact-col {
        width: 100%
    }
}

.footer-menu__contact-col.left {
    min-width: 230px
}

@media only screen and (max-width:1260px) {
    .footer-menu__contact-col.left {
        min-width: unset
    }
}

.footer-menu__contact-col.right {
    width: 365px
}

@media only screen and (max-width:1260px) {
    .footer-menu__contact-col.right {
        width: 100%;
        padding: 50px 0 0
    }
}

.footer-menu__contact-col.right span {
    display: block;
    line-height: 1.5
}

.footer-menu__contact {
    display: block
}

.footer-menu__contact.header {
    color: #7eb6e0;
    line-height: 20px;
    font-size: 16px;
    font-size: .88889rem
}

.footer-menu__contact.detail {
    color: #fff;
    font-weight: 500;
    line-height: 24px;
    margin: 9px 0 15px;
    font-size: 20px;
    font-size: 1.11111rem
}

.footer-menu__contact a {
    color: #fff
}

.footer-menu__contact a:hover {
    text-decoration: underline
}

.copyright {
    /*background: #00498b;*/
    /*color: #fff;
    padding: 17px 0;
    line-height: 19px;
    font-size: 15px;
    font-size: .83333rem*/
}

@media only screen and (max-width:1260px) {
    .copyright {
        text-align: center
    }
}

.copyright i {
    padding: 0 4px
}

.slick-initialized.slick-dotted {
    margin-bottom: 0
}

.slick-initialized .slick-arrow {
    z-index: 1;
    width: auto;
    height: auto;
    background: #c3c4c4;
    width: 35px;
    height: 35px;
    border-radius: 50%
}

.slick-initialized .slick-arrow:before {
    display: block;
    position: absolute;
    top: 1px;
    left: -1px;
    color: #000;
    font-size: 38px;
    opacity: .8
}

.slick-initialized .slick-arrow:hover:before {
    opacity: 1
}

.slick-initialized .slick-arrow.slick-prev {
    top: 48%;
    left: -10px
}

.slick-initialized .slick-arrow.slick-next {
    top: 48%;
    right: -10px
}

.slick-initialized .slick-dots {
    bottom: -54px;
    width: auto;
    left: 50%;
    padding: 0 6px;
    border-radius: 24px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media only screen and (max-width:1260px) {
    .slick-initialized .slick-dots {
        width: 100%
    }
}

.slick-initialized .slick-dots li {
    vertical-align: middle;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 3px
}

@media only screen and (max-width:1260px) {
    .slick-initialized .slick-dots li {
        padding: 0 5px
    }
}

.slick-initialized .slick-dots li.slick-active button:before,
.slick-initialized .slick-dots li:hover button:before {
    color: #00539E;
}

.slick-initialized .slick-dots li button {
    width: auto;
    height: auto;
    padding: 0
}

.slick-initialized .slick-dots li button:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #854A00;
    opacity: 1;
    line-height: 1;
    width: 14px;
    height: 14px;
    font-size: 14px
}

.select2-container--default .select2-selection--single {
    height: auto
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #2a4554;
    line-height: 46px;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
    width: auto;
    height: 100%;
    top: 0;
    left: 0
}

.select2-container--default .select2-selection--single .select2-selection__arrow b:before {
    color: #7f8185;
    padding: 3px 0 0;
    line-height: 48px;
    font-family: fontAwesome;
    content: "\f107";
    font-size: 18px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2a4554;
    line-height: 46px;
    padding-left: 18px;
    padding-right: 36px;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    font-weight: 400;
    font-size: 25px;
    font-size: 1.38889rem
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #fff;
    border-radius: 0
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #fff;
    border-radius: 0;
    font-size: 0;
    min-height: unset;
    line-height: 0;
    height: 48px
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-size: 0;
    line-height: 0;
    padding-left: 18px;
    padding-right: 18px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: none;
    display: inline-block;
    vertical-align: middle;
    background: 0 0;
    border: none;
    padding: 0;
    margin-right: 0;
    margin-top: 0;
    color: #2a4554;
    line-height: 46px;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:not(:first-child):before {
    content: ",";
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px 0 0;
    line-height: 46px;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: none
}

.select2-container--default .select2-search--inline .select2-search__field {
    line-height: 35px;
    margin-top: 11px
}

.select2-container--default .select2-search--inline .select2-search__field::-webkit-input-placeholder {
    color: #2a4554;
    font-style: unset;
    font-weight: 300;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-search--inline .select2-search__field::-moz-placeholder {
    color: #2a4554;
    font-style: unset;
    font-weight: 300;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-search--inline .select2-search__field:-ms-input-placeholder {
    color: #2a4554;
    font-style: unset;
    font-weight: 300;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-search--inline .select2-search__field:-moz-placeholder {
    color: #2a4554;
    font-style: unset;
    font-weight: 300;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-results .select2-results__option {
    position: relative;
    color: #2a4554;
    padding: 12px 18px;
    line-height: 1.28571;
    font-size: 14px;
    font-size: .77778rem
}

.select2-container--default .select2-results .select2-results__option--highlighted[aria-selected] {
    color: #fff;
    font-weight: 500
}

.select2-container--default .select2-results .select2-results__option[aria-selected=true] {
    color: #00539e;
    background: #fff;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.select2-container--default .select2-dropdown--multiple .select2-results__option {
    padding: 12px 6px 12px 56px
}

.select2-container--default .select2-dropdown--multiple .select2-results__option:before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid #acaeb1;
    position: absolute;
    top: 12px;
    left: 22px
}

.select2-container--default .select2-dropdown--multiple .select2-results__option--highlighted[aria-selected] {
    color: #2a4554;
    background: 0 0
}

.select2-container--default .select2-dropdown--multiple .select2-results__option[aria-selected=true]:after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #00539e;
    position: absolute;
    top: 16px;
    left: 26px
}

.select2-container--open {
    z-index: 2000
}

.select2-container--disabled span.select2-selection--single {
    cursor: not-allowed!important
}

.select2-container .select2-selection--single {
    border-radius: 0;
    border: 1px solid #fff
}

.swal-text,
.swal-title {
    font-family: "Fira Sans", sans-serif
}

.swal-title {
    font-weight: 500
}

.swal-text {
    font-weight: 300;
    color: #000
}

@media only screen and (max-width:1260px) {
    .alumni-info {
        text-align: center;
		/* padding-top:3%; */
        /*padding: 75px 0 60px*/
    }
}

@media only screen and (max-width:750px) {
    .alumni-info {
		/* padding-top:10%; */
        /*padding: 105px 0 51px*/ /*  padding: 65px 0 51px */
    }
}

/* @media only screen and (max-width:550px) {
    .alumni-info {
		padding-top:9%;
       
    }
}

@media only screen and (max-width:455px) {
    .alumni-info {
		padding-top:8%;
       
    }
}

@media only screen and (max-width:400px) {
    .alumni-info {
		padding-top:7%;
       
    }
} */

.alumni-info__alumni-logo,
.alumni-info__reunion-logo {
    position: relative;
    min-height: 80px
}

@media only screen and (max-width:1260px) {
    .alumni-info__alumni-logo img,
    .alumni-info__reunion-logo img {
        max-width: 100%!important
    }
}

.alumni-info__alumni-logo {
    margin: 0 0 7px
}

@media only screen and (max-width:750px) {
    .alumni-info__alumni-logo {
        padding: 0 35px;
        min-height: unset
    }
}

.alumni-info__alumni-logo img {
    max-width: 445px
}

.alumni-info__reunion-logo {
    margin: 0 0 15px
}

.alumni-info__reunion-logo img {
    max-width: 960px
}

.alumni-info__date {
    color: #aaa193;
    line-height: 1;
    font-weight: 300;
    font-size: 33px;
    font-size: 1.83333rem
}

@media only screen and (max-width:750px) {
    .alumni-info__date {
        font-size: 21px;
        font-size: 1.16667rem
    }
}

.alumni-info__intro {
    padding: 9px 0 12px 27px;
    margin: -6px 2% 0 51%;
    line-height: 1.4;
    font-style: italic;
    background-image: url(../img/v-line.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%
}

@media only screen and (max-width:1260px) {
    .alumni-info__intro {
        margin: 50px 0 0;
        padding: 5px 0;
        background: 0 0
    }
}

.alumni-info__intro p+p {
    margin-top: 25px
}

.program-slider {
    background-color: #F6F2ED;
    /* background-image: url(../img/programs-bg.jpg); */
    background-repeat: repeat-x;
    background-position: center top;
    padding: 100px 0 130px
}

@media only screen and (max-width:1260px) {
    .program-slider .wrapper {
        padding: 0 5px
    }
}

.program-slider__title {
    color: #854A00;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    line-height: 1.5;
    padding: 0 0 25px;
    /* text-shadow: 0 0 10px #444; */
    font-size: 50px;
    font-size: 2.77778rem;
}

@media only screen and (max-width:1260px) {
    .program-slider {
        padding: 80px 0 130px;
    }

    .program-slider__title {
        font-size: 2.33338rem;
    }
}

@media only screen and (max-width:750px) {
    .program-slider {
        padding: 60px 0 130px;
    }
    .program-slider__title {
        font-size: 1.77778rem;
    }
}

.program-slider__main {
    font-size: 0;
    line-height: 0;
    margin: 0 -10px
}

@media only screen and (max-width:1425px) {
    .program-slider__main {
        margin: 0
    }
    .program-slider__main .slick-arrow.slick-prev {
        left: 0
    }
    .program-slider__main .slick-arrow.slick-next {
        right: 0
    }
}

.program-slider__slide {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px;
    width: 330px;
    height: 336px;
    overflow: hidden;
    position: relative
}

.slide {
    cursor: pointer;
    background-color: #bcbec0
}

.slide.active,
.slide:hover {
    -webkit-box-shadow: 0 2px 10px 3px rgba(68, 68, 68, .5);
    -moz-box-shadow: 0 2px 10px 3px rgba(68, 68, 68, .5);
    -ms-box-shadow: 0 2px 10px 3px rgba(68, 68, 68, .5);
    -o-box-shadow: 0 2px 10px 3px rgba(68, 68, 68, .5);
    box-shadow: 0 2px 10px 3px rgba(68, 68, 68, .5)
}

.slide.active .slide__wrapper,
.slide:hover .slide__wrapper {
    bottom: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.slide.active .slide__img-hover,
.slide:hover .slide__img-hover {
    opacity: 1!important;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    transition-delay: .2s
}

.slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0) 70%, rgba(68, 68, 68, .65) 100%);
    background-image: -o-linear-gradient(top, rgba(68, 68, 68, 0) 70%, rgba(68, 68, 68, .65) 100%);
    background-image: linear-gradient(to bottom, rgba(68, 68, 68, 0) 70%, rgba(68, 68, 68, .65) 100%);
    background-repeat: repeat-x
}

.slide__title {
    position: absolute;
    bottom: 36px;
    left: 28px;
    z-index: 5;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    font-size: 22px;
    font-size: 1.22222rem
}

.slide__wrapper {
    position: absolute;
    left: 0;
    bottom: -329px;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: .8;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.slide__img-hover {
    opacity: 0!important;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.slide img {
    display: block;
    margin: 0 auto
}

.department-program {
    padding: 132px 0 120px;
    overflow: hidden
}

@media only screen and (max-width:1260px) {
    .department-program {
        padding: 68px 0 48px
    }
}

.department-program__title {
    color: #a68137;
    line-height: 1.5;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 50px;
    font-size: 2.77778rem
}

@media only screen and (max-width:900px) {
.department-program__title {
   
   
    font-size: 2rem
}
}


@media only screen and (max-width:1260px) {
    .department-program__title {
        line-height: 1
    }
}

.department-program__main {
    padding: 30px 0
}

.department-program__main:after,
.department-program__main:before {
    content: "";
    display: table;
    line-height: 0
}

.department-program__main:after {
    clear: both
}

@media only screen and (max-width:1260px) {
    .department-program__main {
        padding: 63px 0 0
    }
}

.department-program__list {
    float: left;
    width: 33.69565%;
    position: relative
}

@media only screen and (max-width:1260px) {
    .department-program__list {
        width: 100%;
        float: none
    }
}

.department-program__list:before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    height: 100%;
    width: 1px;
    background: #af936d
}

@media only screen and (max-width:1260px) {
    .department-program__list:before {
        content: none
    }
}

.department-program__list-wrapper:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 17px;
    border-color: transparent transparent transparent #af936d;
    position: absolute;
    top: 132px;
    right: -17px
}

@media only screen and (max-width:1260px) {
    .department-program__list-wrapper:before {
        content: none
    }
}

.department-program__list-wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 134px;
    right: -14px;
    z-index: 1
}

@media only screen and (max-width:1260px) {
    .department-program__list-wrapper:after {
        content: none
    }
}

.department-program__item {
    display: block;
    width: 100%;
    color: #7f8185;
    line-height: 30px;
    padding: 17px 0 1px;
    font-size: 18px;
    font-size: 1rem
}

@media only screen and (max-width:1260px) {
    .department-program__item {
        padding: 0 0 23px
    }
}

.department-program__item.active,
.department-program__item:hover {
    color: #b80000;
	/*color: #00539e;*/
    font-weight: 500;
    font-size: 25px;
    font-size: 1.38889rem
}

.department-program__programs {
    float: left;
    width: 66.30435%;
    position: relative;
    min-height: 285px
}

@media only screen and (max-width:1260px) {
    .department-program__programs {
        width: 100%;
        float: none;
        margin: 22px 0 0
    }
}

.department-program__programs .slick-initialized .slick-arrow:before {
    left: -2px
}

.department-program__programs .slick-initialized .slick-arrow.slick-next,
.department-program__programs .slick-initialized .slick-arrow.slick-prev {
    top: 125px
}

.department-program__programs .slick-initialized .slick-arrow.slick-next {
    right: 104px
}

@media only screen and (max-width:1260px) {
    .department-program__programs .slick-initialized .slick-arrow.slick-next {
        right: -10px
    }
}

.department-program__slider {
    position: absolute;
    top: 0;
    left: 119px;
    padding: 0 119px 0 0;
    width: 100%;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.department-program__slider:after,
.department-program__slider:before {
    content: "";
    display: table;
    line-height: 0
}

.department-program__slider:after {
    clear: both
}

@media only screen and (max-width:1260px) {
    .department-program__slider {
        padding: 0;
        left: 0
    }
}

.department-program__slider.active {
    position: relative;
    opacity: 1;
    z-index: 2;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.department-program__slide {
    float: left;
    margin: 0 10px 10px;
    width: 300px
}

.department-program__all {
    display: inline-block;
    min-width: 132px;
    color: #a68137;
    text-align: center;
    border: 1px solid #e8e9e9;
    line-height: 40px;
    font-weight: 500;
    position: absolute;
    top: 15px;
    right: 0;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 15px;
    font-size: .83333rem
}

.department-program__all:hover {
    border: 1px solid #00539e
}

@media only screen and (max-width:1380px) {
    .department-program__all {
        margin-right: 15px
    }
}

@media only screen and (max-width:1260px) {
    .department-program__all {
        position: static;
        display: block;
        margin: 0 auto;
        margin: 35px auto 0;
        width: 132px
    }
}

.program-slide__img {
    display: block;
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
    text-align: center;
    line-height: 0;
    margin: 0 auto
}

.program-slide__img:hover img {
    -webkit-transform: scale(1.1) rotate(-4deg);
    -moz-transform: scale(1.1) rotate(-4deg);
    -ms-transform: scale(1.1) rotate(-4deg);
    -o-transform: scale(1.1) rotate(-4deg);
    transform: scale(1.1) rotate(-4deg);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.program-slide__img:hover .program-slide__code:before {
    right: -320px;
    bottom: -255px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.program-slide__img:hover .program-slide__code span {
    bottom: 12px;
    right: 5px;
    font-size: 30px;
    font-size: 1.66667rem;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.program-slide__img img {
    width: 100%;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out
}

.program-slide__cover img {
    vertical-align: top
}

.program-slide__code {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%
}

.program-slide__code:before {
    content: "";
    background: #00539e;
    display: block;
    position: absolute;
    z-index: 1;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 400px;
    height: 400px;
    right: -340px;
    bottom: -275px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.program-slide__code span {
    color: #fff;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    padding: 0 10px;
    line-height: 34px;
    font-size: 16px;
    font-size: .88889rem;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.program-slide__info {
    color: #00539e;
    font-weight: 500;
    line-height: 20px;
    margin: 12px 0 2px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 16px;
    font-size: .88889rem
}

.program-slide__info span {
    display: inline-block;
    vertical-align: middle
}

.program-slide__info .session {
    font-weight: 300
}

.program-slide__info .session span {
    margin: 5px 0
}

.program-slide__info .session-title {
    color: #2a4554
}

.program-slide__info .session-content {
    color: #a68137
}

.program-slide__info .paid {
    margin: 0 15px
}

.program-slide__info-hkd {
    font-size: 22px
}

.program-slide__title a {
    color: #2a4554;
    line-height: 32px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 28px;
    font-size: 1.55556rem
}

.program-slide__title a:hover {
    color: #00539e
}

.middleline {
    color: #c3c4c4;
    padding: 0 4px
}

.page-cover {
    position: relative;
    background-position: center 165px; /*center 213px; */
    background-repeat: repeat-x
}

@media only screen and (min-width:751px) {
    .page-cover {
        background-attachment: fixed
    }
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .page-cover {
        background-position: center 119px
    }
}

@media only screen and (max-width:750px) {
    .page-cover {
        background-position: center top
    }
}

.page-cover__img {
    position: absolute;
    top: 0;
    left: 0
}

.page-cover__title {
    color: #fff;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    line-height: 84px;
    text-shadow: 0 0 10px #444;
    text-align: center;
    padding: 172px 0 134px;		/* 172px 0 134px; */
    position: relative;
    font-size: 80px;
    font-size: 4.44444rem
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .page-cover__title {
        padding: 129px 0 138px;
        font-size: 60px;
        font-size: 3.33333rem
    }
}

@media only screen and (max-width:750px) {
    .page-cover__title {
        padding: 140px 0 0;  /*padding: 80px 0 0;*/
        font-size: 40px;
        font-size: 2.22222rem
    }
	
	.page-cover__title span {
    line-height:1.2 !important;
    min-height: 94px;
    width: calc(100% - 2px);
	}
}


@media only screen and (max-width:550px) {
   
	.page-cover__title span {
   /* line-height:0.3 !important;*/
    min-height: 94px;
    width: calc(100% - 2px);
	}
}


.page-cover__title span {
    line-height: 2.5;  /* 1.2 */
    min-height: 94px;
    width: calc(100% - 2px)
}

.page-cover__title .subtitle {
    position: absolute;
    top: 100px;
    font-size: 60px;
    font-size: 3.33333rem
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .page-cover__title .subtitle {
        top: 80px;
        font-size: 48px;
        font-size: 2.66667rem
    }
}

@media only screen and (max-width:750px) {
    .page-cover__title .subtitle {
        top: 45px;
        font-size: 30px;
        font-size: 1.66667rem
    }
}

.page-cover span {
    display: block
}

.page-cover img {
    vertical-align: top
}

.search-programs {
    /* background: #e6eff4;
    padding: 12px 0 */
}

.search-programs__main {
    display: flex;
    flex-flow: wrap;
}

/* @media only screen and (max-width:1360px) {
    .search-programs__main {
        max-width: 1200px;
        margin: 0
    }
} */

.search-programs__main:after,
.search-programs__main:before {
    content: "";
    display: table;
    line-height: 0
}

.search-programs__main:after {
    clear: both
}

.search-programs__item {
    position: relative;
    /* float: left;
    margin-right: 2.02899% */
}

@media only screen and (max-width:1260px) {
    .search-programs__item {
        margin-right: 0
    }
}

.filter-item:nth-child(1n+2) {
    padding-left: 1%;
}

@media only screen and (max-width:1260px) {
    .filter-item {
        width: 100%!important;
        font-size: 0;
        overflow: hidden;
        position: relative;
        padding: 0 0 12px
    }
    .filter-item:nth-child(1n+2) {
        padding-left: 0;
    }
}

.filter-item.time {
	width: 20%;
}

.filter-item.time select,
.filter-item.time>.select2-container {
	width: 80% ! important;
	width: calc(100% - 1.73em - 12px) ! important
}

@media only screen and (max-width:1260px) {
    .filter-item.time select,
    .filter-item.time>.select2-container {
        width: 85% ! important
    }
}

.filter-item.school {
	width: 40%
}

.page-attend .filter-item.school {
    width: 100%
}

@media only screen and (max-width:1260px) {
    .page-attend .filter-item.school .filter-item__label {
        width: 22%
    }
}

@media only screen and (max-width:750px) {
    .page-attend .filter-item.school .filter-item__label {
        width: 100%
    }
}

.filter-item.school select,
.filter-item.school>.select2-container {
    width: 70% ! important;
    width: calc(100% - 3.41em - 12px) ! important
}

.page-attend .filter-item.school select,
.page-attend .filter-item.school>.select2-container {
    max-width: 355px
}

@media only screen and (max-width:1260px) {
    .page-attend .filter-item.school select,
    .page-attend .filter-item.school>.select2-container {
        max-width: unset;
        width: 78%!important
    }
}

@media only screen and (max-width:750px) {
    .page-attend .filter-item.school select,
    .page-attend .filter-item.school>.select2-container {
        width: 100%!important
    }
}

@media only screen and (max-width:1260px) {
    .filter-item.school select,
    .filter-item.school>.select2-container {
        width: 85%!important
    }
}

.filter-item.type {
	width: 20%;
    width: 40%;
}

.filter-item.type>.select2-container {
	 width: 78% ! important;
	 width: calc(100% - 1.67em - 12px) ! important;
}

@media only screen and (max-width:1260px) {
    .filter-item.type>.select2-container {
        width: 85%!important;
    }
}

.filter-item.theme {
	width: 20%;
    width: 40%;
}

.filter-item.theme>.select2-container {
	 width: 78% ! important;
     width: calc(100% - 2.38em - 12px) ! important;
}

@media only screen and (max-width:1260px) {
    .filter-item.theme>.select2-container {
        width: 85%!important
    }
}

.filter-item.participant select,
.filter-item.participant>.select2-container {
    width: 375px!important;
    max-width: 100%
}

@media only screen and (max-width:1260px) {
    div.filter-item.time > span.select2-container,
    div.filter-item.school > span.select2-container,
    div.filter-item.type > span.select2-container,
    div.filter-item.theme > span.select2-container {
        max-width: calc(100% - 3.41em - 12px)
    }
}

@media only screen and (max-width:620px) {
    .filter-item.participant select,
    .filter-item.participant>.select2-container {
        width: 100%!important
    }
}

.filter-item.search,
.filter-item.search-school {
    position: absolute;
    top: 0;
    right: 0;
    width: 375px;
    margin-right: 0
}

@media only screen and (max-width:1380px) {
    .filter-item.search,
    .filter-item.search-school {
        margin-right: 15px
    }
}

@media only screen and (max-width:1260px) {
    .filter-item.search,
    .filter-item.search-school {
        position: relative
    }
}

.filter-item.search-school:after,
.filter-item.search:after {
    content: "";
    font-family: "HKUST Alumni Reunion";
    font-size: 15px;
    color: #00539e;
    position: absolute;
    top: 10px;
    right: 18px;
    pointer-events: none
}

.filter-item.search input[type=text],
.filter-item.search-school input[type=text] {
    background: #fff;
    padding: 13px 42px 13px 15px
}

.filter-item.search input[type=submit],
.filter-item.search-school input[type=submit] {
    background: 0 0;
    font-size: 0;
    width: 42px;
    height: 46px;
    line-height: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer
}

.filter-item.search-school {
    width: 500px;
    font-size: 0;
    position: relative
}

.filter-item.search-school:after {
    display: none
}

@media only screen and (max-width:750px) {
    .filter-item.search-school:after {
        top: 36px
    }
}

.filter-item.search-school .filter-item__label {
    width: 22%
}

@media only screen and (max-width:750px) {
    .filter-item.search-school .filter-item__label {
        width: 100%
    }
}

.filter-item.search-school .select2,
.filter-item.search-school input[type=text],
.filter-item.search-school select {
    max-width: unset;
    width: 70%!important
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .filter-item.search-school .select2,
    .filter-item.search-school input[type=text],
    .filter-item.search-school select {
        width: 78%!important
    }
}

@media only screen and (max-width:750px) {
    .filter-item.search-school .select2,
    .filter-item.search-school input[type=text],
    .filter-item.search-school select {
        width: 100%!important
    }
}

.filter-item select,
.filter-item>.select2-container {
    display: inline-block;
    max-width: 100%
}

.filter-item__label {
    color: #2a4554;
    padding: 0 12px 0 0;
    line-height: 1.28571;
    font-weight: 500;
    font-size: 14px;
    font-size: .77778rem
}

@media only screen and (max-width:1260px) {
    .filter-item__label {
        display: inline-block;
        vertical-align: middle;
        min-width: 15%;
        padding: 0
    }
}

@media only screen and (max-width:480px) {
    .filter-item__label {
        min-width: 19%;
    }
    .filter-item > .select2-container,
    div.filter-item.time > span.select2-container,
    div.filter-item.school > span.select2-container,
    div.filter-item.type > span.select2-container,
    div.filter-item.theme > span.select2-container {
	    max-width: 81%
    }
}

@media only screen and (max-width:355px) {
    .filter-item__label {
        min-width: 21%;
    }
    .filter-item > .select2-container,
    div.filter-item.time > span.select2-container,
    div.filter-item.school > span.select2-container,
    div.filter-item.type > span.select2-container,
    div.filter-item.theme > span.select2-container {
	    max-width: calc(100% - 3.79rem);
    }
}

.program-list__main {
    padding: 70px 0 80px
}

@media only screen and (max-width:750px) {
    .program-list__main {
        padding: 0
    }
}

.program-list__item {
    min-height: 318px;
    padding: 70px 58px 0
}

.program-list__item:after,
.program-list__item:before {
    content: "";
    display: table;
    line-height: 0
}

.program-list__item:after {
    clear: both
}

@media only screen and (max-width:750px) {
    .program-list__item {
        padding: 64px 0 70px
    }
}

.program-list__item:nth-child(2n) {
    background: #fef8ec
}

.program-list__item.fail {
    background: #ecedee!important
}

.program-list__col {
    float: left
}

.program-list__col.information,
.program-list__col.picture {
    padding: 0 78px 0 0;
    background-color:transparent
}

.program-list__col.picture {
    width: 27.68987%
}

@media only screen and (max-width:1380px) {
    .program-list__col.picture {
        width: 50%;
        padding: 0 30px 0 0
    }
}

@media only screen and (max-width:900px) {
    .program-list__col.picture {
        float: none;
        padding: 0 30px;
        width: 60%;
        margin: 0 auto
    }
}

@media only screen and (max-width:750px) {
    .program-list__col.picture {
        width: 100%;
        padding: 0 15px
    }
}

.program-list__col.picture .program-slide__img {
    width: 273px;
    height: 179px
}

@media only screen and (max-width:1380px) {
    .program-list__col.picture .program-slide__img {
        margin: 0 auto;
        width: 300px;
        max-width: 100%;
        height: auto
    }
}

@media only screen and (max-width:900px) {
    .program-list__col.picture .program-slide__img {
        width: 100%
    }
}

@media only screen and (max-width:360px) {
    .program-list__col.picture .program-slide__img {
        margin: 0 auto
    }
}

.program-list__col.information {
    width: 41.4557%
}

@media only screen and (max-width:1380px) {
    .program-list__col.information {
        width: 50%;
        padding: 0 30px 0 0
    }
}

@media only screen and (max-width:900px) {
    .program-list__col.information {
        width: 60%;
        margin: 0 auto;
        float: none;
        padding: 25px 30px 0
    }
}

@media only screen and (max-width:750px) {
    .program-list__col.information {
        width: 100%
    }
}

.program-list__col.status {
    width: 30.6962%
}

@media only screen and (max-width:1380px) {
    .program-list__col.status {
        width: 50%;
        float: right;
        padding: 25px 30px 0 0
    }
}

@media only screen and (max-width:900px) {
    .program-list__col.status {
        width: 60%;
        margin: 0 auto;
        float: none;
        padding: 25px 30px 0
    }
}

@media only screen and (max-width:750px) {
    .program-list__col.status {
        width: 100%
    }
}

@media only screen and (max-width:750px) {
    .program-list__col.information,
    .program-list__col.picture,
    .program-list__col.status {
        max-width: 400px;
        margin: 0 auto
    }
}

.information {
    color: #2a4554;
    line-height: 1.25;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 16px;
    font-size: .88889rem
}

.information__detail {
    font-size: 0;
    padding: 6px 0 13px;
    margin: 0 0 13px;
    border-bottom: 1px solid #e6e7e8
}

.page-enrolled-programs .information__detail {
    border-bottom: none
}

@media only screen and (max-width:750px) {
    .information__detail>span {
        display: block
    }
}

.information__session:after,
.information__session:before {
    content: "";
    display: table;
    line-height: 0
}

.information__session:after {
    clear: both
}

.information__location,
.information__school {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:750px) {
    .information__location,
    .information__school {
        display: block;
        padding: 0;
        width: 100%
    }
}

.information__location:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    padding: 2px 6px 0 1px
}

.information__school:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    font-size: 14px;
    padding: 0 5px 0 0
}

.information__session-item {
    float: left;
    width: 50%;
    padding: 0 0 0 4px;
    line-height: 22px
}

@media only screen and (max-width:750px) {
    .information__session-item {
        display: block;
        width: 100%;
        float: none;
        padding: 0
    }
}

.information__session-item:nth-child(2n) {
    padding: 0 0 0 14px
}

@media only screen and (max-width:750px) {
    .information__session-item:nth-child(2n) {
        padding: 0
    }
}

.information__session-item.fail {
    position: relative
}

.information__session-item.fail:before {
    content: "";
    height: 1px;
    width: 88%;
    background: #808285;
    position: absolute;
    top: 10px;
    left: 0
}

.information__session-item span:last-child {
    color: #a68137
}

.information .program-slide__info {
    margin: 0 0 4px
}

.status__flag {
    font-size: 0;
    text-align: right;
    margin: 0 0 50px;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch
}

.status__flag .status__block.normal,
.status__flag .status__block.wide {
    max-width: unset
}

@media only screen and (max-width:1380px) {
    .status__flag {
        text-align: left
    }
}

@media only screen and (max-width:900px) {
    .status__flag {
        text-align: center;
        margin: 0 0 30px;
    }
}

@media only screen and (max-width:750px) {
    .status__flag {
        text-align: left
    }
}

.status__block {
    display: inline-block;
    vertical-align: top;
    color: #2a4554;
    text-align: center;
    border-right: 1px solid #e6e7e8;
    font-size: 13px;
    font-size: .72222rem
}

.status__block:last-child {
    border-right: 0
}

.status__block.normal {
    max-width: 86px;
    padding: 19px 15px 0
}

@media only screen and (max-width:750px) {
    .status__block.normal {
        max-width: 65px
    }
}

@media only screen and (max-width:400px) {
    .status__block.normal {
        max-width: 55px;
        padding: 19px 5px 0
    }
}

.status__block.wide {
    max-width: 108px;
    padding: 19px 8px 0
}

@media only screen and (max-width:750px) {
    .status__block.wide {
        max-width: 100px;
        padding: 19px 5px 0
    }
}

.status__img {
    display: block;
    position: relative;
    min-height: 30px
}

.status__img img {
    display: block;
    margin: 0 auto;
    /*width: 28px*/
}

.wide-img .status__img img {
    height: 30px;
    width: auto;
}

@media only screen and (max-width:750px) {
    .status__img img {
        width: 20px
    }
    .wide-img .status__img img {
        height: 20px;
    }
}

.status__text {
    line-height: 1;
    display: inline-block;
    padding: 10px 0 0;
    min-height: 35px;
    white-space: normal
}

.btn-join.active a {
    background: #DA864B;
    color: #fff;
    padding: 12px 42px 12px 0;
    border: 1px solid #DA864B;
}

.btn-join.active a:before {
    content: "";
    font-size: 14px;
    font-size: .77778rem
}

.btn-join.active a:after {
    content: "";
    font-family: "HKUST Alumni Reunion";
    line-height: 44px;
    border: 1px solid #DA864B;
    font-size: 14px;
    font-size: .77778rem;
    position: absolute;
    top: -1px;
    right: -1px;
    width: 42px;
    background: #DA864B;
    height: 46px
}

.btn-join a {
    position: relative;
    display: block;
    padding: 12px 0;
    color: #FFF;
    text-align: center;
    border: 1px solid #DA864B;
    background: #DA864B;
    line-height: 1.25;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.btn-join a:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    vertical-align: middle;
    padding: 0 15px 0 0;
    font-size: 20px;
    font-size: 1.11111rem
}

.btn-join a:hover {
    background: #854A00;
    color: #fff;
    border: 1px solid #854A00
}

.loading-div {
    text-align: center;
    padding: 50px 0
}

.paid {
    display: inline-block;
    vertical-align: baseline;
    background: #ebf6ea;
    color: #59af54;
    padding: 2px 12px 2px 10px;
    margin: 0 0 0 15px;
    font-size: 12px;
    font-size: .66667rem
}

.paid:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    padding: 0 5px 0 0;
    font-size: 10px;
    font-size: .55556rem
}

.popup-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -5;
    opacity: 0;
    background: rgba(0, 0, 0, .65);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.popup-window.active {
    opacity: 1;
    z-index: 2000;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.popup-window.loaded .popup-window__loading {
    opacity: 0;
    z-index: -1;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    top: auto;
    bottom: 0
}

@media only screen and (max-width:750px) {
    .popup-window.loaded .popup-window__loading {
        bottom: -140px
    }
}

.popup-window.load2panel .popup-window__loading {
    opacity: 1;
    z-index: 1
}

.popup-window.show-form .session-form,
.popup-window.show-list .session-form {
    border-top: 1px solid #a68137
}

.popup-window__main {
    margin: 4% 0 0
}

@media only screen and (max-width:750px) {
    .popup-window__main {
        margin: 42px 0 0
    }
}

.popup-window__panel {
    width: 100%;
    position: relative;
    background: #fff;
    min-height: 300px;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    overflow-y: auto
}

@media only screen and (max-width:750px) {
    .popup-window__panel {
        max-height: calc(100vh - 94px)
    }
}

.popup-window__loading {
    z-index: 1;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (max-width:750px) {
    .popup-window__top .program-list__item {
        padding: 56px 15px 0
    }
}

@media only screen and (max-width:750px) {
    .popup-window__top .program-slide__img {
        width: 100%!important
    }
    .popup-window__top .program-slide__img img {
        width: 100%;
        vertical-align: top
    }
}

@media only screen and (max-width:750px) {
    .popup-window__top .program-list__col {
        padding: 25px 0 0
    }
}

.popup-window__detail {
    color: #2a4554;
    margin: 0 58px;
    line-height: 1.44444;
    font-size: 18px;
    font-size: 1rem
}

@media only screen and (max-width:750px) {
    .popup-window__detail {
        padding: 60px 20px;
        margin: 0
    }
    .popup-window__detail:empty {
        padding: 0 0 10px
    }
}

.popup-window__detail:not(:empty) {
    padding: 0 4px 50px
}

.show-form .popup-window__detail,
.show-list .popup-window__detail {
    border-top: none
}

.popup-window__detail.line {
    border-top: 2px solid #efefef;
    padding: 62px 4px 70px
}

.popup-window__detail p+p {
    margin: 15px 0 0
}

.popup-window__form,
.popup-window__list {
    max-height: 0;
    overflow: hidden;
    background: #fef8ec
}

.popup-window__map {
    padding: 15px;
    text-align: center
}

.popup-window__close,
.wap__close {
    display: block;
    text-align: right;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
    padding: 0 0 12px;
    font-size: 20px;
    font-size: 1.11111rem
}

.popup-window__close:hover,
.wap__close:hover {
    color: #fff
}

.popup-window__close:hover span:after,
.popup-window__close:hover span:before,
.wap__close:hover span:after,
.wap__close:hover span:before {
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.popup-window__close span,
.wap__close span {
    display: inline-block;
    vertical-align: middle;
    position: relative
}

.popup-window__close span:after,
.popup-window__close span:before,
.wap__close span:after,
.wap__close span:before {
    content: "";
    background: #fff;
    display: block;
    width: 18px;
    height: 2px;
    position: absolute;
    left: -22px;
    top: 11px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.popup-window__close span:before,
.wap__close span:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.popup-window__close span:after,
.wap__close span:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.js-joined-list {
    display: none;
    color: #2a4554;
    margin: 12px 0 0;
    line-height: 1.25;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 16px;
    font-size: .88889rem
}

.js-joined-list:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #2a4554 transparent transparent transparent;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 13px
}

.js-joined-list:hover:after {
    border-color: #00539e transparent transparent transparent
}

.session-form,
.session-list {
    position: relative;
    padding: 0 175px;
    -webkit-box-shadow: inset 0 6px 12px -5px rgba(166, 129, 55, .35), inset 0 -6px 12px -5px rgba(0, 0, 0, .35);
    -moz-box-shadow: inset 0 6px 12px -5px rgba(166, 129, 55, .35), inset 0 -6px 12px -5px rgba(0, 0, 0, .35);
    -ms-box-shadow: inset 0 6px 12px -5px rgba(166, 129, 55, .35), inset 0 -6px 12px -5px rgba(0, 0, 0, .35);
    -o-box-shadow: inset 0 6px 12px -5px rgba(166, 129, 55, .35), inset 0 -6px 12px -5px rgba(0, 0, 0, .35);
    box-shadow: inset 0 6px 12px -5px rgba(166, 129, 55, .35), inset 0 -6px 12px -5px rgba(0, 0, 0, .35)
}

@media only screen and (max-width:1380px) {
    .session-form,
    .session-list {
        padding: 0
    }
}

.session-form:before,
.session-list:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 6px 0 6px;
    border-color: #a68137 transparent transparent transparent;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0
}

.session-form__row:after,
.session-form__row:before,
.session-list__row:after,
.session-list__row:before {
    content: "";
    display: table;
    line-height: 0
}

.session-form__row:after,
.session-list__row:after {
    clear: both
}

.session-form__col,
.session-list__col {
    float: left
}

.session-form__row {
    font-size: 0;
    padding: 35px 58px
}

@media only screen and (max-width:750px) {
    .session-form__row {
        padding: 35px 20px
    }
}

.session-form__row:nth-child(2n) {
    background: #faf1e1
}

.session-form__row:first-child {
    margin-top: 42px
}

.session-form__row:last-child {
    margin-bottom: 75px
}

.session-form__actions {
    position: relative;
    padding: 52px 0 76px
}

@media only screen and (max-width:1380px) {
    .session-form__actions {
        padding: 52px 58px 76px
    }
}

@media only screen and (max-width:1260px) {
    .session-form__actions {
        text-align: center
    }
    .session-form__actions .desc-text {
        display: block;
        float: none
    }
}

@media only screen and (max-width:750px) {
    .session-form__actions .btn-back-joined-list,
    .session-form__actions .btn-cancel,
    .session-form__actions .btn-submit {
        display: block;
        margin: 0 auto 8px;
        max-width: 180px
    }
}

.session-form__col {
    position: relative
}

.session-form__col.session-name {
    width: 39.01895%
}

@media only screen and (max-width:1260px) {
    .session-form__col.session-name {
        width: 100%;
        margin: 0 0 25px
    }
}

.session-form__col.join-member {
    width: 60.98105%;
    max-width: 535px
}

@media only screen and (max-width:1260px) {
    .session-form__col.join-member {
        width: 100%;
        max-width: unset
    }
}

.session-form__name {
    color: #a68137;
    line-height: 1;
    padding: 0 0 11px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 22px;
    font-size: 1.22222rem
}

.session-form__info {
    color: #2a4554;
    line-height: 1.25;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 16px;
    font-size: .88889rem
}

.session-form .person:before,
.session-form .time:before {
    display: inline-block;
    vertical-align: baseline;
    font-family: "HKUST Alumni Reunion";
    color: #c9b99f;
    padding: 0 7px 0 0
}

.session-form .time {
    padding: 0 16px 0 0
}

.session-form .time:before {
    content: ""
}

.session-form .person:before {
    content: ""
}

.session-form .btn-back-joined-list {
    float: right
}

@media only screen and (max-width:750px) {
    .session-form .btn-back-joined-list {
        float: none
    }
}

.join-member__row.error .select2-container {
    -webkit-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -moz-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -ms-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    -o-box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6);
    box-shadow: 0 0 2px 2px rgba(222, 48, 52, .6)
}

.join-member__select {
    width: 100%;
    max-width: 445px
}

@media only screen and (max-width:1260px) {
    .join-member .select2-container {
        width: calc(100% - 86px)!important
    }
}

.join-member .select2-container:not(:last-child) {
    margin: 0 0 8px
}

.join-member .select2-container span.select2-selection__rendered {
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.join-member .select2-container span.select2-selection__rendered span.select2-selection__placeholder {
    font-weight: 300;
    font-size: 16px;
    font-size: .88889rem
}

.join-member .select2-container span.select2-selection__arrow {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
    margin-right: 15px
}

.join-member .select2-container span.select2-selection__arrow b:before {
    content: none
}

.session-list__title {
    color: #a68137;
    line-height: 1.18182;
    padding: 72px 58px 28px;
    font-weight: 500;
    font-size: 22px;
    font-size: 1.22222rem
}

@media only screen and (max-width:750px) {
    .session-list__title {
        padding: 72px 20px 28px
    }
}

.session-list__row {
    padding: 17px 58px
}

@media only screen and (max-width:750px) {
    .session-list__row {
        padding: 17px 20px
    }
}

.session-list__row:nth-child(2n+1) {
    background: #faf1e1
}

.session-list__actions {
    padding: 30px 58px 72px
}

@media only screen and (max-width:750px) {
    .session-list__actions {
        padding: 30px 20px 72px
    }
}

.session-list__col {
    color: #2a4554;
    line-height: 1.25;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:500px) {
    .session-list__col {
        float: none;
        display: block;
        width: 100%!important
    }
}

.session-list__col.part-name {
    font-weight: 500;
    width: 39.24192%
}

.session-list__col.part-time {
    width: 60.75808%
}

.btn-add,
.btn-remove,
.btn-remove-bin {
    display: inline-block;
    vertical-align: top;
    font-size: 0
}

.btn-add:before,
.btn-remove-bin:before,
.btn-remove:before {
    font-family: "HKUST Alumni Reunion"
}

.btn-add {
    position: absolute;
    right: 0;
    z-index: 2;
    bottom: 14px;
    color: #397ab3;
    background: #e6eff4;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    text-align: center;
    font-size: 0
}

.btn-add:before {
    content: "";
    line-height: 27px;
    padding: 0 0 0 1px;
    font-size: 11px;
    font-size: .61111rem
}

.btn-add:hover {
    color: #fff;
    background: #00539e
}

.btn-remove,
.btn-remove-bin {
    padding: 3px 10px 0;
    margin: 0 0 0 14px;
    color: #cebfa7;
    height: 100%
}

.btn-remove-bin:before,
.btn-remove:before {
    content: "";
    line-height: 48px;
    font-size: 20px;
    font-size: 1.11111rem
}

.btn-add-more,
.btn-back,
.btn-back-joined-list,
.btn-cancel,
.btn-proceed,
.btn-send,
.btn-submit,
.invite-frd {
    display: inline-block;
    min-width: 180px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.btn-add-more,
.btn-proceed,
.btn-send,
.btn-submit,
.invite-frd {
    background: #DA864B  /*00539e*/
}

.btn-add-more:hover,
.btn-proceed:hover,
.btn-send:hover,
.btn-submit:hover,
.invite-frd:hover {
    color: #fff;
    background: #854A00  /*00386b*/
	/* border: 1px solid #854A00; */
}





.btn-back,
.btn-back-joined-list,
.btn-cancel {
    background: #414042
}

.btn-back-joined-list:hover,
.btn-back:hover,
.btn-cancel:hover {
    color: #fff;
    background: #282728
}

.desc-text {
    position: absolute;
    top: 100px;
    right: 0;
    color: red;
    padding: 12px 0 0;
    max-width: 430px;
    line-height: 18px;
    padding: 0 0 5px;
    font-size: 15px;
    font-size: .83333rem
}

@media only screen and (max-width:1380px) {
    .desc-text {
        right: 58px
    }
}

@media only screen and (max-width:750px) {
    .desc-text {
        position: static
    }
}

.btn-add-part,
.btn-edit-part {
    position: relative;
    display: inline-block;
    vertical-align: top;
    background: #a68137;
    color: #fff;
    text-align: center;
    min-width: 248px;
    padding: 0 22px 0 0;
    line-height: 45px;
    font-weight: 500;
    margin: 0 5px 10px 0;
    font-size: 16px;
    font-size: .88889rem
}

.btn-add-part:after,
.btn-edit-part:after {
    content: "";
    font-family: "HKUST Alumni Reunion";
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 14px;
    font-size: .77778rem
}

.btn-add-part:hover,
.btn-edit-part:hover {
    color: #fff;
    background: #80632a
}

.btn-edit-part {
    background: #00539e
}

.btn-edit-part:after {
    content: "\f040";
    font-family: fontAwesome
}

.btn-edit-part:hover {
    background: #00386b
}

.btn-remove-bin {
    color: #a7a9ac;
    padding: 12px 10px 0;
    margin: 0
}

.btn-remove-bin:before {
    font-size: 28px;
    font-size: 1.55556rem
}

.wap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -5;
    opacity: 0;
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.wap.active {
    z-index: 2000;
    opacity: 1;
    background: rgba(0, 0, 0, .65);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.wap.who-attend-popup .btn-cancel {
    max-width: none
}

.wap>.wrapper {
    position: static
}

.wap__wrapper {
    text-align: center;
    width: 100%;
    max-width: 680px;
    padding: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:750px) {
    .wap__wrapper {
        top: 50px;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.wap__content {
    background: #fff;
    padding: 82px 65px;
    width: 100%;
    max-height: 75vh;
    overflow-y: auto
}

@media only screen and (max-width:750px) {
    .wap__content {
        padding: 35px 25px
    }
}

.wap__msg,
.wap__msg-thin {
    color: #2a4554;
    margin: 0 0 25px;
    font-weight: 500;
    line-height: 1.22222;
    font-size: 18px;
    font-size: 1rem
}

.wap__msg-thin {
    font-weight: 300;
    margin: 0 0 40px
}

.wap__warning {
    display: block;
    color: red
}

.wap .btn-back-joined-list,
.wap .btn-cancel,
.wap .btn-send,
.wap .btn-submit {
    display: block;
    max-width: 230px;
    margin: 5px auto
}

.wap .btn-send,
.wap .btn-submit {
    line-height: 64px
}

.wap .btn-back-joined-list,
.wap .btn-cancel {
    color: #2a4554;
    background: 0 0;
    border: none;
    text-transform: none;
    font-weight: 300;
    font-size: 13px;
    font-size: .72222rem
}

.wap.qr-code {
    text-align: center
}

.wap.qr-code .wap__content {
    padding: 82px 15px 60px
}

.wap__qrcode {
    margin: 0 0 40px
}

.wap__name {
    color: #a68137;
    line-height: 1.16;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    padding: 0 0 12px;
    font-size: 25px;
    font-size: 1.38889rem
}

.wap .mw-0 {
    max-width: none;
    line-height: 1.5;
    padding: 19px 10px
}

#qrcode img {
    display: block;
    padding: 32px;
    margin: 0 auto;
    border: 1px solid rgba(166, 129, 55, .5)
}

.people-full {
    color: #2a4554;
    line-height: 46px;
    font-size: 16px;
    font-weight: 300;
    background-color: #eee;
    border: 1px solid #fff;
    padding: 0 18px
}

@media only screen and (min-width:1024px) {
    .people-full {
        max-width: 445px
    }
}

.signin-form {
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    text-align: center
}

@media only screen and (max-width:750px) {
    .signin-form {
        padding: 55px 0 40px
    }
}

.signin-form__footer {
    line-height: 1.25;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:750px) {
    .signin-form__footer span {
        display: block;
        margin: 0 0 8px
    }
}

.signin-form__footer a {
    color: #2a4554;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.signin-form__footer a:hover {
    color: #00539e;
    text-decoration: underline;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (max-width:750px) {
    .signin-form__footer .middleline {
        display: none
    }
}

.signin-form__row {
    text-align: left;
    margin: 0 0 20px
}

.signin-form input[type=submit] {
    width: 230px;
    max-width: 100%;
    margin: 10px 0 80px
}

@media only screen and (max-width:750px) {
    a.forget-password {
        display: block;
        margin: 0 0 8px
    }
}

a.register-now {
    color: #00498b
}

.error-msg {
    color: #de3034;
    line-height: 1.28571;
    font-weight: 400
}

.forgot-form {
    min-height: 63px
}

@media only screen and (max-width:1260px) {
    .forgot-form {
        padding: 100px 0
    }
}

.form {
    padding: 0px 0 100px
}

.register-form>.wrapper {
    max-width: 1400px
}

@media only screen and (max-width:1380px) {
    .register-form>.wrapper {
        padding: 0 5px
    }
}

.register-form form {
    /*padding: 32px 0 0*/
}

.register-form__section {
    padding: 0px 0 0
}

@media only screen and (max-width:750px) {
    .register-form__section {
        padding: 25px 0 0
    }
}

.register-form__section.captcha {
    margin-top: 79px;
    padding-top: 60px;
    border-top: 1px solid #ecedee
}

@media only screen and (max-width:750px) {
    .register-form__section.captcha {
        border-top: none;
        margin-top: 0;
        padding-top: 0
    }
}

.register-form__section.captcha .register-form__content {
    padding: 0 0 40px
}

@media only screen and (max-width:1260px) {
    .register-form__section.part-info .form-row:last-child .controls {
        padding-right: 60px
    }
}

.register-form__title {
    color: #2a4554;
    padding: 0 10px 50px;
    line-height: 1.1;
    font-weight: 500;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 40px;
    font-size: 2.22222rem
}

.register-form__content {
    position: relative;
    min-height: 70px
}

.register-form .select2,
.register-form select {
    float: left
}

.register-form .select2-container--default.children .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.contact-department .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.contact-year .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.num-people .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.part-gender .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.part-role .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.part-school .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.part-year .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--default.time .select2-selection--single .select2-selection__arrow {
    border-color: #a7a9ac transparent transparent transparent
}

.register-form .select2-container--default.part-role .select2-selection--single {
    background-color: #e6e7e8;
    border: 1px solid #e6e7e8
}

.register-form .select2-container--default.part-role .select2-selection--single .select2-selection__rendered {
    color: #2a4554;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.register-form .select2-container--default.children .select2-selection--single,
.register-form .select2-container--default.contact-department .select2-selection--single,
.register-form .select2-container--default.contact-year .select2-selection--single,
.register-form .select2-container--default.num-people .select2-selection--single,
.register-form .select2-container--default.part-gender .select2-selection--single,
.register-form .select2-container--default.part-school .select2-selection--single,
.register-form .select2-container--default.part-year .select2-selection--single,
.register-form .select2-container--default.time .select2-selection--single {
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7
}

.register-form .select2-container--default.children .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.contact-department .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.contact-year .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.num-people .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.part-gender .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.part-school .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.part-year .select2-selection--single .select2-selection__rendered,
.register-form .select2-container--default.time .select2-selection--single .select2-selection__rendered {
    color: #2a4554;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.register-form .select2-container--default.num-people .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.register-form .select2-container--default.time .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    font-weight: 300;
    font-size: 16px;
    font-size: .88889rem
}

.register-form .select2-container--default .select2-selection--single {
    background-color: #DA864B;
    border: 1px solid #DA864B;
}

.register-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    line-height: 68px
}

.register-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
    margin-right: 15px;
    border-color: #fff transparent transparent transparent
}

.register-form .select2-container--default .select2-selection--single .select2-selection__arrow b:before {
    content: none
}

.register-form .select2-container--open.children .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.contact-department .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.contact-year .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.num-people .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.part-gender .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.part-role .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.part-school .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.part-year .select2-selection--single .select2-selection__arrow,
.register-form .select2-container--open.time .select2-selection--single .select2-selection__arrow {
    border-color: transparent transparent #a7a9ac transparent
}

.register-form .select2-container--open .select2-selection--single .select2-selection__arrow {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #fff transparent
}

.register-form .btn-add {
    width: 36px;
    height: 36px;
    right: 20px;
    bottom: 36px
}

.register-form .btn-add:before {
    line-height: 36px
}

@media only screen and (max-width:1380px) {
    .register-form .btn-add {
        margin-bottom: 10px;
        right: calc(100% / 12 - 49px);
        bottom: -55px
    }
}

@media only screen and (max-width:1260px) {
    .register-form .btn-add {
        position: absolute;
        right: 20px;
        bottom: 46px
    }
}

.register-form .form-actions {
    text-align: left;
    padding: 0 10px 150px
}

@media only screen and (max-width:750px) {
    .register-form .form-actions {
        padding: 0 10px 75px
    }
}

.toggle.toggle-row {
    display: block
}

.toggle .toggle-msg {
    color: #2a4554;
    margin: 0 0 25px;
    line-height: 27px;
    font-size: 16px;
    font-size: .88889rem
}

.row-text {
    margin: 0 0 32px
}

.row-text p {
    line-height: 1.26667;
    font-size: 15px;
    font-size: .83333rem
}

.row-text p+P {
    margin-top: 15px
}

#captcha {
    border: 1px solid #ecedee;
    background: #fff;
    padding: 15px 20px
}

.btn-proceed {
    max-width: 230px;
    line-height: 65px
}

.btn-start-add {
    color: #fff;
    background: #DA864B;
    padding: 0 20px;
    line-height: 65px;
    text-align: center;
    display: inline-block;
    margin: 0 10px 30px
}

.btn-start-add:hover {
    color: #fff;
	
	background: #854A00;
}

.page-email main {
    min-height: calc(100vh - 402px)
}

.simpletext.email form {
    margin-left: -10px;
    width: calc(100% + 20px)
}

.simpletext__title {
    padding: 110px 0 30px;
    line-height: 1.1;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 40px;
    font-size: 2.22222rem
}

@media only screen and (max-width:750px) {
    .simpletext__title {
        padding: 60px 0 30px
    }
}

.simpletext__content {
    margin: 0 0 95px;
    color: #414042
}

.simpletext__content p {
    line-height: 1.25;
    font-size: 16px;
    font-size: .88889rem
}

.simpletext .btn-proceed {
    margin: 100px 0;
    width: 230px
}

@media only screen and (max-width:750px) {
    .simpletext .btn-proceed {
        margin: 77px 0 74px
    }
}

@media only screen and (max-width:400px) {
    .simpletext .btn-proceed {
        width: 100%;
        max-width: unset
    }
}

.cart>.wrapper {
    max-width: unset;
    padding: 0!important
}

.cart .program-list__item,
.cart__actions,
.cart__notes,
.cart__title,
.cart__total,
.cart__user__name,
.cart__user__wrapper {
    max-width: 1380px;
    margin: 0 auto
}

@media only screen and (max-width:1380px) {
    .cart .program-list__item,
    .cart__actions,
    .cart__notes,
    .cart__title,
    .cart__total,
    .cart__user__name,
    .cart__user__wrapper {
        padding: 0 15px
    }
}

.cart__title {
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    line-height: 1.1;
    margin: 111px auto 0;
    font-size: 40px;
    font-size: 2.22222rem
}

@media only screen and (max-width:750px) {
    .cart__title {
        margin: 56px auto 0
    }
}

.cart__notes {
    padding-top: 25px
}

.cart__content {
    min-height: 250px
}

.page-enrolled-programs .cart__content {
    padding: 58px 0 145px;
    min-height: 350px
}

@media only screen and (max-width:750px) {
    .page-enrolled-programs .cart__content {
        padding: 0 0 50px
    }
}

.cart__content__empty {
    position: relative;
    max-width: 1380px;
    padding: 0 15px;
    margin: 0 auto
}

.cart__content__empty span {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 115px;
    line-height: 1.25;
    font-size: 16px;
    font-size: .88889rem
}

.cart__user__name {
    padding: 56px 0 12px;
    color: #a68137;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    line-height: 1.13333;
    font-size: 30px;
    font-size: 1.66667rem
}

@media only screen and (max-width:1380px) {
    .cart__user__name {
        padding: 56px 15px 12px
    }
}

.cart__user__content .program-list__item {
    background: #fff;
    border-top: 1px solid #a68137;
    position: relative
}

@media only screen and (max-width:1380px) {
    .cart__user__content .program-list__item {
        margin: 0 15px;
        padding: 70px 0
    }
}

@media only screen and (max-width:750px) {
    .cart__user__content .program-list__item {
        padding: 70px 0 0
    }
}

.page-enrolled-programs .cart__user__content .program-list__item {
    border-top: none
}

@media only screen and (max-width:750px) {
    .page-enrolled-programs .cart__user__content .program-list__item {
        border-top: 1px solid #a68137
    }
}

.page-enrolled-programs .cart__user__content .program-list__item:first-child {
    border-top: 1px solid #a68137
}

.page-enrolled-programs .cart__user__content .program-list__item:nth-child(2n) {
    background: #fef8ec
}

@media only screen and (max-width:750px) {
    .page-enrolled-programs .cart__user__content .program-list__item:nth-child(2n) {
        background: #fff
    }
}

.cart__user__subtotal {
    background: #fef8ec;
    padding: 18px 0 45px;
    -webkit-box-shadow: inset 0 -6px 12px -5px rgba(166, 129, 55, 0), inset 0 6px 12px -5px rgba(0, 0, 0, .35);
    -moz-box-shadow: inset 0 -6px 12px -5px rgba(166, 129, 55, 0), inset 0 6px 12px -5px rgba(0, 0, 0, .35);
    -ms-box-shadow: inset 0 -6px 12px -5px rgba(166, 129, 55, 0), inset 0 6px 12px -5px rgba(0, 0, 0, .35);
    -o-box-shadow: inset 0 -6px 12px -5px rgba(166, 129, 55, 0), inset 0 6px 12px -5px rgba(0, 0, 0, .35);
    box-shadow: inset 0 -6px 12px -5px rgba(166, 129, 55, 0), inset 0 6px 12px -5px rgba(0, 0, 0, .35)
}

.cart__user__wrapper {
    text-align: right
}

.cart__total {
    padding: 48px 0 0
}

.cart__total:after,
.cart__total:before {
    content: "";
    display: table;
    line-height: 0
}

.cart__total:after {
    clear: both
}

.cart__total__notes {
    float: left;
    line-height: 1.26667;
    font-size: 15px;
    font-size: .83333rem
}

@media only screen and (max-width:1380px) {
    .cart__total__notes {
        padding: 0 15px
    }
}

@media only screen and (max-width:750px) {
    .cart__total__notes {
        width: 100%;
        padding: 20px 15px
    }
}

.cart__total__notes a {
    font-weight: 400;
    color: #444
}

.cart__total__notes a:hover {
    color: #00539e
}

.cart__total__price {
    float: right
}

@media only screen and (max-width:750px) {
    .cart__total__price {
        width: 100%
    }
}

.cart__actions {
    padding: 48px 0 110px
}

@media only screen and (max-width:1380px) {
    .cart__actions {
        padding: 48px 15px 110px
    }
}

@media only screen and (max-width:750px) {
    .cart__actions {
        padding: 11px 15px 75px
    }
}

.cart__actions .btn-proceed {
    width: 230px
}

@media only screen and (max-width:750px) {
    .cart__actions .btn-proceed {
        max-width: 350px;
        width: 100%
    }
}

.cart__btn {
    padding: 6px 0
}

.cart .btn-remove {
    color: #a7a9ac;
    position: absolute;
    top: 3px;
    right: 6px;
    height: auto
}

.cart .btn-remove:hover {
    color: #00539e
}

.ttl-text {
    display: inline-block;
    vertical-align: baseline;
    color: #2a4554;
    line-height: 1.25;
    width: 60px;
    text-align: left;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:750px) {
    .ttl-text {
        width: 50%
    }
}

.ttl-text.total {
    vertical-align: middle
}

.price {
    display: inline-block;
    vertical-align: baseline;
    color: #a68137;
    line-height: 1.18182;
    font-weight: 500;
    width: 263px;
    max-width: 100%;
    font-size: 22px;
    font-size: 1.22222rem
}

@media only screen and (max-width:750px) {
    .price {
        width: 48%
    }
}

.price.total {
    color: #00539e;
    vertical-align: middle;
    line-height: 1.11429;
    font-size: 35px;
    font-size: 1.94444rem
}

.btn-edit {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    color: #fff;
    width: 100%;
    max-width: 390px;
    line-height: 46px;
    background: #00539e;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.btn-edit:before {
    content: "\f040";
    font-family: fontAwesome;
    padding: 0 5px 0 0
}

.btn-edit:hover {
    color: #fff;
    background: #00386b
}

.qr-code-link {
    float: right;
    color: #2a4554;
    font-family: "Fira Sans Condensed", sans-serif;
    line-height: 1.25;
    padding: 6px 0 0;
    position: relative;
    font-size: 16px;
    font-size: .88889rem
}

.qr-code-link:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    font-size: 17px;
    font-size: .94444rem;
    position: absolute;
    top: 3px;
    left: -28px
}

.table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-left: -4px;
    width: calc(100% + 8px)
}

@media only screen and (max-width:750px) {
    .table {
        display: block
    }
}

.table-row {
    display: table-row;
    line-height: 1.25;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:750px) {
    .table-row {
        display: block
    }
}

.table-row.title {
    color: #00539e;
    font-weight: 500
}

.table-row.title .table-col {
    background: #ebf5f8
}

@media only screen and (max-width:750px) {
    .table-row.title {
        display: none
    }
}

.table-row.data {
    background: #fff
}

.table-col {
    display: table-cell;
    padding: 16px 28px
}

@media only screen and (max-width:750px) {
    .table-col {
        display: block
    }
}

.table-col.first {
    width: 33.69565%
}

@media only screen and (max-width:750px) {
    .table-col.first {
        color: #00539e;
        font-weight: 500;
        width: 100%;
        padding: 16px 28px 0
    }
}

.table-col.last {
    width: 66.30435%
}

@media only screen and (max-width:750px) {
    .table-col.last {
        width: 100%;
        padding: 0 28px 16px
    }
}

.no-result {
    line-height: 1.28571;
    font-size: 14px;
    font-size: .77778rem;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 245px;
    z-index: -1
}

@media only screen and (max-width:750px) {
    .no-result {
        top: 240px
    }
}

.attend-list__title {
    float: left;
    width: calc(100% - 250px);
    padding: 88px 0 30px;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .attend-list__title {
        padding-top: 75px
    }
}

@media only screen and (max-width:750px) {
    .attend-list__title {
        width: 100%;
        margin: 36px 0 0;
        padding: 0;
        float: none
    }
}

.attend-list__content {
    padding: 0 0 112px;
    position: relative;
    min-height: 500px
}

.attend-list__content:after,
.attend-list__content:before {
    content: "";
    display: table;
    line-height: 0
}

.attend-list__content:after {
    clear: both
}

@media only screen and (max-width:750px) {
    .attend-list__content {
        min-height: 300px
    }
}

.invite-frd {
    float: right;
    width: 230px;
    line-height: 56px;
    margin: 72px 0 30px
}

@media only screen and (max-width:750px) {
    .invite-frd {
        margin: 36px 0;
        float: none
    }
}

@media only screen and (max-width:400px) {
    .invite-frd {
        width: 100%
    }
}

.attend-table {
    text-align: left
}

.info-group {
    color: #2a4554;
    line-height: 1.22222;
    font-size: 18px;
    font-size: 1rem
}

.info-group .btn:hover {
    color: #fff
}

.extlink {
    display: inline-block;
    margin: 22px 0 10px;
    color: #444;
    font-size: 16px;
    font-weight: 500;
    font-family: "Fira Sans", sans-serif
}

.extlink:before {
    content: "";
    color: #00539e;
    font-family: "HKUST Alumni Reunion";
    font-size: 16px;
    padding: 0 7px 0 10px
}

.extlink:hover {
    color: #00539e
}

@media only screen and (max-width:750px) {
    .cloud {
        padding: 0 0 30px
    }
}

.cloud:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    color: #00539e;
    display: inline-block;
    padding: 0 0 0 12px;
    vertical-align: top;
    line-height: 1.5;
    font-size: 56px;
    font-size: 3.11111rem
}

@media only screen and (max-width:750px) {
    .cloud:before {
        padding: 0
    }
}

.table.info-detail {
    margin: 95px 0 75px
}

.page-faq .table.info-detail {
    margin: 28px 18px;
    display: block;
    max-width: calc(100% - 36px)
}

@media only screen and (max-width:750px) {
    .table.info-detail {
        margin: 32px 0 50px
    }
}

.table.info-detail .table-col {
    padding: 0;
    vertical-align: top
}

.table.info-detail .table-col.first {
    width: 105px
}

@media only screen and (max-width:750px) {
    .table.info-detail .table-col.first {
        width: 100%;
        text-align: center
    }
}

.table.info-detail .table-col.last {
    width: auto;
    padding: 5px 5px 0
}

.table.info-detail .table-col p {
    line-height: 26px;
    margin: 0
}

.table.info-detail .table-col p:last-child {
    margin: 0 0 15px
}

.table-title {
    font-weight: 500
}

#entrepreneur-corner {
    margin: 95px 0 75px
}

#entrepreneur-corner p+p {
    margin-bottom: 28px
}

#entrepreneur-corner .table-row {
    font-size: 1rem
}

#entrepreneur-corner .table-col {
    padding: 0;
    vertical-align: top
}

#entrepreneur-corner .table-col.last {
    padding: 0 0 0 15px
}

@media only screen and (min-width:1024px) {
    .page-transport .page-cover__title {
       /* padding: 172px 0 89px*/
    }
}

.section-title {
    line-height: 1.1;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 40px;
    font-size: 2.22222rem
}

.transportation {
   padding: 0 0 80px
}

@media only screen and (max-width:750px) {
    .transportation {
        padding: 0 0 60px
    }
}

.tab-menu {
    padding: 0 0 30px;
	text-align: right;
}

@media only screen and (max-width:750px) {
    .tab-menu {
        padding: 0 0 37px
    }
}

.tab-menu a,
.tab-menu li {
    display: inline-block;
    vertical-align: top;
	 font-size: 20px;
	/* padding-left:30px;
	 padding-right:30px;*/
	background: #CED6DB;
    border: 1px solid #CED6DB;
	color :#6F797E;
}

@media only screen and (max-width:800px) {
    .tab-menu a,
    .tab-menu li {
        display: block;
        width: 100%;
        text-align: center
    }
}

.tab-menu li {
    margin: 0 15px 10px 0;
    /*max-width: 41%;
    min-width: 135px*/
}

.tab-menu li:last-child {
    margin: 0
}

@media only screen and (max-width:800px) {
    .tab-menu li {
        max-width: 100%
    }
}

.tab-menu__link {
    padding: 10px 25px;
    color: #a7a9ac;
    font-size: 16px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #ecedee;
    position: relative
}




@media only screen and (max-width:800px) {
    .tab-menu__link {
        margin: 0 0 10px
    }
}

@media only screen and (max-width:750px) {
    .tab-menu__link {
        padding: 15px 0
    }
}

@media only screen and (max-width:400px) {
    .tab-menu__link {
        padding-right: 0
    }
}

.tab-menu__link.active
{
    color: #FFFFFF;
    background: #2F4450;
    border: 1px solid #2F4450;
	
	/*background: #000;
    border: 1px solid #000;*/
    text-decoration: none
}



.tab-menu__link:hover {
    color: #2F4450;
    background: #CED6DB;
    border: 1px solid #CED6DB;
	
	/*background: #000;
    border: 1px solid #000;*/
    text-decoration: none
}



.tab-menu__link:before {
    font-weight: 400;
    display: inline-block;
    padding: 0 5px 0 0;
    vertical-align: bottom
}

.tab-menu__link span {
    font-family: "Fira Sans", sans-serif;
	    padding-right: 30px;
    padding-left: 30px;
    font-weight: 500;
    font-size: 16px;
    font-size: .98889rem
}

.tab-content__page {
    display: none
}

.tab-content__page.active {
    display: block
}

.tab-content p+p {
    margin-top: 28px
}

.tab-content .extlink {
    color: #fff;
    text-decoration: none
}

.tab-content .extlink:hover {
    color: #fff;
    text-decoration: underline
}

.tab-content .ar-taxi:before {
    font-size: 52px
}

.tab-content .ar-mtr:before {
    font-size: 68px
}

.route-table {
    position: relative;
    margin: 0 0 80px;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:750px) {
    .route-table {
        margin: 0 0 40px
    }
}

.route-table__flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%
}

@media only screen and (max-width:750px) {
    .route-table__flex {
        flex-wrap: wrap
    }
}

.route-table__title {
    color: #fff;
    background: #1E539B;
    padding: 14px 28px;
    border: 1px solid #ecedee;
    font-weight: 500;
    font-size: 20px;
    font-size: 1.11111rem
}

@media only screen and (max-width:750px) {
    .route-table__title {
        padding: 11px 15px
    }
}

.route-table__title a {
    font-size: 16px;
    float: right;
    margin: 0;
    font-weight: 300
}

@media only screen and (max-width:750px) {
    .route-table__title a {
        float: none;
        display: block;
        margin: 12px 0 0
    }
}

.route-table__title a:hover {
    color: #000;
    text-decoration: none
}

.route-table__icon {
    border: 1px solid #ecedee;
    border-top: none;
    max-width: 224px;
    width: 30%;
    text-align: center
}

@media only screen and (max-width:750px) {
    .route-table__icon {
        width: 100%;
        max-width: 100%
    }
}

.route-table__icon span {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 1px
}

@media only screen and (max-width:750px) {
    .route-table__icon span {
        width: auto
    }
}

.route-table__icon span:before {
    font-size: 62px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    padding: 48px 0 0;
    color: #00539e;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 34%
}

@media only screen and (max-width:750px) {
    .route-table__icon span:before {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        padding: 33px 0
    }
}

.route-table__icon .ee-taxi:before {
    top: 37%;
    font-size: 50px
}

.route-table__content {
    border: 1px solid #ecedee;
    border-top: none;
    vertical-align: top;
    width: 100%
}

.route-table__info-row {
    padding: 28px;
    border-bottom: 1px solid #ecedee;
    line-height: 25px
}

.route-table__info-row.col {
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch
}

.route-table__info-row.col:after,
.route-table__info-row.col:before {
    content: "";
    display: table;
    line-height: 0
}

.route-table__info-row.col:after {
    clear: both
}

@media only screen and (max-width:750px) {
    .route-table__info-row {
        padding: 25px 15px
    }
}

.route-table__info-row:last-child {
    border-bottom: none
}

.route-table__info-row:nth-child(2n) {
    background: #f7f7f7
}

.page-faq .route-table__info-row .question {
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.page-faq .route-table__info-row .question:hover {
    color: #00539e;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out
}

.route-table__info-row .answer {
    display: none
}

.route-table__info-row p+p {
    margin-top: 12px
}

.route-table__info-col {
    float: left;
    width: 50%;
    padding: 28px
}

.route-table__info-col:not(:last-child) {
    border-right: 1px solid #ecedee
}

.route-table__info-col.one-third {
    width: 33.3333%
}

.section-group {
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    padding: 0 0 0 40px;
    margin: 0 0 30px;
    position: relative;
    font-size: 16px;
    font-size: .88889rem
}

.section-group:before {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    position: absolute;
    left: 0;
    top: 11px
}

.section-group.accom {
    color: #a68137
}

.section-group.accom:before {
    background: #a68137
}

.section-group.tickets {
    color: #006564
}

.section-group.tickets:before {
    background: #006564
}

.go-anchor {
    opacity: 0;
    position: absolute;
    top: -154px;
    left: 0
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .go-anchor {
        top: -120px
    }
}

@media only screen and (max-width:750px) {
    .go-anchor {
        top: -72px
    }
}

.cathy-logo {
    max-width: 100%;
    width: 405px
}

.map-wrapper {
    width: 100%;
    height: 450px;
    position: relative
}

#map {
    height: 100%
}

a[href^="http://maps.google.com/maps"] {
    display: none!important
}

a[href^="https://maps.google.com/maps"] {
    display: none!important
}

.gm-style-cc,
.gmnoprint a,
.gmnoprint span {
    display: none
}

.gmnoprint div {
    background: 0 0!important
}

.marker-content .name {
    color: #2a4554;
    font-weight: 500;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 16px;
    font-size: .88889rem
}

.conference-lodge {
    position: relative
}

.conference-lodge__row {
    background: #ebf5f8
}

.conference-lodge__row>.wrapper {
    max-width: 1904px;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch
}

.conference-lodge__row>.wrapper:after,
.conference-lodge__row>.wrapper:before {
    content: "";
    display: table;
    line-height: 0
}

.conference-lodge__row>.wrapper:after {
    clear: both
}

@media only screen and (max-width:1260px) {
    .conference-lodge__row>.wrapper {
        flex-wrap: wrap
    }
}

.conference-lodge__row a {
    color: #00539e
}

@media only screen and (max-width:1260px) {
    .conference-lodge__row .conference-lodge__left {
        order: 1
    }
    .conference-lodge__row .conference-lodge__right {
        order: 2
    }
}

.conference-lodge__row:last-child {
    background: #fdeac8
}

@media only screen and (max-width:1260px) {
    .conference-lodge__row:last-child .conference-lodge__left {
        order: 2
    }
    .conference-lodge__row:last-child .conference-lodge__right {
        order: 1
    }
}

.conference-lodge__left,
.conference-lodge__right {
    float: left;
    width: 50%
}

@media only screen and (max-width:1380px) {
    .conference-lodge__left,
    .conference-lodge__right {
        padding: 0 15px
    }
}

@media only screen and (max-width:1260px) {
    .conference-lodge__left,
    .conference-lodge__right {
        width: 100%
    }
}

.conference-lodge__left {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.conference-lodge__left.arrow {
    padding: 112px 0 0 239px
}

@media only screen and (max-width:1500px) {
    .conference-lodge__left.arrow {
        padding: 112px 50px 0 50px
    }
}

.page-sports-competition .conference-lodge__left.arrow {
    padding: 116px 0 0 166px
}

@media only screen and (max-width:1500px) {
    .page-sports-competition .conference-lodge__left.arrow {
        padding: 7% 15px 5%
    }
}

@media only screen and (min-width:1024px) {
    .conference-lodge__left.arrow:before {
        border-width: 38.5px 0 38.5px 39px;
        border-color: transparent transparent transparent #fdeac8;
        right: -39px
    }
}

@media only screen and (max-width:750px) {
    .conference-lodge__left.arrow {
        padding: 56px 15px 13px!important
    }
    .page-sports-competition .conference-lodge__left.arrow {
        padding: 66px 15px 58px!important
    }
}

.conference-lodge__left a.btn-join-comp {
    background: #a68137
}

.conference-lodge__left a.btn-join-comp:hover {
    background: #80632a
}

.conference-lodge__right {
    background-size: cover;
    background-repeat: no-repeat
}

.conference-lodge__right.arrow {
    padding: 70px 169px 55px 169px
}

@media only screen and (max-width:1500px) {
    .conference-lodge__right.arrow {
        padding: 7% 50px 5%
    }
}

.page-sports-competition .conference-lodge__right.arrow {
    padding: 115px 167px 60px 167px
}

@media only screen and (max-width:1500px) {
    .page-sports-competition .conference-lodge__right.arrow {
        padding: 7% 15px 5%
    }
}

@media only screen and (min-width:1024px) {
    .conference-lodge__right.arrow:before {
        border-width: 38.5px 39px 38.5px 0;
        border-color: transparent #ebf5f8 transparent transparent;
        left: -39px
    }
}

@media only screen and (max-width:750px) {
    .conference-lodge__right.arrow {
        padding: 66px 15px 58px!important
    }
}

.conference-lodge .block-title {
    opacity: 0;
    margin: 158px 0 161px 239px
}

.page-sports-competition .conference-lodge .block-title {
    margin: 135px 0 136px 239px
}

@media only screen and (max-width:1500px) {
    .page-sports-competition .conference-lodge .block-title {
        margin: 0 auto
    }
}

@media only screen and (max-width:1500px) {
    .conference-lodge .block-title {
        margin: 17% auto 16%
    }
}

.conference-lodge p+p {
    margin-top: 28px
}

.conference-lodge .extlink {
    margin: 0;
    font-size: 16px;
    font-size: .88889rem
}

.conference-lodge__contact,
.conference-lodge__desc {
    font-size: 16px;
    font-size: .88889rem
}

.conference-lodge__desc {
    margin: 22px 0;
    max-width: 385px
}

@media only screen and (max-width:1260px) {
    .conference-lodge__desc {
        max-width: none
    }
}

.conference-lodge__contact {
    margin: 38px 0
}

.conference-lodge__contact li {
    margin: 0 0 11px
}

.conference-lodge .ar-link2,
.conference-lodge .ar-mail,
.conference-lodge .ar-phone {
    color: #2a4554
}

.conference-lodge .ar-link2 span,
.conference-lodge .ar-mail span,
.conference-lodge .ar-phone span {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.conference-lodge .ar-link2:before,
.conference-lodge .ar-mail:before,
.conference-lodge .ar-phone:before {
    color: #00539e
}

.conference-lodge .ar-mail:before {
    font-size: 12px;
    font-size: .66667rem
}

.conference-lodge a {
    color: #2a4554;
    text-decoration: none
}

.conference-lodge a:hover {
    color: #00539e
}

.arrow {
    background: 0 0;
    line-height: 1.55;
    position: relative
}

@media only screen and (min-width:1024px) {
    .arrow:before {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media only screen and (max-width:1500px) {
    .arrow {
        padding: 7% 15px 5%
    }
}

.block-title {
    background: url(../img/line.png) rgba(255, 255, 255, .75) no-repeat left bottom;
    width: 475px;
    height: 280px;
    max-width: 100%;
    position: relative
}

@media only screen and (max-width:550px) {
    .block-title {
        width: 188px;
        height: 110px
    }
}

.block-title span {
    display: inline-block;
    position: absolute;
    left: 50px;
    bottom: 44px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    line-height: 1.08889;
    font-size: 45px;
    font-size: 2.5rem
}

@media only screen and (max-width:1260px) {
    .block-title span {
        left: 20px
    }
}

@media only screen and (max-width:750px) {
    .block-title span {
        font-size: 40px;
        font-size: 2.22222rem;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        max-width: 86%
    }
}

@media only screen and (max-width:550px) {
    .block-title span {
        font-size: 17px;
        font-size: .94444rem;
        max-width: 100%
    }
}

a.btn-room-type {
    background: #a68137;
    line-height: 66px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin: 26px 0 0;
    min-width: 206px;
    color: #fff;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

a.btn-room-type:hover {
    background: #80632a;
    color: #fff;
    text-decoration: none
}

.comp__name {
    color: #2a4554;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 40px;
    font-size: 2.22222rem
}

.comp__player {
    color: #00529e;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

.comp__info {
    margin: 5px 0 0;
    color: #2a4554;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

@media only screen and (max-width:750px) {
    .comp__place,
    .comp__time {
        display: block
    }
}

.comp__place {
    margin: 0 22px 0 0
}

.comp__place:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    padding: 0 5px 0 0;
    color: #00539e
}

.comp__time:before {
    content: "";
    display: inline-block;
    vertical-align: text-top;
    width: 16px;
    height: 16px;
    background: url(../img/misc/clock.png);
    margin: 0 5px 0 0
}

@media only screen and (max-width:750px) {
    .comp__time:before {
        margin: 0 2px 0 0
    }
}

.comp__desc {
    margin: 36px 0 54px;
    max-width: 615px;
    font-size: 18px;
    font-size: 1rem
}

.comp__link.joined a:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    padding: 0 3px 0 0
}

a.btn-join-comp {
    display: inline-block;
    line-height: 65px;
    min-width: 206px;
    padding: 0 10px;
    text-align: center;
    color: #fff;
    background: #00539e;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-size: .88889rem
}

a.btn-join-comp:hover {
    color: #fff;
    background: #00386b;
    text-decoration: none
}

section.room-type {
    position: relative;
    padding: 105px 0 102px
}

@media only screen and (max-width:750px) {
    section.room-type {
        padding: 54px 0 50px
    }
}

section.room-type .room-type {
    margin: 50px 0 0
}

@media only screen and (max-width:750px) {
    section.room-type .room-type {
        margin: 34px 0 0
    }
}

section.room-type .room-type>.form-row {
    margin-left: -10px;
    width: calc(100% + 20px)
}

#room-type {
    font-size: 0;
    position: absolute;
    left: 0;
    top: -190px
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    #room-type {
        top: -165px
    }
}

@media only screen and (max-width:750px) {
    #room-type {
        top: -100px
    }
}

.toggle-card.rainbow {
    cursor: auto;
    font-size: 16px;
    font-size: .88889rem
}

.toggle-card.rainbow .toggle-card__icon:before {
    font-size: 19px
}

.toggle-card.rainbow .toggle-card__desc {
    margin: 21px 0 0
}

.toggle-card.rainbow .toggle-card__title {
    padding: 11px 0 10px
}

.toggle-card.rainbow .toggle-card__content {
    background: url(../img/line.png) left bottom/100% 5px no-repeat;
    border-bottom: none
}

.room-type__notes {
    margin: 50px 0 0
}

@media only screen and (max-width:750px) {
    .room-type__notes {
        margin: 28px 0 0
    }
}

.room-type__note {
    font-size: 18px;
    font-size: 1rem
}

.campus-map {
    /*background: #ebf5f8;
    padding: 130px 0*/
	padding-bottom: 70px;
}

@media only screen and (max-width:1260px) {
    .campus-map {
       padding-bottom: 70px;
    }
}

.campus-map>.wrapper {
   /* padding: 0*/
}

.campus-map__content:after,
.campus-map__content:before {
    content: "";
    display: table;
    line-height: 0
}

.campus-map__content:after {
    clear: both
}

.campus-map__left,
.campus-map__right {
    float: left;
    width: 50%
}

@media only screen and (max-width:950px) {
    .campus-map__left,
    .campus-map__right {
        width: 100%
    }
}

.campus-map__left {
    background: url(../img/transport/campus.jpg) left top/cover no-repeat
}

.campus-map__right {
    padding: 50px 0 0
}

@media only screen and (max-width:1260px) {
    .campus-map__right {
        padding: 0
    }
}

.campus-map .block-title {
    margin: 0 0 170px 4%;
    width: 486px;
    height: 246px;
    max-width: 86%
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .campus-map .block-title {
        margin: 0 0 210px 4%
    }
}

@media only screen and (max-width:750px) {
    .campus-map .block-title {
        width: 264px;
        height: 130px;
        margin: 0 0 112px 4%
    }
}

@media only screen and (max-width:750px) {
    .campus-map .block-title span {
        left: 28px;
        bottom: 25px;
        font-size: 24px;
        font-size: 1.33333rem
    }
}

.faq-table {
    padding: 0 0 70px;
}

@media only screen and (max-width:1260px) {
    .faq-table {
        padding: 0 0 50px;
    }
}

.faq-table a {
    /*color: #00539e;*/
    text-decoration: none
}

.faq-table a:hover {
    text-decoration: underline
}

.route-table__title {
    cursor: pointer
}

.page-photos-list .popup-window>.wrapper {
    max-width: 1150px
}

.page-photos-list .popup-window__panel {
    min-height: 500px;
    background: url(../img/line.png) left bottom/100% 5px no-repeat #fff
}

.page-photos-list .popup-window__photo {
    width: 915px;
	text-align:center;
    margin: 0 auto;
    max-width: 100%;
    padding: 80px 0 70px
}

@media only screen and (max-width:1260px) {
    .page-photos-list .popup-window__photo {
        padding: 40px 15px 35px
    }
}

.popup-window__photo-vdo {
    position: relative;
    padding-top: 56.25%;
    background: #CCC;
}

.popup-window__photo-vdo iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.page-photos-list .popup-window__photo-content {
    padding: 25px 0 0
}

.albums {
    margin: 0 0 80px;
    line-height: 25px;
    font-size: 18px;
    font-size: 1rem
}

@media only screen and (max-width:1000px) {
    .albums {
        margin: 0 0 80px;
    }   
}

.albums__msg {
    font-size: 16px;
    font-size: .88889rem
}

.albums__content {
    font-size: 0;
    line-height: 0;
    margin-left: -9px;
    padding: 50px 0 0;
    width: calc(100% + 18px);
    min-height: 265px
}

@media only screen and (max-width:1260px) {
    .albums__content {
        text-align: center;
        margin-left: 0;
        width: 100%;
        padding: 65px 0 0
    }
}

.albums__one {
    display: inline-block;
    vertical-align: top;
    width: 447px;
    height: 297px;
    margin: 0 9px 140px;
    position: relative;
    cursor: pointer
}

@media only screen and (min-width:1024px) {
    .albums__one {
        max-width: calc(33.3333% - 18px)
    }
}

@media only screen and (max-width:1260px) {
    .albums__one {
        max-width: 100%
    }
}

@media only screen and (max-width:750px) {
    .albums__one {
        margin: 0 0 90px
    }
}

.albums__one:before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -7px;
    width: 430px;
    height: 100%;
    background: #86949d;
    z-index: -1;
    max-width: 96%;
    background: url(../img/line3.png) left top/100% 8px no-repeat rgba(255, 255, 255, .75);
}

.albums__title {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -70px;
    font-weight: 500;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 28px;
    font-size: 1.55556rem;
    line-height: 32px;
    color: #223d4c;
    width: 100%;
    max-width: 96%;
    height: 110px;
    padding: 24px 40px;
    text-align: left;
    background: url(../img/line3.png) left bottom/100% 7px no-repeat rgba(250, 243, 231);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.albums__one:hover .albums__title {
    background: url(../img/line3.png) left bottom/100% 7px no-repeat rgba(133 74 0);
}


.albums__one:hover .albums__title a {
    color: #FFF;
}
.photos {
    padding: 0 0 86px
}

@media only screen and (max-width:750px) {
    .photos {
        padding: 0 0 40px;
    }
}

.photos__title {
    color: #2a4554;
    border-bottom: 1px solid #dcdedf;
    line-height: 1.25;
    padding: 0 0 12px
}

.photos__list {
    position: relative;
    padding: 70px 0 0;
    min-height: 200px
}

.photos__list:after,
.photos__list:before {
    content: "";
    display: table;
    line-height: 0
}

.photos__list:after {
    clear: both
}

@media only screen and (max-width:1260px) {
    .photos__list {
        margin-right: 0
    }
}

@media only screen and (max-width:750px) {
    .photos__list {
        padding: 33px 0 0
    }
}

.photos__name {
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 40px;
    font-size: 2.22222rem
}

.photos__school {
    padding: 4px 0;
    font-size: 16px;
    font-size: .88889rem
}

.photos__school:before {
    content: "";
    font-family: "HKUST Alumni Reunion";
    color: #00539e;
    padding: 0 2px 0 0
}

.photo-wrapper {
    float: left;
    margin: 0 20px 20px 0;
    width: 214px;
    height: 214px
}

@media only screen and (max-width:1260px) {
    .photo-wrapper {
        max-width: unset;
        max-height: unset
    }
}

.btn-photo {
    position: fixed;
    top: 50%;
    z-index: 1;
    background: grey-2;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    outline: 0;
    border: none;
    appearance: none
}

@media only screen and (max-width:750px) {
    .btn-photo {
        top: 35%
    }
}

.btn-photo.btn-next:before,
.btn-photo.btn-prev:before {
    display: block;
    position: absolute;
    top: 1px;
    left: -1px;
    font-family: slick;
    font-size: 38px;
    opacity: .7;
    color: #000;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btn-photo.btn-next:hover:before,
.btn-photo.btn-prev:hover:before {
    opacity: 1
}

.btn-photo.btn-prev {
    left: calc((100vw - 1150px)/ 2 - 18px)
}

@media only screen and (max-width:1400) {
    .btn-photo.btn-prev {
        left: calc((100vw - 1150px)/ 2 - 8px)
    }
}

@media only screen and (max-width:1380px) {
    .btn-photo.btn-prev {
        left: calc((100vw - 1150px)/ 2)
    }
}

@media only screen and (max-width:1150px) {
    .btn-photo.btn-prev {
        left: 2px
    }
}

.btn-photo.btn-prev:before {
    content: "←";
    top: 2px;
    left: -2px
}

.btn-photo.btn-next {
    right: calc((100vw - 1150px)/ 2 - 18px)
}

@media only screen and (max-width:1400) {
    .btn-photo.btn-next {
        right: calc((100vw - 1150px)/ 2 - 8px)
    }
}

@media only screen and (max-width:1380px) {
    .btn-photo.btn-next {
        right: calc((100vw - 1150px)/ 2)
    }
}

@media only screen and (max-width:1150px) {
    .btn-photo.btn-next {
        right: 2px
    }
}

.btn-photo.btn-next:before {
    content: "→"
}

.btn-add-more {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    border: none
}

.form-field.add-more {
    margin: 5px 0
}

.notify-header {
    background: pink;
    color: #444;
    font-size: 15px;
    font-size: .83333rem;
    height: 0;
    opacity: 0;
    transform: translateY(-33px);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (max-width:1260px) {
    .notify-header {
        display: none
    }
}

.notify-header.active {
    height: 33px;
    opacity: 1;
    transform: translateY(0);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.notify-header__msg {
    padding: 5px 0
}

@media only screen and (max-width:1380px) {
    .notify-header__msg {
        padding: 3px 15px
    }
}

.notify-header a {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    color: #444
}

.notify-header a:hover {
    color: #00539e
}

#back-to-top {
     display: none;
	 position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #00539e;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity .2s ease-out;
    opacity: 0;
    font-size: 24px
}

#back-to-top:hover {
    background: #00498b
}

#back-to-top.show {
    opacity: 1
}

.is {
    text-align: center;
    padding: 70px 58px
}

.is__subtitle,
.is__title {
    line-height: 1.5
}

.is__subtitle {
    color: grey;
    font-size: 25px
}

.is__title {
    color: #2a4554;
    font-size: 35px;
    font-weight: 500;
    text-decoration: underline;
    margin: 0 0 35px
}

.is__content {
    text-align: left
}

.is__section {
    margin: 0 0 35px
}

.is__section a {
    color: #444;
    font-weight: 500
}

.is__section a:hover {
    color: #00539e
}

.is__section-title {
    color: grey;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 10px
}

.is__section-content {
    color: #2a4554;
    line-height: 1.4
}

.is ol {
    padding: 0 0 0 28px
}

.is ol.roman {
    list-style: upper-roman
}

.is ol.number {
    list-style: decimal
}

.is ol li {
    line-height: 1.4
}

.is .detail-item {
    padding: 0 0 0 28px;
    line-height: 1.4
}

.article {
    margin: 50px 0 160px;
    line-height: 25px;
    font-size: 18px;
    font-size: 1rem
}

@media only screen and (max-width:1000px) {
    .article {
        margin: 30px 0 80px;
    }   
}

.article ol {
    list-style: decimal;
    margin-left: 20px
}

.article ul {
    list-style: disc;
    margin-left: 20px
}

.article em {
    font-style: italic
}

.article .title {
    color: #2a4554;
    margin: 0 0 30px;
    line-height: 1.1;
    font-weight: 500;
    font-size: 40px;
    font-size: 2.22222rem
}

.article p+p {
    margin-top: 28px
}

.page-text .article {
    margin: 110px 0 93px
}

.page-text .table-row {
    font-size: 18px;
    font-size: 1rem
}

.page-highlight .article>.wrapper {
    display: flex;
    flex-wrap: wrap
}

.highlight-container {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    border-right: 1px solid #ecedee;
    position: relative;
    margin: 0 -3px 83px
}

@media only screen and (min-width:1024px) {
    .highlight-container:nth-child(4n+4) {
        border-right: none
    }
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .highlight-container {
        width: 50%
    }
    .highlight-container:nth-child(2n+2) {
        border-right: none
    }
}

@media only screen and (max-width:750px) {
    .highlight-container {
        width: 100%;
        border-right: none
    }
}

.highlight-container p {
    margin: 12px 13px
}

.highlight-left {
    margin: 149px 0 0;
    padding: 0 16px
}

@media only screen and (max-width:1260px) {
    .highlight-left {
        margin: 180px 0 0
    }
}

.highlight-right {
    position: absolute;
    top: 0;
    right: 17px;
    max-width: 158px
}

@media only screen and (max-width:1380px) {
    .highlight-right {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.highlight-right img {
    text-align: right;
    border-radius: 50%;
    max-width: 158px
}

.sp-list {
    text-align: center;
    padding: 100px 0 150px
}

@media only screen and (max-width:750px) {
    .sp-list {
        padding: 50px 0 70px
    }
}

.sp-list__title {
    font-size: 35px;
    line-height: 40px;
    font-weight: 500;
    margin: 105px 0 55px
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .sp-list__title {
        font-size: 35px;
        line-height: 40px;
        margin: 50px 0
    }
}

@media only screen and (max-width:750px) {
    .sp-list__title {
        font-size: 28px;
        line-height: 32px;
        margin: 50px 0
    }
}

.sp-list__thankyou {
    font-size: 40px;
    line-height: 44px;
    margin: 0 0 35px
}

@media only screen and (max-width:1260px) and (min-width:751px) {
    .sp-list__thankyou {
        font-size: 28px;
        line-height: 32px
    }
}

@media only screen and (max-width:750px) {
    .sp-list__thankyou {
        font-size: 22px;
        line-height: 26px
    }
}

.sponsor_container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 0 20px
}

@media only screen and (max-width:1260px) {
    .sponsor_container {
        padding: 0 20px 10px
    }
}

@media only screen and (max-width:750px) {
    .sponsor_container.diamond>* {
        width: 90%
    }
}

@media only screen and (max-width:750px) {
    .sponsor_container.gold>* {
        width: 77%
    }
}

@media only screen and (max-width:750px) {
    .sponsor_container.silver>* {
        width: 48%
    }
}

.two_col {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1%;
    width: 47%
}

.two_col:nth-child(n+3) {
    margin-top: 50px
}

@media only screen and (max-width:750px) {
    .two_col {
        width: 100%;
        padding-bottom: 50px
    }
    .two_col:nth-child(n+3) {
        margin-top: 0
    }
}

.appendix-collection {
    padding: 70px 58px
}

.apx__title {
    padding: 0 0 30px;
    line-height: 1.1;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: 500;
    font-size: 40px;
    font-size: 2.22222rem
}

@media only screen and (max-width:750px) {
    .apx__title {
        padding: 0 0 30px
    }
}

.apx__content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap
}

.apx__content:after,
.apx__content:before {
    content: "";
    display: table;
    line-height: 0
}

.apx__content:after {
    clear: both
}

.apx__brand {
    float: left;
    width: 33.3333%;
    text-align: center;
    padding: 0 1% 3%;
    margin: 0 0 20px
}

@media only screen and (max-width:1260px) {
    .apx__brand {
        width: 50%;
        padding: 0 2% 3%
    }
}

@media only screen and (max-width:550px) {
    .apx__brand {
        width: 100%;
        padding: 0 0 3%
    }
}

#__bs_notify__ {
    top: auto!important;
    right: auto!important;
    border-bottom-left-radius: 0!important;
    font-size: 14px!important;
    padding: 5px 25px!important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}


.pg1 {
	    padding: 72px 0 34px;
}


@media only screen and (max-width:750px) {
	.pg1 {
		padding: 102px 0 24px;
	}
}

@media only screen and (max-width:400px) {
	.pg1 {
		padding: 80px 0 24px;
	}
}


.print1 {
	display:none;
}

@media print {
	
	body{
	  width: 100%;
	  margin: 0;
	 /* float: none;
	  line-height: 1.5;
	  font-size: 12pt;*/
	}

	.print1 {
		display: block !important;
	}



	.alumni-info {
		display:none;
	}
	
	.idx-desc{
		page-break-before : always;
	}
	
	.print_title {
		padding-top:150px;
	}

	.program-slider {
			display:none;
	}
}