/* Vložená data */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,600;0,900;1,300;1,600;1,900&display=swap');

/* NastavenĂ­ posuvnĂ­ku */
/* width */
::-webkit-scrollbar { width: 5px;}
/* Track */
::-webkit-scrollbar-track { background: #eff2f4;}
/* Handle */
::-webkit-scrollbar-thumb { background: #020202;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #0253A9;}

body { width: 100%; font-family: 'Montserrat', sans-serif; margin: 0 0 0 0; font-size: 18px; font-weight: 300; background: #eff2f4; color: #202020;}

/* Rozhraní pro notebook + PC */
@media screen and (min-width: 1100px) {
    #facebody, #facebody-page { width: 100%; min-height: 100vh; position: relative;}

    /* Definice textu */
    .free { width:100%; height: 20px;}
    .free-big { width: 100%; height: 50px;}
    .free-mini { width: 100%; height: 12px;}
    .space { width: 100%; height: 40px;}
    .top-space { width: 100%; height: 80px;}

    h1, .nadpis { font-size: 36px; margin: 0 0 20px 0;}
    h2, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 21px; margin: 0 0 10px 0;}
    .classic-txt-special { font-weight: 700;}
    .classic-txt-seznam { width: calc(100% - 20px); padding: 0 0 0 20px; background: url('../themes.admin/seznam.fw.png') 0 6px no-repeat; background-size: 12px 12px;}
    .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span, .classic-txt-seznam span { font-weight: 900;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a, .classic-txt-seznam a { color: #202020; text-decoration: none;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover, .classic-txt-seznam a:hover { color: #0353b3;}
    
    /* Hlavička webu */
    #facebody header { width: 100%; height: 100vh; background: #FFF;}
    #facebody header #header-face { width: 900px; height: 500px; position: absolute; margin: calc(50vh - 280px) calc(50% - 450px); background: #FFF;}

    #facebody-page header { width: 100%; height: auto; background: #FFF;}
    #facebody-page header #header-face { width: 100%; height: 300px; margin: 0 0 0 0; box-shadow: 0 0 40px rgba(0,0,0,.5); background: #FFF;}

    .header-logo { width: 295px; height: 50px; position: absolute; margin: -60px 0 0 595px; background: url('../themes.admin/logo.fw.png') top no-repeat; background-size: auto 50px;}
    .tatoo-face-back { width: 242px; height: 400px; position: absolute; margin: -60px 0 0 60px; background: url('../themes.admin/tatoo.fw.png') top no-repeat; background-size: cover;}
    .tatoo-face-top { width: 242px; height: 340px; position: absolute; margin: 0 0 0 60px; background: url('../themes.admin/tatoo.white.fw.png') bottom no-repeat; background-size: cover;}
    .header-back { width: 898px; height: 418px; position: absolute; margin: 0; border: 1px solid #bbb; border-radius: 10px; background: url('../themes.admin/back.fw.png') top no-repeat; background-size: cover;}

    .login-face { width: 800px; height: 60px; position: absolute; margin: 440px 0 0 50px;}
    .login-user { width: 269px; height: 60px; position: absolute; margin: 0 0 0 0; border-right: 1px solid #eee;}
    .login-user-contain { width: 240px; height: 40px; position: absolute; margin: 10px 15px; border-bottom: 1px dotted #0253A9; text-align: left;}
    .login-user-contain-id { width: 230px; height: 12px; position: absolute; margin: -20px 5px; font-size: 14px; color: #bbb;}
    .login-password { width: 270px; height: 60px; position: absolute; margin: 0 0 0 270px;}
    .login-password-contain { width: 240px; height: 40px; position: absolute; margin: 10px 15px; border-bottom: 1px dotted #0253A9; text-align: left;}
    .login-password-contain-id {width: 230px; height: 12px; position: absolute; margin: -20px 5px; font-size: 14px; text-align: left; color: #bbb;}
    .login-button { width: 250px; height: 60px; position: absolute; margin: 0 0 0 550px; text-align: left;}
    .login-button-id { width: 250px; height: 1px; position: absolute; margin: 18px 0 0 0; text-align: center; font-weight: 600; border-radius: 12px; color: #FFF; font-size: 20px;}
    
    .login-content { width: 230px; height: 40px; position: absolute; margin: 0; padding: 0 5px; border: none; font-size: 22px; font-family: 'Montserrat', sans-serif; background: rgba(255,255,255,.25);}
    .login-enter { width: 250px; height: 50px; position: absolute; margin: 5px 0 0 0; padding: 10px 0; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; border-radius: 12px; color: #FFF; font-size: 20px; border: 3px solid #0253A9; background: #020202;}
    .login-enter:hover { background: #0253A9; cursor: pointer;}

    .header-top { width: 100%; height: 100px; text-align: left;}
    .header-top-logo { width: 353px; height: 60px; position: absolute; margin: 20px; background: url('../themes.admin/logo.fw.png') top no-repeat; background-size: contain;}
    .header-logout-ID { width: 250px; height: 30px; position: absolute; margin: 35px 0 0 calc(100% - 340px); text-align: right; font-size: 24px;}
    .header-logout-button { width: 48px; height: 48px; position: absolute; margin: 25px 0 0 calc(100% - 80px); border: 1px solid #bbb; border-radius: 100%; cursor: pointer; box-shadow: -5px 0 10px rgba(0,0,0,.5); overflow: hidden; background: #FFF url('../themes.admin/icon.exit.fw.png') left no-repeat; background-size: cover;}
    .header-logout-button:hover { background: #FFF url('../themes.admin/icon.exit.fw.png') right no-repeat; background-size: cover;}

    /* Vlastní navigace webu */
    nav { width: 1100px; height: 180px;}
    .navi-pozice-a, .navi-pozice-b, .navi-pozice-c, .navi-pozice-d, .navi-pozice-e { width: 220px; height: 180px; position: absolute; margin: 20px 0 0 0; text-align: left;}
    .navi-pozice-b { margin: 20px 0 0 220px;}
    .navi-pozice-c { margin: 20px 0 0 440px;}
    .navi-pozice-d { margin: 20px 0 0 660px;}
    .navi-pozice-e { margin: 20px 0 0 880px;}

    .navi-a { width: 120px; height: 120px; position: absolute; margin: 30px 50px;}
    a.navi-a { background: url('../themes.admin/icon.campan.fw.png') center no-repeat; background-size: cover;}
    a.navi-a:hover { background: url('../themes.admin/icon.campan.fw.png') right no-repeat; background-size: cover;}
    .navi-a-active { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.campan.fw.png') right no-repeat; background-size: cover;}
    .navi-a-noactive { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.campan.fw.png') left no-repeat; background-size: cover;}

    .navi-b { width: 120px; height: 120px; position: absolute; margin: 30px 50px;}
    a.navi-b { background: url('../themes.admin/icon.ai.fw.png') center no-repeat; background-size: cover;}
    a.navi-b:hover { background: url('../themes.admin/icon.ai.fw.png') right no-repeat; background-size: cover;}
    .navi-b-active { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.ai.fw.png') right no-repeat; background-size: cover;}
    .navi-b-noactive { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.ai.fw.png') left no-repeat; background-size: cover;}

    .navi-c { width: 120px; height: 120px; position: absolute; margin: 30px 50px;}
    a.navi-c { background: url('../themes.admin/icon.cms.fw.png') center no-repeat; background-size: cover;}
    a.navi-c:hover { background: url('../themes.admin/icon.cms.fw.png') right no-repeat; background-size: cover;}
    .navi-c-active { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.cms.fw.png') right no-repeat; background-size: cover;}
    .navi-c-noactive { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.cms.fw.png') left no-repeat; background-size: cover;}

    .navi-d { width: 120px; height: 120px; position: absolute; margin: 30px 50px;}
    a.navi-d { background: url('../themes.admin/icon.stats.fw.png') center no-repeat; background-size: cover;}
    a.navi-d:hover { background: url('../themes.admin/icon.stats.fw.png') right no-repeat; background-size: cover;}
    .navi-d-active { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.stats.fw.png') right no-repeat; background-size: cover;}
    .navi-d-noactive { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.stats.fw.png') left no-repeat; background-size: cover;}

    .navi-e { width: 120px; height: 120px; position: absolute; margin: 30px 50px;}
    a.navi-e { background: url('../themes.admin/icon.site.fw.png') center no-repeat; background-size: cover;}
    a.navi-e:hover { background: url('../themes.admin/icon.site.fw.png') right no-repeat; background-size: cover;}
    .navi-e-active { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.site.fw.png') right no-repeat; background-size: cover;}
    .navi-e-noactive { width: 120px; height: 120px; position: absolute; margin: 30px 50px; background: url('../themes.admin/icon.site.fw.png') left no-repeat; background-size: cover;}

    /* Hlavní obsahová část webu */
    #content-face { width: 100%; height: auto; padding: 40px 0;}
    article { width: 1050px; min-height: 400px; margin: 0; text-align: left; padding: 24px; border: 1px solid #bbb; border-radius: 10px; background: #f8f9fa;}
    article .nadpis { width: calc(100% - 70px); height: auto; font-size: 36px; padding: 0 0 0 70px; font-weight: 600; color: #0253A9; background: url('../themes.admin/navigace.rev.fw.png') 0 -14px no-repeat; background-size: 70px 70px;}

    /* Technologie */
    section { width: 100%; height: auto; padding: 40px 0;}
    section .nadpis { font-size: 28px; font-weight: 600; color: #013B78;}
    .technology-content { width: 1200px; height: 100px;}
    .technology-content-a, .technology-content-b, .technology-content-c, .technology-content-d, .technology-content-e, .technology-content-f { width: 200px; height: 100px; position: absolute; margin: 0; background: url('../themes.admin/asp.net.core.logo.fw.png') right no-repeat; background-size: cover;}
    .technology-content-b { margin: 0 0 0 200px; background: url('../themes.admin/azure.logo.fw.png') right no-repeat; background-size: cover;}
    .technology-content-c { margin: 0 0 0 400px; background: url('../themes.admin/mssql.fw.png') right no-repeat; background-size: cover;}
    .technology-content-d { margin: 0 0 0 600px; background: url('../themes.admin/node.fw.png') right no-repeat; background-size: cover;}
    .technology-content-e { margin: 0 0 0 800px; background: url('../themes.admin/react.fw.png') right no-repeat; background-size: cover;}
    .technology-content-f { margin: 0 0 0 1000px; background: url('../themes.admin/veu.fw.png') right no-repeat; background-size: cover;}

    /* Spodní část webu */
    #facebody footer { width: 100%; height: 64px; position: absolute; margin: -65px 0; border-top: 1px solid #bbb;}
    #facebody-page footer { width: 100%; height: auto; padding: 40px 0 0 0; border-top: 1px solid #18A4E0; background: #FFF;}
    .bottom-logo-face { width: 740px; height: 60px; text-align: left;}
    .bottom-logo { width: 400px; height: 60px; position: absolute; margin: 0 170px; background: url('../themes.admin/logo.fw.png') top no-repeat; background-size: auto 60px;}
    .footer-id { width: 1100px; height: 64px; text-align: left;}
    .footer-copyright { width: 400px; height: 25px; position: absolute; margin: 20px 0 0 20px;}
    .footer-copyright .classic-txt { font-size: 16px; padding: 3px 0;}
    .footer-creative { width: 198px; height: 24px; position: absolute; margin: 23px 0 0 882px;}
    .romandesign { width: 198px; height: 24px; position: absolute; margin: 0 0 0 0; transition: all 0.35s ease-in-out;}
    a.romandesign { background: url('../themes.admin/creator.fw.png') right no-repeat; background-size: auto 24px;}
    a.romandesign:hover { background: url('../themes.admin/creator.active.fw.png') right no-repeat; background-size: auto 24px;}

    /* Vlastní obsha administrace */
    .contain-images-position { width: 1050px; height: 280px; margin: 0;}
    .contain-images { width: 1048px; height: 298px; position: absolute; margin: -65px 0 0 0; box-shadow: 0 10px 10px rgba(0,0,0,.5); border: 1px solid #202020; background: #FFF url('../themes.admin/back.ai.jpeg') 0 -100px no-repeat; background-size: cover;}

    .tabs-face { width: 1050px; height: 60px;}
    .tabs { width: 1050px; height: 50px; position: absolute; margin: 0; cursor: pointer; transition: all 0.35s ease-in-out; border-radius: 10px;}
    a.tabs { background: rgba(1,1,1,.05);}
    a.tabs:hover { background: rgba(2,83,169,.12);}
    .tabs-obsah { width: 1010px; height: 20px; position: absolute; margin: 0; padding: 15px 20px; font-size: 20px; color: #020202;}
    .tabs-icon { width: 40px; height: 40px; position: absolute; margin: 5px 20px;}
    .tabs-icon img { width: 40px;}
    .tabs-id { width: 700px; height: 20px; position: absolute; margin: 15px 80px; font-size: 20px; color: #020202;}
    .tabs-date { width: 100px; height: 16px; position: absolute; margin: 17px 810px; font-size: 16px; text-align: center; color: #202020;}
    .tabs-size { width: 110px; height: 18px; position: absolute; margin: 16px 925px; font-size: 18px; text-align: right; color: #013B78;}
    .tabs-size span { font-size: 14px; font-weight: 600;}
    .tabs-a, .tabs-b { width: 505px; height: 20px; position: absolute; margin: 15px; font-weight: 900; font-size: 20px; color: #020202;}
    .tabs-b { width: 465px; margin: 0 530px; padding: 15px 20px; border-radius: 10px; font-weight: 600; background: rgba(2,83,169,.12);}

    .videoimage-face { width: 1050px; height: 342px; text-align: left;}
    .videoimage-left { width: 513px; height: 320px; position: absolute; margin: 0; border: 1px solid #202020; text-align: left; overflow: hidden;}
    .videoimage-right { width: 513px; height: 320px; position: absolute; margin: 0 0 0 535px; border: 1px solid #202020; text-align: left; overflow: hidden;}
    .videoimage-left img, .videoimage-right img { width: 515px;}
    .videoimage { width: 515px; height: 322px; position: absolute; margin: 0; border: none; text-align: left;}
}

/* Rozhraní pro tablety */
@media screen and (min-width: 768px) and (max-width: 1099px) {
    #facebody, #facebody-page { width: 100%; min-height: 100vh; position: relative;}

    /* Definice textu */
    .free { width:100%; height: 20px;}
    .free-big { width: 100%; height: 50px;}
    .free-mini { width: 100%; height: 12px;}
    .space { width: 100%; height: 40px;}
    .top-space { width: 100%; height: 80px;}

    h1, .nadpis { font-size: 34px; margin: 0 0 20px 0;}
    h2, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 17px; margin: 0 0 10px 0;}
    .classic-txt-special { font-weight: 700;}
    .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span { font-weight: 900;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #202020;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0353b3;}
}

/* Rozhraní pro smartphone */
@media screen and (min-width: 480px) and (max-width: 767px) {
    #facebody, #facebody-page { width: 100%; min-height: 100vh; position: relative;}

    /* Definice textu */
    .free { width:100%; height: 15px;}
    .free-big { width: 100%; height: 40px;}
    .free-mini { width: 100%; height: 9px;}
    .space { width: 100%; height: 30px;}
    .top-space { width: 100%; height: 65px;}

    h1, .nadpis { font-size: 28px; margin: 0 0 12px 0;}
    h2, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 16px; margin: 0 0 8px 0;}
    .classic-txt-special { font-weight: 700;}
    .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span { font-weight: 900;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #202020;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0353b3;}
}

/* Rozhraní pro mobil */
@media screen and (max-width: 479px) {
    #facebody, #facebody-page { width: 100%; min-height: 100vh; position: relative;}

    /* Definice textu */
    .free { width:100%; height: 10px;}
    .free-big { width: 100%; height: 30px;}
    .free-mini { width: 100%; height: 6px;}
    .space { width: 100%; height: 20px;}
    .top-space { width: 100%; height: 40px;}

    h1, .nadpis { font-size: 20px; margin: 0 0 9px 0;}
    h2, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 14px; margin: 0 0 5px 0;}
    .classic-txt-special { font-weight: 700;}
    .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span { font-weight: 900;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #000;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0353b3;}
}