body {margin: 0; color: white; font-family: "Refrigerator Deluxe", Arial; text-align: center; font-size: 1.2em;}
section {padding-bottom: 20px;}
h2 {font-family: "Fira Sans"; text-transform: uppercase; font-weight: 600; font-size: 1.7em; margin: 50px 0px 20px 0px;}
h3 {margin: 20px 0px; text-transform: uppercase; font-family: "Fira Sans"; font-weight: 600; font-size: 1.05em;}
p {text-align: justify; text-align-last: center; padding: 10px;}
a {text-decoration: none; color: inherit;}

header {padding: 20px; text-align: right; font-size: 1.1em;}
.header-logo {float: left; font-weight: 700; padding: 10px;}
nav {margin: 0px; padding: 0px;}
nav ul {margin: 0px; padding: 0px; list-style: none;}
nav ul li {display: inline-block;}
nav ul li a {display: inline-block; padding: 10px; font-weight: 700;}

.s1, .s2, .s5 {background-position: center center; background-repeat: no-repeat; background-size: cover; padding-bottom: 60px; box-sizing: border-box;}
.body-home .s1, .body-404 .s1 {background-image: url("/img/bg-home.jpg"); min-height: 100vh;}
.body-imunita #home, .body-prevod #home, .body-oboje #home {background-image: url("/img/bg-imunita1.jpg");}
.body-imunita #co-resime, .body-oboje #co-resime {background-image: url("/img/bg-imunita2.svg"); color: black;}
.body-imunita #co-to-znamena, .body-oboje #co-to-znamena {background-color: #34B372;}
.body-imunita #jak-na-to, .body-prevod #jak-na-to, .body-oboje #jak-na-to {padding-bottom: 80px;}
.body-imunita #jak-na-to h2, .body-prevod #jak-na-to h2, .body-oboje #jak-na-to h2 {color: black;}
.body-imunita #jak-na-to p, .body-prevod #jak-na-to p, .body-oboje #jak-na-to p {color: #656565;}
.body-imunita #kontakt, .body-prevod #kontakt, .body-oboje #kontakt {background-image: url("/img/bg-home.jpg");}

.content {max-width: 900px; width: 100%; margin: 0px auto; display: inline-block;}
.seo {overflow: hidden; height: 1px; width: 1px; margin: 0px; position: absolute; opacity: 0.1;}

.logo-container {margin-top: 150px;}
.logo-container > * {display: inline-block; vertical-align: middle;}
.logo {height: 150px; margin: 0px 5px;}
.logo-text-before, .logo-text-after {font-size: 2em; font-weight: 700;}
.logo-text-after {color: #389CF1;}

.home-text {font-size: 1.4em;}

.home-button {display: inline-block; border: 5px solid white; border-radius: 10px; padding: 15px 40px; margin: 20px; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;}
.home-button-1 {border-color: #34B372; color: #34B372;}
.home-button-2 {border-color: #F1A738; color: #F1A738;}
.home-button-3 {border-color: #389CF1; color: #389CF1;}
.home-button-1:hover {background-color: #34B372;}
.home-button-2:hover {background-color: #F1A738;}
.home-button-3:hover {background-color: #389CF1;}
.home-button:hover {color: white;}
.home-button:hover .hover {opacity: 1;}
.home-button-img {position: relative; display: block;}
.home-button-img img {height: 90px; transition: opacity 0.2s ease;}
.home-button-img .hover {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 90px; opacity: 0; margin: 0px auto;}
.home-button-text {display: block; margin-top: 12px; text-transform: uppercase; font-weight: 600; font-size: 1.2em; font-family: "Fira Sans";}

.box, .column {width: 200px; color: #656565; display: inline-block; padding: 25px; border-radius: 20px; margin: 20px; vertical-align: top; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;}
.box:hover {background: #34B372; color: white; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);}
.box .img {position: relative;}
.box img {width: 40%;}
.box .hover {position: absolute; left: 0px; right: 0px; top: 0px; margin: 0px auto; opacity: 0; transition: opacity 0.2s ease;}
.box:hover .hover {opacity: 1;}
.box h3, .column h3 {color: #34B372; transition: color 0.2s ease;}
.box:hover h3 {color: white;}
.box p, .column p {margin: 0px; padding: 0px; font-size: 0.9em;}

.progress {font-family: "Fira Sans"; color: #34B372;}
.point {width: 100px; height: 100px; line-height: 100px; display: inline-block; box-shadow: 0px 0px 20px rgb(0, 0, 0, 0.25); border-radius: 100px; vertical-align: middle; font-size: 2em; font-weight: 600; transition: font-size 0.2s ease; cursor: default;}
.point:hover {font-size: 2.8em;}
.arrow {width: 90px; vertical-align: middle;}
.finish {display: inline-block; vertical-align: middle; text-align: center; padding-left: 20px;}
.finish p {margin: 0px; padding: 0px;}
.p1 {color: black !important; font-size: 3.3em; font-weight: 600; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);}
.p1 span {font-size: 0.5em;}
.p2 {color: #34B372 !important; text-transform: uppercase; font-size: 1.5em; font-weight: 600; letter-spacing: 4px;}

.contact-boxes {margin-top: 10px;}
.contact-box {display: inline-block; font-family: "Fira Sans"; padding: 30px;}
.contact-box img {width: 40%; transition: transform 0.2s ease;}
.contact-box:hover img {transform: rotate(8deg);}
.contact-box p {padding: 0px; margin: 0px; margin-top: 5px; font-size: 0.8em; font-weight: 600;}

.prices {background: #34B372; border-radius: 20px; display: inline-block; padding: 25px 100px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); margin-top: -70px;}
.prices h2 {text-transform: none; margin: 0px;}
.button {font-family: "Fira Sans"; background: white; color: #34B372; font-weight: 600; text-transform: uppercase; cursor: pointer; font-size: 1.2em; display: inline-block; padding: 8px 50px; border-radius: 15px; margin-top: 15px; transition: margin 0.2s ease, padding 0.2s ease;}
.button:hover {padding: 12px 54px; margin-top: 11px; margin-bottom: -4px;}

form {width: 100%; text-align: center;}
form input {border: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 5px 0px; margin: 5px 10px; background: none; box-sizing: border-box; font-family: "Fira Sans"; width: calc(50% - 20px); box-sizing: border-box; font-size: 0.8em; outline: 0px; color: white; transition: padding 0.2s ease;}
form textarea {border: 1px solid rgba(255, 255, 255, 0.5); box-sizing: border-box; background: none; resize: none; font-family: "Fira Sans"; margin: 0px 10px; width: calc(100% - 20px); outline: 0px; color: white; padding: 5px;}
form label {font-family: "Fira Sans"; margin: 13px 10px 0px 10px; font-size: 0.8em; display: inline-block; width: calc(100% - 20px); text-align: left;}
form input[type=submit] {background: white; color: #043464; padding: 9px 40px 7px 40px; border-radius: 100px; width: auto; text-transform: uppercase; font-weight: 600; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); margin-top: 20px; cursor: pointer; transition: padding 0.2s ease, margin 0.2s ease; border: 0px; display: inline-block;}
form input[type=submit]:hover {padding: 13px 42px 11px 42px; margin-top: 16px; margin-bottom: 1px;}

.modals {position: fixed; left: 0px; right: 0px; top: 20%; text-align: center; visibility: hidden; opacity: 0; transition: visibility 0.2s ease, opacity 0.2s ease;}
.modal {display: inline-block; position: relative; background: white; border-radius: 20px; padding: 50px; max-width: 500px; color: #34B372; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);}
.modal h2 {margin-top: 10px;}
.modal form input {color: black; border-color: rgba(0, 0, 0, 0.5);}
.modal form input[type=submit] {background: #34B372; color: white;}
.modal .close {position: absolute; top: 5px; right: 10px; cursor: pointer;}

#kontakt ::-webkit-input-placeholder {color: white;}
#kontakt ::-moz-placeholder {color: white;}
#kontakt :-ms-input-placeholder {color: white;}
#kontakt ::-ms-input-placeholder {color: white;}

@media (max-width: 1200px) {
    .logo-container {margin-top: 100px;}
}

@media (max-width: 900px) {
    .logo-container {margin-top: 50px;}
}

@media (max-width: 800px) {
    .point, .arrow, .finish {display: block; margin: 0px auto;}
    .arrow {transform: rotate(90deg); margin: 30px auto;}
    .finish {padding-left: 0px;}
}

@media (max-width: 750px) {
    .header-logo {display: none;}
    header {text-align: center;}
}

@font-face {font-family: "Fira Sans"; font-weight: 400; src: url("/font/firasans400.ttf");}
@font-face {font-family: "Fira Sans"; font-weight: 600; src: url("/font/firasans600.ttf");}
@font-face {font-family: "Fira Sans"; font-weight: 700; src: url("/font/firasans700.ttf");}

@font-face {font-family: "Refrigerator Deluxe"; font-weight: 300; src: url("/font/refrigerator300.ttf");}
@font-face {font-family: "Refrigerator Deluxe"; font-weight: 700; src: url("/font/refrigerator700.ttf");}