/* only ipad 1024 and bigger screen landscape screen */

@media only screen and (min-width: 1025px) {
	#mainmenu li a:hover { opacity: 1; }
	.breadcrumbs li a:hover { color:var(--primary); }
	.button:hover { background-color:var(--secondry); text-decoration:none; color:var(--white); }
	.button.btn-lightgray:hover, input[type="submit"].btn-lightgray:hover, input[type="button"].btn-lightgray:hover, button.btn-lightgray:hover { background:#757f90; }
	.button.btn-secondary, input[type="submit"].btn-secondary, input[type="button"].btn-secondary, button.btn-secondary { background:#555; color:var(--white); }
	.button.btn-secondary:hover, input[type="submit"].btn-secondary:hover, input[type="button"].btn-secondary:hover, button.btn-secondary:hover { background:#333; }
	.button.btn-outline, input[type="submit"].btn-outline, input[type="button"].btn-outline, button.btn-outline { background:var(--white); border:solid 2px var(--primary); color:var(--primary);  }
	.button.btn-outline:hover, input[type="submit"].btn-outline:hover, input[type="button"].btn-outline:hover, button.btn-outline:hover { background:var(--primary); color:var(--white); }
	table tr:hover td { background:#fbfbfb; }
	.tabnav li.active a, .tabnav li a:hover { background-color:var(--white); color:var(--primary) }
	.tabcontent p a:hover, .accordion-data p a:hover { color:#00305d }
	.arrowbox > div:hover { background: var(--white); color: var(--primary);}
	.detailmenu:hover { background: var(--secondry); }
	.followlink:hover, .followlink:hover i { background-color: var(--secondry); }
	.ministrybox ul li a:hover { padding-left: 5px; }
	.button.subscribe:hover { background: #D60404;  }
	.blog-card figure:hover:before, .heroslider .swiper-slide figure:hover:before { clip-path: polygon(0 30%, 0% 100%, 70% 100%); }
	.blog-card h5 a:hover { color:var(--primary);}
	.blog-card .readmore:hover { color: var(--secondry)}
	.request-link:hover { background: rgba(255, 255,255, 0.3); } 
	.addressbox p a:hover { color: var(--primary);}
	.hero-infobox .button:hover { background: var(--white); color: var(--primary); }
	.close-dialogbox:hover { text-decoration:none }
	a:hover { text-decoration:none; }
	input[type="button"]:hover, input[type="submit"]:hover, button:hover { background:var(--secondry); color:var(--white); }
}
@media only screen and (min-width: 1023px) {
	#mainmenu > ul { display: flex !important; }	
}

/*==========================================================================================================*/
@media only screen and (max-width: 1200px) {
	.hero-infobox .wrap { flex-direction: column;}
	.hero-contentbox { margin: 0 0 30px; width: 100%; }
	.hero-sliderbox .wrap { padding: 0;}
	.heroslider .swiper-slide { width: 610px; }
	.donorlistbox { flex-wrap: wrap; gap: 20px;}
	.donorlistbox .col { width: calc(50% - 10px);}

	.profilepicbox { display: flex; flex-direction: column; justify-content: space-between; margin-right: 30px;}
	.profilepicbox img { height: 100%; object-fit: cover;}
	#mainmenu > ul > li { margin-right: 20px;}

	.eventdetailwrapper .mainimg { height: 450px; }
}

/*==========================================================================================================*/
@media only screen and (max-width: 1023px) {
	body { min-width:320px; }
	img{ max-width: 100%; width:auto; height:auto; }
	.wrap { width:auto; padding:0 20px; }

	/* #header { position:relative; } */
	#mainmenu > ul { display:none; position:absolute; left:0; width:100%; top:100%; background:var(--primary); z-index:5; }
	#mainmenu ul li { float:none; margin:0; padding:0; border-bottom:solid 1px var(--light); }
	#mainmenu ul li a { padding:8px 15px; display:block; color: var(--white); opacity: 1; transition: all ease 400ms; }
	#mainmenu ul li.active a { background: var(--secondry);}
	#mainmenu ul li a:after { display:none; }
	
	/* Responsive Menu line icon*/
	#menu { display: flex; align-items: center; }
	.menulines-button { padding:0; cursor: pointer; user-select: none; text-transform:uppercase; font-size:16px; color:var(--secondry); text-decoration:none; }
	.menulines-button em { font-style:normal; font-weight:bold; margin-left:10px; }
	.menulines-button:hover { text-decoration:none; }
	.menulines { display: inline-block; width: 20px; height: 3px; background: var(--secondry); position: relative; margin: 9px 0; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); opacity:1; }
	.menulines:before, .menulines:after { display: inline-block; width:20px; height: 3px; background: var(--secondry); position: absolute; left: 0; content:''; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transform-origin: 0.28571rem center; -moz-transform-origin: 0.28571rem center; -ms-transform-origin: 0.28571rem center; transform-origin: 0.28571rem center; }
	.menulines:before { top: 7px; }
	.menulines:after { top: -7px; }
	.menuopen .menulines { background:none; }
	.menuopen .menulines:before, .menuopen .menulines:after {  -webkit-transform-origin: 50% 50%;  -moz-transform-origin: 50% 50%;  -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; } 
	.menuopen .menulines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } 
	.menuopen .menulines:after {  -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }
	
	.buttonset .col a { margin:0 5px 8px 0; }
	.default-grid.cols4 .col { width:50%; }
	.cols2.default-grid.tab-grid .col { width:100%; }
	h1, h2 { font-size: 50px;}
	.image-block figure { width:45%; }
	.heroslider .swiper-slide { width: 100%; }
	.donorlistbox { padding: 20px; }
	.profilebox { display: flex; flex-direction: column;}
	.profilepicbox { margin-right: 0;  }
	.profilepicbox img { height: auto; } 
	.worshipbox { padding: 20px ;}
	.ministriesbox ,.worship-columnbox {  gap: 20px;}
	.worship-columnbox, .cnt-columnbox { flex-direction: column;}
	.ministrybox { width: calc(50% - 10px);}
	.worship-columnbox .col { width: 100%;}
	.fb-box { margin-bottom: 0;}
	.worshipbox { margin-bottom: 20px;}
	.cnt-columnbox .col:first-child, .cnt-columnbox .col { width: 100%;}
	.pro-outerbox { margin-bottom: 0; padding-bottom: 30px;}
	.audio-box { padding: 0 20px;}
	.audio-slider .swiper-slide { width: 100%;}	
	.audio-sliderbox .swiper-button-prev, .audio-sliderbox .swiper-button-next { height: 100%;}
	.header-row #mainmenu { order: 3; border: solid 1px var(--secondry); border-radius: 8px; margin-left: 15px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; padding: 4px 10px; }
	.header-row .button { margin-left: auto; white-space: nowrap;}

	.profilebox-reverse { margin-top: 0; }
	.profilebox-reverse .profilepicbox { margin-left: 0; }

	.eventdetailwrapper .mainimg:before { height: 100%; }
	.eventdetailwrapper .mainimg figcaption { bottom: 25px; padding: 0 20px; flex-direction: column; }
	.eventdetailwrapper .mainimg figcaption h3 { margin-bottom: 15px; text-align: center; }

	.eventdetailwrapper .col { width: 100%; }
}  

/*==========================================================================================================*/
@media only screen and (max-width: 767px) {

	.default-grid.cols3 .col { width:50%; }
	.tabnav { display:none; }
	.tab-container { padding:0; border:none;}
	.tab-data { margin:0 0 30px; }
	.tab-data .tabnav { display:none; }
	.tab-container .tabMobiletrigger { background:#f3f3f3; border:medium none; font-size:15px !important; text-transform:uppercase; margin:0 0 7px; padding:16px 54px 16px 16px; position:relative; cursor:pointer; font-weight:bold; }
	.tabMobiletrigger:after { border-left:8px solid rgba(0, 0, 0, 0); border-right:8px solid rgba(0, 0, 0, 0); border-top:8px solid #848690; content:""; margin-top:-3px; position:absolute; right:19px; top:50%; }
	.tabMobiletrigger:before { background:rgba(0, 0, 0, 0.08); content:""; height:100%; position:absolute; right:0; top:0; width:54px; z-index:1; }
	.tabcontent { padding:15px 0; margin:0; }
	.tabMobiletrigger.rotate:after { border-top-color:#272c2f; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
	
	.heading-listblock.cols2 .col, .dropcaps-box.cols2 .col { width:100%; }
	h1, h2 { font-size:40px; }
	.sldinfobox p { font-size: var(--bodyfontsizesmall);}
	.giving-box { min-width: inherit; padding: 20px; }
	.hero-banner { padding: 30px 0; }
	.hero-infobox .wrap { margin-bottom: 30px;}
	.sldinfobox { margin-top: 30px;}
	.hero-sliderbox { padding: 0 20px;}
	.donorlistbox .col { width: 100%;}
	.pro-outerbox, .ministriesouterbox, .audio-outerbox, .blog-outerbox, .worship-outerbox, .video-outerbox, .cnt-outerbox { padding: 30px 0; margin-bottom: 0; }
	.video-outerbox { padding-top: 0;}
	.videobox { margin-bottom: 30px;}
	.section-headingbox { margin-bottom: 25px;}
	.ministriesbox {  gap: 20px;}
	.ministrybox { width: 100%;}
	
	.buttonrow { padding-top: 30px;}
	.bloglistbox { flex-direction: column; gap: 30px;}
	.bloglistbox .col { width: 100%;}
	.audio-sliderbox { padding: 0 40px;}
	.audio-sliderbox .swiper-button-prev, .audio-sliderbox .swiper-button-next {  width: 30px;}
	.audio-sliderbox .swiper-button-prev i, .audio-sliderbox .swiper-button-next i { font-size:18px;}
	.cnt-frombox { padding: 20px}

	.header-row .button.poptrigger { display: none; }

	.followlink.nolinktitle { margin-left: 0; }

	#footer .d-flex { flex-direction: column; justify-content: center; }
	#footer .copyright { margin: 0 0 10px; }

	.pop-contentbox .cols { display: block; } 
	.pop-contentbox .cols .col { width: 100%; }

	.pop-contentbox:not(#givingpopup .pop-contentbox) { height: calc(100vh - 200px); overflow-y: auto; }

	#givingpopup .popup-block .pop-contentbox { padding: 20px; }
	.pop-contentbox .col { text-align: center; }

	.innerbanner { padding: 60px 0; }
	.innerbanner .bannertitle:after { width: 80px; }
}
/*==========================================================================================================*/
/* only iphone4 landscape & Potriat 300 by 480*/
@media only screen and (max-width: 567px) {
	
	
	.default-grid.cols3 .col, .default-grid.cols2 .col, .default-grid.cols4 .col { width:100%; }
	table.res-table tr th { display:none; }
	table.res-table tr td { display:block; position:relative; padding-left:50%; }
	table.res-table td:before { content: attr(data-th) ": "; font-weight: bold; width: 50%; display:block; padding-right:10px; position:absolute; left:0; top:0; padding:10px 10px; } 
	table.res-table { border-top:0; }	
	#logo { width:200px; }
	
	.list-block.cols3 .col { width:100%; }
	.image-block figure { width:100%; float:none; padding-right:0; }
	.image-block.right-align figure { padding-left:0; }
	h1, h2 { font-size:34px; }

	.tree-row img{ width: 70px; height: auto; }
	.audio-box h4, .video-outerbox h4 { font-size: 28px; }
	.audio-slider .swiper-slide { padding: 14px}
	#footer { padding: 16px 0}
	.header-row .button { padding: 13px 10px; }
	.header-row .button i { font-size: 20px; }
	.header-row #mainmenu { height: 46px;}
}
/*==========================================================================================================*/
/* only iphone landscape 340 by 478*/
@media only screen and (max-width: 480px) {

	 .form-inline .form-group label, .form-inline .form-group .field-box { float:none; display:block; width:auto; }
	 .form-inline .form-group label { padding: 0 0 5px; }
	.form-inline .form-group label.blank { display:none; }
	h1, h2 { font-size:30px; }
}
/*==========================================================================================================*/
/* only iphone portrait 300 by 479*/
@media only screen and (max-width: 479px) {
	
	#logo { width: 150px; }
	.fmenu { width: 100%; text-align: center; justify-content: center; }
	.copyright { width: 100%; margin: 10px 0 0; text-align: center; }
	/* #mainmenu { margin:12px 0 0; } */
		
} 
/*==========================================================================================================*/
/* Retina css */ 
/*@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
	.sprites, .sp-after:after, .sp-before:before { background-image:url(../images/bgi/sprites@2x.png);
	-moz-background-size:237px 207px; -ms-background-size:237px 207px; -o-background-size:237px 207px; -webkit-background-size:237px 207px; background-size:237px 207px;}
}*/