/* Responsive layer on top of the 2012 fixed layout (loaded last). Breakpoints are real viewport px (body has zoom:1.25). */
img{max-width:100%;height:auto}
iframe{max-width:100%}
table{max-width:100%}

/* ---------- tablet / small laptop: fluid width ---------- */
@media (max-width:1290px){
  #wrapper,#header,#footer{width:auto;max-width:1000px;box-sizing:border-box}
  #wrapper{padding:0 16px}
  #footer{padding:0 16px}
  #header{float:none;width:100%}
  #content,#featured{width:100%;box-sizing:border-box}
  #featured{margin-right:0}
  #left{width:62%;margin-right:4%}
  #right{width:34%}
  ul.sidebar li a{display:block;width:100% !important;box-sizing:border-box}
}

/* ---------- tablet portrait / phones: single column ---------- */
@media (max-width:900px){
  body{zoom:1.1}
  #wrapper{padding:0 14px}
  #header{height:auto;overflow:visible;padding-bottom:6px}
  h1#logo{position:relative;top:auto;left:auto;margin:34px 0 0;width:219px;height:78px;float:none}
  h1#logo a{width:219px;height:78px}
  ul#navigation{position:static;display:flex;flex-wrap:wrap;gap:2px 0;margin:6px 0 0;padding:0}
  ul#navigation li{float:none;margin:0;width:33.33%;text-align:left}
  ul#navigation li a{float:none;display:block;padding:8px 4px 8px 0;font-size:15px !important;background-position:left top}
  ul#navigation li a .meta{display:block;font-size:11px}
  ul#navigation li a br{display:none}
  #header #langswitch{top:6px;left:auto;right:0}
  #featured,#filler{display:none}
  #content h2{font-size:22px;line-height:30px}
  #left,#right{float:none;width:100%;margin-right:0;display:block}
  #right{margin-top:24px}
  .img_right,.img_left{float:none;display:block;margin:0 auto 14px}
  p img.img_right{max-width:100%}
  .ul_home{display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0}
  .ul_home li{float:none;width:calc(50% - 10px);margin:0}
  .ul_home li[style]{width:100% !important}
  .ul_home li img{max-width:100%;height:auto}
  .ul_home li > a:not(.button){float:none;display:block;width:auto}
  .ul_home li p{clear:both}
  .ul_ft{display:block}
  .ul_ft li,.ul_ft li.lst{float:none;width:100%;margin:0 0 22px}
  .ul_ft li{overflow:hidden}
  .ul_ft li h5{clear:both}
  .ul_ft li p a.btn_ft{display:inline}
  #footer .ft_form input.fld_ft,#footer .ft_form textarea{width:100% !important;max-width:480px;box-sizing:border-box;float:none}
  .ft_form li{float:none;width:auto !important;margin-bottom:10px}
  .ft_form label{display:block;float:none;width:auto;margin:0 0 4px}
  .footer_b .top{position:static;width:auto;text-align:right;margin-bottom:6px}
  .footer_b p{text-align:left}
  .fld,.fld_area,.fld_ft{width:100%;box-sizing:border-box}
  #left dl.history dt{float:none;width:auto;font-weight:bold}
  #left dl.history dd{float:none;width:auto;margin:0 0 12px}
  .folio_split{display:flex;flex-direction:column-reverse;gap:18px}
  .folio_side{flex:none;max-width:none;width:100%;position:static;max-height:none}
  .folio_grid{flex:none;width:100%;height:auto;min-height:0;overflow:visible;padding-right:0}
  .folio_single{float:none;width:100%}
  .img_folioo{float:none;display:block;margin:12px 0}
  .folio_grid .portfolio_item{width:calc(50% - 6px)}
  .whatsapp-float{width:52px;height:52px;bottom:16px;right:16px}
  .whatsapp-float .whatsapp-tooltip{display:none}
  .button.right,.button.left{float:none}
}

/* ---------- phones ---------- */
@media (max-width:560px){
  body{zoom:1}
  body{font-size:15px}
  #left p,#left li,#right p,#right li{font-size:15px;line-height:23px}
  #content h2{font-size:20px;line-height:28px}
  ul#navigation li{width:33.33%}
  ul#navigation li a .meta{display:none}
  ul#navigation li a{padding:12px 4px 10px 0;background-position:left top}
  .ul_home li{width:100%}
  .folio_grid .portfolio_item{width:100%}
  #langswitch a{padding:6px 10px}
  #left h3{font-size:20px}
  .post .sub{font-size:12px}
  .pager .button{margin:4px 0}
}

#outer{overflow-x:hidden}
@media (max-width:1290px){#filler{padding-left:0;box-sizing:border-box}}
@media (max-width:900px){.ft_links{display:block}.ft_links .ft_col{margin:0 0 20px}}