/* PAGE BASE */

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font-size: 16px;
	line-height: 1.25;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	color: #333;
	margin: 0;
	overflow-x: hidden;
	-ms-overflow-style:scrollbar;
	background-color: #ECECEC;
}

main {
	padding: 0 1rem;
	background-color: #fff;
}

section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

a {
	color: #0371BD;
	text-decoration: none;
	&:visited {
		color: #837590;
	}
	&:hover {
		color: #048fef;
		text-decoration: underline;
	}
	&:active {
		color: #695E74;
	}
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: .5 * 1rem;
}

img, video:not(.video-modal) {
	margin-bottom: 0;
}

/*  FONTS */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem; }
  
  h1 {
	font-size: 2.375em;
	font-weight: 300; }
  
  h2 {
	font-size: 1.75em;
	font-weight: 300; }
  
  h3 {
	font-size: 1.5em;
	font-weight: 400;
	margin-bottom: 1em; }
  
  p {
	line-height: 1.625; }
  
  p, li {
	font-size: 16px;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 2rem; }
  
  p:last-child,
  li:last-child {
	margin-bottom: 0; }

/* SECTIONS */

.content-width {
	width: 1280px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto; }
  
  section:not(.has-background) + section:not(.has-background), section + * > section:first-child:not(.has-background) {
	padding-top: 0; }
  
  .content-width:not(section) + .content-width:not(section) {
	padding-top: 4rem; }
  
  @media screen and (min-width: 1024px) {
	main > section:first-child:not(.promo-banner) {
	  padding-top: calc(4rem + 12px); } }
  

/* SITE HEADER */

.site-header {
	height: 64px;
	background-color: #474747;
	-webkit-box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
			box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
	width: 100%;
	top: 0;
	position: relative;
	z-index: 10;
	-ms-touch-action: manipulation;
	touch-action: manipulation; }
	@media screen and (min-width: 1024px) {
	  .site-header {
		padding-left: 1rem;
		padding-right: 1rem; } }
  
  .site-header__content {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	position: relative;
	text-align: center; }
	.site-header__content::after {
	  clear: both;
	  content: "";
	  display: block; }
  
  .site-header__corporate-logo-link {
	height: 64px;
	position: relative;
	background-color: #FDB813; }
	.site-header__corporate-logo-link::after {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-repeat: no-repeat;
	  background-size: 100%; }
	@media screen and (max-width: 599px) {
	  .site-header__corporate-logo-link {
		width: 91px; }
		.site-header__corporate-logo-link::after {
		  background-image: url("./promega-logo-tall.svg"); } }
	@media screen and (min-width: 600px) {
	  .site-header__corporate-logo-link {
		width: 204px; }
		.site-header__corporate-logo-link::after {
		  background-image: url("./promega-logo-wide.svg"); } }
	@media screen and (max-width: 1023px) {
	  .site-header__corporate-logo-link {
		display: inline-block; } }
	@media screen and (min-width: 1024px) {
	  .site-header__corporate-logo-link {
		float: left;
		top: 12px; }
		.site-header__corporate-logo-link::before {
		  content: "";
		  position: absolute;
		  right: -12px;
		  bottom: 0;
		  width: 0;
		  height: 0;
		  border-style: solid;
		  border-width: 12px 12px 0 0;
		  border-color: rgba(0, 0, 0, 0.225) transparent transparent transparent;
		  pointer-events: none; } }
  
/* FOOTER */
.site-footer {
	background-color: #ECECEC;
	-webkit-box-shadow: inset 0 0.25em 0.563em rgba(0, 0, 0, 0.17);
			box-shadow: inset 0 0.25em 0.563em rgba(0, 0, 0, 0.17);
	color: #333333;
	padding-left: 1rem;
	padding-right: 1rem; }
	@media screen and (min-width: 1024px) {
	  .site-footer {
		padding-top: 4rem;
		padding-bottom: 4rem; } }
	.site-footer a:not(.button), .site-footer a:link:not(.button), .site-footer a:visited:not(.button) {
	  color: #666666;
	  text-decoration: underline; }
	.site-footer a:not(.button), .site-footer p {
	  font-size: .875rem; }


/* OVERRIDES */

.company-info {
	max-width: 1024px;
}

.promega-employee {
	float:right;
	margin-left:2rem;
	max-width:100%
}

@media screen and (max-width: 512px) {
	.promega-employee {
		float: none;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2rem;
		display: block;
	}
}