/* 
    Created on : 2020/6/3, 下午 07:59:32
    Author     : AE21 Studio 
*/
p.slim{
    margin-bottom: 0;
}

a.alt:hover{
    color:#FFF;
}

#top {
    background-color: #FFFFFF;
    display:block;
    width:100%;
    padding-left: 15%;
    padding-right: 15%;

}

#header.reveal.alt #top {
    display: inline-flex;
    flex-direction: row !important;
}

#top .left {
    padding-top:1.5em;
    padding-bottom: 1em;
    text-align: left;
    width:50%;

}

#top .right {
    text-align: right;
    width:50%;
    margin-top: -0.1em;
    /*margin-top: 0.25em;*/
}

#top a{
    text-decoration: none;
    border-bottom-width: 0;
}

#top a:hover{
    text-decoration: none;
    border-bottom-width: 0;
}

#top img{
    max-width: 5em;
    max-height: 5em;
}

#header .title{
    background-color: #00903E;
    color: #FFFFFF;
    width: 100%;
    line-height: 1.25em;
    text-align: left;
    padding:0.5em 15%;
    vertical-align: middle;
    font-size: 1.1em;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00903E), color-stop(100%, #007533));
    background: -webkit-linear-gradient(top, #00903E 0%, #007533 100%);
    background: -moz-linear-gradient(top, #00903E 0%, #007533 100%);
    background: -ms-linear-gradient(top, #00903E 0%, #007533 100%);
    background: -o-linear-gradient(top, #00903E 0%, #007533 100%);
    background: linear-gradient(to bottom, #00903E 0%, #007533 100%);
}

#header .title img{
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.75em;
    align-items: flex-end;

}

#navTitleLink img{
    display: none;
}

#header .title a{
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items:center;
    font-weight: 300;
}

#headerTop.reveal{
    display: none;
}

#headerTop{
    display: block;
    height: 13em;
}



@media screen and (max-width: 1680px) {
    #header > nav > ul > li {

        padding: 0 0em;
    }

    #header > nav > ul > li > ul > li > a{
        padding:0 2em;
    }

    #top{
        margin-top: 0.5em;
    }
}

@media screen and (max-width: 1440px) {
    #header > nav > ul > li {

        padding: 0 0em;
    }

    #header .title, #top {
        padding: 0.8em 9% 0.8em 9%;
        

    }
    
    #top {
         padding-top:0;
    }

    #header > nav > ul {
        width:80%;
    }

    #header > nav > ul > li > ul > li > a{
        padding:0 2em;
    }

    #top .right{
        /*margin-top: 0.25em;*/
    }

}



@media screen and (max-width: 1280px) {
    #top .right{
        /*margin-top: -0.1em;*/
    }
    
    #top{
        margin-top: -0.1em;
    }

    #top,  
    #header .title{
        padding-left: 2em;
        padding-right: 2em;
    }


    #header > nav > ul {
        width:92%;
    }

    #header > nav > ul > li > ul {
        padding-left: 5%;
        padding-right: 5%;
    }

    #header > nav > ul > li > ul > li > a{
        padding:0 1em;
    }

}

@media only screen and (min-width: 768px){
    #top img{
        max-width: 233px;
        max-height: 80px;
    }

    #top #site_search_form{

        display:flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    #top input[type="text"]{
        display: inline;
        width: 153px;
        font-size: 12px;
        line-height: 14px;
        color: #000;
        padding: 4px 12px;
        background-color: #fffbf5;
        border-radius: 0;
        height: 28px;

    }

    #top button, #top a.btn{
        display: inline;
        height: 28px;
        width: 35px;
        color: #7c7c7c;
        font-size: 12px;
        line-height: 14px;
        padding: 0px;
        background-color: #fffbf5;
        border-radius:0;

    }

    #top a.btn, 
    #top a.link
    {
        padding:0.5em;
        color: #333;
        background-color: #DCDCDC;
        border: 1px solid #ccc;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
    }

    #top a.btn:hover
    {
        background-color: #e6e6e6;
        border-color: #adadad;
        color: #333 ! important;
    }




    #top a.link{
        width:8em;
        background-color: transparent;
        border-width: 0;
    }

    #top a.link:hover{
        background-color: transparent;
        text-decoration: underline;
    }




}

/*Footer*/
#footer .footer-icon a{
         height: 77px;
         display: inline-block;
    vertical-align: middle;
    }

#footer img.fehd
{
    height: 77px;
    margin-right:3em;
}

#footer img.iwell
{
    height: 70px;
    margin-right:0em;
}

#footer div.left{
    padding-left: 0;
    text-align: left;
}

#footer div.right{
    text-align: right;
    font-size: 12px;
    font-family: 'Noto Sans HK','Helvetica Neue LT Std', Helvetica, sans-serif;
}

#footer div.right p{
    font-weight: 300;
    font-style:  italic;
}

#footer div.right a{
    color:#009B47;
    font-weight: bold;
}

#footer ul.icons{
    margin-top: 1em;
}

#footer ul.icons li .icon:before{
    font-size: 2.5em;
}

#footer ul.icons li .icon.fa-facebook:before{
    color:#3B5998;
}

#footer ul.icons li .icon.fa-whatsapp:before{
    color:#075e54;
}

#footer ul.icons li .icon.fa-weixin:before{
    color:#1AAD19;
}

#foot-header{

    width: 100%;
    background-color: #009B47;
    color:#FFF;
    display:block;
}

#foot-header > ul{
    list-style: none;
    padding: 0;
    margin: 0 auto;
    font-size: 16px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
    width: 70%;

}

#foot-header > ul > li{
    padding: 1em 0em;
}

#foot-header > ul > li > a{
    padding:0 2em;
    border-right: 1px solid #FFFFFF;
}

#foot-header > ul > li > a:hover{
    color:#FFF;
    text-decoration: underline;
}

#foot-header > ul > li:last-child > a{
    border-right-width: 0;
}



@media screen and (max-width: 1680px) {
    #footer .footer-icon a{
    height: 60px;
    
}
    
    #footer img.fehd
    {
        height: 60px;
        margin-right:3em;
    }

    #footer img.iwell
    {
        height: 55px;
        margin-right:0em;
    }

    #foot-header > ul > li > a{
        padding:0 3em;
    }
}

@media screen and (max-width: 1440px) {
    #foot-header > ul > li > a{
        padding:0 2em;
    }
}

@media screen and (max-width: 1440px) {
    #foot-header > ul > li > a{
        padding:0 3em;
    }

    #foot-header > ul{
        width: 90%;
    }
}

@media screen and (max-width: 1280px) {
    #foot-header > ul > li > a{
        padding:0 2.2em;
    }

    #foot-header > ul{
        width: 90%;
    }
}

@media screen and (max-width: 980px) {
    #footer .footer-icon a{
         height: 77px;
    }
    
    #footer img.fehd
    {
        height: 77px;
        margin-right:3em;
    }

    #footer img.iwell
    {
        height: 70px;
        margin-right:0em;
    }

    #foot-header > ul > li > a{
        padding:0 1em;
    }

    #foot-header > ul{
        width: 100%;
    }
}

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



    #footer div.right{
        text-align: justify;
    }
}

@media screen and (max-width: 500px) {
    #footer .footer-icon a{
         height: 55px;
    }
    
    #footer div.left{
        padding-left: 1.35em;
    }

    #footer img.fehd
    {
        height: 55px;
        margin-right:3em;
    }

    #footer img.iwell
    {
        height: 50px;
        margin-right:0em;
    }


}


/*nav*/

#navTop{
    width: 100%;
    display: none;
    position: fixed;
    top:0;
    height: 6em;
    padding-top: 1em;
    background-color:#FFF;
    z-index: 99;
}

@media screen and (max-width: 980px) {
    #navTop{display:block;}
}



#navTop #navTopLogo{
    height: 3.5em;
    padding-left: 2em;
}

#navTitle{
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    color:#FFF;
    width: 100%;
    background-color: #009B47;
    margin-top: 0.5em;
    padding: 0.3em 2em;
}

#navTitle a:hover{
    color:#FFF;
}

.subnav-content {
    display: flex ! important;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
    visibility: hidden;
    position: absolute;
    left: 0;
    background-color: #FFF;
    width: 100%;
    z-index: 1;
    height: auto;
    opacity: 0; 
    -moz-transition:  visibility 0.2s, opacity 0.2s ease-in-out;
    -webkit-transition: visibility 0.2s, opacity 0.2s ease-in-out;
    -ms-transition: visibility 0.2s, opacity 0.2s ease-in-out;
    transition: visibility 0.2s, opacity 0.2s ease-in-out;
    /*-webkit-transition: opacity 10s, height 100s;
    transition: opacity 10s, height 100s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;*/
}

.subnav:hover .subnav-content {
    visibility: visible;
    opacity: 1;
}

/* banner*/
#banner{
    /*height: 50vh;*/
}



#banner > article, 
#banner2 > article{
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
}

/* Banner */

#banner, 
#banner2{
    background-color: #444;
    color: #fff;
    height: 42vh;
    height: 400px;
    position: relative;
    top:0em;
}

#banner2{

    height: 10em;
    margin-bottom: 0em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;


}

#banner2 article{
    padding:0 15%;
    height: 100%;
    display: block;
    vertical-align: middle;

}

#banner2 article header{
    vertical-align: middle;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction:column;
    align-items: flex-start;
    justify-content: center;
    align-content: center;
    padding-left: 1em;
}

#banner2 article h2{

    color:#FFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    font-size: 38px;
    line-height: 1em;
    margin: 0;
}

#banner2 article header p{
    font-size: 18px;
    text-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.6);
    color:#FFF;
    padding:0;
    margin: 0;

}

#banner input, #banner select, #banner textarea {
    color: #fff;
}

#banner a {
    color: #fff;
}

#banner a.target {
    width: 100%;
    height: 100%;
}

#banner strong, #banner b {
    color: #fff;
}

#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
    color: #fff;
}

#banner blockquote {
    border-left-color: rgba(255, 255, 255, 0.25);
}

#banner code {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.25);
}

#banner hr {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

#banner:after {
    pointer-events: none;
    -moz-transition: opacity 1.5s ease-in-out, visibility 1.5s;
    -webkit-transition: opacity 1.5s ease-in-out, visibility 1.5s;
    -ms-transition: opacity 1.5s ease-in-out, visibility 1.5s;
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
    background: #000511;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 2;
}

#banner .indicators {
    bottom: 1.5em;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 2;
}

#banner .indicators li {
    cursor: pointer;
    display: inline-block;
    height: 2em;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: -6em;
    width: 2em;
}

#banner .indicators li:before {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 100%;
    content: '';
    display: inline-block;
    height: 0.8em;
    left: 50%;
    margin: -0.4em 0 0 -0.4em;
    position: absolute;
    text-indent: 0;
    top: 50%;
    width: 0.8em;
}

#banner .indicators li.visible:before {
    background: #fff;
}

#banner > article {
    -moz-transition: opacity 1.5s ease, visibility 1.5s;
    -webkit-transition: opacity 1.5s ease, visibility 1.5s;
    -ms-transition: opacity 1.5s ease, visibility 1.5s;
    transition: opacity 1.5s ease, visibility 1.5s;
    background-attachment: local;
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: cover;

    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 0;
    display: flex;
}

#banner > article a{
    display: flex;
}

#banner > article:before {
    content: '';
    display: inline-block;
    /*height: 100%;*/
    vertical-align: middle;
}

#banner > article:after {
    content: '';
    display: none;
    width: 100%;
    /*height: 100%;*/
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0;
}

#banner > article .inner {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
    padding:50px 15%;
}

#banner > article.start,
#banner > article.start a{
    align-items: flex-start;
}

#banner > article.middle,
#banner > article.middle a{
    align-items: center;
}

#banner > article.bottom,
#banner > article.bottom a{
    align-items: flex-end;
}

#banner > article.left,
#banner > article.left a{
    text-align: left;
    justify-content: flex-start;
}

#banner > article.center,
#banner > article.center a{
    text-align: center;
    justify-content: center;
}

#banner > article.right,
#banner > article.right a{
    text-align: right;
    justify-content: flex-end;
}

#banner > article .inner > :last-child {
    margin-bottom: 0;
}

#banner > article h2 {
    font-weight: 500;
    font-size: 2.75em;
    padding-bottom: 0;
    margin: 0 0 0.5em 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}

#banner > article h2:after {
    display: none;
}

#banner > article img {
    display: none;
}

#banner > article.visible {
    opacity: 1;
    visibility: visible;
}

#banner > article.top {
    z-index: 1;
}

#banner > article.instant {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

body.is-preload #banner:after {
    opacity: 1.0;
    visibility: visible;
}

@media screen and (max-width: 1440px) {
    #banner > article .inner {
        padding-left: 9%;
        padding-right: 9%;
    }

    #banner2{
        margin-top:0em;
    }

    #banner2 article{
        padding:0 9%;
    }
}

@media screen and (max-width: 1280px) {

    #banner {
        min-height: 20em;
        height: 43vh;


    }



    #banner > article h2 {
        font-size: 2.25em;

    }

    #banner2{
        margin-top:0em;
        height: 10em;

    }

    #banner > article .inner {
        padding-left: 3%;
        padding-right: 9%;
    }

    #banner2 article{
        padding:0 3%;
    }

}
@media screen and (max-width: 1024px) {
    #banner2 article header p{
        font-size: 16px;
    }

    #banner2 article header h2{
        font-size: 30px;
    }
}

@media screen and (max-width: 980px) {

    #banner {
        min-height: 10em;
        height: 30vh;
        height: 270px;
        top:7.2em;
    }



    #banner > article {
        background-attachment:  scroll;
    }

    #banner2{
        margin-top: 7em;
        height: 8em;
    }

    #banner2 article header {
        padding-left: 0;
    }

    #navTitle{
        font-size: 16px;
        padding: 9px 2em;
    }

}

@media screen and (max-width: 736px) {

    #banner {
        min-height: 10em;
        height: 30vh;
        height: 270px;
    }

    #banner > article .inner {
        width: 90%;
    }

    #banner > article h2 {
        font-size: 1.75em;
        line-height: 1.25em;
    }

    #banner2{
        margin-top: 7.2em;
        height: 7em;
    }

}

@media screen and (max-width: 500px) {
    #banner2{
        /*margin-top:11.5em;*/
        background-position-x: 70%;

    }

    #banner2 article header{
        width: 70%;
    }

    #banner2 article header p{
        font-size: 12px;
    }

    #banner2 article header h2{
        font-size: 20px;
    }

    #navTitle{
        padding-left: 1em;
    }
}

body.is-mobile #banner > article {
    background-attachment: scroll;
}

.content article.page-container.project-card{
    min-height: 20em;
    overflow: hidden;
}

@media screen and (max-width: 980px) {
    .content article.page-container.project-card{
        min-height: 18em;
    }
}

@media screen and (max-width: 780px) {
    .content .special article.page-container.project-card{
        min-height: 12em;
    }
}

/* Index Content*/
.content article.index{
    min-height: 14em;
    border-top:3px solid #00903E;
    background-color: #D8D8D8;
    text-align: left;
    vertical-align: middle;
    padding: 1em 2em 1em 1.5em;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 500px) {
    .content article.index{
        min-height: 18em;
    }
    
    .content article.index.alt2{
        min-height: 12em;
    }
}



.content article.index h2{
    font-size: 26px;
    color:#FFF;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) ;
    margin-bottom: 0;
}

.content article.index.alt2 h2{
    font-size: 1em;
}

.content article.index p{
    color:#FFF;
    font-weight: 300;

    text-shadow: 1px 1px 3px #000000;
    font-size: 1em;
}



.content article.news{
    border:3px solid #00903E;
    background-color: #FFF;
}

.content article.news h2{
    color:#000;
    text-shadow: none;
}

.content article.center.index{
    min-height: 15.5em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0;
    font-size: 0.9em;

}

.content article.alt.index{
    min-height: 7em;
}

.content article.news .date{
    color: #8C8C8C;
    font-size: 0.7em;
    letter-spacing: 0;
    font-style:  italic;
}

.content article.news ul{
    margin-bottom: 0;
}

.content article.news li a{
    color: #454545;
    font-size:0.8em;
    letter-spacing: 0;
    font-weight: 500;

}

.content article.news a.all{
    color:#00903E;
    font-weight: 500;
}

.content article.center.index h2{

    padding:0;
}

.content article.youtube{
    padding:0;
    border-top: 0;
    background-color: #FFF;
}

.youtube iframe{
    width: 100%;
    height: 14em;
}

.youtube.google iframe{
    height: 12em;
}



.content article.project{

    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(198,198,198,0.5);
    border-top-width: 0;
    display: flex;
    align-items: flex-end;
    min-height: 6.4em !important;

}

.content article.project h2{
    color: #00903E;
    box-shadow: none;
    text-shadow:none;
    padding-bottom: 0.5em;


}



.content article.projectType{
    min-height: 9em;
    vertical-align: bottom;
    display: flex;
    align-items: center;
    padding: 0;
    color:#FFF;
    background-size: cover;
    background-position: center;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    
}

.content article.projectType:hover{
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075);
}

.content article.projectType a{
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    font-size: 0.8em;
    font-weight: bold;
    padding: 0em 1em;

}

.content article.page{
    padding:0;

}

.content article.page h2{
    display: flex;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    position: absolute;
    top:0;
    width: 100%;
    height:100%;
    padding: 1em;
}

.content article.page .bg-img{
    background-size: cover;
    background-position: center;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;

    width: 100%;

}

.content article.page .bg-img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0 ! important;
    padding: 0;

}

.content article.page .bg-img img{
    width: auto;
    height: fit-content;
    height: -webkit-fill-available;

}

.content article.page:hover .bg-img img{
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075);
}

.content article.page-container{
    position: relative;
    width: 100%;
    height: 100%;
    padding:0;
}

.content article.page-container .image{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    -moz-transition: -moz-transform 1s ease-in-out;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -ms-transition: -ms-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    overflow: hidden;
}

.content article.page-container .page-content {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    padding: 0 1em;
    padding-top: 0.5em;
    margin-top: 0;
    min-height: 6em;
    display: flex;
    align-items: center;
    text-align: left;
}

.content article.page-container .page-content.left {
    width: 50%;
    top:0;
    height: 100%;
}

.content article.page-container .page-content.full {
    width: 100%;
    top:0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content article.page-container .page-content.left h2{
    font-size: 1.2em;
    text-align: left;
}

.content article.page-container .page-content.left h2.alt{
    font-size: 25px;
    line-height: 1.8em;
    font-weight: 500;
}

.content article.page-container .page-content.full h2{
    font-size: 26px;
    font-weight: 500;
}

.content article.page-container .page-content h2{
    /*text-shadow: 0 1px 4px rgba(0,0,0,0.5);*/
    text-shadow: 1px 1px 3px #000000;
    font-size: 0.9em;
}

@media screen and (max-width: 780px) {
    .content .special article.page-container .page-content{
        padding-left: 0.5em;
        padding-right:0.5em; 
    }
    
    .content .special article.page-container .page-content h2{
        font-size: 9pt;
        /*font-weight: normal;*/
    }
}

.content article.page-container .page-content.alt{
    flex-direction: column;
    align-items: flex-start;
    padding-top: 1em;
}


.content article.page-container:hover .bg-img {
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075);
}

@media screen and (max-width: 1280px) {
    .content article.page-container .page-content.left h2.alt{
        font-size: 1.2em;
        line-height: 1.2em;
    }

    .content article.page-container .page-content.left p{
        font-size: 0.9em;
    }
}

@media screen and (max-width: 500px) {
    .content article.page-container .page-content {
        min-height: 5em;
    }
}


article.profile{
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
    border-top:3px #1B8407 solid;
    background-color: #B6DAA9;
    cursor: pointer;
}

article.profile.alt{
    cursor: auto;
}

article.profile .profile-pic{
    width: 100%;
    height: 100%;
    background-position:center;
    background-size:cover;
}

article.profile .profile-content{
    height: 3em;
    position: absolute;
    bottom:0;
    width: 100%;
    background: rgba(27, 132, 7, 0.75);
    text-align: center;
    -moz-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    -ms-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

article.profile .profile-content h2{
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    font-size: 0.7em;
    padding:1em 0.5em;
}

article.profile:hover .profile-content{
    height: 100%;
}


@media screen and (max-width: 1280px) {
    article.profile{
        height: 180px;
    }
}

@media screen and (max-width: 980px) {
    article.profile{
        height: 250px;
    }
}



/* Page Detail*/
.page-container{
    /*margin: 0 3em;*/
}

.page-container h2{
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0;
    /*line-height: 25px;*/
}

.page-container h2.project.title{
    font-size: 32px;
    line-height: normal;
    margin-bottom: 0;
    font-weight: 500;
    margin-bottom: 0.25em;
}

.page-container h3{
    font-weight: normal;
    font-size: 26px;
}

.page-container .page-detail h2,
.page-container .page-detail h3{
    border-bottom: 1px solid #ebebeb;

    padding: 0.45em;
    padding-top: 0;
    padding-left: 0;
}

.page-container .page-detail h3.alt{
    border-bottom-width: 0;
    font-weight: 500;
}

.page-container ul.actions li a{
    font-weight:600;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: 3.025em;
    padding: 0 3em;
}

.page-container ul li a{
    font-weight: bold;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 19px;
}

.page-container ul.alt.menu li{
    padding: 0.2em 0;
}

.page-container ul.alt.menu li a{
    color: #000000 !important;

}

.page-container ul.alt li a{
    color:#00903E;
}


.page-container ul.submenu li a{
    font-weight: normal;
}

.page-detail-container{
    padding-left: 2em;
    border-left: 2px solid #EFEFEF;

}

@media screen and (max-width: 980px) {
    .page-detail-container{
        padding-left: 0;
        border-left-width: 0;
    }
    
    
}
@media screen and (max-width: 500px) {
    .page-container h2.project.title{
    font-size: 1.5em;
    
    margin-bottom: 0.25em;
}

.page-container h3{
    font-size: 1.3em;
}
}


.page-detail{
    position: relative;
    width: 100%;

}

.page-detail header{
    width: 100%;

}

.page-detail header h2:after,
.page-detail header h3:after{
    content: ' ';
    position: relative;
    top: 0.5em;
    left:0em;
    content: '';
    height: 2px;
    display: block;
    width: 30%;
    background-color: #4797ec;
    /* background-image: linear-gradient(90deg, rgba(71, 151, 236, 0), #884beb 90%);*/
    background-size: auto, auto;
    background-repeat: repeat, no-repeat;

}

.page-detail header h3.alt:after{
    display: none;
    height: 0;
    width: 0;
}

@media screen and (max-width: 980px) {
    .page-detail header h2:after,
    .page-detail header h3:after{
        width: 30%;
    }
}

.parent-title{
    /*color:#00903E ! important;*/
    color:#000 ! important;
}

.page-content{
    margin-top: 0em;
    color:#454545;
    font-size: 16px;

}

.detail-session{
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    text-align: justify;
    line-height: 1.6em;
    font-family: 'Helvetica Neue LT Std', 'Noto Sans HK',Helvetica, sans-serif !important;
}

.detail-session.alt{
    min-height: fit-content;
}

.detail-session b.subtitle{
    margin-bottom: 0.5em;
    display: block;
    font-size: 1.3em;
    font-weight: normal;
    text-align: left;
}

.detail-session b.subtitle.subtitle_alt{
    font-size: 1em;
    font-weight: bold;
    text-decoration: underline;
}

.detail-session p{

}

.detail-session ul {
    list-style: none;
}

.detail-session ul li::before{
    content: "\2022";
    color: red;
    font-weight: bold;
    display: inline-block; 
    width: 1.5em;
    margin-left: -1.5em;
}

.detail-session ul ul li::before{
    content: "\2212";
}

.detail-session ul ul ul li::before{
    content: "\FE12";
}

.detail-session ul.alt li::before{
    margin-left:0;
    width: 0;
    display: none;
}

.detail-session ul.actions li::before{
    display: none;
}

.detail-session iframe{
    max-width: 100%;
}

.detail-session header.center{
    width: 100%;
    text-align: center;
}

ul.menu{
    list-style: none;
    margin-bottom: 0;
}

ul.menu li{
    border-top-width: 0;
}

.slide_menu{

}

.path-container{
    width: 100%;
    position: relative;
    background-color: #F8F8F8;
    top: 0em;
    padding:0.5em 15%;

}
.path-container.alt{
    /* margin-top: 1.4em;*/
    /*margin-top: 0.25em;*/
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

.path-container a:first-child{
    padding-left: 1em;
}

.path-container a{
    font-size: 13px;
    padding:0 1em;
    font-weight:  normal;
    line-height: 2.5em;
}

.path-container a:hover, 
.page-submenu a:hover{
    color:#00903E;
}

.page-submenu.alt{
    display: none;
}

.page-submenu{

    padding-right: 1em;
    overflow: hidden;
}
@media screen and (max-width: 1440px) {
    .path-container{
        padding:0.8em 9%;

    }

    .path-container.alt{
        /* margin-top: 1.4em;*/
        /*margin-top: 1.3em;*/

    }
}

@media screen and (max-width: 1280px) {
    .path-container{
        padding:0.8em 3%;

    }
}

@media screen and (max-width: 1024px) {
    .slide_menu{
        padding-left: 1.1em;
    }
}

@media screen and (max-width: 980px) {
    .path-container{
        width: 100%;
        padding-left: 1em;
    }
    
    .path-container.alt{
        /* margin-top: 1.4em;*/
        margin-top: 7.2em;

    }

    .page-submenu{
        display: none;
    }

    .page-submenu.alt{
        display: block;
    }

    .slide_menu{
        position: relative;
    }
}

@media screen and (max-width: 500px) {
    .path-container.alt{
        /* margin-top: 1.4em;*/
        margin-top: 7.2em;

    }
    
    .path-container{
        padding-top:0.5em;
        padding-bottom: 0.5em;
    }

    .path-container a:first-child{
        padding-left: 0;

    }
}

.collaborators-container{
    width:100%;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(195,195,195,0.5);
    display: block;
    margin-bottom: 1em;
    margin-top: 1em;
    position: relative;
    min-height: 8em;
}

.collaborators-container.alt{
}

.collaborators-container img{
    width: 100%;
    max-height: 125px;
}

.collaborators-container.alt .row.gtr-uniform {
    margin-top: 0;
}

.collaborators-container .row.gtr-uniform > *{
    padding:1em 2em;
}

.collaborators-container p{
    font-size: 1.25em;
    line-height: 1.55em;
    font-weight: bold;
    color: #000000;
    padding: 1em 0; 
}

.collaborators-desc{

    display:flex;
    align-items: center;

}

.collaborators-logo{
    display:flex;
    align-items: center;
}

/* Profile */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
}

.flip-card-front img{
    width:100%;    
}


/* Style the back side */
.flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}

.title-container{
    margin-top: 2em;
    display: block;
}

.title-container:first-child{
    margin-top: 0;
}

.title-container h3{
    color:#3D4449 !important;
    font-size: 21px;
}

/* The Modal (background) */
#popModel.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow:  hidden; /* Enable scroll if needed */
    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
}

/* Modal Content/Box */
#popModel .modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 0;
    border: 1px solid #888;
    width: 70%; /* Could be more or less, depending on screen size */
    position: relative;
    text-align: center;
}

@media screen and (max-width: 1280px) {
    #popModel .modal-content {
        width: 80%;
    }
}

@media screen and (max-width: 1024px) {
    #popModel .modal-content {
        width: 80%;
    }


}

@media screen and (max-width: 736px) {
    #popModel.modal {
        overflow: auto;
    }
}

.people.desc{
    overflow-y: scroll;
    max-height: 30em;
    padding-right: 1em;
    padding-top: 0.5em;
}

/* The Close Button */
#popModel .modalClose {
    font-weight: bold;
    position: absolute;
    top: -0.75em;
    right: -1em;
    border: 1px solid #009B47;
    color: #FFF;
    background-color: #009B47;
    width: 1.5em;
    height: 1.5em;
    line-height: 1em;
    padding: 0.35em 0.4em 0.5em 0.4em;
    margin: 0;
    border-radius: 50%;
    font-size: 1.25em;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popModel .modalClose:hover,
#popModel .modalClose:focus {
    color: #3F3F3F;
    text-decoration: none;
    cursor: pointer;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #009B47; /* Blue */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    animation: spin 2s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#responseDIV{
    width: 100%;
    text-align: center;
}
#popModel .row.gtr-uniform {
    margin: 0;
}


#popModel .people.info{
    color:#FFF;
}

#popModel .info.left{
    background-color: #B6DAA9;
    padding: 2em 1em;

}

#popModel .info.left img{
    width: 190px;
    border: 5px solid #efefef;
    margin-bottom: 1em;
}

#popModel .info h3{
    color: #3D4449;
    font-size: 18px;
    line-height: 1.1em;
    margin-bottom: 2em;
    font-weight: bold;

}

#popModel .info.right h3{
    margin-bottom: 0.5em;
}

#popModel .info.left h3:after{
    content: ' ';
    position: relative;
    top: 0.5em;
    left:-0.5em;
    content: '';
    height: 2px;
    display: block;
    width: 50%;
    background-color: #009B47;
    margin-left: auto;
    margin-right: auto;
    /* background-image: linear-gradient(90deg, rgba(71, 151, 236, 0), #884beb 90%);*/
    background-size: auto, auto;
    background-repeat: repeat, no-repeat;

}


#popModel .info.right{
    text-align: left;
    color: #444;
    font-size: 13px;
    padding:2em 2em;
}

#popModel table{
    width: 100%;
    font-size: 13px;
    text-align: right;
    border: none;
}

#popModel table tr td:first-child{
    text-align: left;
}


#popModel table tr td{
    border:none;
}

#popModel table tr td{
}


.tag-list-container{
    margin-bottom: 1em;
}

.project-list-container{
    margin-top: 1em;
}


/* Tag List */
.tag-list-container{
    display: flex;
    flex-wrap:wrap;
    flex-flow: row wrap;
    margin-bottom: 1em;
}

.tag-list-container a{
    padding:0.5em 2em;
    margin-right: 1em;
    margin-bottom: 1em;
    color:#FFF;
    border: 1px solid #00903E;
    border-radius: 25px;
    background-color: #00903E;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
}

.tag-list-container a:hover{
    color:#FFF !important;
    background-color: #007533;
}

.tag-list-container a.unchecked{
    background-color: #cdcdcd;
    border: 1px solid #999999;
}

.tag-list-container a.unchecked span.fa-times{
    display: inline-block;
}

.tag-list-container a span.fa-times{
    display: none;
}

.tag-list-container a.unchecked span.fa-check{
    display: none;
}

.tag-list-container a span.fa-check{

    display: inline-block;
}

.tag-list-container a span{
    margin-left: 0.5em;
}


.tag-list-container .linebreak{
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .tag-list-container .linebreak{
        width: 0;
        display: none;
    }
}

@media screen and (max-width: 780px) {
    .tag-list-container a{
        font-size: 0.9em;
    }
}



.tag_list_item{
    display: none;
}

.detail-content-div p{
    text-align: justify;
}

.detail-content-div a{
    color:#00903E;
}

.detail-session .image.ref{
    margin-bottom: 0;
}

.detail-session sub{
    width: 100%;
    text-align: left;
    font-style:  italic;
    padding: 0 1em;
    display: block;
    margin-bottom: 1em !important;
}

.youtube.page-content {
    margin-top:0;
}


.youtube.page-content iframe{
    height: 30em;
}

@media screen and (max-width: 1280px) {
    .youtube.page-content iframe{
        height: 25em;
    }
}


@media screen and (max-width: 736px) {
    .youtube.page-content iframe{
        height: 15em;
    }
}

table.page-content-table{
    width: 100%;
    table-layout: fixed;
}

table.page-content-table.w100,
table.page-content-table.w50,
table.page-content-table.w33,
table.page-content-table.w25,
table.page-content-table.w16,
table.page-content-table.walt{
    width: fit-content;
    table-layout: auto;
}

table.page-content-table.w16{
    width: 16%;
}

table.page-content-table.w25{
    width: 25%;
}

table.page-content-table.w33{
    width: 33%;
}

table.page-content-table.w50{
    width: 50%;
}

table.page-content-table.w100{
    width: 50%;
}

table.page-content-table tr:first-child td  {
    /*text-align: center;*/
    font-weight: bold;
}

table.page-content-table tr td  {
    text-align: left;
}

table.page-content-table.clinical{
    table-layout: fixed !important; 
    width: 100%;
}

table.page-content-table.clinical tr td:nth-child(1){
    width: 7em;
}

table.page-content-table.clinical tr td:nth-child(2){
    width: 8em;
}

table.page-content-table.clinical tr td:nth-child(3){
    width:15em;
}

@media only screen and (max-width:736px){
    table.page-content-table.clinical{
    width: fit-content;
    table-layout: auto !important;
}
    
    table.page-content-table.clinical tr td:nth-child(n){
    width: auto;
}
}

@media only screen and (max-width: 500px){
     table.page-content-table.clinical{
    width: 100%;
    table-layout: fixed;
}
}


.project-gallery{
    margin-bottom: 2em;
    margin-bottom: 0em;
}


.detail-content-div ol{
    margin-bottom: 0em;
}

.detail-content-div p{
    margin-bottom: 1em;
}

/* The alert message box */
.alert {
    padding: 20px;
    background-color: #f44336; /* Red */
    color: white;
    margin-bottom: 15px;
}

.alert.success{
    background-color: #4CAF50;
}

.alert.info{
    background-color: #2196F3;
}

.alert.warning{
    background-color: #ff9800;
}

/* The close button */
.alert .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.alert .closebtn:hover {
    color: black;
}

/* Style the Image Used to Trigger the Modal */
#imgModal {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}

#imgModal:hover {/*opacity: 0.7;*/}

/* The Modal (background) */
.galleryModal, 
.img_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.galleryModal  .modal-content, 
.img_modal .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    background-color: #FFF;
    padding: 1em;
}

.img_modal .modal-content.alt {
    width: fit-content;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
.img_modal #img_caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #FFF;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.img_modal .modal-content, #caption {
    animation-name: img_zoom;
    animation-duration: 0.6s;
}

@keyframes img_zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.galleryModal .close,
.img_modal .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.galleryModal .close:hover,
.galleryModal .close:focus, 
.img_modal .close:hover,
.img_modal .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .img_modal .modal-content {
        width: 100%;
    }

    .galleryModal .modal-content {
        width: 100%;
    }
}

.onclick{
    cursor: pointer;
}

.float_top{
    position: fixed;
    right: 5em;
    bottom: 5em;
    z-index: 99;
    padding:0.25em 0.5em;
    padding-top: 0.5em;
    display: flex;
    align-items: center;
    align-content: center;
    background-color: rgba(196,196,196,0.8);
    border-radius: 1em;
    opacity: 0.6;
}

.float_top:hover{
    background-color: rgba(120,120,120,0.8);
}

.float_top .icon:before{
    font-size: 2em;
    color:#FFF;
}

@media only screen and (max-width: 1024px){
    .float_top{
        right: 2.5em;
        bottom: 2.5em;
    }
}

@media only screen and (max-width: 768px){
    .float_top{
        right: 1.5em;
        bottom: 1.5em;
    }
}

/*News & Event*/
.event.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 100%;
    margin: auto;
    margin-bottom: 2em;
    overflow: hidden;
}

.event.card .cover{
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.event.card .cover_image{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    -moz-transition: -moz-transform 1s ease-in-out;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -ms-transition: -ms-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;


}

.event.card:hover .cover .cover_image{
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075);
}



.event.card .card_detail{
    border-top: 6px #1B8407 solid;
    padding: 1em 1em 0.8em 1em;
    text-align: left;
    display: block;
    height: 18em;
    overflow: hidden;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-content:space-between;
}

.event.card .card_detail .header{
    text-align: left;
    display:block;
    align-items: flex-start;
    min-height: 4em;
}

.event.card .card_detail_content{
    height: 6.3em;
    overflow: hidden;
    margin-bottom: 0.5em;
    text-align: left;
    position: relative;

}

.card_detail .readmore{
    color:#1B8407;
}

.card_detail .card_footer{

}

@media only screen and (max-width: 1680px){
    .event.card .card_detail .header{
        min-height: 6em;
    }

    .event.card .card_detail_content{
        max-height: 6.3em;
    }

    .card_detail .card_footer{
        padding-left: 1em;
        font-size: 0.9em;
    }
}

.image.left.w33, .image.right.w33 {
    width: 33%;
    max-width: 33%;
}

.image.left.w25, .image.right.w25 {
    width: 25%;
    max-width: 25%;
}

.image.left.w16, .image.right.w16 {
    width: 16%;
    max-width: 16%;
}


.image.left.w50, .image.right.w50 {
    width: 50%;
    max-width: 50%;
}

.image.left.w100, .image.right.w100 {
    width: 100%;
    max-width: 100%;
}



@media only screen and (max-width: 500px){
    .image.left.w33, .image.right.w33,
    .image.left.w16, .image.right.w16,
    .image.left.w25, .image.right.w25,
    .image.left.w50, .image.right.w50
    {
        width: 100%;
        max-width: 100%;
    }

}

#banner > article .inner.style1 {
    vertical-align: middle;
}

#banner > article .inner.style2 {
    vertical-align: top;
}


#banner > article .inner.style3 {
    vertical-align: bottom;
}

.row-trim{
    padding-left: 0;
}


a.mailto{
    text-decoration: underline;
}

/* The Modal (background) */


/* The Close Button */
.galleryModal .close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.galleryModal .close:hover,
.galleryModal .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

/* Hide the slides by default */
.galleryModal .mySlides{
    display: none;
}

/* Next & previous buttons */
#banner .prev,
#banner .next,
.galleryModal .prev,
.galleryModal .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

#banner .prev,
#banner .next{
    z-index: 9999;
    font-size: 32px;
    background-color: rgba(0,0,0,0.3)
}

/* Position the "next button" to the right */
#banner .next,
.galleryModal .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
#banner .prev:hover,
#banner .next:hover,
.galleryModal .prev:hover,
.galleryModal .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.galleryModal  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Caption text */
.galleryModal .caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

.galleryModal .modal-content img{
    width: 100%;
}

h3.title.special {
    font-weight: 700;
    font-size: 21px;
    font-style: italic;
    /*text-decoration: underline; */
    color:#00903E !important;
}

#navPanel .link.lang a{
    margin-left: 20%;
    margin-right: 20%;
}

#navPanel .btn-menu-down{
    float: right;
    cursor: pointer;
    z-index:999;
    margin-right: 1em;
}

#navPanel .iwell.alt{
    height: 4em;
    width: auto;
}

#navPanel .pull-down-menu{
    /*display: none;*/
    visibility: hidden;
    opacity: 0;
    height: 0;
    max-height: 0;
    /*-moz-transition:  visibility 10.4s, opacity 10.4s ease-in-out;
    -webkit-transition: visibility 10.4s, opacity 10.4s ease-in-out;
    -ms-transition: visibility 10.4s, opacity 10.4s ease-in-out;
    transition: visibility 10.4s, opacity 10.4s ease-in-out;*/
    -moz-transition:max-height 0.5s ease-in-out, height 0.5s  ease-in-out;
        -webkit-transition:max-height 0.5s ease-in-out, height 0.5s  ease-in-out;
        -ms-transition: max-height 0.5s ease-in-out, height 0.5s  ease-in-out;
    transition: max-height 0.5s ease-in-out, height 0.5s  ease-in-out;
}

#navPanel .pull-down-menu.active{
    /*display: block;*/
    visibility: visible;
    opacity: 1; /* changed this line */
    height: auto;
    max-height: 400px;
    transition: max-height .1s ease-out, height 1s  ease-out;
}

#navPanel .link.depth-0.serach{
    display: flex;
    align-items:center;
}

#nav-search-box.alt{
    background-color: #FFF;
    width: 70%;
    display: inline-block;
    height: 3.1em;
    margin-right: 0;
    border-radius: 0;
}

#navPanel .link.depth-0.serach button{
    padding: 0em 2em;
    margin-left: -0.3em;
    border-radius: 0;
}

.link.depth-0 a{
    color:#007533;
}

@media only screen and (max-width: 500px){
    #nav-search-box.alt{
        height: 3.2em;
    }
    
   
}

table.gsc-search-box, 
table.gsc-input{
    margin: 0;
}

table.gsc-search-box tr, 
table.gsc-above-wrapper-area-container tr{
    background-color: transparent !important;
    border-width: 0;
}

table.gsc-search-box td{
    padding: 0 0 0 0.5em;
}

input.gsc-input{
    height: 2.75em !important;
    padding-left: 0.5em !important;
}

input.gsc-input:focus{
    box-shadow:none;
}

.gsc-search-button-v2{
    height: 35px !important;
}