/* CSS temp_01 */
*{box-sizing: border-box;}
/* Typography */
body {
  font-size: 18px ;
 /* 
 font-family: 'Red Hat Text', Arial, Helvetica, sans-serif;
  font-family: 'Red Hat Display', Arial, Helvetica, sans-serif;  
  */
   font-family: 'Rubik', Arial, Helvetica, sans-serif; 
   font-weight: 300;
  
  line-height: 1.6;
 /* font: 75% 'Lucida Grande','Lucida Sans Unicode', 'Helvetica CE', Helvetica, 'Arial CE', Arial, helvetica, sans-serif;*/  
  color: #363636;
  margin:0;
  text-align: center;
  background: #F6F6F6;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, address, blockquote, table, .separ
{
margin: 30px 0;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { color: #16532a;  position: relative; margin-top: 40px;  line-height: 1.2;  }

h1 { font-size: 2.8em;  letter-spacing: -2px;   }
h2 { font-size: 2.2em; letter-spacing: -1px;  font-weight: 400; padding-top: 20px; }
h3 { font-size: 1.8em; /* letter-spacing: -1px; */ /* padding-bottom: 10px; border-bottom: 1px solid #b2ca1e ;*/ clear: both;  color: #b2ca1e;  font-weight: 400; }
h4 { font-size: 1.5em; font-weight: bold; margin-bottom: -10px;  font-weight: 400;}
h5 { font-size: 1em;}
h6 { font-size: 1em;}


/* Text elements
-------------------------------------------------------------- */

p           {line-height: 150%;  margin: 30px 20px 25px 0; position: relative; }

a           {text-decoration: underline; color: #16532a;}
a:visited   {color: #16532a;}
a:hover     {text-decoration: none; color: #b2ca1e;}

blockquote  { padding: 1em 3em;   border-left: 2px solid #b2ca1e ;}
strong      { font-weight: bold; }
sup, sub    { line-height: 0; }
big         {font-size: 1.2em;}
small       {font-size: 0.8em;}

/* Lists
-------------------------------------------------------------- */

ul, ol      {padding:0; margin-left:35px; }
li          {margin:0 0 .75em 0; padding:0; list-style: square ; line-height: 160%;  }

ul.extra    {list-style:none;position:relative;}
ul.extra li {background: url(../img/li_extra.jpg) no-repeat 0 6px;padding:0 0 0 20px;}

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

li p{ margin: 0; padding: 0 ;   }

ol.alpha{
  margin-left: 40px;
  counter-reset: list;
        }
ol.alpha li{
  list-style: none;
  text-indent: -2em;
        }
ol.alpha li:before{
  font-weight: bold;
  counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    padding-right: 0.85em;
    
        }
        
        

/* Tables
-------------------------------------------------------------- */
table{ margin: 20px 0 ; border: 2px solid #666; border-collapse:collapse; font-size: 1em;}
table th{ padding: 1em ; text-align: left; background:none; color: #FF9900; font-size:1em;font-weight:500; border-bottom:1px solid #999;}
table td{ padding: 0.5em 1em ; border-bottom:1px solid #999;}
table td.nowrap{ white-space: nowrap;
}
table td p{ margin: 0; padding: 0 ;   }


/* Misc classes
-------------------------------------------------------------- */

.hide       { display: none; }
.noborder   {border:none;}
.bold       {font-weight:bold;}

/* Body Elements
-------------------------------------------------------------- */

img{border: 0 }
hr { margin: 50px 0; border: none; border-bottom: 1px dotted #ddd ;}

.foto{
}

/* Form fields
-------------------------------------------------------------- */

fieldset{ border: none; padding: 0 ; margin: 0 ;}

div.formular{width:548px;margin:20px 0; padding: 0 10px 10px 10px; border: none;background:#eee;}
table.form{margin:0; border: 0 ;}
table.form td{ border: 0 ; padding-left: 0;}

ul.form{margin:0;padding:0 0 0 20px;list-style:none;}
ul.form li{padding:5px 20px 0 0;float:left;width:242px;}
ul.form li.textarea, ul.form li.submit{width:505px;}

h3.form_nazev{margin:0;font-size:1.1em;font-weight:bold;position:relative;top:-10px;left:20px;color:black;}
h3.form_nazev span{border:1px solid #BDBBB7; background: #fff url(../img/bg_inputs.gif) no-repeat;padding:3px 20px;}

input, textarea, select{font-family: 'Rubik', Arial, Helvetica, sans-serif;  border:1px solid #BDBBB7; padding:3px 5px; border-radius: 3px;}
label{font-weight:normal;}
input{font-size:1.0em;width:300px;}
textarea{font-size:1.0em; font-family:'Arial CE', 'Helvetica CE', Arial, helvetica, sans-serif;; width:400px;}
select{font-size:1.0em;width:280px;}

input.submit{font-weight:bold; padding:10px 20px; position:relative;background:#16632d; color:white;border:none;
   font-family: 'Rubik', Arial, Helvetica, sans-serif;  font-size:1.1em; border-radius: 3px;}

label.check{float:left;margin:0px 15px 0px 0;font-weight:normal}
input.check{background:none;border:none;display:inline;margin:0 4px 2px 0;vertical-align:middle;width:auto;}

label.radio{float:left;margin:0px 15px 0px 0;font-weight:normal}
input.radio{background:none;border:none;display:inline;margin:0 4px 2px 0;vertical-align:middle;width:auto;}


/*  ID  */
#page{
  text-align:left;
  max-width: 1600px;
  margin: 0 auto ;
  position:relative;
  background: #fff;  
  padding: 0 0 ;
}
#page.index{
  background: url(../img/bg_body1.jpg) no-repeat 285px 0px ;
}

#header{
  height: 100px;
    box-shadow: 0px 10px 40px -20px black;
    position: sticky;
    z-index: 99;
    margin-bottom: -1px;
    background: #fff;
	top: 0;
}
#header h1{
  margin: 0 ;
  font-weight:bold;
  font-size:1em;
  letter-spacing: -1px;
  border:none;
  }
#header h1 a{
  display: block;
  text-decoration: none;
  width: 279px;
  line-height: 100px;
  height: 100px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50px;
  z-index: 9999;
  text-transform: uppercase;
}
#header h1 a span{
  display: block;
  width: 100% ;
  height: 100% ;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  background: url(/img/phmarket_logo.png) no-repeat center center;
  background-size: contain;

}

/*  navigation */
#navigation{
  position: fixed;
  top: 0;
	right: calc((100% - 1500px) / 2);
/*
  left: 20%;
  right: 100px;
*/
  z-index: 1000;
/*transform: translateX(80%)*/
 }
#navigation > ul {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
  
}
#navigation > ul > li {
  list-style: none ;
  font-size: .9em;
  margin: 0;
}

#navigation > ul > li > a {
  display: block;
  /*text-transform:uppercase;*/
  line-height: 100px ;
  height: 100px;
  text-decoration: none;
  padding: 0em 1.25em ;
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  /*letter-spacing: -1px;*/
    border-top:5px solid transparent;
  transition: all ease 0.3s;

}

#navigation > ul > li > a:hover{
color: #000;
border-color: #b2ca1e;;
background-color: #F6F6F6;
background-image: none;

}


#navigation > ul > li > a.on {
  color: #b2ca1e;
  background-color: #f6f6f6;
}

#navigation > ul > li:last-of-type > a, #navigation > ul > li:first-of-type > a {
    background: #B2CA1E;
    line-height: 1;
    padding: 0.75em 1.5em 0.65em 1.5em;
    height: auto;
    border-radius: 20px;
    color: #fff;
    margin-left: .5em;
    border: none ;	
	margin-bottom: 25px;
}
#navigation > ul > li:last-of-type a:hover, #navigation > ul > li:first-of-type > a:hover{
  background-color: #16532A;
    background-position: 92% center;
       }       

#navigation > ul > li ul {
  display: none;
}
#navigation > ul > li:hover ul {
  display: block;
}
#navigation > ul > li:hover  {
  background: #f6f6f6;
}
#navigation > ul > li:last-of-type:hover  {
  background: transparent;
}

#navigation > ul > li:first-of-type:hover {
	background: none;
}



#navigation ul ul {
  position: absolute;
  margin: 0 0 0;
  padding: 20px;
  list-style: none;
  background: #f6f6f6;
  min-width: 300px;
}


#navigation ul ul li {
  border-bottom: 1px solid #eee;
  list-style: none ;
  margin: 0;
  padding: 0 ;
  
}
#navigation ul ul a {
  line-height: 35px ;
  min-height: 40px;

  padding: 5px 10px ;
  text-decoration: none;
  text-transform: none;
  display: block;
  font-weight: 500;
}
#navigation ul ul a:before {
  display: inline;
  content: "—";
  padding-right: 0.7em;
}

#navigation ul ul a:hover{
  
}

#navigation ul ul ul {
  display: none;
}



.contact{
  padding: 20px 0 0 30px ;
  margin: 50px 20px 0px 40px; 
  color: #666;
  font-size: 0.9em;
  line-height: 160%;
}
.contact a{
  color: #666;
}



/* content */
#content{

  /*padding-top: 110px;   */
  margin: 0  ;
  position: relative;
  z-index: 10;
  min-height: 550px;

  }
#content.section{

  }  

.container{
  padding: 0 100px ;
          }  
.container-reset{
  margin-left: -100px ;
  margin-right: -100px ;
          }            
  



/**/

/*  owl   */

.owl-theme .owl-dots, .owl-theme .owl-nav {
	text-align: center;
	-webkit-tap-highlight-color: transparent
}
.owl-theme .owl-nav {
  position: absolute;
  z-index: 99999;
  left: 0;
  right: 0;
  top: 3em;
  font-size: 80px;
}
.owl-theme .owl-nav [class*=owl-] {
/*
	color: #f2e748 !important;
	font-size: 14px;
	margin: 5px;
	padding: 4px 7px;
	border-radius: 3px
  
  */	
  display: inline-block;
	cursor: pointer;

}
.owl-theme .owl-nav [class*=owl-]:hover {
	color: #fff;
	text-decoration: none
}
.owl-theme .owl-nav button:focus,
.owl-theme .owl-nav span:focus
 {
	outline: 0;
}
.owl-theme .owl-nav span {
	display: none;
}
.owl-theme .owl-nav .disabled {
	opacity: .5;
	cursor: default
}
.owl-theme .owl-nav.disabled+.owl-dots {
	margin-top: 10px
}
.owl-theme .owl-dots .owl-dot {
	display: inline-block;
	zoom: 1
}
.owl-theme .owl-dots .owl-dot span {
	width: 50px;
	height: 4px;
	margin: 5px 7px;
	background: #fff;
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;

}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
	background: #B2CA1E;
}

/**/

.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next
 {
    border: none ;
	  border-left: 2px solid #B2CA1E !important;
    border-bottom: 2px solid #B2CA1E !important;
    width: 40px;
    height: 40px;
    border-radius: 0;
    outline: 0;
    transform: rotate(45deg);
    border-radius:0;
}

.owl-theme .owl-nav .owl-next  {
    border: none !important;
	  border-right: 2px solid #B2CA1E !important;
    border-bottom: 2px solid #B2CA1E !important;
    transform: rotate(-45deg);
}
.owl-theme .owl-nav .owl-prev:hover,
.owl-theme .owl-nav .owl-next:hover
 {
    border-color: #fff !important;
}

        
.owl-dots{
  position: absolute;
  z-index: 99999;
  left: 0;
  right: 0;
  bottom: 50px;
        }
        
        
.owl-prev{
  position: absolute;
  left: 2.5vw;
  
        } 
        
.owl-next{
  position: absolute;
  right: 2.5vw;
        }   
        
.slider{
  margin-bottom: 70px;
  background: #16532A;
  animation: show-opacity .5s;
}

@keyframes show-opacity{
  from { opacity: 0;
       }
 top{ opacity: 1;
    }       

}

.owl-carousel .title{
  position: absolute;
  top: 140px;
  left: 200px;
  width: 50%;
  color: #fff;
  font-size: 1.5em;
  font-weight: 500;
    text-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.owl-carousel .title h4 {
	color: #fff;
	margin-bottom: 10px;
}




/**/


.maincontent{
  padding: 10px 0px 20px 0px ;
  background: url(../img/fade1.jpg) no-repeat left top;
  position: relative;
}
p.extra{
  font-size:1.25em;
  line-height:150%;
  position:relative;
  z-index:110;
}
p strong{
 
}


.co2-counter{
  max-width: 850px;
  border: 1px solid #b2ca1e ;
  padding:10px  20px ;
  margin: 0 auto 60px auto;
  text-align: center;
}
.co2-counter h3{
  text-align: center;
  border: none ;
  color: #b2ca1e;
  background: #fff;
  margin: -40px 40px -10px 40px;
  padding: 10px 20px;
  font-size: 1.7em;
  font-weight: 300;
}
.co2-counter .number{
  font-size: 3em;
  font-weight: 700;
  padding-right: .5em;
}
.co2-counter .label{
  
}


/* rozcestnik */
.rozcestnik {
  display: flex;
  margin-bottom: 80px;

}

.rozcestnik .rozcestnik-item{
  text-align: center;
  background: url(/img/rozcestnik_produkty.jpg) no-repeat;
  background-size: cover;
  min-width: 160px;
    width: 100%;
}
.rozcestnik .item-produkty{
  background-image: url(/img/rozcestnik_produkty.jpg);
}
.rozcestnik .item-sluzby{
  background-image: url(/img/rozcestnik_sluzby.jpg) ;
}
.rozcestnik .item-technologie{
  background-image: url(/img/rozcestnik_technologie.jpg) ;
}
.rozcestnik .item-prihlaseni{
  background-image: url(/img/rozcestnik_prihlaseni.jpg);
}



.rozcestnik .rozcestnik-item h3{
    margin: 0; 
    font-size: 1.5em;
   }



.rozcestnik .rozcestnik-item a{
  display: block;
  color: #fff;
  padding-top: 7em;
  padding-bottom: 1em;
  text-decoration: none;
  
  background-image: linear-gradient( 135deg, rgba(178,202,30,0.4) , rgba(22,82,42,0.4) );
  transition: all ease 0.3s;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
  border-top:5px solid #b2ca1e;
}

.rozcestnik .rozcestnik-item a:hover{
  padding-top: 6em;
  padding-bottom: 2em;
  border-color: #F6F6F6;
  background-image: linear-gradient( 135deg, rgba(178,202,30,0.7) , rgba(22,82,42,0.7) );
}

.children .subnav{
  list-style: none;
  margin: 35px 0;
  padding: 0 ;
  display: flex;
  width: 100%;
  
         }
.children .subnav li{
  list-style: none;
  margin: 0;
  padding: 0 ;
  display: flex;
  width: 100%;
         }
.children .subnav li a{
  display: flex;
  padding: 1.5em 3em 1.2em 3em;
  margin: 2px;
  background: #16532a;
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  justify-content:center;
  text-decoration: none;
  transition: all ease 0.3s;
         }         
.children .subnav li a:hover{
  background: #b2ca1e;
           }      

/**/

.flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
     }
.aic{
  align-items: center;
}

.jca{
  justify-content: space-around;
    }  
.jcc{
  justify-content: center;
    }     
       
/**/

.id-chytre-pohonne-hmoty h1.first{
  display: none;
}

.id-chytre-pohonne-hmoty .meta{
  display: none;
}

.id-chytre-pohonne-hmoty hr{
  margin: 100px 0;
}

.benefits{
  margin: 0 -100px;
  padding: 0 100px ;
}

.benefits .flex--item{
  border: 3px solid #eee;
  padding: 0 3em;
}
.benefits .flex--item:nth-of-type(2){
  border-left: 0;
  
}

.benefits .flex--item h2{
  margin-top: .3em;
}

.id-certifikace #content .container {
text-align: center;
}

.id-certifikace #content .container h3 {
display: inline-block;
clear: none;
margin-right: 40px;
text-align: center;
width: 100%;
max-width: 280px;

}

.id-certifikace #content .container h3 a {
font-size: .45em;
}


.id-certifikace #content .container h3 img {
width: 100%;
max-width: 280px;
display: block;
border: 1px solid #eee;
}


/**/

a.button{
  margin: 20px 0;
  border-radius: 20px ;
  padding: .6em 4em 0.5em 2em ;
  display: inline-block;
  transition: all ease 0.2s;
  color: #fff;
  text-decoration: none;
  /*font-size: .9em;*/
  background: #b2ca1e url(/img/arr_r.svg) no-repeat;
  background-position: 90% center;
  background-size: 13px;
       }

a.button:hover{
  background-color: #16532A;
    background-position: 92% center;
       }       


/* footer */
#footer{
  clear: both;
  font-size: 1em;
	/* border-top: 1px solid #ededed ; */
	color:#666666;
	margin: 100px 0 0 0;
  padding-top: 70px;
  padding-bottom: 35px;
  box-shadow: 0 -10px 40px rgba(50,50,50,.2);
	  }
#footer p{
  margin:20px 0;
}
#footer p.extra{
  font-size: 1.7em;
  line-height: 1.6;
         }
#footer a{
    text-decoration: none;
}
#footer .creactive a{ 
  font-size: .8em;
  text-decoration: none;
  color: #999;
  }
.move-top{
  text-decoration: none;
  text-align: right;
  display: block;
  margin-top: 5em;
         }  


/*  class   */
.noscreen, .none{display: none;}
.separ {border-bottom: 1px dotted #ccc ; line-height: 1px; font-size: 1px; height: 1px; 
margin: 20px 100px 30px 0;}
.break {clear: both; line-height: 0px; font-size: 1px; height: 0px; margin: 0 ;}
.left { text-align: left;}
.right { text-align: right;}
.center { text-align: center;}
.justify {text-align: justify;}
.fl { float: left; position: relative;}
.fr { float: right; position: relative;}
.loud{}
.silent{color:#929294;}
.bg_silent{background:#eef6fa;}
.bg_loud{}
.colborder{border:1px solid #BDBBB7; }
.partneri{margin:5px 7px;float:left;}



img[style*="float: left"] {
  margin: 30px 50px 50px 0px;
}

img[style*="float: right"] {
  margin: 30px 0px 50px 50px;
}




/*  Katalog   */
p.breadcrumbs{
  font-size:0.8em;
  margin:0;
  color:#aaa;
}
p.breadcrumbs a{
olor:#eee; text-decoration: none;

}
h1.first{
  margin: 0 0 50px 0;
  padding:  65px 100px 20px 100px;
  background: #b2ca1e;
  color: #fff;
  text-transform: uppercase;
}
h2 strong{
  color: #b2ca1e;
  font-weight: 700;
         }


p.extra.fl{}




a.more{
  background: #ababab url(../img/a_more.gif) no-repeat top right ;
  color:#fff;
  font-size:0.9em;
  font-weight:bold;
  position:relative;
  top:10px;
  text-decoration:none;
  padding:3px 95px 3px 10px;
}
a.more:hover{
  background: #7f7f7f url(../img/a_more.gif) no-repeat top right ;
}

 /* CSS Document




/* Tisknout a nahoru  */
.c2a{
  background-color: #eee;
  padding: 1px 20px ;
}
.meta{
  text-align: right;
  padding-top:10px;
  margin: 100px 50px;
  border-top:1px dotted #ccc;
}
.meta a{
padding: 2px 0px 5px 22px ;
color:#666666;
font-size:0.9em;
}
.meta a:hover{
color:#cd0000;
}

/*  ico  */
.ico{
	padding-left: 22px;
  background-position: 5px 5px;
  background-repeat: no-repeat;
}
.up{background-image: url(../img/ico/go_home.gif);}
.print{background-image: url(../img/ico/printer.gif);}


#header button {
display: none;
}


/*  RESPONSIVE  */

@media screen and (max-width:1600px){
    #navigation {
		right: 80px;
		transform: unset;
	}
}


@media screen and (max-width:1400px){
  body{
    font-size: 16px;
    }
  .container{
  padding: 0 50px ;
          }  
  .container-reset{
  margin-left: -50px ;
  margin-right: -50px ;
          }  
                        
    #navigation {
        right: 20px
      }     
    #navigation > ul{
       
      }  
    #navigation > ul > li > a {
      padding: 0em 1em ;
      
    }  
}  



@media screen and (max-width:1200px){

.owl-carousel .title {
top: 80px;
width: 60%;
}

.owl-theme .owl-nav {
top: 2.5em;
}

.owl-dots {
bottom: 30px;
}

}



@media screen and (max-width:1100px){
  body{
    font-size: 15px;
    }
  .container{
  padding: 0 20px ;
          }   
  .container-reset{
  margin-left: -20px ;
  margin-right: -20px ;
          }             
  #header {
	height: 80px;
}
  #header h1 a{
    height: 80px;
    left: 0;
    right: 0;
    width: auto;
            }         
  #navigation {
display: none;
      top: 80px;
      right: 0;
      left: 0;
      background: #fff;
      padding: 0 1em 1em 1em ;
border-bottom: 2px solid #000;
position: fixed;
    } 
  #navigation > ul{
      flex-flow: column;
      align-items: inherit;
	   padding: 2em 0;
    } 
	#navigation > ul > li{
		border-radius: 1rem;
		overflow: hidden;
    } 
  #navigation > ul > li > a {
    line-height: 40px ;
    height: 40px;
    text-align: center;
    width: 100%;
	border: 0;
    }  
    .rozcestnik {
    flex-wrap: wrap;
                            }  
    .rozcestnik .rozcestnik-item{
        width: 50%;
    }                            
          
	img {
		max-width: 100%;
		height: auto;
	}


	#header button {
		display: block;
		position: absolute;
		right: 15px;
		top: 20px;
		padding: 2px 10px;
		background-color: transparent;
		border: 2px solid #000;
		border-radius: 5px;
		font-size: 1.5em;
		color: #000;
		z-index: 99999;
	}

	h1.first{
		padding: 25px 20px 20px 20px;
		text-align: center;
	}
	#navigation > ul > li:first-of-type > a {
		margin-bottom: 0;
	}

  #navigation > ul > li:hover ul {
		position: unset;
		display: block;
		text-align: center;
	}
	#navigation > ul > li:last-of-type > a{
		margin-bottom: 0;
	}


                        
}  



@media screen and (max-width:1000px){

.owl-carousel .title {
width: 50%;
top: 30px;
}

.owl-theme .owl-nav {
top: 2em;
}

.owl-dots {
bottom: 30px;
}

}

@media screen and (max-width:800px){

.owl-theme .owl-dots .owl-dot span {
width: 20px;
}



.owl-carousel .title {
width: 80%;
left: 10%;
top: 10px;
}

.owl-theme .owl-nav {
top: calc(50% - 20px);
}

.owl-dots {
bottom: 10px;
}


}

@media screen and (max-width:680px){
.owl-carousel .title {
top: 0%;
font-size: 18px;
}
}


@media screen and (max-width:540px){
.owl-carousel .title {
font-size: 16px;
width: 90%;
left: 5%;
top: 0%;
}

.owl-dots {
bottom: -5px;
}


}

@media screen and (max-width:500px){

.owl-carousel .title {

top: -5%;

}


}

@media screen and (max-width:400px){


.owl-carousel .title {

top: -20%;

}


}


@media screen and (min-width:1400px){
   .slider{
        min-height: 584px;  /* if page 1600px */
          }

}