/* @override 
	https://jamesandjamesf.staging.wpengine.com/wp-content/themes/James%20and%20James/style.css?* */

/*
Theme Name: James and James
Description: Running off Flatsome Framework
Author: MFMS
Template: flatsome
Version: 1.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/***    Header   ***************/

header .nav-tabs>li>a {
    border: 0;
	background: none;
	color: #fff;
	font-size: .875rem;
	padding-top: 2px !important;
	padding-bottom: 1px !important;
}

a.request-quote {
	font-weight: 700;
	font-size: 1.125em;
}

.header-language-dropdown a {
	padding-left: 30px !important;
}

.header-language-dropdown ul a {
	padding-left: 0 !important;
}

.header-language-dropdown .nav-dropdown li a {
	font-size: 14px;
	color: #000 !important;
	font-weight: 400;
}

.header-language-dropdown .icon-angle-down {
    font-size: 18px;
	margin-left: 10px;
    height: 20px;
    opacity: 1
}

.nav-small .image-icon {
    width: 16px;
    height: 16px;
	margin: 0 5px;
	position: absolute;
	top: 7px;
	left: 0;
}

.nav-dropdown {
    padding: 0;
	min-width: 120px;
}

.nav-vertical li.divider:after {
    content: "";
	display: block;
	margin-bottom: 15px;
}

/***    Footer   ***************/

footer .col-inner p:last-child {
	margin-bottom: 0;
}

footer .tier a {
	color: inherit;
}

footer .section.dark {
	background: #555;
	color: #fff;
}

footer .tier p {
	color: inherit;
}

footer .tier hr {
	opacity: 1;
	margin: -10px 0 10px;
	border-top-width: 3px;
	border-style: solid;
}

footer .tier-1 hr {
	border-color: #83bc00;
	
}

footer .tier-2 hr {
	border-color: #ccc;
}

.absolute-footer {
	display: none;
}

/***    Contact form modal    *********/
.contact-form__modal-background {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(55,55,55,0.6);
	opacity: 1;
	z-index: 1044;
	width: 100%;
	height: 100vh;
	visibility: hidden;
	opacity: 0;
}
.contact-form__modal {
	z-index: 1045;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	width: 90%;
	max-width: 560px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 15px 26px 0px rgba(0,0,0,0.25); 
	box-shadow: 0px 15px 26px 0px rgba(0,0,0,0.25);
	/* Below sets the height of the modal window in relation to the viewport size i.e. 64% of the height */
	/* If you change the form length/size you can change the below to accommodate it */
	height: fit-content;
	vertical-align: middle;
	/* To center the modal (pop-up) window in the viewport, the margin should be the remainder of the height value divided by 2 */
	/* For example the height is set to 64vh originally, so the margin is 18vh i.e. 100-64 = 36 / 2 = 18vh  */
	margin: 13vh auto;
	padding-top: 25px;
	padding-bottom: 25px;
	display: block;
}
.is-visible {
	opacity: 1;
	visibility: visible;
}
.contact-form__modal-close {
	position: absolute;
	top: -19px;
	right: -19px;
	height: 32px;
	width: 40px;
	margin: 0;
	padding: 0;
	border: 4px solid #fff;
	border-radius: 50% !important;
	background-color: #000;
	margin: 0 !important;
	padding: 4px !important;
	font-size: 1em !important;
}
.contact-form__modal-close:before,
.contact-form__modal-close:after {
  position: absolute;
  left: 14px;
  bottom: 4px;
  content: ' ';
  height: 24px;
  width: 4px;
  background-color: #fff;
}
.contact-form__modal-close:before {
  transform: rotate(45deg);
}
.contact-form__modal-close:after {
  transform: rotate(-45deg);
}
.contact-form__modal-scrollable{
	display: block;
	height: 100%;
	overflow-y: auto;
}
.contact-form__flex {
	display: flex;
	flex-wrap: wrap;
	flex-flow: row wrap;
	padding: 10px;
	align-items: start;
	justify-content: center;
}
.contact-form__child {
	width: 90%;
	margin: 0;
	padding:0;
}
.contact-form__logo {
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
}
.contact-form__content {
	padding: 4px 24px;
}
.contact-form__content p {
	color: #fff;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-weight: 300;
	margin: 0;
	margin-bottom: 8px;
	padding: 0;
}
.contact-form__form {
	padding: 1px;
}
.contact-form__call-button {
	display: none;
}
.contact-form__note {
	display: block;
	color: #fff;
	font-size: 12px;
	text-align: center;
	width: 100%;
	padding: 0 16px;
}
.contact-form__note p {
	margin: 0;
	padding: 0;
}
@media (max-width: 849px) {

}
@media (max-width: 600px) {

}
@media (max-width: 460px) {
	.contact-form__modal {
		/* Below sets the height of the modal window in relation to the viewport size i.e. 64% of the height */
		/* If you change the form length/size you can change the below to accommodate it */
		height: 90vh;
		/* To center the modal (pop-up) window in the viewport, the margin should be the remainder of the height value divided by 2 */
		/* For example the height is set to 64vh originally, so the margin is 18vh i.e. 100-64 = 36 / 2 = 18vh  */
		margin: 5vh auto;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.contact-form__modal-close {
		right: -8px;
	}
	.contact-form__flex {
		flex-flow: column wrap;
	}
	.contact-form__child {
		width: 100%;
	}
	.contact-form__content {
		display: none;
	}
	.sharpspring-form #submit-button {
		width: 100%;
	}
	.contact-form__call-button {
		display: block;
		width: 100%;
		padding: 0 16px;
		margin: 0;
	}
	.contact-form__call-button a {
		font-weight: bold;
		font-family: 'Lato', Helvetica, Arial, sans-serif;
		width: 100%;
		text-align: center;
		margin: 0;
		margin-bottom: 4px;
		padding: 2px 8px;
		line-height: 2;
	}
}
@media (max-width: 320px) {
	.contact-form__call-button a {
		line-height: 1.5;
	}
}

/***    Fonts   ***************/

h2.alt-font {
	font-size: 2.25em;
    line-height: 1.1
}

.content-area h3 {
	font-size: 1.75em;
	line-height: 1.1em;
}

.content-area h4 {
	font-size: 1.25em;
}

h3 {
    margin-bottom: 5px;
}

.dark,
.dark p,
.dark td {
    color: #fff
}

/***    General   ***************/

.col,
.gallery-item,
.columns {
    position: relative;
    margin: 0;
    padding: 0 20px 30px;
    width: 100%;
	overflow: visible;
}

.dashed .is-divider {
	background: none;	
	background-image: url("images/dashed-line.png");
	background-repeat: repeat-x;
}

blockquote {
    font-style: normal;
    color: #000;
	font-weight: 700;
	padding: 0;
	margin: 0;
	border: 0;
	margin-bottom: 20px;
}

blockquote p {
	background-color: rgba(0,0,0, 1);
	box-shadow: 10px 0 0 rgba(0,0,0, 1), -10px 0 0 rgba(0,0,0, 1);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	padding: 5px 0;
	line-height: 2;
	color: #fff;
}

blockquote p:before,
blockquote p:after {
	content: "";
	background-image: url("images/quote-mark.svg");
	display: inline-block;
	width: 20px;
	height: 16px;
	vertical-align: -1px;
}

blockquote p:before {
	margin-right: 7px;
}

blockquote p:after {
	transform: rotate(180deg);
	margin-left: 7px;
}

#content a,
main#main span.rTapNumber354995 {
	font-weight: 700;
	border-bottom: 2px solid #e03189;
}

#content .post-sidebar a,
#content #nav-below a,
#content .entry-meta a {
	border: none;
	color: inherit;
	font-weight: 300;
}

#content .social-icons a,
#content .nav-pagination a {
	border-color: inherit;
}

main#main span.rTapNumber354995 {
	color: #e03189;
}

.ux-logo-link {
	padding: 0 !important;
}

.feature.s1 {
	position: relative;
	display: flex;
}

.feature.s1 h3 {
	font-size: 1.5em;
	margin-bottom: 10px;
}

.feature.s1 > .col-inner {
	background-color: #f2f3f4;
	padding: 20px;
	border-radius: 8px;
	position: relative;
	padding-top: 60px;
}

.feature.s1 .img {
	position: absolute;
	top: -45px;
	left: 20px;
	display: block;
	margin: 0;
	width: 100% !important;
	max-width: 90px
}

.feature.s1 p:last-child {
	margin-bottom: 0;
}

.button.secondary span {
	color: #000;
}

.button.secondary:hover span {
	color: #fff;
}

.page-title nav#breadcrumbs,
.page-title nav#breadcrumbs a {
	font-weight: 400;
	color: #000;
	border: none;
	font-size: .875rem;
}

.page-title h1 {
	font-family: "Lusitana", serif;
	position: relative;
	font-size: 2.75em;
	display: inline-block;
	line-height: 1.1;
}

.page-title h1 span {
	background: url('images/title-underline-1.svg') repeat-x center bottom;
}

/***    Image Styling   ***************/

.frame.img .img-inner {
    overflow: visible
}

.frame.img div:after {
	content: "";
	display: block;
	position: absolute;
}


.frame.landscape div:after {
	height: calc(100% + 40px);
	left: 0;
	top: -20px;
	right: 0;
	bottom: -20px;
}

.frame.landscape.aqua div:after,
.frame.landscape.aqua.v1 div:after {
	background: url('images/frame-landscape-aqua-1.svg') no-repeat center;
	background-size: 99%;
}

.frame.landscape.green div:after,
.frame.landscape.green.v1 div:after {
	background: url('images/frame-landscape-green-1.svg') no-repeat center;
	background-size: 99%;
}

.frame.landscape.pink div:after,
.frame.landscape.pink.v1 div:after {
	background: url('images/frame-landscape-pink-1.svg') no-repeat center;
	background-size: 99%;
}

.frame.landscape.aqua.v2 div:after {
	background: url('images/frame-landscape-aqua-2.svg') no-repeat center;
	background-size: 99%;
}

.frame.landscape.green.v2 div:after {
	background: url('images/frame-landscape-green-2.svg') no-repeat center;
	background-size: 99%;
}

.frame.landscape.pink.v2 div:after {
	background: url('images/frame-landscape-pink-2.svg') no-repeat center;
	background-size: 99%;
}

.frame.circular div:after {
	height: calc(100% + 30px);
	left: -15px;
	top: -15px;
	right: -15px;
	bottom: -15px;
}

.frame.circular.green div:after,
.frame.circular.green.v1 div:after {
	background: url('images/frame-circle-green-1.svg') no-repeat center;
	background-size: 100%;
}

.frame.circular.aqua div:after,
.frame.circular.aqua.v1 div:after {
	background: url('images/frame-circle-aqua-1.svg') no-repeat center;
	background-size: 100%;
}

.frame.circular.pink div:after,
.frame.circular.pink.v1 div:after {
	background: url('images/frame-circle-pink-1.svg') no-repeat center;
	background-size: 100%;
}

.frame.circular.green.v2 div:after {
	background: url('images/frame-circle-green-2.svg') no-repeat center;
	background-size: 100%;
}

.frame.circular.aqua.v2 div:after {
	background: url('images/frame-circle-aqua-2.svg') no-repeat center;
	background-size: 100%;
}

.frame.circular.pink.v2 div:after {
	background: url('images/frame-circle-pink-2.svg') no-repeat center;
	background-size: 100%;
}

.marker.green.v1 {
	background: url('images/marker-scribble-1-green.svg') no-repeat center;
	background-size: 100%;
}

.marker.green.v2 {
	background: url('images/marker-scribble-2-green.svg') no-repeat center;
	background-size: 100%;
}

.marker.aqua.v1 {
	background: url('images/marker-scribble-1-aqua.svg') no-repeat center;
	background-size: 100%;
}

.marker.aqua.v2 {
	background: url('images/marker-scribble-2-aqua.svg') no-repeat center;
	background-size: 100%;
}

.marker.pink.v1 {
	background: url('images/marker-scribble-1-pink.svg') no-repeat center;
	background-size: 100%;
}

.marker.pink.v2 {
	background: url('images/marker-scribble-2-pink.svg') no-repeat center;
	background-size: 100%;
}

/*
.content-area ul li {
	list-style-type: none;
	margin: 0;
	position: relative;
	padding-left: 20px;
}

.content-area ul li:before {
	content: "";
	background: url('images/bullet-green.svg') no-repeat center center;
	background-size: 100%;
	width: 10px;
	height: 10px;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4px;
	
}
*/

.col-inner>.img:not(:last-child),
.col>.img:not(:last-child) {
    margin-bottom: 18px
}

/***    Home   ***************/

.awards-4col .ux-logo {
	width: 500px !important;
}

/***    Sliders   ***************/

.pane.s1 .row {
	margin: 0;
	overflow: visible;
	padding-top: 60px;
}

.pane.s1 .panel {
	background-color: #f2f3f4;
	padding: 0 20px 10px;
	border-radius: 8px;
	position: relative;
}

.pane.s1 .img {
	position: absolute;
	top: -110px;
	left: 0;
	display: block;
	margin: 0;
	width: 80px !important;
	z-index: 1;
}

.slider-nav-outside .flickity-page-dots,
.row-slider .flickity-page-dots {
    bottom: -50px
}

/***    Blog   ***************/

.blog.st1 h5.post-title {
	font-size: 1.25em;
	margin-top: 15px;
}

.blog.st1 .post-meta {
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 15px;
}

.blog.st1 .is-divider {
	display: none;
}

.blog.st1 .from_the_blog_excerpt {
	font-weight: 300;
	font-size: 1.125em;
}

.button,
button,
input[type='submit'],
input[type='reset'],
input[type='button'] {
	padding: 0 2em;
}

.cta.contact .name-title {
	position: absolute;
	padding: 5px;
}

/***    Carousels   ***************/

.carousel .number {
	padding: 0;
	max-width: 70px;
}

.carousel.s1 strong {
	font-weight: 700;
	margin-bottom: 5px;
	display: block;
}

.carousel.s1 .img {
	width: 80px !important;
	margin-bottom: 15px;
}

.carousel .number p {
	font-size: 20px;
	color: #cbcbcb;
	font-weight: 700;
	line-height: 50px;
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url('images/frame-number-grey.svg') no-repeat center;
	background-size: 50px;
	margin: 0;
}

.carousel .number.current p {
	color: #000;
	background: url('images/frame-number-green.svg') no-repeat center;
	background-size: 50px;
}

.carousel .flickity-page-dots .dot {
	font-size: 20px;
	color: #cbcbcb;
	font-weight: 700;
	line-height: 50px;
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url('images/frame-number-grey.svg') no-repeat center;
	background-size: 50px;
	margin: 0;
	border: none;
	opacity: 1;
	margin: 0 8px;
}

.flickity-page-dots .dot.is-selected {
    background: url('images/frame-number-green.svg') no-repeat center;
    background-size: 50px;
	color: #000;
}

.carousel .flickity-page-dots {
	bottom: auto;
	top: 0;
	counter-reset: a;
}

.carousel .flickity-page-dots .dot::after {
	content: counter(a);
	counter-increment: a;
}

.milestones h5 {
	font-size: 20px;
	line-height: 1;
	margin-bottom: 80px;
	position: relative;
	padding: 10px;
}

.milestones h5 {
	background-image: url("images/marker-title-aqua-1.svg");	
	background-repeat: no-repeat;
	background-position: center;
}

.milestones .col:nth-child(2n) h5 {
	background-image: url("images/marker-title-aqua-2.svg");	
}

.milestones .col:nth-child(3n) h5 {
	background-image: url("images/marker-title-aqua-3.svg");	
}

.milestones h5:after {
	content: "";
	background: url('images/bullet-aqua.svg') no-repeat center center;
	background-size: 100%;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 50%;
	top: 80px;
	margin-top: -10px;
	margin-left: -10px;
}

.milestones .col-inner p:last-child {
	margin-bottom: 0;
}

.milestones strong {
	font-weight: 700;
	margin-bottom: 5px;
	display: inline-block;
}

.milestones .slider:before {
	content: "";
	display: block;	
	width: 100%;
	height: 2px;
	border-bottom: 2px solid #20c6b9;
	position: absolute;
	top: 80px;
}

button.slick-arrow {
	margin: 0;
}

.milestones .ctl-story-time:after {
	
}

.milestones .cool-timeline-horizontal .clt_carousel_slider ul.slick-slider .slick-list li span.icon-placeholder {
	background: none !important;
}

.milestones span.custom_story_lbl {
	font-size: 1.125em !important;
	font-weight: 700;
	padding: 10px 20px;
	background-image: url("images/marker-title-aqua-1.svg");	
	background-repeat: no-repeat;
	background-position: center;
}

.milestones .event-description {
	margin-top: -15px;
}

.milestones .slick-track {
	padding-top: 10px;
}

.milestones li {
	padding-top: 0 !important;
}

.milestones li:nth-child(2n) span.custom_story_lbl {
	background-image: url("images/marker-title-aqua-2.svg");	
}

.milestones li:nth-child(3n) span.custom_story_lbl {
	background-image: url("images/marker-title-aqua-3.svg");	
}

.milestones .ctl-story-time:after {
	background: url('images/bullet-aqua.svg') no-repeat center center !important;
}

.milestones li.slick-slide {
	text-align: center;
}

.milestones li.slick-slide p {
	font-size: 1.125em;
}

.milestones .cool-timeline-horizontal .clt_caru_slider ul.slick-slider .slick-list li.slick-slide .timeline-post {
    background: none !important;
    border: none !important;
}

.cool-timeline-horizontal h2.content-title-simple {
	color: #000;
	padding: 0 !important;
	font-weight: 700 !important;
}

.milestones li.slick-slide:after {
	border: none !important;
	height: 0;
}

.milestones .content-details p {
	color: #000;
	font-weight: 300;
}

.timeline-post h2.content-title-simple a {
	color: #000 !important;
}

.milestones ul.slick-slider .slick-list li:before {
    height: 0 !important;
}

.milestones .clt_carousel_slider ul.slick-slider .slick-list li:after {
    content: "";
    background-color: #20c6b9;
    position: absolute;
    display: block;
    height: 3px !important;
    width: 100%;
    left: 0;
    bottom: 50px !important;
}

.cool-timeline-horizontal i {
	color: #20c6b9;
}

.timeline-st1 .timeline-post {
	font-family: "Lato", sans-serif;
}

.timeline-st1 .meta-details,
.timeline-st1 h2 {
    color: #000 !important;
	font-weight: 700 !important;
}

.timeline-st1 .meta-details {
	background-image: url("images/marker-title-aqua-4.svg");	
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 !important;
	padding: 13px 15px !important;
	display: inline-block;
}

.timeline-st1 .timeline-post .timeline-icon {
    background: none !important;
    line-height: ;
    position: absolute;
    text-align: center;
    color: #fff !important;
    font-size: 18px;
    height: 40px;
    width: 40px;
    left: 50%;
    z-index: 10;
	box-shadow: none !important;
}

.timeline-st1 .timeline-post .timeline-icon i {
	display: none;
}

.timeline-st1 .timeline-post .timeline-icon:after {
	content: "";
	background: url('images/bullet-aqua.svg') no-repeat center center;
	background-size: 100%;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
	margin-left: -10px;
}

.timeline-st1 .cool-timeline:before {
    background: none !important;
	background-color: #20c6b9 !important;
}

.timeline-st1 .content-details p {
	font-size: 1.25em;
	font-weight: 300 !important;
	color: #000 !important;
}

.timeline-st1 .timeline-content.even {
	text-align: left;
}

.timeline-st1 .cool_timeline {
	margin-top: 0;
	margin-bottom: 10px;
}

/*************** ADD MOBILE ONLY CSS HERE  ***************/

@media (max-width: 849px) {
	
.title-wrapper.flex-col {
	width: auto;
}

.jjst1 .col.medium-2 {
	max-width: 33.3333%;
	-ms-flex-preferred-size: 33.3333%;
	flex-basis: 33.3333%
}

.jjst1 .col.medium-3,
.jjst2 .col.medium-3 {
	max-width: 50%;
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%
}

.jjst1 .col,
.jjst2 .col {
	padding-top: 50px;
}

.jjst1 .col:first-child,
.jjst2 .col:first-child {
	padding-top: 0;
}

footer .tier-1 img {
	max-width: 200px;
}

footer .col.medium-3 {
	margin-bottom: 20px;
}

.jj-profile .large-6 {
    max-width: 100%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 100%
}
	
}

@media (max-width: 600px) {

.jjst1 .col.medium-2 {
	max-width: 50%;
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%
}

.jjst1 .col.medium-3,
.jjst2 .col.medium-3 {
	max-width: 100%;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%
}

.our-story.st1 .col-inner {
	padding: 0 !important;
}

}

@media (max-width: 460px) {

.jjst1 .col.medium-2 {
	max-width: 100%;
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%
}

}