/*Google Font to make numbers easier to read - Playfair Display*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

@import
	url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;1,100&display=swap');

/*resize Charon logo SMALLER on front-page-1 */
.front-page-1 .wrap {
max-width: 700px;
}
/*prevent top of front page 3 from being cut-off...eliminate margins */
.front-page-3 {
	padding-top:300px;

}
/*change width of 'Our Service Tiers' */
.page-id-1332 .site-inner,
.page-id-1332 #genesis-content {
	max-width:initial;
}

/*Get rid of padding in Genesis content */
@media screen and (min-width: 1000px) {
  .page-id-1332 .site-inner .entry-content,
.page-id-1332 #genesis-content .entry-content {
padding: 80px;
}
}

/* The Charon Team - h4 adjust */
.page-id-1177 .entry-content h4 {
	margin:40px 180px 20px 180px;
}

@media screen and (max-width: 930px) {
  .page-id-1177 .entry-content h4 {
	margin:40px 10px 20px 10px;
}
}

/* Our Service Tiers styling */
.features {
line-height:1.2; 
	line-break: loose;
	}
	
/*available features */
ul.unlocked-features {
		font-weight: bold;
		margin-bottom: 0;
}	

/*locked */
ul.locked-features {
	margin-bottom: 0;
}	
/*locked features */
ul.locked-features  > li {
	opacity: 33%;
	list-style: circle;
}

/* create "features" class in custom html and call it to increase the line spacing */
.features li {
  margin-bottom: 13px;
	
}

/*Call class "tier" to define the box structure */
.tier {
	border: 0px solid black;
	background-color: lightgray;
	border-radius:10px;
	padding-right: 5px;
	margin-bottom: 20px;
}

/*Change background color of Service Tier page */
.page-id-1332 .site-inner {
	background-color: ;
}

/*Header font to white for Our Service Tiers */
.page-id-1332 .entry-header {
	color:black;
}

/* Increase Header font-size Our Service Tiers */
.page-id-1332 .entry-title {
	font-size: 5.8rem;
}

/*Paragraph text to white Our Service Tiers */

.paragraph {
	color:black;
	max-width:700px;
	margin:0 auto;
	font-size:28px;
}

/*add color to tier boxes */
#Bronze  {
	background-color:#fbf8ed;
}

#Silver {
	background-color:#fbf8ed;
} 

#Gold {
	background-color:#fbf8ed;
}


#Platinum  {
	background-color:#fbf8ed;
}


/*target and personalize each tier */
#Bronze h3 {
	text-align: center;
	border-bottom:12px solid #d8f7c9;
}

#Silver h3 {
	text-align: center;
	border-bottom:12px solid #e6e6e6;
}

#Gold h3 {
	text-align: center;
	border-bottom:12px solid #ffd100;
}

#Platinum h3 {
	text-align: center;
	border-bottom:12px solid #eab8fe; 
}

/* 2-column paragraphs */
.two-columns {
	column-count:2;
	margin: 0 auto;
	max-width: 900px;
}

/* 1-column paragraphs */
.one-column {
	column-count:1;
	margin: 0 auto;
	max-width:900px;
	
}

@media only screen and (max-width: 600px) {
	.two-columns {
		column-count:1;
		margin:0 25px;
	}
}

/*Change button color for 'Our Service Tiers' Page */
.content .wp-block-button .wp-block-button__link {
	background-color:#02B5AE;
}


/*fine-tune CTA button homepage */

#header-cta {
	width:175px;
	float:right;
	margin-bottom: 4px;
	margin-top: 3px;
	min-height: 65px;
	position:relative;
	text-align:center;
	
	
}

#header-cta button {
	border-radius:5px;
	position:absolute;
	top:25%;
	width:100%;
	left:0;
	background-color:#fc851e;
}


/* borrow front-page css from Infinity */

.key-services .content-box {
	text-align:center;
	padding: 50px 40px 60px;
	margin-bottom:2.564102564102564vw;
}

.key-services .solid-section .content-box {
	background-color: #f5f5f5;
}

.key-services .content-box h4 {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.key-services .content-box p {
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.625;
	margin-bottom: 0;
}


.key-services .content-box .icon {
	font-size: 30px;
}


/* Get all tabs in one row on top navigation bar */
.nav-primary {
  width: 70%;
  padding-top: 20px
}

/*Top ribbon - increase font size*/
.genesis-nav-menu a {
	font-size:1.2rem;
}

/*edit Key Services page */

div.key-services.alignfull {
	padding: 100px 100px;
}

/*adjust sizing on 'Contact Us' */
.is-layout-constrained  {
	color: #000000;
background-color: #edebe5;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 7vw;
padding-left: 25vw;
padding-top:0vw;
padding-right: 15vw;
}

/*Color full page 'Contact Us' */
body.page-template-default.page.page-id-2133 {
	background-color: #edebe5;
}  

/* animated gradient ribbon on 'Contact us' */
.Contact-us-ribbon {
	color:transparent;
background: linear-gradient(270deg, #fda936, #bdbcba, #008592, #02c9dd);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 29s ease infinite;
    -moz-animation: AnimationName 29s ease infinite;
    animation: AnimationName 29s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
} 

/*Contact Us Submit Button */
.wpforms-submit .Contact-us-button {
	background: #476178;
}

/***********************************/
/*bullet points and css rules for team_title on 'The Charon Team' */

ul.team-info li {
/* 	list-style: circle inside; */
		list-style: none; /* Remove default bullets */
	text-align: center;
	/*margin-left: 85px;*/
	color:#6e6e6e;
}

/* add custom bullet */
ul.team-info li::before {
  content: "\25E6";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #fc851e; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
	list-style: circle;
}
/***********************************/

#team-education  {
	text-align:left;
	margin-left:35px;
	font-size:20px;
}

#team-skills {
	text-align:left;
	margin-left:35px;
		font-size:20px;
}

#team-personality {
	text-align: left;
	margin-left:35px;
		font-size:20px;
}

/* 
/*Resize - Charon Team heading */
/* .charon-team-heading { */
/* 	padding: 30px 200px 30px 200px; */
/* } */
/*  */
	 
/*Remove padding 'Contact Us' - !important trick */
.contact-us-form {
	padding-top:3vh!important;
}

div.wpforms-container-full .wpforms-form button[type="submit"] {
	background-color: #fc851e;
	border-radius:6px;
	border-color: #fc479e;
	border: 0px solid #fc479e; 
	color: white;
}

div.nf-form-content 
input[type="button"] {
		background-color: #fc851e;
	border-radius:6px;
	border-color: #fc479e;
	border: 0px solid #fc479e; 
	color: white;
}

/******************************/
/*Full-width override for all pages/posts */

.page-id-2541 .site-inner,
.page-id-2541.full-width-content .content {
	max-width: 100%;
}


.page-id-2541 .content {
	padding:80px 0;
}

@media screen and (max-width:700px) {
	.page-id-2541 .content {
		padding-top: 0;
	}
}

/*Site Footer Copyright */
.site-footer p {
	line-height: 1.5;
}

/*Data Entry Dashboard - Align all buttons */

.page-id-4259 .entry-content {
	margin-left:30%;

}

/****************************************/
/**** New KEY SERVICES Page */

/*define parent*/
.title-box-container {
	position:relative;
	display: flex;
  padding-top: 100px;
  margin-top: -80px;
  margin-bottom: 100px;
		
}

/*flex for small screens*/
        @media screen and (max-width: 900px) {
  .title-box-container,
	.title-box-container .key-service-body {   
   flex-direction: column;
	 margin-top: 1px;
	 border-radius: 5px;
   }
	.title-box-container .key-service-body .bullet-spacing {
		padding-top:80px;
    padding-bottom: 125px;
   }
	.title-box-container .key-service-title {
					transform: translate(-50%, -88%)	
	}
}


/*define child*/
.key-service-title {
	border-width:1px;
	border-color: rgb(220,220,220);
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translate(-50%, -25%);
	padding:10px;
	text-align:center;
	width:400px;
	height:200px;
	background: rgb(191,255,227);
	background: linear-gradient(110deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%);
/* 	background: linear-gradient(17deg, rgba(191,255,227,1) 0%, rgba(216,242,248,1) 26%, rgba(216,242,248,1) 71%, rgba(191,255,227,1) 100%); */
	border-radius:5px;
	box-shadow: inset 0 1px 1px 0 hsla(0,0%,100%,.5),0 50px 100px -20px rgba(50,50,93,.5),0 30px 30px -30px rgba(0,0,0,.5)
} 

/*split columns - set image to 50% for small screens */
.key-service-img {
	flex: 50%;
}

.key-service-img img {
	width: 100%;
}

/*Google font for key-service-title*/
.key-service-title h2 {
	  font-family: 'Raleway';
  font-weight: 300;
}

/*Personalize Ion Icons */
.key-service-title span {
	padding: 25px 0;
	font-size: 60px;
	color:#ff9c15;
/* 		color:#3c8c9f; */
/* 	color:#e042c3; */
/* 	color:#fd4bdd;  */
	/*color:#c67594;*/
}


.key-service-title:hover {
	/* Add override styling here if you want a hover effect. */
}

/* position bullet list */
.title-box-container .bullet-spacing  {
	flex: 50%;
	padding-top: 180px;
	padding-left: 38px;
	text-align:center;
	font-family: 'Raleway';
	font-weight:200;
	font-weight:300;
	font-size:31px;
}

/*Gradients: default right-facing gradient for container*/

/*Default - 1st, 3rd, 5th, 7th service*/
.title-box-container .key-service-body {
	display: flex;	
/* background: rgb(71,97,120);
background: linear-gradient(151deg, rgba(71,97,120,1) 0%, rgba(99,122,143,1) 58%, rgba(112,137,161,1) 86%, rgba(140,173,203,1) 97%, rgba(157,184,207,1) 100%); */
	
/* background: rgb(71,97,120);
background: linear-gradient(151deg, rgba(71,97,120,1) 0%, rgba(99,122,143,1) 58%, rgba(112,137,161,1) 86%, rgba(140,173,203,1) 96%, rgba(210,226,241,1) 100%); */
	
background: rgb(71,97,120);
background: linear-gradient(151deg, rgba(71,97,120,1) 0%, rgba(99,122,143,1) 58%, rgba(129,153,177,1) 88%, rgba(140,173,203,1) 94%, rgba(224,236,247,1) 100%);
}

/*********/
/*Hiring*/
#key-service-hiring .key-service-body {
	display:flex;
background: rgb(157,184,207);
background: linear-gradient(30deg, rgba(157,184,207,1) 0%, rgba(140,173,203,1) 3%, rgba(112,137,161,1) 14%, rgba(99,122,143,1) 42%, rgba(71,97,120,1) 100%);
}

/*********/
/*Scheduling*/
#key-service-scheduling .key-service-body {
	display:flex;
background: rgb(157,184,207);
background: linear-gradient(30deg, rgba(157,184,207,1) 0%, rgba(140,173,203,1) 3%, rgba(112,137,161,1) 14%, rgba(99,122,143,1) 42%, rgba(71,97,120,1) 100%);
}

/*********/
/*Workers Comp*/
#key-service-workmans .key-service-body {
	display:flex;
background: rgb(157,184,207);
background: linear-gradient(30deg, rgba(157,184,207,1) 0%, rgba(140,173,203,1) 3%, rgba(112,137,161,1) 14%, rgba(99,122,143,1) 42%, rgba(71,97,120,1) 100%);
}

/********/
/*Direct Assistance*/
#key-service-assistance .key-service-body {
	display:flex;
background: rgb(157,184,207);
background: linear-gradient(30deg, rgba(157,184,207,1) 0%, rgba(140,173,203,1) 3%, rgba(112,137,161,1) 14%, rgba(99,122,143,1) 42%, rgba(71,97,120,1) 100%);
}

/********/
/*Bullet Spacing*/
.title-box-container .bullet-spacing ul {
	display: inline-block;
	text-align: left;
	margin-left: -40px;
}

/*Key Services - add padding */
.page-id-2541 h1.entry-title {
	display: none;
	margin-bottom:5px;
}

/******************************/
/*Gradient on floating box, aka,'key-service-title'*/

/*Benefits*/
#key-service-benefits .key-service-title {
	background: rgb(191,255,227);
	background: linear-gradient(80deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%);
}

/************/
/*Hiring*/
#key-service-hiring .key-service-title {
	background: rgb(191,255,227);
	background: linear-gradient(75deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%);
}

/************/
/*Onboarding*/
#key-service-onboarding .key-service-title {
 	background: rgb(191,255,227);
	background: linear-gradient(100deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%);
}

/**********/
/*Scheduling*/
#key-service-scheduling .key-service-title {
 background: rgb(191,255,227);
 background: linear-gradient(70deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%); 
}

/************/
/*Workers' Comp*/
#key-service-workmans .key-service-title {
 	background: rgb(191,255,227);
	background: linear-gradient(65deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%);
}

/*********/
/*Uniforms*/
#key-service-uniforms .key-service-title {
 background: rgb(191,255,227);
 background: linear-gradient(130deg, rgba(0,193,169,1) 0%, rgba(50,147,168,1) 26%, rgba(50,147,168,1) 71%, rgba(0,193,169,1) 100%); 
}


/************/
/*CTA Text for header*/
#key-service-header h2 {
		  font-family: 'Raleway';
  font-weight: 700;
	color: #2a2a2a;
	text-align:left;
	margin-top:-30px;
	padding-right:10px;
	padding-left:75px;
	padding-top:20px;
	flex:50%;
	line-height:140%;
	margin-bottom:140px;
}

@media screen and (max-width: 700px) {
	#key-service-header h2 {
		padding-left: 5px;
	}
}

/*Header CTA - make background white*/

#key-service-header {
	background:transparent;
}




/******************************/
/*Bottom ribbon of icons*/

#key-service-ribbon {
background:transparent;   
	padding-top: 1px;
}

#key-service-ribbon-2 {
background:transparent;   
}

/*adjust floating box */
#charon-footer {
	padding:10px;
	margin: 0 auto;
	text-align:center;
	width:700px;
	height:365px;
	border-radius:5px;
	box-shadow: inset 0 1px 1px 0 hsla(0,0%,100%,.1),0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3);
background: linear-gradient(270deg, #defaf2, #d5faff, #defaf2, #c1ffed);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 49s ease infinite;
    -moz-animation: AnimationName 49s ease infinite;
    animation: AnimationName 49s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@media screen and (max-width:700px){
	#charon-footer {
		width:400px;
		height:100%;
	}
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 39%}
    50%{background-position:100% 62%}
    100%{background-position:0% 39%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 39%}
    50%{background-position:100% 62%}
    100%{background-position:0% 39%}
}
@keyframes AnimationName {
    0%{background-position:0% 39%}
    50%{background-position:100% 62%}
    100%{background-position:0% 39%}
}


.ribbon-icons {
	font-size: 60px;
	text-align:center;
	color:#ff9c15;
	width:85%;
	margin:100px auto 0;
	padding-top: 100px;
}

/*font*/
#charon-footer p {
	text-align:center;
	font-style: italic;
	font-size:28px;
}

#charon-footer  h2 {
	font-family: 'Cormorant Garamond', serif;
	font-size: 48px;
	font-size: 4.8rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/******************/
/*bullet point for key-services - add color */
div.bullet-spacing ul li {
/* 	list-style: circle inside; */
		list-style: none;  /*Remove default bullets*/
	text-align: left;
/* 	margin-left: 85px; */
	/*text color*/
	color:#f5deb3; 
}

/******/
/* add custom bullet */
div.bullet-spacing ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #fc851e; /* Change the color old = #fc851e */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
	list-style: circle;
}

/*******************/
/* one-ninth rule for ion icons */

.one-eighth {
	width: 10.25641025641026%;
}

.one-ninth {
	width:8.831908831908832%;
}

.one-eighth,
.one-ninth {
	float: left;
	margin-left: 2.564102564102564%;
}

.one-eighth.first,
.one-ninth.first {
		margin-left: 0;
}

@media screen and (max-width: 700px) {
	.one-eighth {
		width: 23.076923076923077%; /* convert to one-fourth */
	}
	.first-one-fourth {
		margin-left: 0;
	}
}

/*link scroll test */
#link-scroll-payroll { 
	margin-bottom:230px;
}
#link-scroll-marketing {
	margin-bottom:270px;
	padding-top:5px;
}
#link-scroll-benefits,
#link-scroll-hiring,
#link-scroll-onboarding,
#link-scroll-scheduling,
#link-scroll-workmans,
#link-scroll-assistance,
#link-scroll-recruiting,
#link-scroll-footer {
	margin-bottom:230px;
}
/* 
.ribbon-icons a {
		color:#ff7c06;
} */

/***********************/
/*Key Services: adjust 2-column style*/

div.one-column {
	border-width: 1px;
	border-color: rgba(220,220,220,0.6);
	font-family: Raleway;
	font-size: 2.1rem;
	font-weight:300;
	text-wrap:all;
	padding:30px;
	background: rgba(255,255,255,0.6);
	border-radius: 5px;
box-shadow: inset 0 1px 1px 0 hsla(0,0%,100%,.1),0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3);
}

/* footer: add text below ion icons */
.ribbon-icons p {
	font-family: Raleway;
	font-weight:400;
	font-size: 0.2em;
	margin-top: -25px;
}

/*create moving logo */

/* 
div.animation-logo {
	margin-right:10%;
	animation-name: logo;
  animation-duration: 4s;
	animation-timing-function: ease-in-out;
}
@keyframes logo {
	from {top:0px;}
	to {top:300px;}
} */

/*********/
/*scroll gradient change */
/* div.entry-content  */
/*  body.page-id-2541{
	height: 9191.02px;
background: linear-gradient(69deg, 
#f7f0fb 3%,
#ffd0fa 10%,
#fffff2 27%, 
#f6e5fe 41%, 
#faf3ff 74%,
#ffd5ee 77%,
#fffff1 81%, 
#ffffff 100%)
} */ 

/**Add Padding to All Key Services **/

#all-key-services {
	padding: 0 75px;
}