/*
Theme Name:     Child Twenty Seventeen
Theme URI:      https://www.sewwwa.com
Description:    A Twenty Seventeen child theme developed for Masjid KLCC
Author:         Ardentwire
Author URI:     https://www.ardentwire.com
License:        GNU General Public License v2 or later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Template:       twentyseventeen
Version:        1.0
*/

    

body, input, select, textarea {
    font-size: 18px;
    line-height: 1.75;
    font-family: 'Jost', serif; 
    color: #13162f;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
    letter-spacing: 0px;
	}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cinzel", serif;
    font-weight: 500;
	line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0px;
	padding: 0 0 0;
	color: #014046;  
	text-transform: uppercase;
	}

h2, .home.blog .entry-title {
    font-size: 28px;
	}

	
a:focus {
    outline: none;
	}

.entry-content a, .entry-summary a, .widget a, .site-footer .widget-area a, 
.posts-navigation a, .widget_authors a strong { 
	box-shadow: none; 
	}

.entry-content a:focus, .entry-content a:hover, .entry-summary a:focus, .entry-summary a:hover, .comment-content a:focus, .comment-content a:hover, 
.widget a:focus, .widget a:hover, .site-footer .widget-area a:focus, .site-footer .widget-area a:hover, .posts-navigation a:focus, .posts-navigation a:hover, .comment-metadata a:focus, .comment-metadata a:hover, .comment-metadata a.comment-edit-link:focus, .comment-metadata a.comment-edit-link:hover, .comment-reply-link:focus, .comment-reply-link:hover, .widget_authors a:focus strong, .widget_authors a:hover strong, .entry-title a:focus, 
.entry-title a:hover, .entry-meta a:focus, .entry-meta a:hover, .page-links a:focus .page-number, .page-links a:hover .page-number, .entry-footer a:focus, .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover, .entry-footer .tags-links a:focus, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, .pagination a:not(.prev):not(.next):focus, .pagination a:not(.prev):not(.next):hover, .comments-pagination a:not(.prev):not(.next):focus, .comments-pagination a:not(.prev):not(.next):hover, .logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, a:hover .nav-title, .edit-link a:focus, .edit-link a:hover, .site-info a:focus, .site-info a:hover, .widget .widget-title a:focus, .widget .widget-title a:hover, .widget ul li a:focus, .widget ul li a:hover { 
	box-shadow: none !important;
	}

	
.entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, 
.entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, 
.comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, 
.pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, 
.site-footer .widget-area ul li a, .site-footer .widget-area ul li a {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
	}

b, strong {
	font-weight: 500;
	}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder { color: #dddddd; font-family: inherit; font-size: inherit; font-weight: inherit; }
:-moz-placeholder { color: #dddddd; font-family: inherit; font-size: inherit; font-weight: inherit; }
::-moz-placeholder { color: #dddddd; font-family: inherit; font-size: inherit; font-weight: inherit; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ }
:-ms-input-placeholder { color: #dddddd; font-family: inherit; font-size: inherit; font-weight: inherit; }


.site-content-contain {
    background: #ffffff url(https://ardentwire.com/masjidklcc/wp-content/uploads/blog-bg.webp) no-repeat center top / 100%;
	}


.site-header { 
	background-color: transparent; 
	margin-bottom: -180px;
	}
	
.site-branding { 
	position: relative;
	z-index: 1000; 
	width: 100%; 
	/* background: #ffffff; */
	background: transparent;
	transition: all 0.5s ease;  
	padding: 6px 0 5px;
	text-align: center; /* disable this if revert back to normal menu layout */
	}	    

.page-template-page-with-hero .site-branding { 
	background: transparent; 
	}

.site-branding-scrolled,
.page-template-page-with-hero .site-branding-scrolled { 
	position: fixed; 
	background: #014046;
	padding: 0px 0 15px;
	box-shadow: none;
	border-top: 0 none;
	} 

.custom-logo-link {
    line-height: 0;
	padding-top: 10px;
    padding-right: 0;
	padding-left: 0px;
	padding-bottom: 2px;
	transition: all 0.5s ease;
	width: max-content;	
	display: block;
    /* margin: 0 auto;   enable this if revert back to normal menu layout */
	margin: 0 7%;  /* disable this if revert back to normal menu layout */
	display: inline-block; /* disable this if revert back to normal menu layout */
    vertical-align: bottom; /* disable this if revert back to normal menu layout */
	}

.page-template-page-with-hero .custom-logo-link {
	/* filter: invert(100); */
	}

.site-branding-scrolled .custom-logo-link {
    filter: none;
    transition: all 0.5s ease;
    /* width: 100%; enable this if revert back to normal menu layout */
	/* display: none; enable this if revert back to normal menu layout */
	}



.site-branding-text { 
	display: none;  
	}
	
.site-description { 
	display: none; 
	}
	
.site-branding a:hover, .site-branding a:focus { 
	opacity: 1; 
	color: inherit; 
	}

.navigation-top { 
	display: none; 
	}

.menu-main-menu-container {
	padding-top: 17px;
	transition: all 0.5s ease; 
	}

.site-branding-scrolled .menu-main-menu-container {
	transition: all 0.5s ease; 
	padding-top: 15px;
	}

	
.main-navigation {
	transition: all 0.5s ease;
    font-size: 17px;
    letter-spacing: 0;	
	display: inline-block; /* disable this if revert back to normal menu layout */
	width: 30%;  /* disable this if revert back to normal menu layout */
	}

.site-branding-scrolled .main-navigation {
	transition: all 0.5s ease;
    /* background: #f4f4f4;
    padding-right: 5px;  */
	}

.main-navigation ul {
    /* text-align: right; */
	text-align: center;
	}

.main-navigation li {
    margin: 0 10px;
	}
	
.main-navigation a {
	padding: 0 10px;
	color: #ffffff;
	}

.page-template-page-with-hero .main-navigation a {
	color: #ffffff;
	}

 
.site-branding-scrolled .main-navigation a { 
	
	}
	

.main-navigation a:hover, 
.main-navigation a:active, 
.main-navigation a:focus, 
.current-menu-item a { 
	opacity: 1;  
	color: #73ecf8; 
	}

.page-template-page-with-hero .main-navigation a:hover, 
.page-template-page-with-hero .main-navigation a:active, 
.page-template-page-with-hero .main-navigation a:focus, 
.page-template-page-with-hero .current-menu-item a  {  
	color: #73ecf8; 
	}


.site-branding-scrolled .main-navigation a:hover,
.site-branding-scrolled .main-navigation a:active,
.site-branding-scrolled .main-navigation a:focus,
.site-branding-scrolled .current-menu-item a,
.site-branding .current_page_parent a { 
	color: #73ecf8;
	}

.main-navigation a:after {
	/* transition: transform .3s ease-out,border-color .3s ease-out; 
	-ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
	-webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
	position: absolute; 
	display: block; 
	bottom: -3px; 
	left: 0; 
	width: 100%; 
	-ms-transform: scaleX(0); 
	-webkit-transform: scaleX(0); 
	transform: scaleX(0); 
	border-top: 1px solid #73ecf8; 
	content: ''; 
	padding-bottom: inherit; */
	}
	
.main-navigation a:hover:after, 
a.active:after, 
.current-menu-item a:after,
.current_page_parent a:after  { 
	/* backface-visibility: hidden; 
	-ms-transform: scaleX(1); 
	-webkit-transform: scaleX(1);
	transform: scaleX(1);  */
	}
	
.site-branding-scrolled .main-navigation a:hover, 
.site-branding-scrolled .main-navigation a:active, 
.site-branding-scrolled .main-navigation a:focus { 
	opacity: 1; 
	}

.site-branding-scrolled .main-navigation a:after { 
	
	}

.main-navigation ul ul { 
	border: 0 none; 
	box-shadow: /* 0 1px 4px rgba(0,0,0,0.1) */ none;
	background: #356a6e; 
	text-align: left;	
	}

.main-navigation li li {
    margin: 0;
	}
	
.main-navigation ul li:hover > ul, 
.main-navigation ul li.focus > ul { 
	left: 0.3em;
	}
	
.main-navigation ul ul a { 
	padding: 0.5em 1em;
    margin: 0 auto;
    width: auto;
    min-width: 11em;
    max-width: 25em; 
	}

.main-navigation ul ul a:hover, 
.main-navigation ul ul a:focus, 
.main-navigation ul ul a:active { 
	
	}
	
.home .main-navigation ul ul a { 
	
	}
	
.main-navigation li li:hover, .main-navigation li li.focus { 
	background: transparent; 
	}

.main-navigation ul ul a:after { 
	display: none; 
	}

.main-navigation ul li.menu-item-has-children.focus:before, 
.main-navigation ul li.menu-item-has-children:hover:before, 
.main-navigation ul li.menu-item-has-children.focus:after, 
.main-navigation ul li.menu-item-has-children:hover:after, 
.main-navigation ul li.page_item_has_children.focus:before, 
.main-navigation ul li.page_item_has_children:hover:before, 
.main-navigation ul li.page_item_has_children.focus:after, 
.main-navigation ul li.page_item_has_children:hover:after { 
	display: none; 
	}



/* top right menu */

.main-navigation li.top-menu-wa a {
    margin: 0 0px 0 20px;
    padding: 10px 55px;
    color: #ffffff;
	background-color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 rgb(0 0 0 / 24%);
	transform: translate3d(0, 0, 0);
	transition: background-color 0.25s ease-in, border-color ease-in, transform 0.75s cubic-bezier(0.44, 0.51, 0.24, 0.99), box-shadow 1s cubic-bezier(0.44, 0.51, 0.24, 0.99);
	}
	
.main-navigation li.top-menu-wa a:hover,
.main-navigation li.top-menu-wa a:focus {

	box-shadow: 0 6px 24px rgb(0 0 0 / 14%);
	transform: translate3d(0, -3px, 0);
	}	
	
.main-navigation li.top-menu-wa a:after {
	display: none;
	}

/* end top right menu */



.widget { 
	padding-bottom: 0; 
	}
	
.widget ul li, .widget ol li { 
	border-bottom: 0 none; 
	border-top: 0 none; 
	}

.widget ul, .widget ol {  
	padding: 0 0 0 20px;
	}

label { 
	font-weight: normal; 
	color: #1c1d1d; 
	margin-bottom: 0.3em; 
	line-height: 20px; 
	}
	
input[type="text"], 
input[type="email"], 
input[type="url"], 
input[type="password"], 
input[type="search"], 
input[type="number"], 
input[type="tel"], 
input[type="range"], 
input[type="date"], 
input[type="month"], 
input[type="week"], 
input[type="time"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="color"], 
textarea { 
	padding: 12.48px 9.88px;
    width: 100%;
    line-height: 1.35;
    background-color: #e8f8fa;
    /* box-shadow: none; */
    border-radius: 0px; 
    border: 1px solid #e8f8fa;
	}


input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
input[type="number"]:focus, 
input[type="tel"]:focus, 
input[type="range"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="week"]:focus, 
input[type="time"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="color"]:focus, 
textarea:focus {
    /* color: #ffffff;*/
    border-color: #f5f5f5;
    background:  #f5f5f5;
	}


select {
    border: 0px solid #e8f8fa;
    padding: 12.4px 9.88px;
    height: auto;
    max-height: 2.8em;
    border-radius: 0;
    background: #e8f8fa;
	}

.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid #bcbcbc;
    border-radius: 0px;
	height: auto !important;
	}
	
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: 1.35 !important;
    padding: 12.48px 9.88px;
}	
	
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;	
	}

.select2-results__option[aria-selected], .select2-results__option[data-selected] {
    padding: 6px;
	}

button, 
input[type="button"], 
input[type="submit"], 
input + button, 
input + input[type="button"], 
input + input[type="submit"] {
    background: transparent;
    color: #ffffff !important;
    line-height: 16px;
    transition: all 0.2s;
    font-size: 20px !important;
    padding: 16px 21px;
    border: 2px solid #53a6ad;
    border-radius: 24px;
    letter-spacing: 0;
    width: 100%;
    font-family: "Cinzel", serif;
	} 
	
:not( .mejs-button ) > button:hover, 
:not( .mejs-button ) > button:focus, 
button:hover, button:focus, 
input[type="button"]:hover, 
input[type="button"]:focus, 
input[type="submit"]:hover, 
input[type="submit"]:focus {
	background: #53a6ad;
    border: 2px solid #53a6ad;
	text-decoration: underline;
	}



.entry-content a img, .comment-content a img, .widget a img {
    -webkit-box-shadow: none;
    box-shadow: none;
	}


.page header.entry-header {
    display: none;
	}


.page .panel-content .entry-title, 
.page-title, 
body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 56px;
    letter-spacing: 0;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
	}


.page.page-one-column:not(.twentyseventeen-front-page) #primary, 
.archive.page-one-column:not(.has-sidebar) .page-header, 
.archive.page-one-column:not(.has-sidebar) #primary {
    max-width: 1280px;
	}

.page-template-landing-page .entry-header,
.home .entry-header{
	display: none;
	}

.page:not(.home) #content {
    padding-bottom: 0;
	}


/* home */

.su-row .number-facts {
    border-right: 2px solid #73ecf8;
	}
	
.su-row .number-facts:last-child {
    border-right: none;
	}	

.su-row .number-facts h3 {
	line-height: 1em;
	font-size: 54px;
	margin-top: 0px;
	margin-bottom: 0;
	}	

.su-row .number-facts {
	font-size: 18px;
	}

/* about */


.ajk {
    margin-bottom: 0 !important;
}


.pusing-pusing {
  animation: rotation 12s infinite linear;
  width: 130px;
  float: right;
  overflow: hidden;
	}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.certificates img {
	border: 1px solid #dddddd;
	transform: perspective(400px) rotateY(20deg);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 25px 20px -20px;
	transition: all 0.3s linear;
	
	}

.certificates img:hover {
	transform: perspective(400px) rotateY(5deg);
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
	cursor: crosshair;
	}	
	
.containerX {
  display: flex;
  width: 100%;
  height: 50px;
  position: relative;
  overflow: hidden
  
	}

.scroll-containerX {
    
	}

.carousel-primary, .carousel-secondary {
    align-items: flex-end;
    top: 0%;
    left: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
	}

.carousel-primary img {
	width: auto;
    margin-left: 18px;
    height: 49px;
	filter: contrast(3) grayscale(1);
    opacity: 0.7;
	transition: all 0.3s ease;  
	}

.carousel-primary img:hover {
	filter: none;
    opacity: 1;
	}

.carousel-primary {
    display: flex;
    justify-content: space-around;
	flex-wrap: wrap;
    animation: scroll-horizontal 20s linear infinite;
	}

.carousel-secondary {
  animation: scroll-horizontal 20s linear infinite;
  animation-delay: 10s;
	}



@keyframes scroll-horizontal {
  0% {
    left: 100%;
  }

  100% {
    left: -100%;
  }
}

.carousel-primary:hover,
.carousel-primary:hover~.carousel-secondary {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
	}

.carousel-secondary:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
	}


.scroll-containerX:hover>.carousel-primary:not(:hover) {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
	}

/* product page */
.panel-grid-cell .product-thumb .widget-title {
    margin-top: 5px;
	margin-bottom: 0;
    font-size: 20px;
    text-align: center;  
	}
	

/* Blog */
.blog .site-main, 
.archive .site-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3%;
	margin-bottom: 10%;
	}

.blog article.post .entry-content p,
.archive article.post .entry-content p  {
    display: none;
	}



.post-thumbnail a:hover img, .post-thumbnail a:focus img {
    opacity: 1;
    filter: brightness(1.1) contrast(1);
	}
	
.post-thumbnail a img {
    transition: all 0.2s;
	}	

/* Single post */
.single .site-content-contain {
    background: url(https://ardentwire.com/masjidklcc/wp-content/uploads/blog-bg.webp) repeat center top / 100%;
	}

.single article {
    background: #fff;
    border-radius: 15px;
    padding: 25px 30px 0px;
	margin-bottom: 20%;
	}

.single .byline, .group-blog .byline {
    display: none;
	}

.single-post .entry-title, 
.page .entry-title {
    font-size: 36px;
	font-family: Cinzel;
	letter-spacing: 0;
	}

.single .post-navigation {
    display: none;
	}

/* 404 */
.error404 .site-header,
.error404 .site-footer,
.error404 .wabutton,
.error404 .infaqbutton
 {
    display: none !important;
	}

.error404 .site-content-contain {
    background: url(https://ardentwire.com/masjidklcc/wp-content/uploads/blog-bg.webp) repeat center / 100%;
    height: 100vh;
	}

.error404 h2 {
    color: #ffffff !important;
	font-size: 32px;
	}

.error404 a {
    color: #73ecf8 !important;
    box-shadow: 0 3px 0 !important;
	}

.error404 .contact_section-container {
    display: none !important;
	}
	


/* footer */

.site-footer {
    border-top: 0 none;
	background: #014046;
	margin-top: 0;
	letter-spacing: 0.5px;
	}

.site-footer .wrap {
	padding-bottom: 5px;
    padding-top: 5px;
	}

.site-info {
    width: auto;
	font-size: 15px;
	color: #ffffff; 
	}

.site-info-right {
	float: right;
	}

.footer-logo {
	width: 85px;
	display: none;
	}

.site-info a {
    color: #ffffff;
    margin: 0 6px;
	}
	
.site-info a:hover,	
.site-info a:focus {
    color: #73ecf8;
	box-shadow: 0px 1px 0 #73ecf8 !important;
	}	

.site-info-sep {
	margin: 0 5px;
    color: transparent;
    font-size: 13px;
	}

.social-navigation {
    clear: none;
    width: auto;
	}

.grecaptcha-badge { 
	opacity: 0 !important; 
	z-index: -1;
	}

/* back to top */
.topbutton { 
	background-color: rgba(49,49,49,0.7); 
	color: #ffffff !important;  
	height:40px; 
	width:40px; 
	position:fixed; 
	right:0; bottom: 5px; 
	padding-top: 9px; 
	text-align: center; 
	z-index:10; 
	display:none; 	
	}
	
.topbutton:hover { 
	background-color: #313131; 
	color: #66829f  !important; 
	}

/* whatsapp */
.wabutton {
    background: #139e02;
    color: #ffffff !important;
    height: auto;
    width: 45px;
    position: fixed;
    right: 0;
    bottom: 200px;
    padding: 15px 5px 15px;
    font-size: 27px;
	font-weight: 500;
    text-align: center;
    line-height: 22px;
    z-index: 100;
    border-radius: 2px 0 0 2px;
    transition: all ease 0.3s !important;
	}
	
.wabutton:hover { 
	background-color: #313131 !important; 
	color: #5ed850 !important; 
	}

.wabutton span {
	writing-mode: vertical-rl;
    transform: rotate(180deg);
	}
	
.wabutton span:before {
    content: "";
    background: url(https://www.masjidklcc.com.my/wp-content/uploads/wa.webp) no-repeat center center / 100%, radial-gradient(circle, rgba(19,158,2,1) 12px, transparent 12px, transparent 100%);
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: baseline; 
	margin-bottom: 10px;
	transform: rotate(180deg);
	}
	
.wabutton:hover span:after { 
	
	}

/* infaq */

.infaqbutton {
    background: linear-gradient(-90deg, #e8890c, #f5a621);
    color: #ffffff !important;
    height: auto;
    width: 45px;
    position: fixed;
    right: 0;
    bottom: 370px;
    padding: 15px 5px 15px;
    font-size: 27px;
	font-weight: 500;
    text-align: center;
    line-height: 22px;
    z-index: 100;
    border-radius: 2px 0 0 2px;
    transition: allease 0.3s !important;
	}

.infaqbutton:hover {
    background: #001c1f !important;
    color: #f5a621 !important;
	}

.infaqbutton span {
	writing-mode: vertical-rl;
    transform: rotate(180deg);
	}
	
.infaqbutton span:before {
    content: "";
    background: url(https://www.masjidklcc.com.my/wp-content/uploads/infak-ikon3.webp) no-repeat center center / 100%;
    width: 26px;
    height: 26px;
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: 10px;
    transform: rotate(180deg);
	}

/* edit-link  */ 
/* hr { 
	display: none !important; 
	}
.edit-link { 
	display: block !important; 
	}
	 */ 

.entry-footer .edit-link a.post-edit-link { 
	font-weight: normal; 
	}
	 
.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) { 
	border-top: 0px none; 
	}


/* contactform7 */
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0em 1em;
	padding: 0;
	}

/* Placeholder text color -- selectors need to be separate to work. */
/* input[type="text"], input[type="email"], input[type="number"]  textarea */
.wpcf7-text::placeholder, .wpcf7-textarea::placeholder  { color: #014046; }
.wpcf7-text::-webkit-input-placeholder, .wpcf7-textarea::-webkit-input-placeholder { color: #014046; }
.wpcf7-text :-ms-input-placeholder, .wpcf7-textarea:-ms-input-placeholder { color: #014046; }
.wpcf7-text::-moz-placeholder, .wpcf7-textarea::-moz-placeholder { color: #014046; }



.wpcf7 form.sent .wpcf7-response-output {
    border: 0 none !important;
    color: #73ecf8 !important;
	}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7-not-valid-tip {
    border: 0 none !important;
    background: #ff3542 !important;
    padding: 0 10px;
    width: fit-content;
    color: #fff;
    line-height: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
  }



/* site origin page builder */
#hero h2.sow-headline span {
	/*background: linear-gradient(to bottom, transparent 0%, transparent 80%, #73ecf8 80%, #73ecf8 92%, transparent 92%, transparent 100%)  */
	}

.so-widget-sow-button .ow-button-base a {
	/*  -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;	*/
	text-transform: uppercase !important;
	}

.so-widget-sow-button .ow-button-base a:hover {
	/* border: 2px solid #73ecf8; */
	}

.so-widget-sow-button .ow-button-base a:before {
   /* content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #73ecf8;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; */
	}


.so-widget-sow-button .ow-button-base a:hover span, 
.so-widget-sow-button .ow-button-base a:focus span, 
.so-widget-sow-button .ow-button-base a:active span {
    /* color: #ffffff;  */
	}

.so-widget-sow-button a:hover:before, 
.so-widget-sow-button a:focus:before, 
.so-widget-sow-button a:active:before {
    /* -webkit-transform: scaleX(1);
    transform: scaleX(1);  */
	}

.so-widget-sow-button .ow-button-base a:hover span .sow-icon-elegantline {
	/* color: #ffffff !important;   */
	}


.sow-features-feature h3  {
	margin-bottom: 5px !important;
	}
	
.sow-blog article .sow-entry-header .sow-entry-title {
    font-weight: 500 !important;
    }

.sow-blog .sow-post-navigation {
    display: none !important;
	}

.so-widget-sow-blog .sow-blog-layout-grid .sow-blog-posts article {
    box-shadow: rgba(0, 0, 0, 0.1) -2px 3px 8px -6px;
	}

/* shortcode ultimate plugin */

.contact_section-container .su-row {
    margin-bottom: 5px !important;
	}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    right: 0;
	border-radius: 0;
	}

.mfp-image-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:hover {
    background: transparent;
    border-color: transparent;
	}	
	
#organisasi .su-row {
    margin-bottom: 0 !important;
	} 


	
/* responsive menu plugin */
button.rmp_menu_trigger:hover,
button.rmp_menu_trigger:focus { 
	border: 0px none !important; 
	}




.mobile-only { 
	display: none !important; 
	}



/* ------------- responsiveness max ------------------- */

@media screen and (max-width: 1279px ) {


}


@media screen and (max-width: 1194px ) {

}



@media screen and (max-width: 1024px ) {

.site-branding {
    position: fixed;
    border-top: 0 none;
	}

.site-branding-scrolled {
    /* background: linear-gradient(to right, #73ecf8 0%, #73ecf8 37%, #f4f4f4 37%, #f4f4f4 100%); */
	}

.site-branding-scrolled .custom-logo-link {
    padding-left: 0px;
	padding-right: 15px;
    width: fit-content;
	}

.containerX {
    
	}
	
.carousel-primary {
flex-wrap: nowrap;
	}
	
.carousel-primary, .carousel-secondary {
    align-items: flex-start;
	}	
	
.carousel-primary img {
    margin-bottom: 5px;
	}	


.site-info {
    text-align: center;
	float: none;
    width: 100%;
	}

.footer-logo {
    display: none;
    margin: 0 auto 3px;
	}

.social-navigation {
    float: none;
    margin: 5px auto 0;
	}
	
}


@media screen and (max-width: 980px ) {




}

@media screen and (max-width: 860px ) {


.su-row .number-facts h3 {
	font-size: 44px;
	}	

.su-row .number-facts {
	font-size: 16px;
	}

}


@media screen and (max-width: 768px ) {

.page-header {
    margin-top: 220px;
    padding-bottom: 0;
	}

.su-row .number-facts {
    border-right: none;
	}

#organisasi .su-row .su-column+.su-column {
    margin: 0rem 0 0 !important;
	}

.ajk .su-column+.su-column {
    margin: 0 0 0 !important;
	}

}

@media screen and (max-width: 680px ) {


}




@media screen and (max-width: 480px ) {

.blog .site-content-contain,
.archive .site-content-contain {
    background: #ffffff url(https://ardentwire.com/masjidklcc/wp-content/uploads/blog-bg.webp) repeat center / 500px;
	}

.single .site-content-contain {
    background: #ffffff url(https://ardentwire.com/masjidklcc/wp-content/uploads/blog-bg.webp) no-repeat center top / auto 220px;
	}

body, input, select, textarea {
	
	}

.custom-logo-link img {
    
	}

.site-branding-scrolled .custom-logo-link img {
    max-height: 36px;
	}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    }

.page .panel-content .entry-title, 
.page-title, 
body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 36px;
    }

.wrap {
    padding-left: 1.5em;
    padding-right: 1.5em;
	}

.panel-content .wrap {
    padding-top: 0;
	padding-bottom: 0;
	}

.blog .site-main, 
.archive .site-main, 
.search .site-main {
    display: block;
    margin-bottom: 30%;

	}


.blog .site-main > article, 
.archive .site-main > article, 
.search .site-main > article {
    padding-bottom: 0;
    background: #ffffff;
	margin-bottom: 40px;
	}

.blog .site-main > article .post-thumbnail, 
.archive .site-main > articlee .post-thumbnail, 
.search .site-main > articlee .post-thumbnail {
    margin-bottom: 0;
	}

.blog .site-main > article .entry-header, 
.archive .site-main > articlee .entry-header, 
.search .site-main > articlee .entry-header {
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 18px;
	}

.single article {
    background: #ffffff;
    border-radius: 0;
    padding: 0px 0px 0px;
    margin-bottom: 30%;
	}

.single .entry-header {
    margin-top: 220px;
	}

.su-row .number-facts h3 {
	font-size: 48px;
	margin-bottom: 3px;
	}	

.sow-blog article .sow-entry-header .sow-entry-title {
    font-size: 22px;
	}

.containerX {
    display: block;
	}
	
.carousel-primary {
	display: inline-block;
	}

.carousel-primary img {
    margin-bottom: 5px;
	display: inline-block;
	}

.why-us .so-widget-sow-features .sow-features-list .sow-features-feature.sow-icon-container-position-top .sow-icon-container {
    margin: 0 0 10px !important;
	}	

.why-us .so-widget-sow-features .sow-features-list.sow-features-responsive .textwidget, 
.why-us .so-widget-sow-features .sow-features-list.sow-features-responsive .textwidget > h5 {
        text-align: left !important;
    }

.certificates img {
	transform: none;
	transition: all 0.3s linear;
	
	}

.certificates img:hover {
	transform: none;
	}	

.site-footer .wrap {
    padding-bottom: 60px;
	}

.sep-desktoponly {
	display: none;
	}

.topbutton {
	position: relative; 
	float: right; 
	bottom: 45px; 
	display: none !important;
	}
	
.wabutton {
    right: 0;
    bottom: 22%;
    font-size: 0;
    height: 56px;
    width: 52px;
    padding: 16px 5px 16px;
	}

.wabutton span:before {
    margin-bottom: 0;
    }

.infaqbutton {
	background:  linear-gradient(0deg, #e8890c, #f5a621);
    width: auto;
    left: 5%;
    bottom: 0%;
    padding: 12px 5px 15px;
    border-radius: 7px 7px 0 0px;
    right: 5%;
	}

.infaqbutton span {
    writing-mode: inherit;
    transform: none;
	}

.infaqbutton span:before {
    width: 25px;
    height: 25px;
    vertical-align: bottom;
    margin-bottom: 0;
    transform: none;
    margin-right: 10px;
	}

.desktop-only  {
	display: none !important;
	}

.mobile-only {
	display: block !important;
	}

}

@media screen and (max-width: 375px ) {


}

@media screen and (max-width: 320px ) {


}	


/* ------------- responsiveness min ------------------- */

@media screen and (min-width: 360px) {
	
.home.blog .entry-title, 
.page .panel-content .recent-posts .entry-title {
font-size: 32px;
	}

}




@media screen and (min-width: 481px) {

.custom-logo-link img {
    /* max-width: 125px; */
    max-height: 105px;
	}

.site-branding-scrolled .custom-logo-link img { /* disable this if revert back to normal menu layout */
    max-height: 30px;
	}

.wrap,
.page-one-column .panel-content .wrap:not(.single) {
    max-width: 1280px;
	}

}

@media screen and (min-width: 768px) { 

.panel-content .wrap {
    padding-bottom: 0;
	}

.page:not(.home) #content {
    padding-bottom: 0;
	}

body:not(.has-sidebar):not(.page-one-column) .page-header, 
body.page-two-column:not(.archive) #primary .entry-header, 
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
    float: none;
    width: 100%;
    margin: 200px auto 60px;
	}

.archive.page-one-column:not(.has-sidebar) .page-header {
    float: none;
    width: 100%;
    margin: 200px auto 60px;
	}
 
.archive.page-one-column:not(.has-sidebar) #primary {
    float: none;
    width: 100%;
    margin: 0 auto;
	}

.blog:not(.has-sidebar) #primary article, 
.archive:not(.page-one-column):not(.has-sidebar) #primary article, 
.search:not(.has-sidebar) #primary article, 
body.page-two-column:not(.archive) #primary .entry-content, 
body.page-two-column #comments {
    float: none;
    width: 100%;
    margin: 0 auto;
	padding-bottom: 0;
	}

.single-post:not(.has-sidebar) #primary {
    margin-left: auto;
    margin-right: auto;
    max-width: 58%;
    margin-top: 20%;
	}

}

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


}

@media screen and (min-width: 1025px ) {



}

@media screen and (min-width: 1280px ) {

.site-branding .wrap {
    /* display: grid;
    grid-template-columns: 16% 84%;
    grid-gap: 0% 0%; */
}

}

@media screen and (min-width: 1480px ) {

}

@media screen and (min-width: 1600px ) {


}

@media screen and (min-width: 1680px ) {

}

@media screen and (min-width: 1680px ) {

}


/* ------------- responsiveness in between ------------------- */

@media screen and (max-width: 1024px) and (min-width: 481px) {
  #contact .sow-headline,
  #contact .sow-sub-headline  {
    text-align: left;
  }
}