@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.roboto-thin { font-family: "Roboto", sans-serif; font-weight: 100; font-style: normal; }
.roboto-light { font-family: "Roboto", sans-serif; font-weight: 300; font-style: normal; }
.roboto-regular { font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; }
.roboto-medium { font-family: "Roboto", sans-serif; font-weight: 500; font-style: normal; }
.roboto-bold { font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; }
.roboto-black { font-family: "Roboto", sans-serif; font-weight: 900; font-style: normal; }
.roboto-thin-italic { font-family: "Roboto", sans-serif; font-weight: 100; font-style: italic; }
.roboto-light-italic { font-family: "Roboto", sans-serif; font-weight: 300; font-style: italic; } 
.roboto-regular-italic { font-family: "Roboto", sans-serif; font-weight: 400; font-style: italic; }
.roboto-medium-italic { font-family: "Roboto", sans-serif; font-weight: 500; font-style: italic; }
.roboto-bold-italic { font-family: "Roboto", sans-serif; font-weight: 700; font-style: italic; }
.roboto-black-italic { font-family: "Roboto", sans-serif; font-weight: 900; font-style: italic; }

.nabidka-zbozi h2 { font-weight: 700; font-size: 26px; color: #B50000; margin-top: 0px; margin-bottom: 30px; }
.nabidka-zbozi .button-like { background-color: #B50000; font-weight: bold; color: #fff; font-size: 29px; border-radius: 13px; }
.nabidka-zbozi .nadpis { min-height: 80px; }
.nabidka-zbozi .image { max-height: 250px; }
.nabidka-zbozi .image img { max-height: 250px; max-width: 100% }

html, body { font-family: "Roboto", sans-serif; overflow-x: hidden !important; max-width: 100%;}
h1 { font-weight: 700; font-size: 79px; color: #B50000; margin-top: 150px; margin-bottom: 50px;}
h1.sluzby { margin-bottom: 150px;}
h2 { font-weight: 700; font-size: 49px; color: #B50000; margin-top: 0px; margin-bottom: 30px;}
p { color: #B50000; font-size: 1.2rem; margin-bottom: 120px;}
.tagy p { color: #B50000; font-size: 1.6rem; margin-bottom: 120px; }
.gdpr p { margin-bottom: 15px;}

a.nounderline { text-decoration: none; }

section.page h1 { margin-bottom: 60px; margin-top: 50px; padding-top: 40px; }
section.page h2 { margin-bottom: 40px; margin-top: 50px; }
section.page p { color: #000; margin-top: 20px; margin-bottom: 20px; }

@media (max-width: 576px) {
    h1 { font-size: 41px; margin-top: 64px; margin-bottom: 39px; }
    h1.sluzby { margin-bottom: 50px;}
    h2 { font-size: 30px; }
    p { font-size: .8rem;  }
}
.header { text-align: center; background-image: url('../img/snek_cover.jpg'); background-size: cover; height: 819px; width: 100%; position: relative; }
@media (max-width: 576px) {
    .header { background-image: url('../img/snek_cover_mob.jpg?v=2'); height: 483px; }
}
img.logo { position: absolute; bottom: 0; width: 473px;}
img.logo-mobile { display: none; }
@media (max-width: 576px) {
    img.logo { display: none;}
    img.logo-mobile { display: block; position: absolute; bottom: 0; width: 177px;}
}
.text-dark { color: #898989 !important; }

@media (max-width: 576px) {
    .container.projekty { padding: 0; }
}
.dlazdice { position: relative; margin: 21px; }
@media (max-width: 576px) {
    .dlazdice { margin: 0; }
}

/* mobile menu */
#nav-icon1 { z-index: 9999; width: 50px; height: 22px; position: absolute; top: 120px; right: 120px; margin: 10px 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 9999; }
@media (max-width: 776px) {
    #nav-icon1 { width: 30px; top: 10px; right: 10px; }
}
@media (min-width: 776.01px) {
}
#nav-icon1 span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 9px; 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; }
#nav-icon1 span:nth-child(1) { top: 5px; }
#nav-icon1 span:nth-child(2) { top: 15px; }
#nav-icon1.open span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
#nav-icon1.open span:nth-child(2) { top: 10px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }
.mobile-menu { position: absolute; top: 60px; z-index: 9998; height: 80vh; width: 100%; background-color: rgba(132,22,0,0.92); display: flex; justify-content: center; align-items: center; border-bottom-left-radius: 150px; border-bottom-right-radius: 150px; }
.mobile-menu-in ul { text-align: center; }
.mobile-menu-in ul li { margin-bottom: 25px; }
.mobile-menu-in ul li a { color: #fff; font-size: 28px; text-decoration: none; position: relative;}
.mobile-menu-in ul li a:hover, .mobile-menu ul li a.active { color: #fff; }
@media (max-width: 776px) {
    .mobile-menu-in ul { margin-left: 0px; padding-left: 10px; }
    .mobile-menu-in ul li { margin-bottom: 15px; }
    .mobile-menu-in ul li a { font-size: 18px; }
    .mobile-menu-in ul li a::before, .mobile-menu ul li a.active::before { bottom: -7px; }
}
@media (min-width: 776.01px) {
    .mobile-menu { top: 0; height: 100vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
/* /mobile menu */

img.posun-dolu {position: relative; top: 2px;}

.dlazdice .front { z-index: 1; }
.dlazdice .back { display: none; z-index: 2; position: absolute; top: 0; width: 100%; height: 100%; left: 0;  }
.dlazdice:hover .back { cursor: pointer; }
.dlazdice .popis { color: #fff; }
@media (max-width: 576px) {
    .dlazdice:hover .back { display: none; }
}

footer { height: 621px; margin-top: 0; background-color: #000; color: #fff !important; }
footer.homepage, footer.o-nas { margin-top: 283px; }
footer h1 { color: #fff !important; }
footer span { color: #fff !important; }
@media (max-width: 576px) {
    footer { margin-top: 0; }
    footer h1 { margin-top: 0; }
}