@charset "UTF-8";
.r2,
.r2c2 {
    grid-row: auto/span 2
}

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

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

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

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

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

html {
    font-size: 62.5%
}

body {
    font-size: 16px;
    font-size: 1.6rem;
    color: #2e323b;
    line-height: 1.6
}

h1 {
    font-size: 50px;
    font-size: 5rem;
    margin-bottom: 30px;
    color: #ef7c00
}

h2 {
    font-size: 32px;
    font-size: 3.2rem
}

h3 {
    font-size: 30px;
    font-size: 3rem
}

h4 {
    font-size: 28px;
    font-size: 2.8rem
}

h5 {
    font-size: 26px;
    font-size: 2.6rem
}

h6 {
    font-size: 24px;
    font-size: 2.4rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: OpenSans-med, sans-serif
}

.bold {
    font-family: OpenSans-Bold!important
}

#back-to-top,
.btn,
.transition,
:after,
:before,
a {
    transition: all .3s ease-out
}

main {
    font-family: OpenSans-reg!important
}

main ul {
    margin-left: -20px
}

main ul li {
    padding-bottom: 10px
}

main ul li:last-child {
    padding-bottom: 0
}

.sf_cols {
    margin-bottom: 20px!important
}

.btn {
    font-family: OpenSans-med, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 16px;
    font-size: 1.6rem;
    min-width: 164px;
    border-radius: 30px;
    padding: 10px 30px
}

.btn-primary:hover {
    background: #d66f00;
    border-color: #d66f00
}

.navbar,
.nus-quicklinks {
    font-size: 14px;
    font-size: 1.4rem
}

main {
    font-size: 16px;
    font-size: 1.6rem
}

main h1 {
    font-size: 35px;
    color: #000
}

main p {
    color: #555
}

main a {
    color: #d1654b
}


.main-banner .slider-caption {
  font-family: OpenSans-semibold;
  text-shadow: none;
  background-image: linear-gradient(to right, #d2664a, #b7396a);
  opacity: .9;
  position: relative;
  padding: 1em;
  text-align: left;
  border-bottom: 6px solid #972f60
}
.main-banner .slider-caption h1 {
  font-size: 30px;
  color: #fff;
  margin-bottom: 15px;
  margin-top: 5px
}
.main-banner .slider-caption p {
  color: #fff;
  padding-bottom: 20px;
}
.main-banner .slider-caption .btn {
  color: #fff;
  border: 1px solid #fff;
  font-size: 14px
}
.main-banner .slider-caption .btn:hover {
  background: #fff;
  color: #a83e70
}
.main-banner .img-placeholder {
  height: auto;
  overflow: hidden;
  /* background-image: linear-gradient(to right, #d2664a, #b7396a); */
}
@media (min-width: 768px) {
  .main-banner .slider-text-image .slider-caption {
    position: absolute;
    top: 5%;
    left: 5%;
    bottom: 5%;
    width: 45%;
    z-index: 9999!important;
  }
  .main-banner .slider-caption h1 {
    font-size: 40px;
  }
  .main-banner .slider-text-image .img-placeholder {
    min-height: 450px;
  }
}
@media (min-width: 992px) {
  .main-banner .slider-caption {
    height: auto;
    padding: 3em;
  }
  .main-banner .slider-text-only .slider-caption {
    padding-bottom: 5rem;
  }
  .main-banner .slider-caption h1 {
    /* font-size: 55px; */
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .main-banner .slider-text-image .img-placeholder {
    /* min-height: 550px; */
  }
}

.main-banner .bx-wrapper {
    position: relative;
    padding: 0;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    background: #f4f4f4
}

.main-banner .bx-wrapper img {
    width: 100%;
    display: block
}

.main-banner .bxslider {
    margin: 0;
    padding: 0;
    background: #f4f4f4
}

.main-banner ul.bxslider {
    list-style: none
}

.main-banner .bx-viewport {
    -webkit-transform: translatez(0);
    border: none
}

.bx-wrapper {
    border: none
}

.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: 5%;
    width: 45%;
    left: 5%;
    text-align: center
}

.bx-wrapper .bx-pager {
    position: absolute;
    bottom: 0;
    left: 1.5em;
    text-align: center;
    padding-bottom: 1.5em;
}
@media (min-width: 992px) {
  .bx-wrapper .bx-pager {
    left: 5%;
    padding-bottom: 3em;
  }
}

@media only screen and (max-width:786px) {
    .bx-wrapper .bx-controls-auto,
    .bx-wrapper .bx-pager {
        bottom: 0;
        width: 100%;
        text-align: left!important;
        left: 0!important
    }
}

.bx-wrapper .bx-pager,
.link,
.people .img-overlay p,
.ql .bxslider3 .item,
.sub-banner,
.tab_container .tab-content h3,
.tab_container label {
    text-align: center
}

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(assets/images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000
}

.bx-wrapper .bx-pager {
    font-size: .85em;
    font-family: Arial;
    font-weight: 700;
    color: #fff;
}

@media only screen and (max-width:786px) {
    .bx-wrapper .bx-pager {
        padding: 1em
    }
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: 0 0;
    text-indent: -9999px;
    border: 1px solid #fff;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #fff
}

.bx-wrapper .bx-controls-auto .bx-controls-auto-item,
.bx-wrapper .bx-pager-item {
    display: inline-block;
    vertical-align: bottom
}

.gradient-bg p,
.grey-bg .item,
.interest-bg p,
.link .middle,
.overlay {
    vertical-align: middle
}

.bx-wrapper .bx-pager-item {
    font-size: 0;
    line-height: 0
}

.bx-wrapper .bx-prev {
    left: 10px
}

.bx-wrapper .bx-prev:focus,
.bx-wrapper .bx-prev:hover {
    background-position: 0 0
}

.bx-wrapper .bx-next {
    right: 10px
}

.bx-wrapper .bx-next:focus,
.bx-wrapper .bx-next:hover {
    background-position: -43px 0
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 0;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    z-index: 9999
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none
}

.grey-bg {
    background: #f4f4f4;
    padding: 20px 0
}

.grey-bg .bx-wrapper {
    margin: 40px 0
}

.grey-bg .bx-controls-direction a {
    top: 0;
    margin-top: 5px
}

.grey-bg .bx-wrapper .bx-prev {
    right: 45px;
    left: auto
}

.grey-bg .bx-wrapper .bx-next,
.grey-bg .bx-wrapper .bx-prev {
    color: #d591a3;
    text-decoration: none
}

.grey-bg .bx-wrapper .bx-next:hover,
.grey-bg .bx-wrapper .bx-prev:hover {
    color: #bf4e6d
}

.grey-bg .bx-wrapper .bx-next:before {
    font-family: FontAwesome;
    content: "\f054";
    font-size: 40px
}

.grey-bg .bx-wrapper .bx-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    font-size: 40px
}

.grey-bg .bxslider2 {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr))
}

.grey-bg .item {
    font-family: OpenSans-semibold;
    background: #fff;
    padding: 25px;
    border-bottom: 5px solid #a83e70;
    min-height: 100%;
    box-sizing: border-box
}

@media only screen and (max-width:991px) {
    .grey-bg .item {
        height: auto!important;
        margin-bottom: 30px
    }
}

.grey-bg .item .date {
    color: #ef7c00;
    font-size: 16px;
    margin-bottom: 15px
}

.grey-bg .item a {
    font-size: 21px;
    color: #003062;
    word-wrap: break-word!important
}

.ql .bxslider3 .item {
    padding: 0 40px
}

.ql .bxslider3 i {
    font-size: 50px;
    color: #d1654b
}

.ql .bxslider3 .title {
    color: #000;
    font-size: 22px;
    font-family: OpenSans-semibold;
    margin: 10px 0;
    text-decoration: none!important
}

.ql .bxslider3 a {
    font-size: 16px;
    color: #6c6c6c
}

.ql .bxslider3 .bx-wrapper .bx-controls-direction a {
    top: 50%
}

.ql .bx-wrapper {
    padding: 50px 0
}

.ql .bx-controls-direction a {
    top: 45%
}

.ql .bx-wrapper .bx-prev {
    left: 0;
    left: auto
}

.ql .bx-wrapper .bx-next,
.ql .bx-wrapper .bx-prev {
    color: #d591a3;
    text-decoration: none
}

.ql .bx-wrapper .bx-next:hover,
.ql .bx-wrapper .bx-prev:hover {
    color: #bf4e6d
}

.ql .bx-wrapper .bx-next:before {
    font-family: FontAwesome;
    content: "\f054";
    font-size: 40px;
    margin-left: 25px
}

@media only screen and (max-width:991px) {
    .ql .bx-wrapper .bx-next:before {
        margin-left: 0
    }
}

.ql .bx-wrapper .bx-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    font-size: 40px;
    margin-left: -25px
}

.link .title,
.link2 .title,
.link3 .title,
.people .img-overlay p,
.tab_container {
    font-family: OpenSans-semibold
}

.bottom-opacity {
    display: none;
    position: absolute;
    left: 0;
    right: 55%;
    top: 50%;
    bottom: 0;
    background: linear-gradient(to top, #fff, rgba(255, 0, 0, 0))
}

@media only screen and (max-width:991px) {
    .ql .bx-wrapper .bx-prev:before {
        margin-left: 0
    }
    .bottom-opacity {
        top: 70%
    }
}

.tab_container {
    width: 100%;
    margin: 0 auto;
    position: relative
}

.tab_container a {
    color: #fff
}

.tab_container input,
.tab_container section {
    clear: both;
    display: none
}

.tab_container label {
    font-weight: 700;
    font-size: 26px;
    display: block;
    float: left;
    width: 33.33%;
    padding: 1em;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    background: #d36d54;
    margin-bottom: 0;
    border-right: 1px solid #cecece
}

#fixed-menu a.icon:hover,
.grid-item:hover,
.grid-item:hover a {
    text-decoration: none!important
}

.tab_container label:first-child {
    border-right: none!important
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
    display: table;
    color: #fff;
    background-repeat: none!important;
    background-position: center center!important;
    background-size: cover!important;
    height: 500px;
    width: 100%
}

@media only screen and (max-width:786px) {
    #tab1:checked~#content1,
    #tab2:checked~#content2,
    #tab3:checked~#content3 {
        height: auto
    }
}

.overlay {
    background-image: linear-gradient(#1b150f, rgba(27, 21, 15, .5), transparent);
    padding: 50px;
    display: table-cell;
    width: 100%!important
}

.tab_container .tab-content {
    font-size: 24px
}

.tab_container .tab-content h3,
.tab_container .tab-content p {
    -webkit-animation: fadeInScale .7s ease-in-out;
    -moz-animation: fadeInScale .7s ease-in-out;
    animation: fadeInScale .7s ease-in-out
}

.tab_container [id^=tab]:checked+label {
    background: #1b150f;
    box-shadow: inset 0 7px #d36d54
}

.tab_container [id^=tab]:checked+label .fa {
    color: #d36d54
}

label .fa {
    font-size: 28px;
    margin: 0 .4em 0 0
}

@media only screen and (max-width:930px) {
    label .fa,
    label span {
        font-size: 14px
    }
}

@media only screen and (max-width:768px) {
    label span {
        display: none
    }
    label .fa {
        font-size: 16px
    }
    .tab_container {
        width: 98%
    }
}

.sub-banner {
    background-image: linear-gradient(to right, #d2664a, #b7396a);
    color: #fff;
    padding: 20px;
    height: 500px!important;
    opacity: .9;
    display: table;
    width: 100%
}

.sub-banner p {
    color: #fff
}

.sub-banner .container {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.sub-banner ul li {
    padding: 5px;
    display: inline-block
}

.sub-banner .btn {
    border: 1px solid #fff;
    font-size: 16px
}

.sub-banner .btn:hover {
    background: #fff;
    color: #a83e70!important
}

.sub-banner h1 {
    font-size: 40px;
    color: #fff
}

@media only screen and (max-width:768px) {
    .sub-banner {
        height: auto!important
    }
    .sub-banner h1 {
        font-size: 30px
    }
}

.sub-banner ul li a {
    color: #fff
}

.interest-bg {
    background: rgba(22, 22, 22, .5);
    opacity: .9;
    font-size: 38px;
    padding: 50px!important;
    color: #fff;
    display: table;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%
}

.interest-bg p {
    color: #fff!important;
    display: table-cell
}

@media only screen and (max-width:768px) {
    .interest-bg {
        height: auto;
        padding: 0;
        position: relative
    }
}

.gradient-bg {
    background-image: linear-gradient(to right, #d2664a, #b7396a);
    opacity: .9;
    font-size: 40px;
    padding: 20px;
    color: #fff;
    height: 100%;
    display: table
}

.gradient-bg p {
    display: table-cell;
    color: #fff
}

.people-section {
    margin: 50px 0
}

.people {
    border-radius: 100%;
    overflow: hidden;
    width: 235px;
    height: 235px
}

.people img {
    width: 100%;
    height: 100%
}

.people .img-overlay {
    position: absolute;
    background: rgba(0, 0, 0, .4);
    top: 0;
    bottom: 0;
    left: 15px;
    right: 0;
    border-radius: 100%;
    width: 235px;
    height: 235px
}

@media only screen and (max-width:991px) {
    .people {
        margin: 0 auto
    }
    .people .img-overlay {
        left: 0;
        margin: 0 auto
    }
}

.people .img-overlay:hover {
    background: 0 0;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .5)
}

.link2:hover,
.link3:hover {
    background: #3d3d3d
}

.people .img-overlay p {
    position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 28px;
    top: 50%;
    transform: translateY(-50%)
}

.link2:hover,
.link2:hover a,
.link3:hover,
.link3:hover a {
    color: #fff!important
}

.space {
    margin: 30px 0
}

.link {
    padding: 10px;
    height: 274px;
    display: table;
    width: 100%
}

.link p {
    margin-bottom: 15px;
    font-size: 16px
}

.link .middle {
    display: table-cell
}

.link .title {
    font-size: 19px
}

@media only screen and (max-width:991px) {
    .nus-components {
        margin: 40px 3%!important;
        width: 94%!important
    }
}

.link2,
.link3 {
    padding: 50px!important;
    text-align: left;
    width: 100%
}

.nus-components div[class*=col-] {
    margin-bottom: 0
}

.nus-components h2 {
    margin: 25px 0!important
}

.link2 {
    height: 400px;
    margin-bottom: 0
}

@media only screen and (max-width:768px) {
    .link2 {
        height: auto
    }
}

.link2 p {
    margin-bottom: 15px;
    font-size: 16px
}

.link2 .title {
    font-size: 19px
}

.link3 {
    height: 500px;
    margin-bottom: 0
}

.link3 p {
    margin-bottom: 15px;
    font-size: 16px
}

.link3 .title {
    font-size: 19px
}

.content-section table tr:first-child {
    background: #d36d54;
    color: #fff;
    padding: 15px;
    font-weight: 400;
    border: 1px solid grey
}

.content-section table td {
    padding: 15px;
    width: auto;
    border: 1px solid grey;
    vertical-align: top
}

.grid-item,
.grid__item,
.grid__item .middle {
    vertical-align: middle
}

.grid-default {
    display: flex;
    flex-wrap: wrap;
}

.grid-default .grid-item {
    width:25%;
    border: 1px solid #a83e70;
}

@media only screen and (max-width:768px) {
    .grid-default .grid-item {
    width:100%;
    }
}

.grid-default .grid-item:hover {
    background-color: #3d3d3d;
    color: #fff;
    text-decoration: none!important
}

.grid-default .grid-item:hover p {
    color: #fff
}

.grid-default .grid-item:hover a {
    text-decoration: none!important;
    color: #fff
}

/*.grid-container {
    display: grid;
    grid-gap: 1px;
    padding: 1px;
    background-color: #a83e70;
    flex-wrap: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr))
}*/

.grid-container {
    display: grid;
    display: -ms-grid;
    grid-auto-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
    grid-template-areas: "hdr hdr cnt1 cnt2" "hdr hdr cnt3 cnt4" "cnt5 cnt6 cnt7 cnt8" "cnt9 cnt10 cnt11 cnt12"
}

@media only screen and (max-width: 768px) {
    .grid-container {
    display: block!important;
    }
}

.grid-container .grid-item {
    -ms-grid-column-span: auto!important;
    width: 100%!important;
    -ms-grid-row: auto!important;
    -ms-grid-row-span: auto!important;
    -ms-grid-column: 1!important;
    -ms-grid-column-span: auto!important;
    border: 1px solid #a83e70;
}

.grid-container .grid-item.r2c2 {
    grid-area: hdr;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    width: 100%!important;
    height: 100%!important
}

.grid-container .grid-item:nth-child(2) {
    grid-area: cnt1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(3) {
    grid-area: cnt2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(4) {
    grid-area: cnt3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(5) {
    grid-area: cnt4;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(6) {
    grid-area: cnt5;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(7) {
    grid-area: cnt6;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(8) {
    grid-area: cnt7;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(9) {
    grid-area: cnt8;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(6) {
    grid-area: cnt9;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(7) {
    grid-area: cnt10;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(8) {
    grid-area: cnt11;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1
}

.grid-container .grid-item:nth-child(9) {
    grid-area: cnt12;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1
}

.grid-container2 {
    display: flex;
    padding: 1px;
    flex-wrap: wrap
}

.grid-container2 .grid-item {
    width: 50%;
    border: 1px solid #b6b6b6
}

@media only screen and (max-width:768px) {
    .link3 {
        height: auto
    }
    div.tscroll {
        min-width: 100%;
        overflow-x: scroll;
        white-space: nowrap
    }
    /*.grid-container {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
    }
    .grid-container2 .grid-item {
        width: 100%
    }*/
}

.grid-item {
    background-color: #fff;
    text-align: center;
    box-sizing: border-box
}

.grid-item:hover {
    background-color: #3d3d3d;
    color: #fff
}

.grid-item:hover a,
.grid-item:hover p {
    color: #fff
}

.r2c2 {
    grid-column: auto/span 2
}

.r3 {
    grid-row: auto/span 3
}

.r4 {
    grid-row: auto/span 4
}

.default-ht {
    height: 550px
}

@media only screen and (max-width:768px) {
    .r2c2 {
        grid-column: auto/span 1;
        grid-row: 1/span 1
    }
    .r1,
    .r2,
    .r3,
    .r4 {
        grid-row: auto/span 1
    }
    .default-ht {
        height: auto
    }
}

.c2,
.c3,
.c4 {
    grid-row: auto
}

.c2 {
    grid-column: auto/span 2
}

.c3 {
    grid-column: auto/span 3
}

.c4 {
    grid-column: auto/span 4
}

@media only screen and (max-width:768px) {
    .col2 {
        grid-column: auto/span 1
    }
}

.ql1 {
    grid-column: 1;
    grid-row: 1/span 2
}

@media only screen and (max-width:768px) {
    .ql1 {
        grid-column: 1;
        grid-row: 1/span 1
    }
}

.ql2 {
    grid-column: 2;
    grid-row: 1/span 2
}

.expand {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: all 2s 1 forwards;
    animation: zoom ease-in-out 2s 1 forwards;
    -webkit-animation: zoom ease-in-out 2s 1 forwards
}

.whynus-banner {
    background-image: url(../../assets/images/whynus-banner.jpg)
}

.undergraduate-banner {
    background-image: url(../../assets/images/undergraduate-banner.jpg)
}

.scholarships-banner {
    background-image: url(../../assets/images/scholarships-banner.jpg)
}

.financial-banner {
    background-image: url(../../assets/images/financial-banner.jpg)
}

.contact-banner {
    background-image: url(../../assets/images/contact-banner.jpg)
}

.news-banner {
    background-image: url(../../assets/images/news-banner.jpg)
}

.publications-banner {
    background-image: url(../../assets/images/publication-banner.jpg)
}

.apply-banner {
    background-image: url(../../assets/images/apply.jpg)
}

.apply-sub-banner {
    background-image: url(../../assets/images/apply-banner.jpg)
}

.chat-banner {
    background-image: url(../../assets/images/chat-banner.jpg)
}

.img-pull-left {
    width: 50%;
    float: left;
    margin: 0 20px 20px 0
}

.interest-banner {
    background-image: url(../../assets/images/interest.jpg)
}

@keyframes zoom {
    0% {
        background-size: 100%
    }
    100% {
        background-size: 120%
    }
}

.fixed-tab {
    display: block;
    position: absolute;
    right: 50%;
    z-index: 999!important;
}

#fixed-menu,
.modal {
    z-index: 9999!important
}

#fixed-menu {
    width: 100%;
    border-bottom: 3px solid #d36d54
}

#fixed-menu h4 {
    font-size: 22px
}

#fixed-menu p {
    font-size: 16px;
    margin-bottom: 10px;
    color: #fff
}

#fixed-menu a {
    color: #fff
}

#fixed-menu a.icon {
    font-family: roboto-reg;
    font-size: 20px;
    width: 150px;
    color: #972f60;
    margin-top: -10px
}

#fixed-menu a.icon:before {
    content: "";
    font-size: 40px;
    color: #d36d54
}

@media only screen and (max-width:941px) {
    #fixed-menu .mobile-hide {
        display: none
    }
}

#fixed-menu .intro {
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 0 10px
}

@media only screen and (max-width:768px) {
    .ql2 {
        grid-column: 1;
        grid-row: 2
    }
    @keyframes zoom {
        0% {
            background-size: 200%
        }
        100% {
            background-size: 220%
        }
    }
    #fixed-menu .intro h4 {
        font-size: 16px
    }
    #fixed-menu .intro p {
        display: none
    }
}

#fixed-menu div.collapsed {
    overflow: hidden;
    height: 0;
    transition: height .5s ease-in-out;
    background: #404040!important;
    color: #fff
}

#fixed-menu .dark-bg {
    padding: 10px 0 0;
    height: auto!important
}

@media only screen and (max-width:768px) {
    #fixed-menu .dark-bg {
        padding: 0
    }
}

#fixed-menu .dark-bg i {
    color: #fff;
    font-size: 14px;
    padding-right: 10px
}

.modal,
.modal p {
    font-size: 18px
}

#fixed-menu .dark-bg ul {
    margin-bottom: 0;
    padding-bottom: 0;
    display: block
}

#fixed-menu .dark-bg ul li {
    list-style: none;
    padding: 10px;
    display: inline-block;
    width: 19%;
    border-right: 1px solid #ccc;
    text-align: center
}

#fixed-menu .dark-bg ul li:last-child,
.modal-header {
    border: none
}

.modal .name,
.modal cite {
    text-align: right;
    font-family: OpenSans-Semibold!important
}

@media only screen and (max-width:768px) {
    #fixed-menu .dark-bg ul li {
        width: 18%
    }
}

#fixed-menu .dark-bg ul li:hover {
    background: #272727
}

#fixed-menu .dark-bg ul li a {
    color: #fff!important
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%
}

.sticky+.content {
    padding-top: 102px
}

.modal cite {
    color: #003062
}

.modal .name {
    color: #555
}

.modal blockquote {
    font-size: 22px;
    width: 99%;
    padding: 0
}

.modal .grey-bg {
    margin: 30px 0 0;
    padding: 20px;
    font-size: 24px
}

.modal .grey-bg hr {
    background: #000
}

.modal .bold {
    font-family: OpenSans-Semibold!important
}

.modal img {
    width: 100%
}

.modal h2 {
    font-family: OpenSans-Semibold!important;
    margin: 0 0 15px
}

.modal .modal-dialog {
    width: 60%
}

@media only screen and (max-width:991px) {
    .modal .modal-dialog {
        width: 97%
    }
}

@media only screen and (max-width:499px) {
    .modal .modal-dialog {
        width: 95%
    }
}

.modal-body {
    padding: 25px!important
}

.modal-footer {
    border-top: 0
}

.white-bg {
    background: #fff
}

cite {
    font-family: OpenSans-Italic!important;
    display: block;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-style: normal;
    margin: 20px 0
}

cite img {
    border-radius: 50%
}

blockquote {
    border-left: none;
    font-size: 22px
}

blockquote q {
    font-family: Georgia, serif;
    color: #000
}

blockquote q:first-child {
    padding-left: 30px;
    width: 100%
}

blockquote q span {
    will-change: opacity, filter;
    opacity: 0;
    filter: blur(0)
}

q {
    quotes: "“" "”" "‘" "’"
}

q:before {
    content: open-quote;
    margin-left: -30px
}

q:after {
    content: close-quote;
    margin-left: 13px
}

q:after,
q:before {
    color: #d36d54;
    font-size: 48px;
    line-height: 16px;
    position: absolute;
    margin-top: 18px
}

.accordion-content {
    margin-bottom: 50px
}

.accordion-content br{
    display: none!important;
}

.accordion-content .panel br{
    display: block;
}

.accordion-content .accordion {
    background: #fff;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-top: 1px solid #d36d54;
    border-bottom: 1px solid #d36d54;
    border-left: none;
    border-right: none;
    text-align: left;
    outline: 0;
    font-size: 18px;
    transition: .4s
}

.accordion-content .accordion:hover,
.accordion-content .active {
    background: #d36d54;
    color: #fff
}

.accordion-content .accordion:after {
    content: '\002B';
    color: #d36d54;
    font-weight: 700;
    float: right;
    margin-left: 5px
}

.accordion-content .active:after {
    content: "\2212";
    color: #fff
}

.accordion-content .panel {
    padding: 0 18px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out;
    margin-bottom: 0;
    margin-top: -5px
}

.accordion-content .panel div {
    padding: 20px 0
}

.grid-open {
    max-height: 1500px!important;
    transition: max-height .4s ease-in;
    color: #fff!important
}

.grid-close {
    max-height: 0!important;
    transition: max-height .4s ease-in
}

.grid__item {
    align-items: center;
    justify-content: center;
    border: 1px solid #aaa;
    height: 285px;
    color: inherit;
    text-decoration: none;
    padding: 1em;
    display: block;
    cursor: pointer;
    width: 100%
}

@media only screen and (max-width:786px) {
    .grid__item {
        width: 100%
    }
}

.grid__item .middle {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.grid__item p {
    clear: all!important;
    width: 100%;
    display: block;
    text-align: center
}

.grid__item .title {
    font-size: 22px;
    font-family: OpenSans-semibold;
    margin: 10px 0
}

.grid__item:not(:focus)+.grid__description {
    max-height: 0!important
}

.grid__item:hover {
    background: #3d3d3d;
    color: #fff;
    text-decoration: none
}

.grid__item:hover p {
    color: #fff
}

.grid__description {
    max-height: 0;
    overflow: hidden;
    background: #3d3d3d;
    color: #fff!important;
    transition: max-height .15s ease-in
}

.grid__description p {
    color: #fff!important
}

.grid__description a {
    color: #fff
}

.grid__description div {
    padding: 2em
}

@media screen and (min-width:787px) {
    .grid {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas: "item1 item2 item3 item4" "desc1 desc1 desc1 desc1"
    }
    .grid__item:nth-child(1) {
        grid-area: item1;
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-column: 1/4
    }
    .grid__item:nth-child(3) {
        grid-area: item2;
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        -ms-grid-column: 2/4
    }
    .grid__item:nth-child(5) {
        grid-area: item3;
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        -ms-grid-column: 3/4
    }
    .grid__item:nth-child(7) {
        grid-area: item4;
        -ms-grid-row: 1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
        -ms-grid-column: 4/4
    }
    .grid__description {
        grid-area: desc1;
        color: #fff!important;
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4
    }
}

.off-canvas-toggle {
    z-index: 100
}

.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%
}

footer .nus-contact-us {
    font-size: 14px;
    font-size: 1.4rem
}

#back-to-top {
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: url(../images/arrow-top.png) center center no-repeat #003d7c;
    color: #fff;
    z-index: 5
}

#back-to-top i {
    color: #fff
}

#back-to-top:hover {
    background-color: #004a96
}

.nus-sidebar-nav .dropdown-submenu .dropdown-menu{
    left: 0!important;
}

.nus-sidebar-nav .dropdown-menu{
    width: 100%!important;
    top:100%!important;
    margin:0!important;
    padding: 0!important;
    box-shadow: none!important;
    border:0!important;
    font-size:1.6rem!important;
}
.nus-sidebar-nav ul li{ margin-bottom:0!important; padding-bottom:0!important; }
.navbar-nav>li>.dropdown-menu{ z-index: 9999!important }