/*---------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
-----------------------------------*/
/* 1280-1024 	- desktop (default grid) */
@media all and (min-width: 1024px) and (max-width: 1800px) {

}
@media all and (min-width: 1024px) and (max-width: 1280px) {
	
	.navbar ul li a{
		font-size: 17px !important;
		padding: 0 7px !important;
	}
}
/* 1024-768 	- tablet landscape */
@media all and (min-width: 769px) and (max-width: 1024px) {
	
	.navbar{
		display: none !important;
	}

	#nav-trigger{
	    display: block !important;
	    position: absolute;
	    right: 20px;
	    top: 20px;
	    z-index: 999999;
	}


	h2{
		font-size: 26px !important;
		line-height: 36px !important;
	}

	h3{
		font-size: 22px !important;
		line-height: 32px !important;
	}

	h4{
		font-size: 18px !important;
		line-height: 28px !important;
	}

	h5,
	h6{
		font-size: 16px !important;
		line-height: 26px !important;
	}

	p,
	.fab-footer-two ul li a{
		font-size: 14px !important;
		line-height: 24px !important;
	}
	

}
/* 768-480 	- tablet  */
@media all and (min-width: 480px) and (max-width: 768px) {

	h2{
		font-size: 24px !important;
		line-height: 34px !important;
	}

	h3{
		font-size: 20px !important;
		line-height: 30px !important;
	}

	h4{
		font-size: 18px !important;
		line-height: 28px !important;
	}

	h5,
	h6{
		font-size: 16px !important;
		line-height: 26px !important;
	}

	p,
	.fab-footer-two ul li a{
		font-size: 12px !important;
		line-height: 22px !important;
	}

	#nav-trigger{
		display: block !important;
	    position: absolute;
	    right: 20px;
	    top: 20px;
	    z-index: 999999;
	}

	.navbar{
		display: none !important;
	}	

	.fab-about-us-box,
	.fab-donate-charity,
	.fab-donate-charity p{
		text-align: center !important;
	}

	.charity-images img{
		width: 65%;
		display: block;
		margin: 0 auto;
	}

	.fab-hero-banner-content{
		margin-top: 75px;
	}

	.fab-hero-banner-content h1{
		font-size: 38px;
		line-height:48px;
	}

	.fab-graphics .fab-graphics-div {
	    padding: 25px 15px;
	    max-width: 345px;
	}

	.fab-donate-charity{
		padding:15px 0px;
	}

	.fab-tabs-section .nav-tabs .nav-link {
	    height: auto; 
	    padding: 15px 15px;
	    font-size: 12px;
	    line-height: 22px;
	}

	.fab-hero-banner-content a {
	    padding: 6px 30px;
	    font-size: 16px;
	    line-height: 26px;
	}

}

/* 480-less 	- phone landscape & smaller */
@media all and (max-width: 480px) {

	h2{
		font-size: 22px !important;
		line-height: 32px !important;
	}

	h3{
		font-size: 18px !important;
		line-height: 28px !important;
	}

	h4{
		font-size: 16px !important;
		line-height: 26px !important;
	}

	h5,
	h6{
		font-size: 14px !important;
		line-height: 24px !important;
	}

	p,
	.fab-footer-two ul li a{
		font-size: 12px !important;
		line-height: 22px !important;
	}

	#nav-trigger{
		display: block !important;
	    position: absolute;
	    right: 20px;
	    top: 20px;
	    z-index: 999999;
	}

	.navbar,
	.fab-top-right{
		display: none !important;
	}

	.logo a img{
		max-width: 100px;
	}

	.fab-hero-banner-content h1{
		font-size: 28px;
		line-height:38px;
	}

	.fab-tabs-section .nav-tabs .nav-link {
	    height: auto; 
	    padding: 15px 15px;
	    font-size: 12px;
	    line-height: 22px;
	}

	.fab-top-header-bar,
	.fab-about-us-box,
	footer,
	.fab-footer-one p,
	.fab-donate-charity p{
		text-align: center !important;
	}

	.fab-hero-banner-content{
		margin-top: 100px;
		text-align: center;
	}

	.fab-graphics{
		padding:45px 0px;
		height: auto;
		background-size: cover;
	}

	.fab-graphics .fab-graphics-div {
	    padding: 15px;
	    position: relative;
	    text-align: center;
	}

	.fab-calculation {
	    padding-top: 45px;
	    padding-bottom: 45px;
	}

	.fab-donate-charity {
    	text-align: center;
	    padding: 25px 0px;
	}

	.fab-calculation .fab-calculation-digit p{
		min-height: 55px;
		font-size: 14px !important;
		line-height: 24px !important;
	}

	.fab-about-us .main{
		width: 100%;
	}

	.fab-graphics-img iframe,
	footer label{
		margin-top: 45px !important;
	}

	.fab-footer-three .location i, 
	.fab-footer-three .phone i {
	    position: relative;
	    left: -10px;
	    top: 0px;
	}

	.fab-footer-one p{
		padding: 0 !important;
	}

	.fab-hero-banner-content a {
	    padding: 6px 30px;
	    font-size: 16px;
	    line-height: 26px;
	}

	.fab-hero-banner-content p,
	.fab-hero-banner-content h4,
	.fab-hero-banner-content h1{
		color: white !important;
	}

	.fab-hero-banner:before{
		position: absolute;
	    content: '';
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0,0,0,0.7);
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	}
		
}