/* ==========================================================================
	Base
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: black;
}

html,
body {
}

html {
	position: relative;
	font-size: 62.5%;
	line-height: 1.618;
	text-rendering: optimizeLegibility;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	scroll-behavior: smooth;
}

body {
	background: white;
	color: $grey;
	@include font-mixin(500, 18, 1.618, $font-body);

	&.menu-active {
		overflow: hidden;
	}

}

/*
[Typographic scale]
6,7,8,9,10,12,14,16,18,21,24,28,32,36,42,48,55,63,73,84,96,110,127,146,167,192

[Line height]
Bootstrap: 1.1 / 1.428571429
Golden Ratio: 1.272 / 1.618
*/

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	color: $grey;
	word-wrap: normal;
	margin: 0;
}

h1, .h1 {
	@include font-mixin(600, 48, 1.1, $font-heading);
	text-transform: uppercase;
	margin-bottom: 20px;

	@include media-breakpoint-down(md) {
		@include font-mixin(600, 42, 1.1, $font-heading);
	}

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 36, 1.1, $font-heading);
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(600, 32, 1.1, $font-heading);
	}

}

h2, .h2 {
	@include font-mixin(300, 48, 1.1, $font-heading);
	margin-bottom: 20px;

	@include media-breakpoint-down(md) {
		@include font-mixin(300, 42, 1.1, $font-heading);
	}

	@include media-breakpoint-down(sm) {
		@include font-mixin(400, 36, 1.1, $font-heading);
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(400, 32, 1.1, $font-heading);
	}

}

h3, .h3 {
	@include font-mixin(600, 32, 1.1, $font-heading);
	margin-bottom: 20px;

	@include media-breakpoint-down(md) {
		@include font-mixin(600, 28, 1.1, $font-heading);
	}

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 24, 1.1, $font-heading);
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(600, 21, 1.1, $font-heading);
	}

}

h4, .h4 {
	@include font-mixin(600, 28, 1.1, $font-heading);
	margin-bottom: 20px;

	@include media-breakpoint-down(md) {
		@include font-mixin(600, 24, 1.1, $font-heading);
	}

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 21, 1.1, $font-heading);
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(600, 18, 1.1, $font-heading);
	}

}

h5, .h5 {
	@include font-mixin(600, 24, 1.1, $font-heading);
	margin-bottom: 20px;

	@include media-breakpoint-down(md) {
		@include font-mixin(600, 21, 1.1, $font-heading);
	}

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 18, 1.1, $font-heading);
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(600, 16, 1.1, $font-heading);
	}

}

h6, .h6 {
	@include font-mixin(600, 21, 1.1, $font-heading);
	margin-bottom: 20px;

	@include media-breakpoint-down(md) {
		@include font-mixin(600, 18, 1.1, $font-heading);
	}

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 16, 1.1, $font-heading);
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(600, 14, 1.1, $font-heading);
	}

}

p {
	@include font-mixin(400, 16, 1.618, $font-body);
	/*letter-spacing: .01em;*/
	color: $grey;
	margin: 0 0 20px;

	@include media-breakpoint-down(sm) {
		margin: 0 0 20px;
	}

	&.lead {
		@include font-mixin(300, 48, 1.1, $font-heading);
		hyphens: none;
		color: $grey-55;
		margin-bottom: 30px;

		@include media-breakpoint-down(md) {
			@include font-mixin(300, 32, 1.272, $font-heading);
			margin-bottom: 20px;
		}

		@include media-breakpoint-down(sm) {
			@include font-mixin(300, 28, 1.272, $font-heading);
			margin-bottom: 20px;
		}

	}

	&.bold {
		font-weight: 600;
	}

}

blockquote {
	position: relative;
	quotes: "\201C""\201D""\2018""\2019";
	border: 0;
	margin: 0 auto;
	padding: 0;

	p {
		@include font-mixin(300, 21, 1.618, $font-body);
		margin: 0;

		@include media-breakpoint-down(md) {
			@include font-mixin(400, 18, 1.618, $font-body);
		}

		@include media-breakpoint-down(sm) {
			@include font-mixin(400, 16, 1.618, $font-body);
		}

	}

	span.author {
		display: block;
		@include font-mixin(italic 600, 21, 1.618, $font-heading);


		@include media-breakpoint-down(md) {
			@include font-mixin(italic 600, 18, 1.618, $font-heading);
		}

		@include media-breakpoint-down(sm) {
			@include font-mixin(italic 600, 16, 1.618, $font-heading);
		}

	}

}

li {
	@include font-mixin(400, 16, 1.618, $font-body);
}

dt {
	@include font-mixin(600, 28, 1.272, $font-heading);
	color: black;
	margin-bottom: 20px;

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 24, 1.272, $font-heading);
		margin-bottom: 10px;
	}

	@include media-breakpoint-down(xs) {
		@include font-mixin(600, 21, 1.272, $font-heading);
	}

}

dd {
	@include font-mixin(400, 16, 1.618, $font-body);
	/*letter-spacing: 0.01em;*/
	margin: 0 0 30px;
}

a {
	text-decoration: none;
	cursor: pointer;

	&[role="link"] {
		font-style: italic;
	}

	&:visited {
		opacity: 0.5;
	}

	&:hover {
		text-decoration: none;
	}

}

@mixin clearlink {
	color: inherit;
	box-shadow: none;
	padding-bottom: 0;

	&:hover {
		color: inherit;
		text-decoration: underline;
		box-shadow: none;
		padding-bottom: 0;
	}

}

b,
strong {
	font-weight: 600;
}

hr {
  border-top: 1px solid $grey-94;
}

i {
	margin-right: 8px;
}

figure {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 0 30px;

	@include media-breakpoint-down(sm) {
		margin-bottom: 20px;
	}

	img {
		width: 100%;
	}

	figcaption {
		position: absolute;
		bottom: 8px;
		left: 15px;

		p {
			@include font-mixin(400, 14, 1.618, $font-body);
			text-shadow: 0 0 20px rgba(0,0,0,.6);
			color: white;
			margin: 0;
		}

	}

}

.table {
	text-align: left;
	width: 100%;
	margin-bottom: 30px !important;

	& > thead > tr > th,
	& > tbody > tr > th,
	& > tfoot > tr > th,
	& > thead > tr > td,
	& > tbody > tr > td,
	& > tfoot > tr > td {
		border-top: none;
		padding: 10px 15px;
	}

	& > thead > tr > th,
	& > tbody > tr > th,
	& > tfoot > tr > th {
		line-height: 1.272;
	}

	& > thead > tr > th {
		border-bottom: none;
		vertical-align: middle;
	}

	thead th {
		@include font-mixin(600, 18, 1.272, $font-heading);
		background: $aqua;
		color: white;
	}

	tbody tr {

		&:nth-child(odd) {
			background: $grey-94;
		}

	}

	tbody tr td {
		@include font-mixin(400, 16, 1.618, $font-body);
		/*letter-spacing: 0.01em;*/
		color: $grey;
	}
}

div.category,
time {
	display: inline-block;
	@include font-mixin(600, 16, 1.272, $font-heading);
	color: $grey;
	margin-bottom: 10px;

	@include media-breakpoint-down(sm) {
		@include font-mixin(600, 14, 1.272, $font-heading);
	}
}

::-moz-selection {
	color: white;
	background: black;
	text-shadow: none;
}

::selection {
	color: white;
	background: black;
	text-shadow: none;
}

.image-as-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	img,
	a img {
		opacity: 0;
	}

	a:hover img {
		opacity: 0;
	}
}

#main .no-padding {
	padding: 0 !important;
}

.no-margin {
	margin: 0;
}

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

#wrapper {

	.btn {
		display: inline-block;
		position: relative;
		@include font-mixin(600, 16, 1.618, $font-body);
		@include font-line-height-mixin(40);
		text-transform: uppercase;
		background: $light-blue;
		color: white;
		border: 0;
		border-radius: 8px;
		height: 40px;
		vertical-align: middle;
		// margin-bottom: 30px;
		padding: 0 30px;
		backface-visibility: hidden;
		box-shadow: 0 2px 2px rgba(0,0,0,.35);
		overflow: hidden;
		z-index: 1;

		&:before {
			content: "";
			position: absolute;
			background: $navy;
			border-radius: 8px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transform: scaleX(0);
			transform-origin: 0 50%;
			transition: transform .5s ease;
			z-index: -1;
		}

		&:focus {
			outline: none;
		}

		&:hover {
			color: white;
			padding-bottom: 0;
			box-shadow: 0 2px 2px rgba(0,0,0,.35);

			&:before {
				transform: scaleX(1.1);
				@include media-breakpoint-down(md) {
					transform: none;
					display:none;
				}
			}
		}

		&.green {
			background: $green;
		}

		&.white {
			background: white;
			color: $navy;
			&:hover {
				color: white;
			}
		}
		&.navy {
			background: $navy;
		}
		&.full {
			width: 100%;
		}

	}

}

#wrapper .read-more {
	@include clearlink;
	@include font-mixin(500, 14, 1.272, $font-body);
	color: $blue;
	position: relative;
	padding-right: 25px;
	text-transform: uppercase;


	&:after {
		transition: all ease-in-out .3s;
		content: "\f15b";
		@include font-mixin(400, 21, 1, 'Line Awesome Free');
		position: absolute;
		top: 50%; right: 0;
		transform: translateY(-50%);

	}

	&.no-icon {
		&:after {
			display: none;
		}
	}

	&:hover {
		text-decoration: none;
		color: $aqua;
		&:after {
			right: 5px;
		}
	}

	&.white {
		color: white;
		&:after {
			color: white;
		}
	}

}


.table-custom{
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.table-custom th {
    padding: 0.5rem;
    border: 1px solid white;
    border-bottom: none;
    padding:10px 5px!important;
    font-size:1.6rem;
}
th.nested{
    padding: 0!important;
    
}
th.nested .table-custom td{
    height:40px; 
    border: 1px solid white;
    color:white;
    line-height:1;
    font-size:1.6rem;
}


#wrapper .form-wrap{
	#main .gform_confirmation_message {
		font-size: 2.1rem;
	}
	@include media-breakpoint-down(sm) {
		margin-bottom: 30px;
		.gform_wrapper ul li{
			padding: 0 7.7px;
		}
	}
}