/*<meta />*/

:root
{
	--white: #f5f5f5;
	--blue: #005aaa;
	--light_blue: #54c9ef;
	--hover_blue: #F5F7F9;
	--black: #12122D;
	--hover_grey: #808080;
	--tile-background: #c0e7f81a;
	--tile-background-hover: #c0e7f84d;
	--purple: #53469c;
	--radius: 30px;
	--shadow: 7px 25px 23px 0 rgba(0,0,0,.15);
}

@font-face 
{
	font-family: 'Lato Black';
	src: url(../Fonts/Lato-Black.ttf) format('truetype');
}

/*== Home Page General Styles ==*/

body
{
	font-family: 'Lato Black', sans-serif;
	background-image: url('../2024-design/hero-bg.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	width: 100%;
}

h1
{
	color: var(--white);
	font-size: 18pt;
}

p
{
	margin-bottom: 8px;
	margin-top: 8px;
	font-size: 14pt;
	font-weight: 300;
}

a.homepage-links
{
	color: var(--white);
	text-decoration: none;
}

.title-bar-layout a.logo
{
	background: transparent url(../logos/schrodinger-logo-horizontal-white-top.svg) no-repeat center center;
}

div.survey
{
	padding: 1em;
	float: left;
	border-radius: 15px;
	font-weight: bold;
	background-color: #9f9e9f;
	background: var(--light_blue);
	color: #F8F9FE;
}

div.survey > a
{
	text-decoration: none;
	color: white;
}

div.survey:hover
{
	background: var(--blue);
}

img
{
	mc-thumbnail-max-height: 0;
}

.capitalize
{
	text-transform: uppercase;
}

.placeholder
{
	color: transparent;
}

object
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
}

.button_arrow
{
	border-radius: 32px;
	content: url("../Icons/arrow.svg");
	border: 1px solid rgba(18,18,45,.2);
	padding: 15px;
	margin-right: 15px;
}

.learn_more
{
	margin-top: 25px;
	font-size: 12pt;
}

.extra-margin
{
	margin-bottom: 2em;
	padding-left: 10px;
}

.col1
{
	width: 33%;
}

.col2
{
	width: 33%;
}

.footer
{
	width: 100%;
}

.sidenav-wrapper
{
	background-color: var(--black);
}

ul.sidenav li a
{
	color: var(--white);
}

/*== Home header bar styles ==*/

.inner-wrap .tab-bar .nav-search	/*Prevents the search in the header from appearing on the home page*/
{
	display: none;
}

.inner-wrap .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

.title-bar-container
{
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	/*creates the shadow effect in the header*/
}

/* Styling the navbar expander icon */

.is-accordion-submenu-parent > a span.submenu-toggle	/* Removes the default arrow/triangle */
{
	border: none;
}

.is-accordion-submenu-parent > a span.submenu-toggle::after	/* Adds an icon */
{
	content: "\25b6";
	color: var(--blue);
	font-size: smaller;
}

.is-accordion-submenu-parent > a span.submenu-toggle-container
{
	height: 60%;
	left: -35px;
}

.submenu-toggle-container[aria-expanded="true"] > span.submenu-toggle,
.is-accordion-submenu-parent > a[aria-expanded="true"] > .submenu-toggle-container > span.submenu-toggle
{
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	left: 35px;
}

/* Styling the back-top-top button */

#myBtn
{
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 99;
	font-size: 45pt;
	border: none;
	color: transparent;
	cursor: pointer;
	background-color: transparent;
	background-image: url(../Icons/back-to-top5.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

#myBtn:hover
{
	background-image: url(../Icons/back-to-top2.png);
}

/*== home page masterpage styles ==*/

div.home-container	/*wraps the content on the home page*/
{
	margin-left: 5%;
	width: 90%;
}

.body-container
{
	padding: 0;
	/*Overrides padding set in the skin*/
}

/*== Home Page Topic Hero section ==*/

div.topic-hero
{
	padding-top: 20px;
	height: auto;
}

div.home-title
{
	margin: 15px 0 25px 0;
	color: var(--white);
}

div.release-home
{
	display: inline;
	margin-left: 25px;
	color: var(--white);
}

div.release-home > label
{
	font-weight: bold;
}

div.h1
{
	display: inline;
	color: var(--white);
	font-size: 4em;
}

div.home-description
{
	margin-bottom: 30px;
	/* margin-right: 10%; */
	color: var(--white);
}

.search,
.search-bar
{
	margin: 0 auto;
}

.search-bar._Skins_SearchHome.mc-component .search-filter
{
	background-image: url('../Icons/filter.svg');
	margin-right: 20px;
}

.search-bar.search-bar-container._Skins_SearchHome.mc-component .search-submit:hover
{
	background-image: url('../Icons/search.svg');
	background-color: var(--purple);
	border-radius: 32px;
	width: 55px;
	height: 55px;
	margin: 5px 20px 0px 0px;
}

.search-bar.search-bar-container._Skins_SearchHome.mc-component .search-submit
{
	background-image: url('../Icons/search.svg');
	background-color: var(--purple);
	border-radius: 32px;
	width: 55px;
	height: 55px;
	margin: 5px 20px 0px 0px;
}

div.search-home
{
	width: 100%;
	margin-left: 0%;
	margin-bottom: 5%;
	margin-right: 10%;
	padding: 0;
}

/*==section for tiles==*/

div.main-two-column	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.main-two-column:before
{
	content: ' ';
	display: table;
}

div.main-two-column::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.main-two-column > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.main-two-column > div:nth-child(1)
{
	margin-left: 2%;
	width: 71%;
}

div.main-two-column > div:nth-child(2)
{
	width: 23%;
	margin-left: 2%;
	margin-right: 2%;
}

div.scientific-area
{
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-auto-rows: 1fr;
	justify-content: space-between;
	width: 95%;
	margin: auto;
}

div.scientific-area
{
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-auto-rows: 1fr;
	justify-content: space-between;
	width: 95%;
	margin: auto;
}

div.scientific-area-item
{
	position: relative;
	margin-bottom: 40px;
	color: var(--white);
	background-color: var(--tile-background);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

div.header
{
	text-align: left;
	padding: 25px 25px 0px 25px;
	margin-bottom: 0;
	height: 65%;
}

div.content
{
	text-align: left;
	padding: 10px 25px 25px 25px;
	margin-top: 0;
}

div.scientific-area-item:hover
{
	transform: scale(1.04);
	background-color: var(--tile-background-hover);
}

img.sa-icon-2024
{
	border-spacing: inherit;
	padding: 10px;
	max-width: 100px;
}

div.video
{
	border-radius: var(--radius);
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	background-color: var(--tile-background);
	padding: 25px;
	box-shadow: var(--shadow);
}

.video-wrapper
{
	position: relative;
	width: 95%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-left: auto;
	margin-right: auto;
}

div.utilities
{
	background-color: var(--tile-background);
	border-radius: var(--radius);
	width: 100%;
	padding: 20px;
	margin: 0 20px 40px 20px;
	box-shadow: var(--shadow);
	cursor: pointer;
}

div.utilities:hover
{
	transform: scale(1.04);
	background-color: var(--tile-background-hover);
}

/*== Home Page Footer ==*/

div.home-footer
{
	background-color: var(--black);
	padding: 1% 5%;
	width: 100%;
	margin-top: 8%;
}

a.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 13pt;
	font-size: 11pt;
	text-decoration: none;
	color: var(--white);
}

a.footer:hover
{
	color: var(--light_blue);
}

label
{
	color: var(--white);
}

img.logo
{
	width: 270px;
	margin-left: -50px;
}

/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/

@media only screen and (max-width: 1279px)
{
	.title-bar-layout a.logo
	{
		margin-left: 50px;
	}

	div.home-container
	{
		width: 100%;
		margin-left: 4.5%;
		font-size: smaller;
	}

	div.getting-started
	{
		margin-left: 30px;
	}

	div.home-description
	{
		margin-right: 8%;
	}

	div.search-home
	{
		margin-left: 0%;
		width: 92%;
	}

	div.main-two-column > div:nth-child(1)
	{
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}

	div.main-two-column > div:nth-child(2)
	{
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
		width: 90%;
	}

	div.utilities
	{
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	div.footer-columns > div:nth-child(1)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.footer-columns > div:nth-child(2)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.footer-columns > div:nth-child(3)
	{
		width: 33.33333%;
		margin-left: 0%;
	}
}

@media only screen and (max-width: 767px)
{
	.title-bar-layout a.logo
	{
		margin-left: 50px;
	}

	p
	{
		text-align: center;
	}

	h1
	{
		text-align: center;
	}

	div.release-home
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	div.topic-hero
	{
		text-align: center;
	}

	div.home-container
	{
		width: 100%;
	}

	div.search-home
	{
		width: 93%;
	}

	div.home-footer
	{
		font-size: smaller;
		margin-top: 8%;
	}

	div.main-two-column > div:nth-child(1)
	{
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}

	div.main-two-column > div:nth-child(2)
	{
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
		width: 90%;
	}

	div.scientific-area
	{
		grid-template-columns: 100%;
		grid-auto-rows: 1fr;
		justify-content: space-between;
		width: 100%;
	}

	div.video
	{
		width: 100%;
	}

	img.sa-icon-2024
	{
		border-spacing: inherit;
		padding: 10px;
		max-width: 100px;
	}

	div.utilities
	{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	img.logo
	{
		margin-left: 0px;
	}

	table.footer tr > *
	{
		display: block;
	}

	table.footer tr
	{
		display: table-cell;
	}

	.col2
	{
		width: 0%;
	}

	.learn_more
	{
		margin-left: auto;
		margin-right: auto;
	}
}