@import url('reset.css');
@import url('typography.css'); 

body {
background: #878090 url(../img/body_bg.jpg) top repeat-x;
}

#logo_shadow {
background:url(../img/logo_shadow.jpg) top center no-repeat; 	
}

#wrapper {
width:1000px;
margin:0 auto;	
}

#top_header {
height:245px;
}

#logo {
width:175px;
float:left;
}

#all_top_menu {
float:right;
height:245px;
}

#tel_lan_menu {
height:55px;
width:786px;
padding-left:38px;
position:relative;	
}

#tel {
background:url(../img/tel.gif) center 40px no-repeat;
width:29px;
height:55px;
border-right:2px solid #2c2838;
float:left;	
}

#tel_lan_menu p {
padding-left:8px;
padding-top:28px;
height:27px;
width:258px;
}

#lan li {
float:left;
padding:34px 6px 10px 13px;
border-right:2px solid #2c2838;
height:11px;
}

#up_menu {
padding-top:36px;
padding-left:52px;
height:19px;
float:left;
}
#up_menu li {
display:inline;
padding:0 18px;
}


#main_menu {
float:right;
padding-top:96px;
padding-right:5px;
}
#main_menu li {
float:left;
text-align:right;
border-right:2px solid #2c2838;
height:72px;
padding-right:10px;
padding-left:12px;
min-width:98px;
}

#bottom_header {
margin-bottom:19px;
}


#content {
background:#fff url(../img/content_bg.gif) top left repeat-x;	
padding:25px 38px 20px;
border:1px solid #b5b2bc;
}

#footer {
background:#635d71 url(../img/footer_bg.jpg) top center no-repeat;
min-height:95px;
border-top:3px solid #4d4463;
margin-top:14px;
padding:18px 16px 22px 16px;
}


/*-----------Content------------*/
#last_news {
width:554px;
float:left;
}
#last_news div {
padding:4px 0 20px;
}
#last_news div span {
padding-right:17px;
}

.clear {
clear:both;	
}

.spom {
background-color:#625a76;
width:315px;
float:right;
padding:5px 10px 5px 5px;
text-align:right;
position:relative;
}
.spom img {
float:left;
margin-right:5px;
}
.spom a {
position:absolute;
bottom:10px;
right:10px;
width:119px;
}


#bottom_home {
margin-top:29px;
}
.mega, .stend, .irva {
float:left;
}
.mega {
margin-right:29px;
}

.mega img {
margin-bottom:10px;
}
.stend {
margin-right:2px;
}
.date {
text-align:right;	
margin-top:-12px;
margin-bottom:15px;
}

.news_el {
width:100%;
}
.news_el td {
padding-bottom:10px;
}

#pagenavi {
text-align:center;
padding:15px;
width:888px;
}
#pagenavi a, #pagenavi span {
padding:0 2px;
}

.spomew h2 {
margin-bottom:10px;
}


.pom {
margin:15px 0;	
}
.gallery {
float:right;
}
.pom_text {
width:410px;
}

.photogallery_el {
	float:left;
	margin:13px 35px 13px 0;
}
.photogallery_el img {
	border:2px solid #847f8f;
}
.photogallery_el h3 {
text-align:center;
padding:10px 0 13px 0;
}

.photogallery_full a img {
border:2px solid #847f8f;
margin:13px 36px 13px 0;	
}

/*----------------------Menu Gallery-------------------*/
#menuWrapper {
width:1000px;
height:352px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu {
width:1000px;
}
ul.menu li {
float:left;
border-right:2px solid #847f8f;
height:352px;
width:198px;
background-repeat:no-repeat;
background-color:transparent;
}

ul.menu li a {
display:block;
height:337px;
width:198px;
text-align:center;
background:url(../img/menu_gall_bg.png) top repeat-x;
padding-top:15px;	
}
ul.menu li.last {
border-right:none;
width:199px;
}
ul.menu li.last a {
width:199px;
}
.bg0 {
background:url(../img/menuwrapper_bg0.jpg) no-repeat;	
}
.bg1 {
background:url(../img/menuwrapper_bg1.jpg) no-repeat;	
}
.bg2 {
background:url(../img/menuwrapper_bg2.jpg) no-repeat;	
}
.bg3 {
background:url(../img/menuwrapper_bg3.jpg) no-repeat;	
}
.bg4 {
background:url(../img/menuwrapper_bg4.jpg) no-repeat;	
}
.bg5 {
background:url(../img/menuwrapper_bg5.jpg) no-repeat;	
}

/*----------------------Menu Gallery2-------------------*/
#menuWrapper2 {
width:1000px;
height:152px;
background-position:0 -200px;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu2 {
width:1000px;
}
ul.menu2 li {
float:left;
border-right:2px solid #847f8f;
height:152px;
width:198px;
background-repeat:no-repeat;
background-color:transparent;
}

ul.menu2 li a {
display:block;
height:137px;
width:198px;
text-align:center;
background:url(../img/menu_gall_bg.png) top repeat-x;
padding-top:15px;	
}
ul.menu2 li.last {
border-right:none;
width:199px;
}
ul.menu2 li.last a {
width:199px;
}
.bg02 {
background:url(../img/menuwrapper_bg0.jpg) no-repeat;	
}
.bg12 {
background:url(../img/menuwrapper_bg1.jpg) no-repeat;	
}
.bg22 {
background:url(../img/menuwrapper_bg2.jpg) no-repeat;	
}
.bg32 {
background:url(../img/menuwrapper_bg3.jpg) no-repeat;	
}
.bg42 {
background:url(../img/menuwrapper_bg4.jpg) no-repeat;	
}
.bg52 {
background:url(../img/menuwrapper_bg5.jpg) no-repeat;	
}


#login {
background:#3f3b4c url(../img/login_bg.gif) repeat-x;
position:absolute;
top:0;
right:0;
padding:20px 17px 7px;
font-family:Arial, Helvetica, sans-serif;
}
#login_title {
color:#bdb8c9;
margin-bottom:6px;	
}
#login .input_text {
display:block;	
background-color:#a8a3b2;
border:1px solid #272528;
border-bottom:none;
border-right:none;
margin-bottom:8px;
font-family:Arial, Helvetica, sans-serif;
padding:2px 4px;
}
#login .input_submit {
float:right;
background-color:transparent;
border:none;
font-family:Arial, Helvetica, sans-serif;
color:#bdb8c9;
text-decoration:underline;
cursor:pointer;
padding:0;
line-height:12px;
margin-top:-5px;
}
#login .input_submit:hover {
text-decoration:none;
}






/******************************RESPONSIVE******************************/
@media screen and (max-width: 1000px){
	#wrapper{width: 98%; padding: 0 1% 0 1%;}
		#logo{width: 18%;}
			#logo img{width: 100%;}
			#logo_shadow{background: none}

	#top_header{width: 100%; height: auto; display: inline-block;}

	#all_top_menu{width: 80%; height: auto;}
		#tel_lan_menu p{width: auto; margin-right: 10px}
		#up_menu{padding-left: 15px}
	#tel_lan_menu,#main_menu{width: 98%; padding-left: 2%;}

		#main_menu{width: auto; padding: 70px 0 0 0; float: right; text-align: right;}
			#main_menu li{padding: 0 5px 0 10px; width: auto; height: auto; min-width: 0;}
				#main_menu li p{display: none;}


	#bottom_header{width: 100%}
		#menuWrapper,ul.menu,#menu2,#menuWrapper2{width: 100%;}
			ul.menu li,#menu2 li{width: 20%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
			ul.menu li a,#menu2 li a{width: 100%;}


	#last_news{width: 100%; margin: 0; padding: 0; display: inline-block;}
	.spom{float: left; margin-top: 20px;}
	#bottom_home div{width: 33%; margin: 0}
	#bottom_home div img{width: 100%!important; height: auto!important;}
	.stend{width: 30%!important; margin: 0 2% 0 2%!important;}
	.about p,.spomew p{text-indent: 0}
	.about p img, .spomew p img{max-width: 100%; height: auto!important;}

	table{width: 100%!important;}

	#pagenavi{width: 100%; padding: 0; margin: 0}
	h2{width: 100%!important; padding-left: 0; padding-right: 0;}

	#content{padding: 25px 38px 20px!important}

	.photogallery_el{width: 31%; margin: 0 1% 20px 1%;}
		.photogallery_el img{width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
		.photogallery_full a img{width: 30%; margin: 0 1% 20px 1%;}
}

@media screen and (max-width: 840px){
	#logo img{width: auto; height: 150px;}
	#top_header{position: relative; padding-bottom: 50px;}
		#main_menu{width: 100%; padding: 0; position: absolute; left: 0; margin-top: 110px; text-align: center;}
			#main_menu li{display: inline-block; float: none;}
	#login{width: 94%; padding: 20px 3% 20px 3%; position: relative; float: right; margin: 10px 0 0 0;}
		#login .input_text{display: inline-block; float: left; margin-right: 10px}
		#login .input_submit{display: inline-block; float: left; margin: 5px 0 0 0;}
}

@media screen and (max-width: 650px){
	#main_menu{width: 100%; min-height: 36px; background: #3f3b4c url("../img/mobile_menu.png") 98% 3px no-repeat; border-radius: 7px;}
	#main_menu:hover li{display: block;}
		#main_menu li:first-child{margin-top: 36px;}
		#main_menu li{display: inline-block; width: 100%; border: none; padding: 0; display: none;}
			#main_menu li a{display: block; width: 96%; text-align: left; padding: 6px 2% 6px 2%;}

	#menuWrapper{height: auto;}
	#bottom_header{height: 200px;}
	ul.menu li,#menu2 li{width: 100%; height: 40px; background: #3f3b4c!important}
		ul.menu li a,#menu2 li a{height: 40px; line-height: 40px; padding: 0}
	h1{text-align: center;}

	.about p,.spomew p{text-align: justify;}

	.jcarousel-skin-tango .jcarousel-container-horizontal{width: 90%!important; margin: 0 auto; display: none;}
	.gallery{display: none;}

	.photogallery_el{width: 48%; margin: 0 1% 20px 1%;}
	.photogallery_full a img{width: 46%; margin: 0 1% 20px 1%;}
}


@media screen and (max-width: 600px){
	#tel{display: none;}
	#tel_lan_menu{height: auto; text-align: center; width: 100%; padding: 0}
		#tel_lan_menu p{width: 100%; padding: 0; margin: 5px 0 5px 0;}
		#lan li{padding: 0; width: auto; min-width: 0; border: none; margin: 0 10px 0 0;}
		#up_menu{padding: 0; margin: 0; position: relative; top: 4px;}
		#lan,#up_menu{display: inline-block; float: none;}
	#all_top_menu{width: 100%;}
	#logo{width: 100%; text-align: center;}
		#logo img{width: 20%; height: auto;}

	#bottom_home div{width: 100%; margin: 0}
	#bottom_home div img{width: 100%!important; height: auto!important;}
	.stend{width: 100%!important; margin: 10px 0 10px 0!important;}
	.spom{width: 90%; padding: 5%;}

}

@media screen and (max-width: 470px){
	#main_menu{margin-top: 140px}
	#top_header{padding-bottom: 65px;}
	.spom img{width: 100%; height: auto;}
	.spom{text-align: center;}
		.spom h2{margin: 15px 0 15px 0; display: inline-block;}

	.photogallery_el{width: 100%; margin: 0 0 20px 0;}
	.photogallery_full a img{width: 99%; margin: 0 0 20px 0;}
}