/*====================================
  Setting
====================================*/
:root {
  --pallet-red: #E60012;
  --pallet-green: #49BD00;
  --pallet-deep-green: #438806;
  --pallet-beige: #c2a883;
  --pallet-black: #333;
  --pallet-pink: #F68490;
  --gradient-red: linear-gradient(to bottom, #fa5f6b, #c40312);
  --gradient-green: linear-gradient(to bottom, #6fbc2c, #408504);;
  --gradient-deep-green: linear-gradient(to bottom, #429c00, #1f6500);
}


/*====================================
  Components
====================================*/

/*------------------------------
    Buttons
------------------------------*/

/*------ Button Base -------*/
.c-btn {
  --btn-width:687px;
  --btn-height:100px;
  max-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1.3 !important;
  padding: 10px 15px;
  border-radius: 5px;
  border: none;
  outline: none;
  appearance: none;
  transition: 0.3s;
  text-decoration: none !important;
}
.c-btn:hover {
  opacity: .8;
  text-decoration: none;
}

/*------ Button Size -------*/
.c-btn-xxl {
  width: calc(var(--btn-width) * 1);
  min-height: calc(var(--btn-height) * 1);
  font-size: 24px !important;
  padding-left: 2em;
  padding-right: 2em;
}
.c-btn-xl {
  width: calc(var(--btn-width) * 0.9);
  min-height: calc(var(--btn-height) * 0.9);
  font-size: 22px !important;
  padding-left: 2em;
  padding-right: 2em;
}
.c-btn-l {
  width: calc(var(--btn-width) * 0.8);
  min-height: calc(var(--btn-height) * 0.8);
  padding-left: 2em;
  font-size: 22px !important;
  padding-right: 2em;
}
.c-btn-m {
  width: calc(var(--btn-width) * 0.7);
  min-height: calc(var(--btn-height) * 0.7);
  font-size: 20px !important;
  padding-left: 2em;
  padding-right: 2em;
}
.c-btn-s {
  width: calc(var(--btn-width) * 0.6);
  min-height: calc(var(--btn-height) * 0.6);
  font-size: 18px !important;
  padding-left: 1.7em;
  padding-right: 1.7em;
}
.c-btn-xs {
  width: calc(var(--btn-width) * 0.5);
  min-height: calc(var(--btn-height) * 0.5);
  font-size: 18px !important;
  padding-left: 1.7em;
  padding-right: 1.7em;
}
.c-btn-xxs {
  width: calc(var(--btn-width) * 0.4);
  min-height: calc(var(--btn-height) * 0.4);
  font-size: 18px !important;
  padding-left: 1.7em;
  padding-right: 1.7em;
}
/*------ Button Decoration -------*/
.c-btn-shadow {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
}

/*------------------------------
    Button Arrow
------------------------------*/

/*------ Button Arrow  -------*/
.c-btnArrow::after {
  content: "";
  display: block !important;
  width: 0px;
  height: 0px;
  margin: auto;
  background-color: transparent !important;
  border-style: solid;
  border-width: 0px 0.3em 0.55em;
  border-color: transparent transparent var(--pallet-red);
  border-radius: unset;
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%) !important;
  z-index: 100;
}

/*------ Button Arrow Direction -------*/
.c-btnArrow-up::after {
  transform: translateY(-50%) rotate(0deg) !important;
}
.c-btnArrow-right::after {
  transform: translate(0.1em, -0.25em) rotate(90deg) !important;
}
.c-btnArrow-down::after {
  transform: translate(0em, -0.1em) rotate(180deg) !important;
}
.c-btnArrow-left::after {
  transform: translateY(-50%) rotate(270deg) !important;
}

/*------ Button Arrow Color -------*/
.c-btnArrow-black::after {
  border-color: transparent transparent var(--pallet-black);
}
.c-btnArrow-beige::after {
  border-color: transparent transparent var(--pallet-beige);
}
.c-btnArrow-red::after {
  border-color: transparent transparent var(--pallet-red);
}
.c-btnArrow-green::after {
  border-color: transparent transparent var(--pallet-green);
}
.c-btnArrow-deep-green::after {
  border-color: transparent transparent var(--pallet-deep-green);
}
.c-btnArrow-pink::after {
  border-color: transparent transparent var(--pallet-pink);
}
.c-btnArrow-white::after {
  border-color: transparent transparent #fff;
}


/*------------------------------
    Button Arrow & Circle
------------------------------*/

/*------ Button Arrow & Circle  -------*/
.c-btnArrowCircle::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  margin: auto !important;
  background-color: #fff !important;
  border-color: #fff !important;
  border-radius: 70px;
  position: absolute;
  left: 0.7em !important;
  top: 50%;
  transform: translateY(-50%);
}
.c-btnArrowCircle::after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  margin: auto;
  background-color: transparent !important;
  border-style: solid;
  border-width: 0px 0.2em 0.34em;
  border-color: transparent transparent var(--pallet-red);
  border-radius: unset;
  position: absolute;
  left: 1em;
  right: auto !important;
  top: 50%;
  transform: translateY(-50%) !important;
  z-index: 2;
}

/*------ Button Arrow & Circle Direction -------*/
.c-btnArrowCircle-up::after {
  transform: translate(0em, -0.2em) rotate(0deg) !important;
}
.c-btnArrowCircle-right::after {
  transform: translate(0.05em, -0.15em) rotate(90deg) !important;
}
.c-btnArrowCircle-down::after {
  transform: translate(0em, -0.1em) rotate(180deg) !important;
}
.c-btnArrowCircle-left::after {
  transform: translate(-0.05em, -0.15em) rotate(270deg) !important;
}

/*------ Button Arrow & Circle Color -------*/
.c-btnArrowCircle-black::after {
  border-color: transparent transparent var(--pallet-black);
}
.c-btnArrowCircle-beige::after {
  border-color: transparent transparent var(--pallet-beige);
}
.c-btnArrowCircle-red::after {
  border-color: transparent transparent var(--pallet-red);
}
.c-btnArrowCircle-green::after {
  border-color: transparent transparent var(--pallet-green);
}
.c-btnArrowCircle-deep-green::after {
  border-color: transparent transparent var(--pallet-deep-green);
}
.c-btnArrowCircle-pink::after {
  border-color: transparent transparent var(--pallet-pink);
}
.c-btnArrowCircle-white::after {
  border-color: transparent transparent #fff;
}


/*------ Button Arrow Position -------*/
.c-btnArrow-R::before {
  left: auto !important;
  right: 0.9em !important;
}
.c-btnArrow-R::after {
  left: auto !important;
  right: 1.2em !important;
}


/*------------------------------
    Background
------------------------------*/

.c-bgGradient-red {
  color: #fff !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#fa5f6b), to(#c40312));
  background: var(--gradient-red);
}
.c-bgGradient-green {
  color: #fff !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#6fbc2c), to(#408504));
  background: var(--gradient-green);
}

.c-bgGradient-deep-green {
  color: #fff !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#429c00), to(#1f6500));
  background: var(--gradient-deep-green);
}
.c-bg-red {
  color: #fff !important;
  background-color: var(--pallet-red);
}
.c-bg-green {
  color: #fff !important;
  background-color: var(--pallet-green);
}
.c-bg-deep-green {
  color: #fff !important;
  background-color: var(--pallet-deep-green);
}
.c-bg-beige {
  color: #fff !important;
  background-color: var(--pallet-beige);
}
.c-bg-pink {
  color: #fff !important;
  background-color: var(--pallet-pink);
}
.c-bg-black {
  color: #fff !important;
  background-color: #1A1311 !important;
}