/*general*/ 
html, body {font-family: 'Trade Gothic LT Std', Arial, Helvetica, sans-serif; font-weight: bold; margin:0; padding:0; position: relative;}
body {margin:0; width: 100%; height: 100%; }
ul, li {list-style: none; padding: 0; margin: 0; display: inline-block;}
input {padding: 0; margin: 0; font-family: 'Trade Gothic LT Std', Arial, Helvetica, sans-serif; margin: 0; border: 0;}
img {vertical-align: bottom;}

.click {cursor: pointer;}
.noselect {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

*:fullscreen,
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

.hide-scrollbar::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {display: auto;}

body {background: url(../images/pageBkg2.jpg) no-repeat; background-position: center; background-size: cover; background-color: #feb08c; min-height: 1000px;}
#outer {width: 100%; max-width: 1200px; margin: 0 auto;}

/*-- header --*/
#header {display: flex; padding-top: 55px;}
#logoTitle {flex-grow: 3; display: flex;}
#intro {flex-grow: 7; color: #fff; background-color: #de791c;}
#logo {flex-grow: 1;}
#title {flex-grow: 1.7; color: #00205b;}


#logo img {height: 115px;}
#titleTxt {width: 80%; margin: 0 auto; line-height: 60px;}
#faces {font-size: 38px; line-height: 40px;}
#ofmercy {font-size: 38px; line-height: 40px; min-width: 158px; margin-top:15px;}
#introTxt {text-align: center; font-size: 19px; max-width: 710px; height: 120px; display: flex; vertical-align: middle; width: 100%; margin: 0 auto; align-items: center; justify-content: center; flex-direction: column;}
#line1{max-width: 710px;}
.regMark {font-size: 14px; padding-left: 4px;}

/*-- function --*/
#functions {background-color: #00205b; height: 90px; z-index: 9999; display: flex; flex-direction: row; color: #fff;}
#search, #upload, #share {height: 40px; margin: 25px 0; text-align: center;}
#search {flex-grow: 4;}
#upload {flex-grow: 3; border-left: 2px solid #fff; border-right: 2px solid #fff;}
#share {flex-grow: 3;}

/*search*/
#searchContent {
    width: 90%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#field_holder { width: 76%; height: 100%; position: relative; background-color: #fff; display: inline-block; vertical-align: top; }

#keyword_input { height:100%; width: 95%; padding-left: 5px; font-size: 18px; font-weight: 300; outline: none;}

#searchClear { width: 15px; position:absolute; right: 3%; top: 13px; display: none; }
#keyword_input::-ms-clear {display: none;}
#searchBtn { display: inline-block; width: 23%; height: 100%; vertical-align: top; }

#searchTxt{ color:#fff; font-size: 21px; text-align: center; line-height: 40px; vertical-align: middle; display: block; }


#valid_search { text-align: left; margin-top: 2px; color: #fff; font-size: 14px; margin-left: 5px;}

#searchTip {padding: 5px; font-size:12px !important; font-weight:normal !important; text-align: center;}
#mobileSearch {
    height: auto;
    max-height:255px;
    width: 100%;
    position:relative;
    overflow:scroll;
    background: #de791c;
    z-index:9990;
    overflow-x: hidden;
    color: #00205b;
    display: none;
}

.searchResultTxt {color: #fff;}


.scroll-wrapper {width: 76%;}
/*************** SIMPLE INNER SCROLLBAR ***************/
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 12px;

    z-index: 10000;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #fff; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #002d80; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #00205b; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #001233; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

/*.scrollbar-inner > .scroll-element.scroll-x {display: none;}*/

/*upload*/
#uploadBtn {background-color: #de791c; height: 100%; width: 80%; margin: 0 auto;}
#uploadIcon, #uploadTxt {display: inline-block;}
#uploadIcon {width: 20%; text-align: center;}
#cameraImg {height: 25px; padding:6.5px 0;}
#uploadTxt {width: 78%; font-size: 25px; text-align: center; line-height: 40px; vertical-align: top;}

/*share*/
#shareTxt, #shareIcons, #fbShare, #twShare {display: inline-block;}
#share {text-align: center;}
#shareContent {margin-top: 5px;}
#shareTxt, #shareIcons {vertical-align: middle;}
#shareIcons {margin-left: 10px;}
.shareIcon {height: 30px;}
#shareTxt {color:#fff; font-size: 22px;}
#twShare {margin-left: 5px;}

/*-- mosaic --*/


/*-- carousel --*/
#carousel {padding: 20px 0;}

#carouselTitle {color: #002560; font-size: 26px; margin: 12px 0 10px 4%;}
#carouselTxt, #carouselRefresh {display: inline-block; vertical-align: top;}
#carouselRefresh {margin-left: 12px;}
#carouselRefresh img {height: 20px; vertical-align: middle;}
#photoContainer {margin: 15px 0; height: 146px; overflow: hidden;}
#photoContainer ul {width: 100%; height: 100%;}
#carouselLeft, #carouselRight, #carouselMiddle {vertical-align: middle;}
#carouselLeft, #carouselRight {width: 4%;}
#carouselRight {text-align: right;}
#carouselMiddle {width: 92%; height: 100%;}
#arrowLeft, #arrowRight {color: #00225d; font-size: 120px; font-weight: bold;}


.carouselPhoto {width: 100%; height: 100%;}
.carouselLike {
    background-color:#FFF; 
    position:absolute; 
    bottom: 2px; 
    right: 2px; 
    font-weight: 600;
    border-radius: 60px; 
    padding: 1px;
}
.carouselItem {width: 140px; height:140px; border: 3px solid #fff;}


/*-- responsive --*/
@media (max-width: 1217px) {
    body {min-height: auto; margin-bottom: 360px;}

    #header {flex-direction: column; height: auto; padding-top: 30px;}
    #logoTitle {width: 420px; margin: 0 auto; flex-grow: 1;}
    #logo, #title {flex-grow:1;}
    #logo img {height: 100px;}
    #titleTxt {line-height: 50px;}
    #faces {font-size: 45px; line-height: 47px;}
    #ofmercy {font-size: 45px; line-height: 47px;}
    #intro {flex-grow: 1; width: 100%; margin: 0 auto; margin-top: 12px;}
    #introTxt {font-size: 19px; line-height: 23px; padding: 0.4vw 0; max-width: none;}
    .regMark {font-size: 14px; padding-left: 4px;}
    #line1{max-width: 1020px; padding:18px;}

    #search {flex-grow: 3.3;}
    #upload {flex-grow: 3.1;}
    #share {flex-grow: 3.6;}
    #searchContent {width: 94%; }
    #field_holder, .scroll-wrapper{width: 73%; }
    #searchBtn {width: 25%;}
    #uploadBtn {width: 90%;}

    #arrowLeft, #arrowRight {font-size: 96px;}
}

@media (max-width: 900px) {
    #functions {flex-direction: column; height: auto; padding: 10px 0;}
    #search, #upload, #share {flex-grow: 1; width: 80%; margin: 10px auto;}
    #searchContent {width: 90%;}
    #upload {border: none;}
}

@media (max-width: 767px) {
    body {margin-bottom: 200px;}

    #photoContainer {height: 106px;}
    #carouselLeft, #carouselRight {width: 5%;}
    #carouselMiddle {width: 90%;}
    #carouselBlock {height: 100px;}
    .carouselImage, .carouselItem {height: 100px; width:100px;} 
     #arrowLeft, #arrowRight {font-size: 72px;}

    #closeIcon {height: 60px;}
}

@media (max-width: 640px) {
    #introTxt {font-size: 14px; line-height: 18px; display: block; padding: 14px 0; height: auto;}
    #line1{max-width: 1020px; padding:14px;}
    .regMark {font-size: 10px; padding-left: 4px;}
}


@media (max-width: 550px) {
    #header {padding-top: 20px;}
    #logo img {height: 90px;}
    #logoTitle {flex-direction: column; text-align: center; width: 90%;}
    #title {margin-top: 16px;}
    #titleTxt {line-height: 45px;}
    #faces {font-size: 32px; line-height: 34px; display: inline-block; margin-left: 5px; }
    #ofmercy {font-size: 32px; line-height: 34px; display: inline-block; text-align: right;}
    #intro {margin-top: 6px;}
    

    #search, #upload, #share {width: 95%;}

    #carousel {width: 98%; margin: 0 auto;}
    #arrowLeft, #arrowRight {font-size: 60px;}

}

@media (max-width: 409px) {
    #faces {font-size: 32px; line-height: 34px; display: inline-block; text-align: center; margin-left: 14px;}
    #ofmercy {font-size: 32px; line-height: 34px; display: inline-block; text-align: center;}
}