/* iPads (portrait and landscape) ----------- */
@media (max-width: 768px) 
{
	body {
		overflow-x: hidden;
	}

	h2 {
		font-size: 24px;
	}

	h5{
	font-size:15px;
	}

	.header-text {
		padding: 0px 20px;
		text-align: left;
		font-weight: 300;
		font-size: 16px;
		color: #007F5F;
	}

	.text-indent {
		text-align: left;
		font-size: 15px;
	}


	.fancy h2:before,
	.fancy h2:after {
		content: "";
		position: absolute;
		height: 10px;
		border-bottom: 0px solid #CEE0DC;
		top: 0px;
		width: 250px;
	}

	.fancy-dark h2:before,
	.fancy-dark h2:after {
		border-bottom: 0px solid #A4C7C7;
	}

	.section-header-text {
		padding-bottom: 10px;
	}

		.section-header-text h2 {
			line-height: 1.2;
		}


	.navbar-toggle {
		display: block;
		position: relative;
		z-index: 9;
	}

	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}

		.navbar-collapse.collapse {
			display: none !important;
		}




	.navbar-fixed-top .navbar-collapse,
	.navbar-fixed-bottom .navbar-collapse {
		max-height: 750px;
		background-color: #49937F;
		opacity: 1;
		padding: 10px;
		margin-top: 60px;
		border: solid 10px #F0F0F0;
	}

	.navbar-default .navbar-nav > li > a.active,
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus {
		color: #333;
		border-bottom: 4px double #F0F0F0;
	}


	.navbar-right {
		float: none !important;
		margin-right: -15px;
	}

	.navbar-nav {
		float: left !important;
		margin: 7.5px -15px;
	}

	.navbar-nav > li {
		float: none;
	}

	.navbar-nav > li > a {
		padding-top: 13px;
		padding-bottom: 7px;
		font-weight: 300;
		font-size: 16px;
		color: #035651 !important;
	}

	.navbar-text {
		float: none;
		margin: 15px 0;
	}

	.navbar-collapse.collapse.in {
		display: block !important;
	}

	.collapsing {
		overflow: hidden !important;
	}

	.navbar-nav {
		margin: 0 -15px;
	}

	.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
		padding: 10px 15px 10px 25px;
	}


	#tf-menu {
		box-shadow: none;
	}

	#tf-menu.appear {
		box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.1);
		opacity: 1;
		transform: translateY(0);
		height: 85px;
		line-height: 1.2;
		.menuheader {
			font-size: 20px;
			font-weight: 800;
		}

		.navbar-toggle {
			margin-right: 2%;
		}

		.navbar-toggle .icon-bar {
			display: block;
			width: 22px;
			height: 3px;
			border-radius: 1px;
			background-color: #02FFBF!important;
			margin-left: 4px;
		}

	}

	.menu-shift {
		margin-right: 20px;
		margin-left: 20px;
		margin-top: 5%;
		text-align: left;
	}

	.container .navbar-header {
			float: none;
			width: 100%;
			position: fixed;
		}


	.move-right {
		margin-left: 0px;
	}



	#tf-home .hero-content {
		width: 100%;
		padding: 0 20px;
	}


	/* Show mobile logo on small screens */

	.logo-desktop {
		display: none;
	}

	.logo-mobile {
		display: block;
	}


	.home-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60px;
	}

	#tf-home .hero-subheader{
			font-size: 16px;
		}

	.hero-subheader-h3 {
		padding: 0 5%;
		font-size: 15px;
	}

	#tf-home {
		padding: 0 0px;
	}

	#tf-home h1 {
		color: #02FFBF !important;
		font-family: Lato !important;
		font-weight: 900;
		font-size: 30px;
		margin-bottom: 30px;
	}

	#tf-home h2 {
		color: #ffffff !important;
		font-family: Lato !important;
		font-weight: 500;
		font-size: 18px;
		margin-bottom: 30px;
	}

	#tf-home h3 {
		color: #02FFBF !important;
		font-family: Lato !important;
		font-weight: 300;
		font-size: 16px;
		margin-bottom: 30px;
	}

	a.btn-hero-consultation {
		border-radius: 30px;
		margin: 20px 5px 40px 0;
	}

	a.btn-hero-services {
		border-radius: 30px;
		margin: 20px 0px 40px 10px;
	}



	.hero-content {
		padding: 0 10px;
		width: 100%;
	}



	.card-expertise-vline-rt{
		border-right: solid 0px transparent;
	}

	#tf-choose{
		padding: 30px 0 0 0;
	}


	#tf-contact h2 {
		font-size: 36px;
	}

	#tf-contact .section-header {
		padding: 0 0 30px 0;
	}

	.section-header-text-commit {
		padding-bottom: 5px;
	}

	.row{
		margin: 0 0;
	}

	.shrink-box {
		background-color: #ffffff;
		padding: 10px 10px 10px 10px;
		width: 100%;
		height: auto;
		border-radius: 0px;
		border: solid 1px #EDF3F2;
		margin: 0px auto 40px 0px;
	}

	.section-container-faq {
		width: 85%;
		padding: 20px 0;
	}



	.card-text-list-align {
		padding: 0px 40px;
	}


	.card-text-align {
		padding: 0px 10px;
		text-align: center;
		font-weight: 300;
		font-size: 15px;
		line-height: 1.5;
	}



	.card-text-left {
		padding: 0px 20px;
		line-height: 1.5;
	}

	.card-button-align {
		padding: 20px 10px 10px 10px;
		text-align: center;
	}

	.process-grid-card {
		margin: 5px auto;
		padding: 5px 30px;
	}



	#tf-about-intro h1 {
		color: #6f6f6f !important;
		font-family: Lato !important;
		font-weight: 300;
		font-size: 36px;
		margin-bottom: 10px;
	}

	#tf-services-process, #tf-about-commitment {
		padding: 10px 0;
	}

	.services-blurb {
		padding: 20px 30px;
	}


	.dgreenbg1, .dgreenbg2, .dgreenbg3, .dgreenbg4, .dgreenbg5, .dgreenbg6, .dgreenbg7, .dgreenbg8 {
		margin-bottom: 2px;
	}

	.strategy-img, .payroll-img, .choose-img, .clients-img {
		max-width: 250px;
		height: auto;
		border: solid 1px #EBEFEE;
	}


	.std-card2-grid-wrapper {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 10px;
	}

	.std-card2-grid-wrapper-services-payroll {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1.1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 0px;
	}



	.std-card3-grid-wrapper-services {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 30px;
	}



	.card3-grid-wrapper-expertise {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 10px;
	}

	.std-card2-grid-wrapper-about-home {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1.5fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 0px;
	}

	.std-card2-grid-wrapper-about {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1.3fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 0px;
	}

.std-img-grid-card-noshadow-ceo {
	background-color: #ffffff;
	padding: 12px 10px 10px 0px;
	width: 100%;
	height: auto;
	border-radius: 0px;
	border: solid 0px #EDF3F2;
	margin: 5px auto 20px 0;
}

.col-md-8-about {
	width: 100%;
}


	.std-card2-grid-wrapper-clients {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1.6fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 10px;
	}




.card-text-list-about {
	padding: 0px 0px 0px 20px !important;
	text-align: left;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.8;
}

	.header-text-about{
		padding:0 20px;
	}

	.gap-below{
		margin-bottom: 20px;
	}

	.std-card2-grid-wrapper-choose {
		display: grid;
		grid-template-rows: 1.2fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 10px;
	}

	.std-card2-grid-wrapper-commitment {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 10px;
	}

	.std-card4-grid-wrapper {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1fr 1fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
		gap: 10px;
	}

	.std-card5-grid-wrapper {
		display: grid;
		/* Creates as many columns as possible that are at least 200px wide, 
		 and lets them grow to fill the available space equally (1fr) */
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
		align-items: stretch;
		gap: 10px;
	}


	.card4-grid-wrapper {
		display: grid;
		/* Define three rows for vertical alignment */
		grid-template-rows: 1fr 1fr 1fr 1fr;
		/* Ensure a single column that takes all available width */
		grid-template-columns: 1fr;
		/* Optional: Align items vertically within their respective rows */
		align-items: stretch;
	}

	.std-card2-grid-wrapper-footer {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.std-card2-grid-container-footer {
		text-align: center;
		margin-left: 0%;
	}

	.std-grid-card-footer {
		background-color: transparent;
		padding: 10px;
		width: 100%;
		height: auto;
		border-right: solid 0px #0E6750;
		margin: 0px auto;
	}

	.text-std-contact {
		padding: 20px 0px;
		text-align: center;
		color: #007F5F;
	}

	.text-std-footer {
		padding: 0px 0px;
		text-align: center;
	}

	.header-phone {
		display:block;
	}

	.text-align-margin {
		margin: 0 0 0 0px;
	}



	.btn-greenBG {
		margin: 10px 0px 20px 0px;
	}

	.btn-whiteBG {
		margin: 10px 0px 20px 0px;
	}

	.iconline span:before,
	.iconline span:after {
		content: "";
		position: absolute;
		height: 5px;
		top: 20px;
		width: 130px;
	}


	.cta-container{
		padding: 0 30px;
	}

	.text-std-center-faq{
	margin-bottom: 20px;

	}

	.section-container {
		width: 85%;
		padding: 20px 0 40px 0;
	}

	.services-card-body {
		margin: 20px 0px 0 0px;
		text-align:center!important;
	}

	#tf-footer {
		padding: 3% 2% 2% 2%;
		background-color: #8A8C8C;
		color: #ffffff;
		text-align: center;
	}



}

@media (max-width: 603px) { 
	
	#tf-footer .pull-left,
    #tf-footer .pull-right {
	    float: none !important;
	    text-align: center;
	}
	
}

@media (max-width: 460px) {
	.gray-bg .vline {
	    left: 5%;
	}
    h1 { font-size: 34px;}
   
    .ipad-wrapper .app-wrap {left: 3%;}
}
@media (max-width: 360px) { 
	
	p{ font-size: 12px}
	h2{ font-size: 20px;}
	h4{ line-height: 20px;}
	ul.list-inline.cat > li{  margin-bottom: 20px;}
	.gray-bg .vline { left: 20%;}
	
	
	h1 {font-size: 26px}
	
	.ipad-wrapper .app-wrap {display: none;}
	a.goto-btn {
	    margin-right: auto;
	    margin: 0 10px;
	}
	a.goto-btn {
	    display: inline-block;
	}
}
@media (max-width: 320px) {

	.gray-bg .vline {
		left: 25%;
	}

	.nav.nav-pills > li > a {
		font-size: 11px;
	}

	ul.features li span.fa {
		font-size: 30px;
		margin-top: 2px;
	}

	#tf-menu.appear {
		.menuheader

		{
			font-size: 18px;
			font-weight: 600;
		}

	}
	
}