/* ==== BROWSER RESETS  ==== */
* { box-sizing: border-box; padding: 0; margin: 0 }
body, html { height: 100% }
body { max-width: 1600px; margin: 0 auto}


/* ==== UTILITY CLASS  ==== */
.img-fluid { width: 100%; height: auto }



/* ==== FONT  ==== */
body { font-family: sans-serif }


/*===================== MOBILE LOGO WITH SLIDE-OUT NAVIGATION MENU  ======================= */

/* Hide on desktops  */
@media all and (min-width:768px) { 
	.container-menu-bar-mobile, .container-menu-options-mobile {
		display: none;
	}
}

@media all and (max-width:767px) { 

	.container-menu-bar-mobile {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 40px;
		z-index:99;
	}

	/* Logo */
	.container-menu-bar-mobile .item-logo img { 
		display: block; 
		margin-left: 10px;
		margin-top: 9px;
		margin-bottom: 9px 
	}

	/* Hamburger icon */
	.container-menu-bar-mobile .item-icon {
		text-align: right;
		margin-right: 16px;
		display: inline-block;
		cursor: pointer;
	}

	.container-menu-bar-mobile .item-icon .bar1, 
	.container-menu-bar-mobile .item-icon .bar2, 
	.container-menu-bar-mobile .item-icon .bar3 {
		width: 36px;
		height: 4px;
		margin: 7px 0;
		transition: 0.4s;
	}

	/* Hamburger icon chnages shape */
	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}

	.change .bar2 { opacity: 0 }

	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -8px);
	}

	/* Mobile menu options */
	.container-menu-options-mobile { 
		position: fixed; 
		display: block; 
		top: 60px;
		height: 100%; 
		width: 320px;
		right: -320px;
		padding-top: 30px;
		transition: 0.5s;
		z-index:99;
	}

	.container-menu-options-mobile ul li { 
		list-style-type: none;
	    margin-left: 40px;
		margin-bottom: 30px;
		display: block;
		line-height: 1
	}

	.container-menu-options-mobile ul li a { 
		text-decoration: none;
		font-weight:bold;
		font-size:18px;
	}

	.container-menu-options-mobile ul li a:hover, .container-menu-options-mobile ul li a:active  { 
		text-decoration: underline;
	}

	/* Mobile menu option styled as button */
	.container-menu-options-mobile ul li a.btn-solid { 
		display: inline-block;
		padding: 12px 32px;
		border-width: 2px;
		border-style: solid;
	}

	.container-menu-options-mobile li a.btn-solid:hover, 
	.container-menu-options-mobile li a.btn-solid:active { 
		text-decoration: none;
	}

	/* Mobile menu option button corners */
	.container-menu-options-mobile li a.btn-soft { border-radius: 5px }
	.container-menu-options-mobile li a.btn-rounded { border-radius: 100px }


	/*== Dark mobile menu == */
	.menu-mobile-dark { background-color: blue }

	.menu-mobile-dark .item-icon .bar1, 
	.menu-mobile-dark .item-icon .bar2, 
	.menu-mobile-dark .item-icon .bar3 {
		background-color: #fff;
	}

	.menu-mobile-dark li a { color: #fff }

	.menu-mobile-dark li a.btn-solid { 
		background-color: #fff; border-color: #fff; color:blue;
	}

	.menu-mobile-dark li a.btn-solid:hover, 
	.menu-mobile-dark li a.btn-solid:active { 
		background-color: blue; color:#fff;
	}

	/*== Light mobile menu == */
	.menu-mobile-light { background-color: #fff }

	.menu-mobile-light .item-icon .bar1, 
	.menu-mobile-light .item-icon .bar2, 
	.menu-mobile-light .item-icon .bar3 {
		background-color: blue;
	}

	.menu-mobile-light li a { color: blue }

	.menu-mobile-light li a.btn-solid { 
		background-color: blue; border-color: #fff; color:#fff;
	}

	.menu-mobile-light li a.btn-solid:hover, 
	.menu-mobile-light li a.btn-solid:active { 
		background-color: #fff; color:blue; border-color: blue
	}

	/*== Sticky mobile menu == */
	.menu-mobile-sticky { position: fixed }
	
}



/*===================== DESKTOP LOGO AND NAVIGATION MENU BAR ======================= */

/* Hide on mobiles */
@media all and (max-width:767px) { 
	.container-menu-desktop { display: none }
}

/* Display on desktops */
@media all and (min-width:768px) { 
	.container-menu-desktop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		width: 100%;
		margin-bottom: 40px;
		z-index:99;
	}

	/* Logo */
	.container-menu-desktop .item-logo img { display: block; margin-left: 8px }

	/* Menu options */
	.container-menu-desktop .item-menu ul { text-align: right }

	.container-menu-desktop .item-menu ul li {
		display: inline;
		list-style-type: none;
		line-height:1;
	}

	.container-menu-desktop .item-menu ul li:last-child { margin-right: 12px }

	.container-menu-desktop .item-menu ul li a { 
		text-decoration: none;
		font-weight:bold;
		font-size: calc(14px + (19 - 14) * ((100vw - 320px)/(1600 - 320)))
	}

	.container-menu-desktop .item-menu ul li a:hover, 
	.container-menu-desktop .item-menu ul li a:active { 
		text-decoration: underline;
	}

	/* Menu option styled as a button */
	.container-menu-desktop .item-menu ul li a.btn-solid { 
		padding: 8px 28px;
		border-width: 2px;
		border-style: solid;
	}

	.container-menu-desktop .item-menu ul li a.btn-solid:hover, 
	.container-menu-desktop .item-menu ul li a.btn-solid:active { 
		text-decoration: none;
		background-color: blue;
		color:#fff;
	}

	/* Button corner styles */
	.container-menu-desktop .item-menu ul li a.btn-soft    { border-radius: 5px }
	.container-menu-desktop .item-menu ul li a.btn-rounded { border-radius: 100px }

}

/* Spacing for various desktop screen widths */
@media all and (min-width:768px) and (max-width:899px) { 
	.container-menu-desktop { padding: 0 2% }
	.container-menu-desktop .item-menu { margin-left: -200px }
	.container-menu-desktop .item-menu ul li { margin-right: 20px }
}

@media all and (min-width:901px) and (max-width: 1099px) { 
	.container-menu-desktop { padding: 0 5% 0 5% }
	.container-menu-desktop .item-menu { margin-left: -180px }
	.container-menu-desktop .item-menu ul li { margin-right: 30px }
}

@media all and (min-width:1100px) { 
	.container-menu-desktop { padding: 0 8% 0 8% }
	.container-menu-desktop .item-menu { margin-left: 0 }
	.container-menu-desktop .item-menu ul li { margin-right: 40px }
}


/* Styles for light (white background) and dark (purple background) menus */
@media all and (min-width:768px) { 

	/*== Dark desktop menu == */
	.menu-desktop-dark { background-color: blue }
	.menu-desktop-dark .item-menu ul li a { color: #fff }

	.menu-desktop-dark .item-menu ul li a.btn-solid { 
		background-color: #fff; border-color: #fff; color:blue;
	}

	.menu-desktop-dark .item-menu ul li a.btn-solid:hover, 
	.menu-desktop-dark .item-menu ul li a.btn-solid:active { 
		background-color: blue; color:#fff;
	}

	/*== Light desktop menu == */
	.menu-desktop-light { background-color: #fff }
	.menu-desktop-light .item-menu ul li a { color: blue }

	.menu-desktop-light .item-menu ul li a.btn-solid { 
		background-color: blue; border-color: blue; color: #fff;
	}

	.menu-desktop-light .item-menu ul li a.btn-solid:hover, 
	.menu-desktop-light .item-menu ul li a.btn-solid:active { 
		background-color: #fff; color: blue;
	}

	/*== Sticky desktop menu == */
	.menu-desktop-sticky { position: fixed }

}


.hero-block-1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: blue
}

.hero-block-1 h1, .hero-block-1 h2 {
	text-align: left;
	color: #fff;
	font-weight: bold;
	font-family: sans-serif;

}

.hero-block-1 h1 {
	font-size: calc(36px + (84 - 36) * ((100vw - 320px)/(1600 - 320)));
}

.hero-block-1 h2 {
	font-size: calc(18px + (32 - 18) * ((100vw - 320px)/(1600 - 320)));
}

/* Desktop - block height, text width and h1 bottom margin */
@media all and (min-width:768px) { 
	.hero-block-1 { height: 380px; margin-bottom: 80px; padding-top:40px }
	.hero-block-1 h1, .hero-block-1 h2 { 
		width: 70%; 
		margin-left: auto;
		margin-right: auto;
	}
	.hero-block-1 h1 { margin-bottom: 4% }
}

/* Mobiles - block height, text width and h1 bottom margin */
@media all and (max-width:767px) { 
	.hero-block-1 { height: 260px; margin-bottom: 40px; padding-top: 10% }
	.hero-block-1 h1, .hero-block-1 h2  {
		width: 80%; 
		margin-left: auto;
		margin-right: auto;
	}
	.hero-block-1 h1 { margin-bottom: 4% }
}




/* ========================== PAGE WRAPPER  ============================== */



.page-wrapper h1, .page-wrapper h2, .page-wrapper h3 { line-height: 1.2; font-weight: bold }

.page-wrapper h1 { font-size: calc(30px + (64 - 30) * ((100vw - 320px)/(1600 - 320))) }
.page-wrapper h2 { font-size: calc(22px + (36 - 22) * ((100vw - 320px)/(1600 - 320))); color: #000 }
.page-wrapper h3 { font-size: calc(18px + (24 - 18) * ((100vw - 320px)/(1600 - 320))); color: #000 }

.page-wrapper p, 
.page-wrapper li { font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); line-height: 1.6  }
.page-wrapper li { margin-left: 17px }

.page-wrapper a.fancy-link:link, 
.page-wrapper a.fancy-link:visited {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: solid 2px blue;
	color:blue;
}

.page-wrapper a.fancy-link:hover, 
.page-wrapper a.fancy-link:active {
	text-decoration: none;
	border-bottom: none
}

/* Desktop */
@media all and (min-width:768px) {
	.page-wrapper { 
		width: 60%; 
		margin-left: auto; 
		margin-right: auto; 
		padding-top: 100px
	}
	.page-wrapper h1 { margin: 0 0 5% 0 }
	.page-wrapper h2 { margin: 5% 0 1% 0 }
	.page-wrapper h3 { margin: 4% 0 0 0 }
	.page-wrapper p, 
	.page-wrapper ul li { margin-bottom: 20px }
	.page-wrapper img { 
		display: block; 
		margin-bottom: 20px
	}
}

/* Mobiles */
@media all and (max-width:767px) {
	.page-wrapper { 
		width: 80%; 
		margin-left: auto; 
		margin-right: auto;
		padding-top: 80px
	}
	.page-wrapper h1 { margin: 0 0 5% 0 }
	.page-wrapper h2 { margin: 12% 0 1% 0 }
	.page-wrapper h3 { margin: 8% 0 0 0 }
	.page-wrapper p, 
	.page-wrapper ul li { margin-bottom: 14px }
	.page-wrapper img { 
		display: block; 
		margin-bottom: 14px
	}
}


/*======================= 3-COLUMN GRID =====================*/

/* Desktop */
@media all and (min-width:768px) { 
	.container-wide { width: 90%; margin: 0 auto 4% auto }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.container-wide { width: 84%; margin: 0 auto 0 auto }
}

.flex-grid-three { display: flex }

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-three { 
		flex-direction: row; /* left to right */
		text-align: left
	}
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-three { 
		flex-direction: column; /* top to bottom */
		text-align: center
	}
}

/* ==== COLUMNS IN THREE COLUMN GRID ======= */

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-three .col-gutter { width: 32% }
	.flex-grid-three .col-gutter:nth-child(1) { margin-right: 4% }
	.flex-grid-three .col-gutter:nth-child(2) { margin-right: 4% }
	.flex-grid-three .col-gutter:nth-child(3) { margin-right: 0 }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-three .col-gutter { width: 100% }
	.flex-grid-three .col-gutter:nth-child(1) { margin-bottom: 10% }
	.flex-grid-three .col-gutter:nth-child(2) { margin-bottom: 10% }
	.flex-grid-three .col-gutter:nth-child(3) { margin-bottom: 10% }
}


/*  ===== CONTENT WITHIN COLUMNS ====*/

.flex-grid-three h3 {  
	font-weight: bold; 
	color: #183b56;
	line-height: 1.1;
	font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (1600 - 320))); 
}

.flex-grid-three p { 
	font-weight: 400;
	color: #465E72;
	line-height: 1.5;
	font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1600 - 320))); 
}

.flex-grid-three img  { 
	display:block;
	margin-bottom:16px;
}

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-three h3 { margin-bottom: 12px; min-height:54px }
	.flex-grid-three p { margin-bottom: 8% }
	.flex-grid-three img  { margin-bottom: 32px }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-three h3 { margin-bottom: 6px }
	.flex-grid-three p { margin-bottom: 10% }
	.flex-grid-three img  { margin-bottom: 28px; max-width: 80%; margin-left: auto; margin-right: auto }
}

.flex-grid-three img.images-shadow { 
    box-shadow: 5px 10px 8px #888;
}

.flex-grid-three a.fancy-link:link, 
.flex-grid-three a.fancy-link:visited {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: solid 2px blue;
	color:blue;
}

.flex-grid-three a.fancy-link:hover, 
.flex-grid-three a.fancy-link:active {
	text-decoration: none;
	border-bottom: none
}

/* ==== BUTTON HYPERLINK STYLES  ==== */

.flex-grid-three a.btn-solid,  
.flex-grid-three a.btn-ghost  { 
	text-decoration: none; 
	text-align:center; 
	display:inline-block;
	font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1600 - 320))); 
}

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-three a.btn-solid,  
	.flex-grid-three a.btn-ghost  { 
		padding: 14px 32px 14px 32px;
		margin-bottom:20px
	}
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-three a.btn-solid,  
	.flex-grid-three a.btn-ghost  { 
		padding: 10px 20px 10px 20px;
		margin-bottom:20px
	}
}


/* ==== SOLID BUTTON HYPERLINK STYLES  ==== */

.flex-grid-three a.btn-solid { 
	display: inline-block;
	background-color: blue;
	color:#fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
}

.flex-grid-three a.btn-solid:hover, 
.flex-grid-three a.btn-solid:active {
	background-color: blue;
	color: #fff;
}


/* ==== SOLID BUTTON HYPERLINK STYLES  ==== */

.flex-grid-three a.btn-ghost { 
	display: inline-block;
	background-color: transparent;
	color: blue;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	border: solid 2px blue;
}

.flex-grid-three a.btn-ghost:hover, 
.flex-grid-three a.btn-ghost:active {
	background-color: blue;
	color: #fff;
	border: solid 2px blue;
}

/* ==== BUTTON HYPERLINK CORNER STYLES  ==== */

.flex-grid-three a.btn-soft    { border-radius: 5px }
.flex-grid-three a.btn-rounded { border-radius: 100px }




/*======================= FOOTER =====================*/

.container-footer { background-color: #2c3e50; margin-top: 5%; border-top: solid 4px blue }

.bg-footer { background: #2c3e50; padding: 42px 0 48px 0  }

.flex-grid-footer { display: flex }


.container-footer h4, 
.container-footer p { color: #fff }


.flex-grid-footer p a:link, 
.flex-grid-footer p a:visited {
	color: #fff;
	padding-bottom:2px;
	text-decoration: none;
	border-bottom: solid 1px #fff;
}

.flex-grid-footer p a:hover,
.flex-grid-footer p a:active {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: solid 1px lightblue;
	color: lightblue;
}


.flex-grid-footer h4 {
	font-weight:bold;
	font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); line-height: 1.6
}

.flex-grid-footer p { 
	font-size: calc(15px + (16 - 15) * ((100vw - 320px)/(1600 - 320))); 
	line-height: 1.6;
	margin-bottom: 12px
}

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-footer { flex-direction: row; text-align: left; padding: 3% 8% 3% 8% }
	.flex-grid-footer .col-gutter:nth-child(1) { width: 22%; margin-right: 4% }
	.flex-grid-footer .col-gutter:nth-child(2) { width: 62%; margin-right: 4% }
	.flex-grid-footer .col-gutter:nth-child(3) { width: 22%; margin-right: 0 }
	.flex-grid-footer .col-gutter:nth-child(2) { text-align: center }
	.flex-grid-footer h4 { margin-bottom: 6px }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-footer { flex-direction: column; text-align: left; padding: 10% 10% 10% 10% }
	.flex-grid-footer .col-gutter, 
	.flex-grid-footer .col-no-gutter { width: 100% }

	.flex-grid-footer .col-gutter:nth-child(1),
	.flex-grid-footer .col-gutter:nth-child(2) { padding-bottom: 22px }

	.flex-grid-footer h4 { margin-bottom: 2px }
}


/* ======== ANIMATION ON PAGE LOAD ===== */

.slide-in-top {
  -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-3-20 10:33:40
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/*
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}