html, body {
    background: #f2f2f2;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

#nav-bg nav {
    height: 37px;
}

#nav-bg {
    background: #fff;
    padding-bottom: 12px;
    min-height: 49px;
}


@media (min-width: 700px) {
  #logo {
        background: url('images/s4h-logo-orizle.png');
        width: 250px;
        height: 234px;
        margin-top: -12px;
        margin-left: 125px;
        z-index: 100;
        position: relative;
    }
}

@media (min-width: 1000px) {
    #logo {
        background: url('images/s4h-logo-orizle.png');
        width: 250px;
        height: 234px;
        margin-top: -12px;
        margin-left: 135px;
        z-index: 100;
        position: relative;
    }
    
    #slogan{
        width: 270px;
        height: 39px;
        background: url('images/slogan.png') no-repeat;
        float: right;
        margin-top: -180px;
        margin-right: 40px;
    }
}

@media (min-width: 1300px) {
    #logo {
          background: url('images/s4h-logo-orizle.png');
          width: 250px;
          height: 234px;
          margin-top: -61px;
          margin-left: 200px;
          z-index: 100;
          position: relative;
    }
    
    #slogan{
        width: 270px;
        height: 39px;
        background: url('images/slogan.png') no-repeat;
        float: right;
        margin-top: -130px;
        margin-right: 200px;
    }
}

@media (min-width: 1600px) {    
    #logo {
        background: url('images/s4h-logo-orizle.png');
        width: 250px;
        height: 234px;
        margin-top: -61px;
        margin-left: 380px;
        z-index: 100;
        position: relative;
    }
    
    #slogan{
        width: 270px;
        height: 39px;
        background: url('images/slogan.png') no-repeat;
        float: right;
        margin-top: -130px;
        margin-right: 250px;
    }
}

@media (min-width: 1900px) {
    #logo {
        background: url('images/s4h-logo-orizle.png');
        width: 250px;
        height: 234px;
        margin-top: -61px;
        margin-left: 460px;
        z-index: 100;
        position: relative;
    }
    
    #slogan{
        width: 270px;
        height: 39px;
        background: url('images/slogan.png') no-repeat;
        float: right;
        margin-top: -130px;
        margin-right: 330px;
    }
}
#logo a {
    width: 249px;
    height: 233px;
    display: block;
}


.container-v1 {
    width: 1000px;
}

@media (min-width: 480px) {
  .container-v1 {
    width: 400px;
  }
}

@media (min-width: 768px) {
  .container-v1 {
    width: 550px;
  }
}

@media (min-width: 992px) {
  .container-v1 {
    width: 770px;
  }
}

@media (min-width: 1200px) {
  .container-v1 {
    width: 1000px;
  }
}


/*** NAVIGACE ***/
@media (min-width: 700px) {
  nav {
    float: right;
    margin-right: 120px;
  }
}

@media (min-width: 1000px) {
  nav {
    float: right;
    margin-right: 198px;
  }
}

@media (min-width: 1300px) {
  nav {
    float: right;
    margin-right: 300px;
  }
}

@media (min-width: 1600px) {
  nav {
    float: right;
    margin-right: 395px;
  }
}

@media (min-width: 1900px) {
  nav {
    float: right;
    margin-right: 465px;
  }
}

nav {

}
nav ul {
    margin: 0;
    padding: 0;
    float: left;
}
nav ul li {
    display: inline;
}
nav ul li.first {
    width: 43px;
    height: 37px;
}
nav ul li a {
    font-size: 12px;
    float: left;
    text-decoration: none;
    color: white;
    padding: 10px 30px;
    background-image: url(images/6.png);
    transition: background-image 0.3s ease;
    -webkit-transition: background-image 0.3s ease;
}
nav ul li a:hover {
    text-decoration: none;
    color: #fff;
    background-image: url(images/8.png);
}
nav ul li a.active {
    text-decoration: none;
    color: #fff;
    background-image: url(images/7.png);
}

nav ul li div.first {
    width: 42px;
    height: 37px;
    float: left;
    background-image: url(images/4.png);
    transition: background-image 0.7s ease;
    -webkit-transition: background-image 0.7s ease;
}
nav ul li div.last{
    width: 42px;
    height: 37px;
    float: left;
    background-image: url(images/5.png);
}

#langs{
    margin: 0;
    padding: 0;
    float: left;
    margin-left: 138px;
    margin-top: -40px;
}

#langs li {
    display: inline;

}
/*** !NAVIGACE ***/


/*** BAR ***/
#bar-bg {
    height: 123px;
    background: #fff;
}

.inline {
    display: inline;
}

#bar-bg-left {
    padding: 0;
    margin: 0;
    height: 97px;
    background-image: url(images/3.png);
    background-repeat: repeat-x;
    width: 70%;
    float: left;
}
#bar-bg-center {
    padding: 0;
    margin: 0;
    height: 97px;
    background: #fff url(images/2.png);
    background-repeat: repeat-x;
    width: 138px;
    position: absolute;
}
#bar-bg-right {
    padding: 0;
    margin: 0;
    height: 97px;
    background-image: url(images/1.png);
    background-repeat: repeat-x;
    width: 30%;
    float: right;
}
/*** !BAR ***/


/*** CONTENT ***/
#content-bg {
    padding-top: 12px;
    overflow: visible;
}

#content-box {
    min-height: 200px;
    background: #787878;
    color: #fff;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    z-index: 20;
    position: relative;
    margin-bottom: -30px;
}

#content-top {
    height: 58px;
    background: #fff;
    -webkit-border-radius: 18px 18px 0px 0px;
    -moz-border-radius: 18px 18px 0px 0px;
    border-radius: 18px 18px 0px 0px;
}

#content-top-left {
    -webkit-border-radius: 18px 0px 0px 0px;
    -moz-border-radius: 18px 0px 0px 0px;
    border-radius: 18px 0px 0px 0px;
    padding: 0;
    margin: 0;
    height: 58px;
    width: 50%;
    float: left;
}

#content-top-center {
    padding: 0;
    margin: 0;
    height: 58px;
    background: #fff url('images/9.png');
    float: left;
    width: 45px;
    position: absolute;
}

#content-top-right {
    -webkit-border-radius: 0px 18px 0px 0px;
    -moz-border-radius: 0px 18px 0px 0px;
    border-radius: 0px 18px 0px 0px;
    padding: 13px 0px 0px 0px;
    margin: 0;
    height: 58px;
    background: #ADADAD;
    width: 50%;
    float: right;
    color: #787878;
    font-size: 25px;
    font-weight: 700;
}

#content-center {
    font-size: 12.5px;
}

#content-bottom {
    padding: 20px 30px 30px 30px;   
    color: #787878;
}

#content-bottom-box {
    padding-top: 31px;
    padding-bottom: 31px;
    background: #fff;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
}

@media (max-width: 1000px) {
    #content-bottom-box-desc-right {
        margin-bottom: 50px;
    }
}

#content-bottom-box-desc {
    height: 42px;
    margin-bottom: 30px; 
}

#content-bottom-box-desc-left {
    color: white;
    background: #787878;
    height: 42px;
    -webkit-border-radius: 0px 20px 20px 0px;
    -moz-border-radius: 0px 20px 20px 0px;
    border-radius: 0px 20px 20px 0px;
    font-size: 20px;
    padding-top: 7px;
    font-weight: 700;
}

#content-bottom-box-desc-right {
    background: white;
    height: 42px;
    padding-top: 12px;
    padding-left: 25px;
}

#content-bottom-box-desc-right ul {
    margin: 0;
    padding: 0;
    float: left;
}

#content-bottom-box-desc-right ul li {
    display: inline;
    float:left;
}

#content-bottom-box-desc-right ul li.active a {
    text-decoration: underline;
}

#content-bottom-box-desc-right ul li:after { 
    content: "|"; padding: 0 .5em; 
}

#content-bottom-box-desc-right ul li:last-child:after { 
    content: ""; padding: 0; 
}

#content-bottom-box-desc-right ul li a {
    color: #787878;
    float: left;
    text-decoration: none;
    padding: 0px 10px;
    transition: background-image 0.3s ease;
    -webkit-transition: background-image 0.3s ease;
}

#content-bottom-box-desc-right ul li a:hover {
    color: #264796;
    text-decoration: underline;
}

#content-center {
    padding: 42px 42px 20px 42px;
}

#content-center a {
    color: #c1c1c1;
}

#content-center a.btn {
    color: white;
}

#content-center a.btn.no {
    color: black;
}

.p-left-1 {
    padding-left: 50px;
}
/*** !CONTENT ***/


/*** PRODUCTS MENU ***/
#content-products-menu {
    padding-bottom: 42px;
    padding-right: 42px;
    padding-left: 42px;
}

#content-products-menu a {
    color: white;
}

#content-products-menu a:hover {
    text-decoration: none;
}

#content-products-menu .item {
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    width: 109px;
    float: left;
}

#content-products-menu .item:hover {
    cursor: pointer;
}

.content-products-menu-img {
    width: 109px;
    height: 109px;
}

.item-1 {
    background: url('images/c4.png');
}

.item:hover .item-1 {
        background: url('images/c44.png');
        transition: background-image 1s ease;
        -webkit-transition: background-image 1s ease;
    }
/*** !PRODUCTS MENU ***/


/*** NEWS ***/
#news-bg {
    background: #fff;
}

.news {
    padding: 20px 10px 10px 10px;
    font-size: 12.5px;
    color: #787878;
}

#news-desc {
    padding-top: 65px;
    padding-left: 120px;
}

.news-img {
    width: 273px;
    border: 6px #f2f2f2 solid;
}

.news-bottom {
    padding: 5px;
}

/*** !NEWS ***/



/*** FOOTER ***/
#footer-bg {
    padding-top: 13px;
    height: 159px;
}

#footer-top {
    height: 65px;
    color: #fff;
    font-size: 13px;
}

#footer-top-bg-left {
    padding: 23px 25px 25px 30px;
    margin: 0;
    height: 65px;
    background-image: url(images/11.png);
    background-repeat: repeat-x;
    width: 40%;
    -webkit-border-radius: 20px 0px 0px 20px;
    -moz-border-radius: 20px 0px 0px 20px;
    border-radius: 20px 0px 0px 20px;   
    float:left;
   
}

#footer-top-bg-center {
    padding: 0;
    margin: 0;
    height: 65px;
    background: #f2f2f2 url(images/12.png);
    background-repeat: repeat-x;
    width: 83px;
    position: absolute;
}

#footer-top-bg-right {   
    margin: 0;
    height: 65px;
    background-image: url(images/13.png);
    background-repeat: repeat-x;
    width: 60%;
    -webkit-border-radius: 0px 20px 20px 0px;
    -moz-border-radius: 0px 20px 20px 0px;
    border-radius: 0px 20px 20px 0px; 
    float: right;
}

@media (min-width: 700px) {
  #footer-top-bg-right {
        padding: 5px 0 0 85px;
    }
}

@media (min-width: 1000px) {
    #footer-top-bg-right {
        padding: 15px 0 0 85px;
    }
}

@media (min-width: 1360px) {
    #footer-top-bg-right {
        padding: 23px 0 0 85px;
    }
}

#footer-top-bg-right a {
    color: #88BCE6;
}

#footer-bottom {
    margin-top: 13px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 12.5px;
    color: #787878;
}
#footer-bottom span {
    font-size: 10.5px;
}


#footer-top-bg-left ul {
    margin: 0;
    padding: 0;
    float: left;
}

#footer-top-bg-left ul li {
    display: inline;
    float:left;
}

#footer-top-bg-left ul li:after { 
    content: "|"; padding: 0 .5em; 
}

#footer-top-bg-left ul li:last-child:after { 
    content: ""; padding: 0; 
}

#footer-top-bg-left ul li a {
    color: white;
}
/*** !FOOTER ***/



/*** FAQ ***/
.faq {
    margin-bottom: 25px;
}

.faq-left {
    font-size: 50px;
}

.faq-right{
    padding-left: 20px;
    border-left: 7px #e5e5e5 solid;
}

.faq-right-q {
    font-weight: 700;
}

.faq-right-a {
    font-style: italic;
}
/*** !FAQ ***/



/*** FANCY IMAGE ***/
.fancy-img {
    width: 200px;
    height: 150px;
}
/*** !FANCY IMAGE ***/



/*** BOOTSTRAP SPECIAL BUTTONS ***/
.ui-group-buttons .or{position:relative;float:left;width:.3em;height:1.3em;z-index:3;font-size:12px}
.ui-group-buttons .or:before{position:absolute;top:50%;left:50%;content:'or';background-color:#5a5a5a;margin-top:-.1em;margin-left:-.9em;width:1.8em;height:1.8em;line-height:1.55;color:#fff;font-style:normal;font-weight:400;text-align:center;border-radius:500px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1);box-shadow:0 0 0 1px rgba(0,0,0,0.1);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.ui-group-buttons .or:after{position:absolute;top:0;left:0;content:' ';width:.3em;height:2.84em;background-color:rgba(0,0,0,0);border-top:.6em solid #5a5a5a;border-bottom:.6em solid #5a5a5a}
.ui-group-buttons .or.or-lg{height:1.3em;font-size:16px}
.ui-group-buttons .or.or-lg:after{height:2.85em}
.ui-group-buttons .or.or-sm{height:1em}
.ui-group-buttons .or.or-sm:after{height:2.5em}
.ui-group-buttons .or.or-xs{height:.25em}
.ui-group-buttons .or.or-xs:after{height:1.84em;z-index:-1000}
.ui-group-buttons{display:inline-block;vertical-align:middle}
.ui-group-buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.ui-group-buttons .btn{float:left;border-radius:0}
.ui-group-buttons .btn:first-child{margin-left:0;border-top-left-radius:.25em;border-bottom-left-radius:.25em;padding-right:15px}
.ui-group-buttons .btn:last-child{border-top-right-radius:.25em;border-bottom-right-radius:.25em;padding-left:15px}
/*** !BOOTSTRAP SPECIAL BUTTONS ***/


/*** BOOTSTRAP SPECIAL BOXIES ***/
.glyphicon-lg{font-size:3em}
.blockquote-box{border-right:5px solid #E6E6E6;margin-bottom:25px}
.blockquote-box .square{width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0}
.blockquote-box.blockquote-primary{border-color:#357EBD}
.blockquote-box.blockquote-primary .square{background-color:#428BCA;color:#FFF}
.blockquote-box.blockquote-success{border-color:#4CAE4C}
.blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF}
.blockquote-box.blockquote-info{border-color:#46B8DA}
.blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF}
.blockquote-box.blockquote-warning{border-color:#EEA236}
.blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF}
.blockquote-box.blockquote-danger{border-color:#D43F3A}
.blockquote-box.blockquote-danger .square{background-color:#D9534F;color:#FFF}
/*** !BOOTSTRAP SPECIAL BOXIES ***/




/*** STATUS ICONS ***/
.ico {
    width: 20px;
    height: 21px;  
    background-size: 100% 100%;
    margin-right: 5px;
    float:left;
}
.ico-not-configured { background-image: url('images/status-icons/notConfigured@2x.png'); }
.ico-configured { background-image: url('images/status-icons/green@2x.png'); }
.ico-water { background-image: url('images/status-icons/water@2x.png'); }
.ico-no-water { background-image: url('images/status-icons/noWater@2x.png'); }
.ico-probe-disconnected { background-image: url('images/status-icons/error@2x.png'); }
.ico-live { background-image: url('images/status-icons/noWater@2x.png'); }
.ico-low-batteries { background-image: url('images/status-icons/lowBatteries@2x.png'); }
.ico-check-device { background-image: url('images/status-icons/checkDevice@2x.png'); }
.ico-off { background-image: url('images/status-icons/red@2x.png'); }
.ico-on { background-image: url('images/status-icons/green@2x.png'); }
.ico-button_lo { background-image: url('images/status-icons/lo_button@2x.png'); }
.ico-button_hi { background-image: url('images/status-icons/hi_button@2x.png'); }
.ico-button_ok { background-image: url('images/status-icons/ok_button@2x.png'); }
.ico-temp-lo { background-image: url('images/status-icons/lo_button@2x.png'); }
.ico-temp-hi { background-image: url('images/status-icons/hi_button@2x.png'); }
.ico-temp-ok { background-image: url('images/status-icons/ok_button@2x.png'); }
/*** !STATUS ICONS ***/
.rul{ height: 50px;}
.rul-if{ 
    background:  orange url('images/rules/if.png') no-repeat 10% 0%;        
}
.rul-if-stav{ 
    background:  orange ;  
}
.rul-then{ 
    background:  gold url('images/rules/then.png') no-repeat 10% 0%;      
}
.rul-then-stav{ 
    background:  gold ;  
}
.rules-left{
    padding-left: 20px;
}
.rules{    
    padding-top: 25px; 
}
.rules label{
    margin-left: 25px;
}
.table > tbody > tr.bezRamecku > td,.table > tbody > tr.bezRamecku > th{
    border-top: 1px solid transparent;
}

/*** THUMBNAIL HOVER ***/
.thumbnail-hover:hover {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.4);
}

.thumbnail a:hover {
    text-decoration: none;
}
/*** !THUMBNAIL HOVER ***/



/*** DELETE BOX ***/
.delete-box {
    position: absolute;
    top: -10px;
    left: 5px;
}
/*** !DELETE BOX ***/



/*** MODAL WIDTH ***/
@media screen and (min-width: 1024px) {
    .modal-lg {
        width: 900px;
    } 
}
/*** !MODAL WIDTH ***/