/*----------------------------------------------

[Theme CSS]

Theme   : Shock
Version : 1.0.0
Author  : Codings
Support : codings.dev

----------------------------------------------*/

/*----------------------------------------------

[Content Index]

1. Color
2. Theme Mode
3. Typography

----------------------------------------------*/

/*----------------------------------------------
1. Color
----------------------------------------------*/

/* #region Color */

:root {

	/* Primary */
	--shock-primary-color: #07beb8;
	--shock-primary-15-color: #07beb826;
	--shock-primary-25-color: #07beb840;
	--shock-primary-50-color: #07beb880;
	--shock-primary-75-color: #07beb8bf;

	/* Secondary */
	--shock-secondary-color: #6917d0;
	--shock-secondary-15-color: #6917d026;
	--shock-secondary-25-color: #6917d040;
	--shock-secondary-50-color: #6917d080;
	--shock-secondary-75-color: #6917d0bf;

	/* Tertiary */
	--shock-tertiary-color: #ff1791;
	--shock-tertiary-15-color: #ff179126;
	--shock-tertiary-25-color: #ff179140;
	--shock-tertiary-50-color: #ff179180;
	--shock-tertiary-75-color: #ff1791bf;

	/* Auxiliary */
	--shock-accent-color: #fedc00;
	--shock-success-color: #007a4d;
	--shock-danger-color: #e63946;

	/* White */
	--shock-white-color: #ffffff;
	--shock-white-10-color: #ffffff1a;
	--shock-white-25-color: #ffffff40;
	--shock-white-50-color: #ffffff80;
	--shock-white-65-color: #ffffffa6;
	--shock-white-75-color: #ffffffbf;
	--shock-white-85-color: #ffffffd9;

	/* Gray */	
	--shock-gray-color: #8f93a5;
	--shock-gray-10-color: #8f93a51a;
	--shock-gray-25-color: #8f93a540;
	--shock-gray-50-color: #8f93a580;
	--shock-gray-65-color: #8f93a5a6;
	--shock-gray-75-color: #8f93a5bf;
	--shock-gray-85-color: #8f93a5d9;

	/* Black */
	--shock-black-color: #1a1a20;
	--shock-black-10-color: #1a1a201a;
	--shock-black-25-color: #1a1a2040;
	--shock-black-50-color: #1a1a2080;
	--shock-black-65-color: #1a1a20a6;
	--shock-black-75-color: #1a1a20bf;
	--shock-black-85-color: #1a1a20d9;
}

/* #endregion Color */

/*----------------------------------------------
2. Theme Mode
----------------------------------------------*/

/* #region Theme Mode */

:root .scheme-light {
	--color-1: var(--shock-white-color);
	--color-2: var(--shock-black-color);
	--color-3: var(--shock-gray-25-color);
}

:root .scheme-dark {
	--color-1: var(--shock-black-color);
	--color-2: var(--shock-white-color);
	--color-3: var(--shock-gray-10-color);
}

.shock-body {
	background-color: var(--color-1);
	font-family: var(--shock-primary-font);
	color: var(--shock-gray-color);
}

.shock-body .shock-scheme .scheme-color,
.shock-body .shock-main .scheme-color {
	color: var(--color-2);
}

.shock-body .shock-scheme .scheme-link-color,
.shock-body .shock-main .scheme-link-color {
	color: var(--color-2);
}

.shock-body .shock-scheme .scheme-link-color:hover,
.shock-body .shock-main .scheme-link-color:hover {
	color: var(--color);
}

.shock-body .shock-scheme .scheme-bg-color,
.shock-body .shock-main .scheme-bg-color {
	background-color: var(--color-2);
}

/* #endregion Theme Mode */

/*----------------------------------------------
3. Typography
----------------------------------------------*/

/* #region Typography */

:root {
	--shock-primary-font: Lato, sans-serif;
	--shock-secondary-font: Proxima Nova, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
	font-family: var(--shock-secondary-font);  
  line-height: 1.2;
	color: var(--color-2);
}

h1 { font-size: 4.5rem; font-weight: 800; }
h2 { font-size: 2.2rem; font-weight: 800; }
h3 { font-size: 1.75rem; font-weight: 700; }
h4 { font-size: 1.5rem; font-weight: 700; }
h5 { font-size: 1.2rem; font-weight: 700; }
h6 { font-size: 1rem; font-weight: 700; }

@media (max-width: 767px) {
	h1 { font-size: 3rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.2rem; }
	h5 { font-size: 1.1rem; }
	h6 { font-size: 1rem; }
}

.text-style-1, 
.text-style-2, 
.text-style-3, 
.text-style-4, 
.text-style-5, 
.text-style-6, 
.text-style-7, 
.text-style-8 {
	font-family: var(--shock-secondary-font);  
	line-height: 1.2;
}

.text-style-1 { font-size: 6.2rem; font-weight: 800; }
.text-style-2 { font-size: 5.2rem; font-weight: 800; }
.text-style-3 { font-size: 4.2rem; font-weight: 800; }
.text-style-4 { font-size: 4.2rem; font-weight: 100; }
.text-style-5 { font-size: 3.2rem; font-weight: 800; }
.text-style-6 { font-size: 3.2rem; font-weight: 100; }
.text-style-7 { font-size: 2.2rem; font-weight: 700; }
.text-style-8 { font-size: 2.2rem; font-weight: 100; }
.text-style-9 { font-size: 1.75rem; font-weight: 700; }
.text-style-10 { font-size: 1.75rem; font-weight: 100; }
.text-style-11 { font-size: 1.2rem; font-weight: 700; }
.text-style-12 { font-size: 1.2rem; font-weight: 400; }

@media (max-width: 767px) {
	.text-style-1 { font-size: 3rem; }
	.text-style-2 { font-size: 3rem; }
	.text-style-3 { font-size: 3rem; }
	.text-style-4 { font-size: 3rem; }
	.text-style-5 { font-size: 2.2rem; font-weight: 700; }
	.text-style-6 { font-size: 2.2rem; }
	.text-style-7 { font-size: 1.75rem; }
	.text-style-8 { font-size: 1.75rem; }	
	.text-style-9 { font-size: 1.5rem; }
	.text-style-10 { font-size: 1.5rem; }
	.text-style-11 { font-size: 1.2rem; }
	.text-style-12 { font-size: 1rem; }
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

p:last-child {
	margin-bottom: 0;
}

b,
strong {
  font-weight: 700;
	filter: brightness(0.75);
}

small, .small {
  font-size: 0.85rem;
}

body {
	width: 100%;
	height: 100%;
  margin: 0;
	font-family: var(--shock-primary-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

/* #endregion Typography */

/* #region Slider */

:root .slider.scheme-1 {
	--color-1: var(--black-color);
	--color-2: var(--color);
	--color-3: var(--white-color);
	--color-4: var(--white-color);
	--color-5: var(--black-10-color);
  }
  
  :root .slider.scheme-2 {
	--color-1: var(--white-color);
	--color-2: var(--color);
	--color-3: var(--black-color);
	--color-4: var(--white-color);
	--color-5: var(--white-10-color);
  }
  
  :root .slider.scheme-3 {
	--color-1: var(--color);
	--color-2: var(--black-color);
	--color-3: var(--white-color);
	--color-4: var(--white-color);
	--color-5: var(--black-10-color);
  }
  
  :root .slider.scheme-4 {
	--color-1: var(--color);
	--color-2: var(--white-color);
	--color-3: var(--white-color);
	--color-4: var(--black-color);
	--color-5: var(--white-10-color);
  }
  
  .swiper.thumbnails {
	  margin-top: 15px;
  }
  
  .swiper.gapped {
	  padding: 0 45px;
	  background-color: var(--color-1);
  }
  
  .swiper.gapped:before {
	  content: '';
	  position: absolute;
	  z-index: 2;
	  top: 0;
	  left: 0;
	  width: 45px;
	  height: 100%;
	  background-color: inherit;
  }
  
  .swiper.gapped:after {
	  content: '';
	  position: absolute;
	  z-index: 2;
	  top: 0;
	  right: 0;
	  width: 45px;
	  height: 100%;
	  background-color: inherit;
  }
  
  .swiper.has-overflow {
	  overflow: inherit;
  }
  
  .swiper.has-overflow-right {
	  overflow: inherit;
	  width: 85%;
	  margin-left: initial;
	  margin-right: auto;
  }
  
  .swiper.has-gap .swiper-slide {
	  padding: 15px;
  }
  
  .swiper .swiper-slide .image {
	  width: 100%;
	  display: block;
  }
  
  .swiper .swiper-slide .image.large {
	  position: relative;
	  right: 10%;
	  width: 120%;
  }
  
  .swiper.thumbnails .swiper-slide .image {
	  height: 120px;
	  object-fit: cover;
  }
  
  .swiper .swiper-button-next, .swiper .swiper-button-prev {
	  top: 50%;
	  width: 45px;
	  height: 45px;
	  justify-content: center;
	  align-items: center;
	  background-color: var(--color-1);
	  color: var(--color-3);
	  -webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  -moz-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
  }
  
  .swiper.has-pagination .swiper-button-next, .swiper.has-pagination .swiper-button-prev {
	  top: calc(50% - 20px);
  }
  
  .swiper.has-scrollbar .swiper-button-next, .swiper.has-scrollbar .swiper-button-prev {
	  top: calc(50% - 10px);
  }
  
  .swiper .swiper-button-next:hover, .swiper .swiper-button-prev:hover {
	  background-color: var(--color-2);
	  color: var(--color-4);
  }
  
  .swiper .swiper-button-next {
	  right: 0;
  }
  
  .swiper .swiper-button-prev {
	  left: 0;
  }
  
  .swiper .swiper-button-next.simple, .swiper .swiper-button-prev.simple {
	  width: auto;
	  background-color: transparent;
	  color: var(--color-3);
  }
  
  .swiper .swiper-button-next.simple:hover, .swiper .swiper-button-prev.simple:hover {
	  background-color: transparent;
	  color: var(--color);
  }
  
  .swiper .swiper-button-next:after, .swiper .swiper-button-prev:after {
	  font-size: 1.5rem;
  }
  
  .swiper .swiper-side-gaps-prev {
	  position: absolute;
	  z-index: 1;
	  top: 0;
	  left: 0;
	  width: 15px;
	  height: 100%;
	  background-color: var(--color);
  }
  
  .swiper .swiper-side-gaps-next {
	  position: absolute;
	  z-index: 1;
	  top: 0;
	  right: 0;
	  width: 15px;
	  height: 100%;
	  background-color: var(--color);
  }
  
  .swiper.gapped .swiper-side-gaps-prev {
	  width: 60px;
  }
  
  .swiper.gapped .swiper-side-gaps-next {
	  width: 60px;
  }
  
  .swiper .swiper-pagination-bullets {
	  position: relative;
	  top: 0;
	  padding: 5px;
  }
  
  .swiper .swiper-pagination-bullets.absolute {
	  position: absolute;
	  top: initial;
	  bottom: 2.5rem;
	  padding: 0;
  }
  
  .swiper .swiper-pagination-bullet {
	  width: 10px;
	  height: 10px;
	  vertical-align: middle;
	  border-radius: 50%;
	  border: 2px solid;
	  border-color: var(--color-1);
	  background-color: transparent;
	  opacity: 0.25;
	  -webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  -moz-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
  }
  
  .swiper .swiper-pagination-bullet:hover {
	  border: 2px solid;
	  border-color: var(--color);
	  background-color: var(--color);
	  opacity: 1;
  }
  
  .swiper .swiper-pagination-bullet-active {
	  width: 14px;
	  height: 14px;
	  border: 2px solid;
	  border-color: var(--color);
	  background-color: var(--color);
	  opacity: 1;
  }
  
  .swiper .swiper-scrollbar {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 8px;
	  margin: auto;
	  border-radius: 0;
	  background-color: var(--color-5);
  }
  
  .swiper.has-gap .swiper-scrollbar {
	  left: 25px;
	  width: calc(100% - 50px);
  }
  
  .swiper.has-side-gaps .swiper-scrollbar {
	  left: 15px;
	  width: calc(100% - 30px);
  }
  
  .swiper.gapped .swiper-scrollbar {
	  left: 60px;
	  width: calc(100% - 120px);
  }
  
  .swiper .swiper-scrollbar-drag {
	  position: relative;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: var(--color);
	  border-radius: 0;
	  cursor: grab;
  }
  
  .swiper .drag-text {
	  margin: 10px 10px 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  
  .swiper .drag-text .text {
	  margin: 0 10px;
	  font-size: 0.85rem;
  }
  
  .swiper.has-drag-text:hover .drag-text .text {
	  animation: expand-animation;
	  animation-duration: 1s;
	  animation-iteration-count: 2;
  }
  
  .swiper .item:active,
  .swiper .full-link:active {
	  cursor: grabbing;
  }
  
  /* #endregion Slider */