/* page-level globals - style content that's not in a .rcl_component	 */

.page__main {
	margin: 0 auto;
	overflow: hidden;
}

.text.parbase {
	color: #000;
	font-family: 'ProximaNova-Regular', Arial, sans-serif;
	font-size: 100%;
	text-rendering: optimizeLegibility;
}

.text.parbase a {
	color: #2B69B5;
	text-decoration: none;
}

.text.parbase a {
	color: #2B69B5;
	text-decoration: none;
}

.text.parbase p {
	margin: 1rem 0;
}

.text.parbase h1, 
.text.parbase h2 {
	font-family: 'Kapra', Impact, 'Arial Narrow', Arial, sans-serif;
}

.text.parbase h2 {
	font-size: 2.5rem;
	letter-spacing: 6px;
	line-height: .5;
	margin: 1rem 0;
}

.text.parbase h2 .text-navy { color: #223E7D; }
.text.parbase h3 .text-cerulean { color: #5D7ABC; font-size: 1.125rem; }


.text.parbase h3, 
.text.parbase h4, 
.text.parbase h5, 
.text.parbase h6 {
	font-family: 'ProximaNova-Regular', Arial, sans-serif;
}

.image.parbase img {
	display: inline-block;
	max-width: 100%; /* fit width to container */
	vertical-align: middle;
	width: 100%;
}

.horizontalRule hr {
	border: none;
	box-shadow: none;
	background-color: #9B9B9B;
	height: 1px;
}


/* text styles - selectable via drop-down in author mode fullscreen */

.text.parbase .font-block { font-family: 'Kapra', Impact, 'Arial Narrow', Arial, sans-serif; }
.text.parbase .font-normal { font-family: 'ProximaNova-Regular', Arial, sans-serif; }

.text.parbase .text-small { font-size: 1rem; }
.text.parbase .text-medium { font-size: 1.5rem; }
.text.parbase .text-large { font-size: 2rem; }

.text.parbase .text-white { color: #fff; }
.text.parbase .text-black { color: #000; }
.text.parbase .text-light-gray { color: #eee; }
.text.parbase .text-medium-gray { color: #aaa; }
.text.parbase .text-dark-gray { color: #666; }

.text.parbase .text-cerulean { color: #2B69B5; }
.text.parbase .text-navy { color: #15264C; }
.text.parbase .text-gold { color: #F9C700; }
.text.parbase .text-fuchsia { color: #E1066E; }
.text.parbase .text-lime { color: #C8F615; }
.text.parbase .text-clover { color: #008000; }
.text.parbase .text-tangerine { color: #E24624; }

.text.parbase .text-opacity-0 { opacity: 0; }
.text.parbase .text-opacity-25 { opacity: .25; }
.text.parbase .text-opacity-50 { opacity: .5; }
.text.parbase .text-opacity-75 { opacity: .75; }

.text.parbase .text-spacing-1 { letter-spacing: 3px; }
.text.parbase .text-spacing-2 { letter-spacing: 10px; }
.text.parbase .text-spacing-3 { letter-spacing: 20px; }

/* TODO - background colors need to be added to the dropdown */
/* moved these bgcolors to style.css for global use
.text.parbase .bg-cerulean { background-color: #2B69B5; }
.text.parbase .bg-navy { background-color: #1C0C45; }
.text.parbase .bg-gold { background-color: #F9C700; }
.text.parbase .bg-fuchsia { background-color: #E1066E; }
.text.parbase .bg-lime { background-color: #C8F615; }
.text.parbase .bg-clover { background-color: #008000; }
.text.parbase .bg-tangerine { background-color: #E24624; }
*/


/* globals per component */
.rcl_component {
	font-family: 'ProximaNova-Regular', Arial, sans-serif;
	box-sizing: border-box;
	line-height: 1.15; /* 2 */
	-ms-text-size-adjust: 100%; /* 3 */
	-webkit-text-size-adjust: 100%; /* 3 */
}

/* reset only for elements belonging to a custom component */
.rcl_component * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.rcl_component h1, 
.rcl_component h2, 
.rcl_component h3, 
.rcl_component h4 {
	font-family: 'Kapra', Impact, 'Arial Narrow', Arial, sans-serif;
}

.rcl_component .icon img,
.rcl_component img.icon {
	max-height: 3rem;
	width: auto;
}

.rcl_component .ib {
	display: inline-block;
}

.rcl_component .hide {
	display: none;
}

.rcl_component .active {
	display: block;
}


.rcl_component .more, 
.rcl_component .less {
	position: relative;
}

.rcl_component .more:after {
	background: url("/etc/designs/royal/icons/caret-right-small.svg") center no-repeat;
	background-size: contain;
	content: '';
	height: 1rem;
	width: 1rem;
	padding-left: 1.5rem;
}

.rcl_component .less:before {
	background: url("/etc/designs/royal/icons/caret-right-small.svg") center no-repeat;
	background-size: contain;
	content: '';
	height: 2.5rem;
	width: 2.5rem;
	position: absolute;
	transform: rotate(180deg);
}

.rcl_component .text-left, .rcl_component.text-left {
	text-align: left;
}

.rcl_component .text-center, .rcl_component.text-center {
	text-align: center;
}

.rcl_component .text-right, .rcl_component.text-right {
	text-align: right;
}

.rcl_component a {
	color: #0073bb;
	text-decoration: none;
}

/* default CTA button styles */ 
.rcl_component a.button {
	background: #1C0C45;
	color: #fff;
	display: inline-block;
	padding: 1rem 2rem;
}

.rcl_component a.button.reverse {
	background: #fff;
	color: #15264C;
}

.rcl_component ul, 
.rcl_component li {
	list-style-type: none;
}

/* utility classes to selectively show or hide something */
.rcl_component .show-for-phone,
.rcl_component .show-for-tablet {
	display: none;
}
.rcl_component .show-for-desktop {
	display: inline-block;
}
.rcl_component p.show-for-desktop,
.rcl_component div.show-for-desktop {
	display: block;
}



/* * * * * * BEGIN OVERRIDES FOR LEGACY PAGES * * * * * * */

.gdp-page .rcl_component a:hover, 
.gdp-page .rcl_component a:focus,
.legacy-page .rcl_component a:hover, 
.legacy-page .rcl_component a:focus,
.hybrid-foundation .rcl_component a:hover, 
.hybrid-foundation .rcl_component a:focus {
	color: #fff !important;
	text-decoration: none !important;
}

/* * * * * * END OVERRIDES FOR LEGACY PAGES * * * * * * */



@media only screen and (min-width: 751px) and (max-width: 1024px) {
	body.page {
		background-color: #1C0C45;
		max-height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}


	.rcl_component .show-for-desktop,
	.rcl_component p.show-for-desktop,
	.rcl_component div.show-for-desktop {
		display: none;
	}
	.rcl_component .show-for-tablet {
		display: inline-block;
	}
	.rcl_component p.show-for-tablet, 
	.rcl_component div.show-for-tablet {
		display: block;
	}
}

@media only screen and (max-width: 750px) {
	.rcl_component .show-for-desktop,
	.rcl_component p.show-for-desktop,
	.rcl_component div.show-for-desktop {
		display: none;
	}
	.rcl_component .show-for-phone {
		display: inline-block;
	}
	.rcl_component p.show-for-phone,
	.rcl_component div.show-for-phone {
		display: block;
	}
}

