/* Social Science
   developer:   yhechler
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */

:root {
	/*greys*/
	--grey-22: #222222;
	--grey-4b: #4b4b4b;
	--grey-db: #dbdbdb;
	/*etc*/
	--main-red: #dd1100;
	--main-orange: #ff7700;
	--new-orange: #eb5f03;
	--secondary-color: #5bb2a6;
	/*measurements*/
	--wrapper-h-pad: 2rem;
	--mobile-img-pad-bot: 40px;
}
/*section*/

section, main header {
	padding: 0 var(--wrapper-h-pad);
	width: 100%;
}
div[id$="-content"] {
	border-top: 2px solid #ccc;
	margin: 2.5rem auto 0 auto;
	max-width: 69.125rem;
	padding: 2.5rem 2.5rem .5rem 2.5rem;
	width: 100%;
}
#intro-content {
	border-top: none;
	margin: 0 auto;
	padding: 3.5rem 0 0 0;
}
#get-started-content {
	border-top:none;
}
#see-whats-possible-content {
	padding: 2.5rem;
}
#work-with-content {
	border-top: none;
}
/*grids*/

.feature-grid {
	align-items: start;
	border-top: none;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 1fr 27.4375rem;
	justify-items: center;
}
.feature-grid:first-child {
	border-top: none;
	padding-top: 0;
}
.feature-grid.img-on-left {
	grid-template-columns: 27.4375rem 1fr;
}
.feature-grid .feature-right {
	margin: 0;
	text-align: center;
}
.feature-grid.img-on-left .feature-left {
	order: 2;
}
.feature-grid.img-on-left .feature-right {
	order: 1;
}
/*text*/

main {
	color: #404040;
	font-family: 'Source Sans Pro', Arial, sans-serif;
}
main h1 {
	color: #fff;
	font-size: 3.625rem;
	letter-spacing: -0.06rem;
}
main h2 {
	color: var(--new-orange);
	font-size: 2.25rem;
	padding-bottom: 1.5rem;
}
main h3 {
	color: var(--grey-22);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.15;
	padding-bottom: 0.5rem;
	margin-top: 2rem;
}
main p {
	font-size: 1.25rem;
	padding-bottom: 2rem;
}
main div[id$="-content"] .feature-grid p {
	font-size: 1rem;
	padding-bottom: 1rem;
}
main div[id$="-content"] p:last-child, .feature-grid li:last-child {
	padding-bottom: 0;
}
main li {
	line-height: 1.2;
	padding-bottom: 0.625rem;
}
main a {
	color: var(--new-orange);
}
main a:hover {
	color: #e64100;
}

main img,
main video {
	max-width: 380px;
	width: 100%;
}
.pipes-bars-container img,  
#messy-data-content .feature img {
    max-width: unset;
}
main .caption {
	display: block;
	font-size: 12px;
	font-style: italic;
	margin-top: 0.5rem;
}
/*restore bullets*/

main ul.with-bullets li {
	display: list-item;
	list-style: disc;
	margin-left: 1.5rem;
	padding-bottom: 1rem;
}
/*links*/

.chevron-before.rotate-90-cw {
	padding-left: 1.65rem;
}
.chevron-before.rotate-90-cw::before {
	bottom: 0;
	display: inline-block;
	font-size: 1.75rem;
	font-weight: 300;
	left: 0;
	line-height: 0.5rem;
	position: absolute;
	top: 0;
	transform: rotate(90deg);
}
#overlay-image {
	height: auto;
	width: 100%;
}
video {
	height: auto;
}
.video-wrapper {
	height: auto;
	overflow: hidden;
	position: relative;
}
.overlay-image {
	cursor: pointer;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease;
	visibility: hidden;
	width: 100%;
}
.image-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-gap: 20px;
	max-width: 100%;
}
#see-whats-possible-content>p:nth-of-type(1) {
	padding-bottom: 1rem;
}
#see-whats-possible-content>p:nth-of-type(2) {
	padding-top: .625rem;
	padding-bottom: 3rem;
}
#see-whats-possible-content .feature-grid {
	align-items: center;
	padding-bottom: 2.5rem;
	padding-top: 3rem !important;
}
#see-whats-possible-content .feature-grid .feature-right {
	margin-bottom: 0rem;
	text-align: center;
}
#see-whats-possible .card-list {
	display: grid;
	grid-gap: 2rem 0;
	grid-template-columns: repeat(3, minmax(200px, 1fr));
	justify-items: center;
	padding: 0;
	position: relative;
	max-width: 980px;
}
#see-whats-possible .card-list a{
	background: #fff;
	box-shadow: 0 0 7px #33333330;
	color: var(--secondary-color);
	cursor: pointer;
	display: grid;
	font-size: 1.125rem;
	font-weight: 600;
	max-width: 310px;
	min-height: 250px;
	padding: 0;
	position: relative;
	transition: 0.3s;
	width: 100%;
}
#see-whats-possible .card-list a:hover, 
#get-started .card-list a:hover, 
.feature-grid.img-on-left a img:hover,
#powered-by-wolfram-content a img:hover {
	box-shadow: 0 0 5px 2px rgb(122 184 255 / 50%);
}
#see-whats-possible .card-list img::before {
	background: var(--secondary-color);
	color: #fff;
	display: block;
	font-size: .8rem;
	font-weight: 600;
	left: 0px;
	padding: 4px 15px;
	position: absolute;
	top: 0px;
	z-index: 1;
}
#see-whats-possible .card-list span {
	color: var(--new-orange);
	font-size: 1rem;
	padding: 1rem;
}
#powered-by-wolfram .image-grid {
	grid-template-columns: repeat(3, 1fr);
}
#ai-powered-computation-content .feature-grid {
	padding-bottom: 0px;
}
/* ==========================================================================
   hero
   ========================================================================== */

#hero {
	background: #2d324b;
	padding: 0;
	background-image: url("../img/hero.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	height: 320px;
}
#hero-content {
	align-items: center;
	border: none;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
	margin-top: 0;
	padding: 3.5rem 2.5rem 0 2.5rem;
}
#hero h1 {
	padding-bottom: 0.75rem;
}
#hero h1 span {
	color: #ffd458;
	display: block;
	font-weight: 300;
	font-size: 2.6rem;
}
#hero h1 span.the-wolfram-solution-for {
	color: #fff;
	font-size: 3.1rem;
	font-weight: 600;
	line-height: 1em;
}
/*buttons*/

#hero .button_box {
	display: grid;
	margin: 1rem 0;
}
#hero .button_box .button {
	background: #2c2f4b;
	border-radius: 4px;
	border: solid 1px #fff;
	font-size: 1rem;
	padding: 8px 2px;
	text-align: center;
	color: #fff;
}
#hero .button_box .button:hover {
	background: #fff;
	color: #ff765a;
}
#hero .button_box span {
	color: #fff;
}
#hero .button_box span a {
	color: #ff765a;
}
#hero .button_box span a:hover {
	color: #fff;
}
#hero .button_box {
	align-items: center;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: 1fr 1fr 3fr;
	list-style: none;
	max-width: 500px;
	padding: 0;
}
#hero .button_box div {
	padding-left: 20px;
	position: relative;
}
/* Adding the vertical bar before the third column (div) */

#hero .button_box div::before {
	background-color: #fff;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	width: 1px;
}
/* ==========================================================================
   OTHER SECTIONS
   ========================================================================== */

/*intro*/

#intro-content {
	border-top: none;
	padding-bottom: 0.5rem;
}
#intro-content p {
	font-size: 1.375rem;
	line-height: 1.6;
	padding-bottom: 0.5rem;
}
#core-technology {
	grid-row: 1;
	grid-column: 2;
	transform: translate(0px, 204px);
}
#programming-support {
	transform: translate(0px, 282px);
}
#education-training {
	grid-row: 1;
	transform: translate(0px, 232px);
}
.mfp-iframe-scaler .mfp-title {
	bottom: -1.5rem;
	color: #ddd;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	position: absolute;
}
.mfp-iframe-scaler .mfp-title a {
	color: #fff;
	font-weight: bold;
}
.mfp-iframe-scaler .mfp-title a:hover {
	color: #ddd;
}
.mfp-content button.mfp-close {
	right: -12px;
	top: -12px !important;
}
/* ==========================================================================
 Playground
   ========================================================================== */

.notebook .cell {
	background: white;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;
}
.notebook .cell:hover {
	background: #eaf1f680;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;
}
#playground {
	background: #f3f4f2;
	background-size: inherit;
	min-height: 700px;
}
#playground .example-wrapper {
	border: 2rem solid #4c517d;
	border-radius: 20px;
	z-index: 0;
	position: relative;
}
#playground #OpenCloud-Example {
	background: #4c517d;
	min-height: 600px;
	z-index: 1000;
}
#playground #OpenCloud-Example li {
	line-height: unset;
	padding-bottom: unset;
}
.permission-CellCreate.scroller {
	border-radius: 8px 8px 0 0;
	min-height: 500px;
}
._6ZTmc9sTCuFzAqRSPQrTQ {
	border-radius: 0 0 8px 8px;
	padding: 20px;
}
.mQZG3mA--uTmBBbog0GFe {
	margin-right: 15px !important;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#powered-by-wolfram-content {
	margin-top: 0;
	border-top: none;
}
#playground-content {
	border-top: none;
	margin-top:4rem;
	padding-bottom:2rem;
}
#playground h2 {
	text-align: center;
}
#playground span.desc {
	display: block;
	padding-bottom: 3rem;
	text-align: center;
}
.reload-wrapper {
	margin: 1rem;
	text-align: center;
}
#reload-button {
	background: #ff5900;
	border-radius: 5px;
	color: #fff;
	font-size: 0.9375rem;
	padding: 2px 10px 4px 10px;
}
#reload-button:hover {
	background: #ff882f;
}
#reset-button {
	background: #ff5900;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	font-size: 0.9375rem;
	margin: 1.0rem 2rem;
	padding: 2px 10px 4px 10px;
	position: absolute;
	right: 0;
	text-align: center;
	text-decoration: none;
	width: 8.25rem;
	z-index: 9999;
}
#reset-button:hover {
	background: #ff882f;
	cursor: pointer;
	z-index: 9999;
}
.run-button {
	background: #ff5900;
	border-radius: 0.3125rem;
	color: #fff;
	cursor: pointer;
	font-size: 0.9375rem;
	padding: 0 8px 1px;
	position: absolute;
	right: 2rem;
	top: 9px;
	z-index: 9999;
}
.run-button:hover {
	cursor: pointer;
	background: #ff882f;
}
#get-started .card-list {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, minmax(200px, 1fr));
	padding-bottom: 3rem;
}
#get-started .card-list>a {
	background: #fff;
	border: 1px solid #ccc;
	border-top: 10px solid #f87818; 
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 1rem;
}
#get-started .card-list span {
	color: #000;
	display: block;
	font-weight: 600;
	margin-bottom: 2rem;
}

#get-started .card-list h3 {
	color: #444;
	display: block;
	font-weight: 300;
	margin-top: 0;
}
#messy-data .feature-grid:nth-of-type(1) img {
	max-height: 380px;
	width: auto;
}
#curated-data-computation .feature-grid:nth-of-type(3) img {
	box-shadow: 0 0 6px #33333330;
	outline: solid 1px #e6e6e6;
	width: 380px;
}
/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

@media (max-width: 1200px) {
	/*setup*/
	:root {
		--wrapper-h-pad: 3rem;
		/*45px*/
	}
	.hide.hide__900.show__1200 {
		display: block !important;
	}
	#hero .button_box {
		grid-gap: 12px;
	}
	#hero .button_box .button {
		font-size: 0.92rem;
	}
	#hero .button_box div {
		padding-left: 12px;
	}
	#see-whats-possible .card-list {
		grid-template-columns: repeat(3, minmax(223px, 1fr));
		grid-gap: 30px;
		justify-items: center;
	}
}
@media (max-width: 900px) {
	/*setup*/
	:root {
		--wrapper-h-pad: 3.2rem;
		/*~45px*/
	}
	.hide.show__900, .hide.hide__600.show__900 {
		display: block !important;
	}
	.hide.hide__900.show__1200 {
		display: none !important;
	}
	div[id$="-content"] {
		padding-bottom: 0;
		padding-top: 2rem;
	}
	main h1 {
		font-size: 56px;
		padding-bottom: 0;
	}
	#messy-data-content .feature img,
	#ai-powered-computation .feature img,
	#wolfram-the-classroom img,
	#curated-data-computation img
	 {
		max-width: 450px;
		width: 100%;
	}
	.button_box {
		border-right: none;
		display: block;
		max-width: 34.375rem;
	}
	/*hero*/
	#hero {
		background-position: center bottom;
		height: 360px;
	}
	#hero-content {
		grid-gap: 40px;
		grid-template-columns: 1fr;
		height: auto;
		margin-top: 0;
		padding: 1rem 1rem 0 1rem;
	}
	#hero .button_box {
		margin: 1rem auto 0rem auto;
	}
	#hero h1 {
		margin-top: 2.5rem;
		text-align: center;
	}
	/*other sections*/
	#intro-content {
		padding-bottom: 0.1rem;
	}
	.feature-grid.img-on-left .feature-left {
		margin-top: 0;
	}
	.feature.develop-grid.two-col .feature-grid:nth-of-type(2) img {
		padding-bottom: 0;
	}
	#see-whats-possible-content .feature-grid {
		padding-bottom: 1.5rem !important;
		padding-top: 3rem !important;
	}
	#see-whats-possible .card-list {
		grid-template-columns: repeat(2, minmax(227px, 1fr));
		grid-gap: 40px 20px;
		justify-items: start;
	}
	#see-whats-possible .card-list a {
		min-height: 220px;
	}
	.feature-grid {
		grid-gap: 0;
		grid-template-columns: 1fr;
		justify-items: left;
		margin-bottom: 1rem;
		margin-top: 0rem;
		padding-bottom: 1rem;
		padding-top: 2rem;
	}
	.feature-grid:first-child {
		border-top: none;
		padding-top: 0;
	}
	.feature-grid h3 {
		padding-bottom: 0.5rem;
		margin-top: 0rem;
	}
	#wolfram-the-classroom .feature-grid:nth-of-type(2) img {
		height: 150px;
		object-fit: cover;
	}
	#get-started .card-list {
		grid-template-columns: repeat(2, minmax(200px, 1fr));
	}
	#messy-data .feature-grid:nth-of-type(1) img {
		margin-top:1rem;
		}
	.video-wrapper{
		margin:1.5rem 0;
	}
}
@media (max-width: 600px) {
	/*setup*/
	:root {
		--wrapper-h-pad: 20px;
		/*line up with global menu*/
	}
	.hide.show__600 {
		display: block !important;
	}
	.hide.hide__600.show__900 {
		display: none !important;
	}
	#hero {
		height: auto;
		padding-bottom: 4rem;
	}
	#hero-content {
		padding: 1rem 1rem 0 1rem;
	}
	#hero .button_box {
		align-items: center;
		display: grid;
		gap: 10px;
		grid-template-columns: auto auto 1fr;
		list-style: none;
		max-width: 500px;
		padding: 0;
	}
	#hero .button_box div::before {
		display: none;
	}
	#hero .button_box div {
		padding-left: 0;
	}
	#hero .button_box a.button {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		margin: 0 1.5rem 1.5rem 0;
		max-width: 140px;
		padding: 8px 12px;
	}
	#hero .button_box a.button span {
		max-width: 100%;
	}
	div[id$="-content"] {
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
		max-width: 480px;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	div[id$="-content"].feature-grid p {
		font-size: 17px;
	}
	main h1 {
		font-size: 36px;
		line-height: 1;
	}
	.feature-grid {
		margin: 0 auto 2rem auto;
		padding-top: 2.125rem;
	}
	.feature-grid.img-on-left .feature-left {
		margin-top: 0;
		margin-bottom: 3rem;
	}
	.button_box {
		max-width: 41rem;
	}
	.buttons {
		gap: .2rem 1rem;
	}
	.button {
		border-radius: 0.3rem;
		font-size: 0.95rem;
		margin: 0 7px 7px 0;
		padding: 0.625rem 0.75rem;
	}
	.chevron-before.rotate-90-cw::before {
		display: none;
	}
	/*hero*/
	/*other sections*/
	#intro-content {
		padding: 2rem 0;
	}
	#see-whats-possible .card-list {
		grid-template-columns: repeat(1, minmax(200px, 1fr));
		grid-gap: 40px;
		justify-items: center;
	}
	#powered-by-wolfram .image-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	.feature-grid.img-on-left img {
		margin-bottom: 3rem;
		max-width: 325px;
	}
	#core-technology, 
	#education-training,
	#programming-support, 
	#full-project-development {
		grid-row: unset;
		grid-column: unset;
		transform: unset;
	}
	#get-started .card-list {
		grid-template-columns: 300px;
		justify-items: left;
		justify-items: stretch;
		position: relative;
	}
	#see-whats-possible .card-list span {
		font-size: 1.2rem;
	}
	#messy-data,
	#ai-powered-computation,
	#wolfram-the-classroom{
		margin-top: 4rem;
	}
	#get-started-content {
		border-top: 2px solid #ccc;
	}
	#work-with-wolfram h2 {
		padding-bottom: 0;
	}
	#wolfram-the-classroom h3 {
		margin-top: 0;
	}
	.feature-grid.img-on-left .feature-left {
		margin-top: 0;
		margin-bottom: 0rem;
	}
	#messy-data-content .feature img,
	#ai-powered-computation .feature img,
	#wolfram-the-classroom img,
	#curated-data-computation img
	 {
		max-width: 325px;
	}
}
	@media (max-width: 320px) {
		#hero .button_box {
			max-width: 250px;
		}
		#hero h1 span {
			font-size: 2.0rem;
		}
		#hero h1 span.sb-sciences {
			font-size: 3.0rem;
		}
	}
	@media print {}