@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700,300italic,400italic&subset=latin,latin-ext);
* { outline: 0; text-decoration: none; }
body { color: #111; font-size: 16px; background: #fff; font-family: 'Roboto Condensed', sans-serif; color:#111; }


hgroup {display: block; text-align:center; padding:0; margin:0 0 30px 0; width: 100%; overflow: hidden;}
hgroup > h1 { font-size: 28px; color:#111; margin:0; padding:20px 0 0 0; font-weight:600; border-top:1px dashed #888; }
hgroup > h2 { font-size: 18px; color:#888; margin:0; font-weight:300; }

a { color: #f58220; transition:.3s; -webkit-transition:.3s; }
.clear { clear: both; }
.clear.margin { margin:30px 0;}

header { display: block; margin: 0 0 15px 0; }
header a.logo { display: inline-block; height: 150px; width: 100%; overflow: hidden; text-align: center; background: url(../images/logo.jpg) top center no-repeat; }

.language { display:none;}

#container { width: 95%; margin: 20px auto; }
#banner { margin: 0 0 30px 0; }
#content, #tags, #news, #comment, #contact { display: block; width: 100%; padding:0 0 30px 0;  }
#content { min-height:250px;  }

.gallery { 
	width:100%;
	-webkit-column-count:3; 
	-moz-column-count:3; 
	column-count:3; 
	-webkit-column-gap:1em;
	-moz-column-gap:1em;
	column-gap:1em; 
	-webkit-column-rule:1px dashed #888;
	-moz-column-rule:1px dashed #888; 
	column-rule:1px dashed #888; 
}
.gallery .picture { display:block; width:98%; overflow:hidden; position:relative;border:5px solid #333;}
.gallery .picture a img { width:100%;  padding:0; transition:.3s; -webkit-transition:.3s; vertical-align:bottom;}


div.columns { display:flex; flex-wrap:wrap; justify-content:space-between; }
div.columns > .cols { width:18%; padding:10px 10px 30px 10px; margin:0 0 20px 0; text-align:center; display:block; overflow:hidden; border:1px solid #ccc;}
div.columns > .cols:hover { border:1px solid #999;}
div.columns > .cols p.image { height:120px; }
div.columns > .cols p.image a img { height:100%; }
div.columns > .cols p { margin:5px 0; padding:0; }
div.columns > .cols p strong { font-size:18px; color:#E39504; }
div.columns > .cols p.detay { margin:10px 0; min-height:50px; color:#555; font-size:12px; }
div.columns > .cols span { font-size:14px; color:#777; }

ul#pagin {
    padding:0;
    width:400px;
	display:flex;
	flex-wrap:no-wrap;
	justify-content:space-between;
    margin:20px auto;
	list-style:none;
}
ul#pagin li { width:20%; margin:1px; text-align:center; cursor:pointer; border:1px solid #eee; }
ul#pagin li a { display:block; color:#717171; font:bold 11px; padding:10px; background:#f9f9f9;}
ul#pagin li a.current { color:#fff; background:#000;}
ul#pagin li a:hover { background:#fff;}
ul#pagin li a:active,#pagin li a.current:active {}
ul#pagin li a.current:hover {background:#222;}

/*------------------------------------
		NAV
-----------------------------------*/
nav { height: 50px; z-index: 250; position:relative; width: 100%; background:#f58220; margin:0 0 30px 0; }
nav ul { padding: 0; margin:0 auto; text-align:center; display:inline-flex; flex-wrap:no-wrap; justify-content:center; width:100%;}
nav ul li { 
	display: inline-block;
	position:relative;
	width:20%;
}
nav ul li a { 
	display: block;
	height: 35px;
	margin: 0; 
	border-right: 1px solid #ccc; 
	text-decoration: none; 
	font-size: 1.2em; 
	padding: 13px 2% 0 2%; 
	text-align: center; 
	color: #fff; 
	font-weight:500;
}
nav ul li:last-child a { border-right:0; }
nav ul li:hover > a { background: #dc751d; color: #fff; }
nav ul li a.active { background: #dc751d; color: #fff; }

nav ul li ul { display:none; position:absolute;}
nav ul li ul li { display:block; width:100%; background:#222; border-top:1px dotted #111;}

nav ul li:hover > ul { display:block;}
/*------------------------------------
		COLUMN
-----------------------------------*/
#column-area {width:100%; display:inline-block; margin:0; padding:0; }
#column-area .rectangle { margin:40px 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
#column-area .rectangle-wide { margin:40px 0; display:flex; flex-wrap:wrap; justify-content:space-between;}

.item { display:block; width:32%; position:relative;}
.item > a .cover img {width:100%;}
.item > a .title { position:absolute; color:#fff; font-size:30px; left:5%; top:20%;}
.item > a .title p { margin:0; padding:10px; background:rgba(245,130,32,1.00); }
.item > a .title span { margin:0; padding:0 10px; background:rgba(0,0,0,1.00); font-size:26px; }
/*------------------------------------
		COLUMN
-----------------------------------*/
#text-area { padding:40px 0;  display:flex; flex-wrap:wrap; justify-content:space-between; }
#text-area > a {text-align:center; color:#fff; width:32%; margin:0 0 15px 0; }
#text-area > a .dl { display:inline-block; width:100%; position:relative; }
#text-area > a .dl .icon {  display:block; text-align:center; }
#text-area > a .dl .title {  display:block; text-align:center; color:#f58220; font-size:26px; margin:0 0 20px 0; }

#text-area > .dl .content {  display:block;}

/*------------------------------------
		COLUMN
-----------------------------------*/
#comment { padding:40px 0; }
#comment > a { display:block; text-align:center; background:#f58220; color:#fff; padding:10px; width:150px; margin:30px auto;  }

#comment > ul { 
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
 }
#comment > ul li { display:block; padding:20px 0; margin:0 0 15px 0; width:32%; text-align:center; position:relative; background:#eee; }
/*-------------------------------------------
	LIGHTBOX
---------------------------------------------*/

.lightbox { cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background:rgba(0,0,0,.9); background:-webkit-rgba(0,0,0,.9); -webkit-filter: none !important; z-index: 9997; }
.lightbox img { display: block; position: absolute; }
.lightbox-loading { 
	background: url(../images/loading.gif) center center no-repeat; 
	width: 32px; 
	height: 32px; 
	margin: -16px 0 0 -16px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
}
.lightbox-caption { display: none; position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; z-index: 9998; }
.lightbox-caption p { 
	margin: 0 auto; 
	max-width: 70%; 
	display: inline-block;  
	*display: inline;
 	*zoom: 1;
	padding: 10px; 
	color: #fff; 
	font-size: 12px; 
	line-height: 18px; 
}
.lightbox-button { 
	position: absolute; 
	z-index: 9999; 
	background: no-repeat center center; 
	width: 32px; 
	height: 32px; 
	opacity:0.9; 
	-webkit-transition: all 0.3s; 
	-moz-transition:    all 0.3s; 
	-ms-transition:     all 0.3s; 
	transition: 		all 0.3s; 
}
.lightbox-button:hover, .lightbox-button:focus { opacity: 1; }
.lightbox-close { right: 30px; top: 20px; background-image: url('../images/close.png'); }

.lightbox-nav { top: 45%; width:100%; margin-top: -16px; }
.lightbox-nav-next { width: 20px; height: 41px; right: 30px; background: url('../images/product-arrow.png') no-repeat -12px -2px; }
.lightbox-nav-prev { left: 30px; width: 20px; height: 41px; background: url('../images/product-arrow.png') no-repeat -8px -54px; }

/*------------------------------------
		CONTACT
-----------------------------------*/
input, textarea { 
	font-family: 'Roboto Condensed', sans-serif; 
	width:99%; 
	border:1px dashed #888;
	color:#111; 
	margin:0 0 10px 0; 
	display:block; 
	background: #fff; 
	padding: 10px 0; 
	text-indent:10px; 
	font-size: 14px;
}

#map-area { width: 100%; height: 400px; margin:20px 0 0 0; }

.commentform { margin:0; padding:0; width:60%; margin:0 auto; display:block;}
.commentform > input[type="text"],.commentform > textarea{ width:100%; }
.commentform > input[type="submit"] { width: 160px; font-size:18px; background: #f58220; color: #fff; float: right; cursor: pointer; border:none; }
.commentform > p { padding: 3px 10px; float: left; margin: 5px; display: inline-block; background: #93383a; color: #FFF; font-size: 26px; }

.form-area { float: right; width:45%; display:inline-block;}
.form-area > form input[type="text"],.form-area > form textarea{ width:100%; }
.form-area > form input[type="submit"] { width: 160px; font-size:18px; background: #f58220; color: #fff; float: right; cursor: pointer; border:none; }
.form-area > form p { padding: 3px 10px; float: left; margin: 5px; display: inline-block; background: #f58220; color: #FFF; font-size: 26px; }
.form-area > form input[title="code"] { width: 190px; padding: 10px; float: right; }

.contact-area { float: left; width: 40%; padding:0;}
.contact-area p { font-size: 20px; color: #111; margin: 0 0 10px 0;  }


footer { width: 100%; border-top: 1px solid #ccc; padding: 15px 0; }


@media screen and (min-width: 320px) and (max-width: 768px) {
#container { width: 95%; margin: 20px auto; }
nav { height: auto; width: 100%; display: inline-block; }
nav ul { padding: 0; margin: 0; width: 100%; }
nav ul li a { display: inline-block; height: 35px; width: 100%; float: none; margin: 0; border: none; padding: 15px 0; }
nav ul li:last-child a { border: none; }
}