/* Vložená data */
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext');

body { width: 100%; font-family: 'Quicksand', sans-serif; margin: 0 0 0 0; font-size: 22px; color: #efefef; background: #f2f2f2;}

/* Rozhraní pro notebook + PC */
@media screen and (min-width: 1100px) {
    #facebody { width: 100%; height: auto; 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;}

    .nadpis { font-size: 40px; font-weight: 300; margin: 0 0 0 0; text-align: center;}
    .classic-txt { font-size: 18px; margin: 0 0 8px 0; text-align: justify;}
    .classic-txt-special { font-size: 18px; margin: 0 0 8px 0; text-align: left;}
    .classic-txt span { font-weight: bold;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #222;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0F52BA;}

    /* Hlavička webu */
    #header-face { width: 100%; height: 90vh; position: absolute; background: url('../themes/wall.png') top; -webkit-animation:100s scroll infinite linear; -moz-animation:100s scroll infinite linear; -o-animation:100s scroll infinite linear; -ms-animation:100s scroll infinite linear; animation:100s scroll infinite linear; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 100%);}
    @-webkit-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-moz-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-o-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-ms-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }

    /* Vlastní vizitka */
    .vizitka { width: 542px; height: 300px; position: absolute; margin: calc(100vh - 450px) 0 0 calc(50% - 271px); border-radius: 20px; border: 2px solid #f2f2f2; background: rgba(0,0,0,.25) url('../themes/vizitka.png') top no-repeat; background-size: cover;}

    /* Spodní část webu */
    #bottom-face { width: 100%; height: 70px; position: absolute; margin: calc(100vh - 70px) 0 0 0;}
    .copyright { width: 600px; height: 20px; position: absolute; margin: 30px 0 0 30px;}
    .copyright .classic-txt { font-size: 14px; color: #222;}
    .creative-pozice { width: 200px; height: 20px; position: absolute; text-align: left; margin: 30px 0 0 calc(100% - 230px);}
    .creative { width: 200px; height: 20px; position: absolute; margin: 0 0 0 0; transition: all 0.35s ease-in-out;}
    .creative span { transition: all 0.35s ease-in-out;}
    .creative .classic-txt { text-align: right; color: #222; font-size: 14px;}
    a.creative, a.creative:hover { color: #222; text-decoration: none;}
    a.creative span { color: #222; text-decoration: none;}
    a.creative:hover span { color: #0F52BA;}
}

/* Rozhraní pro tablety */
@media screen and (min-width: 800px) and (max-width: 1099px) {
    #facebody { width: 100%; height: auto; 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;}

    .nadpis { font-size: 40px; font-weight: 300; margin: 0 0 0 0; text-align: center;}
    .classic-txt { font-size: 18px; margin: 0 0 8px 0; text-align: justify;}
    .classic-txt-special { font-size: 18px; margin: 0 0 8px 0; text-align: left;}
    .classic-txt span { font-weight: bold;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #222;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0F52BA;}

    /* Hlavička webu */
    #header-face { width: 100%; height: 90vh; position: absolute; background: url('../themes/wall.png') top; -webkit-animation:100s scroll infinite linear; -moz-animation:100s scroll infinite linear; -o-animation:100s scroll infinite linear; -ms-animation:100s scroll infinite linear; animation:100s scroll infinite linear; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 100%);}
    @-webkit-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-moz-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-o-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-ms-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }

    /* Vlastní vizitka */
    .vizitka { width: 542px; height: 300px; position: absolute; margin: calc(100vh - 450px) 0 0 calc(50% - 271px); border-radius: 20px; border: 2px solid #f2f2f2; background: url('../themes/vizitka.png') top no-repeat; background-size: cover;}

    /* Spodní část webu */
    #bottom-face { width: 100%; height: 70px; position: absolute; margin: calc(100vh - 70px) 0 0 0;}
    .copyright { width: 600px; height: 20px; position: absolute; margin: 30px 0 0 20px;}
    .copyright .classic-txt { font-size: 13px; color: #222;}
    .creative-pozice { width: 200px; height: 20px; position: absolute; text-align: left; margin: 30px 0 0 calc(100% - 220px);}
    .creative { width: 200px; height: 20px; position: absolute; margin: 0 0 0 0; transition: all 0.35s ease-in-out;}
    .creative span { transition: all 0.35s ease-in-out;}
    .creative .classic-txt { text-align: right; color: #222; font-size: 14px;}
    a.creative, a.creative:hover { color: #222; text-decoration: none;}
    a.creative span { color: #222; text-decoration: none;}
    a.creative:hover span { color: #0F52BA;}
}

/* Rozhraní pro smartphone */
@media screen and (min-width: 480px) and (max-width: 799px) {
    #facebody { width: 100%; height: 400px; 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;}

    .nadpis { font-size: 40px; font-weight: 300; margin: 0 0 0 0; text-align: center;}
    .classic-txt { font-size: 18px; margin: 0 0 8px 0; text-align: justify;}
    .classic-txt-special { font-size: 18px; margin: 0 0 8px 0; text-align: left;}
    .classic-txt span { font-weight: bold;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #222;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0F52BA;}

    /* Hlavička webu */
    #header-face { width: 100%; height: 330px; position: absolute; background: url('../themes/wall.png') top; -webkit-animation:100s scroll infinite linear; -moz-animation:100s scroll infinite linear; -o-animation:100s scroll infinite linear; -ms-animation:100s scroll infinite linear; animation:100s scroll infinite linear; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 100%);}
    @-webkit-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-moz-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-o-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-ms-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }

    /* Vlastní vizitka */
    .vizitka { width: 380px; height: 210px; position: absolute; margin: 80px 0 0 calc(50% - 190px); border-radius: 20px; border: 2px solid #f2f2f2; background: url('../themes/vizitka.png') top no-repeat; background-size: cover;}

    /* Spodní část webu */
    #bottom-face { width: 100%; height: 70px; position: absolute; margin: 330px 0 0 0;}
    .copyright { width: 260px; height: 34px; position: absolute; margin: 18px 0 0 20px;}
    .copyright .classic-txt { font-size: 12px; color: #222; text-align: left;}
    .creative-pozice { width: 180px; height: 20px; position: absolute; text-align: left; margin: 27px 0 0 calc(100% - 200px);}
    .creative { width: 180px; height: 20px; position: absolute; margin: 0 0 0 0; transition: all 0.35s ease-in-out;}
    .creative span { transition: all 0.35s ease-in-out;}
    .creative .classic-txt { text-align: right; color: #222; font-size: 13px;}
    a.creative, a.creative:hover { color: #222; text-decoration: none;}
    a.creative span { color: #222; text-decoration: none;}
    a.creative:hover span { color: #0F52BA;}
}

/* Rozhraní pro mobil */
@media screen and (max-width: 479px) {
    #facebody { width: 100%; height: 530px; 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;}

    .nadpis { font-size: 40px; font-weight: 300; margin: 0 0 0 0; text-align: center;}
    .classic-txt { font-size: 18px; margin: 0 0 8px 0; text-align: justify;}
    .classic-txt-special { font-size: 18px; margin: 0 0 8px 0; text-align: left;}
    .classic-txt span { font-weight: bold;}
    a.nadpis, a.classic-txt, .classic-txt a, .nadpis a { color: #222;}
    a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover, .nadpis a:hover { color: #0F52BA;}

    /* Hlavička webu */
    #header-face { width: 100%; height: 430px; position: absolute; background: url('../themes/wall.png') top; -webkit-animation:100s scroll infinite linear; -moz-animation:100s scroll infinite linear; -o-animation:100s scroll infinite linear; -ms-animation:100s scroll infinite linear; animation:100s scroll infinite linear; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 60vh, 0 100%);}
    @-webkit-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-moz-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-o-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }
    @-ms-keyframes scroll{
      100%{ background-position:0px -3000px;}
    }

    /* Vlastní vizitka */
    .vizitka { width: 278px; height: 155px; position: absolute; margin: 230px 0 0 calc(50% - 140px); border-radius: 20px; border: 1px solid #f2f2f2; background: url('../themes/vizitka.png') top no-repeat; background-size: cover;}

    /* Spodní část webu */
    #bottom-face { width: 100%; height: 100px; position: absolute; margin: 430px 0 0 0;}
    .copyright { width: 260px; height: 34px; position: absolute; margin: 20px 0 0 calc(50% - 130px);}
    .copyright .classic-txt { font-size: 12px; color: #222; text-align: center;}
    .creative-pozice { width: 180px; height: 20px; position: absolute; text-align: left; margin: 60px 0 0 calc(50% - 90px);}
    .creative { width: 180px; height: 20px; position: absolute; margin: 0 0 0 0; transition: all 0.35s ease-in-out;}
    .creative span { transition: all 0.35s ease-in-out;}
    .creative .classic-txt { text-align: center; color: #222; font-size: 12px;}
    a.creative, a.creative:hover { color: #222; text-decoration: none;}
    a.creative span { color: #222; text-decoration: none;}
    a.creative:hover span { color: #0F52BA;}
}