/*---------------------------------------------------------------------------------------
* Template Name      :  Angus - Personal Responsive One Page Portfolio Template          |
* Author             :  themesuccess                                                     |
* Version            :  1.0.0                                                            |
* Created            :  March 2021                                                       |
* Updated            :  March 2021                                                       |
* File Description   :  Preloader css file of the template                               |
*----------------------------------------------------------------------------------------
*/
/* Import Google Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
/* Import Variables and mixins */
/* Themes Settings */
:root[data-theme="light"] {
  --theme-primary: #fff;
  --theme-secondary: #fbfbfb;
  --theme-stroke-color: #eaeaea;
  --theme-border-color: #c5c5c5;
  --theme-border-color-light: #999999;
  --theme-mark-color: #ec2d2d;
  --theme-footer-color: #fbfbfb;
  --theme-white-color: #fff;
  --theme-comment-color: #f7f7f7;
  --theme-background-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 60%, white 90%);
  --theme-header-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  --theme-text-color: #333;
  --theme-heading-color: #111;
  --theme-portfolio-overlay: rgba(255, 255, 255, 0.5);
  --theme-portfolio-background: #111;
  --theme-portfolio-text: #fff;
}

:root[data-theme="dark"] {
  --theme-primary: #070707;
  --theme-secondary: #111111;
  --theme-stroke-color: #2d2d2d;
  --theme-border-color: #333;
  --theme-border-color-light: #999999;
  --theme-mark-color: #ec2d2d;
  --theme-footer-color: #191919;
  --theme-white-color: #fff;
  --theme-comment-color: #151515;
  --theme-background-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 60%, black 90%);
  --theme-header-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  --theme-text-color: #d2d2d2;
  --theme-heading-color: #fff;
  --theme-portfolio-overlay: rgba(255, 255, 255, 0.5);
  --theme-portfolio-background: #111;
  --theme-portfolio-text: #fff;
}

/* Color Settings */
:root[data-color="black"] {
  --color-accent: #333;
  --color-accent-hover: #161616;
  --color-accent-shadow: rgba(51, 51, 51, 0.5);
}

:root[data-color="blue"] {
  --color-accent: #1a7bb7;
  --color-accent-hover: #145f8d;
  --color-accent-shadow: rgba(26, 123, 183, 0.5);
}

:root[data-color="orange"] {
  --color-accent: #f07f81;
  --color-accent-hover: #ce6466;
  --color-accent-shadow: rgba(240, 127, 129, 0.5);
}

:root[data-color="violet"] {
  --color-accent: #b738e8;
  --color-accent-hover: #9929c5;
  --color-accent-shadow: rgba(183, 56, 232, 0.5);
}

:root[data-color="green"] {
  --color-accent: #1cba5b;
  --color-accent-hover: #159649;
  --color-accent-shadow: rgba(28, 186, 91, 0.5);
}

:root[data-color="pink"] {
  --color-accent: #fc5185;
  --color-accent-hover: #c73a64;
  --color-accent-shadow: rgba(252, 81, 133, 0.5);
}

:root[data-color="red"] {
  --color-accent: #ce192a;
  --color-accent-hover: #9b1220;
  --color-accent-shadow: rgba(206, 25, 42, 0.5);
}

/* Preloader */
.preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;
  background-color: var(--theme-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.preloader:before, .preloader:after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: var(--theme-primary);
  -webkit-transition: .8s height ease-in .5s;
  transition: .8s height ease-in .5s;
  height: calc(50% - 1px);
}

.preloader:before {
  top: 0;
  left: 0;
}

.preloader:after {
  bottom: 0;
  left: 0;
}

.preloader.loaded {
  background-color: transparent;
}

.preloader.loaded:before {
  border-bottom: 1px solid var(--theme-heading-color);
  height: 0;
}

.preloader.loaded:after {
  border-top: 1px solid var(--theme-heading-color);
  height: 0;
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.load_container {
  height: 2px;
  width: 100%;
  background-color: transparent;
  position: absolute;
}

.loading_slider {
  background-color: var(--theme-heading-color);
  height: 100%;
  width: 0%;
  -webkit-transition: width .05s ease-in;
  transition: width .05s ease-in;
}

.loading_slider.hide {
  display: none;
}

.percentage {
  position: absolute;
  top: -95px;
  text-align: center;
  width: 100%;
  font-size: 4em;
  font-weight: 500;
  -webkit-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in;
  color: var(--theme-heading-color);
}

.percentage.hide {
  opacity: 0;
}
/*# sourceMappingURL=preload.css.map */