* {
    margin: 0;
    padding: 0;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    text-align: center;
    font:0.9em Verdana,Arial,sans-serif;
    line-height:1.7em;
    /* background: #e7ebf2; */
}

#fader {
    background:#fff;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1000;
}

a:link    {text-decoration: underline; }
a:visited {text-decoration: underline; }
a:hover   {text-decoration: none; color:white; }
a:active  {text-decoration: underline; }

.toLeft   {float: left;}
.toRight   {float: right;}

a.no-underline { text-decoration: none !important; }  

fieldset { border: none; }

img {border: none; max-width: 100%; height: auto;}

.clear, .cleaner { clear: both; }

h1 {
    font-weight: bold;
    font-size:34px;
    line-height: 1.3;
    text-align: left;
    margin:25px 0 10px 0px;
    clear:both;
}

h2 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
    text-align: left;
    margin: 35px 0 10px 0;
}

h3 {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    color: #ffaf00;
    margin: 25px 0 8px 0;
}

h4 {
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    margin-top:10px;
}

a {
    color: #FFAF00;
}

body span.pos {
    display:none;
}

.bold {
    font-weight: bold;
}

#systemConsole {
    border: 1px dashed #888888;
    background-color: #EDF6FB;
    position: fixed;
    left: 10px;
    top: 10px;
    text-align: left;
    width: 200px;
    padding: 10px;
    opacity: 0.6;
}


#content {
    float: center;
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 10px;
}

#container {
    background: transparent url('') center top repeat-y;
    clear: both;
    float: right;
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    margin:0 auto;
}


#work  {  
    text-align: justify;
    font-size: 12px !important;
    clear: both;
    color: white;
}

#work table {
    margin: 0 auto;
}

#work li {
    margin-left: 20px;
}

#page{
}

#main{
    width:100%;
    margin:0 auto;
    background: #C13584;
    float: left;
    margin-top: 25px;
}

#area {
    clear: both;
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin:0 auto;
    margin-top: 5px;
}

#header {
    height: 30px;
    margin-top: 0px; 
}

#logo {
    float: left;
    width: 182px;
    height: 57px;
    margin-top: 18px;
}

#logo a {
    outline: none;
}


/* --------------------------- MESSAGE BOX ------------------------------------*/
#messageBox {
    margin-bottom: 10px;
    font-size: 16px;
}

#messageBox div {
    padding: 5px 10px;
}

#messageBox .mess-err {
    background: transparent url('msg_err_bg.png') repeat center center;
    color: #ffcccc;
}

#messageBox .mess-ok {
    background: transparent url('msg_ok_bg.png') repeat center center;
    color: #ccffcc;
}
/* ----------------------------------------------------------------------------*/









/* ----------------------------- MAIN MENU ------------------------------------*/
#mainmenu{
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin:0 auto;
}

#page span.pos {
    display: none;
}

#mainmenu a {
    color: white;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
    display:inline-block; 
    text-align: center;
    padding: 5px;
    outline: none;
}

#mainmenu a span {
    cursor: pointer;
}

#mainmenu .active a {
    color: white;
    font-weight: bold;
}

#mainmenu .active a span, #mainmenu .hover a span {
}



#mainmenu li{
    position: absolute;
    z-index:9;
    float:left;
    list-style-type: none;
    position:relative;
    background: #C13584;
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 2px 4px;
}

#mainmenu li.active {
    background: #833AB4;
}

#mainmenu li:hover, #mainmenu a:hover, #mainmenu a:focus {
    background: #833AB4;
}


#mainmenu ul li ul {
    display: none;
    position: absolute;
    top: 30px;
    left: -1px;
    width: 200px;
}

#mainmenu ul li.hover ul {
    display:block;
}

#mainmenu ul ul li {
    float: none;
    border: none;
}

#mainmenu ul ul a {
    display:block;
    font-size:16px;
    margin: 0;
    height: auto;
    font-weight: normal;
    padding: 0 20px 0 20px;
    text-align: left;
    border-bottom: 1px solid gray;
}

#mainmenu ul ul a span {
    height: auto;
    display: block;
    padding-top: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
}

#mainmenu ul ul .active a, #mainmenu ul ul .hover a  {
}

#mainmenu ul ul a:hover, #mainmenu ul ul a:focus {
    background: #833AB4;
}

#mainmenu ul ul .active a span, #mainmenu ul ul .hover a span {
}

#mainmenu ul ul ul{
    display:none;
}
/* ----------------------------------------------------------------------------*/














/* ---------------------------------- LEFT COLUMN LEFTCOL------------------------------------ */

#leftColumn {
    float: left;
    width: 200px;
}




#loginPassword {
    display: none;
}
#loginBox input {
    color: #888888;
}



/* ---------- LEFT COL NEWS --------*/

#newsList .newsItem {
    margin-bottom: 20px;
}

#newsList .newsDate {
    display: block;
    text-align: right;
    color: #696969;
    font-size: 10px;
}

#newsList .newsContent {
    font-size: 9px;
    line-height: 1.6em;
    text-align: justify;
}

.newsLink {
    display: block;
    margin-top: 8px;
}

.newsLink a {
    display: block;
    float: right;
    text-decoration: none;
    font-size: 9px;
}

#newsList a {
    text-decoration: none;
}

.newsItem h2 a {
    font-size: 12px;
}

#newsList .newsItem h2 {
}

#newsList #allNewsLink a {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 20px;
}



/* -------------------------------- */



/* ---------------------------------- END LEFT COLUMN------------------------------------ */















/* -------------------------------------- SLIDER ------------------------------------- */

#slider {
}


/* ----------------------------------------------------------------------------------- */











/* ------------------------------- PRODUCT LIST ----------------------------------------- */


/* ----------------------------------------------------------------------------------- */











/* --------------------------- BASKET ESHOP BUY KOS ---------------------------------- */

table#basketContent {
    width: 100%;
    margin-bottom: 10px;
}


#fakturacniUdaje label {
    display: block;
    float: left;
    width: 200px;
}

/* ----------------------------------------------------------------------------------- */















/* ------------------------------- FOOTER ----------------------------------------- */
#footer{
    clear: both;
    font-size: 11px;
    text-align: left;
    line-height: 1.4em;
    overflow: hidden;
    width: 100%;
    background: #e7ebf2;
    min-height: 100px;
}

#footer a {
}

#footerMenu {
    float: right;
}


#copyright {
    text-align: left;
    margin:20px 0;
    color: #C13584;
    width: 600px;
    float: left;
}

#copyright a {
    text-decoration: none;
    color: #C13584;
}

#google_fb {
    width: 350px;
    float: right;
    overflow: hidden;
}

#socials {
    float: right;
}

#socials ul li {
    list-style-type: none;
    float: left;
}

/* ============================== END FOOTER ================================= */








/* ============================ NEWS / NOVINKY ================================ */
#newsBox {
    float: right;
    width: 460px;
    margin-right: 10px;
    font-size: 11px;
    line-height: 1.4em;
}

.newsMainImage img {
    float: left;
    margin: 0 20px 5px 0;
    border: 6px solid #3A293B;
}

#backToNewsList {
    text-align: right;
}


#work ul li.boxNewsList {
    list-style-type: none;
    list-style-image: url();
    clear: both;
    margin-top: 20px;
    margin-left: 0;
    border-bottom: 2px dotted #3e3e3e;
    padding-bottom: 20px;
}

.newItem {
    clear: both;
    min-height: 100px;
    padding: 0 0 10px 0; 
    margin: 0 0 20px 0; 
    border-bottom: 2px dotted #3e3e3e; 
}

.newItem img {
    float: left;
    margin: 0 10px 10px 0; 
}

a#allNewsLink {
    font-size: 14px;
    text-decoration: none;
    display: block;
    float: right;
}

#newsBox-content {
    margin-bottom: 40px;
    padding-top: 5px;
}

/* ===================== END NEWS / NOVINKY ================================= */













/* =========================== KONTAKTNI FORM CONTACT======================== */
input.submit {
    float: right;
    background: transparent url('button.jpg') center center no-repeat;
    width: 174px;
    height: 40px;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 30px;
}

p.note {
    text-align: right;
}


#contactForm {
    margin: 20px 0 0px 0; 
}

#contactForm dl.submitButton dt {
    float: right;
}

#contactForm dl dd {
    width: 80px;
    float: left;
    padding-right: 10px;
    text-align: right;    
    font-weight: bold;
}

#contactForm dl dt {
    float: left;
}

#contactForm dl {
    clear: both;
    height: 20px;
}


#contactForm h2 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 40px;
}
/* =========================== END KONTAKTNI FORM CONTACT ==================== */















/* ============================ GALERIE ===================================== */
.galeriListItem {
    float: left;
    margin-right: 15px;
}

.galeriListItem img {
    border: 6px solid #3A293B;
}

.galeriListBox h3 {font-size: 110%;
                   margin-bottom: 10px;}

.galeriListBox h3 a {
    text-decoration: none;
}

.galeriListItem .galeriFullOpen a {
    display: block;
    margin: 0 27px 0 27px;  
    background: transparent url('gallery_more.jpg') right center no-repeat;
    padding: 0 20px 0 0; 
    text-decoration: none;
    font-size: 100%;
}


#work .onPageGaleriImages ul li {
    float: left;
    margin-right: 13px;
    margin-left: 0px;
    margin-bottom: 10px;
    list-style-image: url() !important;
    list-style-type: none !important;
}

#work .onPageGaleriImages ul li.noMargin {
    float: right;
    margin-right: 0px;
}

#onPageGaleries {padding-top: 40px;}
.onPageGaleriImages img {
    border: 6px solid #3A293B;
}
/* ========================== END GALERIE =================================== */









/* ============================ BREADCRUMBS / DROBECK ======================= */
#breadcrumbsContainer a {  text-decoration: none; font-weight: normal; }
#breadcrumbsContainer {
    height: 62px;
    text-align: right;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}
#breadcrumbs {
    display: block;
    float: right;
    margin-top: 35px;
}
/* ===================== END BREADCRUMBS / DROBECK =========================== */








/* =================================== PAGE LISTER =========================================*/
#pageLister { margin-top: 30px; padding: 0 5px 0 5px; }

#pageLister span { color: #E1306C; }

#pageLister ul li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 10px;
}

.lister {
    float: left;
}

#pageLister ul li.active span {
    display: block;
    height: 23px;
    padding: 3px 5px 0 5px;
    background: transparent url('pager_active.jpg') center top no-repeat;
    color: #E1306C;
}

#pageLister .next span, #pageLister .prev span {
    display: none;
}


#pageLister .next a, #pageLister .prev a {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

#pageLister .next a {
    background: transparent url('pager_right.jpg') center center no-repeat;
}
#pageLister .prev a {
    background: transparent url('pager_left.jpg') center center no-repeat;
}

#pageLister ul li a {
    display: block;
    text-decoration: none;
    height: 23px;
    padding: 3px 5px 0 5px;
    color: #E1306C;
}

#pageLister ul {
    margin: 0;
}

#pageLister ul li.max {
    display: none;
}

/* =============================== END PAGELISTER============================ */


/* =================================== ENQUIRY =========================================*/
#enquiry_box{text-align:left;}
#enquiry_box h4{font-size: 14px;}
#enquiry_box h5{font-size: 13px;}
#enquiry_box label{display:block; clear:both;}
#enquiry_box .bar{display: block;height: 8px; float:left;margin:7px 5px 0 0;}




#tinymce ul li {
    margin-left: 25px;
}

#tinymce {
    text-align: left;
}

#blue_line {
    background: linear-gradient(90deg, #405DE6 0%, #833AB4 25%, #C13584 50%, #E1306C 75%, #FD1D1D 100%);
    min-height: 80px;
    width: 100%;
    overflow: hidden;
}

#site-logo-link {
    text-decoration: none;
    display: inline-block;
}

#site-logo-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

#hero-banner {
    background: linear-gradient(135deg, #405DE6 0%, #833AB4 25%, #C13584 50%, #E1306C 75%, #F77737 100%);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    color: #fff;
    margin: 20px 0;
}

#hero-banner h2 {
    font-weight: normal;
    font-size: 22px;
    max-width: 650px;
    margin: 0 auto 20px auto;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#hero-banner .hero-cta {
    display: inline-block;
    background: #fff;
    color: #C13584;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 6px;
}

#hero-banner .hero-cta:hover {
    background: #f4f4f4;
}

.ig-login-mock {
    max-width: 360px;
    margin: 20px auto 10px auto;
    padding: 30px 24px;
    border: 1px solid #dbdbdb;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.ig-login-mock-logo {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 24px;
    background: linear-gradient(90deg, #405DE6, #833AB4, #C13584, #E1306C, #F77737);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ig-login-mock-field {
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 9px 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #8e8e8e;
    background: #fafafa;
    text-align: left;
}

.ig-login-mock-button {
    background: #C13584;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border-radius: 6px;
    padding: 8px 0;
    margin-top: 12px;
}

.ig-login-mock-divider {
    display: flex;
    align-items: center;
    margin: 18px 0 12px 0;
    color: #8e8e8e;
    font-size: 12px;
    font-weight: bold;
}
.ig-login-mock-divider::before,
.ig-login-mock-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #dbdbdb;
}
.ig-login-mock-divider span {
    padding: 0 12px;
}

.ig-login-mock-link {
    color: #00376b;
    font-size: 13px;
}

#in_blue_line {
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin:0 auto;
}

#prihlasit_se {
    width: 77px;
    height: 26px;
    float: right;
    margin-top: 30px;
}

#main_content {
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin:0 auto;
    height: auto;
    margin-bottom: 30px;
}

#footer_content {
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    margin:0 auto;
}

#google_1 {
    width:320px;
    height:50px;  
    float: right;
    margin-right: 80px;
    margin-top: 3px;
}

.google_2 {
    width:680px;
    height:300px;
    float: left;
    margin-left: 15px;
    margin-top:38px;
}

.google_2_1 {
    width:680px;
    height:300px;
    float: left;
    margin-left: 15px;
    margin-top:38px;
}


#google_3 {
    width:970px;
    height: 310px;
    margin:0 auto;
    position: absolute;
    float: left;
    margin-left: 75px;
    margin-top: 0px;
}

#google_4 {
    width:336px;
    height:280px;
    position: absolute;
    float: left;
    margin-top: 410px;
    margin-left: 100px;    
}

/* 
#google_1, #google_2, #google_3, #google_4 {
    background-color: red;
}

*/

#search_form {
    margin-left: 400px;
    width: 300px;
    padding-top: 20px;
}

.search_input_text {
    color: #959595;
    font-style: italic;
    background: transparent url('search_input_submit.png') no-repeat center center;
    width: 350px;
    height: 45px;
    padding-left: 10px;
    padding-right: 10px; 
    float: left;
    border: none;
    outline: none;     
    margin-left: 10px;  
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;    
}

.search_input_submit {
    color: white;
    background: transparent url('search_input_text.png') no-repeat center center;
    width: 160px;
    padding-left: 50px;
    height: 45px;
    cursor: pointer;
    text-align: center;
    float: right;
    border: none;
    outline: none;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

#cse-search-box {
    margin-top: 0px;
}

#reklama_970 {
    width: 970px;
    height: 310px;
    
}

#reklama_970_hp {
    width: 970px;
    height: 310px;


}

/* ================================================================
   RESPONSIVE / MOBILE
   ================================================================ */

.menu-toggle {
    display: none;
    background: #833AB4;
    color: white;
    border: none;
    font-size: 16px;
    padding: 8px 14px;
    margin: 15px 0;
    cursor: pointer;
    border-radius: 4px;
}

@media (max-width: 1040px) {
    #reklama_970, #reklama_970_hp, #google_3 {
        width: 100%;
        max-width: 970px;
        height: auto;
    }

    #google_4 {
        position: static;
        margin: 10px auto;
        width: 100%;
        max-width: 336px;
    }

    #google_1 {
        float: none;
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 10px auto;
    }

    #google_2, .google_2, .google_2_1 {
        float: none;
        width: 100%;
        max-width: 680px;
        height: auto;
        margin: 10px auto;
    }

    /* ad slot divs get inline min-width/min-height from Google Ad Manager - override so they never force horizontal overflow */
    div[id^="div-gpt-ad-"] {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {

    body { font-size: 1em; }

    h1 { font-size: 26px; }
    h2 { font-size: 19px; }

    /* ---- top bar: logo + search stack instead of sitting side by side ---- */
    #blue_line { height: auto; padding: 10px 0; }
    #logo { float: none; margin: 0 auto 10px auto; }
    #search_form {
        margin-left: 0;
        width: 100%;
        padding-top: 0;
        float: none;
        clear: both;
    }
    .search_input_text {
        float: none;
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-bottom: 8px;
    }
    .search_input_submit {
        position: static;
        float: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* ---- hamburger-collapsible main menu ---- */
    .menu-toggle { display: inline-block; }

    #mainmenu ul.TreeMenu {
        display: none;
        width: 100%;
    }

    #mainmenu.mobile-open {
        background: #C13584;
        padding-bottom: 10px;
        position: relative;
        z-index: 50;
    }

    #mainmenu.mobile-open ul.TreeMenu {
        display: block;
        background: #C13584;
    }

    #mainmenu li {
        float: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background: transparent;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    #mainmenu li.active {
        background: #833AB4;
    }

    #mainmenu a {
        display: block;
        text-align: left;
        padding: 12px 15px;
    }

    #mainmenu li:hover, #mainmenu a:hover, #mainmenu a:focus {
        background: #833AB4;
    }

    /* submenus: no hover dropdown on touch, just show nested & indented, slightly darker to show hierarchy */
    #mainmenu ul li ul {
        display: block;
        position: static;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        background: #2f4a82;
    }

    #mainmenu ul ul li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    #mainmenu ul ul a {
        padding-left: 30px;
        border-bottom: none;
        color: white;
    }

    /* ---- two-column / multi-column content blocks become one column ---- */
    .toLeft, .toRight {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    #work [style*="column-count"] {
        column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
    }
}