/* Custom Stylesheet */

 
html {
	font-family: Helvetica, Arial;
	font-size: 1.0em;
}

.bricks {
	--units: 1.5vmax;
	--brick1: #ffffff;
	--brick2: #dddddd;
	--lines: #565656;
	--gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
	--gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
	background: 
		repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn), 
		repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100% ) var(--gp-ln), 
		repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100% ) var(--gp-ln);
}

.sticky-col { position: -webkit-sticky; position: sticky; background: #fffffc;}

/* Modul biografi guru */
.sticky-col-statustinggal {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-statusvassa {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-namaguru {  width: 270px; min-width: 270px; max-width: 270px; left: 80px; }

/* Modul daftar peserta retret */
.sticky-col-editpeserta {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-statuspeserta {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-catatanpanitia {  width: 50px; min-width: 50px; max-width: 50px; left: 80px; }
.sticky-col-namapeserta {  width: 280px; min-width: 280px; max-width: 280px; left: 128px; }

/* Modul data siswa SDC */
.sticky-col-locksiswa {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-editsiswa {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-konfirmasisiswa {  width: 50px; min-width: 50px; max-width: 50px; left: 80px; }
.sticky-col-namasiswa {  width: 330px; min-width: 330px; max-width: 330px; left: 128px; }

/* Modul data fasilitator SDC */
.sticky-col-lockfasil {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-editfasil {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-konfirmasifasil {  width: 50px; min-width: 50px; max-width: 50px; left: 80px; }
.sticky-col-namafasil {  width: 330px; min-width: 330px; max-width: 330px; left: 128px; }

/* Modul kelas mingguan Viriya SDC */
.sticky-col-lock-kelasviriya {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-edit-kelasviriya {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-status-kelasviriya {  width: 50px; min-width: 50px; max-width: 50px; left: 80px; }
.sticky-col-tanggal-kelasviriya {  width: 150px; min-width: 150px; max-width: 150px; left: 128px; }

/* Modul kelas mingguan Sati SDC */
.sticky-col-lock-kelassati {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-edit-kelassati {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-status-kelassati {  width: 50px; min-width: 50px; max-width: 50px; left: 80px; }
.sticky-col-tanggal-kelassati {  width: 150px; min-width: 150px; max-width: 150px; left: 128px; }

/* Modul kelas mingguan Samadhi SDC */
.sticky-col-lock-kelassamadhi {  width: 50px; min-width: 50px; max-width: 50px; left: -16px; }
.sticky-col-edit-kelassamadhi {  width: 50px; min-width: 50px; max-width: 50px; left: 32px; }
.sticky-col-status-kelassamadhi {  width: 50px; min-width: 50px; max-width: 50px; left: 80px; }
.sticky-col-tanggal-kelassamadhi {  width: 150px; min-width: 150px; max-width: 150px; left: 128px; }


.mar-top-10 { margin-top: 10px; }
.back-gradient-blue-light {
	background: rgb(211,231,255);
	background: linear-gradient(90deg, rgba(211,231,255,1) 0%, rgba(218,230,244,1) 15%, rgba(255,255,255,1) 50%, rgba(218,230,244,1) 85%, rgba(211,231,255,1) 100%);
}
.img-profile-user { width: 330px; height: 330px; object-fit : cover; }
.img-profile-user-md { width: 200px; height: 200px; object-fit : cover; }
.img-profile-user-sm64 { width: 64px; height: 64px; padding: 0px; border: 0px; object-fit : cover; }

.btn-icons { outline:none; border: 0; padding:2px; background:none;}
.btn-image-pointer { outline:none; border: 0; padding:0px; cursor:pointer;}
.btn-link-pointer { outline:none; background: none; text-decoration: none; color: #4a4af3; border: 0; padding:0px; cursor:pointer;}

.form-control::-webkit-input-placeholder { color: #ddd; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: #ddd; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: #ddd; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: #ddd; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: #ddd; }  /* Microsoft Edge */

.link-blue  { text-decoration: none; color: #4a4af3; }
.link-blue:visited  { text-decoration: none; color: #4a4af3; }
.link-blue:focus { text-decoration: none; color: #4a4af3; }  
.link-blue:hover{ text-decoration: none; color: #0d0ddd; } 

.link-grey  { text-decoration: none; color: #bbbbbb; }
.link-grey:visited  { text-decoration: none; color: #bbbbbb; }
.link-grey:focus { text-decoration: none; color: #bbbbbb; }  
.link-grey:hover{ text-decoration: none; color: #666666; } 

.text-chant1 { font-weight: bold; color: #000066; }
.text-chant2 { font-style : italic; color: #660033; }

.autoscroll-box {
    max-height: 500px;   /* tinggi area teks */
    overflow-y: auto;    /* bikin bisa scroll ke bawah */
    border: 1px solid #ccc; /* biar kelihatan area scroll */
    padding: 10px;       /* jarak dalam */
}

.pillow-emboss {
	color: #fdfdfd;
	text-shadow: 1px 1px 1px #808080, -1px -1px 1px #eaeaea;
}

.left-right-inner-addon { position: relative; }
.left-right-inner-addon input { padding-left: 38px; padding-right: 38px; }
.left-right-inner-addon i { position: absolute; color: #bababa; margin: 10px 0px 0px 12px; pointer-events: none; }
.left-right-inner-addon span { position: absolute; right: 0px; margin: 7px 12px 0px 0px; pointer-events: none; }
.left-inner-addon { position: relative; }
.left-inner-addon input { padding-left: 38px; }
.left-inner-addon i { position: absolute; color: #bababa; margin: 10px 0px 0px 12px; pointer-events: none; }
.right-inner-addon { position: relative; }
.right-inner-addon input { padding-right: 38px; }
.right-inner-addon i { position: absolute; right: 0px; margin: 10px 12px 0px 0px ; pointer-events: none; }

.input-error { padding-top: 10px; font-size: 9pt; font-weight: normal; color: red; }
.input-success { padding-top: 15px; font-size: 8pt; font-weight: normal; color: green; }

.carousel-indicators-numbers li {
	text-indent: 0;
	text-align: center;
	margin: 0 2px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 10%;
	line-height: 30px;
	color: #fff;
	background-color: #680001;
	transition: all 0.25s ease;
}

.panel-shadow {
	-webkit-box-shadow: 0px 15px 35px -12px rgba(0,0,0,0.65);
	-moz-box-shadow: 	0px 15px 35px -12px rgba(0,0,0,0.65);
	box-shadow:		 	0px 15px 35px -12px rgba(0,0,0,0.65);
}

.panel-shadow-light {
	-webkit-box-shadow: 0px 5px 35px -12px rgba(0,0,0,0.65);
	-moz-box-shadow: 	0px 5px 35px -12px rgba(0,0,0,0.65);
	box-shadow:		 	0px 5px 35px -12px rgba(0,0,0,0.65);
	*box-shadow: 0px 0px 15px 1px #dedede;
}

.hidden-item {
	display: none;
}

.footernotes {
	padding: 15px 0px;
	background: #ede7e7;
}

.footercopyrights {
	padding: 10px;
	background: #680001;
}

.textshadow-white {
	color: #FFFFFF;
	text-shadow: 2px 2px 4px #555555;
}

.textshadow-black {
	color: #333333;
	text-shadow: 2px 1px 1px #cccccc;
}

.btn-select {
  color: #495057;
  background-color: #fff;
  border-color: #ced4da;
}

.btn-select:hover {
  color: #495057;
  background-color: #fff;
  border-color: #ced4da;
}

.btn-select:focus, .btn-select.focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-select.disabled, .btn-select:disabled {
  color: #495057;
  background-color: #eee;
  border-color: #ced4da;
}

.btn-select:not(:disabled):not(.disabled):active, .btn-select:not(:disabled):not(.disabled).active,
.show > .btn-select.dropdown-toggle {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-select:not(:disabled):not(.disabled):active:focus, .btn-select:not(:disabled):not(.disabled).active:focus,
.show > .btn-select.dropdown-toggle:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-select-invalid{
  color: #495057;
  background-color: #fff;
  border-color: #ced4da;
}

.btn-select-invalid:hover {
  color: #495057;
  background-color: #fff;
  border-color: #ced4da;
}

.btn-select-invalid:focus, .btn-select-invalid.focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.btn-select-invalid.disabled, .btn-select-invalid:disabled {
  color: #495057;
  background-color: #eee;
  border-color: #ced4da;
}

.btn-select-invalid:not(:disabled):not(.disabled):active, .btn-select-invalid:not(:disabled):not(.disabled).active,
.show > .btn-select-invalid.dropdown-toggle {
  color: #495057;
  background-color: #fff;
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.btn-select-invalid:not(:disabled):not(.disabled):active:focus, .btn-select-invalid:not(:disabled):not(.disabled).active:focus,
.show > .btn-select-invalid.dropdown-toggle:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder {
  color: #ddd;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 10px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: white;
    cursor: inherit;
    display: block;
}


/* https://tobiasahlin.com/blog/how-to-animate-box-shadow/  */

.box {
  /*position: relative;*/
  display: inline-block;
  background-color: transparent;
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box::after {
  /*position: absolute;*/
  content: "";
  z-index: -1;
  top: 0;
  left: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
  -webkit-transform: scale(1.08, 1.08);
  transform: scale(1.08, 1.08);
}

.box:hover::after {
    opacity: 1;
}

.img-nozoom-colorize{
    height: 100%;
	width: 100%;
    overflow: hidden;
    border-radius: .25em;
    border: 6px solid #fff;
}

.img-nozoom-grey {
	height: 100%;
	width: 100%;
    overflow: hidden;
    border-radius: .25em;
    border: 6px solid #fff;
	filter: grayscale(100%);
}

/* https://w3bits.com/css-image-hover-zoom/ */
.img-hover-zoom {
    height: 100%;
	width: 100%;
    overflow: hidden;
    border-radius: .25em;
    border: 6px solid #fff;
}

.img-hover-zoom img {
  transition: transform 1.5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.25);
}

/* Brightness-zoom Container */
.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}

/* Brightness-The Transformation */
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

/* Brightness-nozoom Container */
.img-hover-zoom--brightnessnozoom img {
  transition: transform 1.5s, filter 1s ease-in-out;
  transform-origin: center center;
  filter: brightness(95%);
}

/* Brightness-nozoom The Transformation */
.img-hover-zoom--brightnessnozoom:hover img {
  filter: brightness(110%);
  transform: scale(1);
}

/* Blur-zoom Container */
.img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1.2);
}

/* Blur-zoom The Transformation */
.img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1);
}

/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
  transition: transform 1s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}

/* Colorize-The Transformation */
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.25);
}

/* Grey-no-zoom Container */
.img-hover-zoom--greynozoom img {
  transition: transform 1s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}

/* Grey-no-zoom The Transformation */
.img-hover-zoom--greynozoom:hover img {
  filter: grayscale(0);
  transform: scale(1);
}

/* Grey-no-zoom-fast Container */
.img-hover-zoom--greynozoomfast img {
  transition: transform 0.1s, filter 0.5s ease-in-out;
  filter: grayscale(100%);
}

/* Grey-no-zoom-fast The Transformation */
.img-hover-zoom--greynozoomfast:hover img {
  filter: grayscale(0);
  transform: scale(1);
}

/* normal-no-zoom Container */
.img-hover-zoom--normalnozoom img {
	transition: transform 1s ease;
}

/* normal-no-zoom The Transformation */
.img-hover-zoom--normalnozoom:hover img {
	 transform: scale(1);
}

/*******************************/

/* visible page width = 100% */
.container {
	width: 100%;
}

#sidenav-overlay  {
	z-index: 996;
}

.back-to-top { 
	background: none;
	margin: 0px 0px 35px 0px;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 70px;
	height: 70px;
	z-index: 100;
	display: none;
	text-decoration: none;
	color: #dedede;
}

.back-to-top i {
  font-size: 50px;
}

.page-flexbox-wrapper {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

main {
	flex: 1 1 auto ;
}  

.sortable {
	cursor: pointer;
}

/*light It Up*/
.moreBright {
	-webkit-filter: brightness(100%);
	filter: brightness(100%);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	
}
.moreBright:hover {
	-webkit-filter: brightness(130%);
	filter: brightness(130%);
}


/****** CSS Effect ******/

/* Flashing */
.hoverflashing figure:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/* Gray Scale */
.hovergrayscale figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
.hovergrayscale figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/*****************************************/
/* http://cssload.net/en/spinners/2      */
/*****************************************/

#cssload-pgloading {}

#cssload-pgloading:after {
		content: "";
		z-index: -1;
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
}
#cssload-pgloading .cssload-loadingwrap {position:absolute;top:45%;bottom:45%;left:25%;right:25%;}
#cssload-pgloading .cssload-bokeh {
		font-size: 150px;
		width: 2em;
		height: 2em;
		position: relative;
		margin: 0 auto;
		list-style: none;
		padding:0;
		border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
}

#cssload-pgloading .cssload-bokeh li {
		position: absolute;
		width: .3em;
		height: .3em;
		border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
}

#cssload-pgloading .cssload-bokeh li:nth-child(1) {
		left: 50%;
		top: 0;
		margin: 0 0 0 -.2em;
		background: rgb(0,193,118);
		transform-origin: 50% 250%;
		-o-transform-origin: 50% 250%;
		-ms-transform-origin: 50% 250%;
		-webkit-transform-origin: 50% 250%;
		-moz-transform-origin: 50% 250%;
		animation: 
				cssload-rota 1.3s linear infinite,
				cssload-opa 4.22s ease-in-out infinite alternate;
		-o-animation: 
				cssload-rota 1.3s linear infinite,
				cssload-opa 4.22s ease-in-out infinite alternate;
		-ms-animation: 
				cssload-rota 1.3s linear infinite,
				cssload-opa 4.22s ease-in-out infinite alternate;
		-webkit-animation: 
				cssload-rota 1.3s linear infinite,
				cssload-opa 4.22s ease-in-out infinite alternate;
		-moz-animation: 
				cssload-rota 1.3s linear infinite,
				cssload-opa 4.22s ease-in-out infinite alternate;
}

#cssload-pgloading .cssload-bokeh li:nth-child(2) {
		top: 50%; 
		right: 0;
		margin: -.2em 0 0 0;
		background: rgb(255,0,60);
		transform-origin: -150% 50%;
		-o-transform-origin: -150% 50%;
		-ms-transform-origin: -150% 50%;
		-webkit-transform-origin: -150% 50%;
		-moz-transform-origin: -150% 50%;
		animation: 
				cssload-rota 2.14s linear infinite,
				cssload-opa 4.93s ease-in-out infinite alternate;
		-o-animation: 
				cssload-rota 2.14s linear infinite,
				cssload-opa 4.93s ease-in-out infinite alternate;
		-ms-animation: 
				cssload-rota 2.14s linear infinite,
				cssload-opa 4.93s ease-in-out infinite alternate;
		-webkit-animation: 
				cssload-rota 2.14s linear infinite,
				cssload-opa 4.93s ease-in-out infinite alternate;
		-moz-animation: 
				cssload-rota 2.14s linear infinite,
				cssload-opa 4.93s ease-in-out infinite alternate;
}

#cssload-pgloading .cssload-bokeh li:nth-child(3) {
		left: 50%; 
		bottom: 0;
		margin: 0 0 0 -.2em;
		background: rgb(250,190,40);
		transform-origin: 50% -150%;
		-o-transform-origin: 50% -150%;
		-ms-transform-origin: 50% -150%;
		-webkit-transform-origin: 50% -150%;
		-moz-transform-origin: 50% -150%;
		animation: 
				cssload-rota 1.67s linear infinite,
				cssload-opa 5.89s ease-in-out infinite alternate;
		-o-animation: 
				cssload-rota 1.67s linear infinite,
				cssload-opa 5.89s ease-in-out infinite alternate;
		-ms-animation: 
				cssload-rota 1.67s linear infinite,
				cssload-opa 5.89s ease-in-out infinite alternate;
		-webkit-animation: 
				cssload-rota 1.67s linear infinite,
				cssload-opa 5.89s ease-in-out infinite alternate;
		-moz-animation: 
				cssload-rota 1.67s linear infinite,
				cssload-opa 5.89s ease-in-out infinite alternate;
}

#cssload-pgloading .cssload-bokeh li:nth-child(4) {
		top: 50%; 
		left: 0;
		margin: -.2em 0 0 0;
		background: rgb(136,193,0);
		transform-origin: 250% 50%;
		-o-transform-origin: 250% 50%;
		-ms-transform-origin: 250% 50%;
		-webkit-transform-origin: 250% 50%;
		-moz-transform-origin: 250% 50%;
		animation: 
				cssload-rota 1.98s linear infinite,
				cssload-opa 6.04s ease-in-out infinite alternate;
		-o-animation: 
				cssload-rota 1.98s linear infinite,
				cssload-opa 6.04s ease-in-out infinite alternate;
		-ms-animation: 
				cssload-rota 1.98s linear infinite,
				cssload-opa 6.04s ease-in-out infinite alternate;
		-webkit-animation: 
				cssload-rota 1.98s linear infinite,
				cssload-opa 6.04s ease-in-out infinite alternate;
		-moz-animation: 
				cssload-rota 1.98s linear infinite,
				cssload-opa 6.04s ease-in-out infinite alternate;
}


@keyframes cssload-rota {
		from { }
		to { transform: rotate(360deg); }
}

@-o-keyframes cssload-rota {
		from { }
		to { -o-transform: rotate(360deg); }
}

@-ms-keyframes cssload-rota {
		from { }
		to { -ms-transform: rotate(360deg); }
}

@-webkit-keyframes cssload-rota {
		from { }
		to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes cssload-rota {
		from { }
		to { -moz-transform: rotate(360deg); }
}

@keyframes cssload-opa {
		0% { }
		12.0% { opacity: 0.80; }
		19.5% { opacity: 0.88; }
		37.2% { opacity: 0.64; }
		40.5% { opacity: 0.52; }
		52.7% { opacity: 0.69; }
		60.2% { opacity: 0.60; }
		66.6% { opacity: 0.52; }
		70.0% { opacity: 0.63; }
		79.9% { opacity: 0.60; }
		84.2% { opacity: 0.75; }
		91.0% { opacity: 0.87; }
}

@-o-keyframes cssload-opa {
		0% { }
		12.0% { opacity: 0.80; }
		19.5% { opacity: 0.88; }
		37.2% { opacity: 0.64; }
		40.5% { opacity: 0.52; }
		52.7% { opacity: 0.69; }
		60.2% { opacity: 0.60; }
		66.6% { opacity: 0.52; }
		70.0% { opacity: 0.63; }
		79.9% { opacity: 0.60; }
		84.2% { opacity: 0.75; }
		91.0% { opacity: 0.87; }
}

@-ms-keyframes cssload-opa {
		0% { }
		12.0% { opacity: 0.80; }
		19.5% { opacity: 0.88; }
		37.2% { opacity: 0.64; }
		40.5% { opacity: 0.52; }
		52.7% { opacity: 0.69; }
		60.2% { opacity: 0.60; }
		66.6% { opacity: 0.52; }
		70.0% { opacity: 0.63; }
		79.9% { opacity: 0.60; }
		84.2% { opacity: 0.75; }
		91.0% { opacity: 0.87; }
}

@-webkit-keyframes cssload-opa {
		0% { }
		12.0% { opacity: 0.80; }
		19.5% { opacity: 0.88; }
		37.2% { opacity: 0.64; }
		40.5% { opacity: 0.52; }
		52.7% { opacity: 0.69; }
		60.2% { opacity: 0.60; }
		66.6% { opacity: 0.52; }
		70.0% { opacity: 0.63; }
		79.9% { opacity: 0.60; }
		84.2% { opacity: 0.75; }
		91.0% { opacity: 0.87; }
}

@-moz-keyframes cssload-opa {
		0% { }
		12.0% { opacity: 0.80; }
		19.5% { opacity: 0.88; }
		37.2% { opacity: 0.64; }
		40.5% { opacity: 0.52; }
		52.7% { opacity: 0.69; }
		60.2% { opacity: 0.60; }
		66.6% { opacity: 0.52; }
		70.0% { opacity: 0.63; }
		79.9% { opacity: 0.60; }
		84.2% { opacity: 0.75; }
		91.0% { opacity: 0.87; }
}

/************************************************/

/************************************************/
/* https://icons8.com/cssload/en/spinners/4     */
/************************************************/

.cssload-spin-box {
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 26px;
	height: 26px;
	border-radius: 100%;
	box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
		-o-box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
		-ms-box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
		-webkit-box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
		-moz-box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
	animation: cssload-spin ease infinite 3.6s;
		-o-animation: cssload-spin ease infinite 3.6s;
		-ms-animation: cssload-spin ease infinite 3.6s;
		-webkit-animation: cssload-spin ease infinite 3.6s;
		-moz-animation: cssload-spin ease infinite 3.6s;
}



@keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
	}
	25% {
		box-shadow: -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73);
	}
	50% {
		box-shadow: -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223);
	}
	75% {
		box-shadow: 26px -26px #dfdfdf, 26px 26px #4f4d49, -26px 26px #dfdfdf, -26px -26px #4f4d49;
	}
}

@-o-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
	}
	25% {
		box-shadow: -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73);
	}
	50% {
		box-shadow: -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223);
	}
	75% {
		box-shadow: 26px -26px #dfdfdf, 26px 26px #4f4d49, -26px 26px #dfdfdf, -26px -26px #4f4d49;
	}
}

@-ms-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
	}
	25% {
		box-shadow: -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73);
	}
	50% {
		box-shadow: -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223);
	}
	75% {
		box-shadow: 26px -26px #dfdfdf, 26px 26px #4f4d49, -26px 26px #dfdfdf, -26px -26px #4f4d49;
	}
}

@-webkit-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
	}
	25% {
		box-shadow: -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73);
	}
	50% {
		box-shadow: -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223);
	}
	75% {
		box-shadow: 26px -26px #dfdfdf, 26px 26px #4f4d49, -26px 26px #dfdfdf, -26px -26px #4f4d49;
	}
}

@-moz-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223);
	}
	25% {
		box-shadow: -26px 26px rgb(223,223,223), -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73);
	}
	50% {
		box-shadow: -26px -26px rgb(79,77,73), 26px -26px rgb(223,223,223), 26px 26px rgb(79,77,73), -26px 26px rgb(223,223,223);
	}
	75% {
		box-shadow: 26px -26px #dfdfdf, 26px 26px #4f4d49, -26px 26px #dfdfdf, -26px -26px #4f4d49;
	}
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
	.font-size-grid {
		font-size	: 1.2em; 
	}
	.img-grid {
		width		: 100%; 
		height		: 480px; 
		object-fit	: cover;
	}
	.img-grid-sm {
		width		: 100%; 
		height		: 480px; 
		object-fit	: cover;
	}
	.img-grid-poster {
		width		: 100%; 
		height		: 370px; 
	}
	.img-grid-thumbs {
		width		: 38px; 
		height		: 38px; 
		object-fit	: cover;
		border-radius : 5px;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	.font-size-grid {
		font-size	: 1.3em; 
	}
	.img-grid {
		width		: 100%; 
		height		: 640px; 
		object-fit	: cover;
	}
	.img-grid-sm {
		width		: 100%; 
		height		: 640px; 
		object-fit	: cover;
	}
	.img-grid-poster {
		width		: 100%; 
		height		: 455px; 
	}
	.img-grid-thumbs {
		width		: 45px; 
		height		: 45px; 
		object-fit	: cover;
		border-radius : 5px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.font-size-grid {
		font-size	: 1.4em; 
	}
	.img-grid {
		width		: 100%; 
		height		: 768px; 
		object-fit	: cover;
	}
	.img-grid-sm {
		width		: 100%; 
		height		: 768px; 
		object-fit	: cover;
	}
	.img-grid-poster {
		width		: 100%; 
		height		: 650px; 
	}
	.img-grid-thumbs {
		width		: 46px; 
		height		: 46px; 
		object-fit	: cover;
		border-radius : 5px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.font-size-grid {
		font-size	: 0.8em; 
	}
	.img-grid {
		width		: 100%; 
		height		: 400px; 
		object-fit	: cover;
	}
	.img-grid-sm {
		width		: 100%; 
		height		: 250px; 
		object-fit	: cover;
	}
	.img-grid-poster {
		width		: 100%; 
		height		: 270px; 
	}
	.img-grid-thumbs {
		width		: 46px; 
		height		: 46px; 
		object-fit	: cover;
		border-radius : 5px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.font-size-grid {
		font-size	: 0.9em; 
	}
	.img-grid {
		width		: 100%; 
		height		: 440px; 
		object-fit	: cover;
	}
	.img-grid-sm {
		width		: 100%; 
		height		: 290px; 
		object-fit	: cover;
	}
	.img-grid-poster {
		width		: 100%; 
		height		: 335px; 
	}
	.img-grid-thumbs {
		width		: 48px; 
		height		: 48px; 
		object-fit	: cover;
		border-radius : 5px;
	}
}

/* end of : CSS Effect */