.tmp_playground { padding: 0px var(--main-gap) 0px var(--main-gap); }
.tmp_playground_half { padding: 0px var(--main-gap-half) 0px var(--main-gap-half); }

.smart_button { 
    color: var(--color-gold-sand-100); padding: var(--main-gap-half) var(--main-gap) var(--main-gap-half) var(--main-gap); 
    font-size: 1.8em; border: 1px solid var(--color-gold-sand-200); border-radius: 6px;
}

header { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 110; border-top: 4px solid #dfb880; }
header img { height: 90px; transition: all 0.2s ease-in; }

@media only screen and (max-width: 960px) {
    header img { height: 60px; }
}

header.nav_scroll { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); background: rgba(3, 28, 52, 0.75);  }
header.nav_scroll img { height: 60px; }

.tmp_playground_logo { padding: var(--main-gap); transition: all 0.2s ease-in;   }
header.nav_scroll .tmp_playground_logo { padding: var(--main-gap-half) var(--main-gap) var(--main-gap-half) var(--main-gap); }

/* HERO */
#tmp_hero {  background: #031C34;  position: relative; }

#tmp_hero_inner { min-height: 51vh; }
#tmp_hero_image {  min-height: 51vh; text-align: center; overflow: hidden; background: url('../img/devide-planet.jpg') center top no-repeat; background-size: cover; }

.tmp_hero_cover  { position: absolute ; top: 50%; transform: translateY(-50%); width: 100%; z-index: 1; } 
.tmp_hero_cover p { margin-bottom: var(--main-gap-double); color: var(--color-casal-600); color: #fff; }

@media only screen and (min-width: 960px) {
    .tmp_hero_cover p { font-size: 2.8em; }
}

#tmp_hero_page { padding-bottom: var(--main-gap); }

/* CONTENT */
.tmp_content { padding: var(--main-gap-section) 0px var(--main-gap-section-bottom) 0px; }
.content_text_cover { padding: var(--main-gap) var(--main-gap) 0px var(--main-gap); border-radius: 12px; border: 1px solid var(--color-midnight-200); margin-bottom: var(--main-gap); position: relative; }

.content_text_cover img { width: 66px;}

@media only screen and (min-width: 960px) {
    .content_text_cover { padding-left: calc(66px + var(--main-gap) + var(--main-gap)); }
    .content_text_cover img { position: absolute; left: var(--main-gap); top: 50%; transform: translateY(-50%); }
}
@media only screen and (max-width: 960px) {
    .content_text_cover img { margin-bottom: var(--main-gap);}
}

#proc-s-nami { background: var(--color-midnight-50); }

.icon_box { box-sizing: border-box; width: 33.333%; float: left; margin-bottom: var(--main-gap); }
.icon_box_inner { padding: var(--main-gap-double) var(--main-gap-double) var(--main-gap) var(--main-gap-double); border-radius: 4px; background: #fff;}
.icon_box_inner img { height: 54px; margin-bottom: var(--main-gap);}

@media only screen and (max-width: 1440px) {
    .icon_box { width: 50%; }
}

@media only screen and (max-width: 1200px) {
    .icon_box_inner { padding: var(--main-gap) var(--main-gap) var(--main-gap-half) var(--main-gap);  }
}

@media only screen and (max-width: 1000px) {
    .icon_box { width: 100%; }
}

.icon_last { background: var(--color-midnight-100);}
.icon_last a { color: var(--color-midnight-600);}

#moznosti { background: var(--color-gold-sand-50); }
#moznosti h2 { color: var(--color-gold-sand-700); }

@media only screen and (min-width: 960px) {
    #under h2,
    #moznosti h2 { padding-top: var(--main-gap); }
    #under .text_left_border { border-left: 1px solid var(--color-midnight-700); }
    .text_left_border { border-left: 1px solid var(--color-gold-sand-400); padding-left: var(--main-gap-tripple); text-align: justify; padding-top: var(--main-gap);}
}

.devide_by_icon {  padding: var(--main-gap);}
.devide_by_icon img { height: 52px; }

#kontakt { background: var(--color-midnight-900); }

.contact_link { 
    font-size: 1.8em;
    text-decoration: none;
    display: inline-block; 
    border-radius: 10px;
    background-color: var(--color-midnight-700);
    color: var(--color-midnight-200);
    padding: 8px;
}

@media only screen and (min-width: 960px) { .contact_link {  font-size: 2.8em; }  }
.contact_link span {  display: inline-block; padding: 16px; }   
.contact_link_icon { background-color: var(--color-midnight-50); border-radius: 8px;}
.contact_link_icon svg { height: 32px; fill: var(--color-midnight-400); }

@media only screen and (max-width: 960px) {
    .contact_link span { padding: 8px; }
    .contact_link_icon svg  { height: 22px; }
}

.contact_link:hover { background-color: var(--color-midnight-700); color: var(--color-midnight-50); }

/* FOOTER */
footer { font-size: 16px; padding: var(--main-gap-double); color: #ccc; }