/* ==== 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: 'Lato', sans-serif }


/*===================== 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
	}

	/* 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: #500294;
		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: #500294; box-shadow: 0px 1px 10px #888 }
	.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:#500294;
	}

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

	/*== Light desktop menu == */
	.menu-desktop-light { background-color: #fff; box-shadow: 0px 1px 10px #888 }
	.menu-desktop-light .item-menu ul li a { color: #500294 }

	.menu-desktop-light .item-menu ul li a.btn-solid { 
		background-color: #500294; border-color: #500294; 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: #500294;
	}

}


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

.page-wrapper { padding-bottom: 10% }

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

.page-wrapper h1 { font-size: calc(36px + (72 - 36) * ((100vw - 320px)/(1600 - 320))) }
.page-wrapper h2 { font-size: calc(28px + (42 - 28) * ((100vw - 320px)/(1600 - 320))); color: #500294 }
.page-wrapper h3 { font-size: calc(18px + (28 - 18) * ((100vw - 320px)/(1600 - 320))); color: #500294 }

.page-wrapper p, 
.page-wrapper li { font-size: calc(15px + (20 - 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 #500294;
	color:#500294;
}

.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 }
	.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 }
	.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 }
}