/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

.mp-wrap{


	body,
	button,
	input,
	select,
	textarea {
		color: #404040;
		font-family: 'Raleway', sans-serif;
		font-size: 18px;
		line-height: 1.5;
	}

	h1,
	h2 {
		margin: 0;
		padding: 0.75em 0;
		font-family: 'Montserrat', sans-serif;
		font-weight: 300;
	}

	h2 {
		font-size: 32px;
		}

	h3 {
		padding: 0.3em 0;
		margin: auto;
		line-height: 1;
	}

	h4 {
		font-size: 18px;
		margin: auto;
		padding: 0.2em 0;
		line-height: 1;
	}


	p {
		margin: 0;
		padding: 0.25em 0 0.75em 0;
	}

	a {
	color: #00ade2;  /* cyan */
	}

	p a,td a{
		display: inline;
	}

	a:hover {
	color: #87CCF0; /* cyan light */
	text-decoration: none;
	}

	i.fab,
	i.fal {
		color: #00ade2;
	}

	.grid{
		margin: 0 auto;
		max-width: 1280px;
		display: flex;
	}
	.col {
	flex: 1;
	margin: 1em;
	}

	.one-third{
		flex: none!important;
	width: 33.3333%!important;
	}

	.one-fourth{
		flex: none!important;
	width: 25%!important;
	}
	
	@media (max-width: 1280px) {
	.grid {
   		 max-width: 1080px;
  		}
	}

	@media (max-width: 600px) {
	.grid {
		display: block;
		}
	}

	.offset-10{
		transform:translate(10px, 10px);
	}

	.offset-15{
		transform:translate(15px, 15px);
	}

	.offset-20{
		transform:translate(20px, 20px);
	}

	.center-content{
		text-align: center;
		justify-content:center;
	}

	span.icon {
		margin-right: 0.75em;
	}

	/* Hero section */

	.hero {
		position: relative;
		overflow: hidden;
		background: linear-gradient(45deg, #d3f3fd, #81d0e9);
		background-size: auto 150%;
	}

	.hero-content {
		z-index: 99;
		padding: 1em;
	}

	.hero-title {
		font-family: 'Montserrat', sans-serif;
		font-weight: 300;
		text-align: left;
		font-size: 56px;
		margin: 0;
		padding: 50px 0 0 0;
	}

	/* Cards */

	.card {
		padding: 0;
		color: #464a4e;
		background: white;
		border-radius: 0px 0px 8px 8px;
		border: 1px solid #e9ecef;
	}

	.card-img{
		overflow: hidden;
		object-fit: cover;
		
	}

	.card-img > img{
		max-height: 100%;
		max-width: 100%;
	}

	.card-title{
		padding: 0;
		margin: 0.5em 0;
	}
	.card-content {
		padding: 1.5em;
		color: #464a4e;
	}
	.card-content-sm {
		padding: 0.5em;
		color: #464a4e;
	}
	.card-footer {
		border-top: 1px solid #e9ecef;
		padding: 0.5em;
	}


	.card p{
		font-size: 16px;
		
	}

	.label {
		font-size: 12px;
		text-transform: uppercase;
		padding: 4px 8px;
		color: #fff;
		margin: 0 0 0 2px;
		border-radius: 3px;
		float: right;
	}

	.divider{
		height: 20px;
	}

	.number-box{
		color: #00ade2;
		border: 1px solid #00ade2;
		font-size: 26px;
		padding: 0.25em 0.5em;
		font-family: 'Montserrat', sans-serif;
		font-weight: 300;
	}

	.pattern-image{
		display: inline-block;
	}

	.border-image{
		border: 1px solid #e6e6e6;
		box-shadow: 15px 15px 0px rgba(0, 174, 227, 0.1);
		background: white;
	}

	button {
	background-color: #1b63b9; /* MP Navy blue */
	border: none;
	color: white;
	padding: 0.5rem 1rem;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	transition-duration: 0.4s;
	margin: 0.5em 0;
	min-width: 142px;
	border-radius: 5px;
	}

	button:hover {
	background-color: #00ade2; /* MP blue */
	color: white;
	}

	.mp-icon{
		width: 900px;
		position: absolute;
		top: -300px;
		right: -50px;
	}

	.mp-icon-grey{
		width: 900px;
		position: absolute;
		top: -300px;
		right: -50px;
	}

	.mojo-flower-white{
	fill: url(#my-cool-gradient) #ffffff;
	}

	.mojo-flower-grey{
	fill: #e9f7fe;
	}

	.mp-list li{
		padding: 0;
		font-size: 16px;
		margin-bottom: 0.5em;
	}

	.mp-list span{
		color: #00ade2; /* MP blue */
	}

	.icon-callout{
		display: grid;
	grid-template-columns: 100px auto;
	grid-row-start: initial;
	align-content: start;
	}

	/* tables */

	.table {
		width: 100%;
		margin-top: 2em;
		margin-bottom: 2em;
	/* 	background: #fff; */
		border-collapse: collapse;
	}

	.sm-table td{
		font-size: 14px;
	}



	.table caption{
		text-align: left;
		font-weight: 700;
		padding: 0.5em;
	}
	.table td, 
	.table th {
		padding: .75rem;
		vertical-align: top;
		border-bottom: 1px solid #e9ecef;
	}

	.table th {
		border-top: 1px solid #5c5c5c;
		border-bottom: 1px solid #5c5c5c;
		text-align: left;
	}

	.table tr:nth-child(even) {
		background-color: #f8fdff;
		}

	.centered-table th, 
	.centered-table td{
		text-align: center;
		vertical-align: middle; 
	}

	.day {
		font-size: 32px !important;
		text-align: center;
		background: #f9fbfc;
		color: white;
	}

	.pill{
		display: block;
		padding: 5px 8px;
		border: 1px solid #00ade2;
		border-radius: 12px;
		text-align: center;
	}

	.pill i{
		display: block;
		margin-bottom: 5px;
	}

	.callout {
		font-size: 15px;
		background: #f8fdff;
		padding: 12px 12px 12px 22px;
		border-left: 10px solid #00ade2;
		text-align: left;
		margin-bottom: 1em;
	}

	.tooltip {
	background:white; 
		border: 1px solid #f8fdff; 
		padding: 5px 10px;
		border-radius: 3px;
	}

	ol li a{
		display: inline;
	}

	/* colors */

	.dark-grey {
		background: #94a0ac;
		}
		
	.light-grey {
		background: #f8fdff;
		}

	.cyan{
		background: #00ade2;
		color: white;
		}
	.green{
		background: #69d6cc;
		}
	.purple{
		background: #5E70A9;
		}
	.pink{
		background: #CD5287;
		color: white;
		}
	.navy{
		background: #1b63b9; /* MP Navy blue */
		}

	.grey{
		background: #868687;
		}
	.text-grey {
		color: #868687;
		}
	.text-light-grey {
		color: #e6e6e6;
		}
	.text-pink, .text-danger{
		color: #CD5287;
		}
	.text-cyan{
		color: #00ade2;
		}
	.text-green{
		color: #00e363;
		}	
	.text-navy{
		color: #1b63b9; /* MP Navy blue */
	}
}