/*
* GLOBAL
*/
body, html {
padding: 0px;
margin: 0px;
}
/** {
outline: 1px solid red;
}*/
* {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3, p, table {
font-family: 'Armata', sans-serif;
}
p {
line-height: 200%;
}
h1 {
font-size: 32px;
text-align: center;
color: #2e529c;
text-transform: uppercase;
margin-top: 50px;
margin-bottom: 10px;
}
h2 {
text-transform: uppercase;
color: #555;
font-size: 27px;
}
h3 {
font-size: 16px;
color: #666;
letter-spacing: 5px;
text-align: center;
margin-bottom: 20px;
font-weight: normal;
padding: 0px 5px;
}
h3:before,
h3:after {
content: " - ";
}
section {
padding-top: 1px;
}
.container-1200 {
max-width: 1200px;
margin: 0px auto;
}
.container-960 {
max-width: 960px;
margin: 0px auto;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
.clear {
clear: both;
}
table td {
padding-left: 5px !important;
padding-right: 5px !important;
}
/*
* HEADER
*/
header {
min-height: 125px;
background-color: #fafafa;
border-bottom: 6px solid #2e529c;
text-align: center;
}
header img#logo {
width: 300px;
margin-top: 25px;
}
header ul {
padding: 0px;
margin-top: 10px;
}
header div#pasik {
background-color: #333;
}
header ul li {
list-style-type: none;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
font-family: 'Armata', sans-serif;
margin-left: 25px;
margin-right: 25px;
padding-bottom: 15px;
padding-top: 15px;
color: #ddd;
}
header ul li:first-child {
margin-left: 0px;
}
header ul li:last-child {
margin-right: 0px;
}
header ul li:hover,
header ul li:focus {
border-bottom: 2px solid rgb(224,45,61);
padding-bottom: 13px;
}
header i {
position: absolute;
font-size: 30px !important;
right: 10px;
top: 10px;
color: #666;
cursor: pointer;
}
/* BACK TO TOP */
#arrow {
width: 60px;
height: 60px;
position: fixed;
bottom: 10px;
right: 20px;
z-index: 2;
background-image: url("../images/arrow-up.png");
background-repeat: no-repeat;
background-size: cover;
opacity: .6;
}
/*
* BANNER
*/
section#banner {
padding-top: 0px;
}
/*
* SERVICIES
*/
section#servicies {
padding: 10px 0px;
padding-bottom: 0px;
}
.servicies-container {
width: 100%;
}
.servicies-container h2,
.servicies-container p {
width: 800px;
}
.servicies-container:nth-child(odd) h2,
.servicies-container:nth-child(odd) p {
float: left;
text-align: left;
}
.servicies-container:nth-child(even) h2,
.servicies-container:nth-child(even) p {
float: right;
text-align: right;
}
.servicies-container:nth-child(odd) img{
float: right;
margin-bottom: 10px;
}
.servicies-container:nth-child(even) img{
float: left;
margin-bottom: 10px;
}
.servicies-container:nth-child(even) {
background-color: white;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
.servicies-container:last-child {
border-bottom: 0px;
}
/*
metodika
*/
section#metodika {
background-color: #f6f6f6;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
margin-top: 10px;
}
section#metodika ul li {
font-family: 'Armata', sans-serif;
line-height: 200%;
margin-bottom: 10px;
}
section#metodika img{
margin: auto;
display: block;
padding-top: 10px;
}
/*
* VR
*/
section#vr img{
margin: auto;
display: block;
}
section#vr ul li {
font-family: 'Armata', sans-serif;
line-height: 200%;
margin-bottom: 10px;
}
section#vr {
background-color: #f6f6f6;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
/*
* PRICE LIST
*/
/*
section#price-list {
background-color: #f6f6f6;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
*/
section#price-list img{
margin: auto;
display: block;
}
section#price-list span {
cursor: pointer;
}
section#price-list table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
section#price-list th {
color: #555;
font-size: 24px;
padding: 10px 0px;
text-transform: uppercase;
border-bottom: 1px solid #e2e2e2;
}
section#price-list td {
padding: 10px 0px;
font-size: 17px;
border-bottom: 1px solid #e2e2e2;
color: #343434;
}
section#price-list tr:last-child td {
border-bottom: 0px;
}
section#price-list .overview th {
color: white;
}
section#price-list .overview td {
color: white;
padding: 20px;
}
/*
* CONTACT
*/
section#contact {
color: white;
background-color: #949599;
margin-top: -5px;
}
section#contact h1 {
color: #4cbee0;
}
form input {
width: 70%;
height: 30px;
padding-left: 5px;
border: 1px solid #4cbee0;
}
form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus {
outline: none;
border: 1px solid #4cbee0;
}
form textarea {
width: 100%;
resize: none;
margin: 17px 0px;
padding-left: 5px;
height: 95px;
border: 1px solid #4cbee0;
}
form button {
display: block;
background-color: transparent;
color: white;
border: 2px solid white;
padding: 10px 30px;
text-transform: uppercase;
margin: 30px auto;
cursor: pointer;
}
form#test button {
display: block;
background-color: #ccc;
color: white;
border: 2px solid white;
padding: 10px 30px;
text-transform: uppercase;
margin: 30px auto;
cursor: pointer;
}
form button:hover,
form button:focus {
background-color: white;
color: #949599;
}
.form-data {
width: 50%;
float: left;
}
.form-data p {
text-transform: uppercase;
display: inline-block;
width: 20%;
}
form > .form-element {
text-transform: uppercase;
width: 50%;
height: 150px;
float: right;
}
form > .form-element p {
width: 100%;
text-align: left;
display: block;
}
section#contact h3 {
color: #ddd;
}
/*
* FOOTER
*/
footer {
background-color: #58595b;
color: white;
padding: 30px 0px;
padding-top: 50px;
}
footer i {
width: 16px;
font-size: 20px !important;
}
footer i:last-child {
font-size: 50px !important;
}
footer p {
text-align: center;
}
footer a {
text-decoration: underline;
}
.overview {
background-color: #818181;
background-color: #f6f6f6;
color: #555;
padding: 30px 0px;
}
section#price-list .overview th,section#price-list .overview td {
color: #555;
}
iframe.vlavo {
float: left;
margin-bottom: 20px;
}
iframe.vpravo {
float: right;
margin-bottom: 20px;
}
@media (max-width: 1200px) {
header ul li {
font-size: 15px;
}
header ul li:last-child {
margin-right: 10px;
}
header img#logo {
margin-left: 10px;
}
iframe {
width: 560px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 1080px) {
section#servicies img {
float: none;
display: block;
margin: 0px auto;
}
.servicies-container h2,
.servicies-container p {
width: 94%;
text-align: center !important;
margin-left: 3%;
margin-right: 3%;
}
iframe {
width: 560px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 1020px) {
.form-data,
.form-element {
width: 90vw !important;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
.form-element input {
width: 79%;
}
form button {
margin-top: 50px;
}
iframe {
width: 560px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 960px) {
h2 {
font-size: 20px !important;
}
iframe {
width: 560px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 890px) {
header ul.main-nav li {
display: block;
width: 100%;
margin-left: 0px;
}
header img#logo {
float: none;
}
header ul {
margin-top: 20px;
display: block;
float: none;
text-align: center;
}
header ul li:hover,
header ul li:focus {
border-bottom: 0px;
padding-bottom: 15px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}
iframe {
width: 560px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 770px) {
table, tbody, thead, td, tr, th {
display: block;
width: 100%;
border: 0px !important;
}
footer table,
footer tbody,
footer thead,
footer td,
footer tr,
footer th {
display: block !important;
width: 100%;
border: 0px !important;
text-align: center;
}
footer th {
margin-top: 30px;
}
footer {
text-align: center;
}
h2 {
font-size: 15px !important;
}
.discount img {
width: 20vw;
}
.discount a {
width: 20vw;
font-size: 3vw;
}
iframe {
width: 560px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 540px) {
.form-element {
}
.form-element p,
.form-element input {
width: 100%;
}
.form-element p {
text-align: center !important;
}
iframe {
width: 500px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 500px) {
h1 {
font-size: 25px;
}
iframe {
width: 460px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 450px) {
.servicies-container p {
line-height: 23px;
}
.discount h2 {
display: none !important;
}
table th {
font-size: 18px !important;
}
iframe {
width: 400px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 400px) {
h1 {
font-size: 20px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 15px;
}
iframe {
width: 350px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 350px) {
header img#logo {
width: 100px;
margin-top: 33px;
}
iframe {
width: 300px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
@media (max-width: 300px) {
.servicies-container img {
width: 90%;
}
iframe {
width: 250px;
float: left;
}
iframe.vlavo {
float: left;
}
iframe.vpravo {
float: left;
}
}
select {
font-size: 26px;
width: 400px;
}
span.otazka {
font-size: 26px;
font-style: italic;
}
input.doplnit_mail {
font-size: 26px;
width: 400px;
}
button.test {
font-size: 26px;
}
span.pokec {
font-size: 20px;
}