/* --------------------------------------------
---------- V.1.0.0 FFF Themes Framework By : ----------
------------ copyright firdaus.asia ------------------- */
:root{
	--fff-grid-col-100: repeat(100,1fr);
	--fff-grid-col-50: repeat(50,1fr);
	--fff-grid-col-25: repeat(25,1fr);
	--fff-grid-col-20: repeat(20,1fr);
	--fff-grid-col-10: repeat(10,1fr);
	--fff-grid-col-12: repeat(12,1fr);
	--fff-grid-col-6: repeat(6,1fr);
	--fff-grid-col-5: repeat(5,1fr);
	--fff-grid-col-4: repeat(4,1fr);
	--fff-grid-col-3: repeat(3,1fr);
	--fff-grid-col-2: repeat(2,1fr);
	--fff-grid-col-1: repeat(1,1fr);
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fff-sticky{
	position: sticky !important;
	align-self: flex-start;
	top: 0;
}
.fff-align-self{
	align-self: flex-start;
}
fff-grid-col-5 { grid-template-columns:20% 20% 20% 20% 20%;}
fff-grid-col-5 { grid-template-columns: repeat(5,1fr);}
button, input, textarea{
	max-width: 100%;
	transition: color 0.2s linear, box-shadow 0.3s ease-out, background 0.2s linear, border 0.2s linear;
	-webkit-transition: color 0.2s linear, box-shadow 0.3s ease-out, background 0.2s linear, border 0.2s linear;
	-moz-transition: color 0.2s linear, box-shadow 0.3s ease-out, background 0.2s linear, border 0.2s linear;
}
button{
	cursor: pointer;
}
hr{
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #ccc;
	margin: 15px 0;
}
img{
	max-width: 100%;
	height: auto;
}
blockquote{
	background-color: #f1f1f1;
	padding: 15px;
	margin-top: 30px;
	margin-bottom: 30px;
}



/* ================================ */
/* ============ Table ============== */
/* ================================ */
table{
	border-collapse: collapse;
	border-spacing: 0;
	
}
table{
	background: #FFFFFF;
	border: solid 1px #DDDDDD;
	margin-bottom: 1.25rem;
	table-layout: auto;
	
}

table thead {
    background: #F5F5F5;
}



table tr th, table tr td {
    color: #222222;
    font-size: 0.875rem;
    padding: 0.5625rem 0.625rem;
    text-align: left;
}

table thead tr th, table thead tr td{

    color: #222222;
    font-size: 0.875rem;
    font-weight: bold;
    padding: 0.5rem 0.625rem 0.625rem;

}
table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
    display: table-cell;
    line-height: 1.125rem;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
    background: #F9F9F9;
}
table{
	max-width: 100%;
}
/* ================================ */
/* ============ FORM ============== */
/* ================================ */

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

pre,code{
	max-width: 100%;
	border: 1px solid #ccc;
	color: #222;
	background-color: #ddd;
	display: block;
	overflow: auto;
	padding: 5px;
}

button {
  overflow: visible; 
}


button,
select {
  text-transform: none; 
}


button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {

	 -webkit-appearance: button;
	cursor: pointer;
	padding: 10px 15px;
	border: 1px solid #ccc;
	background-color: #555;
	color: #fff;
	font-weight: bold;
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover{
	color: #fff;
	background-color: #333;
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus{
	color: #fff;
	background-color: #777;
}

button[disabled],
html input[disabled] {
  cursor: not-allowed; 
  }


button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; 
  }


input {
  line-height: normal; 
  }


input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
 }


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; 
  }

input[type="search"] {
	
	-webkit-appearance: textfield;
	
}


input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; 
}
select{
	
padding: 7px 16px;
border: 1px solid #cacaca;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], input[type="number"], input[type="search"], textarea {
 
   
    padding: .5rem;
    border: 1px solid #cacaca;
    font-family: inherit;
    border-radius: 3px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus{
	border-color: #999;
	background-color: #fbfbfb;
}

.fff-MP-0{
	margin:0;
	padding: 0;
}
.fff-box-radius{
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	border-color: #d8d8d8;
	padding: 15px;
	background: #f2f2f2;
}
.fff-hidden{
	display: none;
	visibility: hidden;
}
.fff-margin-auto{
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.fff-min-height-1{
	min-height: 1px;
}

.fff-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 46%);
}
.fff-italic{
	font-style: italic;
}

/* ----------------------------------------------------- */
/* ---- Heading ---------------------------------------- */
/* ----------------------------------------------------- */

h1,h2,h3,h4,h5,h6{
	line-height: 1.5em;
	letter-spacing: 0.9px;
}
h1{font-size: 45px; margin: 45px 0;}
h2{font-size: 38px; margin: 38px 0;}
h3{font-size: 28px; margin: 28px 0;}
h4{font-size: 25px; margin: 25px 0;}
h5{font-size: 20px; margin: 20px 0;}
h6{font-size: 16px; margin: 16px 0;}


.fff-past{
	display: block;
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.fff-full{
	display: block;
	padding-left: 15px;
	padding-right: 15px;	
}
.fff-row{
	margin-left: -15px;
	margin-right: -15px;
}
.fff-clear:before,
.fff-clear:after,
.fff-past:before,
.fff-past:after,
.fff-full:before,
.fff-full:after,
.fff-row:before,
.fff-row:after{
	display: table;
	content: " ";
}

.fff-clear:after,
.fff-past:after,
.fff-full:after,
.fff-row:after{
	content: " ";
	clear: both;
}


.fff-1000,
.fff-917,
.fff-950,
.fff-900,
.fff-850,
.fff-833,
.fff-800,
.fff-750,
.fff-700,
.fff-667,
.fff-650,
.fff-600,
.fff-583,
.fff-550,
.fff-500,
.fff-400,
.fff-450,
.fff-417,
.fff-350,
.fff-333,
.fff-300,
.fff-250,
.fff-200,
.fff-150,
.fff-167,
.fff-100,
.fff-083,
.fff-050{
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}

.fff-1000 {
  width: 100%;
}
.fff-917{
  width: 91.66666667%;
}
.fff-950{
  width: 90%;
}
.fff-900{
  width: 90%;
}
.fff-850{
  width: 85%;
}
.fff-833 {
  width: 83.33333333%;
}
.fff-800 {
  width: 80%;
}
.fff-750 {
  width: 75%;
}
.fff-700 {
  width: 70%;
}
.fff-667 {
  width: 66.66666667%;
}
.fff-650 {
  width: 65%;
}
.fff-600 {
  width: 60%;
}
.fff-583 {
  width: 58.33333333%;
}
.fff-550{
  width: 55%;
}
.fff-500 {
  width: 50%;
}
.fff-450{
  width: 45%;
}
.fff-400 {
  width: 40%;
}
.fff-417 {
  width: 41.66666667%;
}
.fff-350{
  width: 35%;
}
.fff-333 {
  width: 33.33333333%;
}
.fff-300 {
  width: 30%;
}
.fff-250 {
  width: 25%;
}
.fff-200{
  width: 20%;
}
.fff-167 {
  width: 16.66666667%;
}
.fff-150{
  width: 15%;
}
.fff-100{
  width: 10%;
}
.fff-083 {
  width: 8.33333333%;
}
.fff-050{
  width: 5%;
}
.fff-space-box-shadow-in{
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: inset 0px 10px 10px 0px rgb(0 0 0);
    z-index: 1;
    height: 100%;
    pointer-events: none;
}

.fff-float-left{
	float:left;
}
.fff-float-right{
	float:right;
}
.fff-float-none{
	float:none;
}
.fff-text-uppercase{
	text-transform: uppercase;
}
.fff-font-italic{
	font-style: italic;
}
.fff-text-center{
	text-align: center;
}
.fff-text-left{
	text-align: left;
}
.fff-text-right{
	text-align: right;
}
.fff-text-justify{
	text-align: justify;
}
.fff-block{
	display: block;
}
.fff-block-a{
	display:block;
}
.fff-relative{
	position: relative;
}
.fff-absolute{
	position: absolute;
}
.fff-inherit{
	position: inherit;
}
.fff-menu-list{
	display: block;
	position: relative;
}
.fff-menu-list-reset{
	margin: 0;
	padding: 0;
	list-style: none;
}
.fff-menu-list ul{
	margin: 30px 0;
	padding: 0;
}
.fff-menu-list ul li{
	display: inline-block;
	margin-right: 5px;
}
.fff-menu-list ul li a{
	display: block;
	
}
.fff-M-0{
	margin: 0;
}
.fff-padding-0{
	padding: 0;
}
.fff-flex{
	display: flex;
	flex-wrap: wrap;
}
.fff-flex:before,.fff-flex:after,
.fff-grid:before,.fff-grid:after{
	content: none;
	display: inherit;
}
.fff-flex-align-item-center,
.fff-align-items-center{
	align-items: center;
}
.fff-align-items-flex-start{
	align-items: flex-start;
}
.fff-align-items-flex-end{
	align-items: flex-end;
}
.fff-justify-content-center{
	justify-content: center;
}
.fffthemes .justify-content-space-between,
.fff-justify-content-space-between{
	justify-content: space-between;
}
.fff-justify-content-flex-end{
	justify-content: flex-end;
}
.fff-justify-content-space-around{
	justify-content: space-around;
}
.fff-justify-content-space-evenly{
	justify-content: space-evenly;
}
.fff-flex-wrap{
	flex-wrap: wrap;
}
.fff-flex-no-wrap{
	flex-wrap: nowrap;
}
.fff-align-content-center{
	align-content: center;
}
.fffthemes .flex-direction-column,
.fff-flex-direction-column{
    flex-direction: column;
}
.fff-flex-direction-row{
	flex-direction: row;
}
.fff-inline-flex{
	display: inline-flex;
}
.fff-overflow-hidden{
	overflow: hidden;
}


/* -------- Toltip -------------- */
.fff-tooltip-hover{
	position: relative;
}
.fff-tooltip {
    position: absolute;
    padding: 5px 10px;
    background-color: #393939;
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    width: max-content;
    top: 200%;
    margin-top: 15px;
    left: 50%;
    visibility: hidden;
    z-index: 1;
    transform: translateX(-50%);
}

.fff-tooltip.animate__animated {
    left: -150%;
    top: 100%;
    display: none;
    visibility: visible;
}

.fff-tooltip-hover:hover .fff-tooltip {
    opacity: 1;
    visibility: visible;
    top: 100%;
}
.fff-tooltip-hover:hover .fff-tooltip.animate__animated{
    display: block;
}
.fff-tooltip:before {
    content: "";
    position: absolute;
    top: -14px;
    border-width: 8px;
    border-style: solid;
    width: 0px;
    border-color: transparent transparent #393939 transparent;
    left: 50%;
    margin-left: -8px;
}


.fff-polygon-star-out{
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.fff-polygon-star-in{
	clip-path: polygon(50% 0, 100% 0, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0 100%, 0 75%, 0 25%, 0 0);
}
.fff-hover-polygon:hover .fff-polygon-star-out{
	clip-path: polygon(50% 0, 100% 0, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0 100%, 0 75%, 0 25%, 0 0);
}
.fff-hover-polygon:hover .fff-polygon-star-in{
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.fff-polygon-rhombus-out{
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.fff-hover-polygon:hover .fff-polygon-rhombus-out{
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
.fff-polygon-1-out{
	clip-path: polygon(15% 0, 100% 15%, 85% 100%, 0 85%);
}
.fff-hover-polygon:hover .fff-polygon-1-out{
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
.fff-polygon-1-in{
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
.fff-hover-polygon:hover .fff-polygon-1-in{
	clip-path: polygon(15% 0, 100% 15%, 85% 100%, 0 85%);
}
/* ----------------------------------------------------------- */
/* = Custom Grid  ---------------------------------------------
-------------------------------------------------------------- */

.fff-grid{
	display: grid;
}
.fff-grid-col-100{
	grid-template-columns: var(--fff-grid-col-100);
}
.fff-grid-col-50{
	grid-template-columns: var(--fff-grid-col-50);
}
.fff-grid-col-25{
	grid-template-columns: var(--fff-grid-col-25);
}
.fff-grid-col-20{
	grid-template-columns: var(--fff-grid-col-20);
}
.fff-gid-col-12{
	grid-template-columns: var(--fff-grid-col-12);
}
.fff-grid-col-10{
	grid-template-columns: var(--fff-grid-col-10);
}
.fff-grid-col-6{
	grid-template-columns: var(--fff-grid-col-6);
}
.fff-grid-col-5{
	grid-template-columns: var(--fff-grid-col-5);
}
.fff-grid-col-4{
	grid-template-columns: var(--fff-grid-col-4);
}
.fff-grid-col-3{
	grid-template-columns: var(--fff-grid-col-3);
}
.fff-grid-col-2{
	grid-template-columns: var(--fff-grid-col-2);
}
.fff-grid-col-1{
	grid-template-columns: var(--fff-grid-col-1);
}

.fff-grid-item{
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;

}
.fff-grid-item-no-padding{
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}
.fff-grid-gap-col-40{
	column-gap: 40px;
}
.fff-grid-gap-col-35{
	column-gap: 35px;
}
.fff-grid-gap-col-30{
	column-gap: 30px;
}
.fff-grid-gap-col-25{
	column-gap: 25px;
}
.fff-grid-gap-col-15{
	column-gap: 15px;
}
.fff-grid-gap-col-10{
	column-gap: 10px;
}
/* ----------------------------------------------------------- */
/* =WordPress Core ---------------------------------------------
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}