/*general*/ 
html, body {font-family:Arial, Helvetica, sans-serif; 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;}

.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 {font-family: 'Helvetica Neue', sans-serif; background: url(../images/background.jpg) no-repeat center; background-size: cover; background-repeat-y: repeat;}
#outer {width: 100%; max-width: 1200px; margin: 0 auto; }

/*--header--*/
#header {background-color: #fff;}
#logoImg {height: 45px;}
#function {background-color: #003c77;}

/*--function--*/

/*menu*/
#menu {color: #4f91cd;}
#menuBar {width: 95%; margin: 0 auto; padding: 15px 0 5px;    font-family: Arial, Helvetica, sans-serif;}
.menuItem {
    display: inline-block; 
    width: 23.875%;
    margin-right: 1.05%;
    background-color: #eee; 
    text-align: center; 
    padding: 6px 0; 
    border-radius: 1px;
    font-weight: 700;
}
.menuA{text-decoration: none; color: #4f91cd;}
#report{margin-right: 0; float: right;}


/*utils*/
#utils {color: #fff; font-weight: 600; padding: 10px 0; position: relative;}
#search, #upload, #share {display: inline-block; vertical-align: top; text-align: center;}
#shareMobile{display: none;}
#search {width: 35%;}
#upload {width: 32%;}
#share {float: right; margin-right: 21px;}
#shareMobile{float: right;}
#searchTip {text-align:center; font-size:12px;}
/* Hamburger menu stuff */
.topnav {
  /*overflow: hidden;*/
  display: none;
  float: left;
  color:#eee;
  text-decoration: none;
  order: 1;
}

.topnav a {
  float: right;
  display: block;
  background-color: #003c77;
  color:#eee;
  text-align: center;
  padding: 14px 16px;
  text-align: right;
  text-decoration: none !important;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #003c77;
  color: white;
}

.topnav .icon {
  display: none;
}

/*Mosaic Overlay*/
#my_popup{
  width:300px;
  height:137px;
  color: #FFF;
  position: absolute;
  z-index: 5;
  background-color: rgba(0,60,119,.75);
  bottom: 15px;
  left: 15px;
}
.popupText{
  text-align: center;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  .topnav{display: inline-block;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: left !important;
    display: block;
  }
}

#pmCredit {
    width: 200px;
    display: inline-block;
    float: right;
    right: 15px;
}
#pmLogo {
    width: 35px;
    display: inline-block;
}
#pmLogoImg {height: 32px;}
#pmTxt {
    color: #fff; 
    font-family: 'Roboto', sans-serif;
    width: 158px;
    margin-left: 2px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
#powerBy {font-size: 11px; line-height: 15px;}
#pmSite {font-weight: 500; font-size: 15px; letter-spacing: 0.4px;}

#pmCreditMobile {display: none;}

.pmLink {text-decoration: none; color: #fff;}

/*search*/
#search {text-align: left; position:relative; padding:12.5px 0;}
#field_holder, #keyword_input, #searchClear, #searchBtn {display: inline-block;}
#searchHolder {width: 90%; margin: 0 auto;}
#field_holder {width: 74%; position: relative;}
#keyword_input{
    border: none;
    height: 43px;
    line-height: 43px;
    width: 95%;
    padding-left: 5%;
    font-size: 15px;
    font-weight: normal;
}
#keyword_input::-ms-clear {display: none;}
/*#keyword_input::placeholder {
    color: #000;
}*/

#searchClear {
    position:absolute; 
    top: 12px; 
    right: 8px;
    height: 16px;
    display: none;
}
#searchBtn{
    text-align: center;
    width: 22%;
    float: right;
}
#searchBtnTxt {line-height: 40px;font-size: 24px;}
#searchInfo{width:100%; height:14px; text-align:left; position:absolute; top: 48px; font-size:12px; font-style:italic; color:#FFF;}

#clearSearchDiv{display:none; font-family: Arial, San-serif; font-size:10px; color:#b6151b; font-weight:normal; font-style:normal; text-align:center;}

#valid_search {width: 85%; text-align: center; margin-top: 2px; font-size: 14px; position:absolute;}

#mobileSearch {
    position: absolute;
    height: auto;
    max-height:255px;
/*    margin-left: 5%;
    width: 66.6%;*/
    overflow:scroll;
    background: #008fd3;
    color:#FFF;
    z-index:9999;
    overflow-x: hidden;
    display: none;
}

.scroll-wrapper {width: 66.6%; margin-left: 5%;}
.swiperInfo .scroll-wrapper {width: 92%; margin-left: 0; padding-left: 5px !important; padding-right: 17px !important;}
/*************** 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: #008fd3; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #003c77; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #003c77; }

.swiperInfo .scrollbar-inner > .scroll-element .scroll-element_track { background-color: #008fd3; }
.swiperInfo .scrollbar-inner > .scroll-element .scroll-bar { background-color: #003c77; }
.swiperInfo .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #0059b3; }
.swiperInfo .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #003366; }

/* 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: #008fd3;
    border-radius: 12px;
    width: 90%;
    padding: 15px 0;
    margin: 0 5%;
}

#landingButton:hover{
    background: #102c54;
}

#camera, #uploadTxt {display: inline-block; vertical-align: middle;}
#cameraImg {height: 34px;}
#uploadTxt {font-size: 30px; margin-left: 10px;}


/*share*/
#share {padding:15px 0;}
#shareTitle, #shareIcons {display: inline-block; vertical-align: top; height: 34px; padding: 3px;}
#shareTxt {font-size: 24px; line-height: 34px;}
#fbShare, #twShare {cursor: pointer; display: inline-block; margin-left: 10px;}
#fbIcon, #twIcon {height: 32px;}


/*--footer--*/
#footer {background-color: #003c77; margin-bottom: 70px; color: #fff;}

/*carousel*/
#carousel {padding: 20px 30px 20px;}
#carouselTxt {font-weight: 800; font-size: 30px;display: inline-block;}
#carouselBlock{margin-top: 5px;}
#carouselBlock ul {width: 100%;}
#carouselLeft, #carouselRight {width: 5%;}
#carouselMiddle {width: 88%;}
#carouselLeft, #carouselRight, #carouselMiddle {vertical-align: middle;}
#carouselLeft{ text-align: left;}
#carouselRight{ text-align: right;}
#rightArrow{display: inherit;}
.carouselArrow {height: 55px;}


.carouselPhoto {height:159px !important; width:159px !important;}
.carouselItem {border: 5px solid #50849d; position:relative;}

.carouselName{position: absolute;bottom:0; background: rgba(119,144,187,.75); width: 100%; line-height: 26px;}
@media (max-width: 1145px) {
    #uploadTxt {font-size:24px;}
}
/*--resize--*/
@media (max-width: 920px) {  
    #carouselBlock{margin-top: 20px;}
    #uploadTxt {font-size:20px;}
  }
@media (max-width: 515px) {
   #carouselTitle {display: flex; flex-direction: column;}
   #carouselTxt{display: block; margin: 0 auto; order:2;} 
   #pmCredit{display: block; margin: 0 auto; order:1;} 

}

@media screen and (max-width: 767px) {
  #uploadTxt {font-size:25px;}
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
   .carouselPhoto {height:90px !important; width:90px !important;}
   #carouselLeft, #carouselRight {width:10%;}
   #carouselMiddle {width: 77%; }
   .carouselArrow {height: 35px;}
   .carouselName {line-height:20px; font-size:14px;}
}

@media (max-width: 325px) {
   .carouselPhoto {height:60px !important; width:60px !important;}
   #carouselLeft, #carouselRight {width:5% !important;}
   #carouselMiddle {width: 86%; }
   .carouselArrow {height: 20px;}
   .carouselName {line-height:15px; font-size:11px;}
   #searchBtnTxt {font-size:20px;}
}