/*
*
*
*
*
*
*
* HTML Styles
*
*
*
*
*
*
*/
html, body {margin:0; padding:0; -webkit-text-size-adjust:none; background-color:transparent !important;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none; }
*{
-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #323c41;
padding: 0;
}
/*
*
*
*
*
*
*
* Body Styles
*
*
*
*
*
*
*/
@-webkit-keyframes glow {
    to {
         border-color:rgba(255,255,255,.75);
    }
}
@-webkit-keyframes glow2 {
    to {
         border-color:rgba(255,0,0,0);
    }
}
@keyframes glow {
    to {
         border-color:rgba(255,255,255,.75);
    }
}
@keyframes glow2 {
    to {
         border-color:rgba(255,0,0,0);
    }
}
body, p, li, ul, ol, td, font, div{font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: 1em; color:#000; }
ul, li {display:inline-block; zoom: 1; *display:inline; vertical-align:top; list-style:none; margin:0; padding:0;}
table, td {margin:0; padding:0; border:none; border-collapse:collapse; vertical-align:middle !important;}
#footer {
height:auto;
width:100%;
margin:0 auto;
position:relative;
}
.PictureMosaicViewer-canvas{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
outline-style:none;
}
#leftArrowPhotos {height:137px; line-height:120px; text-align:center; cursor:pointer;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#rightArrowPhotos {height:137px; line-height:120px; text-align:center; cursor:pointer;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#arrowLeft, #arrowRight {color:#393e44; font-size:30px;}
.hide {
display:none;
}
#animateOn{display:none; cursor:pointer; position:absolute; bottom:0px; left:0px; z-index:1004; background:#393e44;}
#animateOff{display:none; cursor:pointer; position:absolute; bottom:0px; left:0px; z-index:1005; background:#393e44;}
.powerBtn {height:22px; width:21px; margin:5px auto 0; background: url("../images/power.png") no-repeat center;}
.animateText {color:#FFF; font-size:11px; padding:4px 3px 3px; text-align:center; line-height:1em;}
#carouselArea {
    width:98%;
    position:relative;
    margin-top:26px;
}
#displayContainer {height:110px; width:100%;}
#leftArrowPhotos {display:block; text-align:center; cursor:pointer;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height:33px; width:17px; position:absolute; top:79px; left:0; z-index:2;}
#rightArrowPhotos { display: block; text-align:center; cursor:pointer;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height:33px; width:17px; position:absolute; top:79px; right:0; z-index:2;}


.overlayF {border: 3px solid #fff;box-sizing: border-box;
    -webkit-animation: glow2 .4s forwards;
    -moz-animation: glow2 .4s forwards;
    animation: glow2 .4s forwards;  }

#closeSwiper {height:52px; width:64px; background-color:#FFF; position:absolute; top:0; right:0; z-index:100013; text-align:center; color:#106a37; padding-top: 12px; cursor:pointer;font-size: 45px;}
#closeSwiper:hover {color:grey;}
#swiperPMHolderFS{
    width: 100%;
    height: 100%;
    top:0px;left:0px;
    position: absolute;
}
#swiperPMHolder{
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    position: absolute;
}
.swiper-container {
    width: 100%;
    height: 100%;
    z-index:9 !important;
    padding:0;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    width:100% !important;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

}
.carouselPhoto {height:110px; width:110px;}
.carouselItem {height:110px; width:110px;}
#carouselLeft, #carouselRight {width:6%;}
#carouselBlock {height:110px;}
#carouselMiddle {width:88%;}
/*
*
*
*
*
*
*
*
*PictureMosaicsViewer Styles
*
*
*
*
*
*
*
*/
@-webkit-keyframes glow {
    to {
         border-color:rgba(255,255,255,.75);
    }
}
#navControlBox { position:absolute !important; width:40px; z-index:3 !important; top:5px !important; right:5px !important;}
.navControlBoxFullpage {top:5px !important; right:5px !important;}
#fScreenNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center;background-position:0 0;}
.minScreenNavControl {background-position:0 -40px !important;}
#resetNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center; background-position:0 -80px; margin-top:3px;}
#plusNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center; background-position:0 -120px; margin-top:3px;}
#minusNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center; background-position:0 -160px; margin-top:3px;}
.overlay {border: 3px solid white;box-sizing: border-box;box-shadow: 0px 0px 0px 3px #33b6a8; z-index:1;


}
.overlayS {border: 2px solid white; outline: 2px solid #575757;box-sizing: border-box;
    -webkit-animation: glow 1.0s infinite alternate;
    -moz-animation: glow 1.0s infinite alternate;
    animation: glow 1.0s infinite alternate;
        }


#navControlBox {display:block; position:absolute; width:40px; z-index:3; top:5px; right:5px;line-height: 0px;line-height: 0px;}
#ViewerDisplay {-webkit-tap-highlight-color: rgba(0,0,0,0) !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#fScreenNavControl:hover, #resetNavControl:hover, #plusNavControl:hover, #minusNavControl:hover {	box-shadow:rgba(255,255,255, 0.7) 0 0 0 1px inset;}
#viewer_holder{width:100%; height:auto; max-height:675px; z-index: 0; position:relative;margin:0 auto;}
#pm_viewer{cursor: pointer;
margin:0 0;
position:relative;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 0;
width:100%;
height: 100%;
display:inherit;
}
/* Button Styles */
a{outline:none; 	text-decoration:none;}
.click {cursor:pointer; border:0;}
input {background-color:transparent; border:none; resize:none; outline:none;  -webkit-appearance: caret; -moz-appearance: caret;}

/*
*
*
*
*
*
*
*Word Cloud Tags Style
*
*
*
*
*
*
*/
#weightTags {
padding:10px 15px;
margin:0px;
min-height: auto;
text-align: justify;
text-transform:uppercase;
line-height:5ex;
}

#weightTags a{
color:#fff;
vertical-align:middle;
text-decoration:none;
}

/*
*
*
*
*
*
*
* FANCY BOX styles
*
*
*
*
*
*
*/
.fancybox-inner { overflow:hidden !important; }

/*
*
*
*
*
*
*
*custom text styles
*
*
*
*
*
*
*/
#text_subhead2 {
width:176px;
height:30px;
line-height:45px;
text-align:center;
color:#fff;
font-family: 'GothamBook';
font-size: 25px;
margin-top:10px;
}

/*
*
*
*
*
*
*
*popup styles
*
*
*
*
*
*
*/
#embedImg{width:74px; height:74px; border:2px solid #e65f20; margin:10px 0 0 5px;}
#overlayCloseButtononclick{float:right; margin:5px 5px 0 0;}
#shareInstructions{margin:10px 0 0 5px; width:325px;}
#embedText{margin:5px 0 0 5px; width:325px; word-break:break-all;}
/*#bannerHeader{width: 100%;}
*/#bannerHolder{width:100%; margin-top:0px;display:inline-block; zoom: 1; vertical-align:top; list-style:none; margin:0; padding:0;margin-top: 60px;margin-bottom: 40px;line-height: 35px;}
#bannerLeft{width:50%;display:inline-block; zoom: 1;vertical-align:top; list-style:none; margin:0; padding:0;}
#bannerRight{width:50%;float:right;display:inline-block; zoom: 1; *display:inline; vertical-align:top; list-style:none; margin:0; padding:0;}
#text_subhead2{width:100%;height:65px;font-size:26px;background-color:#46555f;padding:0px;display:inline-block; zoom: 1; *display:inline; vertical-align:top; list-style:none; margin:0; padding:0;padding-top:10px;}
#uploadHeader{width:29%;text-align:center;margin-top:17px;margin-bottom:17px;}
#uploadHeaderButtonTime{width:80%;background-color:#fff;height: 45px;margin-left:24px;cursor: pointer;}
#buttonUpload{width:100%; height:37px; line-height:45px;}
#buttonStyled{width:100%; height:35px; line-height:35px; text-align:left;background-color:#fff;text-align:center;margin-top: 3px;}
/*#uploadButtonText{color:#46555f;text-align:center;font-size:25px;}
#searchHeader{width:33%;text-align:left;margin-top:17px;}
#searchArea{width:70%;float:left;margin-left:10%;}
#field_holder{background:white;}
#socialHeader{width:33%; margin-top:17px;float: right;overflow:hidden;}
#textDiv{width:60%;float:left;display: inline-block;}
#shareButtonText{color:#46555f;text-align:center;font-size:25px; display: inline-block;line-height:45px;}
#shareDiv{width:30%;display: inline-block;margin-top: 3px;margin-left: auto; margin-right: auto;}
#viewer_holder{overflow: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);}*/
#search_holder{position:absolute; z-index:998; top:0px; right:50px; width:232px; display:none;}
#search_controls{background-color:#29292d; width:232px; height:21px;}
#pm_viewer_holder{width:100%;height:675px;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
#pm_viewer{background-color:#fff;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
#search_drop{background: url('/images/searchBg.png') repeat; display:none;}
#viewer_animation{background: url() repeat; position:relative; width:100%; height:100%; margin:auto; cursor:pointer; display:none; z-index:2;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
#viewer_animation_holder{background: url() repeat; position:absolute; width:100%; height:100%; margin:auto; left:0; right:0; top:0; bottom:0; cursor:pointer; display:none; z-index:2;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
#animateSwitch{background: url() repeat; position:absolute; width:100%; height:100%; margin:auto; left:0; right:0; top:0; bottom:0; cursor:pointer; display:none; z-index:1;}

#overlayinfor{display: none;height:auto;width:100%;}
#socialHeaderBottomDiv{width:80%; height:48px;background-color: #fff;margin-left: auto;margin-right: auto;display:block;}
#socialHeaderBottom{width:0px;height: 0px;background-color: #e7e7e7;overflow: hidden;padding-top: 20px;}
#uploadButtonTextBottom{color:#46555f;vertical-align: top;margin:0px;display:inline-block;font-size: 24px;line-height:48px;}
#banner{width:100%;height:auto;}
#exploreBanner{width:100%;height:40px;background-color: #e7e7e7;}
#exploreDiv{margin:0px;padding-top:5px;padding-left: 25px;-webkit-user-select: none;}
#exploreBannerWordMap{width:100%;height:auto;background-color: #94191f;}
#listBanner{width:100%; margin-top:0px;background-color: #e7e7e7;}
.infoHolder{
display:block;
position: absolute;
right:-250px;
width:242px;
z-index:1000;
padding:0px;
vertical-align:top;
text-align:left;
background: transparent url("../images/photoBg.png") repeat;
min-height:128px;
pointer-events:auto !important;
}
.rightInfo{
display:block;
position: absolute;
left:-244px;
width:242px;
z-index:1000;
padding:0px;
vertical-align:top;
text-align:left;
background: transparent url("../images/photoBg.png") repeat;
min-height:128px;
pointer-events:auto !important;
}
.rightBottomInfo{
display:block;
position: absolute;
left:-244px;
width:242px;
z-index:1000;
padding:0px;
vertical-align:top;
text-align:left;
background: transparent url("../images/photoBg.png") repeat;
min-height:128px;
pointer-events:auto !important;
top:-10px !important;
}
.bottomInfo{
display:block;
position: absolute;
right:-242px;
width:242px;
z-index:1000;
padding:0px;
vertical-align:top;
text-align:left;
background: transparent url("../images/photoBg.png") repeat;
min-height:128px;
pointer-events:auto !important;
bottom:2px !important;
}
.infoHolderSearch{
display:block;
position: absolute;
right:-242px;
width:242px;
z-index:1000;
padding:0px;
vertical-align:top;
text-align:left;
background: transparent url("../images/photoBg.png") repeat;
min-height:128px;
pointer-events:auto !important;
}
.loadingInfo{position:absolute; top:0; left:0; width:100%; height:100%; background: transparent url("../images/photoBg.png") repeat; z-index:998; display:none;}
.noData{position:absolute; top:0; left:0; width:100%; height:100%; background: transparent url("../images/photoBg.png") repeat; z-index:998; display:none;}
.infoImgHolder{position:relative;}
.imgInfo {position:relative;}
.photoData{padding:10px;}
.photoName{line-height:normal; margin-left:5px;}
.photoCap{margin:5px; line-height:normal; word-wrap:break-word; max-height:155px; overflow-y:auto;}
.photoCapTitle {margin: 5px;}
.socialData {margin:5px 5px 5px 5px;}
.socialShare {text-align:center; padding-bottom:5px;}
.sPhotoFb{width:24px; height:24px; background:url(../images/fbPhoto.png) no-repeat;}
.sPhotoTw{width:24px; height:24px; background:url(../images/twPhoto.png) no-repeat;}
.embed{width:24px; height:24px; background:url(../images/embedPhoto.png) no-repeat;}
.line {margin-top:10px; width:95%; height:1px; background:#fff; margin: 0 auto;}
#closeB {
height:23px;
width:23px;
right:-14px;
top:-14px;
background: transparent url("../images/closeB.png") repeat;
position:absolute;
}

.shareEmbed {
width:24px;
height:24px;
background:url(../images/embedPhoto.png) no-repeat;

}

.embedOverlay {
background-color: #fff;
height:120px;
left: 50%;
margin-left: -250px;
margin-top: -50px;
outline: 9999px solid rgba(0, 0, 0, 0.5);
position: fixed;
top: 25%;
width: 500px;
z-index: 10000;
}

/*
*
*
*
*
*
*
*Social Media Styles
*
*
*
*
*
*
*/
#shareDiv {position:relative;}

#twitBlock {
position:absolute;
top:9px;
left:0;
height:19px;
width:20px;
}

#instaBlock {
position:absolute;
top:9px;
left:30px;
height:19px;
width:19px;
}

.shareFb {
width:27px;
height:27px;
background:url(../images/fbMos.png) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
margin-left:14px;
}

.shareTw {
width:27px;
height:27px;
background:url(../images/twMos.png) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
margin-left:6px;
}



/*
*
*
*
*
*
*
* search styles
*
*
*
*
*
*
*/
/*#field_holder {height:45px; padding:0 0 0 0px; line-height:35px; width: 100%;width: calc(100% - 35px);padding-left:35px;}

#keyword_input{width:100%; height:45px; border:none;  line-height:35px; font-family: 'Regular', sans-serif; font-size:14px; vertical-align:top;
padding-left: 6px !important;
color:#000;
}

#searchArea {
margin-left:auto;
position: relative;
width: 100%;
height: 45px;
text-align:left;
}

#searchB {
height: 48px;
width: 58px;
background: url(../images/searchButton.png) no-repeat;
background-size: contain;
position:absolute;
top:0px;
right:0px;
}

#valid_search{
height:12px;
position:absolute;
left:10px;
vertical-align:top;
text-align:left;
color:#d3210e;
font-weight:bold;
font-size:11px;
line-height:.7em;
width:181px;
top:36px;
z-index:3000;
}

#valid_search:empty{display:none;}

#loading_search{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
display:none;
background: transparent url("../images/overlay_black.png") repeat;
}
*/
#greyBar {
height:32px;
width:100%;
background:#2f3133;
line-height:32px;
text-align:center;
}
table, td {margin:0; padding:0; border:none; border-collapse:collapse;}


#orientationAlert{
z-index:100000;
display:none;
position: fixed;
width: 100%;
height: 100%;
color: #FFF;
background: #212121 url(../images/orientationAlert.png) no-repeat;
background-size:150px 118px;
padding-top:32%;
background-position:center 15vh;
text-align: center;
font-size:3vw;
font-weight:bold;
top:0;
}

#carouselBlock {
    height: 110px;
}


/*
*
*
*
*
*
*
*
*
* Resize Styles
*
*
*
*
*
*
*
*
*/

#headerImageOne{height: 62px !important; margin-top: 20px;}

#headerImageTwo{
height: 22px !important;
margin-top: 40px;
float:right;
}
/*
*
*
*
*
*
*
*
MEDIA Query @
width up 990px;
*
*
*
*
*
*
*
*/
@media (max-width:990px)  {
/*	#text_subhead2{font-size: 2.62vw !important;}

	#uploadButtonText{font-size: 19px !important;}
	#shareButtonText{font-size: 19px !important;}

	#keyword_input{font-size: 11px !important;}*/
}
/*
*
*
*
*
*
*
*
MEDIA Query @
width up 767px;
*
*
*
*
*
*
*
*/
@media (max-width:767px)  {
/*    #searchClear{
        top:11px !important;

    }
*/
 #rightTable {  width: auto; float: none;}
 .carouselItem {height:75px; width:75px;}
 .carouselPhoto {height:75px; width:75px;}
 #carouselLeft, #carouselRight {width:8%;}
 #carouselBlock {height:75px;}
 #carouselMiddle {width:84%;}
 #arrowLeft, #arrowRight {font-size:25px;}
 #leftArrowPhotos, #rightArrowPhotos {top:65px;}
 #displayContainer {height:75px; width:100%;}
/*    #leftTable {    margin-right: 0;}
    #carouselTitle {    padding-top: 6px;text-align:center;}
    #headerArea{min-width:320px;}
    #carouselArea{margin-top:6px;margin-bottom:6px;width:100%;}


	#valid_search{margin-top:8px !important;}

	#embedTextMain{width:125px !important;float:right !important;}
*/
	#exploreDiv{
	width:100% !important;
	text-align: center !important;
	padding-left: 0px !important;
	}

	.fancybox-opened{width:80% !important;}

	.fancybox-inner{width:100% !important;}

	#animationBox{width:100% !important;}

	.grey_b12 {color:#fff !important;}

	.photoCap {color:#fff !important;}

	.photoName{color:#fff !important;}

	.fancybox-outer{height:auto !important;}

	.embedOverlay{
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	left:0px !important;
	}

	.embed_inner{
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	left:0px !important;
	}

	.red12m{width:auto !important;}

	#infoHolder{
	display: inline-block !important;
	position:relative !important;
	top:0px !important;
	left:0px;
	width: 100%;
	height: auto !important;
	z-index: 99 !important;
	background:#323c41 !important;
	}

	.imgInfo{
	height: 55px !important;
	float:left;
	width:auto !important;
	}
/*
	#searchB {height: 42px !important;width: 49px !important;}

	#uploadButtonText{font-size: 24px !important;}
	#shareButtonText{font-size: 24px !important;}

	#keyword_input{
	margin: 0 !important;
	padding: 0 !important;
	height: 38px !important;
	font-size: 19px !important;
	padding-left: 10px !important;
	}

	#searchHeader{
	margin: 0 !important;
	padding: 0 !important;
	width:100% !important;
	height: 38px !important;
	text-align: center !important;
	}

	#searchArea{
	height: 38px !important;
	width:80% !important;
	margin-right: auto !important;
	margin-left: auto !important;
	display: block !important;
	float:none !important;
	margin-top:4px !important;
	padding-bottom:4px;
	}

 #searchButtonClose{
    height: 28px !important;
   padding-top:10px !important;

 }
 #searchButtonCloseIn{
    height: 28px !important;
    padding-top:10px !important;


 }*/

	#uploadHeader{
	margin: 0 !important;
	padding: 0 !important;
	width:100% !important;
	margin-top:17px !important;
	padding-bottom: 10px !important;
	}

	#uploadHeaderButtonTime{
	width:80% !important;
	margin-right: auto !important;
	margin-left: auto !important;
	display: block !important;
	float:none !important;
	height: 38px !important;
	padding-bottom: 4px;
	}

	#socialHeader{width:0px !important;height: 0px !important;}

	#socialHeaderBottom{width: 100% !important;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 48px;}


	.aboutPhoto{
	width:50% !important;
	float:left !important;
	height: auto !important;
	}

	.photoData{height: auto !important;}

	.photoCap {height: auto !important;}

	.socialShare{width:50% !important;float:right !important;}

	#headerImageOne{
	height:90% !important;
	margin-right: auto !important;
	margin-left: auto !important;
	display: block !important;
	margin-top:10px !important;
	}

	#headerImageTwo{
	height:90% !important;
	float: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
	display: block !important;
	margin-top:20px !important;
	}

	#bannerLeft{width:100% !important;height:50% !important;}

	#bannerRight{width:100% !important;height:20% !important;}
/*
	#field_holder {height: 38px !important;padding: 0 !important;padding-left:35px !important;}*/
}


/*
*
*
*
*
*
*
*
MEDIA Query @
width up 441px;
*
*
*
*
*
*
*
*/
@media (max-width:441px)  {
	#text_subhead2{
	height: 45px !important;
	font-size: 15px !important;
	line-height: 17px !important;
	}
    #bannerHolder{    line-height: 40px;text-align: center;    margin-top: 20px;    margin-bottom: 20px;    line-height: 40px;}
}
/*
*
*
*
*
*
*
*
MEDIA Query @
width up 360px;
*
*
*
*
*
*
*
*/
@media (max-width:360px)  {
/*	#uploadButtonTextBottom{font-size: 20px !important;}
	#shareButtonTextBottom{font-size: 20px !important;}
	#keyword_input{font-size: 14px !important;}*/
}


/*
*
*
*
*
*
*
*
New Style since Kingfisher
*
*
*
*
*
*
*
*/

a, abbr, acronym, address, applet, b, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, nav, object, ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, title, tr, tt, u, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

body {margin: 0; width: 100%; height: 100%;}

/* general use */
.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 */
}

/* Bannher Header */
#bannerHeader {background-color: #323c41; height: 90px;}
#logo {display: inline-block;}
#logoImg {height: 50px; margin: 20px;}
#languageSetting {display: inline-block; float: right; margin: 26px;}
.language {display: inline-block; margin-right: 10px; height: 34px;}
.langImg {height: 100%;}

/* Header */
#header {
    background: url("../images/headerBg.png") repeat; 
    height: 45vw;
    background-size: 117.2vw 27.3vw;
    background-position-y: 50%;
}

#oneTxt, #conversTxt {
    color: #323c41;
    /*font-family: 'Helvetica', sans-serif;*/
    font-family: arial,ｍｓ ｐゴシック,ms pgothic,돋움,dotum,helvetica,sans-serif;
    font-weight: bold;
    letter-spacing: 0.05em;
}
#oneTxt {font-size: 12.8vw; line-height: 10vw; text-transform: uppercase;}
#conversTxt {font-size: 12.8vw; line-height: 9.5vw; text-transform: lowercase;}

#instructDiv {margin-top: 3vw; max-width: 820px; text-align: justify;}
#instructTxt {
    color: #fff;
    /*font-family: 'Helvetica', sans-serif;*/
    font-family: arial,ｍｓ ｐゴシック,ms pgothic,돋움,dotum,helvetica,sans-serif;
    line-height: 4vw;
    letter-spacing: 0.1vw;
    font-size: 3vw;
}

#txtContent {
    padding: 6vw 5% 3.2vw;
    margin: 0 auto;
    max-width: 830px;
    height: 35.8vw;
}

/* function top */
#functionTop {    
    background-color: #4c543c;
    height: 90px;
    
}

#functionContent {
    max-width: 1200px;
    min-width: 730px;
    margin: 0 auto;
    width: 50%;
    padding: 25px;
    text-align: center;
}

#upload, #search {
    display: inline-block;
    height: 40px;
}

/*-- upload --*/


#uploadBtn {
    background-color: #323c41;
    width: auto;
    height: 100%;
    position: relative;
    padding-left: 20px;
    padding-right: 15px;
}

#camera {
    height: 20px;
    position: absolute;
    left: 15px;
    top: 10px;
}

#uploadTxt {
    color: #fff;
    font-size: 16px;
    padding-top: 12px;
    padding-left: 30px;
}



/* --search-- */

#search {
    width: 400px;
    margin-left: 20px;
    vertical-align: top;
    height: 34px;
    border: 3px solid #323c41;
}

#searchContent {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
}

#searchButtonCloseIn {
    background:#323c41;
    position: absolute;
    right: 0;
    width: 15%;
    height: 100%;
    text-align:center;
}

#searchButtonClose {
    background: #323c41;
    position: absolute;
    right: 0;
    width: 15%;
    height: 100%;
    text-align:center;
    display: none;
}

.menuArrow {
    margin-top: 5px;
    font-size: 26px;
    color: #33b6a8;
}

#searchBtn {
    position: absolute;
    left: 3%;
    top: 6px;
}

#searchBtnImg {
    width: 23px;
}

#field_holder {
    width: 85%;
    height: 34px;
    position: relative;
}

#keyword_input {
    margin-top: 12px;
    width: 75%;
}

#searchClear {
    width: 15px;
    position:absolute; 
    right: 2%;
    top: 12px;
    display: none;
}

#valid_search {
    text-align: left;
    margin-top: 6px;
    color: #fff;
}
#searchTip {padding:6px 0 0; font-size:11px !important; font-weight:normal !important;}
#mobileSearch {
    height: auto;
    max-height:255px;
    width:100%;
    margin:0 auto;
    position:relative;
    overflow:scroll;
    background: #33b6a8;
    z-index:99;
    overflow-x: hidden;
    margin-top: -3px;
    display: none;
}


#searchFrom {margin:0;}

/* mosaic */
#mosaic {
    max-width: 100%;
    background:#FFF;
}


/* footer */
#footer {
    
    background-color: #f0efea;
    height: 220px;
}

#footerContent {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 35px;
    padding-bottom: 35px;
}

#carousel, #tags {
    width: 500px;
    height: 150px;
    display: inline-block;
    vertical-align: top;
}

/*-- carousel --*/

#carousel {
    margin-left: 50px;
    position:relative;
}
#carouselTitle {
    text-align: center;
    padding: 9px;
}

.verticalLine {
    border-left: 1px solid #000;
    margin: 0 5px;
    height: 22px;
    vertical-align: text-bottom;
}

#newest {
    display: inline-block;
    font-size: 22px;
}


/*-- tags --*/
#tags {
    float: right;
    margin-right: 50px;
}

#tagContent {
    width: 100%;
    height: 100%;
    background-color: #393e44;
}

#tagTitle {
    padding: 9px 9px 0;
}

#tagTitleTxt {
    font-size: 22px;
    color: #79c8b2;
    text-transform: uppercase;
}


/*  banner footer */

#bannerFooter {
    background-color: #4c543c;
    height: 70px;
}

@media (min-width: 922px) {
    #header {
        height: 415px; 
        background: url("../images/headerBg.png") 50% / 1083px 252px repeat;
    }
    #txtContent {height: 330px; padding: 55px 5% 30px;}
    #oneTxt, #conversTxt {font-size: 122px;}
    #oneTxt {line-height: 95px;}
    #conversTxt {line-height: 90px;}
    #instructDiv {margin-top: 40px;}
    #instructTxt {font-size: 26px; letter-spacing: 1.2px; line-height: 30px;}


}


@media (max-width: 1200px) {

    #carousel {margin-left: 10px;}
    #tags {margin-right: 10px;}
}

@media (max-width: 1040px) {
    #footer {height: 390px;}
    #footerContent {padding: 30px 0;}
    #carousel, #tags {display: block; margin:0 auto;}
    #tags {float: none; margin-top: 30px;}
}

@media (max-width: 767px) {
    #bannerHeader {height: 130px;}
    #logo, #languageSetting {display: block; }
    #logoImg {margin-bottom: 10px;}
    #languageSetting {
        float: none; 
        margin: 0;
        margin-left: 20px;
    }
    .langImg {height: 80%;}

    #functionTop {height: 150px;}
    #functionContent {min-width: auto; width: 80%}
    #upload, #search {display: block; width: 100%;}
    #uploadBtn {width: 100%; padding: 0;}
    #camera {left: 10px;}
    #search {margin: 0; margin-top: 20px;}
    #keyword_input {width: 70%;}
    #mobileSearch{ margin-top: -5px; }
    #searchTip {margin-top: 5px;}

}

@media (max-width: 550px) {
/*    #txtContent {
        min-width: auto;
        padding: 30px;
        width: 80%;
    }
    #oneTxt {
        font-size: 15vw;
        line-height: 13vw;
    }
    #conversTxt {
        font-size: 11vw;
        line-height: 10vw;
    }
    #instructTxt {font-size: 3.5vw;}*/

    #footer {height: auto;}
    #footerContent {width: 80%;}
    #carousel, #tags {width: 100%;}
    #tags {height: auto;}
    #tagContent {min-height: 150px; height: auto;}

    #newest {font-size: 20px;}
    #tagTitleTxt {font-size: 18px;}

}