body {
--modra: #1caffc; }

html{
scroll-behavior: smooth !important; }

body {
padding: 0;
margin: 0;
line-height: 1.75em;
background-color: #fff;
font-weight: 300;
font-family: 'Ubuntu'; }

.page {
padding: 2em 2em;
max-width: 1200px;
margin: 0 auto; }

.clear {
clear: both; }

.center {
text-align: center; }

.button {
padding: 1em 2em;
text-decoration: none;
text-align: center;
font-size: 0.75em;
font-weight: bold;
margin: 0.5em; }

.button_blue {
background-color: #1caffc;
color: white; }

#line {
color: white;
background-color: #19191a; }

#line .page {
text-align: center;
padding: 1em; }

#line a {
color: white;
text-decoration: none; }

#line span {
text-align: center;
display: block; }

#line img {
margin: 0 0.3em;
vertical-align: middle;
height: 1.2em; }

#header .page {
text-align: center; }

#logo {
max-width: 85%;
height: auto; }

/* menu */
#hamburger {
font-weight: bold;
font-size: 3.0em;
position: relative;
margin: 0.3em 0 0 0;
display: block; }

.toggle, [id^=drop] {
display: none; }

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 0px;
margin-top: 1em;
width: 100%;
z-index: 1500;  }

.toggle + a, nav ul {
display: none; }

[id^=drop]:checked + ul {
display: block; }

nav ul li {
padding: 0;
list-style-type: none;
margin: 0;
display: block;
width: 100%; }

nav > ul > li  {
width: 100%;}

nav > ul > li > a {
display: block;
font-size: 1.2em;
text-decoration: none;
font-weight: bold;
color: #000;
background-color: rgba(240,240,240,1);
text-transform: uppercase;
border-bottom: 1px dotted #555;
padding: 0.75em 1em; }

nav > ul > li > a:hover {
background-color: #83b8dd; }

#graphic {
color: white;
margin-top: -2em;
min-height: 20em;
text-align: center;
background-image: url('../img/grafika-mobil.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;  }

#graphic h1 {
font-size: 8vw;
line-height: 1.2em; }

#graphic a {
padding: 0.5em 1em;
text-align: center;
color: white;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
display: inline-block;
border: 2px solid white;
min-width: 150px;
margin: 0 0.3em;
padding: 0.5em 0; }

#graphic a:hover {
background-color: black; }

#pros {
background-color: #f7f7f7; }

#pros .page {
text-align: left; }

#about .page {
text-align: center; }

h2 {
text-align: center;
background: url(../img/nadpis.png) no-repeat 50% 100%;
padding-bottom: 10px;
font-size: 1.25em;
margin-bottom: 1em;
line-height: 1.2em; }

#attributes {
background-color: #f7f7f7;
background-image: url('../img/kotouce.png');
background-repeat: no-repeat;
background-size: 45% auto;
background-position: 90% 90%; }

#attributes ul {
margin: 0;
list-style-image: url('../img/sipka.png'); }

#prices .page {
text-align: center; }

#contact {
color: white; }

#contact .page {
background-color: #1caffc; }

#contact h2 {
background: url(../img/nadpis2.png) no-repeat 50% 100%; }

.center {
text-align: center; }

::placeholder {
font-family: 'Ubuntu';
color: #888;
font-size: 0.75em;
font-weight: bold;
opacity: 1; }

:-ms-input-placeholder {
font-family: 'Ubuntu';
font-size: 0.75em;
color: #888; }

::-ms-input-placeholder {
font-family: 'Ubuntu';
font-size: 0.75em;
color: #888; }

#contact input[type="text"] {
border: 0;
box-sizing: border-box;
height: 2.5em;
line-height: 2.5em;
padding: 0 1em;
display: inline-block;
margin: 0 0 2em 0;
width: 100%;
color: #1e2022; }

.odeslat {
height: 2.7em;
box-sizing: border-box;
display: inline-block;
line-height: 2.5em;
font-weight: bold;
border: 2px solid white;
width: 37%;
background-color: #1caffc;
padding: 0;
color: white; }

.odeslat:hover {
border: 2px solid white;
background-color: white;
color: #1caffc; }

textarea {
font-family: 'Ubuntu';
box-sizing: border-box;
font-size: 0.85em;
width: 100%;
padding: 0.5em 1em;
margin: 0 0 2em 0;
border: 0; }

/* footer */
#footer {
position: relative;
xtop: -25px;
background-color: #19191a; }

#footer .page {
color: white;
padding: 0; }

#footer p {
padding-top: 1em;
text-align: center; }

#footer p img {
margin: 0 auto;
display: block; }

#footer a {
color: #fff;
border-bottom: 1px dotted white;
text-decoration: none; }

#footer_logo {
max-width: 80%;
height: auto;
margin: 0 auto; }


#footer a:hover {
border-bottom: 1px dotted #ffc30c; }

#footer .block {
margin-bottom: 2em;
box-sizing: border-box; }

#footer .block:last-of-type {
margin-bottom: 0em; }

#map {
margin: 0 0 -25px 0;
padding: 0; }

#map iframe {
width: 100%;
min-height: 23em; }

#copyright {
color: #555;
background-color: #fff; }

#copyright .page {
text-align: center;
font-size: 0.9em;
padding: 0.5em; }


#scroll {
z-index: 600;
position: fixed;
right: 5px;
bottom: 5px;
cursor: pointer;
width: 70px;
height: 70px;
border: 1px solid #1caffc;
background-color: #1caffc;
display: none;
text-indent: -9999px; }

#scroll span{
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border: 8px solid transparent;
border-bottom-color:#fff; }

/* karty */
.card {
background-color: var(--modra); }

.front {
box-sizing: border-box;
color: white;
padding: 1em;
background-color: var(--modra); }

.front img {
max-height: 3em;
margin: 0 0 2em 2em;
width: auto;
float: right; }

.back p {
padding: 0 1em 1em 1em;
margin: 0 0 2em 0; }

.back {
color: white;
display: inline; }

.back img {
display: none; }


/* tablet */
@media only screen and (min-width: 780px) {
    #line .page {
    text-align: right; }

    #line span {
    margin-left: 2em;
    display: inline-block; }
    
    #graphic {
    height: 50vh; }

    #graphic h1 {
    font-size: 6vw; }

    #contact input[type="text"] {
    float: left;
    width: 32%; }

    #contact input[type="text"]:nth-child(2) {
    margin: 0 2%; }

    .odeslat {
    width: 32%; }

    .card {
    background-color: transparent;
    float: left;
    width: 23%;
    margin: -90px 1% 0 1%;
    padding: 0;
    height: 300px;
    perspective: 500px; }

    .content {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: transform 1s;
    transform-style: preserve-3d; }

    .card:hover .content {
    transform: rotateY( 180deg ) ;
    transition: transform 0.5s; }

    .front,
    .back {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--modra);
    color: #fff;
    text-align: center;
    padding: 0em;
    backface-visibility: hidden; }

    .back {
    background-image: url('../img/back.jpg');
    background-position: center center;
    background-size: cover;
    line-height: 1.2em;
    color: white;
    transform: rotateY( 180deg ); }

    .card .icon {
    margin: 0 auto;
    float: none;
    height: 3em;
    width: auto; }

    .front .icon {
    max-height: none;
    height: 4em;
    display: block;
    margin-bottom: 90px; }

    .front strong {
    font-size: 1.2em; }

    .back .icon {
    display: block;
    margin-bottom: 30px; }

    .card p {
    box-sizing: border-box;
    padding: 1.2em 1.5em; }

    .back p {
    line-height: 1.5em; }

    #footer p {
    display: inline-block;
    font-size: 1.2em;
    width: 33%; }

    #footer p:last-child {
    width: 100%; }

    #footer p:last-child img {
    max-width: 50%; }
    
    #map iframe {
    height: 30em; }
}


/* desktop */
@media only screen and (min-width: 900px) {

    h1 {
    font-size: 2.2em; }

    #about .page,
    #attributes .page,
    #prices .page,
    #questions .page {
    padding: 4em 0; }

    #line .page {
    text-align: right; }

    #logo {
    margin-top: -7px;
    max-height: 3em;
    width: auto;
    float: left; }

    #hamburger {
    display: none; }

    nav ul {
    width: auto;
    display: block;
    float: right;
    top: -1em;
    padding: 0;
    margin:0;
    list-style: none;
    position: relative;
    background-color: var(--zluta);
    text-align: right; }

    nav > ul > li {
    display: inline-block;
    width: auto; }

    nav > ul li > a {
    padding: 1em 0 1em 1em;
    color: #000;
    font-weight: normal;
    font-size: 1.3em;
    border: none;
    background-color: white;
    text-decoration:none; }

    nav > ul li > a:hover {
    background-color: white;
    color: #1caffc; }

    #graphic {
    height: 60vh;
    background-image: url('../img/grafika.jpg'); }

    #graphic h1 {
    font-size: 3.5vw; }

    #graphic p {
    margin: 0 auto 2em auto;
    max-width: 60%; }

    #pros {
    background-color: white; }

    #pros .page  {
    padding-bottom: 0; }

    .pro {
    position: relative;
    top: -5em;
    box-sizing: border-box;
    padding: 1em;
    float: left;
    color: white;
    margin-right: 3%;
    width: 22.75%;  }

    .pro:last-of-type {
    margin-right: 0; }

    .pro strong {
    height: 2em;
    display: block;
    font-weight: normal;
    font-size: 1.2em;
    font-family: "Bebas neue"; }

    #pro1 {
    background-color: #1caffc; }

    #pro2 {
    background-color: #83de97; }

    #pro3 {
    background-color: #ddc683; }

    #pro4 {
    background-color: #dd83b7; }

    #attributes {
    background-size: auto 60%;
    background-position: 90% 50%; }

    #attributes .center {
    text-align: left; }

    #attributes ul {
    margin: 2em 0;
    width: 25%;
    float: left; }


    #footer .page {
    padding: 0; }

    #questions .page .third {
    width: 33.3333%;
    float: left; }

    #questions .page p {
    width: 95%; }

    #questions .page div {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-image: url('../img/line.png');
    background-position: 100% 0; }

    #questions .page div:nth-child(3),
    #questions .page div:nth-child(4) {
    padding-left: 2%;  }

    #questions .page div:nth-child(4) {
    background: none; }

    .back .icon {
    margin-bottom: 40px; }

    #copyright .page {
    padding: 2em 0; }
}