﻿
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Bold.woff2') format('woff2'),
        url('/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Light.woff2') format('woff2'),
        url('/fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Medium.woff2') format('woff2'),
        url('/fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('/fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Italic.woff2') format('woff2'),
        url('/fonts/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


:root { 
    --color1:#1B1B1B;
    --color2:#F09135;
    --color3:#99CC66;
    --color4:#383d48;
    --color5:#363636;
    --color6:#45757F;
    
    
    --color7:#EBEBEB;
    --color8:#EEFBE9;
    --color10:white;
    --color11:black;
        

    --font-body:'Montserrat', sans-serif;
    --font-title:'Montserrat', sans-serif;

    

}

.greenbold { font-size:1.4rem; color:var(--color1); font-weight:bold; }

html, body {height:100%;}
body  
{ font-family: 'Montserrat', sans-serif; position:relative; width:100%; height:100%;
    font-size:1em; font-weight:normal; line-height:1.5;
color:black;

}
body, p { color: black; }
p { margin:1rem 0; }

body#popup
{
    background: none;
}


.Flds,.Row { display:inline-block; width:100%; }
.Left { display:inline-block; width:auto; float:left; }
.Right { display:inline-block; width:auto; float:right; }
.flex { display:flex; width:100%; flex-wrap:nowrap; }
.flex.half div{ width:50%; }

ul.orange li { background-image:url(/Images/liorange.png); background-size:auto 6px; }

h1 { font-family:var(--font-title); font-weight:700; text-transform:uppercase; 
     font-size:2rem;
     line-height:1.3;
    color:var(--color1);
     margin: 0;
    padding: 1em 0 1em 0;
    display:inline-block; width:100%;
    position:relative;
    }

h2 { font-family:var(--font-title); font-weight:600; text-transform:none; 
     font-size:1.2rem;
     line-height:1.3;
    color:var(--color5);
     margin: 0;
    padding: 0.6rem 0 0.6rem 0;
    display:inline-block; 
    text-transform:uppercase;
    position:relative;
    
    }
h2 span { position:absolute; left:0; top:0; bottom:0; margin:auto; display:block; width:20px; height:20px; border-width:4px; border-style:solid; }

h3 { font-family:var(--font-title); font-weight:900; text-transform:uppercase; 
     font-size:1.4rem;
    color:gray;
     margin: 0; margin-bottom:0; position:relative;
    padding: 1em 0 1rem 0; }
h3 span.subtitle.green { color:var(--color1); }

h4 { font-family:var(--font-title); font-weight:700; text-transform:none; 
     font-size:1.2rem; line-height:1.3;
    color:var(--color2);
     margin:0; position:relative;
    padding: 1rem 0 1.5rem 0; }

.errorMsg,.validation,.ItemValidation {color: Red;}

ul { padding:0; margin:0; margin-left:5px; } 
ul li { list-style:none; background-image:url(/Images/li.svg); background-repeat:no-repeat; background-position:0 10px;
        background-size:auto 10px;
        padding-left:25px; padding-top:3px; padding-right:0; padding-bottom:5px;  
        margin-bottom:0;
}
a, a:visited { color:var(--color1); font-weight:700;}
a:hover {color:var(--color1);}

.ImgW50 { max-width:50%; }
.ImgW25 { max-width:25%; }
.ImgW100 { width:100%; max-width:100%; }

.PageLayout { margin-left:auto; margin-right:auto; max-width:1200px; min-width:310px;  }

ul.li-green {  }
ul.li-green li{ 
    background-image: url(/Images/li-ring-green.svg);
    background-position: left center;
    background-size: 10px;
    background-repeat: no-repeat;
    list-style: none;
    color: var(--color11);
    padding-left: 20px;
}

.flex { display:flex; width:100%; flex-wrap:nowrap; }
.c12 { width:100%; }
.c6 { width:50%; }

#MainPage { position:relative; width:100%; height:100%; overflow:hidden; }
#content { position:relative; z-index:80;
           display:inline-block; width:100%; max-width:100%; float:left;
}
.hLogo { position:absolute; height:80px; width:130px; left:60px; top:60px; z-index:100; }
.hLogo a{ position:absolute; width:100%; height:100%; display:block; left:0; top:0; 
          background-image:url(/Images/logo.png); background-position:left center; background-size:contain; background-repeat:no-repeat; }
/*.hLogo a:hover{ -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform .2s;}*/
#logohorizontal { display:none; }
#header { display:block; width:100%; position:fixed; top:0; left:0; height:110px; z-index:300;
              background-color:var(--color1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}

#header.fix { 
    /*background-color:var(--color10);*/
}
#header.fix .hLogo{  }
#header .hLogo{ height:60px; width:310px; top:17px; }
#header.fix .hMenu #MenuButton,#header.fix .hMenu #CloseMenu{ top:30px; z-index:400; }
#header .hMenu #MenuButton,#header .hMenu #CloseMenu{ top:30px; z-index:400; }
#header .hLinkMenu { margin-top:30px; }
.hLinkMenu #TopMenu{  width:auto;
    height: auto;
    position: static;
    overflow: hidden;
    z-index: 300;
    display: table;
    left:auto;
    right:0;
    top:auto;
    margin-right:0;
    margin-left:auto;

}
.hLinkMenu #TopMenu .TopMenuContent .Menu { background:none; }
.hLinkMenu #TopMenu ul { margin:0; width:auto; display:flex; flex-wrap:nowrap; width:100%; }
.hLinkMenu #TopMenu ul li { width:auto; }
.hLinkMenu #TopMenu ul li a { text-align:center; padding:0 30px; }
.hLinkMenu #TopMenu ul li a span{ font-weight:300; text-transform:uppercase; }
.hLinkMenu #TopMenu ul li a.MenuActive { }
.hLinkMenu #TopMenu ul li a.MenuActive span{ padding-bottom:5px; border-bottom:2px solid var(--color2); }
.hLinkMenu #TopMenu ul li a:before { content:""; }
.hLinkMenu #TopMenu ul li a:after { content:""; }

#homebg { width:100%; height:100%; background-color:var(--color11);  /*background-image:url(/Images/homebg.jpg); background-position:center center; background-size:cover;*/ }
#homebg .boxleft{ position:absolute; width:calc(50% - 4px);left:0; bottom:0; height:calc(50% - 4px); }
#homebg .boxleft .boxbgimg{ background-image:url(/Images/kresomyslova-dolni2.jpg); background-position:center bottom;}
#homebg .boxright{ position:absolute; width:calc(50% - 4px);right:0; bottom:0; height:calc(50% - 4px);  }
#homebg .boxright .boxbgimg{ background-image:url(/Images/vladimirova.jpg);}
#homebg .boxbottom{ position:absolute; width:100%; left:0; top:0; height:calc(50% - 4px); }
#homebg .boxbottom .boxbgimg{ background-image:url(/Images/kresomyslova-horni2.jpg); background-position:center bottom 44%}
#homebg .boxbgimg { position:absolute; width:100%; height:100%; left:0; top:0; background-position:center center; background-size:cover; }
#homebg .boxbgimg:hover { transform: scale(1.1); transition: transform .2s; cursor:pointer; z-index:5; }
#homebg .boxbgimg:hover { -webkit-box-shadow: 9px 10px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 9px 10px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 9px 10px 15px 0px rgba(0, 0, 0, 0.5); }
#homebg .boxleft .boxbgimg:hover { border-right:5px solid black; border-top:5px solid black; }
#homebg .boxright .boxbgimg:hover { border-left:5px solid black; border-top:5px solid black; }
#homebg .boxbottom .boxbgimg:hover { border-top:5px solid black; border-bottom:5px solid black; }
#homebg .box {  overflow:hidden; }
#homebg .boxshadow { position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:2; }
#homebg .titletext { position:absolute; margin:auto; bottom:4rem; left:2rem; color:white; font-size:120%; z-index:4; }
#homebg .titletext { color:white; }
#homebg .titletext p,#homebg .titletext h2{ color:white; padding:0; margin:0; }
#homebg .titletext h2 { font-weight:300; font-size:2rem; text-transform:uppercase; }
#homebg .freebanner { position:absolute; background-color:var(--color2); color:white; width:250px; height:60px; line-height:60px; text-align:center; z-index:2;right:-58px; bottom:37px;
                      text-transform:uppercase; transform: rotate(-45deg); transform-origin: center;
}
/*#homebg .box:hover .titletext { display:none; }*/
#homebg .boxbgimg a { display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:3; }


#MenuButton,#CloseMenu { display:block; width:90px; height:38px; position:absolute; left:auto; right:60px; top:60px; background-color:var(--dark-header);
                z-index:200; cursor:pointer; 
                 
}
#MenuButton:hover,#CloseMenu:hover{-ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform .6s; }
#MenuButton .butt,#CloseMenu .butt,#HomeButton .butt{ display:block; width:38px; height:38px; position:absolute; right:0; left:auto; margin:auto; 
                    top:0; bottom:0; z-index:220;
                    }
#MenuButton .text,#CloseMenu .text,#HomeButton .text{ line-height:40px; color:white;
                    }
#HomeButton .butt { height:30px; width:30px; }
#MenuButton .butt #buttonImg,#CloseMenu .butt #buttonImg,#HomeButton .butt #buttonImg { fill:white; }
    #MenuButton:hover .butt #buttonImg, #CloseMenu:hover .butt #buttonImg { fill:var(--color1); }
#HomeButton { display:block; width:38px; height:38px; position:absolute; right:60px; top:57px; background-color:var(--dark-header);
                z-index:200; cursor:pointer; border:1px solid white; padding:3px; }
#HomeButton a { z-index:230; position:absolute; width:100%; height:100%; left:0; top:0; display:block; }

#CloseMenu { z-index:400; display:none; }

#TopMenu { width:500px; height:0; position:fixed; overflow:hidden; z-index:300;  display:block; left:auto; right:0; top:0; }
#TopMenu .TopMenuContent { display:flex; flex-wrap:nowrap; width:100%; height:100%; }
#TopMenu .TopMenuContent .Menu{ background:rgba(0,0,0,0.7); display:block; width:100%; height:100%; }
#TopMenu .TopMenuContent .Menu ul,#TopMenu .TopMenuContent .Menu ul li{ background:none;  }

#TopMenu ul,#TopMenu ul li{ list-style:none; background-image:none; margin:0; padding:0; }
#TopMenu ul { display:flex; float:right; width:300px; margin-right:60px; flex-wrap:wrap; justify-content:right; align-items:end; margin-top:125px;  }
#TopMenu li{ width:100%; }
#TopMenu li a{ color:var(--color10); text-transform:uppercase; text-decoration:none; 
               padding:0; margin:0; margin-bottom:10px; text-align:right; display:block;}
#TopMenu li a span { display:inline; width:100%; text-align:right; font-weight:300; font-size:1.2rem; color:white;  }
#TopMenu li a:hover { color:var(--color2); }
#TopMenu li a:hover span{  }
#TopMenu li a.MenuActive { color:var(--color10); }
#TopMenu li a.MenuActive::before { content:"["; font-size:1.6rem; }
#TopMenu li a.MenuActive::after { content:"]"; font-size:1.6rem; }
#TopMenu li a.MenuActive:hover { color:var(--color10); }
#TopMenu li a.MenuActive span{ /*display:block; padding-bottom:0.2rem; border-bottom:2px solid var(--color1);*/ padding:0 0.5rem; }
/*#TopMenu li.jazyk { margin-bottom:2em; }
#TopMenu li.jazyk a{ display:block; overflow:hidden; float:left; width:3em; height:3em; line-height:3em; text-align:center; border:1px solid var(--color5);
                  margin-left:5%; padding:0; }
#TopMenu li.jazyk #CloseMenu { float:right; margin-left:0; margin-right:5%; display:block; cursor:pointer;
                            width:3em; height:3em; line-height:3em; border-radius:50%;
}*/
#TopMenu .ButtonMenu {  }
#TopMenu .ButtonMenu.ButtonMenuLast { border:none; }
.contactFooter { position:absolute; left:60px; bottom:0; z-index:100; }
.contactFooter .flex { flex-wrap:nowrap; }
.contactFooter .flex .ico{  }
.contactFooter .flex .ico .icocube{ width:16px; height:16px; border:4px solid var(--color1); }
.contactFooter .flex .ico .icoline{ width:11px; height:100px; border-right:2px solid var(--color1); }
.contactFooter .flex .text{ padding-left:2rem; }
.contactFooter .flex .text a{ color:var(--color10); font-family:'Museo Sans 300'; text-decoration:none; font-weight:300; font-size:1.2rem; display:block; width:100%; }

.AbsoluteSizeBox { background-position:top center; background-size:cover; background-repeat:no-repeat; position:relative;
                   display:flex; width:100%;
}
.AbsoluteSizeBoxContent { width:100%; height:100%; max-width:1300px; /*padding-top:110px; padding-bottom:60px;*/ margin-left:auto; margin-right:auto;
                          

}
#DefaultPage .AbsoluteSizeBoxContent { position:relative; }
#PageHome .AbsoluteSizeBoxContent { position:relative; max-width:none; }
#PageHome .AbsoluteSizeBoxContent { position: absolute;
    max-width: none;
    /*height: calc(100% - 111px);*/ height:100%;
    display: block; /*margin-top:111px;*/ margin-top:0; }
.TopTitle { font-family:var(--font-title); font-weight:700; font-size:2rem; line-height:1.3;  position:relative; height:auto; margin:auto;
            text-align:left; width:80%; height:100%; display:flex; justify-content:center; align-items:flex-start; flex-direction:column;
}
.TopTitle .TopTitleContent { width:80%;}
/*.AbsoluteSizeBox.Box1{ background-image:url(/Images/bg1.jpg);
                       background-size:cover; background-position:center center;

}*/
#footer { width:100%; display:table; background-color:var(--color5); padding:4rem 0; border-top:8px solid black; }
#footer .bike { width:40%; color:white;  }
#footer .other { width:60%; }
#footer .logofooter { width:100%; height:60px; background-image:url(/Images/logo.svg); background-position:left center; background-repeat:no-repeat; background-size:contain;
                      margin-bottom:2rem;
}
#footer .heel,#footer p { color:#626262; }
#footer .heel .flex{ flex-wrap:nowrap; width:100%; }
#footer .heel .logomuller{ width:30%;  background-image:url(/Images/logomuller.svg); background-position:left center; background-repeat:no-repeat;
                           background-size:contain; margin-right:2rem;
}
#footer h2 { color:white; }
#footer a { color:var(--color2); }
#footer a.button { color:var(--color10); }
#ContactForm .item{ width:48%; margin-right:2%; }
#ContactForm .Name { margin-bottom:15px; }
#ContactForm .item.desc{ width:50%; margin-right:0; }
#ContactForm .UIControls .riTextBox[type="text"].riEmpty,
#ContactForm .UIControls input[type="text"].riEmpty,
#ContactForm .UIControls textarea.riTextBox.riEmpty,
#ContactForm .UIControls .RadDropDownList .rddlDefaultMessage { border:1px solid #626262; background-color:#262626;
                                                                -webkit-border-radius: 0;
                                                                -moz-border-radius: 0;
                                                                border-radius: 0;
}
#ContactForm .UIControls textarea.riTextBox.riEmpty,#ContactForm .UIControls input[type="text"].riEmpty,#ContactForm .UIControls .riTextBox[type="text"].riEmpty { 
    color:#cbcbcb; font-style:italic; }
#ContactForm .UIControls textarea.riTextBox { min-height:95px; }
#ContactForm .law { color:#cbcbcb; width:calc(100% - 200px); padding-top:15px; }
#ContactForm .sendform { width:200px; }
#ContactForm .lawsend { width:100%; margin:15px 0;}
#KontaktResponse { }
#KontaktResponse .ResponseContent{ display:block; background-color:lightgreen; color:black; padding:2rem 0; width:100%; text-align:center;  }
#MenuFooter { background-color:var(--color2); }
#MenuFooter #TopMenu { position:static; display:block; height:auto; width:100%; }
#MenuFooter #TopMenu ul{ margin:0 auto; display:flex; flex-wrap:nowrap; width:auto; justify-content:center; float:none;  }
#MenuFooter #TopMenu .TopMenuContent { display:table; height:auto; width:100%; }
#MenuFooter #TopMenu .TopMenuContent .Menu { background:none; height:auto; width:100%; }
    #MenuFooter #TopMenu li { width:auto; }
    #MenuFooter #TopMenu li a { padding:30px; white-space:nowrap;  }
    #MenuFooter #TopMenu li a span{ text-transform:uppercase; }
        #MenuFooter #TopMenu li a:before { content:""; }
        #MenuFooter #TopMenu li a:after { content:""; }
        #MenuFooter #TopMenu li a span { font-weight:500; }

.box.grey h2{ color:var(--color2); }
.box.white h2{ color:var(--color1); }
.box.grey ul li{ background-image:url(/Images/liblue.png); background-repeat:no-repeat; background-size: auto 6px; }
.box.white ul li{ background-image:url(/Images/liorange.png); background-repeat:no-repeat; background-size: auto 6px; }
.box.white { background-color:white; }
.box.grey { background-color:var(--color7); }

#header .hMenu #MenuButton { display:none; }