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

.ibutton {
    display: inline-block; font-size: 1.8em; padding: 12px 32px 12px 32px; text-decoration: none; box-sizing: border-box;
    color: #fff; background: var(--color-bunting-500); 
    border: 1px solid var(--color-bunting-500);
}

@media only screen and (max-width: 960px) {
    .ibutton { width: 100%; text-align: center; margin-bottom: var(--main-gap-half); }
}

@media only screen and (min-width: 960px) {
    .ibutton { margin: 0px var(--main-gap-half) var(--main-gap-half) 0px; }
}

.ibutton_inv {
    color: var(--color-bunting-500);
    background: none;
}

.ibutton:hover {
    border-color: var(--color-bunting-500);
    background: var(--color-bunting-500); color: #fff;
}

header { width: 100%; position: absolute; top: 0px; left: 0px; box-sizing: border-box; padding: var(--main-gap); z-index: 100; }
#tmp_logo img { height: 60px;}

.link_icon { text-decoration: none; display: inline-block; margin: 0px 4px 0px 0px; background: var(--color-bunting-500); padding: 8px; border-radius: 90px; }
.link_icon:hover { background-color: #333;}
.link_icon svg { height: 22px; fill:#fff; }

@media only screen and (max-width: 768px) {
    .link_icon { padding: 6px; }
    .link_icon svg { height: 16px; fill:#fff; }
}

.social { position: relative;  height: 600px; overflow: hidden; background-color: #f1f1f1; }
.social_icons { position: absolute; top: 50%; right: var(--main-gap); transform: translateY(-50%);}

#body_cover {
    padding-top: calc(var(--main-gap-double) + 60px); 
	background: #202659;
	background: -webkit-linear-gradient(180deg, rgba(32, 38, 89, 1) 0%, rgba(57, 81, 163, 1) 100%);
	background: -moz-linear-gradient(180deg, rgba(32, 38, 89, 1) 0%, rgba(57, 81, 163, 1) 100%);
	background: linear-gradient(180deg, rgba(32, 38, 89, 1) 0%, rgba(57, 81, 163, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#202659", endColorstr="#3951A3", GradientType=0);
	color: var(--color-bunting-200);
}


.project_heading {  background: rgba(0,0,0,0.1); border-radius: 8px; }
.project_heading h1 { margin-bottom: 0px;}

@media only screen and (min-width: 960px) {
    .project_heading { 
        width: calc(25% - var(--main-gap));
        height: calc(100% - var(--main-gap));
        position: absolute;
        left: var(--main-gap);
        top: 0px;
    }
}

@media only screen and (max-width: 960px) {
    .project_heading { margin: 0px var(--main-gap) var(--main-gap) var(--main-gap); }
}

.project_heading h1 { font-size: 2em; color: #7095CE; padding: var(--main-gap); text-align: center; }
.item_logo_half { width: 50%; box-sizing: border-box; float: left; }

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

.item_logo_inner { position: relative; margin-bottom: var(--main-gap); border-radius: 8px; overflow: hidden;  }
.item_logo { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 5;  }
.item_logo_cover a { display: block; width: 100%; height: 100%; text-decoration: none; position: absolute; left: 0px; top: 0px; z-index: 10;  }
.item_label { position: absolute; top: 0px; left: 0px; padding: 0; z-index: 8; padding: var(--main-gap);}
.item_label span { display: inline-block; padding: 8px 16px; background:  var(--color-bunting-500); font-size: 1.4em; border-radius: 90px;}


footer { padding: var(--main-gap-double) 0px;  }
footer h2 { font-size: 2em; margin-bottom: 4px; color: var(--color-bunting-300);  }

.footer_inner {  border-top: solid 1px var(--color-bunting-500); border-bottom: solid 1px var(--color-bunting-500); padding-top: var(--main-gap);  }