﻿@import url("../font/stylesheet.css");
@import url("kontakt_form.css");
img {border: 0;}
a {cursor: pointer;}
.clr {clear: both;}
* {padding: 0; margin: 0;}
.zarovnani {box-sizing: border-box; -moz-box-sizing: border-box; position: relative; width: 98%; max-width: 1265px; margin: auto auto;}

body {
  font-size: 48px; 
  font-family: "Trenda Regular";
  width: 100%;
  background-color: white;
  color: #000000;
}
.horni_lista {
    width: 100%;
    background: red;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-family: "Trenda Bold";
}
#header {
    width: 100%;
    height: 405px;
    background-image: url("../img/header.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
#header .zarovnani {max-width: 1230px;}
#header .top .zarovnani {max-width: 1310px;}
#header .top {
    width: 100%;
    height: 155px;
    background-image: url("../img/menu_background.png");
}
#header .zarovnani a.logo {display: block; padding-top: 50px; height: 40px; width: 404px; float: left;}
#header .zarovnani a.logo img {width: 100%;}
#header .zarovnani .nav {
    width: 675px;
    float: right;
}
#header .zarovnani .nav ul {list-style: none; width: 100%; margin-top: 55px; line-height: 0%;}
#header .zarovnani .nav ul li {display: inline-block; line-height: 0%;}
#header .zarovnani .nav ul li a {
    padding: 10px 15px;
    color: #9f131c;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 31.25%;
    transition: 0.5s;
}
#header .zarovnani .nav ul li a.active, #header .zarovnani .nav ul li a:hover {
    background-color: #9f131c;
    color: white;
}
#header .zarovnani h1, #header .zarovnani p.nadpis {
    font-size: 100%;
    line-height: 100%;
    font-family: "Trenda Regular";
    text-transform: uppercase;
    font-weight: normal;
    color: white;    
    margin-top: 85px;
}
#header .zarovnani p {
    font-size: 75%;
    line-height: 100%;
    font-family: "Trenda Regular It";
    font-weight: normal;
    color: white;    
    margin-top: 15px;
}
::-webkit-input-placeholder {color: #000000;}
::-moz-placeholder {color: #000000;}
:-ms-input-placeholder {color: #000000;}
:-moz-placeholder {color: #000000;}

#content {padding-bottom: 0px;}
#content .zarovnani {max-width: 1275px;}
#content .o_nas h2, #content .formatovani_textu h1 {    
    font-size: 100%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: #aa8132;
    padding-bottom: 40px;
    padding-top: 110px;
    line-height: 100%;
}
#content .o_nas h3, #content .formatovani_textu h2 {    
    font-size: 75%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: black;
    padding-bottom: 40px;
    padding-top: 65px;
    line-height: 100%;
}
#content .formatovani_textu h3 {    
    font-size: 65%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: black;
    padding-bottom: 40px;
    padding-top: 65px;
    line-height: 100%;
}
#content .formatovani_textu h4 {    
    font-size: 60%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: black;
    padding-bottom: 40px;
    padding-top: 65px;
    line-height: 100%;
}
#content .o_nas h4:first-of-type {
    padding-top: 40px!important;
}
#content .o_nas h4 {    
    font-size: 50%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: black;
    padding-bottom: 20px;
    padding-top: 150px;
    line-height: 100%;
}
#content .o_nas p, #content .formatovani_textu p {
    font-size: 37.5%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 10px;
    padding-top: 0px;
    line-height: 100%;
}
#content .formatovani_textu ul li, #content .formatovani_textu ol li {
    font-size: 16px;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 5px;
    padding-top: 0px;
    line-height: 100%;
    margin-left: 20px; 
    margin-top: 10px;
}
#content .formatovani_textu ul li p , #content .formatovani_textu ol li p {
    font-size: 100%;
    padding-bottom: 0px;
}
#content .formatovani_textu img, #content .formatovani_textu iframe {
    max-width: 100%!important;
    height: auto!important;
}
#content .formatovani_textu p em {
    font-size: 90%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 10px;
    padding-top: 0px;
    line-height: 100%;
}
#content .formatovani_textu p a {
    color: #9f131c;
    text-decoration: none;
}
#content .formatovani_textu p a:hover {
    color: black;
}
#content .formatovani_textu p a.galerie_obsah_in, #content .formatovani_textu .galerie a.obr {
    display: inline-block;
    width: 23%;
    margin: 20px 1%;
    vertical-align: top;
}
#content .formatovani_textu .galerie a.obr {
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#content .formatovani_textu .galerie a.obr img {
    display: none;
}
@media screen and (max-width: 960px) {  
    #content .formatovani_textu .galerie a.obr {
        width: 31%;
    }
}
@media screen and (max-width: 720px) {  
    #content .formatovani_textu .galerie a.obr {
        width: 48%;
    }
}
#content .formatovani_textu p a.galerie_obsah_in img {
    display: block;
    width: 100%;
}
.formatovani_textu {padding-bottom: 20px;}
#content .o_nas p.mensi {
    font-size: 29%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 10px;
    padding-top: 0px;
    line-height: 170%;
}
#content .o_nas img:first-of-type {margin-top: 0px!important;}
#content .o_nas img.img_vpravo {
 float: right;
 margin: 50px 0px 10px 60px;
}
#content .o_nas img.img_vlevo {
 float: left;
 margin: 50px 60px 10px 0px;
}
#content .slozeni_vinylgridu {
    padding: 70px 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-top: 90px;
    max-width: 1325px;
    height: 405px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/slozeni_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
#content .slozeni_vinylgridu h2 {
    font-size: 75%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: white;
    padding-bottom: 30px;
    padding-top: 0px;
    line-height: 100%;
}
#content .slozeni_vinylgridu h3 {
    font-size: 50%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: white;
    padding-bottom: 5px;
    padding-top: 20px;
    line-height: 100%;
}
#content .slozeni_vinylgridu p {
    font-size: 29%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: white;
    padding-bottom: 30px;
    padding-top: 0px;
    line-height: 170%;
}
#content .slozeni_vinylgridu img {
    position: absolute;
    right: 75px;
    top: 125px;
}
#content .produkty .zarovnani {max-width: 1280px; padding-bottom: 118px;}
#content .produkty .zarovnani h2 {
    font-size: 75%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 30px;
    padding-top: 80px;
    padding-left: 15px;
    line-height: 100%;
}
#content .produkty .zarovnani p {
    font-size: 29%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 30px;
    padding-top: 0px;
    padding-left: 15px;    
    line-height: 170%;
}
#content .produkty .zarovnani .item {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 47px;
    float: left;
    width: calc(25% - 30px);
    height: 238px;
}
#content .produkty .zarovnani .item a {text-decoration: none;}
#content .produkty .zarovnani .item a h3{
    color: black;
    font-size: 33.33%;
    font-family: "Trenda Regular";
    font-weight: normal;
    height: 34px;
    line-height: 100%;
}
#content .produkty .zarovnani .item a.obr {
    width: 100%;
    height: 194px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    margin-top: 10px;
}
#content .pokladka_podlahy .zarovnani {max-width: 1250px;}
#content .pokladka_podlahy .zarovnani h2 {
    font-size: 75%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 15px;
    padding-top: 45px;
    line-height: 130%;
    max-width: 765px;
}
#content .pokladka_podlahy .zarovnani .info, #content .zarovnani .info {
    float: left;
    width: 28%;
    width: -webkit-calc(33% - 80px);
    width: -moz-calc(33% - 80px);
    width: calc(33% - 80px);   
    height: 220px;
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 40px;
}
#content .pokladka_podlahy .zarovnani .info:nth-child(2), #content .pokladka_podlahy .zarovnani .info:nth-child(5n), #content .zarovnani .info:nth-child(3), #content .zarovnani .info:nth-child(6n) {
    margin-left: 0px;
    width: 28%;
    width: -webkit-calc(33% - 40px);
    width: -moz-calc(33% - 40px);
    width: calc(33% - 40px);   
}
#content .pokladka_podlahy .zarovnani .info:nth-child(4), #content .pokladka_podlahy .zarovnani .info:nth-child(7n), #content .zarovnani .info:nth-child(5), #content .zarovnani .info:nth-child(8n) {
    margin-right: 0px;
    width: 28%;
    width: -webkit-calc(33% - 40px);
    width: -moz-calc(33% - 40px);
    width: calc(33% - 40px);   
}
#content .pokladka_podlahy .zarovnani .info h3, #content .zarovnani .info h3 {
    font-size: 50%;
    font-family: "Trenda Regular";
    font-weight: normal;
    line-height: 120%;
    padding-bottom: 12px;
}
#content .pokladka_podlahy .zarovnani .info p, #content .zarovnani .info p {
    font-size: 29%;
    font-family: "Trenda Regular";
    font-weight: normal;
    line-height: 130%;
    padding-bottom: 0px;    
}
#content .pokladka_podlahy .zarovnani img.img_vpravo, #content .pokladka_format img.img_vpravo {
    float: right;
    margin-left: 90px;
}
#content .pokladka_podlahy .zarovnani h4, #content .pokladka_format h4 {
    font-size: 75%;
    font-family: "Trenda Regular";
    font-weight: normal;
    padding-bottom: 30px;
    padding-top: 57px;
    line-height: 130%;
    max-width: 765px;
}
#content .pokladka_podlahy .zarovnani p, #content .pokladka_format p {
    font-size: 37.5%;
    font-family: "Trenda Regular";
    font-weight: normal;
    line-height: 130%;
    padding-bottom: 25px;
}
#content .pokladka_podlahy .zarovnani p a, #content .pokladka_format p a {
    font-size: 133.3%;
    color: #9f131c;
    font-family: "Trenda Regular";
    font-weight: normal;
    line-height: 130%;
    padding-bottom: 30px;
    text-decoration: none;
}
#content .pokladka_podlahy .zarovnani p a:hover, #content .pokladka_format p a:hover {text-decoration: underline;}
#content .rychly_kontakt {
    background-color: #9f131c;
    width: 100%;
    padding-top: 45px;
    padding-bottom: 50px;
    margin-top: 130px;
    text-align: center;
}
#content .rychly_kontakt .zarovnani {max-width: 1320px; padding-left: 100px;}
#content .rychly_kontakt.svetly {background-color: white; margin-top: 0px; padding-top: 40px; padding-bottom: 75px;}
#content .rychly_kontakt.svetly .zarovnani {max-width: 1320px; padding-left: 0px;}
#content .rychly_kontakt p {
    color: white;
    font-size: 37.5%;
    text-align: left;
    float: left;
    font-family: "Arial";
}
#content .rychly_kontakt.svetly p{color: black;}
#content .rychly_kontakt .odkaz {
    display: inline-block;
    width: 200px;
    color: white;
    font-size: 31.25%;
    font-family: "Arial";
    background-color: black;
    text-decoration: none;
    line-height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: 78% 50%;    
    background-image: url("../img/sipka.png");
    transition: 0.5s;
}
#content .rychly_kontakt.svetly .odkaz {background-color: #2c2c2c; background-position: 88% 50%;}
#content .rychly_kontakt .odkaz:hover {background-color: #aa8132;}
#content .rychly_kontakt .kontakty {
    width: 565px;
    float: right;
    text-align: left;
    line-height: 0%;
    margin-top: 10px;
}
#content .rychly_kontakt .kontakty a {
    font-size: 28%;
    color: white;
    text-decoration: none;
    font-family: "Arial";
    padding-left: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-repeat: no-repeat;
    background-position: left center;
    margin-right: 23px;
}
#content .rychly_kontakt.svetly .kontakty a {color: #747c82;}
#content .rychly_kontakt.svetly .kontakty a:hover {color: black;}
#content .rychly_kontakt .kontakty a:hover {color: #747c82;}
#content .rychly_kontakt .kontakty a:last-of-type {margin-right: 0px;}
#content .rychly_kontakt .kontakty a.mail {background-image: url("../img/mail.png");}
#content .rychly_kontakt .kontakty a.telefon {background-image: url("../img/telefon.png");}
#content .rychly_kontakt .kontakty a.adresa {background-image: url("../img/adresa.png");}
#content .rychly_kontakt .kontakty a.mail:hover {background-image: url("../img/mail_sedy.png");}
#content .rychly_kontakt .kontakty a.telefon:hover {background-image: url("../img/telefon_sedy.png");}
#content .rychly_kontakt .kontakty a.adresa:hover {background-image: url("../img/adresa_sedy.png");}
#content .rychly_kontakt.svetly .kontakty a.mail {background-image: url("../img/mail_sedy.png");}
#content .rychly_kontakt.svetly .kontakty a.telefon {background-image: url("../img/telefon_sedy.png");}
#content .rychly_kontakt.svetly .kontakty a.adresa {background-image: url("../img/adresa_sedy.png");}
#content .vzorkovna .zarovnani {max-width: 1320px;}
#content .vzorkovna .zarovnani h2 {
    margin-top: 78px;
    color: #656565;
    font-family: "Arial";
    font-size: 62.5%;
}
#content .vzorkovna .zarovnani h2 strong {
    color: #aa8132;
}
#content .vzorkovna .zarovnani a.obr {
    width: calc(25% - 19px);
    height: 177px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    margin-top: 40px;
    float: left;
    margin-left: 12.5px;
    margin-right: 12.5px;
}
#content .vzorkovna .zarovnani a.obr:nth-child(2) {margin-left: 0px;}
#content .vzorkovna .zarovnani a.obr:nth-child(5) {margin-right: 0px;}
#content .poptavka_form {float: left; width: 50%; text-align: left;}
#content .poptavka_text {float: left; width: 35%; margin-left: 15%; padding-bottom: 55px;}
#content h1.nadpis {
    font-size: 100%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: #aa8132;
    padding-bottom: 40px;
    padding-top: 20px;
    line-height: 100%;
    text-align: center;
}
#content .poptavka_text h1, #content .poptavka_text h2, #content .poptavka_form h2 {
    font-size: 75%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: black;
    padding-bottom: 40px;
    padding-top: 20px;
    line-height: 100%;
}
#content .poptavka_text img {width: 100%;}
#content .poptavka_text p {font-size: 35.5%; margin-top: 10px;}
#content .poptavka_text p a {color: #9f131c;}
#content .poptavka_form input, #content .poptavka_form textarea {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
    outline: none;
    color: black;   
}
 #content .poptavka_form textarea {height: 100px; margin-top: 25px;}
#content .poptavka_form input::-webkit-input-placeholder,  #content .poptavka_form textarea::-webkit-input-placeholder {color: darkgrey;}
#content .poptavka_form input::-moz-placeholder,  #content .poptavka_form textarea::-moz-placeholder {color: darkgrey;}
#content .poptavka_form input:-ms-input-placeholder,  #content .poptavka_form textarea:-ms-input-placeholder {color: darkgrey;}
#content .poptavka_form input:-moz-placeholder,  #content .poptavka_form textarea:-moz-placeholder {color: darkgrey;}
#content .poptavka_form input[type="submit"] {
    background-color: #9f131c;
    color: white;
    border: none;
    width: 200px;
    cursor: pointer;
    transition: 0.5s;
}
#content .poptavka_form input[type="submit"]:hover {background-color: white; color: #9f131c;}
/* Články */
    #content .zarovnani .clanky h1, #content .zarovnani .clanky h2 {
        font-size: 100%;
        font-family: "Trenda Regular";
        font-weight: normal;
        color: #aa8132;
        padding-bottom: 40px;
        padding-top: 60px;
        line-height: 100%;
    }
    #content .zarovnani .clanky .clanek {
        float: left;
        width: 31%;
        margin: 30px 0.8%;
    }
    #content .zarovnani .clanky .clanek .obr {
        display: block;
        width: 100%;
        height: 180px;
        cursor: pointer;
        background-size: cover;
        background-position-x: center;
        background-position-y: center;
        background-repeat: no-repeat;
        position: relative
    }
    #content .zarovnani .clanky .clanek .obr span {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 5px 10px;
        background-color: #9f131c;
        color: white;
        font-size: 18px;
    }
    #content .zarovnani .clanky .clanek h3 {
        font-size: 18px;
        height: 42px;
        margin-top: 10px;
        overflow: hidden;
    }
    #content .zarovnani .clanky .clanek h3 a {
        color: #9f131c;
    }
    #content .zarovnani .clanky .clanek h3 a:hover {
        text-decoration: none;
    }
    #content .zarovnani .clanky .clanek p {
        font-size: 14px;
        height: 70px;
        margin-top: 20px;
        overflow: hidden;
    }
    #content .zarovnani .clanky .clanek a.cely_clanek {
        background-color: #9f131c;
        color: white;
        display: block;
        font-size: 14px;
        width: 140px;
        text-align: center;
        line-height: 30px;
        height: 30px;
        margin-top: 20px;
        text-decoration: none;
    }
    #content .zarovnani .clanky .clanek a.cely_clanek:hover {
        background-color: black;
    }
    @media screen and (max-width: 900px) {  
        #content .zarovnani .clanky .clanek {
            width: 48%;
        }
    }
    @media screen and (max-width: 580px) {  
        #content .zarovnani .clanky .clanek {
            width: 98%;
        }
    }
/* !Články */

/* Stránkování */
#content .strankovani {
    text-align: center;
    padding: 10px 0px;
}
#content .strankovani a {
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 10px;
}
#content .strankovani a.active, #content .strankovani a:hover {
    background-color: #9f131c;
    color: white;
}
/* !Stránkování */
#content .cesta {
    margin: 10px 0px;
}
#content .cesta p {
    font-size: 14px;
}
#content .cesta p a {
    color: #9f131c;
}
#content .cesta p a:hover {
    color: black;
    text-decoration: none;
}
#content #kategorie h1, #content #kategorie h2 {
    font-size: 100%;
    font-family: "Trenda Regular";
    font-weight: normal;
    color: #aa8132;
    padding-bottom: 40px;
    padding-top: 60px;
    line-height: 100%;
}
#content #kategorie .popisek p {
    font-size: 16px;
    line-height: 24px;
}
#content #kategorie .popisek .scrollujNaObsah {
    display: inline-block;
    padding: 8px 16px;
    color: white;
    background-color: #9f131c;
    font-size: 14px;
    cursor: pointer;
}
#content #kategorie .podkategorie h2 {
    color: black;
    font-size: 80%;
}
#content #kategorie .podkategorie .kate {
    display: block;
    float: left;
    width: 30%;
    margin: 20px 1%;
}
#content #kategorie .podkategorie .kate a {
    text-decoration: none;
}
#content #kategorie .podkategorie .kate a h2 {
    text-align: center;
    font-size: 22px;
    padding-bottom: 0px;
    padding-top: 0px;
}
#content #kategorie .podkategorie .kate a.obrazek {
    margin-top: 10px;
    display: block;
    width: 100%;
    height: 140px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
@media screen and (max-width: 700px) {  
    #content #kategorie .podkategorie .kate {
        width: 48%;
    }
}
#content #kategorie .produkty, #content #dekory.produkty {
    text-align: center;
}
#content #kategorie .produkty .produkt, #content #dekory.produkty .produkt {
    display: inline-block;
    width: 23%;
    margin: 20px 1%;
    vertical-align: top;
    background: #fbfbfb;
    padding: 15px;
    box-sizing: border-box;
}
@media screen and (max-width: 1140px) {
    #content #kategorie .produkty .produkt, #content #dekory.produkty .produkt {
        width: 30%;
    }
}
@media screen and (max-width: 800px) {
    #content #kategorie .produkty .produkt, #content #dekory.produkty .produkt {
        width: 47%;
    }
}
@media screen and (max-width: 520px) {
    #content #kategorie .produkty .produkt, #content #dekory.produkty .produkt {
        width: 97%;
    }
}
#content #kategorie .produkty .produkt a.nazev, #content #dekory.produkty .produkt a.nazev {
    height: 36px;
    overflow: hidden;
    text-decoration: none;
    text-align: left;
    display: block;
}
#content #kategorie .produkty .produkt a.nazev:hover, #content #dekory.produkty .produkt a.nazev:hover {
    text-decoration: underline;
}
#content #kategorie .produkty .produkt a.nazev h3, #content #dekory.produkty .produkt a.nazev h3 {
    font-size: 16px;
    font-weight: normal;
}
#content #kategorie .produkty .produkt a.obr, #content #dekory.produkty .produkt a.obr {
    margin-top: 15px;
    display: block;
    width: 100%;
    height: 160px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
#content #kategorie .produkty .produkt .obsah, #content #dekory.produkty .produkt .obsah {
    border-bottom: solid 1px #dfdfdf;
    padding-bottom: 15px;
}
#content #kategorie .produkty .produkt .cena, #content #dekory.produkty .produkt .cena {
    display: block;
    float: left;
    font-size: 22px;
    font-weight: 700;
    color: #9f141c;
    margin-top: 20px;
    font-family: 'Trenda Bold';
}
#content #kategorie .produkty .produkt .detail, #content #dekory.produkty .produkt .detail {
    display: block;
    float: right;
    width: 100px;
    background-color: #9f131c;
    color: white;
    font-size: 20px;
    text-decoration: none;
    line-height: 32px;
    margin-top: 15px;
}
#content #kategorie .produkty .produkt .detail:hover, #content #dekory.produkty .produkt .detail:hover {
    background-color: black;
}
@media screen and (max-width: 980px) {  
    #content #kategorie .produkty .produkt .cena, #content #dekory.produkty .produkt .cena {
        font-size: 16px;
    }
    #content #kategorie .produkty .produkt .detail, #content #dekory.produkty .produkt .detail {
        font-size: 18px;
        width: 90px;
        line-height: 26px;
    }
}
#content #kategorie .produkty .produkt .popisek, #content #dekory.produkty .produkt .popisek {
    font-size: 14px;
    color: #2c2c2c;
    text-align: left;
    padding-top: 15px;
    height: 35px;
    overflow: hidden;
    display: block;
}
#content #kategorie .vsechny_produkty {
    display: block;
    width: 230px;
    height: 40px;
    background-color: #9f131c;
    color: white;
    line-height: 40px;
    font-size: 18px;
    text-decoration: none;
    margin: 20px auto;
    text-align: center;
}
#content #kategorie .vsechny_produkty:hover {
    background-color: black;
}
#content .detail_produktu {
    padding: 40px 0px;
}
#content .detail_produktu .obsah_produktu {
    width: calc(100% - 400px - 50px);
    margin-left: 50px;
    float: right;
}
@media screen and (max-width: 920px) {
    #content .detail_produktu .obsah_produktu {
        float: none;
        clear: both;
        margin: 10px auto;
        width: 100%;
        max-width: 600px;
        margin-bottom: 30px;
    }
}
#content .detail_produktu .obsah_produktu h1 {
    color: #9f131c;
    font-size: 32px;
}
#content .detail_produktu .obsah_produktu .text-ceny {
    color: black;
    font-size: 18px;
    margin-top: 15px;
}
#content .detail_produktu .obsah_produktu .text-ceny .cena {
    color: #9f131c;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
}
#content .detail_produktu .obsah_produktu .puvodni {
    color: black;
    font-size: 16px;
    margin-top: 5px;
}
#content .detail_produktu .obsah_produktu .puvodni .p_cena {
    text-decoration: line-through;
}
#content .detail_produktu .obsah_produktu .produkt_odeslat_poptavku {
    background-color: #9f131c;
    color: white;
    line-height: 44px;
    height: 44px;
    text-align: center;
    width: 300px;
    display: block;
    font-size: 16px;
    text-decoration: none;
    margin: 20px 0px;
}
#content .detail_produktu .obsah_produktu .produkt_odeslat_poptavku:hover {
    background-color: black;
}
#content .detail_produktu .fotky {
    width: 400px;
    float: left;
}
@media screen and (max-width: 920px) {
    #content .detail_produktu .fotky {
        float: none;
        clear: both;
        margin: 10px auto;
        width: 100%;
        max-width: 400px;
    }
}
#content .detail_produktu .fotky .obr_velky {
    width: 100%;
    height: 400px;
    display: block;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}
#content .detail_produktu .fotky .obr_velky img {
    display: none;
}
#content .detail_produktu .obsah_produktu .obr {
    width: 100px;
    height: 100px;
    float: left;
    display: block;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#content .detail_produktu .obsah_produktu .obr img {
    display: none;
}
#footer {
  width: 100%;
  color: #747474;
  background-color: #2c2c2c;
  font-size: 25%;
  font-family: "Arial";
  padding-top: 67px;
  padding-bottom: 63px;
  position: relative;
}  
#footer .zarovnani {max-width: 1325px;}  
#footer .zarovnani .odkazy {
    float: right;
    margin-top: 30px;
}
#footer .zarovnani .odkazy a {color: #747474; text-decoration: none; margin-left: 5px; margin-right: 3px;}
#footer .zarovnani .odkazy a:hover {text-decoration: underline;}
#footer .zarovnani .arrowT {
    margin-top: 20px;
    display: inline-block;
    width: 42px;
    height: 35px;
    float: right;
    background-image: url(../img/nahoru.jpg);
    background-repeat: no-repeat;
    margin-left: 39px;
}

/* === RESPONZIVNÍ VERZE === */

@media screen and (max-width: 1250px) {  
    body {font-size: 40px;}
    #content .slozeni_vinylgridu img {width: 437px;}
    #content .rychly_kontakt .odkaz, #content .rychly_kontakt.svetly .odkaz {width: 150px; background-position: 85% 50%;}
    #content .rychly_kontakt.svetly .odkaz {background-position: 95% 50%;}
    #content .rychly_kontakt .kontakty a {margin-right: 13px;}
    #content .rychly_kontakt .kontakty {width: 500px;}
}

@media screen and (max-width: 1150px) { 
    #content .o_nas img.img_vpravo, #content .o_nas img.img_vlevo {width: 40%;}
    #content .o_nas h4 {padding-top: 100px;}
    #content .slozeni_vinylgridu img {width: 337px;}
    #content .pokladka_podlahy .zarovnani img.img_vpravo {width: 450px; margin-left: 50px;}
    #content .rychly_kontakt .zarovnani {padding-left: 0px;}
}  

@media screen and (max-width: 1100px) {   
    #header .zarovnani a.logo {width: 35%;}
    #header .zarovnani .nav {text-align: right; max-width: 605px;}
    #content .rychly_kontakt p {font-size: 32%;}
    #content .vzorkovna .zarovnani a.obr {height: 137px;}
}

@media screen and (max-width: 980px) {   
  #header .zarovnani .nav {position: relative; width: 65%; text-align: center;} 
  #header .zarovnani .nav ul {max-width: 100%; display: none; width: 100%; margin-left: auto; margin-top: 70px; /*z-index: 9999;*/ position: absolute;}
  #header .nav #hamburger {cursor: pointer; position:relative; display: block; width: 50px; height: 35px; top: 55px; margin-left: auto; margin-right: auto;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } 
  #header .nav #hamburger div{display: block; position: absolute; height: 6px; width: 100%; background-color: black; border-radius: 3px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}  
  #header .nav #hamburger div:nth-child(1) { top: 0px;}
  #header .nav #hamburger div:nth-child(2) { top: 12px;}
  #header .nav #hamburger div:nth-child(3) { top: 24px;}
  #header .nav #hamburger.open  div{background-color: #b94949;} 
  #header .nav #hamburger.open div:nth-child(1) { top: 17px;  -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
  #header .nav #hamburger.open div:nth-child(2) { opacity: 0; left: -60px;}
  #header .nav #hamburger.open div:nth-child(3) { top: 17px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
  #header .zarovnani .nav ul li {display: block; background-color: white; padding: 0px; z-index: 999; position: relative; margin-right: 0px; margin-left: 0px; margin-top: 0px;}
  #header .zarovnani .nav ul li a {width: auto; display: block; padding-top: 20px; padding-bottom: 20px;}
  #content .produkty .zarovnani .item {width: calc(33% - 30px);}
  #content .rychly_kontakt p {float: none; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; text-align: center; padding-bottom: 25px;}
  #content .rychly_kontakt .odkaz, #content .rychly_kontakt.svetly .odkaz {float: left;}
}

@media screen and (max-width: 930px) {     
    #content .slozeni_vinylgridu img {right: 10px; top: 190px;}
    #content .slozeni_vinylgridu {padding: 70px 10px;}
}

@media screen and (max-width: 900px) {  
    #content .o_nas img:first-of-type {margin-top: 60px!important;}
    #content .pokladka_podlahy .zarovnani .info,  #content .zarovnani .info {width: calc(50% - 80px)!important; margin-left: 40px!important; margin-right: 40px!important;}
    #content .pokladka_podlahy .zarovnani h4 {padding-top: 0px;}
}

@media screen and (max-width: 750px) {
  #content .produkty .zarovnani .item {width: calc(50% - 30px);}
  #content .pokladka_podlahy .zarovnani img.img_vpravo {float: none; clear: both; width: 100%; margin-left: auto; margin-right: auto;}
  #content .vzorkovna .zarovnani a.obr {width: calc(50% - 19px); margin-left: 9px!important; margin-right: 9px!important;}
  #footer .zarovnani a.logo {margin-left: auto; margin-right: auto; display: block; width: 351px;}
  #footer .zarovnani .odkazy {float: left;}
}  

@media screen and (max-width: 700px) {  
    #header .zarovnani a.logo {width: 100%; max-width: 404px; margin-left: auto; margin-right: auto; float: none; clear: both; padding-top: 20px;}      
    #header .zarovnani .nav {width: 100%; margin-left: auto; margin-right: auto; float: none; clear: both;} 
    #header .nav #hamburger {top: 35px;}
    #header .zarovnani .nav ul {margin-top: 45px;}
    #header .zarovnani h1, #header .zarovnani p.nadpis {text-align: center;}
    #header .zarovnani p {text-align: center;}
    #content .o_nas img.img_vpravo, #content .o_nas img.img_vlevo {width: 100%; float: none; clear: both; margin-left: auto; margin-right: auto;}   
    #content .o_nas h2, #content .o_nas p, #content .o_nas h3, #content .o_nas h4, #content .o_nas p.mensi {text-align: center;} 
    #content .o_nas h4 {padding-top: 40px;}
    #content .o_nas img:first-of-type {margin-top: 0px!important;}
    #content .slozeni_vinylgridu {padding: 15px; height: 425px;}
    #content .slozeni_vinylgridu h2, #content .slozeni_vinylgridu p, #content .slozeni_vinylgridu h2 {text-align: center;}
    #content .slozeni_vinylgridu h3 {padding-top: 0px;}
    #content .slozeni_vinylgridu img {position: relative; top: 0px; margin-right: auto; margin-left: auto; width: 337px; display: block;}
    #content .produkty .zarovnani .item a h3, #content .produkty .zarovnani h1, #content .produkty .zarovnani p {text-align: center;}
    #content .pokladka_podlahy .zarovnani, #content .vzorkovna .zarovnani h2 {text-align: center;}
    #content .pokladka_podlahy .zarovnani .info, #content .zarovnani .info {width: 100%!important; margin-left: auto!important; margin-right: auto!important; text-align: center; height: auto; padding-bottom: 20px;}
    #content .rychly_kontakt .odkaz, #content .rychly_kontakt.svetly .odkaz {max-width: 200px; float: none; display: block; width: 100%; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 25px;}
    #content .rychly_kontakt .kontakty {float: none; display: block; width: 100%; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 25px;} 
}

a.pokladka_cta, a.vsechny_clanky, a.dalsi_dekory {
    display: block;
    background: #9f141c;
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    text-decoration: none;
    width: 200px;
    margin: 30px auto;
}
a.pokladka_cta:hover, a.vsechny_clanky:hover, a.dalsi_dekory:hover {
    background-color: black;
}

.kategorie_produktu span {
    font-weight: bold;
    color: black;
}
.kategorie_produktu {
    color: #9f131c;
    font-size: 18px;
    margin-bottom: 20px;
}
.kategorie_produktu a {
    font-weight: normal;
    color: #9f131c;
}
.kategorie_produktu a:hover {
    color: black;
}

/* Dalsi Predesly */
.prev-next {
    width: 100%;
    clear: both;
    max-width: 1265px;
    width: 96%;
    margin: 20px auto;
}
.prev-next a.leva {
    float: left;
    max-width: 400px;
    height: 100px;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAnCAYAAADgpQMwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NDgyNDg5QzI2N0FFNDExOUVFN0ZDQ0RBOUI4RUNENyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDNDREI5QUIzMTExMUU0QUE2N0YxMTlGMEQwRTBDQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDNDREI5OUIzMTExMUU0QUE2N0YxMTlGMEQwRTBDQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUxNzFBNTYyMzJCMkU0MTFBMzc4QjhCN0Q0MUI0RTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU0ODI0ODlDMjY3QUU0MTE5RUU3RkNDREE5QjhFQ0Q3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Sm1MxwAAANlJREFUeNpiYCAesAHxQyD+TwBvIcFMhgoiDPwJxCrEGigNxJ+JMLSdFFcuJcLAJ0DMQ6yBNkQYCMJRxBrIDMTniTDwPFQtUSCTSFfaEGugEBC/JcLApaREzjQiDPwMTRlEAQMg/kOEoRWkuPIwEQbehuYyokAUkZHjTUr+fjKav4d+/mYYsPzNAE3EhAw8yUAiINalBqQYSmyYHibVtVSPfZqlU1iO+kbtHMUA1UDVvM8A9RrVSymalKc0K/lpVkfRpDalWb1PSrlgNloukFUufB5+5QJAgAEAn8p1w6LmlbMAAAAASUVORK5CYII=') no-repeat left center;
    padding-left: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 14px;
}
.prev-next a.prava {
    float: left;
    max-width: 400px;
    height: 100px;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAnCAYAAADgpQMwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NDgyNDg5QzI2N0FFNDExOUVFN0ZDQ0RBOUI4RUNENyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QzJDNEEyNEIzMTExMUU0ODA1NjlERUQwRTYyRjYzRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QzJDNEEyM0IzMTExMUU0ODA1NjlERUQwRTYyRjYzRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUxNzFBNTYyMzJCMkU0MTFBMzc4QjhCN0Q0MUI0RTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU0ODI0ODlDMjY3QUU0MTE5RUU3RkNDREE5QjhFQ0Q3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+R1sAEQAAANJJREFUeNpiYGBg2ALE/wngJ0DMyUACUAHin0QYXMFAImgnwtDPQCxNiqE8UC8SMngpqa6NIsJQELYh1eAzRBh6HoiZSTHUhkjXZpLq2qVEGPoWiIVIMVQaGtOEDJ5GqmsriDD0DxAbkGIoGxDfJsLgw6S61pvISIsi1WBiywWe0XJh8JQLJ4dUuXCMCENvk2KgATRrUtWlh6kdplSPfZqkU2JyFCgry1E777cPaClF9fKUJiU/1esomtSmVK/3DWhREo3mb5z4Gyk15tDI3wABBgCfynXAkitpBAAAAABJRU5ErkJggg==') no-repeat right center;
    padding-right: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 14px;
}
.prev-next a.prava {
    float: right;
}
.prev-next a.prava .obr {
    float: right;
}
.prev-next a.prava span {
    margin-right: 20px;
    margin-left: 0px;
    text-align: right;
}
.prev-next a .obr {
    height: 100px;
    width: 100px;
    background-position: center center;
    background-repeat: no-repeat;
   /* background-size: contain; */
    float: left;
}
.prev-next a .obsah {
    float: left;
    width: calc(100% - 100px);
}
.prev-next a.prava .obsah {
    float: right;
}
.prev-next a span {
    margin-top: 20px;
    margin-left: 20px;
    display: block;
}

@media screen and (max-width: 860px) {
    .prev-next a.leva, .prev-next a.prava {
        display: block;
        float: none;
        margin: 10px auto;
        max-width: 400px;
        width: 100%;
    }
}

@media screen and (max-width: 420px) {
    .prev-next a, .prev-next a.prava {
       height: auto;
       padding: 10px;
    }
    .prev-next a .obr {
        display: none;
    }
    .prev-next a .obsah, .prev-next a.prava .obsah {
        float: none;
        width: 100%;
        text-align: center;
    }
    .prev-next a .obsah span , .prev-next a.prava .obsah span {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0px;
    }
}

.galerie_obsah {
    text-align: center;
    font-size: 0px;
    line-height: 0px;
}
.galerie_obsah .lightbox {
    display: inline-block;
    width: 23%;
    height: 200px;
    margin: 30px 1%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;
}
.galerie_obsah .lightbox img {
    display: none;
}

@media screen and (max-width: 970px) {
    .galerie_obsah .lightbox {
        width: 31%;
    }
}

@media screen and (max-width: 800px) {
    .galerie_obsah .lightbox {
        width:48%;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 540px) {
    .galerie_obsah .lightbox {
        height: 160px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
#popup_bg {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 888;
    background-color: rgba(0, 0, 0, 0.6);
}
#popup_bg .popup_zavrit {
    position: fixed;
    right: calc(50% - 400px - 100px);
    top: calc(50% - 250px);
    color: white;
    font-size: 56px;
    cursor: pointer;
    transition: 500ms;
}
#popup_bg a {
    position: fixed;
    width: 800px;
    height: 500px;
    left: calc(50% - 400px);
    top: calc(50% - 250px);
}
#popup_bg a img {
    display: block;
    width: 100%;
}
#popup_bg .popup_zavrit:hover {
    transform: scale(1.2);
}

@media screen and (max-width: 1030px) {
    #popup_bg .popup_zavrit {
        right: 10px;
    }
}

@media screen and (max-width: 950px) {
    #popup_bg .popup_zavrit {
        top: calc(50% - 200px);
    }
    #popup_bg a {
        position: fixed;
        width: 600px;
        height: 400px;
        left: calc(50% - 300px);
        top: calc(50% - 200px);
    }
}

@media screen and (max-width: 750px) {
    #popup_bg .popup_zavrit {
        top: calc(50% - 125px);
    }
    #popup_bg a {
        width: 400px;
        height: 250px;
        left: calc(50% - 200px);
        top: calc(50% - 125px);
    }
}