/* ************************* header ************************* */

#header {top: 0; background-color: var(--main-bg-color) !important; z-index: 999; padding: 30px 0 10px 0;} 

#header #header-inner #header-search {width: 100%; min-width: 100%;}

/* Výběr jazyka */
.language-dropdown { position: relative; display: inline-block; cursor: pointer; }
.language-dropdown .language-selected { display: flex; align-items: center; padding: 10px; border: 1px solid #999; border-radius: 5px; }
.language-dropdown .language-selected img, .language-dropdown .language-options img { width: 45px; height: 30px; margin-right: 8px; }
.language-dropdown .language-selected .arrow { margin-left: 5px; border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; transform: rotate(45deg); }
.language-dropdown .language-options { display: none; position: absolute; top: 100%; left: 0; background-color: white; border: 1px solid #999; border-radius: 5px; z-index: 1; }
.language-dropdown .language-options a { display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; }
.language-dropdown:hover .language-options { display: block; }
.language-dropdown .language-options a:hover { background-color: #ddd; }

@media screen and (max-width: 749px) {
    #layout {padding-top: 20px;} 
    #header {padding-top: 0;} 
    #header #header-inner #header-search-left {float: left; width: calc(100% - 99px)!important;}
    #header #header-inner .language-dropdown {float: right; width: 89px;}  
    #header #header-inner #header-search #menu-header-search {clear: both;}
    #header-search #header-search-left a#logo {background-position: left;}
    #main {padding-top: 0px !important;}
}

@media screen and (min-width: 750px) {
    #header {padding-top: 60px;}
    #header #header-inner #header-search {display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;}
    #header #header-inner #header-search #header-search-left {order: 1;}
    
    #header #header-inner #header-search #menu-header-search {margin: auto; order: 2;}
    #header #header-inner #header-search #menu-header-search ul.underline li {margin: 0;}

    #header #header-inner .language-dropdown {margin-left: auto; order: 3;}
}

/* main */
#main {overflow: hidden; margin: 0; padding: 2em 0 0 0;} 
#main strong a {color: #001ba0;}
.text-blue {color: #001ba0 !important;}
.text-green {color: green !important;}
.text-red {color: red !important;}
.text-black {color: black !important;}

@media (prefers-color-scheme: dark) {
    #main strong a { color: #52b4ff; }
    .text-blue {color: #52b4ff !important;}
    .text-green { color: lightgreen !important; }
    .text-red { color: lightcoral !important; }
    .owl-prev, .owl-next { color: white !important; }
}


/* block */
.block-portaly-info {margin-bottom: 50px;}
.block-portaly-info h2.title {font-size: 160%; margin: 0 0 1em 0; padding: 0 0 0.5em 0; border-bottom: 1px solid #ccc;}

.text-center {text-align: center;}


/* ************************* PIN ************************* */

#pin .pin-wrapper {text-align: center; margin-bottom: 40px;}
#pin .pin-wrapper .text-center {font-size: 90%; margin-top: 0.5em;}
#pin .pin-wrapper .text-center a {color: #000!important;}
@media (prefers-color-scheme: dark) {
    #pin .pin-wrapper .text-center a {
        color: #fff !important;
    }
}

#pin .pin-wrapper form label {display: block; margin-bottom: 0.5em;}

#pin .pin-wrapper form .input-button-wrapper {display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin-bottom: 0.5em}
#pin .pin-wrapper form .input-button-wrapper input.pin {width: 138px; text-align: left; height: 38px; line-height: 38px; font-size: 14px; margin: 0!important; padding: 0 8px; border-width: 1px 0 1px 1px; border-style: solid; border-color: #999; background: #fafafa; box-sizing: border-box; box-shadow: none; border-radius: 4px 0 0 4px!important;}
#pin .pin-wrapper form .input-button-wrapper .button {min-width: 110px; height: 38px; border-radius: 0 4px 4px 0!important; margin: 0!important;}

#pin .pin-wrapper form label strong.title {font-size: 180%;}


@media screen and (min-width: 750px) {
  #pin .pin-wrapper form {display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; padding-bottom: 1em;}

  #pin .pin-wrapper form label {margin-bottom: 0; margin-right: 0.5em;}
  #pin .pin-wrapper form input.pin {max-width: 10em; flex-grow: 1; margin-right: 0.5em; margin-bottom: 0;}
  
  #pin .pin-wrapper .text-center {margin-top: 0;} 
}




/* column */
@media screen and (min-width: 480px) {
    /* column flex */
    .column .colu {padding-right: 2em !important;}
}

@media screen and (max-width: 479px) {
    #sluzby .profile-block.sluzby {margin: 0!important; padding: 0!important;}	
    #sluzby .column .colu {margin: 0 0 60px 0!important; padding: 0!important;}
}





/* ************************* reference ************************* */

#reference .no-margin {margin-bottom: 0!important;}

#portfolio-carousel {padding: 0; margin: 0; overflow: hidden;}

@media screen and (max-width: 979px) {
    #portfolio-carousel {margin-top: 20px;}	
}

#portfolio-carousel .portfolio {display: block; text-align: center; width: 100%; overflow: hidden;}
#portfolio-carousel .portfolio p {font-style: normal;}
#portfolio-carousel .portfolio h3 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


/* novinky owl-carousel */
#portfolio-carousel .owl-carousel {position: relative; padding-top: 2.5em!important;}
#portfolio-carousel .owl-carousel .owl-nav {position: absolute; top: 0; right: 0;}


@media screen and (min-width: 750px) {
    #portfolio-carousel .portfolio {padding-right: 1em;}
}

#portfolio-carousel blockquote {position: relative; text-align: left; font-size: 90%; font-style: italic; margin: 0.25em 0; padding: 0.25em 20px 0.25em 40px; line-height: 1.45;}
#portfolio-carousel blockquote::before {display: block; position: absolute; left: 0; top: -20px; content: "\201d"; color: #0076e4; font-size: 80px; font-family: Georgia, "Times New Roman", Times, serif;}


#weby .underline {text-decoration: underline;}




/* ************************* kontakt ************************* */
hr {border:0; border-bottom: 1px solid #ccc; margin-bottom: 30px;}
.m-b-50 {margin-bottom: 50px !important;}

.contact-info {margin-bottom: 30px !important;}
.contact-info a {color: #001ba0;}

.contact-info-1 .contact {width: 100%; text-align: center;}
.contact-info-1 .contact p.label {color: black !important;}
.contact-info-1 .contact > div {padding: 3px 10px !important; border: 2px solid black; display: inline-block; border-radius: 0px;}
.contact-info-1 .contact > div > p:last-of-type {margin-bottom: 0;}

.contact-info-2 {display: flex; text-align: center;}
.contact-info-2 .contact {width: 50%; padding: 0 15px;}

@media screen and (min-width: 750px) {
    .contact-info-2 {margin-bottom: 50px !important;}

    .contact-info-text {display: flex; align-items: center;}
    .contact-info-text .text {flex-grow: 1;}
    .contact-info-text .gallery {margin: 0 0 0 2em}
}

@media screen and (min-width: 980px) {
    .contact-info .vcard {margin-bottom: 0 !important;}
}

@media (prefers-color-scheme: dark) {
    .contact-info {
        background: rgb(16, 31, 45);
        color: white;
    }
}

.contact-info-text {text-align: center;}
.contact-info-text .gallery {display: flex; justify-content: center; align-items: center; margin: 0 0 0 2em}