/* ==========================================================
   FRIULANA FLANGE S.R.L.  -  Corporate Website
   Fixed-width  ·  No animation  ·  Compact technical layout
   ========================================================== */

* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Tahoma, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: #383c42;
  background: #dfe2e6;
  text-align: center;
}
img { border: 0; vertical-align: middle; }
a { color: #1c6b50; text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; }
li { list-style: none; }

/* ---------- Page frame ---------- */
#wrap {
  width: 920px; margin: 0 auto; text-align: left; background: #ffffff;
  border-left: 1px solid #b3b8bf; border-right: 1px solid #b3b8bf;
  border-bottom: 2px solid #10624b;
}

/* ---------- Utility bar ---------- */
#util { height: 22px; background: #ecf1ed; border-bottom: 1px solid #d2d6db; font-size: 10px; color: #7b818a; }
#util .inner { width: 900px; margin: 0 auto; }
#util .links { float: right; padding: 3px 0; }
#util .links a { color: #5d646d; padding: 0 6px; border-left: 1px solid #d2d6db; }
#util .links a:first-child { border-left: 0; }
#util .welcome { float: left; padding: 3px 0; }

/* ---------- Header ---------- */
#header { width: 900px; margin: 0 auto; height: 62px; position: relative; }
#header .logo { float: left; padding: 9px 0; }
#header .logo a { display: block; }
#header .logo .brand { display: block; height: 44px; width: auto; }
#header .logo .mk { float: left; margin-right: 8px; }
#header .logo .mk svg { width: 63px; height: 34px; }
#header .logo .nm { float: left; padding-top: 1px; }
#header .logo .nm b {
  display: block; font-size: 15px; letter-spacing: .5px; color: #10624b; line-height: 1.15;
  font-family: Arial, Helvetica, sans-serif; font-weight: bold;
}
#header .logo .nm span { display: block; font-size: 9px; color: #8b9099; letter-spacing: 1.5px; }
#header .slogan { position: absolute; right: 0; bottom: 12px; text-align: right; font-size: 10px; color: #969ba2; line-height: 1.4; }
#header .slogan strong { color: #4a5560; }

/* ---------- Global navigation ---------- */
#gnb { background: #10624b; border-top: 1px solid #0a4131; height: 28px; }
#gnb ul { width: 900px; margin: 0 auto; }
#gnb li { float: left; }
#gnb li a {
  display: block; height: 28px; line-height: 28px; padding: 0 16px;
  color: #cfe0d6; font-size: 11px; font-weight: bold; letter-spacing: .5px; border-right: 1px solid #2c6b53;
}
#gnb li a:hover { background: #296b52; color: #fff; text-decoration: none; }
#gnb li a.on { background: #0a4131; color: #fff; box-shadow: inset 0 -2px 0 #7cc4a2; }

#subbar { height: 3px; background: #0a4131; border-bottom: 1px solid #06382a; }

/* ---------- Body: sidebar + content ---------- */
#body { width: 900px; margin: 0 auto; }
#body:after { content: ""; display: block; clear: both; }

/* Left navigation */
#lnb { float: left; width: 150px; padding: 14px 0 30px; }
#lnb .tit {
  height: 34px; line-height: 34px; text-align: center; color: #fff; font-size: 12px; font-weight: bold;
  letter-spacing: .5px; background: #296b52; border-bottom: 2px solid #0a4131;
}
#lnb ul { border: 1px solid #d2d6db; border-top: 0; }
#lnb li a {
  display: block; padding: 6px 8px 6px 16px; font-size: 10.5px; color: #4c525a;
  background: #f3f6f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1l3 3-3 3' fill='none' stroke='%232f6b50' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat 7px 10px;
  border-bottom: 1px solid #e6e8eb;
}
#lnb li a:hover { background-color: #ebf0ec; color: #10624b; text-decoration: none; }
#lnb li a.on { background-color: #10624b; color: #fff; font-weight: bold;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1l3 3-3 3' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E"); }
#lnb .box { margin-top: 10px; border: 1px solid #d2d6db; background: #eff4f0; padding: 9px; font-size: 10px; color: #666; line-height: 1.55; }
#lnb .box b { display: block; color: #10624b; font-size: 11px; margin-bottom: 3px; }
#lnb .box .tel { color: #10624b; font-size: 13px; font-weight: bold; font-family: Arial, sans-serif; letter-spacing: -.3px; }

/* Content */
#content { float: right; width: 735px; padding: 14px 0 34px; min-height: 420px; }

/* location / breadcrumb */
.loc { text-align: right; font-size: 10px; color: #8b9099; padding-bottom: 6px; }
.loc a { color: #8b9099; }
.loc b { color: #10624b; }

/* page title */
h2.pgtit {
  font-size: 15px; color: #10624b; font-weight: bold; padding: 2px 0 7px;
  border-bottom: 2px solid #10624b; margin-bottom: 12px; font-family: Arial, Helvetica, sans-serif;
}
h2.pgtit span { font-size: 10px; color: #a0a6ad; font-weight: normal; margin-left: 8px; }
.pgdesc { font-size: 10px; color: #808790; border-bottom: 1px dotted #ccd2da; padding: 6px 0 12px; margin-bottom: 16px; }

/* sub headings */
h3.sub {
  font-size: 11.5px; color: #1e4f3d; font-weight: bold; margin: 16px 0 6px; padding-left: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect x='1' y='2' width='6' height='6' fill='%232f6b50'/%3E%3Crect x='0' y='1' width='6' height='6' fill='%2310624b'/%3E%3C/svg%3E") no-repeat 0 3px;
}
h3.sub:first-child { margin-top: 3px; }
h4.sub2 { font-size: 11px; color: #3a4149; font-weight: bold; margin: 12px 0 5px; padding-left: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Crect x='1' y='2' width='4' height='4' fill='%232f6b50'/%3E%3C/svg%3E") no-repeat 0 5px; }

/* paragraphs & text */
p { font-size: 11px; color: #454a50; margin-bottom: 7px; line-height: 1.55; }
p.small { font-size: 10px; color: #7b818a; }
.indent { padding-left: 12px; }
strong, b { color: #2b333c; }
em { color: #10624b; font-style: normal; font-weight: bold; }

/* dotted lists */
ul.dot { margin: 5px 0 10px 3px; }
ul.dot li { font-size: 11px; color: #454a50; padding: 2px 0 2px 11px; line-height: 1.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect y='2' width='4' height='2' fill='%232f6b50'/%3E%3C/svg%3E") no-repeat 1px 8px; }
ul.dot ul { margin: 1px 0 3px 12px; }
ul.dot ul li { font-size: 10.5px; color: #6a707a; padding: 1px 0 1px 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='2' cy='3' r='1.3' fill='%23aab0b8'/%3E%3C/svg%3E") no-repeat 0 7px; }
ul.num { margin: 5px 0 10px 20px; }
ul.num li { list-style: decimal; font-size: 11px; color: #454a50; padding: 1px 0; }

/* ---------- Data tables ---------- */
table.tbl { width: 100%; margin: 6px 0 12px; border-top: 2px solid #10624b; }
table.tbl th, table.tbl td { border: 1px solid #d5d9dd; padding: 4px 7px; font-size: 10.5px; vertical-align: middle; }
table.tbl th { background: #edf4ee; color: #1e4f3d; font-weight: bold; text-align: center; }
table.tbl td { color: #4a5058; }
table.tbl td.lft { text-align: left; }
table.tbl td.ctr { text-align: center; }
table.tbl th.row { background: #f2f6f2; text-align: center; color: #1e4f3d; }
table.tbl caption { text-align: right; font-size: 10px; color: #969ba2; padding-bottom: 3px; }
table.tbl tr:hover td { background: #fafbfc; }

/* boxes */
.infobox { border: 1px solid #d7dbdf; background: #f3f7f3; padding: 9px 11px; margin: 8px 0 12px; font-size: 10.5px; color: #5c626a; line-height: 1.55; }
.notice { border: 1px solid #d7d3c4; background: #fbf9f2; padding: 8px 11px; margin: 8px 0; font-size: 10.5px; color: #706a54; }

table.layout { width: 100%; }
table.layout td { vertical-align: top; padding: 0; }

.imgframe { border: 1px solid #cbcfd4; padding: 3px; background: #fff; }
.thumbcap { display: block; text-align: center; font-size: 10px; color: #8b9099; margin-top: 3px; }

/* ---------- Home ---------- */
.home-visual {
  position: relative; overflow: hidden; border-bottom: 2px solid #0a4131;
  background: #10624b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect width='30' height='30' fill='%2310624b'/%3E%3Cpath d='M0 30L30 0M-8 22L22 -8M8 38L38 8' stroke='%23356b56' stroke-width='1'/%3E%3C/svg%3E");
}
.home-visual .hero-inner { width: 900px; margin: 0 auto; padding: 16px 0; display: flex; align-items: center; gap: 26px; }
.home-visual .txt { flex: 1 1 auto; color: #fff; }
.home-visual .txt .l1 { font-size: 10px; color: #9cc4b0; letter-spacing: 2px; }
.home-visual .txt .l2 { font-size: 21px; font-weight: bold; font-family: Arial, sans-serif; margin: 4px 0; line-height: 1.15; }
.home-visual .txt .l3 { font-size: 10.5px; color: #bccdc2; line-height: 1.7; }
.home-visual .txt .l4 { font-size: 10px; color: #84b39c; letter-spacing: 1px; margin-top: 10px; text-transform: uppercase; }
.home-visual .hero-video { flex: 0 0 360px; line-height: 0; }
.home-visual .hero-video video { display: block; width: 360px; height: auto; background: #000;
  border: 1px solid #06382a; box-shadow: 0 2px 7px rgba(0,0,0,.4); }

.home-cols { width: 900px; margin: 0 auto; padding: 14px 0; }
.home-cols:after { content: ""; display: block; clear: both; }
.hcol { float: left; width: 288px; margin-right: 18px; }
.hcol.last { margin-right: 0; }
.hcol .hd { border-bottom: 2px solid #10624b; padding-bottom: 4px; margin-bottom: 6px; }
.hcol .hd h3 { display: inline; font-size: 12px; color: #10624b; font-family: Arial, sans-serif; }
.hcol .hd .more { float: right; font-size: 10px; color: #8b9099; padding-top: 2px; }
.hcol p { font-size: 10.5px; color: #5f656c; }
.hcol ul.dot li { font-size: 10.5px; padding: 2px 0 2px 10px; }

.newslist { width: 100%; }
.newslist td { border-bottom: 1px dotted #d7dbdf; padding: 3px 2px; font-size: 10.5px; color: #5f656c; }
.newslist td.date { text-align: right; color: #969ba2; white-space: nowrap; }
.newslist td.n { color: #10624b; font-weight: bold; text-align: center; width: 16px; }

/* ---------- Forms ---------- */
table.form { width: 100%; border-top: 2px solid #10624b; }
table.form th { background: #edf4ee; color: #1e4f3d; text-align: left; padding: 6px 9px; border: 1px solid #d5d9dd; font-size: 10.5px; width: 110px; font-weight: bold; }
table.form td { border: 1px solid #d5d9dd; padding: 5px 9px; font-size: 10.5px; }
table.form input[type=text], table.form input[type=email], table.form select, table.form textarea {
  font-family: Tahoma, Arial, sans-serif; font-size: 10.5px; color: #444; border: 1px solid #b9c0c9; padding: 3px; background: #fff;
}
table.form input[type=text], table.form input[type=email] { width: 230px; }
table.form textarea { width: 96%; height: 108px; }
table.form .req { color: #2f8a5e; }
.btnrow { text-align: center; margin: 12px 0; }
.btn { display: inline-block; padding: 5px 18px; font-size: 11px; font-weight: bold; color: #fff; background: #10624b;
  border: 1px solid #0a4131; cursor: pointer; font-family: Tahoma, Arial, sans-serif; }
.btn:hover { background: #296b52; text-decoration: none; color: #fff; }
.btn.gray { background: #7b818a; border-color: #63696f; }

/* ---------- Sitemap ---------- */
.sitemap { width: 100%; }
.sitemap td { vertical-align: top; width: 33%; padding: 0 8px 16px 0; }
.sitemap h3 { font-size: 12px; color: #10624b; border-bottom: 2px solid #10624b; padding-bottom: 3px; margin-bottom: 5px; font-family: Arial, sans-serif; }
.sitemap li a { display: block; font-size: 10.5px; color: #4c525a; padding: 2px 0 2px 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect y='2' width='4' height='2' fill='%232f6b50'/%3E%3C/svg%3E") no-repeat 0 8px; border-bottom: 1px dotted #e6e8eb; }

/* ---------- Footer ---------- */
#footer { border-top: 2px solid #10624b; background: #ecf1ed; }
#footer .inner { width: 900px; margin: 0 auto; padding: 12px 0 16px; }
#footer .fnav { border-bottom: 1px solid #d7dbdf; padding-bottom: 6px; margin-bottom: 8px; font-size: 10px; }
#footer .fnav a { color: #5d646d; padding: 0 7px; border-left: 1px solid #d2d6db; }
#footer .fnav a:first-child { border-left: 0; padding-left: 0; }
#footer .fnav a.strong { color: #1e4f3d; font-weight: bold; }
#footer address { font-style: normal; font-size: 10px; color: #7b818a; line-height: 1.6; }
#footer .copy { color: #969ba2; margin-top: 3px; }
#footer .best { float: right; font-size: 9px; color: #a7acb2; }

.clear { clear: both; height: 0; font-size: 0; line-height: 0; }

/* ---------- Photo gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; margin: 8px 0 14px; }
.gitem { display: block; border: 1px solid #cfd3d8; background: #fff; padding: 3px; text-decoration: none; }
.gitem:hover { border-color: #10624b; text-decoration: none; }
.gitem img { width: 100%; height: 108px; object-fit: cover; display: block; background: #ebf0ec; }
.gitem .cap { display: block; font-size: 9.5px; color: #6a707a; padding: 3px 2px 1px; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galnote { font-size: 10px; color: #969ba2; margin: 2px 0 10px; }

/* ---------- Process flow diagram (SVG) ---------- */
.flowfig { text-align: center; margin: 12px 0 4px; }
.flowfig svg { width: 700px; max-width: 100%; height: auto; display: inline-block; }
.flowcap { text-align: center; font-size: 10px; color: #8b9099; margin: 2px 0 14px; }
.flowlegend { text-align: center; font-size: 10px; color: #5f656c; margin: 6px 0 2px; }
.flowlegend span { display: inline-block; margin: 0 9px; white-space: nowrap; }
.flowlegend i { display: inline-block; width: 22px; height: 9px; vertical-align: middle;
  margin-right: 5px; border: 1px solid #9aa4b0; border-radius: 5px; }

/* ---------- Product category switches ---------- */
.switches { margin: 4px 0 10px; border-bottom: 1px solid #d7dbdf; padding-bottom: 8px; }
.switch { display: inline-block; padding: 4px 14px; margin: 0 4px 4px 0; font-size: 11px; font-weight: bold;
  color: #3a4551; background: #edf4ee; border: 1px solid #cfd3d8; cursor: pointer;
  font-family: Tahoma, Arial, sans-serif; border-radius: 2px; }
.switch:hover { background: #dfe8e2; color: #10624b; }
.switch.on { background: #10624b; border-color: #0a4131; color: #fff; }
.prodcat { margin-bottom: 6px; }
.prodcat.hide { display: none; }
.catlabel { font-size: 11.5px; font-weight: bold; color: #1e4f3d; margin: 10px 0 4px;
  padding-left: 9px; border-left: 3px solid #3f9e6f; font-family: Arial, sans-serif; }

/* ---------- Video ---------- */
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 14px; }
.vitem { border: 1px solid #cfd3d8; background: #06382a; padding: 3px; }
.vitem video { width: 100%; height: auto; display: block; background: #06382a; }
.vitem .cap { display: block; font-size: 10px; color: #1e4f3d; padding: 4px 2px 1px; text-align: center; font-weight: bold; }

/* ---------- Lightbox (no animation) ---------- */
#lbx { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(9,16,26,.9); text-align: center; }
#lbx.on { display: block; }
#lbx .stage { position: absolute; top: 4%; left: 0; right: 0; bottom: 0; }
#lbx img { max-width: 90%; max-height: 82%; border: 3px solid #fff; box-shadow: 0 0 0 1px #000; cursor: pointer; }
#lbx .cap { color: #e0e8e3; font-size: 12px; margin-top: 10px; font-family: Tahoma, Arial, sans-serif; }
#lbx .cls, #lbx .prev, #lbx .next { position: absolute; color: #fff; font-family: Arial, sans-serif; cursor: pointer; user-select: none; }
#lbx .cls { top: 12px; right: 20px; font-size: 26px; line-height: 1; }
#lbx .prev, #lbx .next { top: 46%; font-size: 40px; padding: 8px 14px; }
#lbx .prev { left: 10px; } #lbx .next { right: 10px; }
#lbx .cls:hover, #lbx .prev:hover, #lbx .next:hover { color: #8fd6b0; }
@media (max-width: 620px){ .videos { grid-template-columns: 1fr; } }