/* Preloader */

.preloader {
    background: #ffffff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.rounder {
 position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10000;
  margin: -75px 0 0 -75px;
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  25% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(0deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

/* Scroll To Top */

.scroll-to-top {
    display: none;
    font-size: 50px;
    color: #1abc9c;
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 9999;
    transition: all 0.3s ease-in-out;
}

.scroll-to-top:hover,
.scroll-to-top:focus {
    color: #1abc9c;
}



/*  flogo screen */
	#cover{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:50000;
    width:100%;
	height:100%;
    display:none;
}
#loginScreen
{
	left:50%; /*important if you want it absolutely centred in window. */ 
  	margin-left:-400px; /* importnant. must be half the width. */
	top:50%; /*important if you want it absolutely centred in window. */ 
  	margin-top:-300px; /* importnant. must be half the width. */
    width:800px;
	height:600px;
	background: url(../img/bpjs-poonam.jpg) no-repeat;
	-webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
     background-size: 98% 98%; 
	
     background-position: center center; 

    position:absolute;
    z-index:50001;
    display:none;
	border:10px solid #ffe6e6;
	border-radius:10px;
}
	#loginScreen:target, #loginScreen:target + #cover{
    display:block;
    opacity:2;
}
.cancel
{
    display:block;
    position:absolute;
		background-color:red;
    top:-20px;
    right:-15px;
    color:white;
		height: 25px;
		width: 25px;
    font-size:40px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
		border-radius: 50%;
		border: 1px solid red;
		cursor:pointer;
}
.cancel:hover
{
  background-color:white;
  color:red;
  border: 1px solid white;
}
@media only screen and (max-width: 479px){
    #loginScreen { 
	top: 50%;
	left:50%; /*important if you want it absolutely centred in window. */ 
  	margin-left:-35%; /* importnant. must be half the width. */
  	margin-top:-20%; /* importnant. must be half the width. */
 	width: 70%;
	height: 40%;
}}
}

hr.style-three {
height: 30px;
border-style: solid;
border-width: 1px 0 0 0;
border-color:red;
border-radius: 20px;
}
hr.style-three:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-width: 0 0 1px 0;
border-color:red;
border-radius: 20px;
}


dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}

dialog:not([open]) {
  display: none;
}

dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}