/* CSS temp_01 */
/* Typography */
body {
  font-size: 18px ;
font-family: 'Rubik', Arial, Helvetica, sans-serif; 
   font-weight: 300;
  line-height: 1.6;
  color: #333333;
  margin:0;
  text-align: center;
  background: url('/img/bg_body_top.png') no-repeat top right #fff;
}

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: #333;  position: relative; margin-top: 40px;  line-height: 1.2;  }

h1 { font-size: 2.8em;  letter-spacing: -2px;   }
h2 { font-size: 2em;  padding-top: 20px;   font-weight: bold; color: #89BA17; }
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: 22px; font-weight: bold; margin-bottom: -10px;  color: #89BA17;}
h5 { font-size: 1em;}
h6 { font-size: 1em;}


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

p           {line-height: 150%;  position: relative; }
a {color: #89BA17; text-decoration: none;}

a:hover     {text-decoration: none; color: #333;}

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 ;   }

/* Tables
-------------------------------------------------------------- */
table{ margin: 20px 0 ; 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 0.5em 0 ; border-bottom:2px solid #ccc;}
/*table tr:first-of-type td{ border-top:2px solid #ccc;}*/
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; max-width: 100%;}
hr { margin: 50px 0; border: none; border-bottom: 1px dotted #ddd ;}


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

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

div.formular{padding: 5px 7% 30px 7%; border: none; background:#f8f8f8; border-radius: 30px;}
table.form{margin:0; border: 0 ; width: 100%;}
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:100%;}
textarea{font-size:1.0em; font-family:'Arial CE', 'Helvetica CE', Arial, helvetica, sans-serif;; width:100%;}
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;}


#page {
  background: url('/img/bg_footer.png') no-repeat left bottom;
}


#header{
  min-height: 130px;

    position: relative;
    z-index: 99;
    margin-bottom: -1px;

}
#header .logo{
  margin: 0 ;
  font-weight:bold;
  font-size:1em;
  letter-spacing: -1px;
  border:none;
  }
#header .logo a{
  display: block;
  text-decoration: none;
  width: 190px;
  line-height: 81px;
  height: 81px;
  text-align: center;
  position: absolute;
  top: 25px;
  left: 0px;
  z-index: 9999;
  text-transform: uppercase;
color: transparent;
}
#header .logo a span{
  display: block;
  width: 100% ;
  height: 100% ;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  background: url('/img/carbonoff_logo.svg') no-repeat center center;
  background-size: contain;

}

/*  navigation */
#navigation{
  position: absolute;
  top: 45px;
  right: 130px;
  z-index: 1000;


 }
#navigation > ul {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
  
}
#navigation > ul > li {
  list-style: none ;
margin: 0 5px;
  font-size: 20px;
}

#navigation > ul > li > a {
  display: block;

  text-decoration: none;
  padding: 0em 1em ;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;

  transition: all ease 0.3s;
  color: #000;
  transition: all ease 0.3s;
}

#navigation > ul > li > a span {
position: relative;

}
#navigation > ul > li > a span::after{
    content: '';
    background: #89BA17;
    height: 12px;
    position: absolute;
    
    left: -10px;
    right: 50px;
    bottom: 0px;
    z-index: -1;
    transition: all ease 0.3s;
    opacity: 0;
}


#navigation > ul > li > a:hover span::after, #navigation > ul > li > a.on span::after{
content: '';
    background: #89BA17;
    height: 12px;
    position: absolute;
    left: -5px;
    right: -15px;
    bottom: 0px;
    z-index: -1;
    opacity: 1;
}



   


/* sidebar */
#sidebar{
flex: 0 0 48%;
    width: 48%;  
}

#sidebar .moto-box {
background: #F8F8F8;
border-radius: 30px;
text-align: center;
margin-top: -8px;
padding: 60px;
}

#sidebar .moto-box strong {
color: rgba(153, 153, 153, .5);
text-transform: uppercase;
font-style: italic;

}

#sidebar .moto-box h3 {
font-size: 58px;
color: #333333;
font-weight: bold;
margin-top: 20px;
margin-bottom: 0;
}

#sidebar .moto-box h3 span {
	display: block;
color: #89BA17;
}


/* content */
#content{
flex: 0 0 48%;
    width: 48%;  
}



.id-uvod #content {
flex: 0 0 100%;
    max-width: 100%;
}

.id-uvod h2 {
color: #333;
}



.container{
  padding: 0 100px ;
position: relative;

text-align: left;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    /*padding: 0 0; */


          }  
.container-reset{
  margin-left: -100px ;
  margin-right: -100px ;
          }            
 
.intro h1 {
letter-spacing: 0.4px;

    font-size: 20px;
    color: #999;
    font-weight: normal;
font-style: italic;
margin: 0;
}
 
.intro {
-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 1em;
}

.intro h3 {
font-size: 58px;
color: #333;
margin-top: 10px;
font-weight: bold;
}

.intro h3 span {
color: #89BA17;
display: block;
}

.intro p {
font-size: 18px;
}

.intro p:last-of-type {
margin-top: 50px;
}

.intro .btn {
padding-left: 3em;
padding-right: 3em;
}

.intro img, #sidebar img {
mix-blend-mode: multiply;
}

.full-width-bg {
margin: 0 calc((100vw - 102%) /-2);
    /*padding: 0 calc((100vw - 104%) /2);*/
background: #F1F1F1;
margin-top: -8px;
margin-bottom: 150px;
}

.full-width-bg h2 {
margin-top: 0;
    padding-top: 50px;
    margin-bottom: 0;}

.vyhody {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
position: relative;
    top: 100px;
    margin-top: -50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
background: url('/img/bg_dots_benefits.svg') no-repeat center bottom;

}

.vyhody .item {
width: 20%;
    margin: 0 10px;
    border: 2px solid #89BA17;
    border-radius: 30px;
background: url('/img/ico_like.svg') no-repeat center 20px #fff;
display: flex;
    justify-content: center;
    align-items: center;
}

.vyhody .item p {
text-align: center;
padding: 20px;
margin-top: 60px;
margin-right: 0;
padding-bottom: 0;
}

.galerie {
margin-top: 100px;
margin-bottom: 100px;
position: relative;
}

.galerie::after {
content: ' ';
    background: url(/img/bg_dots_reference.svg) no-repeat;
    height: 211px;
    width: 1010px;
    /* display: block; */
    position: absolute;
    top: 220px;
    z-index: -1;
left: calc((100% - 1010px) / 2);
}

.galerie h2 {
text-align: center;
text-transform: uppercase;
}

.galerie_fotky {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.galerie_fotky .foto {
width: 23%;
overflow: hidden;
border-radius: 20px;
margin-bottom: 35px;


}

.galerie_fotky .foto img, .galerie_fotky .foto a {
display: block;
background: #89BA17;
}

.galerie_fotky .foto img{
  opacity: 0.7;
  transition: all ease 0.3s;
}


.galerie_fotky .foto a:hover img{
  opacity: 0.9;
}


.rozcestnik .col-6 > div {
	width: 60%;
	margin: 0 auto;
}











/**/

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

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

.col-6 {
flex: 0 0 48%;
    width: 48%;
}




/**/

.btn {
border-radius: 5px;
padding-top: 12px;
padding-bottom: 10px;
display: inline-block;
text-transform: uppercase;
font-weight: 500;

  transition: all ease 0.3s;

}

.btn-green {
    color: #fff;
    background-color: #89BA17;
    border: 2px solid #89BA17;
    text-decoration: none;
    padding-left: 2em;
    padding-right: 2em;
    
}

.btn-green:hover {
	color: #FFF;
  background-color: rgba(0,0,0,.85);
  border-color: #333;
}


.btn-green-wb {
    border: 2px solid #89BA17;
    color: #89BA17;
    text-decoration: none;
background: #FFF;
    padding-left: 2em;
    padding-right: 2em;

}

.btn-green-wb:hover {
	border: 2px solid #333;
	color: #333;
}      


/* 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;

	  }
#footer p{
  margin:0;
}



#footer .flex {
-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#footer .contact {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

#footer .contact  a {
	margin-left: 10px;
  margin-right: 10px;
}

#footer .contact > div a {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
font-size: 34px;
color: #89BA17;
font-weight: 500;
text-decoration: none;
}

#footer .contact > div a span {
margin-left: 20px;
}

#footer .contact a:hover {
color: #333;
}

#footer .contact a:hover img {
filter: grayscale(1);
}


.move-top{
  text-decoration: none;
  text-align: center;
  display: block;
  margin-top: 5em;
         }  

.move-top a:hover {
filter: grayscale(1);

}


/*  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;
}



h1.first{

  color: #333;
  text-transform: uppercase;
}

h2 strong{
  color: #b2ca1e;
  font-weight: 700;
         }


p.extra.fl{}

.extra{
  font-size: 1.3em;
      }


/* 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;
}



/*#header button {
display: none;
}
*/

#header button {
display: block;
position: absolute;
right: 15px;
top: 35px;

padding: 2px 10px;
    background-color: transparent;
    border: 0;
    border-radius: 5px;
    font-size: 1.5em;
z-index: 99999;
cursor: pointer;
}

#header button img {
display: block;
}


#header button:hover {
  filter: grayscale(1);
}
button.navbar-toggler:focus {
    outline: 1px auto #4c9a28;
}


/*  RESPONSIVE  */



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

  .container{
  padding: 0 50px ;
          }  

  .container-reset{
  margin-left: -50px ;
  margin-right: -50px ;
          }  
                        
}  


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

#footer .flex {
text-align: center;
}

#footer .contact, #footer .copy {
width: 100%;
}

#footer .contact {
	-ms-flex-order: 1;
    order: 1;
-ms-flex-pack: center;
    justify-content: center;
margin-bottom: 30px;
} 

#footer .copy {
	-ms-flex-order: 2;
    order: 2;
}

#footer .copy p {
margin-top: 20px;
margin-bottom: 20px;

} 

.move-top {
margin-top: 3em;
}


.vyhody {
flex-wrap: wrap;

}

.vyhody .item {
flex: 0 0 30%;
flex-shrink: 1; 
margin-bottom: 25px;
}

#navigation > ul > li > a {
padding: 0 1em;
}


}

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

#navigation > ul > li > a {
padding: 0 .5em;
}


}



@media screen and (max-width:1100px){
  .container{
  padding: 0 35px ;
          }   
  .container-reset{
  margin-left: -20px ;
  margin-right: -20px ;
          }  


.galerie::after {
width: 100%;
left: 0;
top: 100px;
}


#navigation > ul > li > a {
padding: 0 .3em;
}



}



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


#header .logo a span {
background-position: left center;
}


#content {
flex: 0 0 100%;
    width: 100%;
}

#sidebar {
flex: 0 0 100%;
    width: 100%;
}

#sidebar .right {
text-align: center;
}


.intro {
text-align: center;
}

.col-6 {
flex: 100%;
width: 100%;
}

#footer {
padding-top: 0;
margin-top: 3em;
}

  #header .logo a{
    height: 80px;
    left: 0;
    right: 0;
    width: auto;
            }  
       
  #navigation {
position: unset;
display: none;

      right: 0;
      left: 0;

padding-top: 130px;
padding-bottom: 50px;

    } 
  #navigation > ul{
      flex-flow: column;
      align-items: inherit;
    }  
  #navigation > ul > li > a {
    line-height: 40px ;
    height: 55px;
    text-align: center;
    width: 100%;
padding: 0;
    }  
              

             
          




}


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

body {
  font-size: 16px ;
}

.galerie {
margin-bottom: 0;
}

.galerie::after {
display: none;
}

.galerie_fotky {
flex-wrap: wrap;
}

.galerie_fotky .foto {
flex: 0 48%;
margin-bottom: 20px;
}

.galerie_fotky .foto img {
width: 100%;
}

.rozcestnik .col-6 > div {
width: 100%;
}

.vyhody {
/*background: none;        */
}

.vyhody .item {
flex: 0 0 43%;
}


}




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

#footer .contact {
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#footer .contact > div {
flex-basis: 100%;
margin-top: 20px;
}

#footer .contact > div a {
margin-left: 0;
-ms-flex-pack: center;
    justify-content: center;
font-size: 28px;
}

#footer .contact > div a span {
margin-left: 0;
}

#footer .contact > div a img {
display: none;
}

}


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

h1 {
font-size: 2em;
}

h2 {
font-size: 1.3em;
}

#header .logo a {
height: 60px;
}


#header button {

    right: 5px;
    top: 30px;
}

.intro .btn {
    padding-left: 2em;
    padding-right: 2em;
}

.galerie_fotky .foto {
flex: 0 100%;
}


.vyhody .item {
flex: 0 0 90%;
}

#sidebar .moto-box {
padding: 20px;
}

#sidebar .moto-box h3 {
font-size: 38px;
}

table.form td{
	display: block;
}

}