/*
Theme Name: MyDreams
Theme URI: http://raulvalverde.com/
Description: Theme exclusivo
Version: 1.2
Author: Raul Valverde
Author URI: https://raulvalverde.com/
*/

:root {
  --purple: #8f2cc3;
  --bs-body-line-height: 1.65;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* font-family: "Catamaran", sans-serif; */
}

body,input,textarea,option {
  font-family: "Noto Serif KR", serif;
  font-size: 18px;
  line-height: 1.75;
  font-weight: 500;
}

main {
  flex: 1;
}

.big {
  font-size: 120%;
}

.font-satisfy {
  font-family: "Satisfy", cursive;
}

.container {
  width: 100%;
  max-width: 1040px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6,
.h7,
h7,
.font-h1,
.font-h2,
.font-h3,
.font-h4,
.font-h5,
.font-h6,
.font-h7 {
  color: inherit;
  font-family: inherit;
  font-weight: 800;
  margin-bottom: 1.45rem;
}

.h7, h7 {
  font-size: 0.9rem;
}

.small,
small {
  font-size: 85% !important;
  font-weight: 400 !important;
}

/* PART 1 - Before Lazy Load */
img[data-lazyloaded] {
  opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded {
  transition: opacity 0.5s linear 0.2s;
  opacity: 1;
}

.bg-gray {
  background-color: #f1f1f1 !important;
}

.bg-purple {
  background-color: var(--purple) !important;
}

.bg-pink {
  background-color: #fbf3ff !important;
}

.border-pink {
  border-color: #e7d2f1 !important;
}

.text-purple {
  color: var(--purple) !important;
}

.line-14 {
  line-height: 1.4;
}

@media (min-width: 768px) {
  .float-md-right {
    float: right;
  }
}

.list > div:nth-child(even) {
  background-color: #f1f1f1 !important;
}

@media (min-width: 768px) {
  .w-lg-360 {
    height: 270px !important;
    width: 360px !important;
  }
}

@media (min-width: 576px) {
  .wpx-sm-110 {
    width: 110px !important;
  }
}

/* menu */

.header {
  background-color: var(--bs-white);
  box-shadow: 1px 1px 4px 0 rgba(var(--bs-black-rgb), 0.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  width: 100%;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  margin-left: auto;
  height: 50px;
  position: relative;
  user-select: none;
  width: 50px;
}

.header .menu-icon .navicon {
  background: var(--bs-gray-800);
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: var(--bs-gray-800);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  top: 0;
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  top: 0;
  transform: rotate(45deg);
}

.header .menu li a {
  color: var(--purple);
}

@media (min-width: 991px) {
  .header .menu {
    clear: none;
    max-height: none;
    width: auto;
  }

  .header .menu-icon {
    display: none;
  }
}

@media (max-width: 992px) {
  .header .menu li {
    border-top: 1px solid var(--bs-gray-200);
  }

  .header .menu li a {
    display: block;
    padding: 0.75rem 1rem;
  }

  .header .container {
    padding-left: 0;
    padding-right: 0;
  }
}

.single-blog .width ol li {
  margin-bottom: 15px;
}

.medium {
  font-size: 95%;
}