/* default definice */
body {margin-top:40px;}


@color-header: #AAAAAA;
@color-navbar: #333333;
@color-body: #EEEEEE;
@color-main: #440000;
@color-darken: rgba(50, 50, 50, 0.1);
@color-error: #440000;
@color-error-bg: rgba(255, 255, 255, 1);
@size: 1px;
@radius: 0;

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .row { padding:0; margin:0;}

.container { padding:10px; }

.left {margin-left:0px;}
.right {margin-right:0px;}  
.center {margin:0 auto;} 

b { color:  #555555; }

.row { padding-bottom:10px; padding-top:10px; }

h1, h2, h3, h4, h5, h6      { margin-bottom:15px; margin-top:0; font-weight:bold;  color: @color-main; padding:0;
                              }
h1                { font-size: 400%; color:white; font-weight:bold; text-align:center; margin-top:1em;
                    text-shadow: -1px 0 @color-main, 0 1px @color-main, 1px 0 @color-main, 0 -1px @color-main;}
h2                { font-size: 200%; color:@color-main;  font-weight:bold; text-align:center;}
h3                { font-size: 120%; color:@color-main; font-weight:bold;}
h4                { font-size: 120%; color:@color-navbar;  font-weight:bold; text-align:center; }
h5                { font-size: 170%; color:@color-main; font-weight:bold; text-align:left; margin-bottom:-20px;}

li.active a:hover   { box-shadow:none;}

  #contactform label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
  }

.img-responsive {width:100%;}

body {
  background: @color-body;
  color: @color-navbar;
  top:0px;
  p{
  color: @color-navbar
  }
  }

.border-radius {
 border-radius: @radius;
  } 

.container {
  background: transparent;
  color: @color-navbar;
  }

.main {
  margin-top:0px;
  }

/* navbar */
.nav-navbar {
  text-align:center; margin:0 auto; margin-bottom:0px; margin-top:0px; 
  background:white; border-bottom:3px solid @color-main; min-height:40px; box-shadow:0px 3px 3px gray;
  .container {padding-left:0px; padding-right:0px; text-align:center; padding-top:10px; padding-bottom:5px;}
  .menu{margin:0 auto; display:inline-block; padding:0;}
  li{
    list-style:none;
    float:left;
    position:relative;
    a {
      text-decoration:none; color:@color-main; padding:30px; padding-top:3px; padding-bottom:3px; margin:0; margin-top:5px;
    }
    a:visible{
      color:gray;
    }
    a:hover{
      color:gray;
    }
    a:active {
      color:gray;
    }
    a:target {
      color:gray;
    }
  }
  li.active a:hover {color:gray;}
  .text-left li {float:left;}
  .text-right li {float:right;}
}

/* coumim */
#coumim {  
    .col-xs-12 p { 
    padding-left:3%;
    padding-right:3%;
    padding-bottom:2em;
    text-align:left;
    max-width:58em;
    margin:0 auto;
    line-height:2;
    }
    h4 { 
    padding-left:3%;
    padding-right:3%;
    }
    .block-doc {margin:0 auto; max-width:65em;}
    .block-doc p {text-align:center; line-height:1.4;}
    .circle-block {position:relative; display:block; text-align:center; min-height:1px; float:left; width:11.1%; padding:0.5em; margin:0 auto;}
    .ovladam-block{
        display:block;
        padding:50%;
        text-align:center;
        background:@color-main;
        position:relative;
        color:transparent;
        border:2px solid @color-main;
        p{
          position:absolute;
          top:40%;
          left:0;
          width:100%;
          margin:0 auto;
          color:white;
        }
    }

    .ovladam-block:hover{
        background:white;
        border:2px solid @color-main;
        color:@color-body;
        p{
        color:@color-main;
        }
    }

    .zaklady-block{
        display:block;
        padding:50%;
        text-align:center;
        background:gray;
        border:2px solid gray;
        color:@color-main;
        p{
          position:absolute;
          top:40%;
          left:0;
          width:100%;
          margin:0 auto;
          color:white;
        }
    }

    .zaklady-block:hover{
        background:white;
        border:2px solid gray;
        color:@color-body;
        p{
        color:gray;
        }
    }  
}

/* reference */
.slick-slider {
    margin-bottom: 5px;
    }

.filtering1{
    cursor: grab;
    h3{
      border:0px solid @color-body;
      margin:1em;
      font-size:110%;
      min-height:500px;
      overflow: hidden;
      background:transparent;
      border-bottom:1px solid gray;
      border-top:1px solid gray;
          p  {
            font-weight:normal;
            font-size:85%;
            line-height:2;
             }
          .slider-img  {
            min-height:500px;
            overflow: hidden;
          }
          .popis  { 
            height:100%;
          }
     }
}

.filtering2{
    cursor: grab;
    position:relative;
    width: calc(80%);
    left:10%;
    h3{
    overflow: hidden;
    margin:3px;
     background:white;
     height:94px; 
    }

    img{
      max-height:100px;
      max-width:200px;
      padding:10px;
    }
    .glyphicon-triangle-left, .glyphicon-triangle-right{
        display:block;
        width:40px;
        height:100px;
        background: transparent;
        border:0px;
        text-align: center;
        z-index:1000;
        margin-top:0;
        font-size:200%; 
        top:0px; 
        color:gray;
        position:absolute;
    }
    .glyphicon-triangle-left:hover, .glyphicon-triangle-right:hover{         
        color:@color-main;        
    }
    .glyphicon-triangle-left{
        left: -10%;
        margin-left:-15px;
    }
    .glyphicon-triangle-right{ 
        right:-10%;
        margin-right:-15px;
    }
}

.otoceny {
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
  position: absolute;
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  left:10%;
  float:left;
}

/* nazory */
#nazory {
  .doporuceni-block {
        max-width:55em; 
        margin:0 auto;
            .col-xs-6 {padding:2em;}
            .doporuceni { position:relative;  display:block; width:100%; height:100%; }
            .text {position:relative;  display:block; width:100%;  padding:1em; font-style:italic;}
            .inic {position:relative;  display:block; width:100%;  padding:1em; padding-top:0;}
            .jmeno {position:relative;  display:block; width:100%;  padding:1em; padding-bottom:0; font-weight:bold}
            li {position:relative;  display:block; width:100%; padding:1em; font-weight:bold}
            hr {color:gray; background:gray; height:1px; margin:-5px;}
}
}



.popis {padding:2%; padding-right:20px;}

.i {background: @color-body}

.btn {
display:block;
background: @color-main;
color: white;
float:left;
.border-radius;
margin-right: 1px;
border: 3px solid @color-main;
border-bottom:0;
&:hover, &:active, &:focus, &:active:focus { background:@color-body;
}
.active { background:@color-body;
}
}

.btn.active, .btn:active { background:@color-body; box-shodow:none; color:black;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .btn.active.hover, .btn.active:hover, .btn:active.hover, .btn:active:hover, .btn:focus {
    outline: none;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}


 /* kontakt */

 .filters { 
      -webkit-filter: grayscale(1);
      filter        : grayscale(1);
      min-width:10em;
      width:15%;
      margin:0 auto;
      opacity:1;
      border:2px solid white;
  }

#kontakt{

  .col-md-6 {
    padding:2em;
    .link {
      padding-right:1.5em; float:left; min-height:1px; position:relative; width:80px;
    }
    .text {
      padding-left:1em; float:left; min-height:1px; position:relative; width:calc(~'100% - 80px');
      p{
        line-height:2;
      }
    }
  }
}
 .kontakt-icon {padding:50%; display:block; background:@color-main; border-radius:50%; position:relative; border:2px solid @color-main; margin-bottom:1em; 
 .icon, .glyphicon {position:absolute; top:0; left:0; padding:0px;  margin:20%; font-size:250%; color:white;}
 }
 .kontakt-icon:hover {background:white; border:2px solid @color-main;
 .icon, .glyphicon {color:@color-main; }
 }

/* kontaktní formular */

.form-horizontal .control-label { text-align:left;}
.control-group {padding-bottom:10px;}

.btn-primary {
display:block;
height:40px;
background: @color-main;
border:0px;
color: white;
float:right;
.border-radius;
margin-right: 1px;
border: 0px;

&:hover, &:active, &:focus { background:#220000;
          outline:0px;
          box-shadow:none;
}
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.focus, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:focus, .btn-primary.active.hover, .btn-primary.active:hover, .btn-primary:active.hover, .btn-primary:active:hover {
    outline: none;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
    background:@color-main;
}
div.error { display: none; }
input, textarea { border: 1px solid @color-header; }
input { height:30px; padding-left:10px !important;}
textarea { padding:10px !important; }
input:focus {outline:0px; }
input.checkbox { border: none }
input:focus { border: 1px solid @color-header; }
input.error { border: 1px solid @color-error; background: @color-error-bg;}
textarea.error { border: 1px solid @color-error; background: @color-error-bg;}
label.error { color:@color-error; }
#result { color:@color-main; font-weight:bold; }


/* footer */
footer { 
  background: @color-body; 
  padding:1em;  
  position:relative; 
  bottom: 0;
  width: 100%; 
  min-height: 100px;
  margin-top:-1%;
  padding-top:10px;
  border-top:1px solid gray;
  text-align:center;
  a { 
    color:white; text-decoration:none; 
  }
   }

@media screen and  (max-width:991px) {      
  .carousel-indicators li.active, .carousel-indicators li { width:20%; }
  #kontakt .col-md-6 {padding-top:0; padding-bottom:0;}
   h1 {margin-top:0.2em;}
}


 @media screen and  (max-width:767px) {      
  #coumim .block-doc {max-width:35em;}
  #coumim .circle-block {width:20%; margin:0 auto;}
  #coumim .block-doc .a, #coumim .block-doc .b {width:100%; display:block;}
  #coumim .block-doc .b {margin-left:10%;}
  .filtering1{
  h3{
  min-height:250px;
  min-height:400px;
  overflow: hidden;
  p  {
  font-weight:normal;
    font-size:85%;
  }
  .slider-img  {
    min-height:250px;
    overflow: hidden;
  }
  }
  }
  .popis { height:200px; overflow:auto;}
  .kontakt-icon {  margin-right:0px;}
  #coumim {
      p { 
      padding-top:2%;
      } 
      h4 { 
      margin-bottom:0%;
      }     
  }

  .nav-navbar li a{width:100%; display:block; position:relative; padding:20px; padding-top:3px; padding-bottom:3px;}
  .nav-navbar li{width:100%; display:block; position:relative; }
  .nav-navbar {
  .menu{width:100%;}  
  li{ padding-left:0px; padding-right:0px;
    a {
      text-decoration:none; color:white; padding:30px; padding-top:3px; padding-bottom:3px; margin:0; margin-top:1px; margin-bottom:1px; background:@color-main; border-bottom:1px solid @color-main; border-top:1px solid @color-main;
    }
    a:visible{
      color:gray;
    }
    a:hover{
      color:@color-main; background:white; border-bottom:1px solid @color-main; border-top:1px solid @color-main;
    }
    a:active {
      color:gray;
    }
    a:target {
      color:gray;
    }
  }
  }
  li.active a:hover {color:gray;}
  .nav-navbar{position:relative;}
  h1 {margin-top:0;}
  .main {margin-top:0;}
  #kontakt .col-md-6 .text p {
    line-height: 1.6;
    }
  body{margin-top:0;}
  .nav-navbar {background:transparent; border:0; box-shadow:none;}

}
 
#top {height:0.5em;} 

@media screen and  (max-width:550px) {   
  .nav-navbar li a{padding:10px; padding-top:3px; padding-bottom:3px;}
}


@media screen and  (max-width:450px) {   
  .nav-navbar .text-left li {float:none;}
  .nav-navbar .text-right li {float:none;}
  .doporuceni-block .col-xs-6 {width:100%; padding:3em;}
}