#hp {/* background-size: cover; */ padding: 0; text-align: center; font-family: 'open sans'; position: relative; margin: 0; height: 100%; -webkit-font-smoothing: antialiased; color: #fff !important; width: 100%;}

/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
background: #161616;
	z-index:10000; /* makes sure it stays on top */
    height: 100%;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

  .jt-pizza-small { -moz-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; padding: 20px; width: 16px; height: 16px;}
  .jt-pizza-middle {-moz-animation: spin 1s infinite linear;-webkit-animation: spin 1s infinite linear;animation: spin 1s infinite linear; padding: 20px; width: 32px; height: 32px;}

.page-id-4082 #head, .page-id-4110 #head{
    width: 22%;
    float: left;
    height: 51px;
    background: #161616;
    }

.page-id-4082 #head .logo, .page-id-4110 #head .logo {
margin: 0 6% !important;
width: 180px;
height: 42px;
    float: left;
}

.page-id-4082 #head .logo h1 a span, .page-id-4110 #head .logo h1 a span  {
background: url('img/jablocom_logo_white.svg') top left no-repeat;
}

.page-id-4082 #head .cleaner, .page-id-4110 #head .cleaner {
clear: none !important;
}

.page-id-4082  .cleaner, .page-id-4110  .cleaner {
height: 0;
}

.page-id-4082 #head .login, .page-id-4110 #head .login {
display: none;
}

.page-id-4082 #head .links, .page-id-4110 #head .links {
float: left;
padding: 8px 0 !important;
}

.page-id-4082 #head .links ul li, .page-id-4110 #head .links ul li {
float: none;
}

.page-id-4082 #nav li a, .page-id-4082 #nav li a{
color: #555;
}

.page-id-4082 #head .logo h1 a span, .page-id-4110 #head .logo h1 a span {
background-size: 100%;
width: 180px;
height: 42px;
}

.page-id-4082 #head .logo h1, .page-id-4110 #head .logo h1 {
width: 180px;
height: 42px;
padding: 5px 0;
margin: 0;
}

.page-id-4082 #head .logo h1 a, .page-id-4110 #head .logo h1 a {
width: 180px;
height: 42px;
    color: #161616;
}

#lang_sel_list a.lang_sel_sel {
background: #161616;
}

#lang_sel_list a, #lang_sel_list a:visited {
background: #161616;
}

.page-id-4082 .container, .page-id-4110 .container {
float: right;
margin: 0 auto;
width: 78% !important;
min-width: 10px !important;
    background: #161616;
}

.page-id-4082 #nav, .page-id-4110 #nav {
width: 100% !important;
    float: right;
    border: none;
    border-radius: none;
}

.page-id-4082 #nav li a span, .page-id-4110 #nav li a span {
display: none;
}

.page-id-4082 #nav li a.jbt, .page-id-4110 #nav li a.jbt {
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
background: #161616 !important;
border: none;
}

.page-id-4082 #nav li a:hover.jbt, .page-id-4110 #nav li a:hover.jbt {
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
background: #fff !important;
border: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;        
}


.page-id-4082 #xbody, .page-id-4110 #xbody{
width: 100%;
min-width: 100% !important;
background: #161616;

}

.page-id-4082 #hp, .page-id-4110 #hp{
width: 100%;
}

.page-id-4082 #hp a, .page-id-4110 #hp a{
text-decoration: none;
}

.page-id-4082 #hp a:hover, .page-id-4110 #hp a:hover {
text-decoration: none;
}

.page-id-4082 #nav li a:hover.frst, .page-id-4110 #nav li a:hover.frst  {
moz-border-radius-topleft: 0px !important;
border-top-left-radius: 0px !important;
}

.page-id-4082 #nav > li:hover > a, #nav > a:hover, .page-id-4110 #nav > li:hover > a, #nav > a:hover {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}

.page-id-4082 #navigation, .page-id-4110 #navigation{
margin: 30px auto 30px auto;
padding: 0;
width: 52%;
min-width: 987px;
clear: both;
}


.page-id-4082 #nav ul.subs, .page-id-4110 #nav ul.subs{
border: none !important;
}


.page-id-4082 #nav ul.subs > li, .page-id-4110 #nav ul.subs > li{
width: 20% !important;
padding: 2% !important;
}

.page-id-4082 #nav ul.sps2 > li, .page-id-4110 #nav ul.sps2 > li{
width: 40% !important;
padding: 2% !important;
}

.page-id-4082 #nav ul.sps4 > li, .page-id-4082 #nav ul.sps > li, .page-id-4110 #nav ul.sps4 > li, .page-id-4110 #nav ul.sps > li{
width: 27% !important;
padding: 2% !important;
}
    
.desktop {
/* background: url(../img/hp/phone_solution_bg.jpg) no-repeat top center; */
background: url(../img/hp/essence_bg.jpg) no-repeat top center; 
background-size: cover;
min-height: 60%;
width: 80%;
padding: 10%;
}

.desktop_title {
text-align: left;
width: 35%;
padding: 15px 25px 15px 25px;
background-color: #62af32;
}


.desktop H2{
padding: 0; 
margin: 0;
font-family: 'helvetica_thin';
font-weight: normal;
font-size: 4.5em;
line-height: 1.2em;
color: white;  /* color: #a6a6a6;*/
}

 a:hover .desktop H2 {
text-decoration: none;
}


.desktop p{
margin: 20px 0;
font-family: 'helvetica_thin';
font-size: 2.4em;
line-height: 1.4em;
color: white !important; /* #a6a6a6; */
}

.desktop span{

font-family: 'helvetica_thin';
    font-size: 0.6em;
    background: #62af32 ;
    color: white !important;
    padding: 5px 20px;
border-radius: 25px;
border: none;
font-family: 'nerislight';
outline: none;
display: block;
width: 50%;
text-align: center;
margin-top: 30px;
}




.promo-box{
width: 27.3%;
    float: left;
    font-family: 'helvetica_thin';
padding: 3%;
    text-align: left;
    color: #fff;
    min-height: 140px;
}

.promo-box H3{
    padding: 0 0 3% 0;
    margin: 0;
      font-family: 'helvetica_thin';
    font-weight: normal;
    font-size: 2.3em;
}

.promo-box p{
font-size: 1.5em;
font-family: 'helvetica_thin';
width: 55%;
line-height: 1.4em;
color: #fff;
}


.promo-box a{
display: block;
text-decoration: none;
color: #fff;
}








.redbox{
    background: #e8b675 url(../img/hp/pb_raven.png) no-repeat right center;  /* bylo pb_company.png*/
    background-size: cover;
}

.blackbox{

    background: #a9a9a9 url(../img/hp/pb_essence.png) no-repeat right center;
    background-size: cover;
}

.greenbox{
background: #62af32 url(../img/hp/pb_eyesee.png) no-repeat right center;
    background-size: cover;
}

.pb_eyesee, .pb_raven, .pb_helpme {
    padding: 6% 8%;
}

.pb_eyesee{
background: url(../img/hp/bg_eyesee.png) no-repeat left top;
background-size: contain;
min-height: 160px;

}

.pb_helpme{
background: url(../img/hp/bg_helpme.png) no-repeat left bottom;
background-size: contain;
min-height: 160px;
}

.pb_raven{
background: url(../img/hp/bg_raven.png) no-repeat left bottom;
background-size: contain;
min-height: 160px;
}




/* tablet */
@media handheld, only screen 
and (min-width : 521px) 
and (max-width : 980px)
and (orientation:portrait)
 {
     
      .container {
        float: none !important;
          width: 100% !important;

}
     
  #navigation {
        float: none !important;
          width: 100% !important;
      min-width: 100% !important;

}
     
         #nav > li {
        float: left;
        border-bottom: 0;
        margin-bottom: 0;
     width: 50%;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
            min-width: 100% !important;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
     
     
     .promo-box{
width: 80%;
padding: 4% 10%;
float: none !important;
display: block;
    min-height: 200px;
}
     
     .desktop {
background-position: -600px top;
}
     

     
.desktop p a{
padding: 2% 5%;
}
     
.promo-box H3{
font-size: 2.5em;
}

.promo-box p{
font-size: 2em;
line-height: 1.4em;
}
     
.desktop span{
width: 80%;
}
    
     

     
#nav li.jbtl {
float: left;
border-bottom: 0;
margin-bottom: 0;
width: 50%;
}
     
#nav li a.jbt {
background: #fff;
color: #555;
}    
     
/* Preloader */
#preloader {
	top:0px;
    height: 100%;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	margin:-100px 0 0 -100px; /* is width and height divided by two */
    text-align: center;
}
     
.page-id-4082 #head .links, .page-id-4110 #head .links {
display: none;
}
     
.page-id-4082 #head, .page-id-4110 #head {
width: 100%;
}
     
.page-id-4082 #head .logo, .page-id-4110 #head .logo {
margin: 0 0 0 38% !important;
width: 180px;
height: 42px;
    float: none;
}
     
     }




/* tablet-sirka */
@media handheld, only screen 
and (min-width : 571px) 
and (max-width : 1050px)
and (orientation:landscape)
 {
     
.desktop {
height: 40%;
min-height: 440px;
}
     
.desktop_title {
margin: 32% 0 0 0;
width: 100%;
}
     
.desktop_title p {
padding-left: 0;
}
     
     
.page-id-4082 #head .links, .page-id-4110 #head .links {
display: none;
}
     
.page-id-4082 #head, .page-id-4110 #head {
width: 100%;
}
     
.page-id-4082 #head .logo, .page-id-4110 #head .logo {
margin: 0 0 0 38% !important;
width: 180px;
height: 42px;
    float: none;
}
     
.page-id-4082 .container, .page-id-4110 .container {
        float: none !important;
          width: 100% !important;
          min-width: 100% !important;

}
     
  #navigation {
        float: none !important;
          width: 100% !important;
      min-width: 100% !important;

}
     
.promo-box{
width: 100%;
float: none !important;
display: block;
    min-height: 200px;
}
     
.promo-box H3{
font-size: 2.5em;
}

.promo-box p{
font-size: 2em;
line-height: 1.4em;
}
     
a.href_eyesee {
width: 100%;
height: 24.2%;
margin: 78.3% 0 0 0;
}

a.href_raven {
width: 100%;
height: 24%;
margin: 114.5% 0 0 0%;
}

a.href_helpme {
width: 100%;
height: 24%;
margin: 150.5% 0 0 0%;
}
     
     }
     






/* mobil */
@media handheld, only screen 
and (max-width : 521px) 
 {
     
      .container {
        float: none !important;
          width: 100% !important;

}
     
  #navigation {
display: none;

}
     
         #nav > li {
        float: left;
        border-bottom: 0;
        margin-bottom: 0;
     width: 50%;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
            min-width: 100% !important;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
     
     
.promo-box{
width: 90%;
float: none !important;
display: block;
padding: 5%;
    min-height: 130px;
}
     
.desktop {
background: #656B74 url(../img/hp/essence_bg_mob.jpg) no-repeat bottom center;  /* 2016-04-01 pozadi nebile*/	
/*background: white url(../img/hp/phone_solution_bg_mob.jpg) no-repeat bottom center; */ /* verze z 2015-12-30*/
/* background: white url(../img/hp/phone_solution_bg_mob.png) no-repeat bottom center; */
/*background: #161616 url(../img/hp/ravenmain_mob.jpg) no-repeat bottom center; */ /* puvodní raven obr */
background-size: contain;
width: 80%;
height: 120%;

}

.desktop_title {
width: 100%;
margin: 0 0 0 0;
text-align: center;
    
}
     
     .desktop H2{
font-size: 4em;
line-height: 1.2em;
}

.desktop p{
    font-size: 2em;
}

.desktop span{
    margin: 0 auto;
margin-bottom: 100px !important;
}
     
     
.redbox{
    background-size: 110%;
}

.blackbox{

  background-size: 110%;
}

.greenbox{

   background-size: 110%;
}

     
     
.desktop a.user {
display: none;
}

.desktop a.group {
display: none;
}

.desktop a.phone {
display: none; 
}
     

.desktop a.href_user {
display: none;   
}

.desktop a.href_phone {
display: none;
}

.desktop a.href_group {
display: none;
}
     
.desktop p a{
padding: 2% 10%;
}
     
.promo-box H3{
font-size: 2.5em;
}

.promo-box p{
font-size: 1.4em;
line-height: 1.4em;
}
     
a.href_eyesee {
width: 100%;
min-height: 200px;
margin: 125% 0 0 0;
}

a.href_raven {
width: 100%;
min-height: 200px;
margin: 188% 0 0 0%;
}

a.href_helpme {
width: 100%;
min-height: 200px;
margin: 250.5% 0 0 0%;
}
     
.pb_eyesee, .pb_raven, .pb_helpme {
min-height: 160px;
}
     
#nav li.jbtl {
float: left;
border-bottom: 0;
margin-bottom: 0;
width: 50%;
}
     
#nav li a.jbt {
background: #fff;
color: #888;
}  
     
.page-id-4082 #head .links, .page-id-4110 #head .links {
display: none;
}
     
.page-id-4082 #head, .page-id-4110 #head {
width: 100%;
}
     
.page-id-4082 #head .logo, .page-id-4110 #head .logo {
margin: 0 0 0 21% !important;
width: 180px;
height: 42px;
    float: none;
}
     
/* Preloader */
#preloader {
	top:0px;
    height: 100%;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	margin:-100px 0 0 -100px; /* is width and height divided by two */
    text-align: center;
}
     
     }