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

body {
    background-color: #ffffff !important;
    color: #1b1a20;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px !important;
	font-weight: 300;
	overflow-x: hidden !important;
}
div a {
    color: #ffffff;
}
div a:hover {
    color: #ffffff;
    text-decoration: none;
}
h1 {
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 5rem;
    font-weight: 700 !important; 
    text-transform: uppercase;
}

#about {
    padding: 5% 5% 0 5%;
}
#backToTop {
  display: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; 
  position: fixed;
  border: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  font-size: 18px;
  background-color: #10A8DF;
  padding: 10px 30px;
  color: #ffffff;
  text-align: center;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease-out,
				color 0.3s ease-out;
}

#backToTop:hover {
  background-color: #1b1a20;
  color: #ffffff;
  transition: background-color 0.3s ease-in,
				  color 0.3s ease-in;
}

#my-work {
    padding: 0 5%;
}
#contactme {
    padding: 0 5% 5% 5%;
}
.blue-bg {
	background-color: #38899d;
}
.bluegray-bg {
	background-color: #4c5e6b;
}
.case-study-links a {
    color: #1b1a20;
    font-size: 1.5rem;
	font-family: 'Barlow Condensed', sans-serif; 
    font-weight: 700 !important; 
	text-transform: uppercase;
}
.case-study-links a:hover {
    color: #10A8DF;
  transition: background-color 0.3s ease-in,
				  color 0.3s ease-in;
}
.copyright {
	color: #ffffff;
	font-size: 1rem;
	font-family: 'Barlow Condensed', sans-serif; 
    font-weight: 700 !important; 
	text-align: center;
	text-transform: uppercase;
}
.content {
    overflow-x: hidden !important;
}
.cover {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.custom-button {
	background-color: transparent;
	display: inline-block;
	width: 250px;
	padding: 15px 30px;
	color: #fff;
	border: 2px solid #fff;
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: background-color 0.3s ease-out,
				color 0.3s ease-out;
}
.custom-button:hover, .custom-button:active {
	background-color: #10A8DF;
	border-color: transparent;
	color: #ffffff;
	transition: background-color 0.3s ease-in,
				  color 0.3s ease-in;
}
.custom-button-black {
	background-color: transparent;
	display: inline-block;
	width: 250px;
	padding: 15px 30px;
	color: #fff;
	border: 2px solid #fff;
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: background-color 0.3s ease-out,
				color 0.3s ease-out;
}
.custom-button-black:hover, .custom-button:active {
	background-color: #1b1a20;
	border-color: transparent;
	color: #ffffff;
	transition: background-color 0.3s ease-in,
				  color 0.3s ease-in;
}
.custom-button-new {
	background-color: #1b1a20;
	border-color: transparent;
	display: inline-block;
	font-family: 'Barlow Condensed', sans-serif; 
	font-size: 1.5rem;
    font-weight: 700; 
	width: 250px;
	padding: 15px 30px;
	color: #ffffff;
	text-align: center;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease-out,
				color 0.3s ease-out;
}
.custom-button-new:hover, .custom-button-new:active {
	background-color: #10A8DF;
	color: #ffffff;
	transition: background-color 0.3s ease-in,
				  color 0.3s ease-in;
}
.desktop {
	display: block;
}


footer {
	background-color: #1b1a20;
	padding: 3%;
	position: sticky;
	text-align: center;
}
.gain-training-row {
    padding: 5% 5% 2% 5%
}
.grid-item-cbs {
    cursor: pointer;
    padding: 10% 5% !important;
    background: linear-gradient(to top, #000229 50%, #000766 50%); 
    background-size: 100% 200%;
    background-position: top;
    border: 10px solid #ffffff;
    transition: all 0.7s ease-in-out;
}

.grid-item-cbs:hover {
    color: #ADB3FF;
    background-position: bottom;
}

.grid-item-cleanbay {
    cursor: pointer;
    padding: 10% 5% !important;
    background: linear-gradient(to top, #085672 50%, #10A8DF 50%);
    background-size: 100% 200%;
    background-position: top;
    border: 10px solid #ffffff;
    transition: all 0.7s ease-in-out;
}
.grid-item-cleanbay:hover {
    color: #B3E7FA;
    background-position: bottom;
}
.grid-item-clng {
    cursor: pointer;
    padding: 10% 5% !important;
    background: linear-gradient(to top, #0C6E66 50%, #17D3C3 50%);
    background-size: 100% 200%;
    background-position: top;
    border: 10px solid #ffffff;
    transition: all 0.7s ease-in-out;
}
.grid-item-clng:hover {
    color: #B6F7F1;
    background-position: bottom;
}
.grid-item-gain {
    cursor: pointer;
    padding: 10% 5% !important;
    background: linear-gradient(to top, #01203C 50%, #034D91 50%);
    background-size: 100% 200%;
    background-position: top;
    border: 10px solid #ffffff;
    transition: all 0.7s ease-in-out;
}
.grid-item-gain:hover {
    color: #AFD9FE;
    background-position: bottom;
}
.grid-item-natrium {
    cursor: pointer;
    padding: 10% 5% !important;
    background: linear-gradient(to top, #851E4C 50%, #B82A6A 50%);
    background-size: 100% 200%;
    background-position: top;
    border: 10px solid #ffffff;
    transition: all 0.7s ease-in-out;
}
.grid-item-natrium:hover {
    color: #E89BBF;
    background-position: bottom;
}
.grid-item-title {
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 3.5em;
    font-weight: 700; 
    line-height: 1em;
    text-transform: uppercase;
}
.grid-item-tpi {
    cursor: pointer;
    padding: 10% 5% !important;
    background: linear-gradient(to top, #1C0226 50%, #42065B 50%);
    background-size: 100% 200%;
    background-position: top;
    border: 10px solid #ffffff;
    transition: all 0.7s ease-in-out;
}
.grid-item-tpi:hover {
    color: #E6B1FB;
    background-position: bottom;
}

.homepage-h1-part1 {
    font-size: 3rem;
}
.homepage-h1-part2 {
    animation: color-change 7s infinite;
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 9rem;
    line-height: 7rem;
}
.homepage-h1-part2-tp {
    animation: color-change 7s infinite;
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 7rem;
    line-height: 5rem;
    font-weight: 700 !important;
}
.homepage-h1-part2-tpi {
    animation: color-change 7s infinite;
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 9rem;
    line-height: 9rem;
}
@keyframes color-change {
  0% { color: #10A8DF; }
  33% { color: #034D91; }
  66% { color: #1b1a20; }
  100% { color: #10A8DF; }
}
#homepage-header {
    padding: 0 5%;
}
.hr {
	border: 4px solid #000000;
}
.intro {
    padding: 0 5%;
}
.item {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
.last-row {
    padding: 1% 5% 5% 5%;
}
.lgnumber {
    animation: color-change 7s infinite;
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 4.5rem;
    line-height: 4.5rem;
    font-weight: 700 !important;
}
.lightgray-bg {
	background-color: #d8d8d8;
}
.mobile {
	display: none !important;
}
.mobile-only-copy {
	padding: 10% !important;
	text-align: center !important;
}
.left-img {
    padding: 0 5% 0 1% !important;
}
.natrium-logo-img {
    border: 1px solid #b4b4b4;
    margin: 0 0 4% 0;
}
nav {
    background-color: #1b1a20;
    margin: 0 auto;
	padding: 0 !important;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index:100;
}
nav ul {
    list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
nav ul li {
    display: inline-block;
}
.nav-link {
	color: #ffffff !important;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
}
.nav-link:hover {
	color: #10A8DF !important;
}

.outer {
  height: 100%;
}
.paddingfive {
	padding: 5% !important;
}

.project-left-text {
    padding: 0 5% 0 1% !important;
}
.project-title {
	font-family: essonnes-display, serif;
	font-size: 3.5em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 1px;
	padding: 1% 0;
	text-transform: uppercase;
}
.project-item-title {
    font-family: 'Barlow Condensed', sans-serif; 
    font-size: 3.5em;
    font-weight: 700; 
    line-height: 1em;
    text-transform: uppercase;
}

.sidepadding {
	padding: 0 5% !important;
}
.sidepadding-sm {
	padding: 0 2% !important;
}
.silver-bg {
	background-color: #c0bfbf;
}
.small-padding {
	padding: 0 5% !important;
}
.small-title {
	font-size: 2.5em;
	font-weight: 700;
	padding: 5% 5% 0 5%;
	text-align: center;
}
.small-title-left {
	font-size: 2em;
	padding: 2% 0;
	text-align: left;
}
.stat {
    text-align: center;
}
.swain-row {
    padding: 3% 5% 5% 5%
}
.tpi-acs-img {
    border: 1px solid #b4b4b4;
}
.vertical-align-divs {
	padding: 7% 5% 5% 5%;
}
.vertical-copy {
	padding: 15% 5%;
}
.vertical-img-frame {
    padding: 0 10% !important;
}
.white-text {
	color: #ffffff;
}
.white-text-centered {
	color: #ffffff;
	text-align: center;
}
.white-title {
	font-family: essonnes-display, serif;
	font-size: 3.5em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	padding: 0 0 1% 0;
	text-align: center;
}
.white-title-left {
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size: 2.5em;
	font-weight: 700;
	padding: 0 0 3% 0;
	text-align: left;
}
.whitelink {
	color: #ffffff;
	text-decoration: underline;
}
.whiteblack-title {
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size: 2.5em;
	font-weight: 700;
	padding: 0 0 2% 0;
	text-align: center;
}
.zoom {
	transition: transform .5s;
}
.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
transition: transform .5s;
}