/* HELP PLG CLASSES */
.playground { padding: 0px var(--main-gap) 0px var(--main-gap); }
.playground_half { padding: 0px var(--main-gap-half) 0px var(--main-gap-half); }
.playground_double { padding: 0px var(--main-gap-double) 0px var(--main-gap-double); }

header { 
    height: var(--logo-height); padding: var(--main-gap) 0px var(--main-gap) 0px; position: fixed; top: 0px; left: 0px; background: rgba(255, 255, 255, 0.85); width: 100%; z-index: 900; 
    transition: all 0.3s ease;
}

header img { 
    height: var(--logo-height); transition: all 0.3s ease;
}

@media only screen and (max-width: 768px) { 
    header, header img {  height: 32px; }
}

header.nav_scroll { 
    border-bottom: 1px solid #ccc;
    padding: var(--main-gap-half) 0px var(--main-gap-half) 0px;
}

header.nav_scroll, header.nav_scroll img {
    height: 32px;
}

.tmp_button_top { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); }

/* BUTTONS */
.tmp_button {
    display: inline-block;  padding: 8px 24px 8px 24px; border-radius: 90px; font-size: 1.6em; text-decoration: none;
}

.tmp_button_color_01 { background: var(--main-color-01); color: #fff; }
.tmp_button_color_03 { background: var(--oposite-color); color: #fff; }

.tmp_button:hover { background: #252525; }

/* UNDER */
#icons { padding: 92px 0px 92px 0px; }
.ii_top { margin-bottom: var(--main-gap); }
.under_cover { padding: 168px 0px 168px 0px; background: url('../img/bg-under.jpg') center center no-repeat; background-size: cover; border-radius: var(--main-gap); } 

@media only screen and (max-width: 768px) { 
    .under_cover { padding: 68px 0px 68px 0px; }
}

.under_image { max-width: 660px; width: 70%; margin-bottom: var(--main-gap); }
.under_cover h1 { margin-bottom: 0px; } 
.under_cover p { color: #fff; }

@media only screen and (min-width: 768px) { 
    .under_cover p { font-size: 2em; } 
    .button_under { margin: 0px 5px 0px 5px;}
}


@media only screen and (max-width: 768px) { 
    .button_under { box-sizing: border-box; width: 100%; margin-bottom: var(--main-gap-half);  } 
}

.tmp_claimbox h2 { margin-bottom: var(--main-gap-half);}

/* ICONs */
.icon_image { margin-bottom: var(--main-gap-half); }
.icon_image span{ display: inline-block; background: rgba(255, 255, 255, 0.9); padding: var(--main-gap); border-radius: 50%;}

@media only screen and (max-width: 768px) { 
    .icon_image img { height: 32px; }
    .icon_image span{ padding: var(--main-gap-half); }
}

.icon_body { background: rgba(11, 208, 162, 0.1); padding: var(--main-gap); border-radius: var(--main-gap-half);  }
.icon_body h3 { margin-bottom: 0px; }

/* FOTO STRIPE */
.layout_stripe_foto { height: 50vh; }

/* POSTUP */
#postup { padding: 92px 0px 92px 0px; }

@media only screen and (min-width: 768px) { 
    .postup_item { padding:8px calc(32px + var(--main-gap-double)) 0px 92px; position: relative;}
    .postup_item p { text-align: justify; }
    .postup_item img{ position: absolute; left: 0px; top: 0px;  width: calc(92px - var(--main-gap)); }
}

@media only screen and (max-width: 768px) { 
    .postup_item { padding: 0px calc(32px + var(--main-gap-double)) 0px 0px ; }
}

.postup_item { background: url('../img/bg-steps.png') right top no-repeat; }
.postup_item_last { background: url('../img/bg-steps-last.png') right top no-repeat; }

@media only screen and (min-width: 768px) { 
    .pi_padding_bm { padding-bottom: var(--main-gap-double); }
}
/* CENIK */
#cenik { padding: 92px 0px 92px 0px; }

.width_pricelist_icon { width: 25%; box-sizing: border-box; } 
@media only screen and (max-width: 960px) { .width_pricelist_icon { width: 50%;  } }
@media only screen and (max-width: 768px) { .width_pricelist_icon { width: 100%; } }

.width_pricelist_icon h3 { margin-bottom: 4px;  padding-top: var(--main-gap-half);}

.pricelist_line_cover { margin-bottom: var(--main-gap-half); padding-top: var(--main-gap-double);}
.pricelist_line  { border-radius: 4px; padding: var(--main-gap-half); background: #f7f7f7; margin-bottom: var(--main-gap-half); }
.pricelist_line p { margin-bottom: 0px;}

.pl_cena { color: var(--main-color-01);}

@media only screen and (max-width: 768px) {
    .pricelist_line p { width: 100%; }
}

/* IKONA PLUS */
.icon_plus { position: absolute; right: 0px; top: 0px; display: inline-block; padding: 8px; background: var(--main-color-03); border-radius: 50%;  }
.icon_plus svg { height: 16px; fill: var(--main-color-02); transition: transform 0.5s ease;} 

/* CASTE DOTAZY */
#faq { padding: 92px 0px 92px 0px;  background: #F3FDFA; }

/* proces */
.tmp_bubble { background: #fff; margin-bottom: var(--main-gap); border-radius: 4px; }
.tmp_bubble_heading { padding: var(--main-gap); position: relative; }
.tmp_bubble_heading_inner { position: relative; }
.tmp_bubble_heading h3 { margin-bottom: 0px; line-height: 1.4em; padding-right: 66px; }

.tmp_bubble_text {  
    padding: 0px var(--main-gap) 0px var(--main-gap);   
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(243,253,250,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(243,253,250,1) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(243,253,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#f3fdfa",GradientType=1);
}

.tmp_bubble_text p { margin-bottom: var(--main-gap-half); }
.tmp_bubble_text p:last-of-type { margin-bottom: 0px; }

@media only screen and (min-width: 960px) { .tmp_bubble_text p { font-size: 1.8em; } }
.tmp_bubble_acitve svg { transform: rotate(315deg); }

/* HELPERs */
a.link_in_blok { position: absolute; left: 0px; top: 0px; display: block; height: 100%; width: 100%; z-index: 300;  }

/* KONTAKT */
#kontakt { padding: 92px 0px 92px 0px; }

.kontakt_item { margin-bottom: var(--main-gap); }
.kontakt_item a { display: block; background: #F3FDFA; text-decoration: none; padding: var(--main-gap); border-radius: 8px; }
.kontakt_item a span, .kontakt_item a strong { display: block; }

.kontakt_item a strong { font-size: 1.4em; margin-bottom: 4px; color: var(--main-color-01); }
.kontakt_item a span { font-size: 1.8em; color: var(--main-color-02); }

@media only screen and (min-width: 768px) { 
    .kontakt_item a:hover { background: var(--main-color-01); }
    .kontakt_item a:hover strong, .kontakt_item a:hover span { color: #fff; }
}

footer { padding: 92px 0px 92px 0px;  background: #F3FDFA; }
#copyr { padding: var(--main-gap-double) 0px var(--main-gap) 0px; background: #d0fbe9; color: var(--main-color-01); }