/* ==========================================================================
  Wide Screen Layout: From 1200px.
========================================================================== */
@media (max-width: 1200px) {

#topsectioninner, #topheaderinner, #page, #supplementaryinner {
    padding:0 20px;
}
	
		.tactile-header-wrapper {
	width: auto !important;
    left: 90% !important;
}

#access a {
    font-size: 12px;
}


}

@media (max-width: 1135px) {
#topheaderinnermenu {
    width: auto;
    float: left;
}
	
	li#menu-item-7664 {
    padding: 0 10px;
}
	
	#access li {
	padding: 0 25px;
}

}

@media (max-width: 1020px) {
#topsectioninnerright { 
    min-width: auto;
    float: none;
    text-align: center;
    margin: 0;
    padding: 10px 20px 10px 20px;
	margin-right:0;
	padding-right:0; 
	clear: both;
	margin:0 -20px;
}

}

@media (max-width: 800px) {

.postwrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}

#catmenu {
    display:none;
}
	
	#donatebuttonmobile {
    display: inherit;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
}
	
		#donatebuttonmobile a{
   background: #ffcb05;
    border-radius: 25px;
    padding: 10px 20px;
    margin-right: 10px;
    border-color: none;
			color: #fff;
}
	
	.widget {
    clear: both;
    margin: 0 0;
}
	
	div#second {
    padding-top: 0;
}
	
	#supplementary .widget-title {
    margin-bottom: 0;
    padding-bottom: 0;
}
	
	div#third {
    padding-top: 0;
}
	
	div#fourth {
    padding-top: 0;
}
	
	body #gform_wrapper_2 ul.gfield_radio li {
    overflow: inherit !important;
		width:30%;
}
	
	ul#input_3_1 {
    text-align: center;
}
	
	ul#input_3_11 {
    text-align: center;
}

}


@media (max-width: 780px) {
body #gform_wrapper_2 .gform_footer, body #gform_wrapper_4 .gform_footer {
    position: inherit;
    text-align:center;
}
	
body #gform_wrapper_2 .gform_footer input.button, body #gform_wrapper_4 .gform_footer input.button {
    width: auto !important;
}
	
	.quickdodrop {
    margin-right: 0;
    border: 1px solid #fff;
    padding: 5px;
    margin-bottom: 20px;
}
	
	ul#gform_fields_2 {
    display: block;
}

		.quickdoradio {
    text-align: center;
			margin: 0 0 20px 0;
}
	

	
	li#field_4_1 {
    width: 100%;
}

}



@media (max-width: 478px) {
.tactile-header-wrapper {
    top: 46px!important;
}

}
/* ========= end of Wide Screen Layout: From 1200px. ========= */


/* ==========================================================================
  Normal Desktop Layout: From 980px.
========================================================================== */
@media (min-width: 1000px) and (max-width: 1060px) {

.arabdate p {
    font-size: 20px;
    font-weight: 600;
}


}
/* ========= end of Normal Desktop Layout: From 980px. ========= */


/* ==========================================================================
  Tablet Device Layout: From 768px.
========================================================================== */
@media (min-width: 768px) and (max-width: 999px) {

.modal-wrapper.styled .modal {
    width: 80% !important;
}
.arabdate p {
    font-size: 18px;
    font-weight: 600;
}


}
/* ========= end of Tablet Device Layout: From 768px. ========= */

@media (min-width: 781px) and (max-width: 800px) {

.prayercalendaricon {
    float: left;
    margin: 2px 7px 0 30px;
    font-size: 35px;
}
.engdate {
    width: 50%;
    display: flex;
    float: left;
    padding: 20px 0px 0 0px;
    background: #23658d;
    color: #fff;
    min-height: 70px;
}
.arabdate {
    width: 50%;
    display: flex;
    float: left;
    padding: 20px 0px 0;
    background: #23658d;
    color: #fff;
    min-height: 70px;
}
.prayerholderright {
    width: 100%;
    float: none;
    padding: 12px 0 5px;
    font-weight: 600;
    display: inline-block;
}
.modal-wrapper.styled .modal {
    width: 80% !important;
}
.arabdate p {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 0 20px;
}
}


/* ==========================================================================
  Mobile Layout: From 320px.
========================================================================== */
@media (max-width: 780px) {

#topheader {
    padding: 5px 0 3px 0;
}
    .wp-toolbar-active {
    margin-top: 25px;
}
  #topheaderinnerlogo img {
    max-width: 80%;
    padding-top: 26px;
}
	#topheaderinnerlogo {
    padding-top: 13px;
} 
	.tactile-by-bonfire-wrapper {
    max-width: 100%;
}
  .tactile-menu-active {
    top: 73px !important;
}
  .tactile-header-wrapper {
    top: 8px !important;
}
  div#topheaderinnerwatch {
    display: none;
}


}
/* ========= end of Mobile Layout: From 320px. ========= */


/* ==========================================================================
  Wide Mobile Layout: 480px.
========================================================================== */
@media only screen and (min-width: 480px) and (max-width: 780px) {

.prayerholderleft {
    width:100%;
	float:none;
	background:#007BAB;
	color:#fff;
	font-size:22px;
	padding:2% 2%;
}

.prayerholderright {
    width:100%;
	float:none;
	padding: 2% 0;
	display: flex;
}
.prayercalendaricon {
    float: left;
    margin: 2px 7px 0 30px;
    font-size: 35px;
}
.engdate {
    width: 50%;
    display: flex;
    float: left;
    padding: 20px 0px 0 0px;
    background: #23658d;
    color: #fff;
    min-height: 70px;
}
.arabdate {
    width: 50%;
    display: flex;
    float: left;
    padding: 21px 0px 0;
    background: #23658d;
    color: #fff;
    min-height: 69px;
    font-size: 17px;
}
.prayerholderright {
    width: 100%;
    float: none;
    padding: 12px 0 5px;
    font-weight: 600;
    display: inline-block;
}
.livetviframe {
    height: 270px !important;
}
.modal-wrapper.styled .modal {
    width: 80% !important;
}
.arabdate p {
    font-size: 1em;
    font-weight: 600;
}
.prayerholderright {
    width: 100%;
    float: none;
    padding: 12px 0 5px;
    font-weight: 600;
    display: inline-block;
    font-size: 10px;
}
.prayerholder {
    max-width: 90%;
}
.livetviframe {
    height: 200px !important;
}
.modal-wrapper.styled .modal {
    width: 80% !important;
}
.arabdate p {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 0 20px;
}
#topheaderinnerlogo {
   max-width:120px;
   float:left;
   margin-right:15px;
}
#topheaderinnerwatch {
   color:#FF0004;
   font-size:14px;
   font-weight:200;
   padding-top:22px;
   margin-right:10px;
   max-width:130px;
   float:left;
   text-align:center;
}

#topheaderinnerwatch a{
	color: #fff;
	font-size: 11px;
    line-height: 1.2;
}

#topheaderinnerwatch .fas{
	font-size: 21px;
	height: 30px;
}
#topheaderinnerwatch .fas.fa-play-circle{
	color: #f00;
}

#topheaderinnerwatch a:hover{
   color:#d82b32;
}

#topheaderinnersupport {
   padding-top:20px;
   float:left;
}

#topheaderinnersupport a{
   color:#fff;
   font-size:14px;
   font-weight:200;
   background:#d82b32;
   padding:5px 15px;
   -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#topheaderinnersupport a:hover {
	background:#181a22;
}
#taxheaderinnerleft {
    width: 90%;
    float: none;
    font-weight: 200;
    margin: 0 auto;
}
#taxheaderinnerleft h1 {
    font-size: 17px;
    font-weight: 600;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    line-height: 1.2;
}
#taxheaderinnerright {
    width: 80%;
    float: none;
    background: #fff;
    overflow: auto;
    padding: 5%;
    color: #181a22;
    font-size: 13px;
    margin: 15px auto 0;
    display: block;
}
.herobanner, .herobanner2 {
    padding: 50px 0;
}
.herobanner p, .herobanner2 h5{
	font-size: 40px !important;
	line-height: 1.1 !important;
}
.myrevslider{
	max-width:90%;
	margin: 30px auto 0;
}
#topsectioninnerright {
    width: 40%;
}
}
/* ========= end of Wide Mobile Layout: 480px. ========= */



/* ==========================================================================
  Small Mobile Layout
========================================================================== */
@media (max-width: 479px) {
	
	#topheaderinnerlogo img {
    padding-top: 32px;
}
	
	.quickdodrop {
    border: none;
    padding: 0px;
}

.prayerholderleft {
    width:100%;
	float:none;
	background:#007BAB;
	color:#fff;
	font-size:22px;
	padding:2% 2%;
}

.prayerholderright {
    width:100%;
	float:none;
	padding: 2% 0;
	display: flex;
}
.prayercalendaricon {
    float: left;
    margin: 2px 7px 0 30px;
    font-size: 35px;
}
.engdate {
    width: 50%;
    display: flex;
    float: left;
    padding: 20px 0px 0 0px;
    background: #23658d;
    color: #fff;
    min-height: 70px;
}
.arabdate {
    width: 50%;
    display: flex;
    float: left;
    padding: 25px 0px 0px;
    background: #23658d;
    color: #fff;
    min-height: 65px;
    font-size: 15px;
}
.prayerholderright {
    width: 100%;
    float: none;
    padding: 12px 0 5px;
    font-weight: 600;
    display: inline-block;
    font-size: 15px;
    line-height: 2.5;
}
.prayerholder {
    max-width: 90%;
}
.livetviframe {
    height: 200px !important;
}
.modal-wrapper.styled .modal {
    width: 80% !important;
}
.arabdate p {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 0 20px;
}
#topheaderinnerlogo {
   max-width:100px;
   float:left;
   margin-right:15px;
}
#topheaderinnerwatch {
   color: #FF0004;
    font-size: 14px;
    font-weight: 200;
    padding-top: 0px;
    margin-right: 10px;
    /*max-width: 130px;*/
    float: left;
    text-align: left;
    width: 60%;
    clear: right;
}

#topheaderinnerwatch a{
	color: #fff;
	font-size: 11px;
    line-height: 1.2;
}

#topheaderinnerwatch .fas{
	font-size: 21px;
	height: 30px;
}
#topheaderinnerwatch .fas.fa-play-circle{
	color: #f00;
}

#topheaderinnerwatch a:hover{
   color:#d82b32;
}

#topheaderinnersupport {
   padding-top:20px;
   float:left;
}

#topheaderinnersupport a{
   color:#fff;
   font-size:14px;
   font-weight:200;
   background:#d82b32;
   padding:5px 15px;
   -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#topheaderinnersupport a:hover {
	background:#181a22;
}
#infomenu ul li a {
    font-size: 10px;
}
#taxheaderinnerleft {
    width: 90%;
    float: none;
    font-weight: 200;
    margin: 0 auto;
}
#taxheaderinnerleft h1 {
    font-size: 17px;
    font-weight: 600;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    line-height: 1.2;
}
#taxheaderinnerright {
    width: 80%;
    float: none;
    background: #fff;
    overflow: auto;
    padding: 5%;
    color: #181a22;
    font-size: 13px;
    margin: 15px auto 0;
    display: block;
}
.herobanner, .herobanner2 {
    padding: 50px 0;
}
.herobanner p, .herobanner2 h5{
	font-size: 40px !important;
	line-height: 1.1 !important;
}
.myrevslider{
	max-width:90%;
	margin: 30px auto 0;
}
#topsectioninnerright {
    width: 40%;
}
.categorygrid h2 {
    font-size: 18px;
}
#topsection {
	display:none;
}
.prayerholderright .name{
	float: left;
	margin: 0 0 0 20px;
}
.prayerholder #fajr, .prayerholder #sunrise, .prayerholder #dhur, .prayerholder #asar, .prayerholder #magrib, .prayerholder #isha{
	float: right;
	margin: 0 32px 0 0;
	font-weight: 400;
}
.prayerholderright .section{
	width:100%;
	text-align: inherit;
}
.tactile-menu-button {
    right: 10px;
    left: auto !important;
}
.jobdetails {
    border-right: 0px solid #3c96d1;
    padding-right: 0px;
}
	
.tactile-header-wrapper {
    height: 20px !important;
}
	
	.tactile-header-menu-logo-search-wrapper {
    height: 20px !important;
}
}
/* ========= end of small Mobile Layout ========= */