/**
 * Index Page CSS
 * @copyright Jordan Davila 2018
 */
/* line 20, ../sass/index.scss */
.black_full_logo {
  background-image: url("../img/logos/logo1.png");
}

/* line 21, ../sass/index.scss */
.white_full_logo {
  background-image: url("../img/logos/logo4.png");
}

/* line 22, ../sass/index.scss */
.grey_full_logo {
  background-image: url("../img/logos/logo3.png");
}

/* line 23, ../sass/index.scss */
.red_full_logo {
  background-image: url("../img/logos/logo2.png");
}

/* line 24, ../sass/index.scss */
.black_icon_logo {
  background-image: url("../img/logos/icon1.png");
}

/* line 25, ../sass/index.scss */
.white_icon_logo {
  background-image: url("../img/logos/icon4.png");
}

/* line 26, ../sass/index.scss */
.grey_icon_logo {
  background-image: url("../img/logos/icon3.png");
}

/* line 27, ../sass/index.scss */
.red_icon_logo {
  background-image: url("../img/logos/icon2.png");
}

/**
 * Main Html Body Wrappers
 * @updated 01/25/18
 */
/* line 41, ../sass/index.scss */
html, body {
  width: 100%;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff;
  color: #525252;
  letter-spacing: 1px;
}

/**
 * Properties
 */
/* line 53, ../sass/index.scss */
.no_site {
  width: 0vw !important;
  height: 0vh !important;
}

/* line 57, ../sass/index.scss */
.show_flex {
  display: flex !important;
}

/* line 58, ../sass/index.scss */
.show_block {
  display: block !important;
}

/* line 59, ../sass/index.scss */
.show_none {
  display: none !important;
}

/* line 60, ../sass/index.scss */
.no_opacity {
  opacity: 0;
}

/* line 61, ../sass/index.scss */
.with_opacity {
  opacity: 1 !important;
}

/**
 * Preloader
 */
/* line 67, ../sass/index.scss */
.preloader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all ease 1s;
}
/* line 78, ../sass/index.scss */
.preloader .logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 40px;
}

/**
 * Main
 */
/* line 89, ../sass/index.scss */
main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

/* line 97, ../sass/index.scss */
#website {
  background: linear-gradient(90deg, #FF5858, #E43F48);
  transition: 1s ease all;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  border-radius: 10px;
  box-shadow: 5px 3px 10px rgba(0, 0, 0, 0.3);
}

/* line 111, ../sass/index.scss */
.logo_full_wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9999;
  transition: 1s ease all;
  display: flex;
}
/* line 118, ../sass/index.scss */
.logo_full_wrap .logo_wrap {
  width: 80px;
  height: 80px;
  background-color: #e43f48;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* line 125, ../sass/index.scss */
.logo_full_wrap .logo_wrap .logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 40%;
  height: 40%;
}
/* line 131, ../sass/index.scss */
.logo_full_wrap .logo_text {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
  background-image: url(../img/logos/logo-text.png);
  width: 120px;
  height: 80px;
  margin-left: 15px;
}

/* line 141, ../sass/index.scss */
.login_wrap {
  position: absolute;
  right: 0px;
  top: 20px;
  align-items: center;
  z-index: 9999;
  transition: 1s ease all;
  display: flex;
}
/* line 149, ../sass/index.scss */
.login_wrap a {
  color: #ffffff;
  font-size: 1em;
  font-weight: 200;
  display: inline-block;
}
/* line 155, ../sass/index.scss */
.login_wrap .login_line {
  height: 1px;
  background-color: #ffffff;
  width: 50px;
  display: inline-block;
  margin-left: 10px;
  transition: 0.5s ease all;
}

/* line 165, ../sass/index.scss */
.login_wrap:hover > .login_line {
  width: 60px;
}

/* line 169, ../sass/index.scss */
.apply_btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #e43f48;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 50px;
  z-index: 9999;
  transition: 1s ease all;
}

/* line 182, ../sass/index.scss */
#main_content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  transition: 1s ease all;
}
/* line 190, ../sass/index.scss */
#main_content h1 {
  font-size: 10vw;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 10px;
  position: relative;
}
/* line 196, ../sass/index.scss */
#main_content h1 span {
  font-size: 0.15em;
  letter-spacing: 1px;
  font-weight: 400;
  position: absolute;
  top: 0;
  left: -20px;
}
/* line 206, ../sass/index.scss */
#main_content ul li {
  display: inline-block;
  margin-right: 20px;
}
/* line 209, ../sass/index.scss */
#main_content ul li a {
  color: #ffffff;
  font-size: 1em;
  font-weight: 400;
}
/* line 216, ../sass/index.scss */
#main_content p {
  color: #ffffff;
  margin-top: 20px;
  line-height: 30px;
  width: 50%;
}

/* line 224, ../sass/index.scss */
.left_content {
  position: absolute !important;
  left: 8vw;
  align-items: flex-start !important;
}

/* line 231, ../sass/index.scss */
.gallery_circles {
  position: absolute;
  height: 37vw;
  width: 37vw;
  transition: 1s ease all;
  top: calc(50vh - 19vw);
  left: calc(50vw - 19vw);
}
/* line 238, ../sass/index.scss */
.gallery_circles .circle {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #e43f48;
  border-radius: 500px;
  position: absolute;
  width: 100px;
  height: 100px;
  animation: circle infinite linear 4s;
  transition: all 1s ease;
}
/* line 249, ../sass/index.scss */
.gallery_circles .selected {
  width: 25vw;
  height: 25vw;
  opacity: 0.7;
}
/* line 254, ../sass/index.scss */
.gallery_circles .x1 {
  top: 0;
  right: 0;
  animation: circle infinite linear 5s;
}
/* line 259, ../sass/index.scss */
.gallery_circles .x2 {
  bottom: 30%;
  left: 0;
  width: 15vw;
  height: 15vw;
  animation: circle infinite linear 4s;
}
/* line 266, ../sass/index.scss */
.gallery_circles .x3 {
  bottom: 10%;
  left: 50%;
  width: 10vw;
  height: 10vw;
  animation: circle infinite linear 2s;
}
/* line 273, ../sass/index.scss */
.gallery_circles .x4 {
  bottom: 10%;
  left: 20%;
  width: 5vw;
  height: 5vw;
  animation: circle infinite linear 2.5s;
}
/* line 280, ../sass/index.scss */
.gallery_circles .x5 {
  top: 10%;
  left: 30%;
  width: 5vw;
  height: 5vw;
  animation: circle infinite linear 3.5s;
}
/* line 287, ../sass/index.scss */
.gallery_circles .full_circle {
  border-radius: 0;
  animation: unset;
  width: 100%;
  height: 100%;
  background-position: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* line 298, ../sass/index.scss */
.full_gallery {
  left: 50%;
  top: 0;
  height: 100%;
  width: 50%;
}

@keyframes circle {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
}