/* $Id: resumeservice.css 912 2019-05-21 18:38:31Z chrisl $ */


h2 {
	margin-bottom: 1.5rem;
}
h2:not(:first-child) {
	margin-top: 3rem;
}


/***		Utility Classes	****/

@media (max-width: 767px) {
	.no-center-sm {
		text-align: left !important;	
	}
}

.font-light-gray {
	color: #CCC;
}


/***		Intro section	****/

#logo-img {
	margin-bottom: 1rem;
}
#questionBox {
	margin: 15px 0 20px 0;
	padding: 10px 0;
}
#questionBox H3 {
	margin-top: 0;
	margin-bottom: 5px;
}

#questionBox H4 {
	font-weight: bold;
}


/***		bootstrap 5 grid	****/

.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths,
.col-xl-5ths {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.col-sm-5ths {
	width: 20%;
	float: left;
}
@media (min-width: 768px) {
	.col-md-5ths {
		width: 20%;
		float: left;
	}
}
@media (min-width: 992px) {
	.col-lg-5ths {
		width: 20%;
		float: left;
	}
}
@media (min-width: 1200px) {
	.col-xl-5ths {
		width: 20%;
		float: left;
	}
}


/***		How It Works		****/

#HowItWorksContainer {
	margin-bottom: 4rem;	
}

#HowItWorksContainer .step {
	padding-top: 10px;
	height: 140px;	
}
@media( max-width:991px) {
	#HowItWorksContainer .step {
		height:180px;
	}	
}

#HowItWorksContainer .step:not(:first-of-type) {
	border-left:3px white solid;	
}

.howItWorks {			
	position: relative;
	margin-left:auto;
	margin-right:auto;
	padding-right: 5px;
	-webkit-box-align:center;
	-webkit-box-pack:center;
	display:-webkit-box;
}
.howItWorks .numberArrow {
	display: block;
	background-color: #FFFFFF;
	color: #04a6e1;
	padding: 7px 5px 5px 5px;
	position: relative;
	left: -12px;
	float: left;
	width: 55px;
	height: 64px;
	text-align: center;
	font-size:35px;
	font-weight:bold;
	z-index:999
}
.howItWorks .numberArrow:after {
	left: 100%;
	top: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #FFFFFF;
	border-width: 32px 0 32px 10px;
}

.howItWorks .innerArrow {
	display: block;
	background-color: #dfdfdf;
	padding: 7px 5px 5px 5px;
	position: relative;
	left: -12px;
	float: left;
	width: 15px;
	height: 64px;
	text-align: center;
	font-size:35px;	
	z-index:888
}
.howItWorks .innerArrow:after {
	left: 100%;
	top: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #dfdfdf;
	border-width: 32px 0 32px 10px;
}
.howItWorks .outerArrow {
	display: block;
	background-color: #e6e6e6;
	padding: 7px 5px 5px 5px;
	position: relative;
	left: -12px;
	float: left;
	width: 10px;
	height: 64px;
	text-align: center;
	font-size:35px;	
}
.howItWorks .outerArrow:after {
	left: 100%;
	top: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #e6e6e6;
	border-width: 32px 0 32px 10px;
}

.CheckMarkCircle {
	width:66px;
	height:66px;
	border-radius:33px;
	background:#04a6e1;
	margin-left:auto;
	margin-right:auto;
	color:#FFF;
	padding-top:12px;
}

#HowItWorksContainer .step .text-center {
	color: #888;
	font-size: 16px;
}


/***		Package Cards		****/

.card {
	border: none;
	background-color: transparent;
}

.card h3 {
	margin-top: 1rem;
	color: #04a6e1;
}

.card .price {
	margin-top: .75rem;
	color: #04a6e1;
	font-size: 2.5rem;
}
.card small {
	font-size: 1rem;
}

.front, .back {
	background-color: #fff;
}

.back strong {
	color: #04a6e1;
}

.back .row .text-left P {
	line-height:16px;
	margin-top:10px;
	margin-bottom:10px;
}

.panel-button {
	margin-top: 8px;
	margin-bottom: 10px;
	background-color: #fff;
	padding: 20px;
	font-size: .75rem;
	text-transform: uppercase;
}
.panel-button.flipped {
	background : #04a6e1;
	color:#FFF;	
}
.panel-button A {
	text-decoration: none !important;
}
.panel-button.flipped A {
	color:#FFF !important;
}

.position-bottom > DIV {
	margin-top:20px;	
}

@media(max-width:991px){
	.no-center-sm {
		text-align:left !important;	
	}
	.panel-button {
		margin-bottom:50px;	
	}
	.front, .back {
		min-height:230px;
	}
}

@media(min-width:992px){
	#ResumePackagesRow,
	#CVPackagesRow {
		height : 455px;	
	}			
	#ResumePackagesRow .col-lg-4,
	#CVPackagesRow .col-lg-4 {
		height:375px;
	}
	.position-bottom{
		position:absolute;
		bottom:  30px;
	}
}

.white-panel {
	background-color:white;	
	padding:20px;
}

@media(min-width:991px){
	.card {
		height:100%;
	}
	.white-panel {
		height:100%;
	}
	.white-panel > .row {
		height:100%;	
	}
}

@media(max-width:767px){
	.white-panel {
		height:350px;
	}
	.position-bottom{
		position:absolute;
		bottom:  15px;
	}
}
	

/***		Popular Tag		****/

#DataCard2 .front .white-panel .popular_arrow {
	display: block;				/* the script has be able to change this */
}
#DataCard2 .front .white-panel .popular_arrow {
	display: block !important;	/* must always override the script */
}

#DataCard2 .front .white-panel .popular_arrow {
	display: none;
	top: 0px;
	left:  0px;
	position: absolute;
	background-color: #f0ab00;
	width:100px;
	height: 20px;
	margin: 0;
	padding: 2px 0 0 0;
	z-index: 1001;
}
#DataCard2 .front .white-panel .popular_arrow:after {
	top: 100%;
	left: 0;
	content: " ";
	position: absolute;
	pointer-events: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 50px 0 50px;
	border-color: #f0ab00 transparent transparent transparent;
	z-index: 1001;
}


/***		Package Cards		****/

.test_quote {
	font-size: 18px;
	color: #04a6e1;
}