/*general*/ 
html, body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; 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:'Helvetica Neue', Helvetica, Arial, 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-color: #323437; color: #54565b;}
#outer {width: 100%; max-width: 1200px; margin: 0 auto; background-color: #54565b; }

/*-- header --*/
#header {background-color: #fff; display: flex; padding: 35px 30px;}
#logo, #subhead {flex-grow: 1;}
#logo img {height: 100px;}
#subhead {display: flex; align-items: center; justify-content: center;}
#headerTxt { font-size: 27px; line-height: 32px; color: #54565b; }

/*-- function --*/
#functions {background-color: #c71f3f; height: 90px; z-index: 9999; display: flex; flex-direction: row; color: #fff; font-weight: bold; font-size: 21px;}
#search, #upload, #share {height: 40px; margin: 25px 0; text-align: center;}
#search {flex-grow: 3.1;}
#upload {flex-grow: 4.6; border-left: 2px solid #54565b; border-right: 2px solid #54565b;}
#share {flex-grow: 2.3;}

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

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

#keyword_input { height:100%; width: 95%; padding-left: 5px; font-size: 16px; font-weight: 300; letter-spacing: -0.2px; outline: none;}
#keyword_input::placeholder {letter-spacing: -0.2px; color: #002868; font-size: 16px; font-weight: 300;}

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

#searchTxt{ color:#c1c1c1; 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: #323437;
    z-index:9990;
    overflow-x: hidden;
    color: #fff;
    display: none;
}

.searchResultTxt {color: #fff;}


.scroll-wrapper {width: 74%;}
/*************** 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: #ff8da3; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #ffccd6; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #ff4d70; }


/* 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*/
#upload {display: flex; align-items: center; justify-content: center; padding: 0 10px;}
#uploadBtn {flex-grow: 3.7;}
#hashtag {flex-grow: 5.6;}
#divider {flex-grow: 0.7;}
#uploadBtn {background-color: #ff8da3; height: 100%; margin: 0 2px;}
#uploadIcon, #uploadTxt {display: inline-block;}
#uploadIcon {width: 20%; text-align: center;}
#cameraImg {height: 25px; padding:6.5px 0;}
#uploadTxt {width: 78%; font-size: 22px; text-align: center; line-height: 40px; vertical-align: top;}
#hashtag {display: flex; align-items: center; justify-content: center;}
#hashtagTxt {color: #c1c1c1;}
#hashtagTxt span {color: #fff; font-size: 24px; margin-left: 4px;}
#hashtagIcons {margin-left: 10px;}
#uploadTw, #uploadIns {display: inline-block;}
#uploadIns {margin-left: 4px;}
#hashtag img {height: 21px; vertical-align: baseline;}
#divider {color: #54565b; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.divideLine {width: 2px; height: 12px; background-color: #54565b;}

/*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: 21px; vertical-align: baseline;}
#shareTxt {color:#c1c1c1; }
#twShare {margin-left: 6px;}

/*-- mosaic --*/


/*-- carousel --*/
#carousel {padding: 20px 0; width: 96%; margin: 0 auto; padding-bottom: 350px;}

#carouselTitle {color: #fff; font-size: 25px; font-weight: 600; margin: 12px 0 10px 5%;}
#carouselTxt, #carouselRefresh {display: inline-block; vertical-align: top;}
#carouselRefresh {margin-left: 12px;}
#carouselRefresh img {height: 20px; vertical-align: baseline;}
#photoContainer {margin: 15px 0; height: 158px; overflow: hidden;}
#photoContainer ul {width: 100%; height: 100%;}
#carouselLeft, #carouselRight, #carouselMiddle {vertical-align: middle;}
#carouselLeft, #carouselRight {width: 5%; height: 100%; user-select: none; outline: none;}
#carouselRight {text-align: right;}
#carouselMiddle {width: 90%; height: 100%;}
#arrowLeft, #arrowRight {color: #c71f3f; height: 48px; margin-top: 55px;}
#arrowLeft {background: url(../images/arrow_left.png) no-repeat; background-size: contain; background-position: center;}
#arrowRight {background: url(../images/arrow_right.png) no-repeat; background-size: contain; background-position: center;}

.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: 150px; height:150px; border: 4px solid #c71f3f;}
.carouselName { position: absolute; bottom: 0; left: 0; background-color: #c71f3f; background-color: rgb(199, 31, 63, 0.7); width: 100%; height: 32px;  font-weight: 600; text-transform: uppercase; color: #fff;}
.nameTxt {line-height: 28px; margin-left: 10px;}


/*-- responsive --*/
@media (max-width: 1200px) {
    #functions {flex-direction: column; height: auto; padding: 8px 0;}
    #search, #upload, #share {width: 90%; margin: 10px auto;}
    #searchContent {width: 100%;}
    #upload {border: none; padding: 0; }
    #uploadBtn {flex-grow: 4; margin: 0}
    #divider {flex-grow: 1.2;}
    #hashtag {flex-grow: 4.8;}
    
}

@media (max-width: 850px) {
    #header {flex-direction: column; padding: 30px 0; text-align: center;}
    #logo img {height: 80px;}
    #subhead {margin-top: 18px;}
    #headerTxt {font-size: 24px;}
    #share {height: 28px;}
}


@media (max-width: 767px) {
    #carousel {padding-bottom: 150px;}
    #photoContainer {height: 108px;}
    #carouselLeft, #carouselRight {width: 6%;}
    #carouselMiddle {width: 88%;}
    #carouselBlock {height: 100px;}
    .carouselImage, .carouselItem {height: 100px; width:100px; } 
     #arrowLeft, #arrowRight {height: 24px; margin-top: 42px;}

}

@media (max-width: 700px) {
    #upload {flex-direction: column; height: auto; width: 100%;  padding: 0;}  
    #uploadBtn {width: 90%; margin-bottom: 16px;}
    #divider {display: none;}

}