@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
}

#postcontent {
	width: 1280px;
	margin: 0 auto;
}

/*-- tab functions --*/
input[type="radio"], input[type="checkbox"] {
    outline: none;
	display: none;
}

#social-hub input ~ .feeds .feed {
    opacity: 0 !important;
	z-index: 1;
	position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
}

#input0:checked ~ .feeds #feed0, #input1:checked ~ .feeds #feed1, #input2:checked ~ .feeds #feed2, #input3:checked ~ .feeds #feed3, #input4:checked ~ .feeds #feed4 {
    opacity: 1 !important;
	z-index: 2;
	position: relative !important;
}

/*-- container styles --*/
#social-hub {
	position: relative;
	opacity: 1 !important;
	width: 100%;
    margin: 80px 0 !important;
    padding-top: 80px !important;
	display: flex;
	justify-content: center;
}

#social-hub .tabs {
    position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    row-gap: 50px;
    height: 100%;
	flex-wrap: wrap;
}

#social-hub .tabs .feeds {
	width: 85vw;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
	height: 100%;
}

#social-hub .tabs .feeds .feed {
	position: relative;
    width: 100%;
    height: auto;
}

#social-hub .tabs .feeds .feed iframe {
	width: 100% !important;
	height: auto !important;  /* allow JS resizing */
    display: block !important;
}


/*-- navigation and label styles --*/
#social-hub #navigation {
	display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
    column-gap: 40px;
    row-gap: 50px;
    flex-wrap: wrap;
	width: 100%;
    margin: 0 auto;
    position: absolute;
    top: -80px;
    z-index: 3;
}

#social-hub #navigation label {
	cursor: pointer;
    color: var(--text-grey);
    letter-spacing: .13px;
    min-height: 30px;
	min-width: 40px;
    text-transform: uppercase !important;
    border: 1px solid var(--text-grey) !important;
    font-size: 13px;
    line-height: 20px;
    border-radius: 20px;
    text-decoration: none;
    padding: 5px 14px;
    display: block;
    transition: all .15s ease-in-out;
}

#social-hub #navigation label:hover, 
#social-hub input#input0:checked ~ #navigation label[for="input0"],
#social-hub input#input1:checked ~ #navigation label[for="input1"],
#social-hub input#input2:checked ~ #navigation label[for="input2"],
#social-hub input#input3:checked ~ #navigation label[for="input3"],
#social-hub input#input4:checked ~ #navigation label[for="input4"] {
	background: var(--text-grey);
    color: #fff!important;
}