/* Úvodní stránka magnetynalednicku.cz a fotomagnetka.cz — vzhled převzatý ze starého webu
   (šablona Buuk). Barva pruhu se liší podle webu: .classic-magnetynalednicku / .classic-fotomagnetka */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body.classic {
    font-size: 87.52%;
    line-height: 1.6875;
    font-family: "Questrial", Arial, sans-serif;
    color: #000;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
.classic h1, .classic h2, .classic h3, .classic h5, .classic p, .classic ul { margin: 0; padding: 0; }
.classic h1, .classic h2, .classic h3, .classic h5 { font-weight: 400; overflow-wrap: break-word; }
.classic h2 { margin-bottom: .66666667em; font-size: 2.25em; line-height: 1.33333333em; }
.classic h3 { margin-bottom: 1em; font-size: 1.75em; line-height: 1.33333333em; }
.classic h5 { margin-bottom: 1em; font-size: 1.125em; font-weight: 700; line-height: 1.33333333em; text-transform: uppercase; }
.classic .title { position: relative; }
.classic h2.title { margin-bottom: 1em; }
.classic h3.title { margin-bottom: 1.5em; }
.classic .title::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 30px; height: 2px; background-color: #000;
}
.classic p { margin-bottom: 1.5em; font-size: 1em; line-height: 1.75em; }
.classic .small { font-size: 81.25%; }
.classic .big { font-size: 112.5%; }
.classic .margin-top { margin-top: 1em; }
.classic .no-bottom { margin-bottom: 0; }
.classic img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
.classic a { color: #968422; }

.classic .button {
    display: inline-block;
    padding: 1em 1.3em;
    margin: 0 .5em 1.2em 0;
    line-height: normal;
    border: 2px solid rgba(0, 0, 0, .25);
    border-radius: 2em;
    font-size: 1em;
    text-transform: uppercase;
    vertical-align: middle;
    text-decoration: none;
    color: rgba(0, 0, 0, .75);
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
.classic .button:last-child { margin-right: 0; }
.classic .button:hover, .classic .button:focus { border-color: #000; color: #000; }
.classic .button.filled { border-color: #000; background-color: #000; color: #fff; }

/* Mřížka */
.classic .grid-container::after { content: ''; display: block; clear: both; }
.classic .thumb { margin-bottom: 1.5em; text-align: center; }
.classic .thumb .photo img { width: 100%; }
.classic .thumb h5 { margin: 1.5em 0; }
.classic .thumb p { padding: 0 .5em; }

/* Rozvržení */
.classic .main { padding-top: .4em; }
.classic .inner { padding: 1.5em; }
.classic .site-title { margin: 0; font-size: 1em; line-height: 1; }
.classic .site-title a { display: inline-block; }
.classic .site-description { margin: 0; color: rgba(0, 0, 0, .5); }
.classic .site-menu { display: none; }

.classic .featured { background-color: #eef2f3; }
.classic-magnetynalednicku .featured { background-color: #fddd4c; }
.classic .featured-content { padding-top: 1.5em; }
.classic .featured-image {
    display: block;
    margin-top: 1.5em;
    animation: fadefromright 2s ease 1 forwards;
}
@keyframes fadefromright { from { opacity: 0; transform: translateX(2em); } to { opacity: 1; transform: translateX(0); } }

/* Náhrada facebookového okna — bez načítání Facebooku */
.classic .fb-card {
    display: block;
    max-width: 300px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #e9ebee;
    background: #fff;
    text-align: left;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    color: #1d2129;
}
.classic .fb-card .fb-name { display: block; font-size: 16px; color: #365899; }
.classic .fb-card .fb-sub { display: block; font-size: 12px; color: #90949c; margin-bottom: 10px; }
.classic .fb-card .fb-btn {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #ced0d4;
    border-radius: 2px;
    background: #f6f7f9;
    font-size: 12px; font-weight: bold;
    color: #4b4f56;
}
.classic .fb-intro { display: block; margin-bottom: .8em; color: #968422; }

/* Patička */
.classic .classic-footer { padding: 3em 1.5em 2em; }
.classic .classic-footer p { margin-bottom: 1em; }

/* Lišta náhledu webů (jen na testovacím serveru) */
.site-preview {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    padding: 6px 10px;
    background: rgba(20, 20, 20, .88);
    color: #fff; font: 13px/1.4 Arial, sans-serif; text-align: center;
}
.site-preview a { color: #9fd3ff; margin: 0 6px; }
.site-preview a[aria-current] { color: #fff; font-weight: bold; text-decoration: none; }
.site-preview-spacer { height: 40px; }

@media screen and (min-width: 38.75em) {
    .classic .main { padding-top: 0; }
    .classic .inner { padding: 3em; }
    .classic .featured-content { position: relative; padding-top: 3em; padding-right: 40%; }
    .classic .featured-image { position: absolute; top: 3em; right: -1em; width: auto; max-width: 40%; margin: 0; }
}
@media screen and (min-width: 46.25em) {
    .classic .grid-container .col { display: inline; float: left; margin-right: 5%; }
    .classic .grid-container .grid4 { width: 30%; }
    .classic .grid-container .grid8 { width: 65%; }
    .classic .grid-container .omega { margin-right: 0; }
    .classic .inner { padding: 4em; }
    .classic .classic-footer { padding: 3em 4em 2em; }
}
@media screen and (min-width: 55em) {
    body.classic { font-size: 100%; }
    .classic .featured-content { padding-right: 50%; }
    .classic .featured-image { top: 3em; max-width: 48%; }
}
@media screen and (min-width: 59.6875em) {
    .classic .inner { padding: 5em; }
    .classic .inner.plogo { padding-top: 0; }
    .classic .inner.logo { padding-top: 1em; padding-bottom: 0; }
    .classic .featured-content { padding-right: 53%; }
    .classic .featured-image { top: 4.5em; max-width: 52%; }
    .classic .table-layout { display: table; width: 100%; }
    .classic .table-cell { display: table-cell; vertical-align: middle; }
    .classic .site-menu ul { margin: 0; padding: 0; text-align: right; list-style: none; }
    .classic .site-menu li { display: inline-block; }
    .classic .site-menu li a {
        display: inline-block;
        padding: .3em .6em; margin: .2em 0;
        text-decoration: none; color: #000;
        transition: color .2s ease-in-out;
    }
    .classic .site-menu li a:hover, .classic .site-menu li.current > a { color: rgba(0, 0, 0, .5); }
    .classic .site-menu li::before {
        content: ''; display: inline-block; position: relative; top: -.25em;
        width: 1em; height: 1px; background-color: rgba(100, 100, 100, .25);
    }
    .classic .site-menu li:first-child::before { content: none; }
    .classic .classic-footer { padding: 3em 5em 2em; }
}
@media screen and (min-width: 68.75em) {
    .classic .featured-content { padding-right: 60%; }
    .classic .featured-image { top: 5em; max-width: 60%; right: -2em; }
    .classic .site-menu li { margin-left: .5em; }
    .classic .site-menu li a { padding: .4em .8em; }
    .classic .site-menu li::before { width: 2em; }
}
@media screen and (min-width: 77.5em) {
    .classic .featured-image { top: 3em; max-width: 600px; right: -2em; }
    .classic .inner, .classic .classic-footer { max-width: 78em; margin: 0 auto; }
}

/* Doladění podle starého webu: prázdné odstavce v jeho HTML dávaly navíc mezery */
.classic main.inner { margin-top: 1.5em; }
.classic-fotomagnetka .main { padding-top: 3.25em; }
.classic .fb-intro { text-decoration: none; }
.classic a[href^="tel:"] { color: inherit; text-decoration: none; }