* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
	background: #ddd; height:100%;
    overflow-x: hidden;
}	
.text{
    color:brown;font-size:220px;
    text-align:center;
}
.open{
    color:green;background:#000;
    padding:10px;
    border-radius:20px;
}

.container-preloader {
    align-items:center; 
    cursor:none; 
    display:flex; 
    height:100%;
    justify-content:center; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    z-index: 9000;
}

.container-preloader .animation-preloader {
	position:absolute; 
    z-index: 100;
}

.container-preloader .animation-preloader .spinner {
    animation: spinner 1s 
    infinite linear;
    border-radius: 50%;  
    border: 10px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--mainColor2);
    height: 9em;  
    margin: 0 auto 3.5em auto; 
    width: 9em;
}

.container-preloader .animation-preloader .txt-loading {
    font: bold 5em 'Montserrat', sans-serif;
	text-align: center;	
    user-select: none;
}
.container-preloader .animation-preloader .txt-loading .characters:before {
    animation: characters 4s infinite;  
    color: var(--whiteColor);
    content: attr(preloader-text);  
    left: 0;
    opacity: 0;  position: absolute;  
    top: 0;
    transform: rotateY(-90deg);
}
.container-preloader .animation-preloader .txt-loading .characters {
	color: rgb(224 224 224 / 20%);
    position: relative;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before {
    animation-delay: 0.2s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {
    animation-delay: 0.4s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {
    animation-delay: 0.6s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {
    animation-delay: 0.8s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {
    animation-delay: 1s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(7):before {
    animation-delay: 1.2s;
}
.container-preloader .loader-section {
    background-color: var(--DarkBg);  
    height: 100%;
    position: fixed;  
    top: 0;  
    width: calc(50% + 1px);
}
.container-preloader .loader-section.section-left {
    left: 0;
}
.container-preloader .loader-section.section-right {
    right: 0;
}
/* Fade effect on loading animation */
.loaded .animation-preloader {
    opacity: 0;
    transition: 0.3s ease-out;
}
/* Curtain effect */
.loaded .loader-section.section-left {
    transform: translateX(-101%);
    transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
.loaded .loader-section.section-right {
    transform: translateX(101%);
    transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

@keyframes spinner {
to {
   transform: rotateZ(360deg);
}
}

@keyframes characters {
0%,
75%,
100% {
    opacity: 0;
    transform: rotateY(-90deg);
}
25%,
50% {
    opacity: 1;
    transform: rotateY(0deg);
}
}
/* Laptop size back (laptop, tablet, cell phone) */
@media screen and (max-width: 767px) {
.container-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
}
.container-preloader .animation-preloader .txt-loading {
    font: bold 3.5em 'Montserrat', sans-serif;
}
}
@media screen and (max-width: 500px) {
.container-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
}
.container-preloader .animation-preloader .txt-loading {
    font: bold 2em 'Montserrat', sans-serif;
}
}
.origin{
    text-decoration:none;
    font-size:45px;
}