/* reset5 © 2011 opensource.736cs.com MIT */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select,a img{vertical-align:middle;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');

/*
 * Copyright 2022 bohacek.sk
 */
body {
    font-family: verdana;
    font-size: 16px;
}
h1 {
    font-size: 230%;
    line-height: 110%;
    margin: 25px 0 35px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
h2 {
    font-size: 180%;
    line-height: 110%;
    margin: 35px 0 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
h3 {
    font-size: 150%;
    line-height: 110%;
    margin: 30px 0 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

.clear {
    clear: both;
}
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.w50p {
    width: 50%;
    display: inline-block;
    float: left;
    padding-right: 3%;
}
.w50p img {
    max-width: 100%;
}


/* STRUCTURE */
.pagewrap {
    width: 1220px;
    margin: 0 auto;
    position: relative;
}
#topbar {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #bbb;
}
#header {
    min-height: 95px;
    line-height: 95px;
    position: relative;

    border-bottom: 3px solid #c3c3c3;
}
#content {
    padding: 20px 0;
    border-bottom: 3px solid #c3c3c3;
}
#footer {
    padding: 15px;
    clear: both;
    text-align: center;
}
.sekcia_ikona {
    position: absolute;
    right: 10px;
    top: 0px;
    z-index: 100;
}
.sekcia_pozadie {
    position: absolute;
    right: 0;
    bottom: -20px;
    z-index: -100;
}


/* .pagewrap */
.pagewrap .obsah {
    width: 57%;
    position: relative;
    z-index: 1;
    
    float: left;
}
.pagewrap .obsah img {
    max-width: 100%;
}
#content .pagewrap a {
    /*color: #0093dd;*/
    color: #555;
}

/* #topbar */
.button_kontakt {
    display: block;
    background-color: #0093dd;
    width: 160px;
    height: 50px;
    float: right;
    line-height: 50px;
    text-align: center;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    margin-left: 20px;
}
.button_tel {
    color: #0093dd;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}

/* content */
#content {
    color: #555;
    line-height: 135%;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}
#content ul li {
    margin-left: 20px;
    list-style-type: "- ";
}
#content ol {
    margin-left: 20px;
}
#content p {
    margin: 10px 0;
    font-size: 105%;
}
#content a:hover {
    text-decoration: none;
}


/* #footer */
#footer {
    padding: 15px;
}
#footer p {
    font-size: 70%;
    color: #777;
}
#footer a {
    text-decoration: none;
    color: #777;
}
#footer .pagewrap {
    text-align: center;
}
#footer .linkedin {
    display: block;
    position: relative;
    top: -31px;
}
#footer .footer_wrap {
    display: inline-block;
    text-align: center;
    color: #111;
    padding: 0 15px;
}
#footer .footer_wrap img {
    width: 50px;
}
#footer .footer_wrap div {
    margin: 10px 0 20px;
    color: #111;
    font-size: 90%;
}


/* uvod */
.uvod h1,
.uvod h2 {
    font-size: 180%;
    margin: 15px 0 10px 0;
}
.uvod .blok {
    margin: 30px auto;
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; 
}
.uvod .blok img {
    width: 120px;
}
.uvod .blok a {
    text-decoration: none;
}
.uvod .blok .ikona {
    position: relative;
    height: 120px;
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; 
}
.uvod .blok .ikona img {
    position: absolute;
    left: 40%;
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; 
}
.uvod .blok .ikona img.hover {
    display: none;
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; 
}
.uvod .blok:hover .ikona img.hover {
    display: block;
}
.uvod .blok:hover .ikona img.default {
    display: none;
}


/* galéria, fotky */
.fotky {
    margin: 25px auto;

    height: 180px;
    width: 100%;
    overflow-x: scroll;

    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.fotky a {
    display: inline-block;
    margin: 5px;
    background-color: #000;

    -webkit-overflow-scrolling: touch; 
    -webkit-overflow-scrolling: touch;
}
.fotky a img {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; 
    -webkit-overflow-scrolling: touch;
}
.fotky a img:hover {
    box-shadow: 0 0 3px #000;
    opacity: 0.8;
}

/* scrollbar */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/**/
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card {
    display: inline-block;
  }
}


/* kontakt */
table.kontakt tr td {
    vertical-align: top;
    font-size: 120%;
}
table.kontakt img {
    margin-right: 15px;
}
#content .pagewrap table.kontakt a {
    color: #555;
    text-decoration: none;
}




/* kontakt_form */
#kontakt_form input,
#kontakt_form textarea {
    display: block;
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    border-radius: 2px;
    
    color: #555;
    font-family: tahoma;
    font-size: 15px;
    border: 1px solid #ccc;
}
#kontakt_form textarea {
    height: 150px;
}
#kontakt_form button {
    padding: 10px 30px;
    color: #fff;
    background-color: #808080;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 25px;
}
#kontakt_form button:active {
    position: relative;
    top: 1px;
    left: 1px;
}



.marginRight10 {
    margin-right: 10px;
}
.marginTop50 {
    margin-top: 50px;
}

.error,
.varovanie,
.ok {
    color: red;
    font-weight: bold;
    
    border: 1px solid red;
    border-radius: 3px;
    padding: 4px;
    background-color: #f3dddd;
}
.ok {
    color: green;
    border-color: green;
    background-color: #d9f0cd;
}

.center {
    text-align: center;
}




/* responsive multilevel menu */
#pattern {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #666;
}
a.menu-link {
    float: right;
    display: block;
    padding: 0 16px;
}
.menu, .menu > ul ul {
    clear: both;
    -webkit-transition: all 0.3s ease-out;  
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.js .menu, .js .menu > ul ul {
    overflow: hidden;
    max-height: 0;
}
.menu.active, .js .menu > ul ul.active {
    max-height: 880px;
}
.menu > ul {
    border-top: 1px solid #808080;
}
.menu li a {
    color: #666;
    display: block;
    padding: 0 10px;
    position: relative;
    text-decoration: none;
}
.menu li a:hover {
    text-decoration: underline;
}
.menu li.has-subnav > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 24px;
    padding: 4px 8px;
}
.menu li.has-subnav > a.active:after {
    content: "-";
}
.menu li a.aktiv {
    text-decoration: underline;
}

@media screen and (min-width: 902px) {
    .menu ul li {
        list-style-type: none;
    }
    .pattern {
        overflow: visible;
    }
    a.menu-link {
        display: none;
    }
    .js .menu, .js .menu > ul ul {
        max-height: none;
        overflow: visible;
        background: none;
    }
    .js .menu > ul ul {
        background: #808080;
        display: none;
    }
    .js .menu > ul li:hover > ul {
        display: block;
    }
    .menu ul {
        margin: 0 0 0 -4px;
        border: 0;
    }
    .menu li a {
        border: 0;
    }
    .menu li.has-subnav > a {
        padding-right: 32px;
    }
    .menu li.has-subnav > a:after {
        content: ">";
        font-size: 16px;
        padding: 12px 8px;
    }
    .menu .level-1 > li.has-subnav > a:after {
        content: "▼";
    }
    .menu > ul li {
        margin: 0;
    }
    .menu > ul > li {
        display: inline-block;
        position: relative;
    }
    .menu > ul ul {
        position: absolute;
        top: 0;
        left: 192px;
        width: 192px;
    }
    .menu > ul ul li {
        position: relative;
    }
    .menu > ul ul.level-2 {
        top: 40px;
        left: 0;
    }
}

/* MEDIA QUERIES */
@media screen and (max-width: 1300px) {

    .pagewrap {
        width: 100%;
    }
    .logo,
    #topbar .pagewrap {
        padding-left: 2.5%;
    }
    #content .pagewrap {
        width: 95%;
    }
}

@media screen and (max-width: 902px) {
    #pattern { /* menu */
        position: static;
    }
    .logo {
        float: left;
    }
    #header nav ul li {
        line-height: 45px;
    }
    .hide700 {
        display: none;
    }
    .sekcia_pozadie {
        position: relative;
        max-width: 100%;
    }
    .sekcia_ikona {
        display: none;
    }
    .w50p,
    .pagewrap .obsah {
        width: 100%;
    }
    .w50p .w50p {
        width: 50%;
    }
}

@media screen and (max-width: 580px) {
    .w50p .w50p {
        width: 90%;
        margin: 15px auto;
    }
    .w50p .marginTop50 {
        margin-top: 10px;
    }
}

@media screen and (max-width: 480px) {
    #header {
        height: auto;
    }
    /*table, thead, tbody, th, td, tr { 
        display: block; 
    }*/
}