/* alexopoulospartners.gr — same look as the old site (css/stylesheet.css, 2011): full-screen photo behind a
   955px dark column, Helvetica, white menu with orange #ff9900 for the current item. Mobile layout added. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #000; }
body {
    font-family: Helvetica, Verdana, "Trebuchet MS", Arial, sans-serif;
    font-size: 11px; line-height: 160%; color: #808080; background: #000;
}
h1, h2, h3, h4, h5, p, ul, ol, table { margin: 0 20px; padding: .5em 0; }
ul { list-style-position: inside; }
h1, h2, h3 { color: #fff; }
h1 { font-size: 14px; font-weight: normal; }
h2 { font-size: 15px; font-weight: normal; }
h3 { font-size: 13px; }
p { font-size: 11px; color: #afafaf; line-height: 18px; }
a, a:visited { color: #fff; text-decoration: none; }
a:hover, a.active, a:focus-visible { color: #ff9900; }
a:focus-visible, button:focus-visible { outline: 1px dotted #ff9900; outline-offset: 2px; }
img { border: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Full-screen background photo (was the bgStretcher plugin) */
.bg {
    position: fixed; inset: 0; z-index: 0;
    background: #000 center / cover no-repeat;
}

#container { width: 955px; margin: 0 auto; position: relative; z-index: 2; }
#branding, #navigation, #content { background: rgba(0, 0, 0, .85); }

/* Header */
#branding { height: 120px; position: relative; }
#logo { position: absolute; right: 50px; top: 35px; width: 255px; }
#logo a { display: block; width: 255px; height: 45px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; overflow: hidden; }
.lang { margin-left: 20px; padding-top: 10px; }
.lang a { display: inline-block; padding-top: 5px; background: url(../images/lang_bg.jpg) no-repeat 0 0; }
.nav-toggle { display: none; }

/* Main menu + white marker above the current item (was the spasticNav "blob") */
#navigation { min-height: 90px; position: relative; padding-bottom: 6px; }
#navigation ul { list-style: none; margin: 0 20px; padding: 0; overflow: hidden; }
#navigation ul li { float: left; margin-right: 14px; }
#navigation .main_top_menu { padding-top: 8px; }
#navigation .main_top_menu a { font-size: 15px; display: block; padding: .5em 0; }
#navigation .main_top_submenu { clear: both; }
#navigation .main_top_submenu a { font-size: 11px; color: #afafaf; }
#navigation .main_top_submenu a:hover, #navigation .main_top_submenu a.active { color: #ff9900; }
#blob { position: absolute; top: 0; height: 4px; background: #fff; transition: left .3s ease, width .3s ease; pointer-events: none; }

/* Content: full width, with the projects list on the left, or with a column on the right (home) */
#content { overflow: auto; min-height: 500px; }
#content_main { float: left; width: 955px; min-height: 500px; }
.layout-left #content_main { width: 625px; }
.layout-left #left_column { width: 295px; float: left; padding-top: 4px; }
.layout-right #content_main { width: 650px; }
#left_column ul { list-style: none; margin: 0 0 0 20px; padding: 0; }
#left_column li { padding: 0; }
#content .spacer { clear: both; padding: 10px 0 50px; }

/* Text blocks */
.content_item { overflow: hidden; }
.content_text p { padding-top: 0; }
.content_text ul, .content_text ol { list-style-position: outside; padding-left: 1.4em; color: #afafaf; }
.content_text li p { margin: 0; padding: 0; }
.content_text strong { color: #fff; font-weight: bold; }
img.right_floated { float: right; margin: 0 60px 10px 20px; max-width: 45%; height: auto; }

/* Home: "Latest works" boxes with the sliding caption */
#latest_proj_home { overflow: hidden; }
#latest_proj_home h2 { padding-bottom: 20px; }
.boxgrid { display: block; width: 295px; height: 221px; float: left; overflow: hidden; position: relative; margin: 0 0 20px 20px; }
.boxgrid img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.boxcaption {
    position: absolute; left: 0; top: 160px; width: 100%; height: 100px; padding: 0 20px;
    background: rgba(0, 0, 0, .8); transform: translateY(100px); transition: transform .16s ease-out;
}
.boxgrid:hover .boxcaption, .boxgrid:focus-visible .boxcaption { transform: translateY(0); }
.box-title { display: block; color: #fff; font-size: 12px; font-weight: normal; padding-top: 15px; }
.boxgrid:hover .box-title { text-decoration: underline; }
.box-text { display: block; color: #afafaf; font-size: 12px; line-height: 18px; }

/* Project photos (was AnythingSlider, 600 × 450) */
.slider { width: 600px; margin-top: 2px; }
.slider-window { position: relative; width: 600px; height: 450px; overflow: hidden; background: #000; }
.slider-track { display: flex; margin: 0; padding: 0; list-style: none; height: 100%; transition: transform .5s ease; }
.slider .panel { position: relative; flex: 0 0 100%; height: 100%; }
.slider .panel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.caption-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; color: #fff;
    background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .3s;
}
.slider-window:hover .caption-bottom, .panel.is-current:focus-within .caption-bottom { opacity: 1; }
.slider .arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 60px;
    border: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 22px; cursor: pointer; opacity: 0; transition: opacity .2s;
}
.slider .arrow:hover { color: #ff9900; }
.slider .back { left: 0; }
.slider .forward { right: 0; }
.slider-window:hover .arrow, .slider .arrow:focus-visible { opacity: 1; }
.thumbNav { list-style: none; margin: 6px 0 0; padding: 0; overflow: hidden; }
.thumbNav li { float: left; margin-right: 3px; }
.thumbNav a { display: block; width: 20px; padding-top: 6px; color: #fff; border-top: 2px solid #fff; font-size: 11px; }
.thumbNav a:hover, .thumbNav a.cur { color: #fff; border-top-color: #ff9900; }

h4.titles { font-weight: normal; color: #fff; margin-left: 0; padding-bottom: 0; font-size: 11px; }
p.detail { margin-left: 0; padding: 0; color: #808080; }

/* People / partners */
h2.hum_res_titles { color: #ff9900; }
ul.clients { list-style: none; width: 430px; padding-top: 20px; }
ul.clients li { margin-bottom: 20px; }
ul.clients img { display: block; max-width: 100%; height: auto; }
ul.clients h3, ul.clients p { margin-left: 0; }
ul.clients h3 { font-weight: normal; padding-bottom: 0; }

/* ------------------------------------------------------------- phones & tablets (the old site was desktop-only) */
@media (max-width: 975px) {
    #container { width: auto; }
    #content_main, .layout-left #content_main, .layout-right #content_main, .layout-left #left_column { width: auto; float: none; }
    .layout-left #left_column { padding-bottom: 10px; }
    .slider, .slider-window { width: auto; max-width: 600px; margin-left: 20px; margin-right: 20px; }
    .slider-window { height: auto; aspect-ratio: 4 / 3; }
    .thumbNav { margin-left: 20px; }
    h4.titles, p.detail, ul.clients h3, ul.clients p { margin-left: 20px; margin-right: 20px; }
    ul.clients { margin-left: 0; }
    ul.clients img { margin-left: 20px; }
    #latest_proj_home .boxgrid { width: calc(50% - 30px); }
    ul.clients { width: auto; }
    img.right_floated { margin-right: 20px; }
}
@media (max-width: 640px) {
    #branding { height: 90px; }
    #logo { right: 20px; top: 30px; width: 180px; }
    #logo a { width: 180px; height: 32px; background-size: contain; }
    .nav-toggle {
        display: block; position: absolute; left: 14px; bottom: 10px; width: 36px; height: 30px;
        background: none; border: 0; cursor: pointer;
    }
    .nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after {
        position: absolute; left: 6px; width: 24px; height: 2px; background: #fff; content: "";
    }
    .nav-toggle span:first-child { top: 14px; }
    .nav-toggle span:first-child::before { left: 0; top: -7px; }
    .nav-toggle span:first-child::after { left: 0; top: 7px; }
    #navigation { display: none; min-height: 0; }
    body.nav-open #navigation { display: block; }
    #navigation ul li { float: none; }
    #blob { display: none; }
    #latest_proj_home .boxgrid { width: calc(100% - 40px); float: none; }
    .boxcaption { transform: none; top: auto; bottom: 0; height: auto; padding-bottom: 10px; }
    img.right_floated { float: none; display: block; max-width: calc(100% - 40px); margin: 0 20px 10px; }
}