/* homepage styles

   developer:   rmiske
   requires:    /common/framework/css/framework.css
                /common/templates/www.wolframphysics.org/css/global.css
   ========================================================================== */

/* ==========================================================================
   SETUP
   ========================================================================== */

/*global.css overrides*/

#home .inner {
	max-width: 104rem;
}
#home {
	background: #49096a;
}
/*decoration*/

main {
	color: rgba(255, 255, 255, 0.7);
	position: relative;
}
main:after {
	background: url('/img/home-background-lg.jpg') no-repeat scroll top right;
	background-size: cover;
	content: '';
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 0;
}
.planet .chevron-after:after {
	opacity: 0.5;
}
.bottom-border,
.bottom-border__900 {
	position: relative;
}
.bottom-border:after,
.bottom-border__900:after {
	border-bottom: 1px solid #fff;
	bottom: -0.75rem;
	content: '';
	height: 1px;
	left: 3rem;
	opacity: 0.25;
	position: absolute;
	width: calc(100% - 3rem);
}
.bottom-border {
	margin-bottom: 1.5rem;
}
.bottom-border__900:after {
	display: none;
}
/* ==========================================================================
   MAIN GRID SETUP
   ========================================================================== */

.solarsystem {
	align-content: center;
	align-items: center;
	display: grid;
	grid-template-columns: 20.3125rem auto;
	/*325px*/
	grid-template-rows: auto auto auto;
	grid-gap: 0rem 3rem;
	height: 100vh;
	justify-content: space-evenly;
	justify-items: center;
	padding: 0 3rem;
	position: relative;
	z-index: 10;
}
.solarsystem a {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.7);
	transition: color 0.15s ease-in-out;
}
.solarsystem a:hover {
	color: #ecbf17;
}
/* ==========================================================================
   LEFT
   ========================================================================== */

/*shared*/

.solarsystem > .side {
	/*align-items: center;
    align-self: stretch;*/
	display: flex;
	font-size: 0.875rem;
	height: auto;
	width: 100%;
}
.solarsystem > .side a {
	color: #bda0fe;
}
.solarsystem > .side a:hover span.sub {
	color: #ecbf17;
}
.side .img {
	width: 1.5rem;
}
.side .img img {
	height: auto;
	max-width: 100%;
}
.side .txt {
	padding-left: 0.65rem;
}
.side .txt span {
	display: block;
}
.side .txt span.head {
	color: #fff;
	text-transform: uppercase;
}
.side .txt span.sub {
	font-size: 0.8125rem;
	font-style: italic;
}
span.sub + span.head,
span.head + span.sub {
	padding-top: .125rem;
}
.side.bottom-border {
	margin-bottom: 3rem;
}
.side.bottom-border:after {
	bottom: -1.5rem;
	left: 2.25rem;
	opacity: 0.17;
	width: calc(100% - 2.25rem);
}
/*logo*/

.home-logo {
	grid-row: 1 / span 1;
	margin-bottom: 2rem;
}
.home-logo img {
	max-width: 100%;
}
/* Use this for new top pod. Referenced in index.php.en
   ==========================================================================
*/
.new-terra { grid-row: 2 / span 1; }

.new-terra span.sub { font-style: normal!important; }


/*twitter*/

.oort {
	grid-row: 3 / span 1;
}
/*book*/

.ring-gate {
	grid-row: 4 / span 1;
}
/*livestreams*/

.moon {
	grid-row: 5 / span 1;
}
.moon .txt {
	padding: 0.25rem 0 0 0.65rem;
}
.moon .stream-head span.sub {
	font-size: 0.6875rem;
	font-style: normal;
	padding-bottom: 0.875rem;
	text-transform: uppercase;
}
.moon .stream-head span.sub a:hover {
	color: #ecbf17;
}
.moon .stream {
	display: block;
	font-style: italic;
	padding-bottom: 0.75rem;
}
.moon .stream:last-child {
	padding-bottom: 0;
}
/* ==========================================================================
   RIGHT
   ========================================================================== */

/*setup*/

.planet {
	grid-column: 2;
	grid-row: 1 / span 4;
	justify-self: end;
	max-width: 48rem;
	width: 100%;
}
.planet .darkmatter {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	/*margin-bottom: 1.5rem;*/
	/*top: 0.375rem;*/
}
.continent {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	padding: 1rem;
	position: relative;
}
.continent .img {
	font-size: 0;
	width: 1.5rem;
}
.continent .txt {
	padding-left: 0.5rem;
}
.continent a img {
	transition: filter 0.15s ease-in-out;
}
.continent a:hover {
	text-shadow: 0 0 1rem rgba(255, 255, 255, 0.3);
}
.continent a:hover img {
	filter: brightness(1.25) saturate(125%);
}
/*top*/

.sol .continent {
	padding-top: 1.25rem;
}
.sol #announce {
	grid-column: 1 / span 3;
	font-size: 1rem;
}
.sol #bulletins {
	grid-column: 4 / span 3;
}
.sol #backstory {
	font-size: 0.8125rem;
	font-style: italic;
	grid-column: 1 / span 3;
	grid-row: 2;
	margin-top: -1rem;
	padding: 0 1rem 1rem 3rem;
}
.sol #backstory a {
	color: #c2a6e2;
}
.sol #backstory a:hover {
	color: #ffde7d;
}
#backstory .chevron-after:after {
	margin: 0;
	/*snowflake to fix spacing after chevron*/
}

.sol #one-year-update {
	font-size: 0.8125rem;
	font-style: italic;
	grid-column: 4 / span 3;
	grid-row: 2;
	margin-top: -1rem;
	padding: 0 1rem 1rem 3rem;
}
.sol #one-year-update a {
	color: #c2a6e2;
}
.sol #one-year-update a:hover {
	color: #ffde7d;
}
#one-year-update .chevron-after:after {
	margin: 0;
	/*snowflake to fix spacing after chevron*/
}

.sol #explainer {
	grid-column: 7 / span 2;
}
#explainer img {
	margin-left: -4px;
}
/*middle*/

.inner-planets #introduction {
	grid-column: 1 / span 3;
}
.inner-planets #techdocs {
	grid-column: 4 / span 3;
}
.inner-planets #tools {
	grid-column: 7 / span 2;
}
.inner-planets #livestreams {
	grid-column: 1 / span 3;
	grid-row: 2;
}
.inner-planets #qa {
	grid-column: 4 / span 3;
	grid-row: 2;
}
.inner-planets #people {
	grid-column: 7 / span 2;
	grid-row: 2;
}
#people img {
	margin-left: -6px;
}
/*bottom*/

.darkmatter.outer-planets {
	font-size: 0.875rem;
	/*margin-bottom: 0.375rem; 
    padding-bottom: 0.25rem;*/
}
.outer-planets #registry {
	grid-column: 1 / span 3;
	grid-row: 1;
}
.outer-planets #gallery {
	grid-column: 1 / span 3;
	grid-row: 2;
}
.outer-planets #archives {
	grid-column: 1 / span 3;
}
.outer-planets #glossary {
	grid-column: 5 / span 3;
	grid-row: 1;
}
.outer-planets #educollab {
	grid-column: 5 / span 4;
	grid-row: 2;
}
.outer-planets #discuss {
	grid-column: 5 / span 3;
	grid-row: 3;
}
.outer-planets #membership {
	grid-column: 1 / span 3;
	grid-row: 4;
}
.outer-planets #how-you-can-help {
	grid-column: 5 / span 3;
	grid-row: 4;
}
/*very bottom*/

.belt {
	padding-top: 0.5rem;
}
.belt .continent {
	padding: 0.5rem 1rem;
}
.belt .img {
	text-align: right;
}
.belt img {
	margin-right: 0.25rem;
}
.belt .txt {
	font-weight: 300;
}
.belt #contact {
	grid-column: 1 / span 3;
	grid-row: 5;
}
.belt #how-you-can-help {
	grid-column: 4 / span 3;
	grid-row: 5;
}
.belt #islands {
	grid-column: 7 / span 2;
	grid-row: 5;
}
#islands .txt {
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}
#islands img {
	margin-right: 0.5rem;
}
.belt #shop {
	grid-column: 6 / span 0;
	grid-row: 5;
}
.belt #sign-up {
	grid-column: 3 / span 3;
	grid-row: 5;
}
/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
	/*SETUP > decoration*/
	main:after {
		left: -10%;
		width: 110%;
	}
	/*MAIN GRID SETUP*/
	.solarsystem {
		grid-template-columns: 20rem auto;
		grid-gap: 0 3rem;
	}
}
/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
	/*rebiggen*/
	html {
		font-size: 15px !important;
	}
	/*SETUP > decoration*/
	main:after {
		left: -25%;
		width: 125%;
	}
	.bottom-border__900 {
		margin-bottom: 2rem;
	}
	.bottom-border__900:after {
		bottom: -1.5rem;
		display: block;
	}
	/*MAIN GRID SETUP*/
	.solarsystem {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto auto;
		grid-gap: 1.5rem 1.5rem;
		height: auto;
		padding: 2rem 3rem;
	}
	.side.bottom-border {
		margin-bottom: 0rem;
		margin-top: 0rem;
	}
	/*LEFT > shared*/
	.side.bottom-border {
		margin-bottom: 2.5rem;
	}
	.side.bottom-border:after {
		bottom: -2rem;
	}
	/*LEFT > logo*/
	.side.home-logo {
		display: block;
		grid-column: 1 / span 2;
		justify-self: start;
		min-width: 14rem;
		margin-bottom: 0;
		margin-top: 0;
		max-width: 20rem;
		width: 30vw;
	}
	/*Use this for a new top pod*/ 
	.new-terra { 
		grid-column: 1 / span 4;
        grid-row: 3 / span 1; 
    }
    
	/*LEFT > twitter*/
	.oort {
		grid-column: 1 / span 4;
		grid-row: 4 / span 1;
	}
	/*LEFT > book*/
	.ring-gate {
		grid-column: 1 / span 4;
		grid-row: 5 / span 1;
	}
	.ring-gate:after {
		display: none;
	}
	/*LEFT/livestreams*/
	.moon {
		grid-column: 3 / span 2;
		grid-row: 1 / span 1;
		margin-bottom: auto;
		margin-top: 0;
		top: 0;
	}
	.moon .streams {
		grid-gap: 0.5rem;
		grid-template-columns: 1fr;
	}
	/*RIGHT > setup*/
	.planet {
		grid-column: 1 / span 4;
		grid-row: 2;
		max-width: 100%;
	}
	.planet .darkmatter {
		margin-left: -1rem;
	}
	/*RIGHT > very bottom*/
	.belt #contact {
		grid-column: 1 / span 4;
		grid-row: 1;
	}
	.belt #how-you-can-help {
		grid-column: 5 / span 4;
		grid-row: 1;
	}
	.belt #islands {
		grid-column: 5 / span 4;
		grid-row: 3;
	}
	.belt #shop {
		grid-column: 1 / span 4;
		grid-row: 3;
	}
	.belt #sign-up {
		grid-column: 5 / span 4;
		grid-row: 1;
	}
}
/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
	/*rebiggen*/
	html {
		font-size: 16px !important;
	}
	/*SETUP > decoration*/
	main:after {
		background: transparent url('/img/home-background-sm.jpg') no-repeat center;
		background-size: cover;
	}
	/*MAIN GRID SETUP*/
	.solarsystem {
		grid-gap: 1.5rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		margin: 0 auto;
		padding: 2rem 0;
		width: 90%;
	}
	/*LEFT > logo*/
	.side.home-logo {
		grid-column: 1 / span 1;
		min-width: 14rem;
		width: 50vw;
	}
	/*Use this for a new top pod*/ 
	.new-terra { 
		grid-column: 1;
        grid-row: 3; 
    }
    
	/*LEFT > twitter*/
	.oort {
		grid-column: 1;
		grid-row: 4;
	}
	/*LEFT > book*/
	.ring-gate {
		grid-column: 1;
		grid-row: 5;
	}
	.ring-gate:after {
		display: block;
	}
	/*LEFT > livestreams*/
	.moon {
		grid-column: 1;
		grid-row: 6;
		margin-top: 0rem;
		max-width: 100%;
	}
	/*RIGHT > setup*/
	.planet {
		grid-column: 1;
		grid-row: 2;
	}
	.planet .darkmatter {
		grid-template-columns: repeat(2, 1fr);
	}
	.continent,
	.sol .continent {
		grid-column: 1 / span 2 !important;
		padding: 1rem;
	}
	/*RIGHT > top*/
	.sol #announce {
		grid-row: 1;
		padding-bottom: 0;
	}
	.sol #backstory {
		grid-row: 2;
		margin-top: 0.25rem;
		padding: 0 1rem 0.25rem 3rem;
	}
	.sol #bulletins {
		grid-row: 3;
	}
	.sol #one-year-update {
		grid-row: 4;
		padding: .25rem 1rem 0.25rem 3rem;
	}
	.sol #explainer {
		grid-row: 5;
	}
	/*RIGHT > middle*/
	.inner-planets #techdocs {
		grid-row: 2;
	}
	.inner-planets #tools {
		grid-row: 3;
	}
	.inner-planets #livestreams {
		grid-row: 4;
	}
	.inner-planets #qa {
		grid-row: 5;
	}
	.inner-planets #people {
		grid-row: 6;
	}
	/*RIGHT > bottom*/
	.outer-planets #registry {
		grid-row: 1;
	}
	.outer-planets #gallery {
		grid-row: 2;
	}
	.outer-planets #archives {
		grid-row: 3;
	}
	.outer-planets #glossary {
		grid-row: 4;
	}
	.outer-planets #educollab {
		grid-row: 5;
	}
	.outer-planets #discuss {
		grid-row: 6;
	}
	.outer-planets #membership {
		grid-row: 7;
	}
	.outer-planets #how-you-can-help {
		grid-row: 8;
	}
	/*RIGHT > very bottom*/
	.belt #contact {
		grid-row: 7;
	}
	.belt #how-you-can-help {
		grid-row: 8;
	}
	.belt #islands {
		grid-row: 12;
	}
	.belt #shop {
		grid-row: 11;
	}
	.belt #sign-up {
		grid-row: 10;
	}
	/*RIGHT > borders*/
	.inner-planets #livestreams,
	.inner-planets #qa,
	.inner-planets #people,
	.outer-planets #contact,
	.outer-planets #book,
	.outer-planets #islands {
		border-top: none;
		margin-top: 0;
		padding-top: 1rem;
	}
}
/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {
	/*LEFT > logo*/
	.home-logo {
		width: 80%;
	}
}
/* printer styles
   ========================================================================== */

@media print {}