/* ==========================================================================

	Google Font

========================================================================== */

@import 'https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext';

@import 'https://fonts.googleapis.com/css?family=Oranienbaum&subset=cyrillic,cyrillic-ext,latin-ext';

@font-face {font-family: 'Poppins', sans-serif;font-family: 'Oranienbaum', serif;}

/* ==========================================================================

	Base styles: opinionated defaults

========================================================================== */

body{ background-color:#f9f9f9/*#2F3238*/;font-family: 'Poppins', sans-serif; color:#848484; font-weight:300; font-size:14px; line-height:27px; overflow-x: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, main {display: block}

audio, canvas, video {display: inline-block;*display:inline;*zoom:1}

blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}

h1,h2,h3,h4,h5,h6{ color:#343434}

::-moz-selection {background: #222222;color:#ffF;text-shadow: none;}

::selection {background: #222222;color:#ffF;text-shadow: none;}

a,input,textarea,button,body,img{transition-delay: 0s;transition-duration: 0.6s;transition-property: all;transition-timing-function: ease;}

a {text-decoration: none;outline: none;color: #222222;}

a:hover{ text-decoration:none; color:#222222}

a:focus, img:focus, button:focus, .btn:focus {outline:none;text-decoration: none;}

/* ==========================================================================

	Header styles

========================================================================== */

.header,.header h1,.header h2,.header h3 { padding-top:22px; padding-bottom:3px; color: white;background-color: #26292E;padding: 10px 0;margin: 0px}

.header.header-fixed-top{ width:100%; position:fixed; top:0;/*background-color:rgba(255,255,255,0.9);*/ z-index:60; padding:10px 0}

.header.header-fixed-top .menu-expanded{ padding-top:15px}

.header hgroup{ padding:0 15px; overflow:hidden}

.header hgroup h1{ padding:0; margin:0}

.header hgroup h1 a{ display:block; float:left; max-width:81px}

.main-menu {background-color: transparent;position: fixed;width: 100%;height:100%;top: 0px;right: 0px;z-index:2;}

.menu,.linee {cursor: pointer;}

.menu.over{background-color:rgba(255,255,255,0.8);}

.nav-icon{ float:right;font-family: 'Oranienbaum', serif; display:block; position:relative; text-transform:uppercase; font-size:14px; letter-spacing:4px; color:#222222;}

.menu {transition: all 0.40s ease-out; width:60px; height:30px; cursor:pointer; position:absolute; right:0; top:0; z-index:5; border-radius:100%;}

.nav-icon p{ position:absolute; right:0; top:0; background-image:url(../images/nav.png); background-repeat:no-repeat; background-position:0 7px; padding-left:11px}

.over {transform: scale(100);transition: all 0.350s ease-in;cursor: default;}

.linea1 {background: #222222;height: 2px;width: 15px;position: absolute;right: 33px;top: 33px;z-index:90;transition: all 0.3s;opacity:0}

.linea1.overL1,.linea3.overL3{opacity:1}

.linea2 {background: #222222;height: 2px;width: 15px;position: absolute;right: 33px;top: 38px;opacity: 1;transition: opacity 0.5s;z-index:90;opacity:0}

.linea3 {background: #222222;height: 2px;width: 15px;position: absolute;right: 33px;top: 43px;z-index:90;opacity:0}

.overL1 {animation: closetop 1s forwards;animation-direction: alternate;cursor: pointer;}

.overL2 {opacity: 0;transition: opacity 0.5s;cursor: pointer;}

.overL3 {animation: closebottom 1s forwards;animation-direction: alternate;cursor: pointer;}
.copyrights{
	text-indent:-9999px;
	height:0;
	line-height:0;
	font-size:0;
	overflow:hidden;
}

@keyframes closetop {

0% {transform: translateY(5px) rotate(0deg);}

25% {transform: translateY(5px) rotate(0deg);}

75% {transform: translateY(5px) rotate(-45deg);}

100% {transform: translateY(5px) rotate(-45deg);}

}

@keyframes closebottom {

0% {transform: translateY(0px) rotate(0deg);}

25% {transform: translateY(-5px) rotate(0deg);}

75% {transform: translateY(-5px) rotate(45deg);}

100% {transform: translateY(-5px) rotate(45deg);}

}

.main-menu {visibility: hidden;text-align:center;opacity: 0;transition: all 0.300s;transition-delay: 0s;}

.overmain {visibility: visible;background-color:rgba(255,255,255,0.8);opacity: 1; z-index:60; top:0;padding-top:10%;transition: all 0.400s;

 transition-delay: 0.370s;}

.main-menu ul {list-style-type: none; text-align:center; margin:0; padding:0; }

.main-menu ul li {width:100%; display:inline-block;font-family: 'Oranienbaum', serif; text-transform:uppercase; font-size:30px; margin-bottom:30px; font-weight:400; position:relative;z-index:1;  transition: all 0.400s;transition-delay: 0.370s;}

.main-menu ul li{ position:relative; ; }

.main-menu ul li:after {content: "";position:absolute;bottom:52%; left:0; right:0; margin:0 auto;width:0; height:1px;background:#222222;

z-index:2;transition: width 0.3s; z-index:1}

.main-menu ul li:hover:after{ width:15%; }

.main-menu ul li.active:after{ width:15%;}

.main-menu ul li a {text-decoration: none; color:#222222; position:relative; z-index:2; display:block}

/* ==========================================================================

	Main Wrapper

========================================================================== */

.main-wrapper,.main-wrapper-inner{background-color:#f9f9f9;padding: 60px 0 0;/*position:relative; z-index:6;*/}/*#2F3238*/

.wrapper{/*background-color:#2F3238;*/ padding:0 25px;/*position:relative; z-index:6; margin-bottom:396px*/}

/* ==========================================================================

	Footer

========================================================================== */

.footer{ background-color:#26292E; /*position:fixed; z-index:1;*/ width:100%; padding:20px 0; text-align:center; color:#fff; font-size:14px; letter-spacing:1px; font-weight:400}

.footer a{ color:#fff;}

.footer a:hover{ color:#FFF}

.footer img{ margin:0 auto}

.footer h3{ text-align:center; color:#FFF;font-family: 'Oranienbaum', serif; text-transform:uppercase; letter-spacing:2px; font-size:21px; position:relative}

.footer h3:after{ content:""; margin:0 auto; display:block; position:absolute; bottom:-20px; left:0; right:0; width:63px; height:3px; background-color:#FFF}

.footer p{ line-height:12px; font-weight:300}

.footer-bot{ /*padding-top:20px*/}

.copy-right{ padding-top:14px}

.padding-top{ padding-top:16px}

.made-by i{ color:#e8496a}

.social{ text-align:center; padding:0; margin:0; list-style:none}

.social li{ display:inline-block; margin:0 5px; font-size:12px}

/* ==========================================================================

	Inner

========================================================================== */


.wrapper-inner{ margin:auto; width:100%; max-width:1031px; padding-top:71px; padding-bottom:20px}

.inner-left{ float:left; width:100%; max-width:331px}

.inner-right{ float:right; width:100%; max-width:700px}

.wrapper-inner p{ color:#343434; font-size:13px; line-height:30px; font-weight:400;padding-bottom:20px; font-weight:300}

/* ==========================================================================

	Details Gallery

========================================================================== */

.details-content,.about-content,.contact-wrapper{ overflow:hidden}

.details-left header h3,.about-content h3{ color:#343434; margin-top:0}

.details-left header h4,.details-left header h5{ font-size:13px; margin-top:0; font-weight:400}

.details-left header h4{ font-weight:600; padding-top:22px}

.details-content header{ margin-bottom:67px}

.details-content header h2,.details-content header h3{ font-size:13px; font-weight:400;margin-top:0}

.details-content header h2{ font-weight:600; }

.details-image{ margin-bottom:80px}

/* ==========================================================================

	About

========================================================================== */

.about-content{ margin-bottom:58px}

.about-content header h4{ margin-top:0}

.about-content h3{ padding-bottom:6px}

/* ==========================================================================

	Contact

========================================================================== */

.map-wrapper{ width:100%;height:453px; background-color:#e6e4e4}

.map-wrapper #surabaya {width: 100%;height: 100%;}

.contact-wrapper{ margin-top:80px; margin-bottom:90px;}

.contact-wrapper .phone{ font-size:16px; line-height:17px; font-weight:600; padding-bottom:0; margin-bottom:0}

.contact-wrapper  p a:hover{ text-decoration:underline}

.contact-wrapper header h4{ margin-top:0}

.contact-form{ overflow:hidden; margin-top:43px}

.contact-form label{ font-weight:300; font-size:14px; width:100%; max-width:315px; float:left; margin-bottom:57px}

.contact-form label+label{ float:right}

.contact-form label+label+div+label{ float:none; max-width:100%; margin-bottom:43px}

.contact-form label span{ color:#fb5353}

.contact-form label input,.contact-form label textarea{ background-color:inherit; border:none; border-bottom:1px solid #eeeeee; display:block; width:100%; padding:0 10px; outline:none}

.contact-form label input:focus,.contact-form label textarea:focus{ border-bottom-color:#404040}

.contact-form input[type="submit"]{ border:none; outline:none; cursor:pointer; text-align:center; display:inline-block; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:#FFF; line-height:47px; background-color:#fb5353; padding:0 29px}

.contact-form input[type="submit"]:hover{ background-color:#222222}

.error_message{ color:#e84d49}

#success_page h3,#success_page p{color:#60ca6f }

/* ==========================================================================

	Blog

========================================================================== */



.post { margin-bottom:74px}

.post figure{ margin-bottom:76px}

.post .date{ font-weight:600; font-size:16px; color:#343434}

.post .cat-pan a:hover,.post header h3 a:hover{ text-decoration:underline}

.post header h3{ margin-top:0}

.comments-pan{border-top:1px solid #eeeeee; padding-top:15px}

.comments-pan h3{border-bottom:1px solid #eeeeee; padding-bottom:34px; margin-bottom:52px}

.comments-reply,.reply-pan{ padding:0; margin:0; list-style:none}

.comments-reply li{ display:block; border-bottom:1px solid #eeeeee; overflow:hidden; padding-bottom:51px; margin-bottom:39px}

.comments-reply li figure{ float:left; width:70px; height:70px; background-color:#eeeeee; border-radius:100%; overflow:hidden}

.comments-reply li section{ float:left; padding-left:30px; font-size:13px; line-height:30px; color:#343434;width: 92%;}

.comments-reply li section .date-pan{ font-size:12px; line-height:13px; padding-bottom:25px}

.comments-reply li section h4{font-weight:300; color:#404040; font-size:16px; margin-bottom:6px; margin-top:0}

.comments-reply li section h4 a{ font-size:12px; color:#fb5353;font-weight:400; display:inline-block; padding-left:20px}

.reply-pan{ clear:both; display:block; margin-left:100px;padding-top:39px }

.reply-pan li{ border-bottom:none;border-top:1px solid #eeeeee; padding-bottom:0; margin-bottom:0;padding-top:38px;}

.commentys-form h4{ font-size:24px; font-weight:300}

.commentys-form form{ margin-top:30px}

.commentys-form input[type="text"],.commentys-form input[type="email"],.commentys-form input[type="url"],.commentys-form textarea{ font-size:14px; line-height:22px; color:#404040; padding-bottom:26px; border-bottom:1px solid #eeeeee; width:100%; display:block; border-left:none; border-right:none; border-top:none; background-color:transparent; outline:none}

.commentys-form textarea{ margin-top:57px}

.commentys-form input[type="text"]:focus,.commentys-form input[type="email"]:focus,.commentys-form input[type="url"]:focus,.commentys-form textarea:focus{ border-bottom-color:#000}

.commentys-form input[type="button"]{ padding:0 36px; text-transform:uppercase; display:inline-block; font-size:14px; line-height:47px; color:#FFF; font-weight:300; text-align:center; border:none; outline:none; background-color:#fb5353; margin-top:50px; margin-bottom:60px}

.commentys-form input[type="button"]:hover{ background-color:#ff5c5c}

/*图片列表*/
.img-wrap{border:1px solid #eee;text-align:center;overflow:hidden}
.img-wrap a{display:table-cell;vertical-align:middle;*display:block; overflow:hidden; background-color:#fff}
.img-wrap a:hover{ background-color:#e8eff6}
.photo-list{margin-top:10px;}
.photo-list li{ vertical-align:top; width:188px;*width:191px; text-align:center; padding-bottom:12px; display:inline-block; zoom:1;*display:inline;}
.photo-list li div.img-wrap{ width:160px; height:120px; margin:auto; margin-bottom:3px}
.photo-list li div.img-wrap a{ width:160px; height:120px;*font-size:88px;}
/*图片内容*/
.photo-channel  .tool{ position:relative; height:35px; padding-top:6px}
.photo-channel  .tool .auto,.photo-channel .tool .up,.photo-channel .tool .next{background: url(../images/v9/up-next.png) no-repeat; height:27px; width:31px;margin-right:10px; overflow:hidden; display: inline-block;}
.photo-channel  .tool .auto span,.photo-channel .tool .up span,.photo-channel .tool .next span{ visibility:hidden}
.photo-channel  .tool .auto{background-position: -39px top;}
.photo-channel  .tool .next{background-position: -78px top;}
.photo-channel  .Article-Tool{ position:absolute; right:0; top: 3px; border:none; background:none; font-size:12px; font-weight:normal}
.photo-channel  .tool .stat{ color:#999;}
.photo-channel  .big-pic{ text-align:center; padding:10px 0; border:1px solid #ededed; background-color:#FFFFFF/*#fafcfe*/; position: relative}
.photo-channel  .big-pic #big-pic{display:block;vertical-align:middle;*display:block; overflow:hidden;*font-size:480px;/*width:896px; height:650px*/}
.photo-channel  .big-pic .max{ position:absolute; bottom:0px; right:0px;background: #FFF url(../images/v9/max.png) no-repeat 5px center; z-index:10; padding:5px 5px 5px 20px}
.photo_prev{position:absolute;left:0;top:0;width:50%;height:100%;z-index:5}
.photo_next{ position:absolute; right:0; top:0; width:50%; height:100%; z-index:5}
.photo_prev a,.photo_next a{background-image: url(../images/blank.gif);display:block; width:100%; height:100%; outline:none;}

 .list-pic{ padding:22px 0 16px; height:150px}
 .cont{overflow:hidden; float: left; width:60%; height:80px}
.picthumb{overflow:hidden; float: left; width: 3000px}
 .cont li{ float:left; width:123px; text-align:center; display:block; overflow:hidden}
 .cont li .img-wrap{width:100px; height:75px; margin:0 auto;}
 .cont li .img-wrap a{*font-size:55px;width:100px; height:75px;outline: medium none;}
 .cont li.on .img-wrap{ border:2px solid #ffb017}
 .list-pic .pre, .list-pic .next{float:left; display:block; position:relative;background: url(../images/v9/pic_bg.png) no-repeat;width:110px;height:86px; text-align:center}
 .list-pic .pre{ left:5px;top:-3px; margin-right:14px}
 .list-pic .next{ right:5px; float:right;top:-3px}
 .list-pic .pre .img-wrap, .list-pic .next .img-wrap{width:102px; border:none; padding:4px 2px 8px}
 .list-pic .pre .img-wrap a, .list-pic .next .img-wrap a{*font-size:53px;width:98px; height:72px; padding:0px 5px 0 4px;*padding:0px 5px 5px 0px }
 .list-pic .pre .img-wrap a:hover, .list-pic .next .img-wrap a:hover{ background:none}
 /*.list-pic .next{ right:-8px; float:right;bottom:-2px}*/
.list-pic ul,.list-pic li,.list-pic a,.list-pic div{clear: none}
.picbig img{display: inline-block; height: 72px;}
 .pre-bnt, .next-bnt{margin-top:3px;cursor: hand;!important;cursor: pointer}
 .pre-bnt, .next-bnt, .pre-bnt span, .next-bnt span{background: url(../images/v9/big-btn.png) no-repeat; display:block; width:17px; height:69px; float:left;}
 .pre-bnt:hover,  .next-bnt:hover, .pre-bnt-on, .next-bnt-on{background-position: 0 -78px;}
 .pre-bnt span{background-position: -30px top;}
 .pre-bnt:hover span, .pre-bnt-on span{background-position: -30px -78px;}
 .next-bnt span{background-position: -55px top;}
 .next-bnt:hover span, .next-bnt-on span{background-position: -55px -78px;}
/* endSelect */
#endSelect{top:50%;left:50%;position:absolute;width:230px;height:90px;border:1px solid #8a8a8a;display:none;z-index:200;margin: -45px -115px}
#endSelect .bg{height:100%;width:100%;background:#000;filter:Alpha(Opacity=50);opacity:0.5;}
#endSelect .E_Cont{position:absolute;top:10px;left:26px;color:#fff;font-size:14px;}
#endSelect .E_Cont p{padding:4px 0;zoom:1;overflow:hidden;}
#rePlayBut,#nextPicsBut,#endSelect #endSelClose{background:url(../images/v9/big-btn.png) no-repeat}
#rePlayBut{float:left;width:69px;height:23px;background-position: 0px -167px;}
#nextPicsBut{float:left;width:97px;height:23px;background-position: -100px -167px;margin-left:10px;}
#endSelect #endSelClose{background-position: 0px -217px;position:absolute;top:3px;right:3px;cursor:pointer;width:11px;height:11px;overflow:hidden;z-index:2;}

.photo-channel  .text{ border:1px solid #ddd; background-color:#f3f3f3; padding:8px 10px; zoom:1; margin-bottom:20px}
.photo-channel .relevance{ padding:5px 10px 10px}
.photo-channel .relevance h5,.comment h4{background: url(../images/v9/icon.png) no-repeat left -375px; padding-left:16px;}
.photo-channel .relevance .photo-list{ padding:0; overflow:auto; padding-top:10px}
.photo-channel .relevance .photo-list li{ float:left; width:153px; padding:0}
.photo-channel .relevance .photo-list li .img-wrap{width:110px;height:86px;margin:0 auto;background: url(../images/v9/pic_bg.png) no-repeat; border:none; margin-bottom:6px}
.photo-channel .relevance .photo-list li .img-wrap a{*font-size:59px;width:104px; height:86px; padding:1px 5px 5px 1px }
.photo-channel .relevance .photo-list li .img-wrap a:hover{ background:none}

.box .photo-hot{padding:0 2px}
.photo-hot li{width:119px;*width:50%; text-align:center; padding:5px 0; vertical-align:top}
.photo-hot li div.img-wrap{ width:94px; margin:auto; margin-bottom:5px; height:64px;}
.photo-hot li div.img-wrap a{ width:94px; height:64px;*font-size:48px;}
#big-pic img{display: inline-block;}

#pages .a1{display: none}
#pages span,#pages a{
	width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    border-radius: 50%;
    background-color: #de5e60;
    color: white;
	text-decoration: none;
}
#pages a{background-color: #e4e4e4;color: black}
#pages a:hover{background-color: #de5e60;color: white}
.schthumb li{text-align: center}
.schthumb img{display: inline-block;border-radius: 50%; transition: all .6s ease}
.schthumb img:hover{transform: scale(1.1)}
.schthumb h4{color: #666;font-size: 16px}
.schimgdv{display: inline-block;width: 50%;padding: 5px;}
.schimgdv img:hover{filter: opacity(70%)}
.pf{position: fixed;right: 5px;bottom: 100px;text-align: center;color: #ccc;font-size: 12px;cursor: pointer;padding: 10px;background: #94908d}

.content {
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 20px
	/*width: 280px;*/
}
.videoifr iframe{width: 640px;height: 480px;}
.showpicr{
	position: relative;
}
.showpicr:before{
	content: none;
}
.showpicl{
	position: relative;margin-right: 280px;
}
.xxdes{text-align: center;
    color: #fff;
    margin-top: 30px;
    font-size: 18px;}
@media (max-width:640px)
{
	.header h2{font-size: 20px;}
	.nav li a{padding: 10px 5px}
	.videoifr iframe{width:480px;height: 360px}
}
@media (max-width:1024px)
{
	.content{position: static;width: 100%;}
	.showpicl{margin-right: 0;}
	.cont{display: none}
	.pre-bnt,.next-bnt{display: none}
	/*.list-pic{padding: 22px 10% 16px;}*/
}
@media (max-width:320px)
{
	.list-pic{padding: 22px 5% 16px;}
}
#nav_hg{height: 40px;display: flex;align-items: center;}