/*!
Theme Name: barnes-jones-consulting
Author: Samuel Morales
Description: Theme for Barnes-jones-consulting
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Barnes-Jones-Consulting
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

	 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
	 @font-face {
		 font-family: Aurel-bold;
		 src: url('./fonts/Aurel bold.otf');
	 }
	 
	 @font-face {
		 font-family: Aurel-light;
		 src: url('./fonts/Aurel\ light.otf');
	 }
	 
	 @font-face {
		 font-family: MyriadPro-Regular;
		 src: url(./fonts/MyriadPro-Regular.otf);
	 }

	 @font-face {
		font-family: MyriadPro-Light;
		src: url(./fonts/MyriadPro-Light.otf);
	 }
	 
	 /*Global Styling*/
	 :root {
		--animate-delay: 0.5s;
	  }


	 *, *::after, *::before{
		 box-sizing: border-box;
		 margin:0;
		 padding: 0;
	 }
	
	 html{
		width: 100%;
		scroll-behavior: smooth;
	 }
	 
	 body{
		 font-size: 20px;
		 width: 100%;
	 }
	 
	 header, footer{
		 font-family: Roboto, Arial, Helvetica, sans-serif;
		 font-size: 16px;
		 font-weight: 500;
	 }

	 footer{
		font-size: 14px;
	 }
	 
	 h1, h2, h3, h4, h5, h6{
		 font-family: Aurel-bold, Roboto, Helvetica, sans-serif;
	 }
	 
	 p{
		 font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
		 font-size: 16px;
	 }

	 a{
		text-decoration: none;
	 }
	 
	 button{
		 font-family: Roboto, Arial, Helvetica, sans-serif;
		 font-size: 16px !important;
	 }

	 video{
		background-color: black;
	 }

	 section{
		scroll-margin-top: 100px;
	 }

	 section.hours-location{
		scroll-margin-top: 300px;
	 }

	 section.calendar{
		max-width: 1400px;
		margin: auto;	
	 }
	 
	 /**Header Styling**/
	 /**nav Styling**/
	 nav{
		 position:fixed;
		 z-index: 10;
		 width: 100%;
		 background-color: #12132C;
	 
	 }
	 
	 nav a{
		 color: white;
		 text-decoration: none;
		 width: 100%;
		 
	 }
	
	 nav .nav-link.active{
		color:#99C5E5;
	 }
	 
	 .nav-container{
		 width: 100%;
		 height: auto;
		 padding: .5rem;
	 }
	 
	 .logo-container{
		 width: 50px
	 }
	 
	 .logo-container img{
		 width: 100%;
	 }
	 
	 .menu {
		 display: none;
		 list-style-type: none;
		 height: 0;
		 text-align: center;
		 opacity: 0;
		 transition: all 500ms ease-in-out;
	 }
	 
	 .menu.open{
		 height: 100vh;
		 opacity: 1;
	 }
	 
	 .menu li{
		 margin: 15px 0;
		 padding: 10px;
		 width: 100%;
		 transition: all 200ms ease-in-out;
	 }
	 
	 .menu li:hover{
		 background-color: #99C5E5;
	 }
	 
	 
	 .open-menu{
		position: absolute;
		top: 25px;
		left: 85%;
		font-size: 2.5rem;
		color: white;
		cursor: pointer;
	}

	.right-side-slim{
		display: none;
	 }


	@media only screen and (min-width: 600px) {
	   .open-menu{
		   left: 92%;
	   }
	}
	 
	 .right-side{
	    margin-top: 50px;
	 }

	 
	 .right-side li img{
		 width: 18px;
		 margin-right: 10px;
	 }
	 
	 
	 @media only screen and (min-width: 1100px) {
		 .open-menu{
			 display: none;
		 }
	 
		 nav{
			 position:fixed;
			 z-index: 10;
			 width: 100%;
		 }
	 
		 .nav-container{
			width: 100%;
			max-width: 1800px;
			position: relative;
			display: flex;
			justify-content: start;
			margin: auto;
			padding: 20px 0;
			height: 120px;
			transition: all 500ms ease-in-out;
		 }
	
		 .nav-container.slim{
			height: 80px;
		 }
	 
		 .menu {
			 display: block;
			 text-align: start;
			 opacity: 1;
		 }
	 
		 .menu li:hover{
			 background-color: #12132C;
		 }
	 
		 .menu a{
			 transition: all 500ms ease-in-out;
		 }
	 
		 .menu a:hover{
			 color: #99C5E5
		 }
	 
		 .logo-container{
			 width: 10%;
			 margin-left: 50px;
		 }
	 
		 .logo-container img{
			 width: 60px;
			 transition: all 500ms ease-in-out;
		 }
	
		 .logo-container.slim img{
			width: 35px;
		 }
	 
		 .left-side li{
			 display: inline;
			 margin-left: 25px;
		 }
	 
		 .left-side{
			 margin-top: 60px;
			 transition: all 500ms ease-in-out;
		 }
	
		 .left-side.slim{
			margin-top: 20px;
		 }
	 
		 .right-side{
			 position: absolute;
			 display: grid;
			 grid-template-rows: 45px 1fr;
			 top: 5%;
			 left: 77%;
			 margin-right: 50px;
			 margin-top: 0;
			 opacity: 1;
			 transition: all 300ms ease-in-out;
		 }
	
		 .right-side.slim{
			opacity: 0;
		 }

		 .right-side-slim{
			display: none;
			position: absolute;
			top: 10%;
			left: 85%;
			width: 150px;
			transition: all 300ms ease-in-out;
			opacity: 0;
		 }

		 .nav-container.slim .right-side-slim{
			display: flex;
			opacity: 1;
		 }
	 
		 .right-side li a{
			 display: flex;
			 align-items: center;
			 justify-content: flex-end;
		 }
	 
		 .right-side li:first-child img{
			 width: 28px;
		 }
	 }

	 @media only screen and (min-width: 1000px ) and (max-width: 1300px){
		.right-side{
			display: none;
		}
	}

	 /**Hero Styling**/
 
 .hero-container{
	width: 100%;
	height: 400px;
	overflow: hidden;
	position: relative;
	padding-top: 90px;
}


@media only screen and (min-width: 600px) {
	.hero-container{
		width: 100%;
		height: 66vh;
		overflow: hidden;
		position: relative;
		padding-top: 90px;
	}

	.hero-logo.education{
		width: 60%;
		margin: auto;
	}
	
	.hero-logo.community{
		width: 60%;
		margin: auto;
	}

	.hero-text h2{
		font-size: 3.5rem !important;
	}
}

@media only screen and (min-width: 900px) and (max-width: 1100px){
	.hero-text.home{
		top: 40%;
	}

	.hero-text.home .hero-logo img{
		width: 80%;
	}
}


.hero-image{    
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/09/HOME.png');
}

.hero-image.about-us{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/09/new-about@2x.png');
}

.hero-image.community{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/COM-ENGAGEMENT.png');
}

.hero-image.education{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/09/CON-EDUCATION.png');
}

.hero-image.services{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/SERVICES.png');
}	

.hero-image.contact-page{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/09/CONTACT.png');
}

.hero-logo{
	width: 80%;
	margin: auto;
}

.hero-logo.education, .hero-logo.community{
	width: 50%;
	margin: auto;
}

.hero-logo img{
	width: 100%;
	max-width: 800px;
}

.hero-text{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -10%);
	z-index: 2;
	text-align: center;
	color: white;
}

.hero-text h2{
   font-family: Aurel-bold, Arial, Helvetica, sans-serif ;
   font-size: 1.8rem;
}

button a{
   text-decoration: none;
   color: white;
}

button.call-to-action{
	display: block;
	margin: auto;
	color: white;
	padding: .7rem 1.2rem;
	font-size: .8rem;
	font-weight: 500;
	border-radius: 25px;
	border: none;
	transition: all 500ms ease-in-out;
}

@media only screen and (min-width: 600px) {
	button.call-to-action{
		font-size: 1.2rem;
		border-radius: 25px;
		padding: .8rem 1.5rem;
	}
}

button.call-to-action a{
   transition: all 500ms ease-in-out;
}

button.call-to-action:hover{
	cursor: pointer;
	background-color: #12132C;
	color:#99C5E5;	
}

button.call-to-action:hover a{
   color:#99C5E5;	
}

button.primary{
	background-color: #9B0000;
	margin-top: 20px;
}

button.secondary{
	background-color: #99C5E5;
	margin-top: 15px;
}



@media only screen and (min-width: 1100px) {
	.hero-container{
		height: 85vh;
	}

	.hero-logo{
		width: 55%;
	}
	
	.hero-text.home, .hero-text.community, .hero-text.education{
		top: 45%;
	}

	.hero-text{
		top: 50%;
	}

	.hero-image.community{
		background-position-y: 20px;
	}

	.hero-text h2{
		font-size: 6rem !important;
	}

	button.call-to-action{
		display: inline-block;
		margin: 20px;
		padding: 1rem 2rem;
		font-weight: 500;
		border-radius: 25px;
		transition: all 500ms ease-in-out;
	}

	button.secondary.calendar{
		margin: 20px 20px 20px 0;
	}
}

/**Footer Styling**/
footer{
	width: 100%;
	background-color: #12132C;
	color: white;
	position: relative;
}

footer a{
	text-decoration: none;
	color: white; 
}

footer ul{
	list-style: none;
	line-height: 25px;
	font-size: 14px;
}

.mobile-no-display{
	display: none;
}

.desktop-no-display{
	display: block
}

.creatives-break{
	display: block;
}

.contact-list{
	margin: 15px 0;
	text-align: center;
}

.contact-list li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0;
	position: relative;
}

#location-icon{
	position: absolute;
	top: 7px;
	left: -14px;
}

.contact-list li img {
	margin-right: 5px;
}


.contact-list li img:first-child{
	width: 13px;
}

.contact-list li:nth-child(2) img{
	width: 18px;
}

footer h4{
	color: #99C5E5;
	font-size: 20px;
	margin-bottom: 15px;
}

.footer-container{
	text-align: center;
	width: 100%;
	padding: 50px 20% 20px 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-logo{
	width: 220px;
	margin: auto;
	padding-right: 30px;
}

.footer-logo img{
	width: 100%;
}

.explore, .contact{
	margin-bottom: 25px;
}

.footer-social-links a{
	margin: 0 5px;
	transition: all 200ms ease-in-out;
}

.footer-social-links a:hover{
	opacity: .8;
}
.footer-links a{
   transition: all 200ms ease-in-out;
}

.footer-links a:hover{
   color:#99C5E5;
}

.copy-right{
	font-family: inherit;
	font-size: 11px;
	text-align: center;
	padding: 15px 0;
}

.copy-right a{
	transition: 300ms ease-in-out;
}

.copy-right a:hover{
	color: #99C5E5;
}


@media only screen and (min-width: 600px) {
	.footer-container{
		max-width: 1500px;
		margin: 0 auto;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-evenly;
		padding: 50px 0 0 0;
		text-align: start;
	}

	#location-icon{
		position: static;
	}

	.mobile-no-display{
		display: block;
	}

	.desktop-no-display{
		display: none;
	}

	.contact-list li {
		position: static;
	}

	.creatives-break{
		display: none;
	}

	.contact-list{
		margin: 20px 0 0 0;
		text-align: start;
	}

	.contact-list li {
	   display: grid;
	   grid-template-columns: 1fr 12fr;
	}
	
	.contact-list li p{
	   width: 200px
	}

	.footer-logo{
		margin: 0 10px 0 0;
	}

	.explore{
		width: 15%;
	}

	.contact{
		width: 30%;
	}

	.copy-right{
		padding: 25px 0;
		font-size: 12px;
	}
}

/***********HomePage*************/
 /**Hours and Location Styling**/
 section.hours-location{
	text-align: center;
	margin: 50px auto;
	width: 80%;
	display: flex;
	flex-direction: column;
}

section.hours-location h3{
	font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
}

.location{
	line-height: 28px;
}

.hours, .location{
	font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
}

.schedule {
	margin-top: 10px;
	font-weight: 400;
	display: flex;
}

.daily-hours{
	margin-left: auto;
}

.break{
	margin: 40px auto;
	width: 100%;
	height: 2px;
	background-color: #99C5E5;
}

.address{
	width: 60%;
	margin: 9px auto;
}

@media only screen and (min-width: 600px) {
	section.hours-location{
		width: 50%;
	}
}

@media only screen and (min-width: 1100px) {
	section.hours-location{
		text-align: center;
		margin: 50px auto;
		width: 700px;
		max-width: 1000px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.break{
	   display: none;
	}

	.hours{
		width: 50%;
		text-align: center;
		padding-right: 12%;
		border-right: 2px solid #99C5E5;
	}

	section.hours-location h3{
		font-size: 1.5rem;
	}

	.address, .schedule{
		font-size: 1rem;
	}
}


/**Services Styling**/
section.services{
	width: 100%;
	height: 600px;
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/services-background.png');
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 50px;
}

section.services h3{
	font-size: 1.5rem;
	font-family: Aurel-bold, Arial, Helvetica, sans-serif;
	color: black;
	margin-bottom: 20px;
}

.services-cards-mobile{
	display: block;
}

.services-cards-desktop{
	display: none;
}

.services-cards-mobile .swiper {
		width: 100%;
		height: 90%;
	  }

	  .services-cards-mobile .swiper-slide {
		text-align: center;
		font-size: 18px;
		background: transparent;
		position: relative;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	  }

	  .services-cards-mobile .card{
		background-color: #c3dceeb2;
		width: 70%;
		height: 420px;
		border: none;
		border-radius: 15px;
	  }

   

	  .services-cards-mobile .swiper-pagination-bullet{
		background-color: transparent !important;
		border: 2px solid #99C5E5 !important;
	  }

	  .services-cards-mobile .swiper-pagination-bullet-active{
		background-color: #99C5E5 !important;
	  }



.services-cards-mobile .service-icon{
	margin: 30px auto 15px auto;
	width: 70px;
}

.services-cards-mobile .service-icon img{
	width: 100%;
}

.services-cards-mobile .card-header h4{
	font-family: Aurel-bold, Arial, Helvetica, sans-serif;
}

.services-cards-mobile .card-header{
	margin-bottom: 15px;
}

.services-cards-mobile .card-body{
	font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	margin: 0 10px;
}

@media only screen and (min-width: 600px) {
	.services-cards-mobile .card{
		background-color: #c3dceeb2;
		width: 50%;
		height: 450px;
		border: none;
		border-radius: 15px;
	}

	.services-cards-mobile .card-body{
		font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
		font-size: 1.3rem;
		margin: 0 10px;
	}
}

@media only screen and (min-width: 1100px) {
	.services-cards-mobile{
		display: none;
	}

	.services-cards-desktop{
		display: block;
		width: 100%;
		max-width: 1500px;
		margin: 0 auto;
		position: relative;
	}
	
	section.services{
		width: 100%;
		height: 660px;
		padding-top: 50px;
	}

	section.services h3{
		font-size: 2.5rem;
		margin-bottom: 30px;
	}

	.services-cards-desktop .card{
		background-color: #d8e7f1b2;
		width: 300px;
		height: 425px;
		font-size: 16px;
		border: none;
		border-radius: 15px;
		padding: 50px 20px 0 20px;
	  }

	.services-cards-desktop .card:nth-child(2){
		height: 580px;
		width: 400px;
	}

	.services-cards-desktop .card:nth-child(2) .service-icon{
		margin: 10px auto 10px auto;
		width: 130px;
	}

	.services-cards-desktop .service-icon{
		margin: 0px auto 10px auto;
		width: 100px;
	}

	.services-cards-desktop .service-icon img{
		width: 100%;
	}

	.services-cards-desktop .card-header h4{
		font-family: Aurel-bold, Arial, Helvetica, sans-serif;
		font-size: 20px;
	}
	
	.services-cards-desktop .card-header{
		margin-bottom: 10px;
	}
	
	.services-cards-desktop .card-body{
		font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
		margin: 0 10px;
	}


	.desktop-swiper{
		width: 85%;
		height: 490px;
		max-width: 1400px;
	}

	.desktop-swiper .swiper-slide{
		text-align: center;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
	}

	.desktop-swiper .swiper-slide.swiper-slide-active{
		transform: scale(1.15);
	}

}


/**Biography Styling**/
section.biography{
	width: 80%;
	margin: 50px auto;
}

section.biography h3{
	font-size: 26px;
	font-family: Aurel-bold, Arial, Helvetica, sans-serif;
	color: black;
	text-align: center;
	margin: 20px;
}

.biography-container{
	display: flex;
	flex-direction: column;
}

.profile-image{
	width: 160px;
	margin: auto;
}

.profile-image img{
	width: 100%;
	border-radius: 50%;
}

.intro-text{
	margin-top: 20px;
    font-family: Aurel-bold, Arial, Helvetica, sans-serif;
}

.intro-text h4:first-child{
	color: black;
	font-size: 22px;
}

.intro-text h4{
	font-family: MyriadPro-Regular, Arial, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #7998AF;
}

.biography-text{
	margin: 20px auto;
	font-size: 16px;
}

.biography-credentials{
	display: none;
}

@media only screen and (min-width: 1100px) {
	section.biography{
		width: 90%;
		max-width: 1200px;
	}

	
	section.biography h3{
		text-align: start;
		font-size: 42px;
		margin: 0 auto 50px 40px;
	}

	.biography-container{
		align-items: center;
		flex-direction: row;
	}

	.biography-intro{
		align-self: flex-start;
		padding-top: 20px;
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.biography-text{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: 20px;
		margin-right: 80px;
	}
	
	.biography-credentials{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		border-left: 2px solid #99C5E5;
		padding-left: 50px;
	}

	.biography-credentials h4{
		font-family: Aurel-bold, Arial, Helvetica, sans-serif;
		font-size: 26px;
		margin-bottom: 20px;
	}

	.biography-credentials-logo{
		width: 88px;
	}

	.biography-credentials-logo img{
		width: 100%;
	}

	.biography-credentials p{
		font-family: Roboto, Arial, Helvetica, sans-serif !important;
		line-height: 30px;
		font-size: 20px;
	}

}

/**Get in Touch Styling**/

section.get-in-touch{
	position: relative;
	width: 100%;
	height: 170px;
	background-color: #c3dceeb2;
}

section.get-in-touch.home{
	position: relative;
	width: 100%;
	height: 80px;
	background-color: #c3dceeb2;
}

.get-in-touch-container{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.get-in-touch-container button{
	margin: 5px 0;
}

.get-in-touch-container h2.mobile{
	font-size: 20px;
	display: block;
}

.get-in-touch-container h2.desktop{
	display: none;
}

@media only screen and (min-width: 600px) {
	section.get-in-touch.home{
		position: relative;
		height: 110px;
	}
}

@media only screen and (min-width: 1100px) {
	.get-in-touch-container{
		top: 0%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.get-in-touch-container.community{
		flex-direction: row;;
	}

	.fa-solid.fa-caret-right{
		margin: 0 50px 0 5px;
	}

	.get-in-touch-container h2.mobile{
		display: none;
	}

	.get-in-touch-container h2.desktop{
		display: block;
	}

	section.get-in-touch.home{
		position: relative;
		width: 100%;
		height: 120px;
		background-color: #c3dceeb2;
	}
}

/***********About Us Page*************/

section.about-us{
	width: 100%;
	margin: 50px auto 0 auto;
 } 

 .desktop-header{
	display: none;
 }

 .mobile-header{
	display: block;
	text-align: center;
	transition: all 300ms ease-in-out;
 }	

 .mobile-header p{
	padding-top: 0 !important;
	margin-bottom: 0 !important;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-weight: 500;
 }

 #icon-up{
	display: none;
 }

 .mobile-header button{
	display: block;
	margin: auto;
	color: white;
	padding: .7rem 1.2rem;
	font-size: .8rem;
	font-weight: 500;
	border-radius: 25px;
	border: none;
	transition: all 500ms ease-in-out;
	background-color: #9B0000;
 }

 .mobile-header button.active{
	background-color: #12132C;
	color:#99C5E5;	
 }

 .about-us-info{
	margin: 0 5%;
	font-size: 16px;
 }

 .about-us-skills{
	margin: 50px 5%;
 }

 .about-us-skills h2{
	margin-bottom: 10px;
 }

 .skill{
	display: flex;
	align-items: center;
	margin: 15px 0;
 }

 .skill p{
	width: 90%;
	margin-left: 10px;
 }

 .about-us-achievements h2{
	text-align: center;
	padding-top: 10px;
	margin-bottom: 30px;
 }

 .about-us-achievements{
	background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/services-background.png');
	background-size: cover;
	background-repeat: no-repeat;
	height: auto; 
	padding-bottom: 30px;
	padding-top: 20px;
 }

 .achievements-container{
	width: 85%;
	margin: auto;
	height: 10px; 
	transition: all 800ms ease-in-out;
 }

 .achievements-container.active{
	height: 970px
 }

 @media only screen and (min-width: 768px) {
	.achievements-container.active{
		height: 820px
	 }
 }


 .achievement{
	margin: 30px 0;
	background-color: white;
	padding: 2rem;
	border-radius: 20px;
	box-shadow: 1px 1px 5px lightgray;
	opacity: 0;
	display: none;
	transition: all 500ms ease-in-out;
 }

 .achievement.active{
	opacity: 1;
 }

 .achievement-text{
	width: 95%;
	margin-left: 20px;
 }

 .achievement-text h5{
	font-size: 20px;
 }

 .achievement-text blockquote{
	margin-top: 2px;
	font-size: 16px;
	font-weight: 200;
 }

 .achievement-text.university h6{
	color: black;
	font-weight: 200;
 }

 h6{
	color: #99C5E5;
	font-weight: 200;
 }

 .about-us-header{
	display:none;
}

h1{
	display: none;
}

.meet-text{
	display: block;
	margin: 20px 5%;
}

 @media only screen and (min-width: 1100px) {
	.mobile-header{
		display: none;
	}

	.desktop-header{
		display: block;
	}

	.meet-text{
		display: none;
	}

	h1{
		font-size: 40px;
		margin: 0 5% 20px 5%;
		display: block;
	}

	.about-us-profile{
		display: block;
		margin-bottom: 20px;
		width: 250px;
	}

	.about-us-header{
		display: block;
		text-align: center;
		float: left;
		margin: 20px 50px;
	 }

	.about-us-profile img{
		width: 100%;
		border-radius: 50%;
	}

	section.about-us{
		width: 100%;
		max-width: 1800px;
		margin: auto;
		display: flex;
		justify-content: center;
	} 

	.about-us-left{
		width: 65%;
		margin-top: 60px;
		padding-left: 25px;
	}

	.about-us-right{
		width: 35%;
	}

	.about-us-achievements h2{
		text-align: start;
		margin-left: 15%;
		margin-bottom: 50px;
	 }

	 .about-us-achievements{
		margin: auto;
		height: 100%;
		padding-top: 60px;
	 }

	 .achievements-container{
		width: 70%;
		margin: auto;
	 }

	 .achievement{
		margin: 30px 0;
		background-color: white;
		padding: 1rem 2rem;
		border-radius: 20px;
		display: flex;
		opacity: 1;
	 }

	 .achievement-text{
		width: 300px;
	 }

	 .achievement-text h5{
		font-size: 16px;
	 }

	 h6{
		font-size: 12px;
	 }

	 .achievement-text blockquote{
		font-size: 12px;
	 }

	 .skills-container{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	 }

	 .skill p{
		font-size: 16px;
	 }
}
	   /***********Contact Page*************/
	section.contact-options{
		width: 100%;
		margin: 50px auto;
	}
	
	.contact-option{
		width: 280px;
		display: grid;
		grid-template-columns: .5fr 1fr;
		margin: 25px auto;
	}
	
	.contact-option h4{
		font-size: 18px;
	}
	
	.contact-option p{
		margin-top: 5px;
		font-size: 16px;
		text-align: left;
	}
	
	.contact-option:nth-child(3) p{
		width: 150px;
	}

	.contact-icon-container{
		margin-right: 0 !important;
	}
	
	.contact-icon-container img{
		width: 75px;
	}
	
	section.contact-options .social-media-links{
		margin-top: 5px;
		display: flex;
		list-style-type: none;
	}
	
	section.contact-options .social-media-links li{
		margin: 5px;
	}
	
	section.contact-options .social-media-links li a{
		transition: all 200ms ease-in-out;
	}
	
	section.contact-options .social-media-links li a:hover{
		opacity: .8;
	}
	
	section.FAQ{
		background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/services-background.png');
		background-size: cover;
		width: 100%;
	}

	.FAQ-container{
		width: 100%;
		max-width: 1500px;
		padding: 5% 10%;
		margin:auto;
	}
	
	.accordion{
		font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
		margin-top: 20px;
		max-width: 1500px;
		width: 100%;
	}
	
	
	.accordion .content-box{
		position: relative;
		margin: 10px 0;
	}
	
	.content, .label{
		font-size: 18px;
	}

	.accordion .content{
		margin-top: 20px;
	}
	
	.accordion .content-box .label{
		position: relative;
		padding: 10px;
		background-color: #99C5E5;
		color: white;
		cursor: pointer;
		border-radius: 5px;
		height: 60px;
		display: flex;
		align-items: center;
		color: black;
		box-shadow: 5px 5px 5px #3B3B4C;
		transition: all 500ms ease-in-out;
	}
	
	.accordion .content-box .label:hover{
		background-color: #3B3B4C;
		color: white;
	}

	.accordion .content-box .content{
		position: relative;
		background-color: transparent;
		max-height: 0px;
		overflow: hidden;
		transition: all 500ms ease-in-out;
		overflow-y: auto;
		margin-top: 10px;
		padding: 0 15px
	}
	
	.accordion .content-box.active .content{
		max-height: 800px;
	}
	
	.accordion .content-box.active .label{
		background-color: #3B3B4C;
		color: white;
	}

	section.contact-form{
		padding: 5px 10%;
		width: 100%;
		background-color: #c6e1f5;
	}

	.contact-form-container{
		display: flex;
		justify-content: center;
	}

section.contact-form h2{
	margin: 20px 0 !important;
	text-align: center;
}


@media only screen and (min-width: 600px) {
	section.contact-options{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
	}
	.contact-option{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		max-width: 500px;
		width: 180px;
	}

	.contact-option p{
		text-align: center;
	}
}

@media only screen and (min-width: 1100px) {
	section.contact-options{
		width: 100%;
		max-width: 1200px;
		margin: 20px auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	section.contact-options .social-media-links{
		justify-content: center;
	}

	section.contact-form h2{
		margin: 60px 0 !important;
		text-align: center;
	}

	.accordion .content-box .label{
		box-shadow: none;
	}

	.contact-option{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.contact-option p{
		text-align: center;
	}

	.contact-option:nth-child(3) p{
		width: 160px;
		text-align: center;
	}
}

 /***********Community Page*************/
 section.community-wellness{
	width: 100%;
	padding: 0 5%;
}

.community-left-side{
	margin-top: 50px;
}

.community-left-side h2{
	text-align: left;
	margin-bottom: 20px;
}

.community-wellness-info-text{
	margin-bottom: 50px;
}

.community-wellness-info-video{
	margin: auto;
	margin-left: 0px;
	width: 95%;
}

.community-wellness-info-video video{
	width: 100%;
	border-radius: 15px;
}

.community-right-side{
	margin: 55px auto;
}

.community-right-side a{
	text-decoration: none;
	color: black;
}

.community-about-me-card-container{
	position: relative;
	width: 300px;
	height: 534px;
	margin: auto;
	background-color: #99C5E5;
	border-radius: 15px;
}

.community-about-me-card{
	position: absolute;
	left: 5%;
	top: 3%;
	width: 98%;
	height: 100%;
	background-color: white;
	border-radius: 15px;
	box-shadow: 1px 1px 5px lightgray;
}

.community-about-me-card h3{
	margin: 20px;
}

.community-about-me-card-header{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

.community-about-me-card-body{
	text-align: center;
	margin: 20px;
	font-size: 15px;
}

.community-about-me-profile{	
	width: 60%;
}

.community-about-me-profile img{
	width: 100%;
	border-radius: 50%;
}

.community-paralax{
	display: none;
}

@media only screen and (min-width: 600px) {
	.community-left-side h2 br{
		display: none;
	}
}

@media only screen and (min-width: 1100px) {
	section.community-wellness{
		display: flex;
		max-width: 1500px;
		margin: auto;
		margin-bottom: 0;
	}

	.community-left-side{
		width: 70%;
		padding: 0;
	}

	.community-left-side h2{
		text-align: left;
	}


	.community-wellness-info{
		display: flex;
		flex-direction: column-reverse;
	}

	.community-wellness-info-text{
		margin-top: 50px;
	}

	.community-paralax{
		display: block;
		height: 415px;
		width: 100%;
		background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/community-engagement-paralax.png');
		background-size: cover;
		background-position-y: -5%;
		background-repeat: no-repeat;
		background-attachment: fixed;
		position: relative;
	}

	.community-paralax-container{
		width: 100%;
		height: 100%;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.community-paralax-container h2{
		z-index: 5;
		font-size: 72px;
		font-family: Aurel-light, Arial, Helvetica, sans-serif;
	}

	.community-paralax::before{
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: linear-gradient(rgba(18, 19, 44, 0.5), rgb(10, 11, 19));
	}
}


  /***********Services Page*************/
section.diagnostic-imaging-services{
	width: 100%;
	padding: 10%;
}

.diagnostic-imaging-services-right h2{
	margin-bottom: 20px;
}

.diagnostic-imaging-services-left{
	display: none;
}

.fee-schedule-mobile-container{
	position: relative;
	width: 100%;
	height: 450px;
}

.fee-schedule-mobile-container .swiper {
	width: 100%;
	height: 100%;
	background: #000;
  }

.fee-schedule-mobile-container .swiper-slide {
	font-size: 18px;
	color: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 30px 10%;
  }

.fee-schedule-mobile-container .parallax-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 130%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
  }

  .fee-schedule-mobile-container .parallax-bg::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to left, rgba(18, 19, 44, 0.5), rgb(10, 11, 19));
  }

  .fee-schedule-mobile-container .swiper-slide .title {
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	font-family: Aurel-dark, Arial, Helvetica, sans-serif;
  }

  .fee-schedule-mobile-container .swiper-slide .subtitle {
	font-family: Aurel-dark, Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin: 20px 0;
  }

  .fee-schedule-mobile-container .swiper-slide .text {
	font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
	font-size: 16px;
	max-width: 500px;
	line-height: 1.3;
  }

  .fee-schedule-mobile-container .swiper-slide .text ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
  }

  .fee-schedule-mobile-container .swiper-button-next, .fee-schedule-mobile-container .swiper-button-prev{
	position: absolute;
	top: 90%;
}

.swiper-button-next, .swiper-button-prev{
	color: #99C5E5!important;
}

.fee-schedule-mobile-container .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	border: 2px solid white;
}

section.chiropractic-services{
	padding: 10%;
	width: 100%;
	max-width: 1500px;
	margin: auto;
}

section.chiropractic-services h2{
	margin-bottom: 20px;
}

section.fee-schedule-desktop{
	display: none;
}

.last-sentence{
	font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
	font-weight: 600;
}


@media only screen and (min-width: 600px) {
	section.diagnostic-imaging-services{
		padding: 5%;
	}

	section.chiropractic-services{
		padding: 5%;
	}
}

@media only screen and (min-width: 1100px) {
	section.diagnostic-imaging-services{
		width: 100%;
		max-width: 1500px;
		padding: 0;
		margin: 50px auto;
		display: flex;
		flex-direction: row-reverse;
		align-items: top;
	}

	section.chiropractic-services{
		padding: 3% 100px;
	}

	.diagnostic-imaging-services-left{
		display: block;
		width: 50%;
		padding-left: 100px;
	}

	.diagnostic-imaging-services-left video{
		width: 100%;
		border-radius: 20px;
	}

	.diagnostic-imaging-services-right{
		width: 50%;
		padding: 0 100px 0 50px;
	}

	.fee-schedule-mobile-container{
		display: none;
	}

	section.fee-schedule-desktop{
		display: block;
		font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
		width: 100%;
		height: 820px;
		position: relative;
	}

	.fee-schedule-desktop p, .fee-schedule-desktop li{
		font-family: MyriadPro-Light, Arial, Helvetica, sans-serif;
	}

	.fee-schedule-desktop-background-image{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		background-image: url('https://barnes-jones.com/wp-content/uploads/2022/07/fee-schedule-desktop.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.fee-schedule-desktop-left-background{
		position: absolute;
		width: 58%;
		height: 100%;
		background-color: #12132C;;
	}

	.fee-schedule-desktop-background-image::before{
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: linear-gradient(to left, rgba(18, 19, 44, 0.5), rgb(10, 11, 19));
	}

	.fee-schedule-desktop-header p{
		margin-top: 20px;
		width: 420px;
	}

	.fee-schedule-desktop-container{
		position: absolute;
		color: white;
		top: 5%;
		left: 16%;
	}

	.fee-schedule-desktop-container ul{
		list-style-type: none;
	}

	.fee-schedule-desktop p {
		font-weight: 200;
		font-size: 18px;
	}

	.fee-schedule-desktop-body{
		display: block;
	}

	.fee-service{
		margin-top: 30px;
	}

	.fee-service-title{
		position: relative;
		margin-left: 15px;
	}

	.fee-service-title::before{
		display: block;
		position: absolute;
		top: 0%;
		left: -15px;
		content: '';
		height: 50px;
		width: 4px;
		background-color: white;
		margin-right: 50px;
	}

	.fee-service-body{
		margin-left: 15px;
	}

	.last-sentence{
		font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;
		font-weight: 300;
	}

}

/***********Education Page*************/

section.education{
	padding: 10%;
}

.education-right h2{
	text-align: start;
	margin-bottom: 15px;
}

.education-left video{
	margin-top: 25px;
	width: 100%;
	border-radius: 20px;
}

@media only screen and (min-width: 600px) {
	section.education{
		padding: 5%;
	}
}

@media only screen and (min-width: 1100px) {
	section.education{
		width: 100%;
		max-width: 1500px;
		padding: 0;
		margin: 50px auto;
		display: flex;
		align-items: top;
		flex-direction: row-reverse;
	}

	.education-left video{
		margin-top: 5px;
	}	

	.education-right h2{
		text-align: left;
	}

	.education-right{
		width: 50%;
		padding: 0 100px 0 50px;
	}

	.education-left{
		width: 50%;
		padding-left: 100px;
	}
}